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