Fix #52 - Added support for adding content before and after all other…

… elements within the color picker.
pIvan · Aug 24, 2023 · 3ca5dae · 3ca5dae
1 parent 068f0b6
commit 3ca5dae
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 43 deletions.
diff --git a/projects/iplab/ngx-color-picker/package.json b/projects/iplab/ngx-color-picker/package.json
@@ -3,7 +3,7 @@
   "description": "",
   "homepage": "https://github.com/pIvan/ngx-color-picker",
   "bugs": "https://github.com/pIvan/ngx-color-picker/issues",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "author": "Ivan Pintar",
   "license": "MIT",
   "readmeFilename": "README.md",

diff --git a/...ects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html b/...ects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html
@@ -1,3 +1,5 @@
+<ng-content select="[before]"></ng-content>
+
 <saturation-component [hue]="control.hue" [(color)]="control.value"></saturation-component>
 
 <div class="controls">
@@ -22,4 +24,6 @@
     </div>
 </div>
 
-<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>
+<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>
+
+<ng-content></ng-content>
diff --git a/...ts/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html b/...ts/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html
@@ -1,3 +1,5 @@
+<ng-content select="[before]"></ng-content>
+
 <color-presets-component 
     *ngIf="control.presetsVisibilityChanges | async" 
     direction="down"
@@ -30,4 +32,6 @@
             <indicator-component colorType="hex" [color]="control.value"></indicator-component>
         </div>
     </div>
-</div>
+</div>
+
+<ng-content></ng-content>
diff --git a/...ects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html b/...ects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html
@@ -1,5 +1,9 @@
+<ng-content select="[before]"></ng-content>
+
 <color-presets-component 
     direction="down"
     [columns]="columnsCount"
     [(color)]="control.value" 
-    [colorPresets]="control.presets"></color-presets-component>
+    [colorPresets]="control.presets"></color-presets-component>
+
+<ng-content></ng-content>
diff --git a/...ects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html b/...ects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html
@@ -1,3 +1,5 @@
+<ng-content select="[before]"></ng-content>
+
 <saturation-component [hue]="control.hue" [(color)]="control.value"></saturation-component>
 
 <div class="controls">
@@ -20,4 +22,6 @@
     </div>
 </div>
 
-<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>
+<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>
+
+<ng-content></ng-content>
diff --git a/.../iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html b/.../iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html
@@ -1,3 +1,5 @@
+<ng-content select="[before]"></ng-content>
+
 <color-presets-component 
     [columns]="7"
     direction="down"
@@ -9,4 +11,6 @@
     [columns]="7"
     direction="down"
     [(color)]="childControl.value" 
-    [colorPresets]="childControl.presets"></color-presets-component>
+    [colorPresets]="childControl.presets"></color-presets-component>
+
+<ng-content></ng-content>
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -111,6 +111,21 @@ <h6>[control] attribute</h6>
             <b>Examples:</b><br>
                 <code>&lt;chrome-picker [control]="ColorPickerControl"&gt;&lt;/chrome-picker&gt;</code>
             </p>
+            <hr>
+
+            <h6>Custom content before and after a color picker.</h6>
+            <p>All components support this functionality; that is, all components project content to specified locations.</p>
+            <b>Examples:</b><br>
+            <pre class="prettify">&lt;chrome-picker [control]="ColorPickerControl"&gt;
+    &lt;div before&gt;
+        This content goes insede color picker before any other elements.
+    &lt;/div&gt;
+    &lt;div&gt;
+        This content goes insede color picker after all other elements.
+    &lt;/div&gt;
+&lt;/chrome-picker&gt;</pre>
+            <p>An example of implementing content afterward is shown <a href="#wrap-component">here</a>.</p>
+
             <hr>
             <h6>color indicator</h6>
             <p>Color indicator is not only indicator,  but click also allows copying component color to clipboard.<br>
@@ -435,31 +450,39 @@ <h6>attributes explanation</h6>
 ...
 selector: 'chrome-wrapper',
 template: '
-&lt;chrome-picker *ngIf="isVisible" [control]="colorControl"&gt;&lt;/chrome-picker&gt;
-&lt;div *ngIf="isVisible" class="overlay" (click)="overlayClick($event)"&gt;&lt;/div&gt;
+&lt;div class="picker" *ngIf="isVisible"&gt;
+    &lt;chrome-picker [control]="colorControl"&gt;
+        &lt;div class="buttons"&gt;
+            &lt;button type="button" class="btn btn-primary" (click)="applyClick($event)"&gt;Apply&lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/chrome-picker&gt;
+    &lt;div class="overlay"&gt;&lt;/div&gt;
+&lt;/div&gt;
 '
 &#125;)
 export class ChromeWrapperComponent &#123;
 
+    private _color: Color = null;
+
     public colorControl = new ColorPickerControl();
 
     public isVisible: boolean = false;
 
     @Input()
     public set color(color: string) &#123;
         this.colorControl.setValueFrom(color);
+        this._color = this.colorControl.value;
     &#125;
 
     @Output()
     public colorChange: EventEmitter&lt;string&gt; = new EventEmitter();
 
     @HostBinding('style.background-color')
     public get background(): string &#123;
-        return this.colorControl.value.toHexString();
+        return this._color ? this._color.toHexString() : null;
     &#125;
 
     public ngOnInit() &#123;
-        this.colorControl.valueChanges.subscribe((value: Color) => this.colorChange.emit(value.toHexString()));
     &#125;
 
     @HostListener('click', ['$event'])
@@ -471,10 +494,12 @@ <h6>attributes explanation</h6>
         this.isVisible = !this.isVisible;
     &#125;
 
-    public overlayClick(event: MouseEvent): void &#123;
+    public applyClick(event: MouseEvent): void &#123;
         event.preventDefault();
         event.stopPropagation();
         this.isVisible = false;
+        this._color = this.colorControl.value;
+        this.colorChange.emit(this.colorControl.value.toHexString());
     &#125;
 &#125;</pre>
 

diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css
diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html
@@ -1,2 +1,8 @@
-<chrome-picker *ngIf="isVisible" [control]="colorControl"></chrome-picker>
-<div *ngIf="isVisible" class="overlay" (click)="overlayClick($event)"></div>
+<div class="picker" *ngIf="isVisible">
+    <chrome-picker [control]="colorControl">
+        <div class="buttons">
+            <button type="button" class="btn btn-primary" (click)="applyClick($event)">Apply</button>
+        </div>
+    </chrome-picker>
+    <div class="overlay"></div>
+</div>
diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss
@@ -0,0 +1,43 @@
+:host {
+    border: 1px solid #333;
+    border-radius: 35px;
+    cursor: pointer;
+    display: inline-block;
+    height: 35px;
+    position: relative;
+    width: 35px;
+}
+
+.picker {
+    left: 100%;
+    position: absolute;
+    top: 100%;
+    z-index: 2;
+
+    chrome-picker {
+        left: 100%;
+        position: absolute;
+        top: 100%;
+        z-index: 2;
+    }
+
+    .buttons {
+        padding: 0 12px 12px;
+        text-align: center;
+
+        button {
+            padding: .2rem 1rem;
+        }
+    }
+
+    .overlay {
+        background: transparent;
+        left: 0;
+        position: fixed;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+    }
+}
+
diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts
@@ -4,29 +4,31 @@ import { ColorPickerControl, Color } from '@iplab/ngx-color-picker';
 @Component({
     selector: 'chrome-wrapper',
     templateUrl: './chrome-wrapper.component.html',
-    styleUrls: ['./chrome-wrapper.component.css']
+    styleUrls: ['./chrome-wrapper.component.scss']
 })
 export class ChromeWrapperComponent implements OnInit {
 
+    private _color: Color = null;
+
     public colorControl = new ColorPickerControl();
 
     public isVisible: boolean = false;
 
     @Input()
     public set color(color: string) {
         this.colorControl.setValueFrom(color);
+        this._color = this.colorControl.value;
     }
 
     @Output()
     public colorChange: EventEmitter<string> = new EventEmitter();
 
     @HostBinding('style.background-color')
     public get background(): string {
-        return this.colorControl.value.toHexString();
+        return this._color ? this._color.toHexString() : null;
     }
 
     ngOnInit() {
-        this.colorControl.valueChanges.subscribe((value: Color) => this.colorChange.emit(value.toHexString()));
     }
 
     @HostListener('click', ['$event'])
@@ -38,10 +40,12 @@ export class ChromeWrapperComponent implements OnInit {
         this.isVisible = !this.isVisible;
     }
 
-    public overlayClick(event: MouseEvent): void {
+    public applyClick(event: MouseEvent): void {
         event.preventDefault();
         event.stopPropagation();
         this.isVisible = false;
+        this._color = this.colorControl.value;
+        this.colorChange.emit(this.colorControl.value.toHexString());
     }
 
 }