diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/ui/roundedpanel.js')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/ui/roundedpanel.js | 622 |
1 files changed, 0 insertions, 622 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/ui/roundedpanel.js b/contexts/data/lib/closure-library/closure/goog/ui/roundedpanel.js deleted file mode 100644 index c8d5a06..0000000 --- a/contexts/data/lib/closure-library/closure/goog/ui/roundedpanel.js +++ /dev/null @@ -1,622 +0,0 @@ -// Copyright 2008 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Class definition for a rounded corner panel. - * @supported IE 6.0+, Safari 2.0+, Firefox 1.5+, Opera 9.2+. - * @see ../demos/roundedpanel.html - */ - -goog.provide('goog.ui.BaseRoundedPanel'); -goog.provide('goog.ui.CssRoundedPanel'); -goog.provide('goog.ui.GraphicsRoundedPanel'); -goog.provide('goog.ui.RoundedPanel'); -goog.provide('goog.ui.RoundedPanel.Corner'); - -goog.require('goog.dom'); -goog.require('goog.dom.classes'); -goog.require('goog.graphics'); -goog.require('goog.graphics.SolidFill'); -goog.require('goog.graphics.Stroke'); -goog.require('goog.math.Coordinate'); -goog.require('goog.style'); -goog.require('goog.ui.Component'); -goog.require('goog.userAgent'); - - -/** - * Factory method that returns an instance of a BaseRoundedPanel. - * @param {number} radius The radius of the rounded corner(s), in pixels. - * @param {number} borderWidth The thickness of the border, in pixels. - * @param {string} borderColor The border color of the panel. - * @param {string=} opt_backgroundColor The background color of the panel. - * @param {number=} opt_corners The corners of the panel to be rounded. Any - * corners not specified will be rendered as square corners. Will default - * to all square corners if not specified. - * @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the - * document we want to render in. - * @return {goog.ui.BaseRoundedPanel} An instance of a - * goog.ui.BaseRoundedPanel subclass. - */ -goog.ui.RoundedPanel.create = function(radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper) { - // This variable checks for the presence of Safari 3.0+ or Gecko 1.9+, - // which can leverage special CSS styles to create rounded corners. - var isCssReady = goog.userAgent.WEBKIT && goog.userAgent.isVersion('500') || - goog.userAgent.GECKO && goog.userAgent.isVersion('1.9a'); - - if (isCssReady) { - // Safari 3.0+ and Firefox 3.0+ support this instance. - return new goog.ui.CssRoundedPanel( - radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper); - } else { - return new goog.ui.GraphicsRoundedPanel( - radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper); - } -}; - - -/** - * Enum for specifying which corners to render. - * @enum {number} - */ -goog.ui.RoundedPanel.Corner = { - NONE: 0, - BOTTOM_LEFT: 2, - TOP_LEFT: 4, - LEFT: 6, // BOTTOM_LEFT | TOP_LEFT - TOP_RIGHT: 8, - TOP: 12, // TOP_LEFT | TOP_RIGHT - BOTTOM_RIGHT: 1, - BOTTOM: 3, // BOTTOM_LEFT | BOTTOM_RIGHT - RIGHT: 9, // TOP_RIGHT | BOTTOM_RIGHT - ALL: 15 // TOP | BOTTOM -}; - - -/** - * CSS class name suffixes for the elements comprising the RoundedPanel. - * @enum {string} - * @private - */ -goog.ui.RoundedPanel.Classes_ = { - BACKGROUND: goog.getCssName('goog-roundedpanel-background'), - PANEL: goog.getCssName('goog-roundedpanel'), - CONTENT: goog.getCssName('goog-roundedpanel-content') -}; - - - -/** - * Base class for the hierarchy of RoundedPanel classes. Do not - * instantiate directly. Instead, call goog.ui.RoundedPanel.create(). - * The HTML structure for the RoundedPanel is: - * <pre> - * - div (Contains the background and content. Class name: goog-roundedpanel) - * - div (Contains the background/rounded corners. Class name: - * goog-roundedpanel-bg) - * - div (Contains the content. Class name: goog-roundedpanel-content) - * </pre> - * @param {number} radius The radius of the rounded corner(s), in pixels. - * @param {number} borderWidth The thickness of the border, in pixels. - * @param {string} borderColor The border color of the panel. - * @param {string=} opt_backgroundColor The background color of the panel. - * @param {number=} opt_corners The corners of the panel to be rounded. Any - * corners not specified will be rendered as square corners. Will default - * to all square corners if not specified. - * @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the - * document we want to render in. - * @extends {goog.ui.Component} - * @constructor - */ -goog.ui.BaseRoundedPanel = function(radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper) { - goog.ui.Component.call(this, opt_domHelper); - - /** - * The radius of the rounded corner(s), in pixels. - * @type {number} - * @private - */ - this.radius_ = radius; - - /** - * The thickness of the border, in pixels. - * @type {number} - * @private - */ - this.borderWidth_ = borderWidth; - - /** - * The border color of the panel. - * @type {string} - * @private - */ - this.borderColor_ = borderColor; - - /** - * The background color of the panel. - * @type {?string} - * @private - */ - this.backgroundColor_ = opt_backgroundColor || null; - - /** - * The corners of the panel to be rounded; defaults to - * goog.ui.RoundedPanel.Corner.NONE - * @type {number} - * @private - */ - this.corners_ = opt_corners || goog.ui.RoundedPanel.Corner.NONE; -}; -goog.inherits(goog.ui.BaseRoundedPanel, goog.ui.Component); - - -/** - * The element containing the rounded corners and background. - * @type {Element} - * @private - */ -goog.ui.BaseRoundedPanel.prototype.backgroundElement_; - - -/** - * The element containing the actual content. - * @type {Element} - * @private - */ -goog.ui.BaseRoundedPanel.prototype.contentElement_; - - -/** - * This method performs all the necessary DOM manipulation to create the panel. - * Overrides {@link goog.ui.Component#decorateInternal}. - * @param {Element} element The element to decorate. - * @protected - * @override - */ -goog.ui.BaseRoundedPanel.prototype.decorateInternal = function(element) { - goog.ui.BaseRoundedPanel.superClass_.decorateInternal.call(this, element); - goog.dom.classes.add(this.getElement(), goog.ui.RoundedPanel.Classes_.PANEL); - - // Create backgroundElement_, and add it to the DOM. - this.backgroundElement_ = this.getDomHelper().createElement('div'); - this.backgroundElement_.className = goog.ui.RoundedPanel.Classes_.BACKGROUND; - this.getElement().appendChild(this.backgroundElement_); - - // Set contentElement_ by finding a child node within element_ with the - // proper class name. If none exists, create it and add it to the DOM. - this.contentElement_ = goog.dom.getElementsByTagNameAndClass( - null, goog.ui.RoundedPanel.Classes_.CONTENT, this.getElement())[0]; - if (!this.contentElement_) { - this.contentElement_ = this.getDomHelper().createDom('div'); - this.contentElement_.className = goog.ui.RoundedPanel.Classes_.CONTENT; - this.getElement().appendChild(this.contentElement_); - } -}; - - -/** @override */ -goog.ui.BaseRoundedPanel.prototype.disposeInternal = function() { - if (this.backgroundElement_) { - this.getDomHelper().removeNode(this.backgroundElement_); - this.backgroundElement_ = null; - } - this.contentElement_ = null; - goog.ui.BaseRoundedPanel.superClass_.disposeInternal.call(this); -}; - - -/** - * Returns the DOM element containing the actual content. - * @return {Element} The element containing the actual content (null if none). - * @override - */ -goog.ui.BaseRoundedPanel.prototype.getContentElement = function() { - return this.contentElement_; -}; - - - -/** - * RoundedPanel class specifically for browsers that support CSS attributes - * for elements with rounded borders (ex. Safari 3.0+, Firefox 3.0+). Do not - * instantiate directly. Instead, call goog.ui.RoundedPanel.create(). - * @param {number} radius The radius of the rounded corner(s), in pixels. - * @param {number} borderWidth The thickness of the border, in pixels. - * @param {string} borderColor The border color of the panel. - * @param {string=} opt_backgroundColor The background color of the panel. - * @param {number=} opt_corners The corners of the panel to be rounded. Any - * corners not specified will be rendered as square corners. Will - * default to all square corners if not specified. - * @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the - * document we want to render in. - * @extends {goog.ui.BaseRoundedPanel} - * @constructor - */ -goog.ui.CssRoundedPanel = function(radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper) { - goog.ui.BaseRoundedPanel.call(this, - radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper); -}; -goog.inherits(goog.ui.CssRoundedPanel, goog.ui.BaseRoundedPanel); - - -/** - * This method performs all the necessary DOM manipulation to create the panel. - * Overrides {@link goog.ui.Component#decorateInternal}. - * @param {Element} element The element to decorate. - * @protected - * @override - */ -goog.ui.CssRoundedPanel.prototype.decorateInternal = function(element) { - goog.ui.CssRoundedPanel.superClass_.decorateInternal.call(this, element); - - // Set the border width and background color, if needed. - this.backgroundElement_.style.border = this.borderWidth_ + - 'px solid ' + - this.borderColor_; - if (this.backgroundColor_) { - this.backgroundElement_.style.backgroundColor = this.backgroundColor_; - } - - // Set radii of the appropriate rounded corners. - if (this.corners_ == goog.ui.RoundedPanel.Corner.ALL) { - var styleName = this.getStyle_(goog.ui.RoundedPanel.Corner.ALL); - this.backgroundElement_.style[styleName] = this.radius_ + 'px'; - } else { - var topLeftRadius = - this.corners_ & goog.ui.RoundedPanel.Corner.TOP_LEFT ? - this.radius_ : - 0; - var cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.TOP_LEFT); - this.backgroundElement_.style[cornerStyle] = topLeftRadius + 'px'; - var topRightRadius = - this.corners_ & goog.ui.RoundedPanel.Corner.TOP_RIGHT ? - this.radius_ : - 0; - cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.TOP_RIGHT); - this.backgroundElement_.style[cornerStyle] = topRightRadius + 'px'; - var bottomRightRadius = - this.corners_ & goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT ? - this.radius_ : - 0; - cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT); - this.backgroundElement_.style[cornerStyle] = bottomRightRadius + 'px'; - var bottomLeftRadius = - this.corners_ & goog.ui.RoundedPanel.Corner.BOTTOM_LEFT ? - this.radius_ : - 0; - cornerStyle = this.getStyle_(goog.ui.RoundedPanel.Corner.BOTTOM_LEFT); - this.backgroundElement_.style[cornerStyle] = bottomLeftRadius + 'px'; - } -}; - - -/** - * This method returns the CSS style based on the corner of the panel, and the - * user-agent. - * @param {number} corner The corner whose style name to retrieve. - * @private - * @return {string} The CSS style based on the specified corner. - */ -goog.ui.CssRoundedPanel.prototype.getStyle_ = function(corner) { - // Determine the proper corner to work with. - var cssCorner, suffixLeft, suffixRight; - if (goog.userAgent.WEBKIT) { - suffixLeft = 'Left'; - suffixRight = 'Right'; - } else { - suffixLeft = 'left'; - suffixRight = 'right'; - } - switch (corner) { - case goog.ui.RoundedPanel.Corner.ALL: - cssCorner = ''; - break; - case goog.ui.RoundedPanel.Corner.TOP_LEFT: - cssCorner = 'Top' + suffixLeft; - break; - case goog.ui.RoundedPanel.Corner.TOP_RIGHT: - cssCorner = 'Top' + suffixRight; - break; - case goog.ui.RoundedPanel.Corner.BOTTOM_LEFT: - cssCorner = 'Bottom' + suffixLeft; - break; - case goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT: - cssCorner = 'Bottom' + suffixRight; - break; - } - - return goog.userAgent.WEBKIT ? - 'WebkitBorder' + cssCorner + 'Radius' : - 'MozBorderRadius' + cssCorner; -}; - - - -/** - * RoundedPanel class that uses goog.graphics to create the rounded corners. - * Do not instantiate directly. Instead, call goog.ui.RoundedPanel.create(). - * @param {number} radius The radius of the rounded corner(s), in pixels. - * @param {number} borderWidth The thickness of the border, in pixels. - * @param {string} borderColor The border color of the panel. - * @param {string=} opt_backgroundColor The background color of the panel. - * @param {number=} opt_corners The corners of the panel to be rounded. Any - * corners not specified will be rendered as square corners. Will - * default to all square corners if not specified. - * @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the - * document we want to render in. - * @extends {goog.ui.BaseRoundedPanel} - * @constructor - */ -goog.ui.GraphicsRoundedPanel = function(radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper) { - goog.ui.BaseRoundedPanel.call(this, - radius, - borderWidth, - borderColor, - opt_backgroundColor, - opt_corners, - opt_domHelper); -}; -goog.inherits(goog.ui.GraphicsRoundedPanel, goog.ui.BaseRoundedPanel); - - -/** - * A 4-element array containing the circle centers for the arcs in the - * bottom-left, top-left, top-right, and bottom-right corners, respectively. - * @type {Array.<goog.math.Coordinate>} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.arcCenters_; - - -/** - * A 4-element array containing the start coordinates for rendering the arcs - * in the bottom-left, top-left, top-right, and bottom-right corners, - * respectively. - * @type {Array.<goog.math.Coordinate>} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.cornerStarts_; - - -/** - * A 4-element array containing the arc end angles for the bottom-left, - * top-left, top-right, and bottom-right corners, respectively. - * @type {Array.<number>} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.endAngles_; - - -/** - * Graphics object for rendering the background. - * @type {goog.graphics.AbstractGraphics} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.graphics_; - - -/** - * A 4-element array containing the rounded corner radii for the bottom-left, - * top-left, top-right, and bottom-right corners, respectively. - * @type {Array.<number>} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.radii_; - - -/** - * A 4-element array containing the arc start angles for the bottom-left, - * top-left, top-right, and bottom-right corners, respectively. - * @type {Array.<number>} - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.startAngles_; - - -/** - * Thickness constant used as an offset to help determine where to start - * rendering. - * @type {number} - * @private - */ -goog.ui.GraphicsRoundedPanel.BORDER_WIDTH_FACTOR_ = 1 / 2; - - -/** - * This method performs all the necessary DOM manipulation to create the panel. - * Overrides {@link goog.ui.Component#decorateInternal}. - * @param {Element} element The element to decorate. - * @protected - * @override - */ -goog.ui.GraphicsRoundedPanel.prototype.decorateInternal = - function(element) { - goog.ui.GraphicsRoundedPanel.superClass_.decorateInternal.call(this, - element); - - // Calculate the points and angles for creating the rounded corners. Then - // instantiate a Graphics object for drawing purposes. - var elementSize = goog.style.getSize(this.getElement()); - this.calculateArcParameters_(elementSize); - this.graphics_ = goog.graphics.createGraphics( - /** @type {number} */ (elementSize.width), - /** @type {number} */ (elementSize.height), - /** @type {number} */ (elementSize.width), - /** @type {number} */ (elementSize.height), - this.getDomHelper()); - this.graphics_.createDom(); - - // Create the path, starting from the bottom-right corner, moving clockwise. - // End with the top-right corner. - var path = new goog.graphics.Path(); - for (var i = 0; i < 4; i++) { - if (this.radii_[i]) { - // If radius > 0, draw an arc, moving to the first point and drawing - // a line to the others. - var cx = this.arcCenters_[i].x; - var cy = this.arcCenters_[i].y; - var rx = this.radii_[i]; - var ry = rx; - var fromAngle = this.startAngles_[i]; - var extent = this.endAngles_[i] - fromAngle; - var startX = cx + goog.math.angleDx(fromAngle, rx); - var startY = cy + goog.math.angleDy(fromAngle, ry); - if (i > 0) { - var currentPoint = path.getCurrentPoint(); - if (!currentPoint || startX != currentPoint[0] || - startY != currentPoint[1]) { - path.lineTo(startX, startY); - } - } else { - path.moveTo(startX, startY); - } - path.arcTo(rx, ry, fromAngle, extent); - } else if (i == 0) { - // If we're just starting out (ie. i == 0), move to the starting point. - path.moveTo(this.cornerStarts_[i].x, - this.cornerStarts_[i].y); - } else { - // Otherwise, draw a line to the starting point. - path.lineTo(this.cornerStarts_[i].x, - this.cornerStarts_[i].y); - } - } - - // Close the path, create a stroke object, and fill the enclosed area, if - // needed. Then render the path. - path.close(); - var stroke = this.borderWidth_ ? - new goog.graphics.Stroke(this.borderWidth_, this.borderColor_) : - null; - var fill = this.backgroundColor_ ? - new goog.graphics.SolidFill(this.backgroundColor_, 1) : - null; - this.graphics_.drawPath(path, stroke, fill); - this.graphics_.render(this.backgroundElement_); -}; - - -/** @override */ -goog.ui.GraphicsRoundedPanel.prototype.disposeInternal = function() { - goog.ui.GraphicsRoundedPanel.superClass_.disposeInternal.call(this); - this.graphics_.dispose(); - delete this.graphics_; - delete this.radii_; - delete this.cornerStarts_; - delete this.arcCenters_; - delete this.startAngles_; - delete this.endAngles_; -}; - - -/** - * Calculates the start coordinates, circle centers, and angles, for the rounded - * corners at each corner of the panel. - * @param {goog.math.Size} elementSize The size of element_. - * @private - */ -goog.ui.GraphicsRoundedPanel.prototype.calculateArcParameters_ = - function(elementSize) { - // Initialize the arrays containing the key points and angles. - this.radii_ = []; - this.cornerStarts_ = []; - this.arcCenters_ = []; - this.startAngles_ = []; - this.endAngles_ = []; - - // Set the start points, circle centers, and angles for the bottom-right, - // bottom-left, top-left and top-right corners, in that order. - var angleInterval = 90; - var borderWidthOffset = this.borderWidth_ * - goog.ui.GraphicsRoundedPanel.BORDER_WIDTH_FACTOR_; - var radius, xStart, yStart, xCenter, yCenter, startAngle, endAngle; - for (var i = 0; i < 4; i++) { - var corner = Math.pow(2, i); // Determines which corner we're dealing with. - var isLeft = corner & goog.ui.RoundedPanel.Corner.LEFT; - var isTop = corner & goog.ui.RoundedPanel.Corner.TOP; - - // Calculate the radius and the start coordinates. - radius = corner & this.corners_ ? this.radius_ : 0; - switch (corner) { - case goog.ui.RoundedPanel.Corner.BOTTOM_LEFT: - xStart = borderWidthOffset + radius; - yStart = elementSize.height - borderWidthOffset; - break; - case goog.ui.RoundedPanel.Corner.TOP_LEFT: - xStart = borderWidthOffset; - yStart = radius + borderWidthOffset; - break; - case goog.ui.RoundedPanel.Corner.TOP_RIGHT: - xStart = elementSize.width - radius - borderWidthOffset; - yStart = borderWidthOffset; - break; - case goog.ui.RoundedPanel.Corner.BOTTOM_RIGHT: - xStart = elementSize.width - borderWidthOffset; - yStart = elementSize.height - radius - borderWidthOffset; - break; - } - - // Calculate the circle centers and start/end angles. - xCenter = isLeft ? - radius + borderWidthOffset : - elementSize.width - radius - borderWidthOffset; - yCenter = isTop ? - radius + borderWidthOffset : - elementSize.height - radius - borderWidthOffset; - startAngle = angleInterval * i; - endAngle = startAngle + angleInterval; - - // Append the radius, angles, and coordinates to their arrays. - this.radii_[i] = radius; - this.cornerStarts_[i] = new goog.math.Coordinate(xStart, yStart); - this.arcCenters_[i] = new goog.math.Coordinate(xCenter, yCenter); - this.startAngles_[i] = startAngle; - this.endAngles_[i] = endAngle; - } -}; |