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.HEX; |
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 397 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
577 * @param {string|undefined} colorFormat | 577 * @param {string|undefined} colorFormat |
578 * @param {string} changeSource | 578 * @param {string} changeSource |
579 */ | 579 */ |
580 _innerSetColor: function(hsva, colorString, colorFormat, changeSource) | 580 _innerSetColor: function(hsva, colorString, colorFormat, changeSource) |
581 { | 581 { |
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 var cf = WebInspector.Color.Format; |
588 if (colorFormat === WebInspector.Color.Format.RGBA) | 588 console.assert(colorFormat !== cf.Original, "Spectrum's color format
cannot be Original"); |
589 colorFormat = WebInspector.Color.Format.RGB; | 589 if (colorFormat === cf.RGBA) |
590 else if (colorFormat === WebInspector.Color.Format.HSLA) | 590 colorFormat = cf.RGB; |
591 colorFormat = WebInspector.Color.Format.HSL; | 591 else if (colorFormat === cf.HSLA) |
| 592 colorFormat = cf.HSL; |
| 593 else if (colorFormat === cf.HEXA) |
| 594 colorFormat = cf.HEX; |
| 595 else if (colorFormat === cf.ShortHEXA) |
| 596 colorFormat = cf.ShortHEX; |
592 this._colorFormat = colorFormat; | 597 this._colorFormat = colorFormat; |
593 } | 598 } |
594 | 599 |
595 this._updateHelperLocations(); | 600 this._updateHelperLocations(); |
596 this._updateUI(); | 601 this._updateUI(); |
597 | 602 |
598 if (changeSource !== WebInspector.Spectrum._ChangeSource.Input) | 603 if (changeSource !== WebInspector.Spectrum._ChangeSource.Input) |
599 this._updateInput(); | 604 this._updateInput(); |
600 if (changeSource !== WebInspector.Spectrum._ChangeSource.Model) | 605 if (changeSource !== WebInspector.Spectrum._ChangeSource.Model) |
601 this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChan
ged, this.colorString()); | 606 this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChan
ged, this.colorString()); |
(...skipping 22 matching lines...) Expand all Loading... |
624 colorString: function() | 629 colorString: function() |
625 { | 630 { |
626 if (this._colorString) | 631 if (this._colorString) |
627 return this._colorString; | 632 return this._colorString; |
628 var cf = WebInspector.Color.Format; | 633 var cf = WebInspector.Color.Format; |
629 var color = this._color(); | 634 var color = this._color(); |
630 var colorString = color.asString(this._colorFormat); | 635 var colorString = color.asString(this._colorFormat); |
631 if (colorString) | 636 if (colorString) |
632 return colorString; | 637 return colorString; |
633 | 638 |
634 if (this._colorFormat === cf.Nickname || this._colorFormat === cf.ShortH
EX) { | 639 if (this._colorFormat === cf.Nickname) { |
635 colorString = color.asString(cf.HEX); | 640 colorString = color.asString(cf.HEX); |
636 if (colorString) | 641 if (colorString) |
637 return colorString; | 642 return colorString; |
638 } | 643 } |
639 | 644 |
640 console.assert(color.hasAlpha()); | 645 if (this._colorFormat === cf.ShortHEX) |
641 return this._colorFormat === cf.HSL ? /** @type {string} */(color.asStri
ng(cf.HSLA)) : /** @type {string} */(color.asString(cf.RGBA)); | 646 colorString = color.asString(color.detectHEXFormat()); |
| 647 else if (this._colorFormat === cf.HEX) |
| 648 colorString = color.asString(color.hasAlpha() ? cf.HEXA : cf.HEX); |
| 649 else if (this._colorFormat === cf.HSL) |
| 650 colorString = color.asString(cf.HSLA); |
| 651 else |
| 652 colorString = color.asString(cf.RGBA); |
| 653 |
| 654 console.assert(colorString); |
| 655 return colorString || ""; |
642 }, | 656 }, |
643 | 657 |
644 _updateHelperLocations: function() | 658 _updateHelperLocations: function() |
645 { | 659 { |
646 var h = this._hsv[0]; | 660 var h = this._hsv[0]; |
647 var s = this._hsv[1]; | 661 var s = this._hsv[1]; |
648 var v = this._hsv[2]; | 662 var v = this._hsv[2]; |
649 var alpha = this._hsv[3]; | 663 var alpha = this._hsv[3]; |
650 | 664 |
651 // Where to show the little circle that displays your current selected c
olor. | 665 // Where to show the little circle that displays your current selected c
olor. |
(...skipping 13 matching lines...) Expand all Loading... |
665 var alphaSlideX = alpha * this._hueAlphaWidth - this.slideHelperWidth; | 679 var alphaSlideX = alpha * this._hueAlphaWidth - this.slideHelperWidth; |
666 this._alphaSlider.style.left = alphaSlideX + "px"; | 680 this._alphaSlider.style.left = alphaSlideX + "px"; |
667 }, | 681 }, |
668 | 682 |
669 _updateInput: function() | 683 _updateInput: function() |
670 { | 684 { |
671 var cf = WebInspector.Color.Format; | 685 var cf = WebInspector.Color.Format; |
672 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX ||
this._colorFormat === cf.Nickname) { | 686 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX ||
this._colorFormat === cf.Nickname) { |
673 this._hexContainer.hidden = false; | 687 this._hexContainer.hidden = false; |
674 this._displayContainer.hidden = true; | 688 this._displayContainer.hidden = true; |
675 if (this._colorFormat === cf.ShortHEX && this._color().canBeShortHex
()) | 689 if (this._colorFormat === cf.ShortHEX) |
676 this._hexValue.value = this._color().asString(cf.ShortHEX); | 690 this._hexValue.value = this._color().asString(this._color().dete
ctHEXFormat()); |
677 else | 691 else |
678 this._hexValue.value = this._color().asString(cf.HEX); | 692 // Don't use short HEX if original was not in that format. |
| 693 this._hexValue.value = this._color().asString(this._color().hasA
lpha() ? cf.HEXA : cf.HEX); |
679 } else { | 694 } else { |
680 // RGBA, HSLA display. | 695 // RGBA, HSLA display. |
681 this._hexContainer.hidden = true; | 696 this._hexContainer.hidden = true; |
682 this._displayContainer.hidden = false; | 697 this._displayContainer.hidden = false; |
683 var isRgb = this._colorFormat === cf.RGB; | 698 var isRgb = this._colorFormat === cf.RGB; |
684 this._textLabels.textContent = isRgb ? "RGBA" : "HSLA"; | 699 this._textLabels.textContent = isRgb ? "RGBA" : "HSLA"; |
685 var colorValues = isRgb ? this._color().canonicalRGBA() : this._colo
r().canonicalHSLA(); | 700 var colorValues = isRgb ? this._color().canonicalRGBA() : this._colo
r().canonicalHSLA(); |
686 for (var i = 0; i < 3; ++i) { | 701 for (var i = 0; i < 3; ++i) { |
687 this._textValues[i].value = colorValues[i]; | 702 this._textValues[i].value = colorValues[i]; |
688 if (!isRgb && (i === 1 || i === 2)) | 703 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)
); | 810 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)); | 811 this._alphaElementBackground.style.backgroundImage = String.sprintf("lin
ear-gradient(to right, rgba(0,0,0,0), %s)", noAlpha.asString(WebInspector.Color.
Format.RGB)); |
797 }, | 812 }, |
798 | 813 |
799 _formatViewSwitch: function() | 814 _formatViewSwitch: function() |
800 { | 815 { |
801 var cf = WebInspector.Color.Format; | 816 var cf = WebInspector.Color.Format; |
802 var format = cf.RGB; | 817 var format = cf.RGB; |
803 if (this._colorFormat === cf.RGB) | 818 if (this._colorFormat === cf.RGB) |
804 format = cf.HSL; | 819 format = cf.HSL; |
805 else if (this._colorFormat === cf.HSL && !this._color().hasAlpha()) | 820 else if (this._colorFormat === cf.HSL) |
806 format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX
; | 821 format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX
; |
807 this._innerSetColor(undefined, "", format, WebInspector.Spectrum._Change
Source.Other); | 822 this._innerSetColor(undefined, "", format, WebInspector.Spectrum._Change
Source.Other); |
808 }, | 823 }, |
809 | 824 |
810 /** | 825 /** |
811 * @param {!Event} event | 826 * @param {!Event} event |
812 */ | 827 */ |
813 _inputChanged: function(event) | 828 _inputChanged: function(event) |
814 { | 829 { |
815 /** | 830 /** |
(...skipping 26 matching lines...) Expand all Loading... |
842 var format = this._colorFormat === cf.RGB ? "rgba" : "hsla"; | 857 var format = this._colorFormat === cf.RGB ? "rgba" : "hsla"; |
843 var values = this._textValues.map(elementValue).join(","); | 858 var values = this._textValues.map(elementValue).join(","); |
844 colorString = String.sprintf("%s(%s)", format, values); | 859 colorString = String.sprintf("%s(%s)", format, values); |
845 } | 860 } |
846 | 861 |
847 var color = WebInspector.Color.parse(colorString); | 862 var color = WebInspector.Color.parse(colorString); |
848 if (!color) | 863 if (!color) |
849 return; | 864 return; |
850 var hsv = color.hsva(); | 865 var hsv = color.hsva(); |
851 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX) | 866 if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX) |
852 this._colorFormat = color.canBeShortHex() ? cf.ShortHEX : cf.HEX; | 867 this._colorFormat = color.detectHEXFormat(); |
853 this._innerSetColor(hsv, colorString, undefined, WebInspector.Spectrum._
ChangeSource.Input); | 868 this._innerSetColor(hsv, colorString, undefined, WebInspector.Spectrum._
ChangeSource.Input); |
854 }, | 869 }, |
855 | 870 |
856 wasShown: function() | 871 wasShown: function() |
857 { | 872 { |
858 this._hueAlphaWidth = this._hueElement.offsetWidth; | 873 this._hueAlphaWidth = this._hueElement.offsetWidth; |
859 this.slideHelperWidth = this._hueSlider.offsetWidth / 2; | 874 this.slideHelperWidth = this._hueSlider.offsetWidth / 2; |
860 this.dragWidth = this._colorElement.offsetWidth; | 875 this.dragWidth = this._colorElement.offsetWidth; |
861 this.dragHeight = this._colorElement.offsetHeight; | 876 this.dragHeight = this._colorElement.offsetHeight; |
862 this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2; | 877 this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2; |
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1020 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"
, "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], | 1035 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"
, "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], |
1021 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107"
, "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], | 1036 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107"
, "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], |
1022 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800"
, "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], | 1037 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800"
, "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], |
1023 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722"
, "#F4511E", "#E64A19", "#D84315", "#BF360C"], | 1038 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722"
, "#F4511E", "#E64A19", "#D84315", "#BF360C"], |
1024 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548"
, "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], | 1039 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548"
, "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], |
1025 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E"
, "#757575", "#616161", "#424242", "#212121"], | 1040 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E"
, "#757575", "#616161", "#424242", "#212121"], |
1026 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B"
, "#546E7A", "#455A64", "#37474F", "#263238"] | 1041 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B"
, "#546E7A", "#455A64", "#37474F", "#263238"] |
1027 }; | 1042 }; |
1028 | 1043 |
1029 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat
chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha
des) }; | 1044 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat
chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha
des) }; |
OLD | NEW |