moving picobel-player-default WC into separate demo page

tomhazledine · Feb 14, 2024 · eb55601 · eb55601
1 parent a538fb1
commit eb55601
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 21 deletions.
diff --git a/demo/component-default.html b/demo/component-default.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Picobel.js Test Page</title>
+
+        <!-- Load the Picobel CSS -->
+        <link
+            rel="stylesheet"
+            href="../src/css/picobel.all.css"
+            type="text/css"
+        />
+    </head>
+    <body style="font-family: sans-serif">
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>
+                    <a href="composable.html">Composable</a>
+                </li>
+                <li><a href="types.html">Types</a></li>
+                <li><a href="types.html">Manual</a></li>
+                <li><a href="component.html">Web Component</a></li>
+            </ul>
+        </nav>
+
+        <div class="generic-wrapper">
+            <h1>Testing Picobel: web component default</h1>
+            <h2>
+                <code>&lt;picobel-player-default&gt;</code>
+            </h2>
+
+            <picobel-player-default class="foo">
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player-default>
+
+            <h2>
+                <code>&lt;picobel-player-default&gt;</code> with multiple audio
+                nodes
+            </h2>
+
+            <picobel-player-default>
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+                <audio
+                    src="./audio-examples/taken-at-the-flood.mp3"
+                    title="Taken at the Flood"
+                    data-artist="Freeze Them"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player-default>
+        </div>
+
+        <script
+            type="text/javascript"
+            src="../build/picobel-component-default.js"
+        ></script>
+    </body>
+</html>
diff --git a/demo/component.html b/demo/component.html
@@ -21,11 +21,20 @@
                 <li><a href="types.html">Types</a></li>
                 <li><a href="types.html">Manual</a></li>
                 <li>Web Component</li>
+                <li>
+                    <a href="component-default.html">Web Component "default"</a>
+                </li>
             </ul>
         </nav>
 
         <div class="generic-wrapper">
             <h1>Testing Picobel: web component</h1>
+
+            <p>
+                View experimental
+                <a href="component-default.html">Web Component "default"</a>.
+            </p>
+
             <h2>
                 <code>&lt;picobel-player&gt;</code> loaded with no inbuilt
                 styles
@@ -44,11 +53,11 @@ <h2>
             </picobel-player>
 
             <h2>
-                <code>&lt;picobel-player-default&gt;</code> loaded (the
-                "default" theme)
+                <code>&lt;picobel-player&gt;</code> loaded with
+                <code>data-theme="skeleton"</code> and external stylesheet
             </h2>
 
-            <picobel-player-default>
+            <picobel-player data-theme="skeleton">
                 <audio
                     src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
                     title="All I Want for Christmas"
@@ -58,18 +67,10 @@ <h2>
                     Your browser does not support the
                     <code>audio</code> element.
                 </audio>
-            </picobel-player-default>
-
-            <h2>
-                <code>&lt;picobel-player&gt;</code> loaded with
-                <code>data-theme="skeleton"</code> and external stylesheet
-            </h2>
-
-            <picobel-player data-theme="skeleton">
                 <audio
-                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
-                    title="All I Want for Christmas"
-                    data-artist="Master Slash Slave"
+                    src="./audio-examples/taken-at-the-flood.mp3"
+                    title="Taken at the Flood"
+                    data-artist="Freeze Them"
                     controls
                 >
                     Your browser does not support the
@@ -82,9 +83,5 @@ <h2>
             type="text/javascript"
             src="../build/picobel-component.js"
         ></script>
-        <script
-            type="text/javascript"
-            src="../build/picobel-component-default.js"
-        ></script>
     </body>
 </html>
diff --git a/demo/manual.html b/demo/manual.html
@@ -68,10 +68,10 @@ <h1>Some stuff...</h1>
         </audio>
 
         <!-- Load Scripts -->
-        <script type="text/javascript" src="../build/picobel.2.1.0.js"></script>
+        <script type="text/javascript" src="../build/picobel.3.0.3.js"></script>
         <script>
-            console.log({ picobel });
-            picobel();
+            const picobelInstance = picobel();
+            console.log({ picobelInstance });
         </script>
     </body>
 </html>