Merge pull request #650 from SVG-Edit/issues/631_2

#631 normal select change to se-select web component

src/editor/EditorStartup.js

@@ -217,7 +217,7 @@ class EditorStartup {
     // fired when user wants to move elements to another layer
     let promptMoveLayerOnce = false;
     $id('selLayerNames').addEventListener('change', (evt) => {
-      const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
+      const destLayer = evt.detail.value;
       const confirmStr = this.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer);
       /**
     * @param {boolean} ok

src/editor/components/seSelect.js

@@ -42,7 +42,7 @@ export class SeSelect extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height', 'options', 'values', 'title' ];
+    return [ 'label', 'width', 'height', 'options', 'values', 'title', 'disabled' ];
   }
 
   /**
@@ -62,6 +62,13 @@ export class SeSelect extends HTMLElement {
     case 'title':
       this.$select.setAttribute("title", t(newValue));
       break;
+    case 'disabled':
+      if(newValue === null) {
+        this.$select.removeAttribute("disabled");
+      } else {
+        this.$select.setAttribute("disabled", newValue);
+      }
+      break;
     case 'height':
       this.$select.style.height = newValue;
       break;
@@ -69,19 +76,29 @@ export class SeSelect extends HTMLElement {
       this.$select.style.width = newValue;
       break;
     case 'options':
-      options = newValue.split(',');
+      if(newValue === "") {
-      options.forEach((option) => {
+        while(this.$select.firstChild)
-        const optionNode = document.createElement("OPTION");
+          this.$select.removeChild(this.$select.firstChild);
-        const text = document.createTextNode(t(option));
+      } else {
-        optionNode.appendChild(text);
+        options = newValue.split(',');
-        this.$select.appendChild(optionNode);
+        options.forEach((option) => {
-      });
+          const optionNode = document.createElement("OPTION");
+          const text = document.createTextNode(t(option));
+          optionNode.appendChild(text);
+          this.$select.appendChild(optionNode);
+        });
+      }
       break;
     case 'values':
-      options = newValue.split(' ');
+      if(newValue === "") {
-      options.forEach((option, index) => {
+        while(this.$select.firstChild)
-        this.$select.children[index].setAttribute('value', option);
+          this.$select.removeChild(this.$select.firstChild);
-      });
+      } else {
+        options = newValue.split('::');
+        options.forEach((option, index) => {
+          this.$select.children[index].setAttribute('value', option);
+        });
+      }
       break;
     default:
       // eslint-disable-next-line no-console
@@ -149,6 +166,21 @@ export class SeSelect extends HTMLElement {
   set value (value) {
     this.$select.value = value;
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get disabled () {
+    return this.$select.getAttribute('disabled');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set disabled (value) {
+    this.$select.setAttribute('disabled', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}

src/editor/panels/BottomPanel.js

@@ -186,7 +186,7 @@ class BottomPanel {
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
         <se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
           options="&#8212;,...,- -,- .,- .."
-          values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">     
+          values="none::2,2::5,5::5,2,2,2::5,2,2,2,2,2">     
         </se-select>
         <se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
           <se-list-item id="linejoin_miter" value="miter" src="linejoin_miter.svg" title="properties.linejoin_miter" img-height="22px"></se-list-item>

src/editor/panels/LayersPanel.js

@@ -67,10 +67,9 @@ class LayersPanel {
               <td class="layername">Layer 1</td>
             </tr>
           </table>
-          <se-text id="selLayerLabel" text="layers.move_elems_to"></se-text>
+          <se-select id="selLayerNames" title="layers.move_selected" label="layers.move_elems_to" options="Layer 1"
-          <select id="selLayerNames" disabled="disabled">
+            values="layer1" value="layer1" disabled="disabled">     
-            <option selected="selected" value="layer1">Layer 1</option>
+          </se-select>
-          </select>
         </div>
      </div>
   </div>
@@ -89,7 +88,6 @@ class LayersPanel {
     menuLayerBox.setAttribute("leftclick", false);
     this.editor.$container.append(menuLayerBox);
     menuLayerBox.init(i18next);
-    $id("selLayerNames").setAttribute("title", i18next.t('layers.move_selected'));
     $id("layer_new").addEventListener("click", this.newLayer.bind(this));
     $id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
     $id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
@@ -279,14 +277,13 @@ class LayersPanel {
     while(layerlist.firstChild)
       layerlist.removeChild(layerlist.firstChild);
 
-    const selLayerNames = $id("selLayerNames");
+    $id("selLayerNames").setAttribute("options", "");
-    // empty() ref: http://youmightnotneedjquery.com/#empty
-    while(selLayerNames.firstChild)
-      selLayerNames.removeChild(selLayerNames.firstChild);
     const drawing = this.editor.svgCanvas.getCurrentDrawing();
     const currentLayerName = drawing.getCurrentLayerName();
     let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
     // we get the layers in the reverse z-order (the layer rendered on top is listed first)
+    let values = "";
+    let text = "";
     while (layer--) {
       const name = drawing.getLayerName(layer);
       const layerTr = document.createElement("tr");
@@ -299,9 +296,11 @@ class LayersPanel {
       layerTr.appendChild(layerVis);
       layerTr.appendChild(layerName);
       layerlist.appendChild(layerTr);
-      // eslint-disable-next-line no-unsanitized/property
+      values = (values) ? values + "::" + name : name;
-      selLayerNames.innerHTML += '<option value="' + name + '">' + name + '</option>';
+      text = (text) ? text + "," + name : name;
     }
+    $id("selLayerNames").setAttribute("options", text);
+    $id("selLayerNames").setAttribute("values", values);
     // handle selection of layer
     const nelements = $id('layerlist').querySelectorAll("td.layername");
     Array.from(nelements).forEach(function(element) {

src/editor/panels/TopPanel.js

@@ -427,6 +427,7 @@ class TopPanel {
       // update the selected elements' layer
       $id("selLayerNames").removeAttribute("disabled");
       $id("selLayerNames").value = currentLayerName;
+      $id("selLayerNames").setAttribute("value", currentLayerName);
 
       // Enable regular menu options
       const canCMenu = document.getElementById("se-cmenu_canvas");
@@ -435,7 +436,7 @@ class TopPanel {
         "#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back"
       );
     } else {
-      $id("selLayerNames").disabled = "disabled";
+      $id("selLayerNames").setAttribute("disabled", "disabled");
     }
   }
   /**
@@ -897,7 +898,7 @@ class TopPanel {
           <se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
           <se-select id="tool_align_relative" label="tools.relativeTo" 
             options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
-            values="selected largest smallest page"></se-list-item>
+            values="selected::largest::smallest::page"></se-list-item>
           </se-select>
         </div> <!-- multiselected_panel -->
         <div class="rect_panel">
@@ -936,7 +937,7 @@ class TopPanel {
         <div class="text_panel">
           <se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
           <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
-          <se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"></select>
+          <se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></select>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size" src="fontsize.svg"></se-spin-input>
         </div>
         <div class="text_panel">
@@ -969,7 +970,7 @@ class TopPanel {
           <div class="tool_sep"></div>
           <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label"></se-spin-input>
           <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label"></se-spin-input>
-          <se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4 6"></se-select>
+          <se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
           <se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
           <se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
           <se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>