修改动态加载lib

docs/lab/css/common.css

@@ -21,7 +21,7 @@ html, body {
   overflow: hidden;
 }
 
-.part-left .controls {
+.part-left .header {
   display: flex;
   align-items: center;
   height: 40px;
@@ -31,17 +31,28 @@ html, body {
   box-sizing: border-box;
 }
 
-.part-left .controls .left {
+.part-left .header .left {
   display: flex;
   align-items: center;
   flex: 1;
 }
 
-.part-left .controls .left .logo {
+.part-left .header .left .logo {
   padding-right: 30px;
 }
 
-.part-left .controls .run {
+.part-left .lib {
+  height: 50px;
+  padding: 5px;
+  outline: none;
+  resize: none;
+  border: none;
+  font-size: 13px;
+  color: #666;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-left .header .run {
   height: 30px;
   width: 100px;
 }

docs/lab/index.html

@@ -19,15 +19,15 @@
 <body>
     <div class="container">
         <div class="part-left">
-            <div class="controls">
+            <div class="header">
                 <div class="left">
                     <a href="./" class="logo">ArtPlayer.js Lab</a>
+                    <a href="../docs" class="logo">Github</a>
                     <a href="../docs" class="logo">Document</a>
-                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
-                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                 </div>
                 <input class="run" type="button" value="Run Code">
             </div>
+            <textarea class="lib" cols="30" rows="10" placeholder="Other dependencies, multiple line breaks" spellcheck="false"></textarea>
             <div class="code"></div>
         </div>
         <div class="part-right">
@@ -41,7 +41,6 @@
     <script src="./plugins/codemirror.js"></script>
     <script src="./plugins/javascript.js"></script>
     <script src="./js/artplayer.js"></script>
-    <script src="./js/artplayer-plugin-subtitle.js"></script>
     <script src="./js/common.js"></script>
     <script>
         var _hmt = _hmt || [];
@@ -52,9 +51,6 @@
           s.parentNode.insertBefore(hm, s);
         })();
     </script>
-    <script>
-        loadCode('./js/index.js');
-    </script>
 </body>
 
 </html>

docs/lab/js/common.js

@@ -1,83 +1,151 @@
 (function(win) {
-  var $code = document.querySelector('.code');
-  var $run = document.querySelector('.run');
-  var fileCode = '';
+    var $code = document.querySelector('.code');
+    var $run = document.querySelector('.run');
+    var $lib = document.querySelector('.lib');
+    var defaultLib = './js/artplayer-plugin-subtitle.js';
+    var loaddLib = [];
 
-  consola.creat({
-    target: '.console',
-    size: '100%',
-    zIndex: 99
-  });
-
-  var mirror = CodeMirror($code, {
-    lineNumbers: true,
-    mode: 'javascript',
-    matchBrackets: true,
-    value: ''
-  });
-
-  function initApp(app) {
-    consola.clean();
-    Artplayer.config.video.events.forEach(item => {
-      app.on('video:' + item, event => {
-        console.log('video: ' + event.type);
-      });
+    consola.creat({
+        target: '.console',
+        size: '100%',
+        zIndex: 99,
     });
-  }
 
-  function getURLParameters(url) {
-    return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
-      (a, v) => (
-        (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
-      ),
-      {}
-    );
-  }
+    var mirror = CodeMirror($code, {
+        lineNumbers: true,
+        mode: 'javascript',
+        matchBrackets: true,
+        value: '',
+    });
 
-  function loadCode(url) {
-    const { code } = getURLParameters(window.location.href);
-    if (code) {
-      mirror.setValue(decodeURIComponent(code).trim());
-      runCode();
-    } else {
-      fetch(url)
-        .then(response => {
-          return response.text();
-        })
-        .then(text => {
-          var code = text.trim();
-          mirror.setValue(code);
-          runCode();
-          fileCode = code;
-          return text;
-        })
-        .catch(err => {
-          console.error(err.message);
+    function initArt(art) {
+        Artplayer.config.video.events.forEach(item => {
+            art.on('video:' + item, event => {
+                console.log('video: ' + event.type);
+            });
         });
     }
-  }
 
-  function runCode() {
-    Artplayer.instances.forEach(ins => {
-      ins.destroy(true);
-    });
-    var code = mirror.getValue();
-    eval(code);
-    initApp(Artplayer.instances[0]);
-  }
-
-  $run.addEventListener('click', function(e) {
-    runCode();
-    if (fileCode !== mirror.getValue()) {
-      const code = encodeURIComponent(mirror.getValue());
-      const url = window.location.origin + window.location.pathname + '?code=' + code;
-      history.pushState(null, null, url);
+    function getURLParameters(url) {
+        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
+            (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
+            {},
+        );
     }
-  });
 
-  win.addEventListener('error', err => {
-    console.error(err.message);
-  });
+    function getExt(url) {
+        if (url.includes('?')) {
+            return getExt(url.split('?')[0]);
+        }
 
-  win.loadCode = loadCode;
+        if (url.includes('#')) {
+            return getExt(url.split('#')[0]);
+        }
+
+        return url
+            .trim()
+            .toLowerCase()
+            .split('.')
+            .pop();
+    }
+
+    function loadScript(url) {
+        return new Promise(function(resolve, reject) {
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.onload = function() {
+                resolve(url);
+            };
+            document.querySelector('head').appendChild(script);
+        });
+    }
+
+    function loadStyle(url) {
+        return new Promise(function(resolve) {
+            var style = document.createElement('style');
+            style.type = 'text/css';
+            style.src = url;
+            document.querySelector('head').appendChild(style);
+            resolve(url);
+        });
+    }
+
+    function loadLib(libs = defaultLib) {
+        var libPromise = [];
+        libs.split(',')
+            .filter(function(url) {
+                return !loaddLib.includes(url);
+            })
+            .forEach(function(url) {
+                var ext = getExt(url);
+                if (ext === 'js') {
+                    libPromise.push(loadScript(url));
+                } else if (ext === 'css') {
+                    libPromise.push(loadStyle(url));
+                }
+            });
+        $lib.value = decodeURIComponent(libs);
+        return Promise.all(libPromise);
+    }
+
+    function loadCode(code) {
+        return new Promise(function(resolve, reject) {
+            if (code) {
+                mirror.setValue(decodeURIComponent(code).trim());
+                runCode();
+                resolve(code);
+            } else {
+                fetch('./js/example.js')
+                    .then(response => {
+                        return response.text();
+                    })
+                    .then(text => {
+                        mirror.setValue(text);
+                        runCode();
+                        resolve(text);
+                    })
+                    .catch(err => {
+                        console.error(err.message);
+                    });
+            }
+        });
+    }
+
+    function initApp() {
+        const { code, libs } = getURLParameters(window.location.href);
+        loadLib(libs)
+            .then(function(result) {
+                loaddLib = loaddLib.concat(result);
+                loadCode(code).then(() => {
+                    console.info('App initialization completed');
+                });
+            })
+            .catch(err => {
+                console.error(err.message);
+            });
+    }
+
+    function runCode() {
+        Artplayer.instances.forEach(art => {
+            art.destroy(true);
+        });
+        var code = mirror.getValue();
+        eval(code);
+        initArt(Artplayer.instances[0]);
+    }
+
+    $run.addEventListener('click', function(e) {
+        runCode();
+        const libs = encodeURIComponent($lib.value);
+        const code = encodeURIComponent(mirror.getValue());
+        const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+        history.pushState(null, null, url);
+    });
+
+    win.addEventListener('error', err => {
+        console.error(err.message);
+    });
+
+    initApp();
 })(window);