features-extras.wave.wave.ui.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of shindig-extras Show documentation
Provides extra, deprecated or extended functionality. The items here have unstable APIs and could change at any time.
There is a newer version: 3.0.0-beta4
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements. See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership. The ASF licenses this file
 * to you 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 UI extension to the basic wave gadget API.
 *
 * wave.ui allows gadgets to get the look and feel of other
 * wave elements.
 *
 * Example: turn a link into a wave button
 *  *   Text
 *
 *   
 * 
 */

if (typeof wave == "undefined") {
  wave = {};
}

if (typeof wave.ui == "undefined") {
/**
 * @namespace This namespace defines methods for creating a wave
 * look & feel inside a gadget.
 */
  wave.ui = {};
}

wave.ui.BASE = 'http://wave-api.appspot.com/public/';

wave.ui.cssLoaded = false;

/**
 * Loads a CSS with Wave-like styles into the gadget, including font
 * properties, link properties, and the properties for the wave-styled
 * button, dialog, and frame.
 *
 * @export
 */
wave.ui.loadCss = function() {
  if (wave.ui.cssLoaded) {
    return;
  }
  wave.ui.cssLoaded = true;
  var fileref = document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", wave.ui.BASE + "wave.ui.css");
  document.getElementsByTagName("head")[0].appendChild(fileref);
};

/**
 * Converts the passed in target into a wave-styled button.
 *
 * @param {Element} target element to turn into a button. The target should be
 * an anchor element.
 * @export
 */
wave.ui.makeButton = function(target) {
  wave.ui.loadCss();
  target.innerHTML = '' + target.innerHTML + '';
  target.className += ' wavebutton';
};

/**
 * Converts the passed in target into a wave-styled dialog.
 *
 * For now it only creates a centered box. The close button in the upper right
 * corner will be default do nothing.
 *
 * @param {Element} target element to turn into a dialog. The target should be
 * a div.
 * @param {string} title
 * @export
 */
wave.ui.makeDialog = function(target, title, onclick) {
  wave.ui.loadCss();

  var body = target.innerHTML;
  target.innerHTML = '';

  var headDiv = document.createElement('div');
  headDiv.className = 'wavedialoghead';

  var span = document.createElement('span');

  var closeDiv = document.createElement('div');
  closeDiv.className = 'wavedialogclose';
  function closeFunction() {
    target.style.display = 'none';
  }
  closeDiv.onclick = onclick || closeFunction;

  span.appendChild(closeDiv);
  span.appendChild(document.createTextNode(title));

  headDiv.appendChild(span);
  target.appendChild(headDiv);

  var bodyDiv = document.createElement('div');
  bodyDiv.className = 'wavedialogbody';
  bodyDiv.innerHTML = body;
  target.appendChild(bodyDiv);
  target.className += ' wavedialog';
};

/**
 * Converts the passed in target into a wave-styled frame.
 *
 * @param {Element} target element to turn into a frame. The target should be
 * a div.
 * @export
 */
wave.ui.makeFrame = function(target) {
  wave.ui.loadCss();
  target.innerHTML = ' ' +
      '' + target.innerHTML + '';
  target.className += ' wavebox';
};