Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,202 @@
|
||||
// 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 Renderer for {@link goog.ui.Button}s in App style.
|
||||
*
|
||||
* Based on ImagelessButtonRender. Uses even more CSS voodoo than the default
|
||||
* implementation to render custom buttons with fake rounded corners and
|
||||
* dimensionality (via a subtle flat shadow on the bottom half of the button)
|
||||
* without the use of images.
|
||||
*
|
||||
* Based on the Custom Buttons 3.1 visual specification, see
|
||||
* http://go/custombuttons
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.ui.style.app.ButtonRenderer');
|
||||
|
||||
goog.require('goog.dom.classlist');
|
||||
goog.require('goog.ui.Button');
|
||||
goog.require('goog.ui.CustomButtonRenderer');
|
||||
goog.require('goog.ui.INLINE_BLOCK_CLASSNAME');
|
||||
goog.require('goog.ui.registry');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Custom renderer for {@link goog.ui.Button}s. Imageless buttons can contain
|
||||
* almost arbitrary HTML content, will flow like inline elements, but can be
|
||||
* styled like block-level elements.
|
||||
*
|
||||
* @constructor
|
||||
* @extends {goog.ui.CustomButtonRenderer}
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer = function() {
|
||||
goog.ui.CustomButtonRenderer.call(this);
|
||||
};
|
||||
goog.inherits(goog.ui.style.app.ButtonRenderer, goog.ui.CustomButtonRenderer);
|
||||
goog.addSingletonGetter(goog.ui.style.app.ButtonRenderer);
|
||||
|
||||
|
||||
/**
|
||||
* Default CSS class to be applied to the root element of components rendered
|
||||
* by this renderer.
|
||||
* @type {string}
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer.CSS_CLASS = goog.getCssName('goog-button');
|
||||
|
||||
|
||||
/**
|
||||
* Array of arrays of CSS classes that we want composite classes added and
|
||||
* removed for in IE6 and lower as a workaround for lack of multi-class CSS
|
||||
* selector support.
|
||||
* @type {Array<Array<string>>}
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer.IE6_CLASS_COMBINATIONS = [];
|
||||
|
||||
|
||||
/**
|
||||
* Returns the button's contents wrapped in the following DOM structure:
|
||||
* <div class="goog-inline-block goog-button-base goog-button">
|
||||
* <div class="goog-inline-block goog-button-base-outer-box">
|
||||
* <div class="goog-button-base-inner-box">
|
||||
* <div class="goog-button-base-pos">
|
||||
* <div class="goog-button-base-top-shadow"> </div>
|
||||
* <div class="goog-button-base-content">Contents...</div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer.prototype.createDom;
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.ButtonRenderer.prototype.getContentElement = function(
|
||||
element) {
|
||||
return element && /** @type {Element} */(
|
||||
element.firstChild.firstChild.firstChild.lastChild);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Takes a text caption or existing DOM structure, and returns the content
|
||||
* wrapped in a pseudo-rounded-corner box. Creates the following DOM structure:
|
||||
* <div class="goog-inline-block goog-button-base-outer-box">
|
||||
* <div class="goog-inline-block goog-button-base-inner-box">
|
||||
* <div class="goog-button-base-pos">
|
||||
* <div class="goog-button-base-top-shadow"> </div>
|
||||
* <div class="goog-button-base-content">Contents...</div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* Used by both {@link #createDom} and {@link #decorate}. To be overridden
|
||||
* by subclasses.
|
||||
* @param {goog.ui.ControlContent} content Text caption or DOM structure to wrap
|
||||
* in a box.
|
||||
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
|
||||
* @return {Element} Pseudo-rounded-corner box containing the content.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer.prototype.createButton = function(content,
|
||||
dom) {
|
||||
var baseClass = this.getStructuralCssClass();
|
||||
var inlineBlock = goog.ui.INLINE_BLOCK_CLASSNAME + ' ';
|
||||
return dom.createDom(
|
||||
'div', inlineBlock + goog.getCssName(baseClass, 'outer-box'),
|
||||
dom.createDom(
|
||||
'div', inlineBlock + goog.getCssName(baseClass, 'inner-box'),
|
||||
dom.createDom('div', goog.getCssName(baseClass, 'pos'),
|
||||
dom.createDom(
|
||||
'div', goog.getCssName(baseClass, 'top-shadow'), '\u00A0'),
|
||||
dom.createDom(
|
||||
'div', goog.getCssName(baseClass, 'content'), content))));
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Check if the button's element has a box structure.
|
||||
* @param {goog.ui.Button} button Button instance whose structure is being
|
||||
* checked.
|
||||
* @param {Element} element Element of the button.
|
||||
* @return {boolean} Whether the element has a box structure.
|
||||
* @protected
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.ButtonRenderer.prototype.hasBoxStructure = function(
|
||||
button, element) {
|
||||
|
||||
var baseClass = this.getStructuralCssClass();
|
||||
var outer = button.getDomHelper().getFirstElementChild(element);
|
||||
var outerClassName = goog.getCssName(baseClass, 'outer-box');
|
||||
if (outer && goog.dom.classlist.contains(outer, outerClassName)) {
|
||||
|
||||
var inner = button.getDomHelper().getFirstElementChild(outer);
|
||||
var innerClassName = goog.getCssName(baseClass, 'inner-box');
|
||||
if (inner && goog.dom.classlist.contains(inner, innerClassName)) {
|
||||
|
||||
var pos = button.getDomHelper().getFirstElementChild(inner);
|
||||
var posClassName = goog.getCssName(baseClass, 'pos');
|
||||
if (pos && goog.dom.classlist.contains(pos, posClassName)) {
|
||||
|
||||
var shadow = button.getDomHelper().getFirstElementChild(pos);
|
||||
var shadowClassName = goog.getCssName(baseClass, 'top-shadow');
|
||||
if (shadow && goog.dom.classlist.contains(shadow, shadowClassName)) {
|
||||
|
||||
var content = button.getDomHelper().getNextElementSibling(shadow);
|
||||
var contentClassName = goog.getCssName(baseClass, 'content');
|
||||
if (content &&
|
||||
goog.dom.classlist.contains(content, contentClassName)) {
|
||||
// We have a proper box structure.
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.ButtonRenderer.prototype.getCssClass = function() {
|
||||
return goog.ui.style.app.ButtonRenderer.CSS_CLASS;
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.ButtonRenderer.prototype.getStructuralCssClass = function() {
|
||||
// TODO(user): extract to a constant.
|
||||
return goog.getCssName('goog-button-base');
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.ButtonRenderer.prototype.getIe6ClassCombinations =
|
||||
function() {
|
||||
return goog.ui.style.app.ButtonRenderer.IE6_CLASS_COMBINATIONS;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Register a decorator factory function for goog.ui.style.app.ButtonRenderer.
|
||||
goog.ui.registry.setDecoratorByClassName(
|
||||
goog.ui.style.app.ButtonRenderer.CSS_CLASS,
|
||||
function() {
|
||||
return new goog.ui.Button(null,
|
||||
goog.ui.style.app.ButtonRenderer.getInstance());
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<!--
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.ui.style.app.ButtonRenderer
|
||||
</title>
|
||||
<script src="../../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.ui.style.app.ButtonRendererTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sandbox"></div>
|
||||
|
||||
<div id="button" title="Click for Decorated">
|
||||
Hello Decorated
|
||||
</div>
|
||||
|
||||
<!-- The component DOM must always be created without whitespace. -->
|
||||
<div id="button-box" title="Click for Decorated Box" class="goog-button goog-button-base"><div class="goog-inline-block goog-button-base-outer-box"><div class="goog-inline-block goog-button-base-inner-box"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow"> </div><div class="goog-button-base-content">Hello Decorated Box</div></div></div></div></div>
|
||||
|
||||
<!-- The component DOM must always be created without whitespace. This
|
||||
demonstrates what happens when the content has whitespace.
|
||||
-->
|
||||
<div id="button-box-with-space-in-content" class="goog-button goog-button-base"><div class="goog-inline-block goog-button-base-outer-box"><div class="goog-inline-block goog-button-base-inner-box"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow"> </div><div class="goog-button-base-content">
|
||||
Hello Decorated Box with space
|
||||
</div></div></div></div></div>
|
||||
|
||||
<div id="button-box-with-dom-content">
|
||||
<strong>Hello</strong> <em>Box</em>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.ui.style.app.ButtonRendererTest');
|
||||
goog.setTestOnly('goog.ui.style.app.ButtonRendererTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.ui.style');
|
||||
goog.require('goog.ui.Button');
|
||||
goog.require('goog.ui.Component');
|
||||
goog.require('goog.ui.style.app.ButtonRenderer');
|
||||
goog.require('goog.userAgent');
|
||||
var renderer = goog.ui.style.app.ButtonRenderer.getInstance();
|
||||
var button;
|
||||
|
||||
// Write iFrame tag to load reference FastUI markup. Then, our tests will
|
||||
// compare the generated markup to the reference markup.
|
||||
var refPath = '../../../../../webutil/css/fastui/app/button_spec.html';
|
||||
goog.testing.ui.style.writeReferenceFrame(refPath);
|
||||
|
||||
function setUp() {
|
||||
button = new goog.ui.Button('Hello Generated', renderer);
|
||||
button.setTooltip('Click for Generated');
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
if (button) {
|
||||
button.dispose();
|
||||
}
|
||||
goog.dom.getElement('sandbox').innerHTML = '';
|
||||
}
|
||||
|
||||
function testGeneratedButton() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Generated', button.getContentElement().innerHTML);
|
||||
assertEquals('Click for Generated',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
function testButtonStates() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
button.setState(goog.ui.Component.State.HOVER, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-hover');
|
||||
button.setState(goog.ui.Component.State.HOVER, false);
|
||||
button.setState(goog.ui.Component.State.FOCUSED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-focused');
|
||||
button.setState(goog.ui.Component.State.FOCUSED, false);
|
||||
button.setState(goog.ui.Component.State.ACTIVE, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-active');
|
||||
button.setState(goog.ui.Component.State.ACTIVE, false);
|
||||
button.setState(goog.ui.Component.State.DISABLED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-disabled');
|
||||
}
|
||||
|
||||
function testDecoratedButton() {
|
||||
button.decorate(goog.dom.getElement('button'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Decorated', button.getContentElement().innerHTML);
|
||||
assertEquals('Click for Decorated',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
function testDecoratedButtonBox() {
|
||||
button.decorate(goog.dom.getElement('button-box'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Decorated Box',
|
||||
button.getContentElement().innerHTML);
|
||||
assertEquals('Click for Decorated Box',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
/*
|
||||
* This test demonstrates what happens when you put whitespace in a
|
||||
* decorated button's content, and the decorated element 'hasBoxStructure'.
|
||||
* Note that this behavior is different than when the element does not
|
||||
* have box structure. Should this be fixed?
|
||||
*/
|
||||
function testDecoratedButtonBoxWithSpaceInContent() {
|
||||
button.decorate(goog.dom.getElement('button-box-with-space-in-content'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(9)) {
|
||||
assertEquals('Hello Decorated Box with space ',
|
||||
button.getContentElement().innerHTML);
|
||||
} else {
|
||||
assertEquals('\n Hello Decorated Box with space\n ',
|
||||
button.getContentElement().innerHTML);
|
||||
}
|
||||
}
|
||||
|
||||
function testExistingContentIsUsed() {
|
||||
button.decorate(goog.dom.getElement('button-box-with-dom-content'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
// Safari 3 adds style="-webkit-user-select" to the strong tag, so we
|
||||
// can't simply look at the HTML.
|
||||
var content = button.getContentElement();
|
||||
assertEquals('Unexpected number of child nodes', 3,
|
||||
content.childNodes.length);
|
||||
assertEquals('Unexpected tag', 'STRONG',
|
||||
content.childNodes[0].tagName);
|
||||
assertEquals('Unexpected text content', 'Hello',
|
||||
content.childNodes[0].innerHTML);
|
||||
assertEquals('Unexpected tag', 'EM',
|
||||
content.childNodes[2].tagName);
|
||||
assertEquals('Unexpected text content', 'Box',
|
||||
content.childNodes[2].innerHTML);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
// 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 Renderer for {@link goog.ui.style.app.MenuButton}s and
|
||||
* subclasses.
|
||||
*
|
||||
* @author attila@google.com (Attila Bodis)
|
||||
*/
|
||||
|
||||
goog.provide('goog.ui.style.app.MenuButtonRenderer');
|
||||
|
||||
goog.require('goog.a11y.aria.Role');
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.ui.Menu');
|
||||
goog.require('goog.ui.MenuRenderer');
|
||||
goog.require('goog.ui.style.app.ButtonRenderer');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Renderer for {@link goog.ui.style.app.MenuButton}s. This implementation
|
||||
* overrides {@link goog.ui.style.app.ButtonRenderer#createButton} to insert a
|
||||
* dropdown element into the content element after the specified content.
|
||||
* @constructor
|
||||
* @extends {goog.ui.style.app.ButtonRenderer}
|
||||
* @final
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer = function() {
|
||||
goog.ui.style.app.ButtonRenderer.call(this);
|
||||
};
|
||||
goog.inherits(goog.ui.style.app.MenuButtonRenderer,
|
||||
goog.ui.style.app.ButtonRenderer);
|
||||
goog.addSingletonGetter(goog.ui.style.app.MenuButtonRenderer);
|
||||
|
||||
|
||||
/**
|
||||
* Default CSS class to be applied to the root element of components rendered
|
||||
* by this renderer.
|
||||
* @type {string}
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.CSS_CLASS =
|
||||
goog.getCssName('goog-menu-button');
|
||||
|
||||
|
||||
/**
|
||||
* Array of arrays of CSS classes that we want composite classes added and
|
||||
* removed for in IE6 and lower as a workaround for lack of multi-class CSS
|
||||
* selector support.
|
||||
* @type {Array<Array<string>>}
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.IE6_CLASS_COMBINATIONS = [
|
||||
[goog.getCssName('goog-button-base-rtl'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-hover'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-focused'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-disabled'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-active'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-open'),
|
||||
goog.getCssName('goog-menu-button')],
|
||||
|
||||
[goog.getCssName('goog-button-base-active'),
|
||||
goog.getCssName('goog-button-base-open'),
|
||||
goog.getCssName('goog-menu-button')]
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* Returns the ARIA role to be applied to menu buttons, which
|
||||
* have a menu attached to them.
|
||||
* @return {goog.a11y.aria.Role} ARIA role.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.getAriaRole = function() {
|
||||
// If we apply the 'button' ARIA role to the menu button, the
|
||||
// screen reader keeps referring to menus as buttons, which
|
||||
// might be misleading for the users. Hence the ARIA role
|
||||
// 'menu' is assigned.
|
||||
return goog.a11y.aria.Role.MENU;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Takes the button's root element and returns the parent element of the
|
||||
* button's contents. Overrides the superclass implementation by taking
|
||||
* the nested DIV structure of menu buttons into account.
|
||||
* @param {Element} element Root element of the button whose content element
|
||||
* is to be returned.
|
||||
* @return {Element} The button's content element.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.getContentElement =
|
||||
function(element) {
|
||||
return goog.ui.style.app.MenuButtonRenderer.superClass_.getContentElement
|
||||
.call(this, element);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Takes an element, decorates it with the menu button control, and returns
|
||||
* the element. Overrides {@link goog.ui.style.app.ButtonRenderer#decorate} by
|
||||
* looking for a child element that can be decorated by a menu, and if it
|
||||
* finds one, decorates it and attaches it to the menu button.
|
||||
* @param {goog.ui.Control} control goog.ui.MenuButton to decorate the element.
|
||||
* @param {Element} element Element to decorate.
|
||||
* @return {Element} Decorated element.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.decorate =
|
||||
function(control, element) {
|
||||
var button = /** @type {goog.ui.MenuButton} */ (control);
|
||||
// TODO(attila): Add more robust support for subclasses of goog.ui.Menu.
|
||||
var menuElem = goog.dom.getElementsByTagNameAndClass(
|
||||
'*', goog.ui.MenuRenderer.CSS_CLASS, element)[0];
|
||||
if (menuElem) {
|
||||
// Move the menu element directly under the body (but hide it first to
|
||||
// prevent flicker; see bug 1089244).
|
||||
goog.style.setElementShown(menuElem, false);
|
||||
goog.dom.appendChild(goog.dom.getOwnerDocument(menuElem).body, menuElem);
|
||||
|
||||
// Decorate the menu and attach it to the button.
|
||||
var menu = new goog.ui.Menu();
|
||||
menu.decorate(menuElem);
|
||||
button.setMenu(menu);
|
||||
}
|
||||
|
||||
// Let the superclass do the rest.
|
||||
return goog.ui.style.app.MenuButtonRenderer.superClass_.decorate.call(this,
|
||||
button, element);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Takes a text caption or existing DOM structure, and returns the content and
|
||||
* a dropdown arrow element wrapped in a pseudo-rounded-corner box. Creates
|
||||
* the following DOM structure:
|
||||
* <div class="goog-inline-block goog-button-outer-box">
|
||||
* <div class="goog-inline-block goog-button-inner-box">
|
||||
* <div class="goog-button-pos">
|
||||
* <div class="goog-button-top-shadow"> </div>
|
||||
* <div class="goog-button-content">
|
||||
* Contents...
|
||||
* <div class="goog-menu-button-dropdown"> </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* @param {goog.ui.ControlContent} content Text caption or DOM structure to wrap
|
||||
* in a box.
|
||||
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
|
||||
* @return {Element} Pseudo-rounded-corner box containing the content.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.createButton = function(content,
|
||||
dom) {
|
||||
var contentWithDropdown = this.createContentWithDropdown(content, dom);
|
||||
return goog.ui.style.app.MenuButtonRenderer.superClass_.createButton.call(
|
||||
this, contentWithDropdown, dom);
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.setContent = function(element,
|
||||
content) {
|
||||
var dom = goog.dom.getDomHelper(this.getContentElement(element));
|
||||
goog.ui.style.app.MenuButtonRenderer.superClass_.setContent.call(
|
||||
this, element, this.createContentWithDropdown(content, dom));
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Inserts dropdown element as last child of existing content.
|
||||
* @param {goog.ui.ControlContent} content Text caption or DOM structure.
|
||||
* @param {goog.dom.DomHelper} dom DOM helper, used for document ineraction.
|
||||
* @return {Array<Node>} DOM structure to be set as the button's content.
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.createContentWithDropdown =
|
||||
function(content, dom) {
|
||||
var caption = dom.createDom('div', null, content, this.createDropdown(dom));
|
||||
return goog.array.toArray(caption.childNodes);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns an appropriately-styled DIV containing a dropdown arrow.
|
||||
* Creates the following DOM structure:
|
||||
* <div class="goog-menu-button-dropdown"> </div>
|
||||
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
|
||||
* @return {Element} Dropdown element.
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.createDropdown = function(dom) {
|
||||
return dom.createDom('div', goog.getCssName(this.getCssClass(), 'dropdown'));
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the CSS class to be applied to the root element of components
|
||||
* rendered using this renderer.
|
||||
* @return {string} Renderer-specific CSS class.
|
||||
* @override
|
||||
*/
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.getCssClass = function() {
|
||||
return goog.ui.style.app.MenuButtonRenderer.CSS_CLASS;
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.MenuButtonRenderer.prototype.getIe6ClassCombinations =
|
||||
function() {
|
||||
return goog.ui.style.app.MenuButtonRenderer.IE6_CLASS_COMBINATIONS;
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<!--
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.ui.style.app.MenuButtonRenderer
|
||||
</title>
|
||||
<script src="../../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.ui.style.app.MenuButtonRendererTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sandbox"></div>
|
||||
|
||||
<div id="button" title="Click for Decorated">
|
||||
Hello Decorated
|
||||
</div>
|
||||
|
||||
<div id="button-2" title="Click for Decorated">
|
||||
Hello Decorated
|
||||
</div>
|
||||
|
||||
<!-- The component DOM must always be created without whitespace. -->
|
||||
<div id="button-box" title="Click for Decorated Box" class="goog-menu-button goog-button-base"><div class="goog-inline-block goog-button-base-outer-box"><div class="goog-inline-block goog-button-base-inner-box"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow"> </div><div class="goog-button-base-content">Hello Decorated Box<div class="goog-menu-button-dropdown"> </div></div></div></div></div></div>
|
||||
|
||||
<div id="button-with-dom-content" class="goog-menu-button">
|
||||
<strong>Hello Strong</strong> <em>Box</em>
|
||||
</div>
|
||||
|
||||
<div id="button-with-menu" class="goog-menu-button">
|
||||
Button with Menu
|
||||
<div class="goog-menu">
|
||||
<div class="goog-menuitem">Item 1</div>
|
||||
<div class="goog-menuitem">Item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.ui.style.app.MenuButtonRendererTest');
|
||||
goog.setTestOnly('goog.ui.style.app.MenuButtonRendererTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.ui.style');
|
||||
goog.require('goog.ui.Component');
|
||||
goog.require('goog.ui.MenuButton');
|
||||
goog.require('goog.ui.style.app.MenuButtonRenderer');
|
||||
var renderer = goog.ui.style.app.MenuButtonRenderer.getInstance();
|
||||
var button;
|
||||
|
||||
// Write iFrame tag to load reference FastUI markup. Then, our tests will
|
||||
// compare the generated markup to the reference markup.
|
||||
var refPath = '../../../../../webutil/css/fastui/app/menubutton_spec.html';
|
||||
goog.testing.ui.style.writeReferenceFrame(refPath);
|
||||
|
||||
function setUp() {
|
||||
button = new goog.ui.MenuButton('Hello Generated', null, renderer);
|
||||
button.setTooltip('Click for Generated');
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
if (button) {
|
||||
button.dispose();
|
||||
}
|
||||
goog.dom.getElement('sandbox').innerHTML = '';
|
||||
}
|
||||
|
||||
function testGeneratedButton() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Generated',
|
||||
button.getContentElement().firstChild.nodeValue);
|
||||
assertEquals('Click for Generated',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
function testButtonStates() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
button.setState(goog.ui.Component.State.HOVER, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-hover');
|
||||
button.setState(goog.ui.Component.State.HOVER, false);
|
||||
button.setState(goog.ui.Component.State.FOCUSED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-focused');
|
||||
button.setState(goog.ui.Component.State.FOCUSED, false);
|
||||
button.setState(goog.ui.Component.State.ACTIVE, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-active');
|
||||
button.setState(goog.ui.Component.State.ACTIVE, false);
|
||||
button.setState(goog.ui.Component.State.DISABLED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-disabled');
|
||||
}
|
||||
|
||||
function testDecoratedButton() {
|
||||
button.decorate(goog.dom.getElement('button'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Decorated',
|
||||
button.getContentElement().firstChild.nodeValue);
|
||||
assertEquals('Click for Decorated',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
function testDecoratedButtonBox() {
|
||||
button.decorate(goog.dom.getElement('button-box'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Hello Decorated Box',
|
||||
button.getContentElement().firstChild.nodeValue);
|
||||
assertEquals('Click for Decorated Box',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
|
||||
function testExistingContentIsUsed() {
|
||||
button.decorate(goog.dom.getElement('button-with-dom-content'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
// Safari 3 adds style="-webkit-user-select" to the strong tag, so we
|
||||
// can't simply look at the HTML.
|
||||
var content = button.getContentElement();
|
||||
assertEquals('Unexpected number of child nodes; expected existing number ' +
|
||||
'plus one for the dropdown element', 4, content.childNodes.length);
|
||||
assertEquals('Unexpected tag', 'STRONG',
|
||||
content.childNodes[0].tagName);
|
||||
assertEquals('Unexpected text content', 'Hello Strong',
|
||||
content.childNodes[0].innerHTML);
|
||||
assertEquals('Unexpected tag', 'EM',
|
||||
content.childNodes[2].tagName);
|
||||
assertEquals('Unexpected text content', 'Box',
|
||||
content.childNodes[2].innerHTML);
|
||||
}
|
||||
|
||||
function testDecoratedButtonWithMenu() {
|
||||
button.decorate(goog.dom.getElement('button-with-menu'));
|
||||
assertEquals('Unexpected number of menu items', 2, button.getItemCount());
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertFalse('Expected menu element to not be contained by button',
|
||||
goog.dom.contains(button.getElement(),
|
||||
button.getMenu().getElement()));
|
||||
}
|
||||
|
||||
function testDropDownExistsAfterButtonRename() {
|
||||
button.decorate(goog.dom.getElement('button-2'));
|
||||
button.setContent('New title');
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
assertEquals('Unexpected number of child nodes; expected text element ' +
|
||||
'and the dropdown element',
|
||||
2, button.getContentElement().childNodes.length);
|
||||
assertEquals('New title',
|
||||
button.getContentElement().firstChild.nodeValue);
|
||||
assertEquals('Click for Decorated',
|
||||
button.getElement().getAttribute('title'));
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
// 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 Renderer for {@link goog.ui.Button}s in App style. This
|
||||
* type of button is typically used for an application's "primary action," eg
|
||||
* in Gmail, it's "Compose," in Calendar, it's "Create Event".
|
||||
*
|
||||
*/
|
||||
|
||||
goog.provide('goog.ui.style.app.PrimaryActionButtonRenderer');
|
||||
|
||||
goog.require('goog.ui.Button');
|
||||
goog.require('goog.ui.registry');
|
||||
goog.require('goog.ui.style.app.ButtonRenderer');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Custom renderer for {@link goog.ui.Button}s. This renderer supports the
|
||||
* "primary action" style for buttons.
|
||||
*
|
||||
* @constructor
|
||||
* @extends {goog.ui.style.app.ButtonRenderer}
|
||||
* @final
|
||||
*/
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer = function() {
|
||||
goog.ui.style.app.ButtonRenderer.call(this);
|
||||
};
|
||||
goog.inherits(goog.ui.style.app.PrimaryActionButtonRenderer,
|
||||
goog.ui.style.app.ButtonRenderer);
|
||||
goog.addSingletonGetter(goog.ui.style.app.PrimaryActionButtonRenderer);
|
||||
|
||||
|
||||
/**
|
||||
* Default CSS class to be applied to the root element of components rendered
|
||||
* by this renderer.
|
||||
* @type {string}
|
||||
*/
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.CSS_CLASS =
|
||||
'goog-primaryactionbutton';
|
||||
|
||||
|
||||
/**
|
||||
* Array of arrays of CSS classes that we want composite classes added and
|
||||
* removed for in IE6 and lower as a workaround for lack of multi-class CSS
|
||||
* selector support.
|
||||
* @type {Array<Array<string>>}
|
||||
*/
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.IE6_CLASS_COMBINATIONS = [
|
||||
['goog-button-base-disabled', 'goog-primaryactionbutton'],
|
||||
['goog-button-base-focused', 'goog-primaryactionbutton'],
|
||||
['goog-button-base-hover', 'goog-primaryactionbutton']
|
||||
];
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.prototype.getCssClass =
|
||||
function() {
|
||||
return goog.ui.style.app.PrimaryActionButtonRenderer.CSS_CLASS;
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.prototype.
|
||||
getIe6ClassCombinations = function() {
|
||||
return goog.ui.style.app.PrimaryActionButtonRenderer.IE6_CLASS_COMBINATIONS;
|
||||
};
|
||||
|
||||
|
||||
// Register a decorator factory function for
|
||||
// goog.ui.style.app.PrimaryActionButtonRenderer.
|
||||
goog.ui.registry.setDecoratorByClassName(
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.CSS_CLASS,
|
||||
function() {
|
||||
return new goog.ui.Button(null,
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer.getInstance());
|
||||
});
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<!--
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests -
|
||||
goog.ui.style.app.PrimaryActionButtonRenderer
|
||||
</title>
|
||||
<script src="../../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.ui.style.app.PrimaryActionButtonRendererTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sandbox">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.ui.style.app.PrimaryActionButtonRendererTest');
|
||||
goog.setTestOnly('goog.ui.style.app.PrimaryActionButtonRendererTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.ui.style');
|
||||
goog.require('goog.ui.Button');
|
||||
goog.require('goog.ui.Component');
|
||||
goog.require('goog.ui.style.app.PrimaryActionButtonRenderer');
|
||||
var renderer = goog.ui.style.app.PrimaryActionButtonRenderer.getInstance();
|
||||
var button;
|
||||
|
||||
// Write iFrame tag to load reference FastUI markup. Then, our tests will
|
||||
// compare the generated markup to the reference markup.
|
||||
var refPath = '../../../../../' +
|
||||
'webutil/css/fastui/app/primaryactionbutton_spec.html';
|
||||
goog.testing.ui.style.writeReferenceFrame(refPath);
|
||||
|
||||
function setUp() {
|
||||
button = new goog.ui.Button('Hello Generated', renderer);
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
if (button) {
|
||||
button.dispose();
|
||||
}
|
||||
goog.dom.getElement('sandbox').innerHTML = '';
|
||||
}
|
||||
|
||||
function testGeneratedButton() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
}
|
||||
|
||||
function testButtonStates() {
|
||||
button.render(goog.dom.getElement('sandbox'));
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-resting');
|
||||
button.setState(goog.ui.Component.State.HOVER, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-hover');
|
||||
button.setState(goog.ui.Component.State.HOVER, false);
|
||||
button.setState(goog.ui.Component.State.FOCUSED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-focused');
|
||||
button.setState(goog.ui.Component.State.FOCUSED, false);
|
||||
button.setState(goog.ui.Component.State.ACTIVE, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-active');
|
||||
button.setState(goog.ui.Component.State.ACTIVE, false);
|
||||
button.setState(goog.ui.Component.State.DISABLED, true);
|
||||
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
|
||||
'normal-disabled');
|
||||
}
|
||||
Reference in New Issue
Block a user