123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- // Copyright 2007 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 A simple, sample component.
- *
- */
- goog.provide('goog.demos.SampleComponent');
- goog.require('goog.dom');
- goog.require('goog.dom.TagName');
- goog.require('goog.dom.classlist');
- goog.require('goog.events.EventType');
- goog.require('goog.events.KeyCodes');
- goog.require('goog.events.KeyHandler');
- goog.require('goog.ui.Component');
- /**
- * A simple box that changes colour when clicked. This class demonstrates the
- * goog.ui.Component API, and is keyboard accessible, as per
- * http://wiki/Main/ClosureKeyboardAccessible
- *
- * @param {string=} opt_label A label to display. Defaults to "Click Me" if none
- * provided.
- * @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use.
- *
- * @extends {goog.ui.Component}
- * @constructor
- * @final
- */
- goog.demos.SampleComponent = function(opt_label, opt_domHelper) {
- goog.demos.SampleComponent.base(this, 'constructor', opt_domHelper);
- /**
- * The label to display.
- * @type {string}
- * @private
- */
- this.initialLabel_ = opt_label || 'Click Me';
- /**
- * The current color.
- * @type {string}
- * @private
- */
- this.color_ = 'red';
- /**
- * Keyboard handler for this object. This object is created once the
- * component's DOM element is known.
- *
- * @type {goog.events.KeyHandler?}
- * @private
- */
- this.kh_ = null;
- };
- goog.inherits(goog.demos.SampleComponent, goog.ui.Component);
- /**
- * Changes the color of the element.
- * @private
- */
- goog.demos.SampleComponent.prototype.changeColor_ = function() {
- if (this.color_ == 'red') {
- this.color_ = 'green';
- } else if (this.color_ == 'green') {
- this.color_ = 'blue';
- } else {
- this.color_ = 'red';
- }
- this.getElement().style.backgroundColor = this.color_;
- };
- /**
- * Creates an initial DOM representation for the component.
- * @override
- */
- goog.demos.SampleComponent.prototype.createDom = function() {
- this.decorateInternal(this.dom_.createElement(goog.dom.TagName.DIV));
- };
- /**
- * Decorates an existing HTML DIV element as a SampleComponent.
- *
- * @param {Element} element The DIV element to decorate. The element's
- * text, if any will be used as the component's label.
- * @override
- */
- goog.demos.SampleComponent.prototype.decorateInternal = function(element) {
- goog.demos.SampleComponent.base(this, 'decorateInternal', element);
- if (!this.getLabelText()) {
- this.setLabelText(this.initialLabel_);
- }
- var elem = this.getElement();
- goog.dom.classlist.add(elem, goog.getCssName('goog-sample-component'));
- elem.style.backgroundColor = this.color_;
- elem.tabIndex = 0;
- this.kh_ = new goog.events.KeyHandler(elem);
- this.getHandler().listen(
- this.kh_, goog.events.KeyHandler.EventType.KEY, this.onKey_);
- };
- /** @override */
- goog.demos.SampleComponent.prototype.disposeInternal = function() {
- goog.demos.SampleComponent.base(this, 'disposeInternal');
- if (this.kh_) {
- this.kh_.dispose();
- }
- };
- /**
- * Called when component's element is known to be in the document.
- * @override
- */
- goog.demos.SampleComponent.prototype.enterDocument = function() {
- goog.demos.SampleComponent.base(this, 'enterDocument');
- this.getHandler().listen(
- this.getElement(), goog.events.EventType.CLICK, this.onDivClicked_);
- };
- /**
- * Gets the current label text.
- *
- * @return {string} The current text set into the label, or empty string if
- * none set.
- */
- goog.demos.SampleComponent.prototype.getLabelText = function() {
- if (!this.getElement()) {
- return '';
- }
- return goog.dom.getTextContent(this.getElement());
- };
- /**
- * Handles DIV element clicks, causing the DIV's colour to change.
- * @param {goog.events.Event} event The click event.
- * @private
- */
- goog.demos.SampleComponent.prototype.onDivClicked_ = function(event) {
- this.changeColor_();
- };
- /**
- * Fired when user presses a key while the DIV has focus. If the user presses
- * space or enter, the color will be changed.
- * @param {goog.events.Event} event The key event.
- * @private
- */
- goog.demos.SampleComponent.prototype.onKey_ = function(event) {
- var keyCodes = goog.events.KeyCodes;
- if (event.keyCode == keyCodes.SPACE || event.keyCode == keyCodes.ENTER) {
- this.changeColor_();
- }
- };
- /**
- * Sets the current label text. Has no effect if component is not rendered.
- *
- * @param {string} text The text to set as the label.
- */
- goog.demos.SampleComponent.prototype.setLabelText = function(text) {
- if (this.getElement()) {
- goog.dom.setTextContent(this.getElement(), text);
- }
- };
|