use Ox.Message

pandora/text/templates/pdf/viewer.html

@@ -23,6 +23,7 @@ limitations under the License.
     <link rel="stylesheet" href="/static/pdf.js/viewer.css"/>
 
     <script type="text/javascript" src="/static/oxjs/build/Ox.js"></script>
+    <script type="text/javascript" src="/static/oxjs/source/Ox.UI/js/Core/Message.js"></script>
     <script type="text/javascript" src="/static/pdf.js/compatibility.js"></script>
 
     <!-- This snippet is used in production, see Makefile -->

static/js/pandora.js

@@ -314,16 +314,17 @@ appPanel
             Ox.Theme(pandora.user.ui.theme);
             if (isEmbed) {
                 pandora.$ui.embedPanel = pandora.ui.embedPanel().display();
-                window.addEventListener('message', function(e) {
+                Ox.$parent.onMessage({
-                    var data = {};
+                    settheme: function(data) {
-                    try {
-                        data = JSON.parse(e.data);
-                    } catch(e) {}
                         if (Ox.contains(pandora.site.themes, data.theme)) {
                             Ox.Theme(data.theme);
-                    } else if (pandora.isEmbedURL(data.url)) {
+                        }
+                    },
+                    seturl: function(data) {
+                        if (pandora.isEmbedURL(data.url)) {
                             pandora.URL.push(data.url);
                         }
+                    }
                 });
             } else {
                 pandora.$ui.appPanel = pandora.ui.appPanel().display();

static/js/pandora/embedPanel.js

@@ -126,6 +126,9 @@ pandora.ui.embedPanel = function() {
                             type: data.timeline
                         });
                     }
+                })
+                .bindEvent(function(data, event) {
+                    Ox.$parent.postMessage(event, {});
                 });
 
             $controls = Ox.Element();

static/js/pandora/mainMenu.js

@@ -230,13 +230,11 @@ pandora.ui.mainMenu = function() {
                     var iframe, src;
                     Ox.Theme(value);
                     pandora.UI.set('theme', value);
-                    iframe = $('#embed')[0];
+                    iframe = Ox.UI.elements[$('#embed').data('oxid')];
                     if (iframe) {
-                        src = $(iframe).attr('src');
+                        src = iframe.attr('src');
                         if (src && Ox.parseURL(src).hostname == document.location.hostname) {
-                            iframe.contentWindow.postMessage(JSON.stringify({
+                            iframe.postMessage('settheme', {theme: value});
-                                theme: value
-                            }), '*');
                         }
                     }
                 } else if (data.id == 'showsiteposters') {

static/js/pandora/textPanel.js

@@ -321,17 +321,25 @@ pandora.ui.textHTML = function(text) {
 
 pandora.ui.textPDF = function(text) {
 
-    var that = Ox.Element();
+    var that = Ox.Element(),
+        $iframe;
     if (text.uploaded) {
-        $('<iframe>')
+        $iframe = Ox.Element('<iframe>')
             .attr({
-                height: '100%',
                 frameborder: 0,
+                height: '100%',
                 src: '/texts/' + pandora.user.ui.text + '/text.pdf.html',
                 width: '100%'
             })
+            .onMessage(function(event, data) {
+                if(event == 'edit') {
+                    Ox.Dialog({
+                        title: 'edit',
+                        content: Ox.Element().html('test')
+                    }).open()
+                }
+            })
             .appendTo(that);
-
     } else {
         that.html('UPLOADED: ' + text.uploaded);
     }
@@ -361,7 +369,7 @@ pandora.ui.textEmbed = function() {
             .hide()
             .appendTo(that),
 
-        $iframe = $('<iframe>')
+        $iframe = Ox.Element('<iframe>')
             .attr({
                 height: '100%',
                 id: 'embed',
@@ -397,9 +405,9 @@ pandora.ui.textEmbed = function() {
                 && parsed.url.protocol == parsed.src.protocol
                 && parsed.url.hostname == parsed.src.hostname
             ) {
-                $iframe[0].contentWindow.postMessage(JSON.stringify({
+                $iframe.postMessage('seturl', {
                     url: parsed.url.pathname + parsed.url.search + parsed.url.hash
-                }), '*');
+                });
             } else {
                 $iframe.attr({src: url});                
             }

static/pdf.js/embeds.js

@@ -1,15 +1,6 @@
-window.addEventListener('message', function(event) {
+Ox.Message.bind(function(event, data, oxid) {
-    if (event.origin != 'null' && event.data) {
+    if (Ox.isUndefined(oxid)) {
-        var data = JSON.parse(event.data);
+        //process messages here
-        if (data.event == 'close') {
-            var element = document.getElementById(data.id);
-            Array.prototype.forEach.call(element.parentElement.getElementsByClassName('button'), function(element) {
-                if (editable || element.className == 'button playButton') {
-                    element.style.display = 'block';
-                }
-            });
-            e.parentElement.removeChild(e);
-        }
     }
 });
 
@@ -78,6 +69,9 @@ function getVideoOverlay(page) {
                 e.stopPropagation();
                 var videoId = 'video' + page + id,
                     $iframe = Ox.$('<iframe>')
+                        .on('load', function() {
+                            Ox.Message.post($iframe, 'init', {id: $iframe.oxid});
+                        })
                         .attr({
                             id: videoId,
                             src: getEmbedURL(videoId, video.src),
@@ -86,6 +80,17 @@ function getVideoOverlay(page) {
                             frameborder: 0
                         })
                         .appendTo($interface);
+                Ox.Message.bind(function(event, data, oxid) {
+                    if ($iframe.oxid == oxid) {
+                        if(event == 'close') {
+                            $iframe.remove();
+                        }
+                    }
+                });
+                $iframe.postMessage = function(event, data) {
+                    Ox.Message.post($iframe, event, data);
+                    return $iframe;
+                };
                 $playButton.hide();
                 $editButton.hide();
                 return false;
@@ -94,7 +99,17 @@ function getVideoOverlay(page) {
                 var url;
                 e.preventDefault();
                 e.stopPropagation();
-                
+                if(window.parent) {
+                    Ox.$parent.postMessage('edit', {
+                        video: video
+                            ? video
+                            : {
+                                id: id,
+                                page: page,
+                                src: ''
+                            }
+                    });
+                } else {
                     url = prompt(
                         'Please enter a pan.do/ra video URL, like\n'
                         + 'https://0xdb.org/0315594/00:13:37,00:23:42 or\n'
@@ -115,6 +130,8 @@ function getVideoOverlay(page) {
                         saveVideoOverlay();
                         url !== '' ? enableVideoUI() : disableVideoUI()
                     }
+                }
+
                 return false;
             }
             function enableVideoUI() {