make it interactive

jsnkuhn · Dec 4, 2020 · 821e9ed · 821e9ed
1 parent d39a548
commit 821e9ed
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 14 deletions.
diff --git a/backdrop/index.html b/backdrop/index.html
@@ -4,29 +4,47 @@
     <title>MDN Web Docs Example: Toggling full-screen mode</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- import the webpage's stylesheet -->
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="styles.css">
+    <style class="editable">
+        video::backdrop {
+          background-color: #448;
+        }
+    </style>
 
     <!-- import the webpage's javascript file -->
     <script src="script.js" defer></script>
   </head>  
   <body>
-    <h1>Example: Toggling full-screen presentation of a video</h1>
-
-    <p>In this example, we see a video element showing a movie ("Big Buck Bunny").
-    you can toggle full screen mode on and off by pressing the Return or Enter key.</p>
-
-    <!-- Simple video example -->
-    <!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
-    <!-- Poster from peach.blender.org -->
-    <video controls
+    <section class="preview">
+      <video controls
         src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
         poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
         width="620">
 
-    Sorry, your browser doesn't support embedded videos.  Time to upgrade!
+        Sorry, your browser doesn't support embedded videos.  Time to upgrade!
+
+      </video>
+    </section>
+
+<textarea class="playable playable-css" style="height: 100px;">
+video::backdrop {
+  background-color: #448;
+}
+</textarea>
+
+<textarea class="playable playable-html" style="height: 200px;">
+<video controls
+  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+  width="620">
+Sorry, your browser doesn't support embedded videos.  Time to upgrade!
+</video>
+</textarea>
 
-    </video>
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset" />
+      </div>
+    </body>
+    <script src="playable.js"></script>
   </body>
 </html>
diff --git a/backdrop/playable.js b/backdrop/playable.js
@@ -0,0 +1,22 @@
+var section = document.querySelector('section');
+var editable = document.querySelector('.editable');
+var textareaHTML = document.querySelector('.playable-html');
+var textareaCSS = document.querySelector('.playable-css');
+var reset = document.getElementById('reset');
+var htmlCode = textareaHTML.value;
+var cssCode = textareaCSS.value;
+
+function fillCode() {
+    editable.innerHTML = textareaCSS.value;
+    section.innerHTML = textareaHTML.value;
+}
+
+reset.addEventListener('click', function () {
+    textareaHTML.value = htmlCode;
+    textareaCSS.value = cssCode;
+    fillCode();
+});
+
+textareaHTML.addEventListener('input', fillCode);
+textareaCSS.addEventListener('input', fillCode);
+window.addEventListener('load', fillCode);
diff --git a/backdrop/styles.css b/backdrop/styles.css
@@ -0,0 +1,61 @@
+/* Some default styling for cookbook examples */
+/* 
+rgb(53,43,34)
+rgb(75,70,74)
+rgb(95,97,110)
+rgb(137,151,188)
+rgb(160,178,226)
+*/
+body { 
+    background-color: #fff;
+    color: #333;
+    font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+    padding: 0;
+    margin: 0;
+}
+
+/* styles for the editor */
+
+.playable {
+    font-family: monospace;
+    display: block;
+    margin-bottom: 10px;
+    background-color: #F4F7F8;
+    border: none;
+    border-left: 6px solid #558ABB;
+    color: #4D4E53;
+    width: 90%;
+    max-width: 700px;
+    padding: 10px 10px 0px;
+    font-size: 90%;
+  }
+
+  .playable-css {
+    height: 80px;
+  }
+
+  .playable-html {
+    height: 160px;
+  }
+
+  .playable-buttons {
+    text-align: right;
+    width: 90%;
+    max-width: 700px;
+    padding: 5px 10px 5px 26px;
+    font-size: 100%;
+  }
+
+  .preview {
+    width: 90%;
+    max-width: 700px;
+    border: 1px solid #4D4E53;
+    border-radius: 2px;
+    padding: 10px 14px 10px 10px;
+    margin-bottom: 10px;
+  }
+
+  .preview input {
+    display: block;
+    margin: 5px;
+  }