Skip to content

Commit

Permalink
Merge branch 'master' of github.com:zefoy/ngx-color-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@sconix
sconix committed Aug 17, 2017
2 parents 4679a7c + 6d08b15 commit e2d9496
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 28 deletions.
14 changes: 7 additions & 7 deletions src/lib/color-picker.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="color-picker" [hidden]="!show" [style.visibility]="this.hidden ? 'hidden' : 'visible'" [style.height.px]="cpHeight" [style.width.px]="cpWidth" [style.top.px]="top" [style.left.px]="left" [style.position]="position" #dialogPopup>
<div class="color-picker" [style.visibility]="this.hidden || !show ? 'hidden' : 'visible'" [style.height.px]="cpHeight" [style.width.px]="cpWidth" [style.top.px]="top" [style.left.px]="left" [style.position]="position" #dialogPopup>
<div *ngIf="cpDialogDisplay=='popup'" class="arrow arrow-{{cpPosition}}" [style.top.px]="arrowTop"></div>

<div [slider] [style.background-color]="hueSliderColor" [rgX]="1" [rgY]="1" (newValue)="setSaturationAndBrightness($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')" class="saturation-lightness">
Expand All @@ -16,13 +16,13 @@
<div [style.left.px]="slider.h" class="cursor"></div>
</div>

<div [hidden]="cpAlphaChannel==='disabled'" [slider] [style.background-color]="alphaSliderColor" [rgX]="1" (newValue)="setAlpha($event)" (dragStart)="onDragStart('alpha')" (dragEnd)="onDragEnd('alpha')" class="alpha" #alphaSlider>
<div [style.display]="cpAlphaChannel === 'disabled' ? 'none' : 'block'" [slider] [style.background-color]="alphaSliderColor" [rgX]="1" (newValue)="setAlpha($event)" (dragStart)="onDragStart('alpha')" (dragEnd)="onDragEnd('alpha')" class="alpha" #alphaSlider>
<div [style.left.px]="slider.a" class="cursor"></div>
</div>
</div>
</div>

<div [hidden]="format!=2" class="hsla-text">
<div [style.display]="format !== 2 ? 'none' : 'block'" class="hsla-text">
<div class="box">
<input [text] type="number" pattern="[0-9]*" min="0" max="360" [rg]="360" (newValue)="setHue($event)" [value]="hslaText.h"/>
<input [text] type="number" pattern="[0-9]*" min="0" max="100" [rg]="100" (newValue)="setSaturation($event)" [value]="hslaText.s"/>
Expand All @@ -34,7 +34,7 @@
</div>
</div>

<div [hidden]="format!=1" class="rgba-text">
<div [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
<div class="box">
<input [text] type="number" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setR($event)" [value]="rgbaText.r"/>
<input [text] type="number" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setG($event)" [value]="rgbaText.g"/>
Expand All @@ -46,7 +46,7 @@
</div>
</div>

<div [hidden]="format!=0" class="hex-text">
<div [style.display]="format !== 0 ? 'none' : 'block'" class="hex-text">
<div class="box">
<input [text] (newValue)="setHex($event)" [value]="hexText"/>
</div>
Expand All @@ -66,8 +66,8 @@
</div>

<div *ngIf="cpOKButton || cpCancelButton" class="button-area">
<button *ngIf="cpOKButton" type="button" class="{{cpOKButtonClass}}" (click)="oKColor()">{{cpOKButtonText}}</button>
<button *ngIf="cpCancelButton" type="button" class="{{cpCancelButtonClass}}" (click)="cancelColor()">{{cpCancelButtonText}}</button>
<button *ngIf="cpOKButton" type="button" class="{{cpOKButtonClass}}" (click)="oKColor($event)">{{cpOKButtonText}}</button>
<button *ngIf="cpCancelButton" type="button" class="{{cpCancelButtonClass}}" (click)="cancelColor($event)">{{cpCancelButtonText}}</button>
</div>

</div>
43 changes: 31 additions & 12 deletions src/lib/color-picker.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,32 @@
font-size:11px;
}

@mixin boder-radius($radius){
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}

// Flexbox display
// flex or inline-flex
@mixin flex-box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($columns: initial) {
-webkit-flex: $columns;
-ms-flex: $columns;
flex: $columns;
}

.color-picker{
cursor: default;
width: 230px;
Expand Down Expand Up @@ -92,7 +111,7 @@
width: 18px;
height: 18px;
margin: 4px 6px 8px 6px;
@include boder-radius(25%);
@include border-radius(25%);
border: #a9a9a9 solid 1px;
}
}
Expand Down Expand Up @@ -136,7 +155,7 @@
div.cursor-sv{
cursor:default;
position:relative;
@include boder-radius(50%);
@include border-radius(50%);
width: 15px;
height: 15px;
border: #ddd solid 1px;
Expand All @@ -145,7 +164,7 @@
div.cursor{
cursor:default;
position:relative;
@include boder-radius(50%);
@include border-radius(50%);
width: 16px;
height: 16px;
border: #222 solid 2px;
Expand All @@ -161,15 +180,15 @@
}

.box{
display: flex;
@include flex-box();
padding: 4px 8px;

.left{
position: relative;
padding: 16px 8px;
}
.right{
flex: 1 1 auto;
@include flex(1 1 auto);
padding: 12px 8px;
}
}
Expand Down Expand Up @@ -198,13 +217,13 @@
top: 16px;
left: 8px;
position:absolute;
@include boder-radius(50%);
@include border-radius(50%);
}

.selected-color-background{
width: 40px;
height: 40px;
@include boder-radius(50%);
@include border-radius(50%);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC');
}

Expand Down Expand Up @@ -232,7 +251,7 @@
padding: 0 24px 8px 8px;
input{
min-width: 0;
flex: 1;
@include flex(1);
margin: 0;
float:left;
margin-right:8px;
Expand All @@ -244,7 +263,7 @@
}
}
div{
flex: 1 1 auto;
@include flex(1 1 auto);
text-align: center;
color: #555;
margin-right:8px;
Expand All @@ -264,12 +283,12 @@
.box{
padding: 0 24px 8px 8px;
input{
flex: 1 1 auto;
@include flex(1 1 auto);
border: #a9a9a9 solid 1px;
padding: 1px;
}
div{
flex: 1 1 auto;
@include flex(1 1 auto);
text-align: center;
color: #555;
float:left;
Expand Down
45 changes: 36 additions & 9 deletions src/lib/color-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Component, ElementRef, OnInit, AfterViewInit, ViewChild, ChangeDetectorR
import { ColorPickerService } from './color-picker.service';

import { Rgba, Hsla, Hsva } from './formats';
import { SliderPosition, SliderDimension } from './helpers';
import { SliderPosition, SliderDimension, detectIE } from './helpers';

@Component({
selector: 'color-picker',
Expand Down Expand Up @@ -60,6 +60,8 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {

private useRootViewContainer: boolean = false;

private isIE10: boolean = false;

@ViewChild('hueSlider') hueSlider: any;
@ViewChild('alphaSlider') alphaSlider: any;
@ViewChild('dialogPopup') dialogElement: any;
Expand Down Expand Up @@ -106,6 +108,8 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
if (cpOutputFormat === 'hex' && cpAlphaChannel !== 'always' && cpAlphaChannel !== 'hex8') {
this.cpAlphaChannel = 'disabled';
}

this.isIE10 = detectIE() === 10;
}

ngOnInit() {
Expand All @@ -120,8 +124,8 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
} else {
this.format = 0;
}
this.listenerMouseDown = (event: any) => { this.onMouseDown(event) };
this.listenerResize = () => { this.onResize() };
this.listenerMouseDown = (event: any) => { this.onMouseDown(event); };
this.listenerResize = () => { this.onResize(); };
this.openDialog(this.initialColor, false);
}

Expand Down Expand Up @@ -152,7 +156,10 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
this.openColorPicker();
}

cancelColor() {
cancelColor(event: Event) {
if (event && event.stopPropagation) {
event.stopPropagation();
}
this.setColorFromString(this.initialColor, true);
if (this.cpDialogDisplay === 'popup') {
this.directiveInstance.colorChanged(this.initialColor, true);
Expand All @@ -162,7 +169,10 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
this.directiveInstance.colorCanceled();
}

oKColor() {
oKColor(event: Event) {
if (event && event.stopPropagation) {
event.stopPropagation();
}
if (this.cpDialogDisplay === 'popup') {
this.closeColorPicker();
}
Expand Down Expand Up @@ -197,12 +207,14 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
}

onMouseDown(event: any) {
// Workaround for IE10: We need to manually click on OK/Cancel button to close the color-picker [detectIE() !== 10]
if ((!this.isDescendant(this.el.nativeElement, event.target)
&& event.target != this.directiveElementRef.nativeElement &&
this.cpIgnoredElements.filter((item: any) => item === event.target).length === 0) && this.cpDialogDisplay === 'popup') {
this.cpIgnoredElements.filter((item: any) => item === event.target).length === 0) &&
this.cpDialogDisplay === 'popup' && !this.isIE10) {
if (!this.cpSaveClickOutside) {
this.setColorFromString(this.initialColor, false);
this.directiveInstance.colorChanged(this.initialColor)
this.directiveInstance.colorChanged(this.initialColor);
}
this.closeColorPicker();
}
Expand All @@ -218,7 +230,16 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
this.cdr.detectChanges();
}, 0);
this.directiveInstance.toggle(true);
document.addEventListener('mousedown', this.listenerMouseDown);
/**
* Required for IE10
* This event listener is conditional to avoid memory leaks
* If the directive was applied at the root level then this won't affect anything
* but if we implement this color picker in child components then it closes on clicking anywhere (including this component)
* and stopPropagation() does not work
*/
if (!this.isIE10) {
document.addEventListener('mousedown', this.listenerMouseDown);
}
window.addEventListener('resize', this.listenerResize);
}
}
Expand All @@ -227,7 +248,13 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
if (this.show) {
this.show = false;
this.directiveInstance.toggle(false);
document.removeEventListener('mousedown', this.listenerMouseDown);
/**
* Required for IE10
* If this is not attached then no need to remove the listener
*/
if (!this.isIE10) {
document.removeEventListener('mousedown', this.listenerMouseDown);
}
window.removeEventListener('resize', this.listenerResize);
this.cdr.detectChanges();
}
Expand Down
13 changes: 13 additions & 0 deletions src/lib/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,16 @@ export class SliderPosition {
export class SliderDimension {
constructor(public h: number, public s: number, public v: number, public a: number) { }
}

const ua = navigator.userAgent.toLowerCase();

export function detectIE() {
const msie = ua.indexOf('msie ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}

// other browser
return false;
}

0 comments on commit e2d9496

Please sign in to comment.