goog.demos.samplecomponent.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of google-closure-library
The Google Closure Library is a collection of JavaScript code designed for use with the Google Closure JavaScript Compiler. This non-official distribution was prepared by the ClojureScript team at http://clojure.org/
There is a newer version: 0.0-20230227-c7c0a541
Show newest version
// 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);
  }
};