Feeds color back into modal component when editing

codewithkyle · Aug 14, 2019 · 6b458bb · 6b458bb
1 parent 7546da8
commit 6b458bb
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 2 deletions.
diff --git a/docs/assets/components/color-block-component.js b/docs/assets/components/color-block-component.js
@@ -7,18 +7,29 @@ class ColorBlockComponent extends HTMLElement {
         this._deleteButton = this.querySelector('.js-delete-button');
         this._editButton = this.querySelector('.js-edit-button');
         this._colorButton = this.querySelector('.js-color-button');
+        this._color = '#000000';
+        this._modalTemplate = document.body.querySelector('[tag="color-selector-modal"]');
     }
     removeColor() {
         this.remove();
     }
     editColor() {
+        const modal = document.importNode(this._modalTemplate.content, true);
+        document.body.appendChild(modal);
+        const modalComponent = document.body.querySelector('color-modal-component');
+        modalComponent.setInitialColor(this._color);
     }
     activateColor() {
     }
     connectedCallback() {
         this._deleteButton.addEventListener('click', this.handleDeleteClick);
         this._editButton.addEventListener('click', this.handleEditClick);
         this._colorButton.addEventListener('click', this.handleColorClick);
+        const colorPreview = this.querySelector('custom-color-preview');
+        const cleanValue = colorPreview.style.backgroundColor.replace(/[rgb\(\)\s]/gi, '');
+        const rgbValue = cleanValue.split(',');
+        this._color = `#${convert.rgb.hex(rgbValue)}`;
+        colorPreview.dataset.color = this._color;
     }
     disconnectedCallback() {
         this._deleteButton.removeEventListener('click', this.handleDeleteClick);

diff --git a/docs/assets/components/color-modal-component.js b/docs/assets/components/color-modal-component.js
@@ -19,6 +19,16 @@ class ColorModalComponent extends HTMLElement {
         this._hslInput = this.querySelector('input[data-type="hsl"]');
         this._pallet = document.body.querySelector('color-pallet-component');
     }
+    setInitialColor(color) {
+        const hex = color;
+        const rgb = convert.hex.rgb(color);
+        const hsl = convert.hex.hsl(color);
+        this._hexInput.value = hex;
+        this._rgbInput.value = `rgb(${rgb})`;
+        this._hslInput.value = `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
+        this._colorInput.value = `#${hex}`;
+        this._colorPreview.style.backgroundColor = `rgb(${rgb})`;
+    }
     addColor(e) {
         e.preventDefault();
         const color = this._colorInput.value.replace('#', '');

diff --git a/src/color-block-component.ts b/src/color-block-component.ts
@@ -3,13 +3,17 @@ class ColorBlockComponent extends HTMLElement
     private _deleteButton : HTMLButtonElement;
     private _editButton : HTMLButtonElement;
     private _colorButton : HTMLElement;
+    private _color : string;
+    private _modalTemplate : HTMLTemplateElement;
 
     constructor()
     {
         super();
         this._deleteButton = this.querySelector('.js-delete-button');
         this._editButton = this.querySelector('.js-edit-button');
         this._colorButton = this.querySelector('.js-color-button');
+        this._color = '#000000';
+        this._modalTemplate = document.body.querySelector('[tag="color-selector-modal"]');
     }
 
     private handleDeleteClick:EventListener = this.removeColor.bind(this);
@@ -23,7 +27,10 @@ class ColorBlockComponent extends HTMLElement
 
     private editColor() : void
     {
-
+        const modal = document.importNode(this._modalTemplate.content, true);
+        document.body.appendChild(modal);
+        const modalComponent = document.body.querySelector('color-modal-component') as ColorModalComponent;
+        modalComponent.setInitialColor(this._color);
     }
 
     private activateColor() : void
@@ -36,6 +43,12 @@ class ColorBlockComponent extends HTMLElement
         this._deleteButton.addEventListener('click', this.handleDeleteClick);
         this._editButton.addEventListener('click', this.handleEditClick);
         this._colorButton.addEventListener('click', this.handleColorClick);
+
+        const colorPreview = this.querySelector('custom-color-preview') as HTMLElement;
+        const cleanValue = colorPreview.style.backgroundColor.replace(/[rgb\(\)\s]/gi, '');
+        const rgbValue = cleanValue.split(',');
+        this._color = `#${ convert.rgb.hex(rgbValue) }`;
+        colorPreview.dataset.color = this._color;
     }
 
     disconnectedCallback()

diff --git a/src/color-modal-component.ts b/src/color-modal-component.ts
@@ -39,6 +39,19 @@ class ColorModalComponent extends HTMLElement
     private handleInputKeyup:EventListener = this.detectColor.bind(this);
     private handleColorChange:EventListener = this.changeColor.bind(this);
 
+    public setInitialColor(color:string) : void
+    {
+        const hex = color;
+        const rgb = convert.hex.rgb(color);
+        const hsl = convert.hex.hsl(color);
+
+        this._hexInput.value = hex;
+        this._rgbInput.value = `rgb(${ rgb })`;
+        this._hslInput.value = `hsl(${ hsl[0] }, ${ hsl[1] }%, ${ hsl[2] }%)`;
+        this._colorInput.value = `#${ hex }`;
+        this._colorPreview.style.backgroundColor = `rgb(${ rgb })`;
+    }
+
     private addColor(e:Event) : void
     {
         e.preventDefault();

diff --git a/src/new-color-component.ts b/src/new-color-component.ts
@@ -1,6 +1,5 @@
 class NewColorComponent extends HTMLElement
 {
-
     private _modalTemplate : HTMLTemplateElement;
 
     constructor()