OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2011 Brian Grinstead All rights reserved. | 2 * Copyright (C) 2011 Brian Grinstead All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 5 * modification, are permitted provided that the following conditions |
6 * are met: | 6 * are met: |
7 * | 7 * |
8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
83 inputValue.addEventListener("keydown", this._inputChanged.bind(this), fa lse); | 83 inputValue.addEventListener("keydown", this._inputChanged.bind(this), fa lse); |
84 inputValue.addEventListener("input", this._inputChanged.bind(this), fals e); | 84 inputValue.addEventListener("input", this._inputChanged.bind(this), fals e); |
85 inputValue.addEventListener("mousewheel", this._inputChanged.bind(this), false); | 85 inputValue.addEventListener("mousewheel", this._inputChanged.bind(this), false); |
86 } | 86 } |
87 | 87 |
88 this._textLabels = this._displayContainer.createChild("div", "spectrum-text- label"); | 88 this._textLabels = this._displayContainer.createChild("div", "spectrum-text- label"); |
89 | 89 |
90 // HEX display. | 90 // HEX display. |
91 this._hexContainer = this.contentElement.createChild("div", "spectrum-text s pectrum-text-hex source-code"); | 91 this._hexContainer = this.contentElement.createChild("div", "spectrum-text s pectrum-text-hex source-code"); |
92 this._hexValue = this._hexContainer.createChild("input", "spectrum-text-valu e"); | 92 this._hexValue = this._hexContainer.createChild("input", "spectrum-text-valu e"); |
93 this._hexValue.maxLength = 7; | 93 this._hexValue.maxLength = 9; |
94 this._hexValue.addEventListener("keydown", this._inputChanged.bind(this), fa lse); | 94 this._hexValue.addEventListener("keydown", this._inputChanged.bind(this), fa lse); |
95 this._hexValue.addEventListener("input", this._inputChanged.bind(this), fals e); | 95 this._hexValue.addEventListener("input", this._inputChanged.bind(this), fals e); |
96 this._hexValue.addEventListener("mousewheel", this._inputChanged.bind(this), false); | 96 this._hexValue.addEventListener("mousewheel", this._inputChanged.bind(this), false); |
97 | 97 |
98 var label = this._hexContainer.createChild("div", "spectrum-text-label"); | 98 var label = this._hexContainer.createChild("div", "spectrum-text-label"); |
99 label.textContent = "HEX"; | 99 label.textContent = "HEX"; |
100 | 100 |
101 WebInspector.installDragHandle(this._hueElement, dragStart.bind(this, positi onHue.bind(this)), positionHue.bind(this), null, "default"); | 101 WebInspector.installDragHandle(this._hueElement, dragStart.bind(this, positi onHue.bind(this)), positionHue.bind(this), null, "default"); |
102 WebInspector.installDragHandle(this._alphaElement, dragStart.bind(this, posi tionAlpha.bind(this)), positionAlpha.bind(this), null, "default"); | 102 WebInspector.installDragHandle(this._alphaElement, dragStart.bind(this, posi tionAlpha.bind(this)), positionAlpha.bind(this), null, "default"); |
103 WebInspector.installDragHandle(this._colorElement, dragStart.bind(this, posi tionColor.bind(this)), positionColor.bind(this), null, "default"); | 103 WebInspector.installDragHandle(this._colorElement, dragStart.bind(this, posi tionColor.bind(this)), positionColor.bind(this), null, "default"); |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
158 /** | 158 /** |
159 * @param {!Event} event | 159 * @param {!Event} event |
160 * @this {WebInspector.Spectrum} | 160 * @this {WebInspector.Spectrum} |
161 */ | 161 */ |
162 function positionAlpha(event) | 162 function positionAlpha(event) |
163 { | 163 { |
164 var newAlpha = Math.round((event.x - this._hueAlphaLeft) / this._hueAlph aWidth * 100) / 100; | 164 var newAlpha = Math.round((event.x - this._hueAlphaLeft) / this._hueAlph aWidth * 100) / 100; |
165 var hsva = this._hsv.slice(); | 165 var hsva = this._hsv.slice(); |
166 hsva[3] = Number.constrain(newAlpha, 0, 1); | 166 hsva[3] = Number.constrain(newAlpha, 0, 1); |
167 var colorFormat = undefined; | 167 var colorFormat = undefined; |
168 if (hsva[3] !== 1 && (this._colorFormat === WebInspector.Color.Format.Sh ortHEX || this._colorFormat === WebInspector.Color.Format.HEX || this._colorForm at === WebInspector.Color.Format.Nickname)) | 168 if (hsva[3] !== 1 && this._colorFormat === WebInspector.Color.Format.Nic kname) |
169 colorFormat = WebInspector.Color.Format.RGB; | 169 colorFormat = WebInspector.Color.Format.RGBA; |
pfeldman
2016/05/19 07:14:06
Should this retain RGB?
samli
2016/05/20 00:22:18
Yes for mildly better readability, doesn't actuall
| |
170 this._innerSetColor(hsva, "", colorFormat, WebInspector.Spectrum._Change Source.Other); | 170 this._innerSetColor(hsva, "", colorFormat, WebInspector.Spectrum._Change Source.Other); |
171 } | 171 } |
172 | 172 |
173 /** | 173 /** |
174 * @param {!Event} event | 174 * @param {!Event} event |
175 * @this {WebInspector.Spectrum} | 175 * @this {WebInspector.Spectrum} |
176 */ | 176 */ |
177 function positionColor(event) | 177 function positionColor(event) |
178 { | 178 { |
179 var hsva = this._hsv.slice(); | 179 var hsva = this._hsv.slice(); |
(...skipping 402 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
582 if (hsva !== undefined) | 582 if (hsva !== undefined) |
583 this._hsv = hsva; | 583 this._hsv = hsva; |
584 if (colorString !== undefined) | 584 if (colorString !== undefined) |
585 this._colorString = colorString; | 585 this._colorString = colorString; |
586 if (colorFormat !== undefined) { | 586 if (colorFormat !== undefined) { |
587 console.assert(colorFormat !== WebInspector.Color.Format.Original, " Spectrum's color format cannot be Original"); | 587 console.assert(colorFormat !== WebInspector.Color.Format.Original, " Spectrum's color format cannot be Original"); |
588 if (colorFormat === WebInspector.Color.Format.RGBA) | 588 if (colorFormat === WebInspector.Color.Format.RGBA) |
589 colorFormat = WebInspector.Color.Format.RGB; | 589 colorFormat = WebInspector.Color.Format.RGB; |
590 else if (colorFormat === WebInspector.Color.Format.HSLA) | 590 else if (colorFormat === WebInspector.Color.Format.HSLA) |
591 colorFormat = WebInspector.Color.Format.HSL; | 591 colorFormat = WebInspector.Color.Format.HSL; |
592 else if (colorFormat === WebInspector.Color.Format.AlphaHEX) | |
pfeldman
2016/05/19 07:14:06
This also seems to go the other way around.
| |
593 colorFormat = WebInspector.Color.Format.HEX; | |
592 this._colorFormat = colorFormat; | 594 this._colorFormat = colorFormat; |
593 } | 595 } |
594 | 596 |
595 this._updateHelperLocations(); | 597 this._updateHelperLocations(); |
596 this._updateUI(); | 598 this._updateUI(); |
597 | 599 |
598 if (changeSource !== WebInspector.Spectrum._ChangeSource.Input) | 600 if (changeSource !== WebInspector.Spectrum._ChangeSource.Input) |
599 this._updateInput(); | 601 this._updateInput(); |
600 if (changeSource !== WebInspector.Spectrum._ChangeSource.Model) | 602 if (changeSource !== WebInspector.Spectrum._ChangeSource.Model) |
601 this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChan ged, this.colorString()); | 603 this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChan ged, this.colorString()); |
(...skipping 29 matching lines...) Expand all Loading... | |
631 if (colorString) | 633 if (colorString) |
632 return colorString; | 634 return colorString; |
633 | 635 |
634 if (this._colorFormat === cf.Nickname || this._colorFormat === cf.ShortH EX) { | 636 if (this._colorFormat === cf.Nickname || this._colorFormat === cf.ShortH EX) { |
635 colorString = color.asString(cf.HEX); | 637 colorString = color.asString(cf.HEX); |
636 if (colorString) | 638 if (colorString) |
637 return colorString; | 639 return colorString; |
638 } | 640 } |
639 | 641 |
640 console.assert(color.hasAlpha()); | 642 console.assert(color.hasAlpha()); |
641 return this._colorFormat === cf.HSL ? /** @type {string} */(color.asStri ng(cf.HSLA)) : /** @type {string} */(color.asString(cf.RGBA)); | 643 if (this._colorFormat === cf.HEX) |
644 return /** @type {string} */(color.asString(cf.AlphaHEX)); | |
645 else if (this._colorFormat === cf.HSL) | |
646 return /** @type {string} */(color.asString(cf.HSLA)); | |
647 else | |
648 return /** @type {string} */(color.asString(cf.RGBA)); | |
642 }, | 649 }, |
643 | 650 |
644 _updateHelperLocations: function() | 651 _updateHelperLocations: function() |
645 { | 652 { |
646 var h = this._hsv[0]; | 653 var h = this._hsv[0]; |
647 var s = this._hsv[1]; | 654 var s = this._hsv[1]; |
648 var v = this._hsv[2]; | 655 var v = this._hsv[2]; |
649 var alpha = this._hsv[3]; | 656 var alpha = this._hsv[3]; |
650 | 657 |
651 // Where to show the little circle that displays your current selected c olor. | 658 // Where to show the little circle that displays your current selected c olor. |
(...skipping 16 matching lines...) Expand all Loading... | |
668 | 675 |
669 _updateInput: function() | 676 _updateInput: function() |
670 { | 677 { |
671 var cf = WebInspector.Color.Format; | 678 var cf = WebInspector.Color.Format; |
672 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX || this._colorFormat === cf.Nickname) { | 679 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX || this._colorFormat === cf.Nickname) { |
673 this._hexContainer.hidden = false; | 680 this._hexContainer.hidden = false; |
674 this._displayContainer.hidden = true; | 681 this._displayContainer.hidden = true; |
675 if (this._colorFormat === cf.ShortHEX && this._color().canBeShortHex ()) | 682 if (this._colorFormat === cf.ShortHEX && this._color().canBeShortHex ()) |
676 this._hexValue.value = this._color().asString(cf.ShortHEX); | 683 this._hexValue.value = this._color().asString(cf.ShortHEX); |
677 else | 684 else |
678 this._hexValue.value = this._color().asString(cf.HEX); | 685 this._hexValue.value = this._color().asString(this._color().hasA lpha() ? cf.AlphaHEX : cf.HEX); |
679 } else { | 686 } else { |
680 // RGBA, HSLA display. | 687 // RGBA, HSLA display. |
681 this._hexContainer.hidden = true; | 688 this._hexContainer.hidden = true; |
682 this._displayContainer.hidden = false; | 689 this._displayContainer.hidden = false; |
683 var isRgb = this._colorFormat === cf.RGB; | 690 var isRgb = this._colorFormat === cf.RGB; |
684 this._textLabels.textContent = isRgb ? "RGBA" : "HSLA"; | 691 this._textLabels.textContent = isRgb ? "RGBA" : "HSLA"; |
685 var colorValues = isRgb ? this._color().canonicalRGBA() : this._colo r().canonicalHSLA(); | 692 var colorValues = isRgb ? this._color().canonicalRGBA() : this._colo r().canonicalHSLA(); |
686 for (var i = 0; i < 3; ++i) { | 693 for (var i = 0; i < 3; ++i) { |
687 this._textValues[i].value = colorValues[i]; | 694 this._textValues[i].value = colorValues[i]; |
688 if (!isRgb && (i === 1 || i === 2)) | 695 if (!isRgb && (i === 1 || i === 2)) |
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
795 var noAlpha = WebInspector.Color.fromHSVA(this._hsv.slice(0,3).concat(1) ); | 802 var noAlpha = WebInspector.Color.fromHSVA(this._hsv.slice(0,3).concat(1) ); |
796 this._alphaElementBackground.style.backgroundImage = String.sprintf("lin ear-gradient(to right, rgba(0,0,0,0), %s)", noAlpha.asString(WebInspector.Color. Format.RGB)); | 803 this._alphaElementBackground.style.backgroundImage = String.sprintf("lin ear-gradient(to right, rgba(0,0,0,0), %s)", noAlpha.asString(WebInspector.Color. Format.RGB)); |
797 }, | 804 }, |
798 | 805 |
799 _formatViewSwitch: function() | 806 _formatViewSwitch: function() |
800 { | 807 { |
801 var cf = WebInspector.Color.Format; | 808 var cf = WebInspector.Color.Format; |
802 var format = cf.RGB; | 809 var format = cf.RGB; |
803 if (this._colorFormat === cf.RGB) | 810 if (this._colorFormat === cf.RGB) |
804 format = cf.HSL; | 811 format = cf.HSL; |
805 else if (this._colorFormat === cf.HSL && !this._color().hasAlpha()) | 812 else if (this._colorFormat === cf.HSL) |
dgozman
2016/05/19 07:10:59
This change seems to be wrong. We cannot represent
samli
2016/05/20 00:22:18
Spectrum-only format, bit confusing I know sorry :
| |
806 format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX ; | 813 format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX ; |
807 this._innerSetColor(undefined, "", format, WebInspector.Spectrum._Change Source.Other); | 814 this._innerSetColor(undefined, "", format, WebInspector.Spectrum._Change Source.Other); |
808 }, | 815 }, |
809 | 816 |
810 /** | 817 /** |
811 * @param {!Event} event | 818 * @param {!Event} event |
812 */ | 819 */ |
813 _inputChanged: function(event) | 820 _inputChanged: function(event) |
814 { | 821 { |
815 /** | 822 /** |
(...skipping 204 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1020 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B" , "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], | 1027 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B" , "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], |
1021 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107" , "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], | 1028 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107" , "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], |
1022 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800" , "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], | 1029 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800" , "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], |
1023 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722" , "#F4511E", "#E64A19", "#D84315", "#BF360C"], | 1030 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722" , "#F4511E", "#E64A19", "#D84315", "#BF360C"], |
1024 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548" , "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], | 1031 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548" , "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], |
1025 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E" , "#757575", "#616161", "#424242", "#212121"], | 1032 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E" , "#757575", "#616161", "#424242", "#212121"], |
1026 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B" , "#546E7A", "#455A64", "#37474F", "#263238"] | 1033 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B" , "#546E7A", "#455A64", "#37474F", "#263238"] |
1027 }; | 1034 }; |
1028 | 1035 |
1029 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha des) }; | 1036 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha des) }; |
OLD | NEW |