Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

Commit

Permalink
Make a number of private properties that were being used as
Browse files Browse the repository at this point in the history 
protected properties protected so that we can move
javascript/closure/compiledClosure to visibility=error.

R=chrishenry,nicksantos
DELTA=137 (40 added, 15 deleted, 82 changed)


Revision created by MOE tool push_codebase.
MOE_MIGRATION=6214


git-svn-id: http://closure-library.googlecode.com/svn/trunk@2477 0b95b8e8-c90f-11de-9d4f-f947ee5921c8
  • Loading branch information
nnaze@google.com committed Jan 29, 2013
1 parent 437c299 commit 38cc19b
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 97 deletions.
24 changes: 11 additions & 13 deletions closure/goog/ui/hsvapalette.js
View file
Expand Up @@ -57,11 +57,9 @@ goog.ui.HsvaPalette = function(opt_domHelper, opt_color, opt_alpha, opt_class) {
this.alpha_ = goog.isDef(opt_alpha) ? opt_alpha : 1;

/**
* The base class name for the component.
* @type {string}
* @private
* @override
*/
this.class_ = opt_class || goog.getCssName('goog-hsva-palette');
this.className = opt_class || goog.getCssName('goog-hsva-palette');

/**
* The document which is being listened to.
Expand Down Expand Up @@ -176,11 +174,11 @@ goog.ui.HsvaPalette.prototype.createDom = function() {

var dom = this.getDomHelper();
this.aImageEl_ = dom.createDom(
goog.dom.TagName.DIV, goog.getCssName(this.class_, 'a-image'));
goog.dom.TagName.DIV, goog.getCssName(this.className, 'a-image'));
this.aHandleEl_ = dom.createDom(
goog.dom.TagName.DIV, goog.getCssName(this.class_, 'a-handle'));
goog.dom.TagName.DIV, goog.getCssName(this.className, 'a-handle'));
this.swatchBackdropEl_ = dom.createDom(
goog.dom.TagName.DIV, goog.getCssName(this.class_, 'swatch-backdrop'));
goog.dom.TagName.DIV, goog.getCssName(this.className, 'swatch-backdrop'));
dom.appendChild(this.element_, this.aImageEl_);
dom.appendChild(this.element_, this.aHandleEl_);
dom.appendChild(this.element_, this.swatchBackdropEl_);
Expand All @@ -207,16 +205,16 @@ goog.ui.HsvaPalette.prototype.updateUi = function() {
this.aImageEl_.offsetHeight * ((255 - a) / 255);
this.aHandleEl_.style.top = top + 'px';
this.aImageEl_.style.backgroundColor = this.color_;
goog.style.setOpacity(this.swatchEl_, a / 255);
goog.style.setOpacity(this.swatchElement, a / 255);
}
};


/** @override */
goog.ui.HsvaPalette.prototype.updateInput = function() {
if (!goog.array.equals([this.color_, this.alpha_],
goog.ui.HsvaPalette.parseUserInput_(this.inputEl_.value))) {
this.inputEl_.value = this.getColorRgbaHex();
goog.ui.HsvaPalette.parseUserInput_(this.inputElement.value))) {
this.inputElement.value = this.getColorRgbaHex();
}
};

Expand All @@ -226,13 +224,13 @@ goog.ui.HsvaPalette.prototype.handleMouseDown = function(e) {
goog.base(this, 'handleMouseDown', e);
if (e.target == this.aImageEl_ || e.target == this.aHandleEl_) {
// Setup value change listeners
var b = goog.style.getBounds(this.vImageEl_);
var b = goog.style.getBounds(this.valueBackgroundImageElement);
this.handleMouseMoveA_(b, e);
this.mouseMoveListener_ = goog.events.listen(this.document_,
goog.events.EventType.MOUSEMOVE,
goog.bind(this.handleMouseMoveA_, this, b));
this.mouseUpListener_ = goog.events.listen(this.document_,
goog.events.EventType.MOUSEUP, this.handleMouseUp_, false, this);
goog.events.EventType.MOUSEUP, this.handleMouseUp, false, this);
}
};

Expand All @@ -257,7 +255,7 @@ goog.ui.HsvaPalette.prototype.handleMouseMoveA_ = function(b, e) {

/** @override */
goog.ui.HsvaPalette.prototype.handleInput = function(e) {
var parsed = goog.ui.HsvaPalette.parseUserInput_(this.inputEl_.value);
var parsed = goog.ui.HsvaPalette.parseUserInput_(this.inputElement.value);
if (parsed) {
this.setColorAlphaHelper_(parsed[0], parsed[1]);
}
Expand Down
14 changes: 7 additions & 7 deletions closure/goog/ui/hsvapalette_test.html
View file
Expand Up @@ -98,7 +98,7 @@
function testInputColor() {
samplePalette.render(document.getElementById('sandbox'));
var color = '#00112233';
samplePalette.inputEl_.value = color;
samplePalette.inputElement.value = color;
samplePalette.handleInput(null);
assertEquals(color,
goog.color.alpha.parse(samplePalette.getColorRgbaHex()).hex);
Expand Down Expand Up @@ -128,23 +128,23 @@
samplePalette.render(document.getElementById('sandbox'));

samplePalette.setAlpha(1);
assertEquals(1, goog.style.getOpacity(samplePalette.swatchEl_));
assertEquals(1, goog.style.getOpacity(samplePalette.swatchElement));

samplePalette.setAlpha(0x99 / 0xff);
assertEquals(0.6, goog.style.getOpacity(samplePalette.swatchEl_));
assertEquals(0.6, goog.style.getOpacity(samplePalette.swatchElement));

samplePalette.setAlpha(0);
assertEquals(0, goog.style.getOpacity(samplePalette.swatchEl_));
assertEquals(0, goog.style.getOpacity(samplePalette.swatchElement));
}

function testNoTransparencyBehavior() {
samplePalette.render(document.getElementById('sandbox'));

samplePalette.inputEl_.value = '#abcdef22';
samplePalette.inputElement.value = '#abcdef22';
samplePalette.handleInput(null);
samplePalette.inputEl_.value = '#abcdef';
samplePalette.inputElement.value = '#abcdef';
samplePalette.handleInput(null);
assertEquals(1, goog.style.getOpacity(samplePalette.swatchEl_));
assertEquals(1, goog.style.getOpacity(samplePalette.swatchElement));
}

</script>
Expand Down
125 changes: 74 additions & 51 deletions closure/goog/ui/hsvpalette.js
View file
Expand Up @@ -61,9 +61,9 @@ goog.ui.HsvPalette = function(opt_domHelper, opt_color, opt_class) {
/**
* The base class name for the component.
* @type {string}
* @private
* @protected
*/
this.class_ = opt_class || goog.getCssName('goog-hsv-palette');
this.className = opt_class || goog.getCssName('goog-hsv-palette');

/**
* The document which is being listened to.
Expand Down Expand Up @@ -96,9 +96,9 @@ goog.ui.HsvPalette.prototype.hsHandleEl_;
/**
* DOM element representing the value background image.
* @type {Element}
* @private
* @protected
*/
goog.ui.HsvPalette.prototype.vImageEl_;
goog.ui.HsvPalette.prototype.valueBackgroundImageElement;


/**
Expand All @@ -112,17 +112,17 @@ goog.ui.HsvPalette.prototype.vHandleEl_;
/**
* DOM element representing the current color swatch.
* @type {Element}
* @private
* @protected
*/
goog.ui.HsvPalette.prototype.swatchEl_;
goog.ui.HsvPalette.prototype.swatchElement;


/**
* DOM element representing the hex color input text field.
* @type {Element}
* @private
* @protected
*/
goog.ui.HsvPalette.prototype.inputEl_;
goog.ui.HsvPalette.prototype.inputElement;


/**
Expand Down Expand Up @@ -176,12 +176,12 @@ goog.ui.HsvPalette.prototype.getAlpha = function() {
goog.ui.HsvPalette.prototype.updateInput = function() {
var parsed;
try {
parsed = goog.color.parse(this.inputEl_.value).hex;
parsed = goog.color.parse(this.inputElement.value).hex;
} catch (e) {
// ignore
}
if (this.color_ != parsed) {
this.inputEl_.value = this.color_;
this.inputElement.value = this.color_;
}
};

Expand Down Expand Up @@ -274,26 +274,45 @@ goog.ui.HsvPalette.prototype.canDecorate = function(element) {
goog.ui.HsvPalette.prototype.createDom = function() {
var dom = this.getDomHelper();
var noalpha = (goog.userAgent.IE && !goog.userAgent.isVersion('7')) ?
' ' + goog.getCssName(this.class_, 'noalpha') : '';
' ' + 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('input', {
'class': goog.getCssName(this.className, 'input'),
'type': 'text', 'dir': 'ltr'
});

var labelElement = dom.createDom('label', null, this.inputElement);

var element = dom.createDom(goog.dom.TagName.DIV,
this.class_ + noalpha,
dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'hs-backdrop')),
this.hsImageEl_ = dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'hs-image'),
this.hsHandleEl_ = dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'hs-handle'))),
this.vImageEl_ = dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'v-image')),
this.vHandleEl_ = dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'v-handle')),
this.swatchEl_ = dom.createDom(goog.dom.TagName.DIV,
goog.getCssName(this.class_, 'swatch')),
dom.createDom('label', null,
//dom.createDom('span', null, 'Hex color '),
this.inputEl_ = dom.createDom('input',
{'class': goog.getCssName(this.class_, 'input'),
'type': 'text', 'dir': 'ltr'})));
this.className + noalpha,
backdrop,
this.hsImageEl_,
this.valueBackgroundImageElement,
this.vHandleEl_,
this.swatchElement,
labelElement);

this.setElementInternal(element);

// TODO(arv): Set tabIndex
Expand All @@ -319,7 +338,7 @@ goog.ui.HsvPalette.prototype.enterDocument = function() {
// Cannot create InputHandler in createDom because IE throws an exception
// on document.activeElement
if (!this.inputHandler_) {
this.inputHandler_ = new goog.events.InputHandler(this.inputEl_);
this.inputHandler_ = new goog.events.InputHandler(this.inputElement);
}

handler.listen(this.inputHandler_,
Expand All @@ -333,10 +352,10 @@ goog.ui.HsvPalette.prototype.disposeInternal = function() {

delete this.hsImageEl_;
delete this.hsHandleEl_;
delete this.vImageEl_;
delete this.valueBackgroundImageElement;
delete this.vHandleEl_;
delete this.swatchEl_;
delete this.inputEl_;
delete this.swatchElement;
delete this.inputElement;
if (this.inputHandler_) {
this.inputHandler_.dispose();
delete this.inputHandler_;
Expand Down Expand Up @@ -377,17 +396,18 @@ goog.ui.HsvPalette.prototype.updateUi = function() {
goog.style.bidi.setPosition(this.hsHandleEl_, left, top,
this.isRightToLeft());

top = this.vImageEl_.offsetTop -
top = this.valueBackgroundImageElement.offsetTop -
Math.floor(this.vHandleEl_.offsetHeight / 2) +
this.vImageEl_.offsetHeight * ((255 - v) / 255);
this.valueBackgroundImageElement.offsetHeight * ((255 - v) / 255);

this.vHandleEl_.style.top = top + 'px';
goog.style.setOpacity(this.hsImageEl_, (v / 255));

goog.style.setStyle(this.vImageEl_, 'background-color',
goog.style.setStyle(this.valueBackgroundImageElement, 'background-color',
goog.color.hsvToHex(this.hsv_[0] * 360, this.hsv_[1], 255));

goog.style.setStyle(this.swatchEl_, 'background-color', this.color_);
goog.style.setStyle(this.swatchEl_, 'color',
goog.style.setStyle(this.swatchElement, 'background-color', this.color_);
goog.style.setStyle(this.swatchElement, 'color',
(this.hsv_[2] > 255 / 2) ? '#000' : '#fff');
this.updateInput();
}
Expand All @@ -400,15 +420,16 @@ goog.ui.HsvPalette.prototype.updateUi = function() {
* @protected
*/
goog.ui.HsvPalette.prototype.handleMouseDown = function(e) {
if (e.target == this.vImageEl_ || e.target == this.vHandleEl_) {
if (e.target == this.valueBackgroundImageElement ||
e.target == this.vHandleEl_) {
// Setup value change listeners
var b = goog.style.getBounds(this.vImageEl_);
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);
goog.events.EventType.MOUSEUP, this.handleMouseUp, false, this);
} else if (e.target == this.hsImageEl_ || e.target == this.hsHandleEl_) {
// Setup hue/saturation change listeners
var b = goog.style.getBounds(this.hsImageEl_);
Expand All @@ -417,7 +438,7 @@ goog.ui.HsvPalette.prototype.handleMouseDown = function(e) {
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.events.EventType.MOUSEUP, this.handleMouseUp, false, this);
}
};

Expand All @@ -433,12 +454,14 @@ goog.ui.HsvPalette.prototype.handleMouseDown = function(e) {
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 - Math.min(
Math.max(vportPos.y + e.clientY, b.top),
b.top + b.height)
) / b.height
);
255 * (b.top + b.height - height) / b.height);

this.setHsv(null, null, newV);
};

Expand All @@ -465,9 +488,9 @@ goog.ui.HsvPalette.prototype.handleMouseMoveHs_ = function(b, e) {
/**
* Handles mouseup events on the document, which ends a drag operation.
* @param {goog.events.Event} e Event object.
* @private
* @protected
*/
goog.ui.HsvPalette.prototype.handleMouseUp_ = function(e) {
goog.ui.HsvPalette.prototype.handleMouseUp = function(e) {
goog.events.unlistenByKey(this.mouseMoveListener_);
goog.events.unlistenByKey(this.mouseUpListener_);
};
Expand All @@ -479,7 +502,7 @@ goog.ui.HsvPalette.prototype.handleMouseUp_ = function(e) {
* @protected
*/
goog.ui.HsvPalette.prototype.handleInput = function(e) {
if (/^#[0-9a-f]{6}$/i.test(this.inputEl_.value)) {
this.setColor(this.inputEl_.value);
if (/^#[0-9a-f]{6}$/i.test(this.inputElement.value)) {
this.setColor(this.inputElement.value);
}
};

0 comments on commit 38cc19b

Please sign in to comment.