Fix image paths (#813)

* Update seExplorerButton.js

* Update seFlyingButton.js

* Fix linter

src/editor/components/seExplorerButton.js

@@ -1,4 +1,39 @@
 /* globals svgEditor */
+
+/**
+ * @class ExplorerButton
+ */
+export class ExplorerButton extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super()
+    // create the shadowDom and insert the template
+    // create the shadowDom and insert the template
+    this.imgPath = svgEditor.configObj.curConfig.imgPath
+    this.template = this.createTemplate(this.imgPath)
+    this._shadowRoot = this.attachShadow({ mode: 'open' })
+    this._shadowRoot.append(this.template.content.cloneNode(true))
+    // locate the component
+    this.$button = this._shadowRoot.querySelector('.menu-button')
+    this.$overall = this._shadowRoot.querySelector('.overall')
+    this.$img = this._shadowRoot.querySelector('.menu-button img')
+    this.$menu = this._shadowRoot.querySelector('.menu')
+    this.$handle = this._shadowRoot.querySelector('.handle')
+    this.$lib = this._shadowRoot.querySelector('.image-lib')
+    this.files = []
+    this.request = new XMLHttpRequest()
+    this.imgPath = svgEditor.configObj.curConfig.imgPath
+  }
+
+  /**
+   * @function createTemplate
+   * @param {string} imgPath
+   * @returns {any} template
+   */
+
+  createTemplate (imgPath) {
     const template = document.createElement('template')
     template.innerHTML = `
     <style>
@@ -40,7 +75,7 @@ template.innerHTML = `
     .handle {
       height: 8px;
       width: 8px;
-    background-image: url(./images/handle.svg);
+      background-image: url(${imgPath}/handle.svg);
       position:absolute;
       bottom: 0px;
       right: 0px;
@@ -95,31 +130,8 @@ template.innerHTML = `
       <div class="menu">
         <div class="menu-item">menu</div>
      </div>
-  </div>
+    </div>`
-
+    return template
-`
-/**
- * @class ExplorerButton
- */
-export class ExplorerButton extends HTMLElement {
-  /**
-    * @function constructor
-    */
-  constructor () {
-    super()
-    // create the shadowDom and insert the template
-    this._shadowRoot = this.attachShadow({ mode: 'open' })
-    this._shadowRoot.append(template.content.cloneNode(true))
-    // locate the component
-    this.$button = this._shadowRoot.querySelector('.menu-button')
-    this.$overall = this._shadowRoot.querySelector('.overall')
-    this.$img = this._shadowRoot.querySelector('.menu-button img')
-    this.$menu = this._shadowRoot.querySelector('.menu')
-    this.$handle = this._shadowRoot.querySelector('.handle')
-    this.$lib = this._shadowRoot.querySelector('.image-lib')
-    this.files = []
-    this.request = new XMLHttpRequest()
-    this.imgPath = svgEditor.configObj.curConfig.imgPath
   }
 
   /**

src/editor/components/seFlyingButton.js

@@ -1,5 +1,38 @@
 /* globals svgEditor */
 import { t } from '../locale.js'
+
+/**
+ * @class FlyingButton
+ */
+export class FlyingButton extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super()
+    // create the shadowDom and insert the template
+    this.imgPath = svgEditor.configObj.curConfig.imgPath
+    this.template = this.createTemplate(this.imgPath)
+    this._shadowRoot = this.attachShadow({ mode: 'open' })
+    this._shadowRoot.append(this.template.content.cloneNode(true))
+    // locate the component
+    this.$button = this._shadowRoot.querySelector('.menu-button')
+    this.$handle = this._shadowRoot.querySelector('.handle')
+    this.$overall = this._shadowRoot.querySelector('.overall')
+    this.$img = this._shadowRoot.querySelector('img')
+    this.$menu = this._shadowRoot.querySelector('.menu')
+    // 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()
+  }
+
+  /**
+   * @function createTemplate
+   * @param {string} imgPath
+   * @returns {any} template
+   */
+
+  createTemplate (imgPath) {
     const template = document.createElement('template')
     template.innerHTML = `
       <style>
@@ -40,7 +73,7 @@ template.innerHTML = `
         .handle {
           height: 8px;
           width: 8px;
-    background-image: url(./images/handle.svg);
+          background-image: url(${imgPath}/handle.svg);
           position:absolute;
           bottom: 0px;
           right: 0px;
@@ -76,32 +109,8 @@ template.innerHTML = `
           <img class="button-icon" src="logo.svg" alt="icon">
           <div class="handle"></div>
         </div>
-   
+      </div>`
-  </div>
+    return template
-
-`
-/**
- * @class FlyingButton
- */
-export class FlyingButton extends HTMLElement {
-  /**
-    * @function constructor
-    */
-  constructor () {
-    super()
-    // create the shadowDom and insert the template
-    this._shadowRoot = this.attachShadow({ mode: 'open' })
-    this._shadowRoot.append(template.content.cloneNode(true))
-    // locate the component
-    this.$button = this._shadowRoot.querySelector('.menu-button')
-    this.$handle = this._shadowRoot.querySelector('.handle')
-    this.$overall = this._shadowRoot.querySelector('.overall')
-    this.$img = this._shadowRoot.querySelector('img')
-    this.$menu = this._shadowRoot.querySelector('.menu')
-    // 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.imgPath = svgEditor.configObj.curConfig.imgPath
   }
 
   /**