From cdc85a515b1de7339cf11f732fcf351dc7f69642 Mon Sep 17 00:00:00 2001
From: pmkrawczyk <63370626+pmkrawczyk@users.noreply.github.com>
Date: Tue, 5 Jul 2022 22:02:32 +0200
Subject: [PATCH] Fix image paths (#813)

* Update seExplorerButton.js

* Update seFlyingButton.js

* Fix linter
---
 src/editor/components/seExplorerButton.js | 210 ++++++++++++----------
 src/editor/components/seFlyingButton.js   | 171 +++++++++---------
 2 files changed, 201 insertions(+), 180 deletions(-)

diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index b3411b5a..f6b5175e 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -1,103 +1,5 @@
 /* globals svgEditor */
-const template = document.createElement('template')
-template.innerHTML = `
-  <style>
-  :host {
-    position:relative;
-  }
-  .menu-button:hover, se-button:hover, .menu-item:hover
-  {
-    background-color: var(--icon-bg-color-hover);
-  }
-  img {
-    border: none;
-    width: 24px;
-    height: 24px;
-  }
-  .overall.pressed .button-icon,
-  .overall.pressed,
-  .menu-item.pressed {
-    background-color: var(--icon-bg-color-hover) !important;
-  }
-  .overall.pressed .menu-button {
-    background-color: var(--icon-bg-color-hover) !important;
-  }
-  .disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-  .menu-button {
-    height: 24px;
-    width: 24px;
-    margin: 2px 1px 4px;
-    padding: 3px;
-    background-color: var(--icon-bg-color);
-    cursor: pointer;
-    position: relative;
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  .handle {
-    height: 8px;
-    width: 8px;
-    background-image: url(./images/handle.svg);
-    position:absolute;
-    bottom: 0px;
-    right: 0px;
-  }
-  .button-icon {
-  }
-  .menu {
-    position: fixed;
-    margin-left: 34px;
-    background: none !important;
-    display:none;
-    top: 30%;
-    left: 171px;
-  }
-  .image-lib {
-    position: fixed;
-    left: 34px;
-    top: 30%;
-    background: #E8E8E8;
-    display: none;
-    flex-wrap: wrap;
-    flex-direction: row;
-    width: 170px;
-  }
-  .menu-item {
-    line-height: 1em;
-    padding: 0.5em;
-    border: 1px solid #5a6162;
-    background: #E8E8E8;
-    margin-bottom: -1px;
-    white-space: nowrap;
-  }
-  .open-lib {
-    display: inline-flex;
-  }
-  .open {
-    display: block;
-  }
-  .overall {
-    background: none !important;
-  }
-  </style>
 
-  <div class="overall">
-    <div class="menu-button">
-      <img class="button-icon" src="explorer.svg" alt="icon">
-      <div class="handle"></div>
-    </div>
-    <div class="image-lib"">
-      <se-button></se-button>
-   </div>
-    <div class="menu">
-      <div class="menu-item">menu</div>
-   </div>
-  </div>
-
-`
 /**
  * @class ExplorerButton
  */
@@ -108,8 +10,11 @@ export class ExplorerButton extends HTMLElement {
   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(template.content.cloneNode(true))
+    this._shadowRoot.append(this.template.content.cloneNode(true))
     // locate the component
     this.$button = this._shadowRoot.querySelector('.menu-button')
     this.$overall = this._shadowRoot.querySelector('.overall')
@@ -122,6 +27,113 @@ export class ExplorerButton extends HTMLElement {
     this.imgPath = svgEditor.configObj.curConfig.imgPath
   }
 
+  /**
+   * @function createTemplate
+   * @param {string} imgPath
+   * @returns {any} template
+   */
+
+  createTemplate (imgPath) {
+    const template = document.createElement('template')
+    template.innerHTML = `
+    <style>
+    :host {
+      position:relative;
+    }
+    .menu-button:hover, se-button:hover, .menu-item:hover
+    {
+      background-color: var(--icon-bg-color-hover);
+    }
+    img {
+      border: none;
+      width: 24px;
+      height: 24px;
+    }
+    .overall.pressed .button-icon,
+    .overall.pressed,
+    .menu-item.pressed {
+      background-color: var(--icon-bg-color-hover) !important;
+    }
+    .overall.pressed .menu-button {
+      background-color: var(--icon-bg-color-hover) !important;
+    }
+    .disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
+    .menu-button {
+      height: 24px;
+      width: 24px;
+      margin: 2px 1px 4px;
+      padding: 3px;
+      background-color: var(--icon-bg-color);
+      cursor: pointer;
+      position: relative;
+      border-radius: 3px;
+      overflow: hidden;
+    }
+    .handle {
+      height: 8px;
+      width: 8px;
+      background-image: url(${imgPath}/handle.svg);
+      position:absolute;
+      bottom: 0px;
+      right: 0px;
+    }
+    .button-icon {
+    }
+    .menu {
+      position: fixed;
+      margin-left: 34px;
+      background: none !important;
+      display:none;
+      top: 30%;
+      left: 171px;
+    }
+    .image-lib {
+      position: fixed;
+      left: 34px;
+      top: 30%;
+      background: #E8E8E8;
+      display: none;
+      flex-wrap: wrap;
+      flex-direction: row;
+      width: 170px;
+    }
+    .menu-item {
+      line-height: 1em;
+      padding: 0.5em;
+      border: 1px solid #5a6162;
+      background: #E8E8E8;
+      margin-bottom: -1px;
+      white-space: nowrap;
+    }
+    .open-lib {
+      display: inline-flex;
+    }
+    .open {
+      display: block;
+    }
+    .overall {
+      background: none !important;
+    }
+    </style>
+  
+    <div class="overall">
+      <div class="menu-button">
+        <img class="button-icon" src="explorer.svg" alt="icon">
+        <div class="handle"></div>
+      </div>
+      <div class="image-lib"">
+        <se-button></se-button>
+     </div>
+      <div class="menu">
+        <div class="menu-item">menu</div>
+     </div>
+    </div>`
+    return template
+  }
+
   /**
    * @function observedAttributes
    * @returns {any} observed
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index 863f51c6..11485326 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -1,85 +1,6 @@
 /* globals svgEditor */
 import { t } from '../locale.js'
-const template = document.createElement('template')
-template.innerHTML = `
-  <style>
-  :host {
-    position:relative;
-  }
-  .overall:hover *
-  {
-    background-color: var(--icon-bg-color-hover);
-  }
-  img {
-    border: none;
-    width: 24px;
-    height: 24px;
-  }
-  .overall.pressed .button-icon,
-  .overall.pressed .handle {
-    background-color: var(--icon-bg-color-hover) !important;
-  }
-  .overall.pressed .menu-button {
-    background-color: var(--icon-bg-color-hover) !important;
-  }
-  .disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-  .menu-button {
-    height: 24px;
-    width: 24px;
-    margin: 2px 1px 4px;
-    padding: 3px;
-    background-color: var(--icon-bg-color);
-    cursor: pointer;
-    position: relative;
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  .handle {
-    height: 8px;
-    width: 8px;
-    background-image: url(./images/handle.svg);
-    position:absolute;
-    bottom: 0px;
-    right: 0px;
-  }
-  .button-icon {
-  }
-  .menu {
-    position: fixed;
-    background: none !important;
-    display:none;
-    margin-left: 34px;
-  }
-  .open {
-    display: flex;
-  }
-  .menu-item {
-    align-content: flex-start;
-    height: 24px;
-    width: 24px;
-    top:0px;
-    left:0px;
-  }
-  .overall {
-    background: none !important;
-  }
-  </style>
 
-  <div class="overall">
-  <div class="menu">
-  <slot></slot>
-</div>
-    <div class="menu-button">
-      <img class="button-icon" src="logo.svg" alt="icon">
-      <div class="handle"></div>
-    </div>
-   
-  </div>
-
-`
 /**
  * @class FlyingButton
  */
@@ -90,8 +11,10 @@ export class FlyingButton extends HTMLElement {
   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(template.content.cloneNode(true))
+    this._shadowRoot.append(this.template.content.cloneNode(true))
     // locate the component
     this.$button = this._shadowRoot.querySelector('.menu-button')
     this.$handle = this._shadowRoot.querySelector('.handle')
@@ -101,7 +24,93 @@ 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.imgPath = svgEditor.configObj.curConfig.imgPath
+  }
+
+  /**
+   * @function createTemplate
+   * @param {string} imgPath
+   * @returns {any} template
+   */
+
+  createTemplate (imgPath) {
+    const template = document.createElement('template')
+    template.innerHTML = `
+      <style>
+        :host {
+          position:relative;
+        }
+        .overall:hover *
+        {
+          background-color: var(--icon-bg-color-hover);
+        }
+        img {
+          border: none;
+          width: 24px;
+          height: 24px;
+        }
+        .overall.pressed .button-icon,
+        .overall.pressed .handle {
+          background-color: var(--icon-bg-color-hover) !important;
+        }
+        .overall.pressed .menu-button {
+          background-color: var(--icon-bg-color-hover) !important;
+        }
+        .disabled {
+          opacity: 0.3;
+          cursor: default;
+        }
+        .menu-button {
+          height: 24px;
+          width: 24px;
+          margin: 2px 1px 4px;
+          padding: 3px;
+          background-color: var(--icon-bg-color);
+          cursor: pointer;
+          position: relative;
+          border-radius: 3px;
+          overflow: hidden;
+        }
+        .handle {
+          height: 8px;
+          width: 8px;
+          background-image: url(${imgPath}/handle.svg);
+          position:absolute;
+          bottom: 0px;
+          right: 0px;
+        }
+        .button-icon {
+        }
+        .menu {
+          position: fixed;
+          background: none !important;
+          display:none;
+          margin-left: 34px;
+        }
+        .open {
+          display: flex;
+        }
+        .menu-item {
+          align-content: flex-start;
+          height: 24px;
+          width: 24px;
+          top:0px;
+          left:0px;
+        }
+        .overall {
+          background: none !important;
+        }
+      </style>
+
+      <div class="overall">
+        <div class="menu">
+          <slot></slot>
+        </div>
+        <div class="menu-button">
+          <img class="button-icon" src="logo.svg" alt="icon">
+          <div class="handle"></div>
+        </div>
+      </div>`
+    return template
   }
 
   /**