Added the logic of wrapper + responsiveness controllers.

layouts/scripts/page--toolbar.js

@@ -1,13 +1,38 @@
 (function () {
 
-  const dataOptionsSelect = document.getElementById('data-options');
-  if (!dataOptionsSelect) {
-    return;
+  const previewFrame = document.getElementById('preview_frame');
+
+  initDataOptions();
+  initResponsiveMode();
+
+  /**
+   * Functions
+   */
+
+  function initDataOptions() {
+    const dataOptionsSelect = document.getElementById('data-options');
+    if (!dataOptionsSelect) {
+      return;
+    }
+
+    dataOptionsSelect.addEventListener('change', function () {
+      previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    });
   }
 
-  dataOptionsSelect.addEventListener('change', function () {
-    console.log(this.value)
-    window.location = '?data=' + this.value;
-  })
+  function initResponsiveMode() {
+
+    document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
+      input.addEventListener('change', (event) => {
+        const mode = event.target.value;
+
+        previewFrame.classList.remove('breakpoint--desktop');
+        previewFrame.classList.remove('breakpoint--tablet');
+        previewFrame.classList.remove('breakpoint--mobile');
+
+        previewFrame.classList.add('breakpoint--' + mode);
+      });
+    });
+  }
 
 })();