diff --git a/jinja2/includes/config.html b/jinja2/includes/config.html index ff9dd1e244d..d83971e9875 100644 --- a/jinja2/includes/config.html +++ b/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); diff --git a/kuma/settings/common.py b/kuma/settings/common.py index 0b923e0f67f..4d7c03d851a 100755 --- a/kuma/settings/common.py +++ b/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) diff --git a/kuma/static/js/analytics.js b/kuma/static/js/analytics.js index 492a8e901f9..945eaca58d2 100644 --- a/kuma/static/js/analytics.js +++ b/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); diff --git a/kuma/static/js/interactive.js b/kuma/static/js/interactive.js index 8967f2c8d09..5706dcdaa75 100644 --- a/kuma/static/js/interactive.js +++ b/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,14 +18,22 @@ /** * 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, @@ -28,9 +41,9 @@ viewport state to the interactive editor */ mediaQuery.addListener(function(event) { if (event.matches) { - postToEditor(false); + postToEditor({ smallViewport: false }); } else { - postToEditor(true); + postToEditor({ smallViewport: true }); } }); @@ -38,7 +51,10 @@ // 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); }; })();