Merge pull request #853 from vorth/custom-buttons

Viewer index buttons now custom elements
vZome · Apr 6, 2024 · 9875c99 · 9875c99
2 parents a09136a + b31bff3
commit 9875c99
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/core/src/main/java/com/vzome/core/exporters/GitHubShare.java b/core/src/main/java/com/vzome/core/exporters/GitHubShare.java
@@ -73,7 +73,11 @@ public String generateContent( String orgName, String repoName, String branchNam
         switch (style)
         {
         case "indexed": {
-            viewerControls = "<div style='display:flex;'><div style='margin: auto;'><button is='vzome-viewer-previous'>prev scene</button><button is='vzome-viewer-next'>next scene</button></div></div>";
+            viewerControls =
+              "<div style='display:flex;'><div style='margin: auto;'>"
+              +  "<vzome-viewer-previous label='prev step'></vzome-viewer-previous>"
+              +  "<vzome-viewer-next label='next step'></vzome-viewer-next>"
+              +"</div></div>";
             viewerParameters = "indexed='true'";
             break;
         }

diff --git a/online/public/test/index.html b/online/public/test/index.html
@@ -14,6 +14,14 @@
         --vzome-label-background: black;
         --vzome-label-color: red;
       }
+      .vzome-viewer-index-button {
+        min-width: 90px;
+        font-size: large;
+        border-radius: 6px;
+        border-style: solid;
+        border-color: black;
+        background-color: aliceblue;
+      }
     </style>
     <script type="module">
       import "/modules/vzome-viewer.js"; // registers the custom element
@@ -40,6 +48,9 @@
         console.log( 'welcome scenes:', JSON.stringify( e.detail, null, 2 ) );
       } );
 
+      const prevBtn = document.querySelector( "#prevBtn" );
+      prevBtn .addEventListener( 'click', () => console.log( 'prev button hit!' ) );
+
       console.log( '%%%%%%%%%%%%%%%%%% ending my script!');
 
     </script>
@@ -52,8 +63,8 @@
       </section>
       <section>
         <div>
-          <button is="vzome-viewer-previous" viewer="welcome">prev</button>
-          <button is="vzome-viewer-next" viewer="welcome">next</button>
+          <vzome-viewer-previous viewer="welcome" label="back" id="prevBtn"></vzome-viewer-previous>
+          <vzome-viewer-next viewer="welcome" label="forward"></vzome-viewer-next>
           <h3 id="title"></h3>
         </div>
         <vzome-viewer id="welcome" indexed="true" show-scenes="all" scene="#5"

diff --git a/online/src/wc/index-buttons.js b/online/src/wc/index-buttons.js
@@ -1,15 +1,15 @@
 
 const debug = false;
 
-class VZomeViewerIndexButton extends HTMLButtonElement
+class VZomeViewerIndexButton extends HTMLElement
 {
   #next;
   #viewerId;
   #viewer;
 
   constructor( next=true )
   {
-    self = super();
+    super();
     this.#next = next;
   }
 
@@ -31,8 +31,14 @@ class VZomeViewerIndexButton extends HTMLButtonElement
       console.error( `No vzome-viewer found.` );
       return;
     }
+
+    const button = document .createElement( 'button' );
+    button .textContent = this.getAttribute( 'label' );
+    this .appendChild( button );
+    button.classList .add( 'vzome-viewer-index-button' );
+
     const loadParams = { camera: false };
-    self .addEventListener( "click", () => this.#next? this.#viewer .nextScene( loadParams ) : this.#viewer .previousScene( loadParams ) );
+    button .addEventListener( "click", () => this.#next? this.#viewer .nextScene( loadParams ) : this.#viewer .previousScene( loadParams ) );
   }
 
   static get observedAttributes()

diff --git a/online/src/wc/vzome-viewer.js b/online/src/wc/vzome-viewer.js
@@ -313,5 +313,5 @@ export class VZomeViewer extends HTMLElement
 
 customElements.define( "vzome-viewer", VZomeViewer );
 
-customElements .define( "vzome-viewer-next",     VZomeViewerNextButton, { extends: "button" } );
-customElements .define( "vzome-viewer-previous", VZomeViewerPrevButton, { extends: "button" } );
+customElements .define( "vzome-viewer-next",     VZomeViewerNextButton );
+customElements .define( "vzome-viewer-previous", VZomeViewerPrevButton );