Support embedding SlideShare as a media

Author: tamamu

static/main.js

@@ -1,4 +1,8 @@
 
+const youtubeEmbedSchema = /^https:\/\/www\.youtube\.com\/embed\/.+/;
+const youtubeWatchSchema = /^https:\/\/www\.youtube\.com\/watch\?v=(.+)/;
+const slideshareSchema = /^\/\/www\.slideshare\.net\/slideshow\/embed_code\/key\/.+/;
+
 const initializeOptions =
   new InitializeOptions()
   .plugins(["cl-exercise"])
@@ -80,18 +84,23 @@ function createMediaIframe() {
 }
 
 function embedMedia(src) {
-  const youtubeEmbedSchema = /^https:\/\/www.youtube.com\/embed\/.+/;
-  const youtubeWatchSchema = /^https:\/\/www.youtube.com\/watch\?v=(.+)/;
   let mediaElement = document.getElementById("media-area");
   let watchSchemaResult = null;
   if (src.match(youtubeEmbedSchema)) {
     let frame = createMediaIframe();
+    mediaElement.classList.add("youtube")
     mediaElement.appendChild(frame);
     frame.src = src;
   } else if (watchSchemaResult = src.match(youtubeWatchSchema)) {
     let frame = createMediaIframe();
+    mediaElement.classList.add("youtube")
     mediaElement.appendChild(frame);
     frame.src = `https://www.youtube.com/embed/${watchSchemaResult[1]}`;
+  } else if (src.match(slideshareSchema)) {
+    let frame = createMediaIframe();
+    mediaElement.classList.add("slideshare");
+    mediaElement.appendChild(frame);
+    frame.src = src;
   } else {
     console.error("Unknown media");
   }
@@ -117,7 +126,7 @@ window.onload = () => {
     lineNumbers: true,
     tabSize: 2,
     matchBrackets: true,
-    autofocus: true,
+    autofocus: false,
     viewportMargin: Infinity
   });
   codeMirror.setSize("100%", "auto");

templates/exercise.html

@@ -43,7 +43,9 @@
     <button class="modal-close is-large" aria-label="close"></button>
   </div>
   <style>
-    #media-area{position:relative;padding-top:56.25%;margin-bottom:24px;}
+    #media-area{position:relative;margin-bottom:24px;}
+    #media-area.youtube{padding-top:56.25%;}
+    #media-area.slideshare{padding-top:56.25%;}
     #media-area .media{position:absolute;top:0;right:0;width:100% !important;height:100% !important;}
   </style>
   <section class="section" style="flex: 1;">