+
-
+
-
-
+
+
diff --git a/src/lib/color-picker.component.scss b/src/lib/color-picker.component.scss
index cc84062..416817d 100644
--- a/src/lib/color-picker.component.scss
+++ b/src/lib/color-picker.component.scss
@@ -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
+//
, initial, auto, or none
+@mixin flex($columns: initial) {
+ -webkit-flex: $columns;
+ -ms-flex: $columns;
+ flex: $columns;
+}
+
.color-picker{
cursor: default;
width: 230px;
@@ -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;
}
}
@@ -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;
@@ -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;
@@ -161,7 +180,7 @@
}
.box{
- display: flex;
+ @include flex-box();
padding: 4px 8px;
.left{
@@ -169,7 +188,7 @@
padding: 16px 8px;
}
.right{
- flex: 1 1 auto;
+ @include flex(1 1 auto);
padding: 12px 8px;
}
}
@@ -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');
}
@@ -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;
@@ -244,7 +263,7 @@
}
}
div{
- flex: 1 1 auto;
+ @include flex(1 1 auto);
text-align: center;
color: #555;
margin-right:8px;
@@ -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;
diff --git a/src/lib/color-picker.component.ts b/src/lib/color-picker.component.ts
index 264f405..d210083 100644
--- a/src/lib/color-picker.component.ts
+++ b/src/lib/color-picker.component.ts
@@ -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',
@@ -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;
@@ -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() {
@@ -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);
}
@@ -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);
@@ -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();
}
@@ -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();
}
@@ -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);
}
}
@@ -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();
}
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
index ba0da52..b3c20a2 100644
--- a/src/lib/helpers.ts
+++ b/src/lib/helpers.ts
@@ -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;
+}