move to standard linter for simpler configuration

src/editor/components/seList.js

@@ -1,8 +1,8 @@
 /* globals svgEditor */
-import 'elix/define/DropdownList.js';
-import { t } from '../locale.js';
+import 'elix/define/DropdownList.js'
+import { t } from '../locale.js'
 
-const template = document.createElement('template');
+const template = document.createElement('template')
 template.innerHTML = `
 <style>
 elix-dropdown-list {
@@ -30,7 +30,7 @@ elix-dropdown-list::part(popup-toggle) {
     <slot></slot>
   </elix-dropdown-list>
 
-`;
+`
 /**
  * @class SeList
  */
@@ -39,22 +39,23 @@ export class SeList extends HTMLElement {
     * @function constructor
     */
   constructor () {
-    super();
+    super()
     // create the shadowDom and insert the template
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
-    this._shadowRoot.append(template.content.cloneNode(true));
-    this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
-    this.$label = this._shadowRoot.querySelector('label');
-    this.$selection = this.$dropdown.shadowRoot.querySelector('#value');
-    this.items = this.querySelectorAll("se-list-item");
-    this.imgPath = svgEditor.configObj.curConfig.imgPath;
+    this._shadowRoot = this.attachShadow({ mode: 'open' })
+    this._shadowRoot.append(template.content.cloneNode(true))
+    this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list')
+    this.$label = this._shadowRoot.querySelector('label')
+    this.$selection = this.$dropdown.shadowRoot.querySelector('#value')
+    this.items = this.querySelectorAll('se-list-item')
+    this.imgPath = svgEditor.configObj.curConfig.imgPath
   }
+
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height', 'title', 'value' ];
+    return ['label', 'width', 'height', 'title', 'value']
   }
 
   /**
@@ -65,51 +66,51 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
-    const currentObj = this;
-    if (oldValue === newValue) return;
+    const currentObj = this
+    if (oldValue === newValue) return
     switch (name) {
-    case 'title':
-      this.$dropdown.setAttribute('title', t(newValue));
-      break;
-    case 'label':
-      this.$label.textContent = t(newValue);
-      break;
-    case 'height':
-      this.$dropdown.style.height = newValue;
-      break;
-    case 'width':
-      this.$dropdown.style.width = newValue;
-      break;
-    case 'value':
-      Array.from(this.items).forEach(function (element) {
-        if(element.getAttribute("value") === newValue) {
-          if (element.hasAttribute("src")) {
+      case 'title':
+        this.$dropdown.setAttribute('title', t(newValue))
+        break
+      case 'label':
+        this.$label.textContent = t(newValue)
+        break
+      case 'height':
+        this.$dropdown.style.height = newValue
+        break
+      case 'width':
+        this.$dropdown.style.width = newValue
+        break
+      case 'value':
+        Array.from(this.items).forEach(function (element) {
+          if (element.getAttribute('value') === newValue) {
+            if (element.hasAttribute('src')) {
             // empty current selection children
-            while(currentObj.$selection.firstChild)
-              currentObj.$selection.removeChild(currentObj.$selection.firstChild);
-            // replace selection child with image of new value
-            const img = document.createElement('img');
-            img.src = currentObj.imgPath + '/' + element.getAttribute("src");
-            img.style.height = element.getAttribute("img-height");
-            img.setAttribute('title', t(element.getAttribute("title")));
-            currentObj.$selection.append(img);
-          } else {
-            currentObj.$selection.textContent = t(element.getAttribute('option'));
+              while (currentObj.$selection.firstChild) { currentObj.$selection.removeChild(currentObj.$selection.firstChild) }
+              // replace selection child with image of new value
+              const img = document.createElement('img')
+              img.src = currentObj.imgPath + '/' + element.getAttribute('src')
+              img.style.height = element.getAttribute('img-height')
+              img.setAttribute('title', t(element.getAttribute('title')))
+              currentObj.$selection.append(img)
+            } else {
+              currentObj.$selection.textContent = t(element.getAttribute('option'))
+            }
           }
-        }
-      });
-      break;
-    default:
-      console.error(`unknown attribute: ${name}`);
-      break;
+        })
+        break
+      default:
+        console.error(`unknown attribute: ${name}`)
+        break
     }
   }
+
   /**
    * @function get
    * @returns {any}
    */
   get title () {
-    return this.getAttribute('title');
+    return this.getAttribute('title')
   }
 
   /**
@@ -117,14 +118,15 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   set title (value) {
-    this.setAttribute('title', value);
+    this.setAttribute('title', value)
   }
+
   /**
    * @function get
    * @returns {any}
    */
   get label () {
-    return this.getAttribute('label');
+    return this.getAttribute('label')
   }
 
   /**
@@ -132,14 +134,15 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   set label (value) {
-    this.setAttribute('label', value);
+    this.setAttribute('label', value)
   }
+
   /**
    * @function get
    * @returns {any}
    */
   get width () {
-    return this.getAttribute('width');
+    return this.getAttribute('width')
   }
 
   /**
@@ -147,14 +150,15 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   set width (value) {
-    this.setAttribute('width', value);
+    this.setAttribute('width', value)
   }
+
   /**
    * @function get
    * @returns {any}
    */
   get height () {
-    return this.getAttribute('height');
+    return this.getAttribute('height')
   }
 
   /**
@@ -162,31 +166,32 @@ export class SeList extends HTMLElement {
    * @returns {void}
    */
   set height (value) {
-    this.setAttribute('height', value);
+    this.setAttribute('height', value)
   }
+
   /**
    * @function connectedCallback
    * @returns {void}
    */
   connectedCallback () {
-    const currentObj = this;
+    const currentObj = this
     this.$dropdown.addEventListener('selectedindexchange', (e) => {
       if (e?.detail?.selectedIndex !== undefined) {
-        const value = this.$dropdown.selectedItem.getAttribute('value');
-        const closeEvent = new CustomEvent('change', { detail: { value } });
-        currentObj.dispatchEvent(closeEvent);
-        currentObj.value = value;
-        currentObj.setAttribute("value", value);
+        const value = this.$dropdown.selectedItem.getAttribute('value')
+        const closeEvent = new CustomEvent('change', { detail: { value } })
+        currentObj.dispatchEvent(closeEvent)
+        currentObj.value = value
+        currentObj.setAttribute('value', value)
       }
-    });
+    })
     this.$dropdown.addEventListener('close', (_e) => {
       /** with Chrome, selectedindexchange does not fire consistently
       * unless you forec change in this close event
       */
-      this.$dropdown.selectedIndex = this.$dropdown.currentIndex;
-    });
+      this.$dropdown.selectedIndex = this.$dropdown.currentIndex
+    })
   }
 }
 
 // Register
-customElements.define('se-list', SeList);
+customElements.define('se-list', SeList)