| 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 |