Merge pull request #80 from OptimistikSAS/issues/51

src/editor/components/sePalette.js

@@ -1,8 +1,7 @@
-import 'elix/define/CenteredStrip.js';
+/* eslint-disable max-len */
-
 const palette = [
   // Todo: Make into configuration item?
-  '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
+  'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
   '#ff0000', '#ff7f00', '#ffff00', '#7fff00',
   '#00ff00', '#00ff7f', '#00ffff', '#007fff',
   '#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
@@ -20,11 +19,66 @@ template.innerHTML = `
   .square {
     height: 15px;
     width: 15px;
+    float: left;
+  }
+  #palette_holder {
+    overflow: hidden;
+    margin-top: 5px;
+    padding: 5px;
+    position: absolute;
+    right: 15px;
+    height: 16px;
+    background: #f0f0f0;
+    border-radius: 3px;
+    z-index: 2;
+  }
+  
+  #js-se-palette {
+    float: left;
+    width: 632px;
+    height: 16px;
+  }
+  
+  div.palette_item {
+    height: 15px;
+    width: 15px;
+    float: left;
+  }
+  
+  div.palette_item:first-child {
+    background: white;
+  }
+  @media screen and (max-width:1100px) {
+    #palette_holder {
+      left: 410px;
+      overflow-x: scroll;
+      padding: 0 5px;
+      margin-top: 2px;
+      height: 30px;
+    }
+  } 
+  @media screen and (max-width:1250px) {
+    #palette_holder {
+      left: 560px;
+      overflow-x: scroll;
+      padding: 0 5px;
+      margin-top: 2px;
+      height: 30px;
+    }
+  }
+  @media screen and (max-width:540px) {
+    #palette_holder {
+      left: 0px;
+      overflow-x: scroll;
+      padding: 0 5px;
+      margin-top: 32px;
+      height: 30px;
+    }
   }   
   </style>
-  <div title="Click to change fill color, shift-click to change stroke color">
+  <div id="palette_holder" title="Click to change fill color, shift-click to change stroke color">
-    <elix-centered-strip style="width:300px;padding:5px;background: #fff; border-radius: 5px;">
+    <div id="js-se-palette">
-    </elix-centered-strip>
+    </div>
   </div>
 `;
 
@@ -40,12 +94,32 @@ export class SEPalette extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.append(template.content.cloneNode(true));
-    this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
+    this.$strip = this._shadowRoot.querySelector('#js-se-palette');
     palette.forEach((rgb) => {
       const newDiv = document.createElement('div');
       newDiv.classList.add('square');
-      newDiv.style.backgroundColor = rgb;
+      if(rgb === 'none') {
+        var img = document.createElement('img'); 
+        img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`;
+        img.style.width = "15px";
+        img.style.height = "15px";
+        newDiv.append(img);
+      } else {
+        newDiv.style.backgroundColor = rgb;
+      }      
       newDiv.dataset.rgb = rgb;
+      newDiv.addEventListener('click', (evt) => {
+        evt.preventDefault();
+        // shift key or right click for stroke
+        const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
+        let color = newDiv.dataset.rgb;
+        // Webkit-based browsers returned 'initial' here for no stroke
+        if (color === 'none' || color === 'transparent' || color === 'initial') {
+          color = 'none';
+        }
+        const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
+        this.dispatchEvent(paletteEvent);
+      });
       this.$strip.append(newDiv);
     });
   }
@@ -55,18 +129,6 @@ export class SEPalette extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    this.$strip.addEventListener('click', (evt) => {
-      evt.preventDefault();
-      // shift key or right click for stroke
-      const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
-      let color = this.$strip.currentItem.dataset.rgb;
-      // Webkit-based browsers returned 'initial' here for no stroke
-      if (color === 'none' || color === 'transparent' || color === 'initial') {
-        color = 'none';
-      }
-      const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
-      this.dispatchEvent(paletteEvent);
-    });
   }
 }