added Alpheios Toolbar

public/index.html

@@ -5,6 +5,7 @@
     <title>Vue3 Alpheios Alignment Editor</title>
     <link rel="icon" href="logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style/style-components.min.css" />
     <link rel="stylesheet" href="dist/style/style-alignment-editor.min.css"/>
     <script src="dist/alpheios-alignment-editor.min.js"></script>
 
@@ -33,6 +34,46 @@ <h1>Alpheios Alignment Editor</h1>
           appId: 'alpheios-alignment-editor'
         }).init()
       });
+
+      let embed
+        document.addEventListener("AlpheiosAlignmentGroupsWorkflowStarted", function(event) {
+          if (embed) { return }
+          let detectCtrl = function (event) {
+            return  (event.metaKey || event.ctrlKey || event.keyCode == 91 || event.keyCode == 224)
+          }
+
+          import ('https://cdn.jsdelivr.net/npm/[email protected]/dist/alpheios-embedded.min.js').then(embedLib => {
+            window.AlpheiosEmbed.importDependencies({ 
+              mode: 'custom',
+              libs: { components: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/alpheios-components.min.js' },
+            }).then(Embedded => {
+              embed = new Embedded(
+                {
+                  clientId: 'alignment-editor',
+                  enabledSelector: '.alpheios-tools-enabled',
+                  // authEnv: auth0Env,
+                  popupInitialPos: {
+                    left: '150px',
+                    top: '150px'
+                  },
+                  toolbarInitialPos: {
+                    top: '5vh',
+                    right: '5vw'
+                  },
+                  uiOptions: {
+                    hidePopupOnClickAway: false
+                  },
+
+                  desktopTriggerEvent: 'click',
+                  triggerPreCallback: detectCtrl
+                }).activate();
+            }).catch(e => {
+              console.error(`Import of an embedded library dependencies failed: ${e}`)
+            })
+          }).catch(e => {
+            console.error(`Import of an embedded library failed: ${e}`)
+          })
+        });
     </script>
   </body>
 </html>