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 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 this._colorElement = this.contentElement.createChild('div', 'spectrum-color'
); | 51 this._colorElement = this.contentElement.createChild('div', 'spectrum-color'
); |
52 this._colorDragElement = this._colorElement.createChild('div', 'spectrum-sat
fill') | 52 this._colorDragElement = this._colorElement.createChild('div', 'spectrum-sat
fill') |
53 .createChild('div', 'spectrum-val fill') | 53 .createChild('div', 'spectrum-val fill') |
54 .createChild('div', 'spectrum-dragger'); | 54 .createChild('div', 'spectrum-dragger'); |
55 var contrastRatioSVG = this._colorElement.createSVGChild('svg', 'spectrum-co
ntrast-container fill'); | 55 var contrastRatioSVG = this._colorElement.createSVGChild('svg', 'spectrum-co
ntrast-container fill'); |
56 this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-
contrast-line'); | 56 this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-
contrast-line'); |
57 | 57 |
58 var toolbar = new UI.Toolbar('spectrum-eye-dropper', this.contentElement); | 58 var toolbar = new UI.Toolbar('spectrum-eye-dropper', this.contentElement); |
59 this._colorPickerButton = new UI.ToolbarToggle(Common.UIString('Toggle color
picker'), 'largeicon-eyedropper'); | 59 this._colorPickerButton = new UI.ToolbarToggle(Common.UIString('Toggle color
picker'), 'largeicon-eyedropper'); |
60 this._colorPickerButton.setToggled(true); | 60 this._colorPickerButton.setToggled(true); |
61 this._colorPickerButton.addEventListener( | 61 this._colorPickerButton.addEventListener('click', this._toggleColorPicker.bi
nd(this, undefined)); |
62 UI.ToolbarButton.Events.Click, this._toggleColorPicker.bind(this, undefi
ned)); | |
63 toolbar.appendToolbarItem(this._colorPickerButton); | 62 toolbar.appendToolbarItem(this._colorPickerButton); |
64 | 63 |
65 var swatchElement = this.contentElement.createChild('span', 'swatch'); | 64 var swatchElement = this.contentElement.createChild('span', 'swatch'); |
66 this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner')
; | 65 this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner')
; |
67 this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overl
ay'); | 66 this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overl
ay'); |
68 this._swatchOverlayElement.addEventListener('click', this._onCopyIconClick.b
ind(this)); | 67 this._swatchOverlayElement.addEventListener('click', this._onCopyIconClick.b
ind(this)); |
69 this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMous
eout.bind(this)); | 68 this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMous
eout.bind(this)); |
70 this._swatchCopyIcon = UI.Icon.create('largeicon-copy', 'copy-color-icon'); | 69 this._swatchCopyIcon = UI.Icon.create('largeicon-copy', 'copy-color-icon'); |
71 this._swatchCopyIcon.title = Common.UIString('Copy color to clipboard'); | 70 this._swatchCopyIcon.title = Common.UIString('Copy color to clipboard'); |
72 this._swatchOverlayElement.appendChild(this._swatchCopyIcon); | 71 this._swatchOverlayElement.appendChild(this._swatchCopyIcon); |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
130 | 129 |
131 this._deleteIconToolbar = new UI.Toolbar('delete-color-toolbar'); | 130 this._deleteIconToolbar = new UI.Toolbar('delete-color-toolbar'); |
132 this._deleteButton = new UI.ToolbarButton('', 'largeicon-trash-bin'); | 131 this._deleteButton = new UI.ToolbarButton('', 'largeicon-trash-bin'); |
133 this._deleteIconToolbar.appendToolbarItem(this._deleteButton); | 132 this._deleteIconToolbar.appendToolbarItem(this._deleteButton); |
134 | 133 |
135 var overlay = this.contentElement.createChild('div', 'spectrum-overlay fill'
); | 134 var overlay = this.contentElement.createChild('div', 'spectrum-overlay fill'
); |
136 overlay.addEventListener('click', this._togglePalettePanel.bind(this, false)
); | 135 overlay.addEventListener('click', this._togglePalettePanel.bind(this, false)
); |
137 | 136 |
138 this._addColorToolbar = new UI.Toolbar('add-color-toolbar'); | 137 this._addColorToolbar = new UI.Toolbar('add-color-toolbar'); |
139 var addColorButton = new UI.ToolbarButton(Common.UIString('Add to palette'),
'largeicon-add'); | 138 var addColorButton = new UI.ToolbarButton(Common.UIString('Add to palette'),
'largeicon-add'); |
140 addColorButton.addEventListener(UI.ToolbarButton.Events.Click, this._addColo
rToCustomPalette, this); | 139 addColorButton.addEventListener('click', this._addColorToCustomPalette.bind(
this)); |
141 this._addColorToolbar.appendToolbarItem(addColorButton); | 140 this._addColorToolbar.appendToolbarItem(addColorButton); |
142 | 141 |
143 this._loadPalettes(); | 142 this._loadPalettes(); |
144 new Components.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(t
his)); | 143 new Components.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(t
his)); |
145 | 144 |
146 /** | 145 /** |
147 * @param {function(!Event)} callback | 146 * @param {function(!Event)} callback |
148 * @param {!Event} event | 147 * @param {!Event} event |
149 * @return {boolean} | 148 * @return {boolean} |
150 * @this {Components.Spectrum} | 149 * @this {Components.Spectrum} |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
202 _onCopyIconMouseout() { | 201 _onCopyIconMouseout() { |
203 this._swatchCopyIcon.setIconType('largeicon-copy'); | 202 this._swatchCopyIcon.setIconType('largeicon-copy'); |
204 } | 203 } |
205 | 204 |
206 _updatePalettePanel() { | 205 _updatePalettePanel() { |
207 this._palettePanel.removeChildren(); | 206 this._palettePanel.removeChildren(); |
208 var title = this._palettePanel.createChild('div', 'palette-title'); | 207 var title = this._palettePanel.createChild('div', 'palette-title'); |
209 title.textContent = Common.UIString('Color Palettes'); | 208 title.textContent = Common.UIString('Color Palettes'); |
210 var toolbar = new UI.Toolbar('', this._palettePanel); | 209 var toolbar = new UI.Toolbar('', this._palettePanel); |
211 var closeButton = new UI.ToolbarButton('Return to color picker', 'largeicon-
delete'); | 210 var closeButton = new UI.ToolbarButton('Return to color picker', 'largeicon-
delete'); |
212 closeButton.addEventListener(UI.ToolbarButton.Events.Click, this._togglePale
ttePanel.bind(this, false)); | 211 closeButton.addEventListener('click', this._togglePalettePanel.bind(this, fa
lse)); |
213 toolbar.appendToolbarItem(closeButton); | 212 toolbar.appendToolbarItem(closeButton); |
214 for (var palette of this._palettes.values()) | 213 for (var palette of this._palettes.values()) |
215 this._palettePanel.appendChild(this._createPreviewPaletteElement(palette))
; | 214 this._palettePanel.appendChild(this._createPreviewPaletteElement(palette))
; |
216 } | 215 } |
217 | 216 |
218 /** | 217 /** |
219 * @param {boolean} show | 218 * @param {boolean} show |
220 */ | 219 */ |
221 _togglePalettePanel(show) { | 220 _togglePalettePanel(show) { |
222 if (this._palettePanelShowing === show) | 221 if (this._palettePanelShowing === show) |
(...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
518 */ | 517 */ |
519 _paletteColorSelected(colorText, matchUserFormat) { | 518 _paletteColorSelected(colorText, matchUserFormat) { |
520 var color = Common.Color.parse(colorText); | 519 var color = Common.Color.parse(colorText); |
521 if (!color) | 520 if (!color) |
522 return; | 521 return; |
523 this._innerSetColor( | 522 this._innerSetColor( |
524 color.hsva(), colorText, matchUserFormat ? this._colorFormat : color.for
mat(), | 523 color.hsva(), colorText, matchUserFormat ? this._colorFormat : color.for
mat(), |
525 Components.Spectrum._ChangeSource.Other); | 524 Components.Spectrum._ChangeSource.Other); |
526 } | 525 } |
527 | 526 |
528 /** | 527 _addColorToCustomPalette() { |
529 * @param {!Common.Event} event | |
530 */ | |
531 _addColorToCustomPalette(event) { | |
532 var palette = this._customPaletteSetting.get(); | 528 var palette = this._customPaletteSetting.get(); |
533 palette.colors.push(this.colorString()); | 529 palette.colors.push(this.colorString()); |
534 this._customPaletteSetting.set(palette); | 530 this._customPaletteSetting.set(palette); |
535 this._showPalette(this._customPaletteSetting.get(), false); | 531 this._showPalette(this._customPaletteSetting.get(), false); |
536 } | 532 } |
537 | 533 |
538 /** | 534 /** |
539 * @param {number} colorIndex | 535 * @param {number} colorIndex |
540 * @param {!Event} event | 536 * @param {!Event} event |
541 */ | 537 */ |
(...skipping 510 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1052 '#607D8B': | 1048 '#607D8B': |
1053 ['#ECEFF1', '#CFD8DC', '#B0BEC5', '#90A4AE', '#78909C', '#607D8B', '#546E7
A', '#455A64', '#37474F', '#263238'] | 1049 ['#ECEFF1', '#CFD8DC', '#B0BEC5', '#90A4AE', '#78909C', '#607D8B', '#546E7
A', '#455A64', '#37474F', '#263238'] |
1054 }; | 1050 }; |
1055 | 1051 |
1056 Components.Spectrum.MaterialPalette = { | 1052 Components.Spectrum.MaterialPalette = { |
1057 title: 'Material', | 1053 title: 'Material', |
1058 mutable: false, | 1054 mutable: false, |
1059 matchUserFormat: true, | 1055 matchUserFormat: true, |
1060 colors: Object.keys(Components.Spectrum.MaterialPaletteShades) | 1056 colors: Object.keys(Components.Spectrum.MaterialPaletteShades) |
1061 }; | 1057 }; |
OLD | NEW |