/**
* @license
* Copyright The Closure Library Authors.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Popup Color Picker implementation. This is intended to be
* less general than goog.ui.ColorPicker and presents a default set of colors
* that CCC apps currently use in their color pickers.
*
* @see ../demos/popupcolorpicker.html
*/
goog.provide('goog.ui.PopupColorPicker');
goog.require('goog.asserts');
goog.require('goog.dom.classlist');
goog.require('goog.events.EventType');
goog.require('goog.positioning.AnchoredPosition');
goog.require('goog.positioning.Corner');
goog.require('goog.ui.ColorPicker');
goog.require('goog.ui.Component');
goog.require('goog.ui.Popup');
goog.requireType('goog.dom.DomHelper');
goog.requireType('goog.events.BrowserEvent');
goog.requireType('goog.events.Event');
goog.requireType('goog.ui.PopupBase');
/**
* Popup color picker widget.
*
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
* @param {goog.ui.ColorPicker=} opt_colorPicker Optional color picker to use
* for this popup.
* @extends {goog.ui.Component}
* @constructor
*/
goog.ui.PopupColorPicker = function(opt_domHelper, opt_colorPicker) {
'use strict';
goog.ui.Component.call(this, opt_domHelper);
if (opt_colorPicker) {
this.colorPicker_ = opt_colorPicker;
}
};
goog.inherits(goog.ui.PopupColorPicker, goog.ui.Component);
/**
* Whether the color picker is initialized.
* @type {boolean}
* @private
*/
goog.ui.PopupColorPicker.prototype.initialized_ = false;
/**
* Instance of a color picker control.
* @type {?goog.ui.ColorPicker}
* @private
*/
goog.ui.PopupColorPicker.prototype.colorPicker_ = null;
/**
* Instance of goog.ui.Popup used to manage the behavior of the color picker.
* @type {?goog.ui.Popup}
* @private
*/
goog.ui.PopupColorPicker.prototype.popup_ = null;
/**
* Corner of the popup which is pinned to the attaching element.
* @type {goog.positioning.Corner}
* @private
*/
goog.ui.PopupColorPicker.prototype.pinnedCorner_ =
goog.positioning.Corner.TOP_START;
/**
* Corner of the attaching element where the popup shows.
* @type {goog.positioning.Corner}
* @private
*/
goog.ui.PopupColorPicker.prototype.popupCorner_ =
goog.positioning.Corner.BOTTOM_START;
/**
* Reference to the element that triggered the last popup.
* @type {?Element}
* @private
*/
goog.ui.PopupColorPicker.prototype.lastTarget_ = null;
/** @private {boolean} */
goog.ui.PopupColorPicker.prototype.rememberSelection_;
/**
* Whether the color picker can move the focus to its key event target when it
* is shown. The default is true. Setting to false can break keyboard
* navigation, but this is needed for certain scenarios, for example the
* toolbar menu in trogedit which can't have the selection changed.
* @type {boolean}
* @private
*/
goog.ui.PopupColorPicker.prototype.allowAutoFocus_ = true;
/**
* Whether the color picker can accept focus.
* @type {boolean}
* @private
*/
goog.ui.PopupColorPicker.prototype.focusable_ = true;
/**
* If true, then the colorpicker will toggle off if it is already visible.
*
* @type {boolean}
* @private
*/
goog.ui.PopupColorPicker.prototype.toggleMode_ = true;
/**
* If true, the colorpicker will appear on hover.
* @type {boolean}
* @private
*/
goog.ui.PopupColorPicker.prototype.showOnHover_ = false;
/** @override */
goog.ui.PopupColorPicker.prototype.createDom = function() {
'use strict';
goog.ui.PopupColorPicker.superClass_.createDom.call(this);
this.popup_ = new goog.ui.Popup(this.getElement());
this.popup_.setPinnedCorner(this.pinnedCorner_);
goog.dom.classlist.set(
goog.asserts.assert(this.getElement()),
goog.getCssName('goog-popupcolorpicker'));
this.getElement().unselectable = 'on';
};
/** @override */
goog.ui.PopupColorPicker.prototype.disposeInternal = function() {
'use strict';
goog.ui.PopupColorPicker.superClass_.disposeInternal.call(this);
this.colorPicker_ = null;
this.lastTarget_ = null;
this.initialized_ = false;
if (this.popup_) {
this.popup_.dispose();
this.popup_ = null;
}
};
/**
* ColorPickers cannot be used to decorate pre-existing html, since the
* structure they build is fairly complicated.
* @param {Element} element Element to decorate.
* @return {boolean} Returns always false.
* @override
*/
goog.ui.PopupColorPicker.prototype.canDecorate = function(element) {
'use strict';
return false;
};
/**
* @return {goog.ui.ColorPicker} The color picker instance.
*/
goog.ui.PopupColorPicker.prototype.getColorPicker = function() {
'use strict';
return this.colorPicker_;
};
/**
* Returns whether the Popup dismisses itself when the user clicks outside of
* it.
* @return {boolean} Whether the Popup autohides on an external click.
*/
goog.ui.PopupColorPicker.prototype.getAutoHide = function() {
'use strict';
return !!this.popup_ && this.popup_.getAutoHide();
};
/**
* Sets whether the Popup dismisses itself when the user clicks outside of it -
* must be called after the Popup has been created (in createDom()),
* otherwise it does nothing.
*
* @param {boolean} autoHide Whether to autohide on an external click.
*/
goog.ui.PopupColorPicker.prototype.setAutoHide = function(autoHide) {
'use strict';
if (this.popup_) {
this.popup_.setAutoHide(autoHide);
}
};
/**
* Returns the region inside which the Popup dismisses itself when the user
* clicks, or null if it was not set. Null indicates the entire document is
* the autohide region.
* @return {Element} The DOM element for autohide, or null if it hasn't been
* set.
*/
goog.ui.PopupColorPicker.prototype.getAutoHideRegion = function() {
'use strict';
return this.popup_ && this.popup_.getAutoHideRegion();
};
/**
* Sets the region inside which the Popup dismisses itself when the user
* clicks - must be called after the Popup has been created (in createDom()),
* otherwise it does nothing.
*
* @param {Element} element The DOM element for autohide.
*/
goog.ui.PopupColorPicker.prototype.setAutoHideRegion = function(element) {
'use strict';
if (this.popup_) {
this.popup_.setAutoHideRegion(element);
}
};
/**
* Returns the {@link goog.ui.PopupBase} from this picker. Returns null if the
* popup has not yet been created.
*
* NOTE: This should *ONLY* be called from tests. If called before createDom(),
* this should return null.
*
* @return {goog.ui.PopupBase?} The popup or null if it hasn't been created.
*/
goog.ui.PopupColorPicker.prototype.getPopup = function() {
'use strict';
return this.popup_;
};
/**
* @return {Element} The last element that triggered the popup.
*/
goog.ui.PopupColorPicker.prototype.getLastTarget = function() {
'use strict';
return this.lastTarget_;
};
/**
* Attaches the popup color picker to an element.
* @param {Element} element The element to attach to.
*/
goog.ui.PopupColorPicker.prototype.attach = function(element) {
'use strict';
if (this.showOnHover_) {
this.getHandler().listen(
element, goog.events.EventType.MOUSEOVER, this.show_);
} else {
this.getHandler().listen(
element, goog.events.EventType.MOUSEDOWN, this.show_);
}
};
/**
* Detatches the popup color picker from an element.
* @param {Element} element The element to detach from.
*/
goog.ui.PopupColorPicker.prototype.detach = function(element) {
'use strict';
if (this.showOnHover_) {
this.getHandler().unlisten(
element, goog.events.EventType.MOUSEOVER, this.show_);
} else {
this.getHandler().unlisten(
element, goog.events.EventType.MOUSEOVER, this.show_);
}
};
/**
* Gets the color that is currently selected in this color picker.
* @return {?string} The hex string of the color selected, or null if no
* color is selected.
*/
goog.ui.PopupColorPicker.prototype.getSelectedColor = function() {
'use strict';
return this.colorPicker_.getSelectedColor();
};
/**
* Sets whether the color picker can accept focus.
* @param {boolean} focusable True iff the color picker can accept focus.
*/
goog.ui.PopupColorPicker.prototype.setFocusable = function(focusable) {
'use strict';
this.focusable_ = focusable;
if (this.colorPicker_) {
// TODO(user): In next revision sort the behavior of passing state to
// children correctly
this.colorPicker_.setFocusable(focusable);
}
};
/**
* Sets whether the color picker can automatically move focus to its key event
* target when it is set to visible.
* @param {boolean} allow Whether to allow auto focus.
*/
goog.ui.PopupColorPicker.prototype.setAllowAutoFocus = function(allow) {
'use strict';
this.allowAutoFocus_ = allow;
};
/**
* @return {boolean} Whether the color picker can automatically move focus to
* its key event target when it is set to visible.
*/
goog.ui.PopupColorPicker.prototype.getAllowAutoFocus = function() {
'use strict';
return this.allowAutoFocus_;
};
/**
* Sets whether the color picker should toggle off if it is already open.
* @param {boolean} toggle The new toggle mode.
*/
goog.ui.PopupColorPicker.prototype.setToggleMode = function(toggle) {
'use strict';
this.toggleMode_ = toggle;
};
/**
* Gets whether the colorpicker is in toggle mode
* @return {boolean} toggle.
*/
goog.ui.PopupColorPicker.prototype.getToggleMode = function() {
'use strict';
return this.toggleMode_;
};
/**
* Sets whether the picker remembers the last selected color between popups.
*
* @param {boolean} remember Whether to remember the selection.
*/
goog.ui.PopupColorPicker.prototype.setRememberSelection = function(remember) {
'use strict';
this.rememberSelection_ = remember;
};
/**
* @return {boolean} Whether the picker remembers the last selected color
* between popups.
*/
goog.ui.PopupColorPicker.prototype.getRememberSelection = function() {
'use strict';
return this.rememberSelection_;
};
/**
* Add an array of colors to the colors displayed by the color picker.
* Does not add duplicated colors.
* @param {Array<string>} colors The array of colors to be added.
*/
goog.ui.PopupColorPicker.prototype.addColors = function(colors) {
};
/**
* Clear the colors displayed by the color picker.
*/
goog.ui.PopupColorPicker.prototype.clearColors = function() {
};
/**
* Set the pinned corner of the popup.
* @param {goog.positioning.Corner} corner The corner of the popup which is
* pinned to the attaching element.
*/
goog.ui.PopupColorPicker.prototype.setPinnedCorner = function(corner) {
'use strict';
this.pinnedCorner_ = corner;
if (this.popup_) {
this.popup_.setPinnedCorner(this.pinnedCorner_);
}
};
/**
* Sets which corner of the attaching element this popup shows up.
* @param {goog.positioning.Corner} corner The corner of the attaching element
* where to show the popup.
*/
goog.ui.PopupColorPicker.prototype.setPopupCorner = function(corner) {
'use strict';
this.popupCorner_ = corner;
};
/**
* Sets whether the popup shows up on hover. By default, appears on click.
* @param {boolean} showOnHover True if popup should appear on hover.
*/
goog.ui.PopupColorPicker.prototype.setShowOnHover = function(showOnHover) {
'use strict';
this.showOnHover_ = showOnHover;
};
/**
* Handles click events on the targets and shows the color picker.
* @param {goog.events.BrowserEvent} e The browser event.
* @private
*/
goog.ui.PopupColorPicker.prototype.show_ = function(e) {
'use strict';
if (!this.initialized_) {
this.colorPicker_ = this.colorPicker_ ||
goog.ui.ColorPicker.createSimpleColorGrid(this.getDomHelper());
this.colorPicker_.setFocusable(this.focusable_);
this.addChild(this.colorPicker_, true);
this.getHandler().listen(
this.colorPicker_, goog.ui.ColorPicker.EventType.CHANGE,
this.onColorPicked_);
this.initialized_ = true;
}
if (this.popup_.isOrWasRecentlyVisible() && this.toggleMode_ &&
this.lastTarget_ == e.currentTarget) {
this.popup_.setVisible(false);
return;
}
this.lastTarget_ = /** @type {Element} */ (e.currentTarget);
this.popup_.setPosition(
new goog.positioning.AnchoredPosition(
this.lastTarget_, this.popupCorner_));
if (!this.rememberSelection_) {
this.colorPicker_.setSelectedIndex(-1);
}
this.popup_.setVisible(true);
if (this.allowAutoFocus_) {
this.colorPicker_.focus();
}
};
/**
* Handles the color change event.
* @param {goog.events.Event} e The event.
* @private
*/
goog.ui.PopupColorPicker.prototype.onColorPicked_ = function(e) {
'use strict';
// When we show the color picker we reset the color, which triggers an event.
// Here we block that event so that it doesn't dismiss the popup
// TODO(user): Update the colorpicker to allow selection to be cleared
if (this.colorPicker_.getSelectedIndex() == -1) {
e.stopPropagation();
return;
}
this.popup_.setVisible(false);
if (this.allowAutoFocus_) {
this.lastTarget_.focus();
}
};
Codebase Browser
chromium