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);
};
})();