#631 menu, explorer and flybutton image path update

src/editor/components/seExplorerButton.js

@@ -119,6 +119,18 @@ export class ExplorerButton extends HTMLElement {
     this.$lib = this._shadowRoot.querySelector('.image-lib');
     this.files = [];
     this.request = new XMLHttpRequest();
+    this.editor = null;
+  }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+  init (editor) {
+    this.editor = editor;
+    if (this.hasAttribute("src")) {
+      this.setAttribute('src', this.getAttribute("src"));
+    }
   }
   /**
    * @function observedAttributes
@@ -135,7 +147,7 @@ export class ExplorerButton extends HTMLElement {
    * @returns {void}
    */
   async attributeChangedCallback (name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'title':
       {
@@ -172,7 +184,10 @@ export class ExplorerButton extends HTMLElement {
       }
       break;
     case 'src':
-      this.$img.setAttribute('src', './images/' + newValue);
+      if(this.editor !== null) {
+        const { imgPath } = this.editor.configObj.curConfig;
+        this.$img.setAttribute('src', imgPath + '/' + newValue);
+      }
       break;
     default:
       // eslint-disable-next-line no-console

src/editor/components/seFlyingButton.js

@@ -100,6 +100,18 @@ export class FlyingButton extends HTMLElement {
     // the last element of the div is the slot
     // we retrieve all elements added in the slot (i.e. se-buttons)
     this.$elements = this.$menu.lastElementChild.assignedElements();
+    this.editor = null;
+  }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+  init (editor) {
+    this.editor = editor;
+    // initialize currentAction with the first slot of the list
+    const { imgPath } = this.editor.configObj.curConfig;
+    this.$img.setAttribute('src', imgPath + '/' + this.activeSlot.getAttribute('src'));
   }
   /**
    * @function observedAttributes
@@ -233,12 +245,11 @@ export class FlyingButton extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    // initialize currentAction with the first slot of the list
     this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
-    this.$img.setAttribute('src', './images/' + this.activeSlot.getAttribute('src'));
     // capture click event on the button to manage the logic
     const onClickHandler = (ev) => {
       ev.stopPropagation();
+      const { imgPath } = this.editor.configObj.curConfig;
       switch (ev.target.nodeName) {
       case 'SE-FLYINGBUTTON':
         if (this.pressed) {
@@ -251,7 +262,7 @@ export class FlyingButton extends HTMLElement {
         break;
       case 'SE-BUTTON':
         // change to the current action
-        this.$img.setAttribute('src', './images/' + ev.target.getAttribute('src'));
+        this.$img.setAttribute('src', imgPath + '/' + ev.target.getAttribute('src'));
         this.activeSlot = ev.target;
         this.setAttribute('pressed', 'pressed');
         // and close the menu

src/editor/components/seMenu.js

@@ -43,6 +43,18 @@ export class SeMenu extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
     this.$menu = this._shadowRoot.querySelector('elix-menu-button');
     this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
+    this.editor = null;
+  }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+  init (editor) {
+    this.editor = editor;
+    if (this.hasAttribute("src")) {
+      this.setAttribute('src', this.getAttribute("src"));
+    }
   }
   /**
    * @function observedAttributes
@@ -61,13 +73,16 @@ export class SeMenu extends HTMLElement {
    */
   attributeChangedCallback (name, oldValue, newValue) {
     const image = new Image();
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'src':
-      image.src = './images/' + newValue;
-      image.width = 24;
-      image.height = 24;
-      this.$label.prepend(image);
+      if (this.editor !== null) {
+        const { imgPath } = this.editor.configObj.curConfig;
+        image.src = imgPath + '/' + newValue;
+        image.width = 24;
+        image.height = 24;
+        this.$label.prepend(image);
+      }
       break;
     case 'label':
       this.$label.prepend(newValue);