123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528 |
- goog.provide('goog.ui.HsvPalette');
- goog.require('goog.color');
- goog.require('goog.dom.InputType');
- goog.require('goog.dom.TagName');
- goog.require('goog.events');
- goog.require('goog.events.EventType');
- goog.require('goog.events.InputHandler');
- goog.require('goog.style');
- goog.require('goog.style.bidi');
- goog.require('goog.ui.Component');
- goog.require('goog.userAgent');
- goog.ui.HsvPalette = function(opt_domHelper, opt_color, opt_class) {
- goog.ui.Component.call(this, opt_domHelper);
- this.setColorInternal(opt_color || '#f00');
-
- this.className = opt_class || goog.getCssName('goog-hsv-palette');
-
- this.document_ = this.getDomHelper().getDocument();
- };
- goog.inherits(goog.ui.HsvPalette, goog.ui.Component);
- goog.tagUnsealableClass(goog.ui.HsvPalette);
- goog.ui.HsvPalette.MSG_HSV_PALETTE_HEX_COLOR_ = goog.getMsg('Hex color');
- goog.ui.HsvPalette.prototype.hsImageEl_;
- goog.ui.HsvPalette.prototype.hsHandleEl_;
- goog.ui.HsvPalette.prototype.valueBackgroundImageElement;
- goog.ui.HsvPalette.prototype.vHandleEl_;
- goog.ui.HsvPalette.prototype.swatchElement;
- goog.ui.HsvPalette.prototype.inputElement;
- goog.ui.HsvPalette.prototype.inputHandler_;
- goog.ui.HsvPalette.prototype.mouseMoveListener;
- goog.ui.HsvPalette.prototype.mouseUpListener;
- goog.ui.HsvPalette.prototype.hsv_;
- goog.ui.HsvPalette.prototype.color;
- goog.ui.HsvPalette.prototype.getColor = function() {
- return this.color;
- };
- goog.ui.HsvPalette.prototype.getAlpha = function() {
- return 1;
- };
- goog.ui.HsvPalette.prototype.updateInput = function() {
- var parsed;
- try {
- parsed = goog.color.parse(this.inputElement.value).hex;
- } catch (e) {
-
- }
- if (this.color != parsed) {
- this.inputElement.value = this.color;
- }
- };
- goog.ui.HsvPalette.prototype.setColor = function(color) {
- if (color != this.color) {
- this.setColorInternal(color);
- this.updateUi();
- this.dispatchEvent(goog.ui.Component.EventType.ACTION);
- }
- };
- goog.ui.HsvPalette.prototype.setColorInternal = function(color) {
- var rgbHex = goog.color.parse(color).hex;
- var rgbArray = goog.color.hexToRgb(rgbHex);
- this.hsv_ = goog.color.rgbArrayToHsv(rgbArray);
-
-
-
- this.hsv_[0] = this.hsv_[0] / 360;
- this.color = rgbHex;
- };
- goog.ui.HsvPalette.prototype.setHsv = function(
- opt_hue, opt_saturation, opt_value) {
- if (opt_hue != null || opt_saturation != null || opt_value != null) {
- this.setHsv_(opt_hue, opt_saturation, opt_value);
- this.updateUi();
- this.dispatchEvent(goog.ui.Component.EventType.ACTION);
- }
- };
- goog.ui.HsvPalette.prototype.setHsv_ = function(
- opt_hue, opt_saturation, opt_value) {
- this.hsv_[0] = (opt_hue != null) ? opt_hue : this.hsv_[0];
- this.hsv_[1] = (opt_saturation != null) ? opt_saturation : this.hsv_[1];
- this.hsv_[2] = (opt_value != null) ? opt_value : this.hsv_[2];
-
-
-
- this.color = goog.color.hsvArrayToHex(
- [this.hsv_[0] * 360, this.hsv_[1], this.hsv_[2]]);
- };
- goog.ui.HsvPalette.prototype.canDecorate = function(element) {
- return false;
- };
- goog.ui.HsvPalette.prototype.createDom = function() {
- var dom = this.getDomHelper();
- var noalpha = (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('7')) ?
- ' ' + goog.getCssName(this.className, 'noalpha') :
- '';
- var backdrop = dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'hs-backdrop'));
- this.hsHandleEl_ = (
- dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'hs-handle')));
- this.hsImageEl_ = (
- dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'hs-image'),
- this.hsHandleEl_));
- this.valueBackgroundImageElement = (
- dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'v-image')));
- this.vHandleEl_ = (
- dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'v-handle')));
- this.swatchElement = dom.createDom(
- goog.dom.TagName.DIV, goog.getCssName(this.className, 'swatch'));
- this.inputElement = dom.createDom(goog.dom.TagName.INPUT, {
- 'class': goog.getCssName(this.className, 'input'),
- 'aria-label': goog.ui.HsvPalette.MSG_HSV_PALETTE_HEX_COLOR_,
- 'type': goog.dom.InputType.TEXT,
- 'dir': 'ltr'
- });
- var labelElement =
- dom.createDom(goog.dom.TagName.LABEL, null, this.inputElement);
- var element = dom.createDom(
- goog.dom.TagName.DIV, this.className + noalpha, backdrop, this.hsImageEl_,
- this.valueBackgroundImageElement, this.vHandleEl_, this.swatchElement,
- labelElement);
- this.setElementInternal(element);
-
- };
- goog.ui.HsvPalette.prototype.enterDocument = function() {
- goog.ui.HsvPalette.superClass_.enterDocument.call(this);
-
- this.updateUi();
- var handler = this.getHandler();
- handler.listen(
- this.getElement(), goog.events.EventType.MOUSEDOWN, this.handleMouseDown);
-
-
- if (!this.inputHandler_) {
- this.inputHandler_ = new goog.events.InputHandler(this.inputElement);
- }
- handler.listen(
- this.inputHandler_, goog.events.InputHandler.EventType.INPUT,
- this.handleInput);
- };
- goog.ui.HsvPalette.prototype.disposeInternal = function() {
- goog.ui.HsvPalette.superClass_.disposeInternal.call(this);
- delete this.hsImageEl_;
- delete this.hsHandleEl_;
- delete this.valueBackgroundImageElement;
- delete this.vHandleEl_;
- delete this.swatchElement;
- delete this.inputElement;
- if (this.inputHandler_) {
- this.inputHandler_.dispose();
- delete this.inputHandler_;
- }
- goog.events.unlistenByKey(this.mouseMoveListener);
- goog.events.unlistenByKey(this.mouseUpListener);
- };
- goog.ui.HsvPalette.prototype.updateUi = function() {
- if (this.isInDocument()) {
- var h = this.hsv_[0];
- var s = this.hsv_[1];
- var v = this.hsv_[2];
- var left = this.hsImageEl_.offsetWidth * h;
-
-
-
- if (this.isRightToLeft()) {
- left = this.hsImageEl_.offsetWidth - left;
- }
-
- var handleOffset = Math.ceil(this.hsHandleEl_.offsetWidth / 2);
- left -= handleOffset;
- var top = this.hsImageEl_.offsetHeight * (1 - s);
-
- top -= Math.ceil(this.hsHandleEl_.offsetHeight / 2);
- goog.style.bidi.setPosition(
- this.hsHandleEl_, left, top, this.isRightToLeft());
- top = this.valueBackgroundImageElement.offsetTop -
- Math.floor(this.vHandleEl_.offsetHeight / 2) +
- this.valueBackgroundImageElement.offsetHeight * ((255 - v) / 255);
- this.vHandleEl_.style.top = top + 'px';
- goog.style.setOpacity(this.hsImageEl_, (v / 255));
- goog.style.setStyle(
- this.valueBackgroundImageElement, 'background-color',
- goog.color.hsvToHex(this.hsv_[0] * 360, this.hsv_[1], 255));
- goog.style.setStyle(this.swatchElement, 'background-color', this.color);
- goog.style.setStyle(
- this.swatchElement, 'color',
- (this.hsv_[2] > 255 / 2) ? '#000' : '#fff');
- this.updateInput();
- }
- };
- goog.ui.HsvPalette.prototype.handleMouseDown = function(e) {
- if (e.target == this.valueBackgroundImageElement ||
- e.target == this.vHandleEl_) {
-
- var b = goog.style.getBounds(this.valueBackgroundImageElement);
- this.handleMouseMoveV_(b, e);
- this.mouseMoveListener = goog.events.listen(
- this.document_, goog.events.EventType.MOUSEMOVE,
- goog.bind(this.handleMouseMoveV_, this, b));
- this.mouseUpListener = goog.events.listen(
- this.document_, goog.events.EventType.MOUSEUP, this.handleMouseUp,
- false, this);
- } else if (e.target == this.hsImageEl_ || e.target == this.hsHandleEl_) {
-
- var b = goog.style.getBounds(this.hsImageEl_);
- this.handleMouseMoveHs_(b, e);
- this.mouseMoveListener = goog.events.listen(
- this.document_, goog.events.EventType.MOUSEMOVE,
- goog.bind(this.handleMouseMoveHs_, this, b));
- this.mouseUpListener = goog.events.listen(
- this.document_, goog.events.EventType.MOUSEUP, this.handleMouseUp,
- false, this);
- }
- };
- goog.ui.HsvPalette.prototype.handleMouseMoveV_ = function(b, e) {
- e.preventDefault();
- var vportPos = this.getDomHelper().getDocumentScroll();
- var height =
- Math.min(Math.max(vportPos.y + e.clientY, b.top), b.top + b.height);
- var newV = Math.round(255 * (b.top + b.height - height) / b.height);
- this.setHsv(null, null, newV);
- };
- goog.ui.HsvPalette.prototype.handleMouseMoveHs_ = function(b, e) {
- e.preventDefault();
- var vportPos = this.getDomHelper().getDocumentScroll();
- var newH =
- (Math.min(Math.max(vportPos.x + e.clientX, b.left), b.left + b.width) -
- b.left) /
- b.width;
- var newS =
- (-Math.min(Math.max(vportPos.y + e.clientY, b.top), b.top + b.height) +
- b.top + b.height) /
- b.height;
- this.setHsv(newH, newS, null);
- };
- goog.ui.HsvPalette.prototype.handleMouseUp = function(e) {
- goog.events.unlistenByKey(this.mouseMoveListener);
- goog.events.unlistenByKey(this.mouseUpListener);
- };
- goog.ui.HsvPalette.prototype.handleInput = function(e) {
- if (/^#?[0-9a-f]{6}$/i.test(this.inputElement.value)) {
- this.setColor(this.inputElement.value);
- }
- };
|