progress on Dropdow using Elix lib

2020-11-14 16:35:51 +01:00
parent 78bd2c882d
commit a284ddf61d
5 changed files with 144 additions and 23 deletions
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -0,0 +1,122 @@
+/* eslint-disable node/no-unpublished-import */
+import ListComboBox from 'elix/define/ListComboBox.js';
+import SpinBox from 'elix/define/NumberSpinBox.js';
+import {defaultState, template} from 'elix/src/base/internal.js';
+import {templateFrom} from 'elix/src/core/htmlLiterals.js';
+
+class MyCombo extends ListComboBox {
+  get [defaultState] () {
+    return Object.assign(super[defaultState], {
+      inputPartType: SpinBox
+    });
+  }
+  get [template] () {
+    const result = super[template];
+    result.content.append(
+      templateFrom.html`
+        <style>
+        ::part(input) {
+          width: 30px;
+        }
+        </style>
+      `.content
+    );
+    return result;
+  }
+}
+
+customElements.define('my-combo', MyCombo);
+
+const mytemplate = document.createElement('template');
+mytemplate.innerHTML = `
+  <style>
+  .toolset {
+    float: left;
+    margin-top: 4px;
+  }
+  .icon {
+    top: 4px;
+    position: relative;
+    }
+  ::slotted(*) {
+    padding: 4px;
+    background: #E8E8E8;
+    border: 1px solid #B0B0B0;
+    margin: 0 0 -1px 0;
+    line-height: 16px;
+  }
+  my-combo::part(popup) {
+    width: 180px;
+  }
+  </style>
+  <span class="toolset" title="title">
+    <img  class="icon" src="./images/logo.svg" alt="icon" width="18" height="18">
+    <my-combo>
+      <slot></slot>
+    </my-combo>
+  </span>
+`;
+/**
+ * @class Dropdown
+ */
+export class Dropdown extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(mytemplate.content.cloneNode(true));
+    this.$dropdown = this._shadowRoot.querySelector('my-combo');
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$span = this._shadowRoot.querySelector('span');
+    // we retrieve all elements added in the slot (i.e. se-buttons)
+    // this.$elements = this.$menu.lastElementChild.assignedElements();
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['title', 'src'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'title':
+      {
+        const shortcut = this.getAttribute('shortcut');
+        this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
+      }
+      break;
+    case 'src':
+      this.$img.setAttribute('src', newValue);
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.$dropdown.addEventListener('selectedindexchange', (e) => {
+      console.log(e.detail);
+      console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
+    });
+  }
+}
+
+// Register
+customElements.define('se-dropdown', Dropdown);