fix(editor): warn if JavaScript disabled or unsupported feature (#759)

Co-authored-by: wbamberg <will@bootbonnet.ca>
mdn · Apr 29, 2022 · 08fe714 · 08fe714
1 parent 838e6ff
commit 08fe714
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/editor/css/editor-libs/common.css b/editor/css/editor-libs/common.css
@@ -504,6 +504,17 @@ body {
   z-index: 4;
 }
 
+.warning {
+  position: relative;
+  padding: 1rem 1rem 1rem 3rem;
+  margin: 1rem;
+  background-color: var(--background-warning);
+  border-radius: var(--elem-radius);
+  border: 1px solid var(--border-secondary);
+  border-left: 4px solid var(--icon-warning);
+  color: var(--text-secondary);
+}
+
 .fade-in {
   animation: fadein 0.5s;
 }
@@ -517,7 +528,7 @@ body {
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 .show {

diff --git a/editor/js/editable-css.js b/editor/js/editable-css.js
@@ -7,16 +7,17 @@
 
   var exampleChoiceList = document.getElementById("example-choice-list");
   var exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
-  var header = document.querySelector("header");
+  var editorWrapper = document.getElementById("editor-wrapper");
   var initialChoice = 0;
   var originalChoices = [];
   var output = document.getElementById("output");
+  var warningNoSupport = document.getElementById("warning-no-support");
 
   /**
    * Enables and initializes the live code editor
    */
   function enableLiveEditor() {
-    header.classList.remove("hidden");
+    editorWrapper.classList.remove("hidden");
     exampleChoiceList.classList.add("live");
     output.classList.remove("hidden");
 
@@ -118,4 +119,7 @@
     mceEvents.onChoose(exampleChoices[initialChoice]);
     clippy.toggleClippy(exampleChoices[initialChoice]);
   }
+  else {
+    warningNoSupport.classList.remove("hidden");
+  }
 })();
diff --git a/editor/js/editor.js b/editor/js/editor.js
@@ -119,8 +119,8 @@
   staticCSSCode.classList.add("hidden");
   // hide the static JS example
   staticJSCode.classList.add("hidden");
-  // show the header
-  header.classList.remove("hidden");
+  // show the content
+  editorContainer.classList.remove("hidden");
 
   /**
    * @returns {string[]} - IDs of editors that should be visible in the example.

diff --git a/editor/tmpl/live-css-tmpl.html b/editor/tmpl/live-css-tmpl.html
@@ -13,11 +13,19 @@
 
 <body>
   <section class="css-editor-container">
-    <header class="output-header hidden">
+    <header class="output-header">
       <h4 class="output-heading">%title%</h4>
       <button id="reset" class="reset" type="button">Reset</button>
     </header>
-    <div class="editor-wrapper">
+    <noscript>
+      <div id="warning-no-script" class="warning">
+        Interactive examples cannot be shown because JavaScript is disabled.
+      </div>
+    </noscript>
+    <div id="warning-no-support" class="warning hidden">
+      This feature is not supported by your current browser. Check Browser compatibility for more details.
+    </div>
+    <div id="editor-wrapper" class="editor-wrapper hidden">
       %example-code%
     </div>
   </section>

diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html
@@ -11,11 +11,16 @@
 </head>
 
 <body>
-    <header class="output-header hidden">
+    <header class="output-header">
         <h4 class="output-heading">%title%</h4>
         <button id="reset" class="reset" type="button">Reset</button>
     </header>
-    <div id="editor-container" class="editor-container %editor-height%" %active-tabs% %default-tab%>
+    <noscript>
+        <div id="warning-no-script" class="warning">
+            Interactive example cannot be shown because JavaScript is disabled.
+        </div>
+    </noscript>
+    <div id="editor-container" class="editor-container %editor-height% hidden" %active-tabs% %default-tab%>
         <section id="tab-container" class="tabs">
             <div class="tab-list" id="tablist" role="tablist">
                 <button role="tab" aria-selected="false" aria-controls="html-panel"