Fix issue #255, exposes site url and editor url to JS and editor

jinja2/includes/config.html

@@ -45,5 +45,12 @@
                 {% endif %}
             {% endfor %}
         {% endif %}
+
+        // interactive editor config
+        win.mdn.interactiveEditor = {
+            siteUrl: "{{ settings.SITE_URL }}",
+            editorUrl: "{{ settings.INTERACTIVE_EXAMPLES_BASE }}"
+        };
+
     })(this);
 </script>

kuma/settings/common.py

@@ -45,6 +45,10 @@ def __call__(self, value):
 STAGING_DOMAIN = 'developer.allizom.org'
 STAGING_URL = PROTOCOL + STAGING_DOMAIN
 
+INTERACTIVE_EXAMPLES_BASE = config(
+    'https://interactive-examples.mdn.mozilla.net',
+    default='https://interactive-examples.mdn.mozilla.net')
+
 MAINTENANCE_MODE = config('MAINTENANCE_MODE', default=False, cast=bool)
 ALLOW_ROBOTS = config('ALLOW_ROBOTS', default=False, cast=bool)
 

kuma/static/js/analytics.js

@@ -9,7 +9,8 @@
          * @param {Object} event - The event Object received from the postMessage
          */
         interactiveExamplesEvent: function(event) {
-            if (event.origin !== 'https://interactive-examples.mdn.mozilla.net') {
+            var allowedOrigin = win.mdn.interactiveEditor.editorUrl || 'https://interactive-examples.mdn.mozilla.net';
+            if (event.origin !== allowedOrigin) {
                 return false;
             }
             mdn.analytics.trackEvent(event.data);

kuma/static/js/interactive.js

@@ -3,6 +3,11 @@
 
     var iframe = document.querySelector('iframe.interactive');
     var mediaQuery = window.matchMedia('(min-width: 63.9385em)');
+    var siteUrl =
+        window.mdn.interactiveEditor.siteUrl || 'https://developer.mozilla.org';
+    var targetOrigin =
+        window.mdn.interactiveEditor.editorUrl ||
+        'https://interactive-examples.mdn.mozilla.net';
 
     /* If there is no `iframe`, or if this is a JS example,
     simply return */
@@ -13,32 +18,43 @@
     /**
      * A simple wrapper function for the `postMessage`s sent
      * to the interactive editor iframe
-     * @param {Boolean} isSmallViewport - Boolean indicating whether to add, or
-     * remove the `small-desktop-and-below` class
+     * @param {Object} message - The message object sent to the interactive editor
      */
-    function postToEditor(isSmallViewport) {
-        iframe.contentWindow.postMessage(
-            { smallViewport: isSmallViewport },
-            'https://interactive-examples.mdn.mozilla.net'
-        );
+    function postToEditor(message) {
+        iframe.contentWindow.postMessage(message, targetOrigin);
+    }
+
+    /**
+     * Posts back the current site URL.
+     * @param {Object} event - The event Object received from postMessage
+     */
+    function postSiteUrl(event) {
+        /* only post the site url if the correct property
+        exists on the message object, and its value is true */
+        if (event.data.siteUrl) {
+            postToEditor({ siteUrl: siteUrl });
+        }
     }
 
     /* As the user sizes the browser or tilts their device,
     listen for mediaQuery events and communicate the new
     viewport state to the interactive editor */
     mediaQuery.addListener(function(event) {
         if (event.matches) {
-            postToEditor(false);
+            postToEditor({ smallViewport: false });
         } else {
-            postToEditor(true);
+            postToEditor({ smallViewport: true });
         }
     });
 
     window.onload = function() {
         // if the mediaQuery does not match on load
         if (!mediaQuery.matches) {
             // add the class `small-desktop-and-below`
-            postToEditor(true);
+            postToEditor({ smallViewport: true });
         }
+
+        // add event listener for postMessages from the interactive editor
+        window.addEventListener('message', postSiteUrl, false);
     };
 })();