src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/__init__.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 tvcm.exportTo('tvcm.ui', function() {
   8
   9   /**
  10    * Decorates elements as an instance of a class.
  11    * @param {string|!Element} source The way to find the element(s) to decorate.
  12    *     If this is a string then {@code querySeletorAll} is used to find the
  13    *     elements to decorate.
  14    * @param {!Function} constr The constructor to decorate with. The constr
  15    *     needs to have a {@code decorate} function.
  16    */
  17   function decorate(source, constr) {
  18     var elements;
  19     if (typeof source == 'string')
  20       elements = tvcm.doc.querySelectorAll(source);
  21     else
  22       elements = [source];
  23
  24     for (var i = 0, el; el = elements[i]; i++) {
  25       if (!(el instanceof constr))
  26         constr.decorate(el);
  27     }
  28   }
  29
  30   /**
  31    * Defines a tracing UI component, a function that can be called to construct
  32    * the component.
  33    *
  34    * Tvcm class:
  35    * <pre>
  36    * var List = tvcm.ui.define('list');
  37    * List.prototype = {
  38    *   __proto__: HTMLUListElement.prototype,
  39    *   decorate: function() {
  40    *     ...
  41    *   },
  42    *   ...
  43    * };
  44    * </pre>
  45    *
  46    * Derived class:
  47    * <pre>
  48    * var CustomList = tvcm.ui.define('custom-list', List);
  49    * CustomList.prototype = {
  50    *   __proto__: List.prototype,
  51    *   decorate: function() {
  52    *     ...
  53    *   },
  54    *   ...
  55    * };
  56    * </pre>
  57    *
  58    * @param {string} tagName The tagName of the newly created subtype. If
  59    *     subclassing, this is used for debugging. If not subclassing, then it is
  60    *     the tag name that will be created by the component.
  61    * @param {function=} opt_parentConstructor The parent class for this new
  62    *     element, if subclassing is desired. If provided, the parent class must
  63    *     be also a function created by tvcm.ui.define.
  64    * @return {function(Object=):Element} The newly created component
  65    *     constructor.
  66    */
  67   function define(tagName, opt_parentConstructor) {
  68     if (typeof tagName == 'function') {
  69       throw new Error('Passing functions as tagName is deprecated. Please ' +
  70                       'use (tagName, opt_parentConstructor) to subclass');
  71     }
  72
  73     var tagName = tagName.toLowerCase();
  74     if (opt_parentConstructor && !opt_parentConstructor.tagName)
  75       throw new Error('opt_parentConstructor was not ' +
  76                       'created by tvcm.ui.define');
  77
  78     /**
  79      * Creates a new UI element constructor.
  80      * Arguments passed to the constuctor are provided to the decorate method.
  81      * You will need to call the parent elements decorate method from within
  82      * your decorate method and pass any required parameters.
  83      * @constructor
  84      */
  85     function f() {
  86       if (opt_parentConstructor &&
  87           f.prototype.__proto__ != opt_parentConstructor.prototype) {
  88         throw new Error(
  89             tagName + ' prototye\'s __proto__ field is messed up. ' +
  90             'It MUST be the prototype of ' + opt_parentConstructor.tagName);
  91       }
  92
  93       // Walk up the parent constructors until we can find the type of tag
  94       // to create.
  95       var tag = tagName;
  96       if (opt_parentConstructor) {
  97         var parent = opt_parentConstructor;
  98         while (parent && parent.tagName) {
  99           tag = parent.tagName;
 100           parent = parent.parentConstructor;
 101         }
 102       }
 103
 104       var el = tvcm.doc.createElement(tag);
 105       f.decorate.call(this, el, arguments);
 106       return el;
 107     }
 108
 109     try {
 110       // f.name is not directly writable. So make it writable anyway.
 111       Object.defineProperty(
 112           f, 'name',
 113           {value: tagName, writable: false, configurable: false});
 114     } catch (e) {
 115       // defineProperty throws a TypeError about name already being defined
 116       // although, it also correctly sets the value to tagName.
 117     }
 118
 119     /**
 120      * Decorates an element as a UI element class.
 121      * @param {!Element} el The element to decorate.
 122      */
 123     f.decorate = function(el) {
 124       el.__proto__ = f.prototype;
 125       el.decorate.apply(el, arguments[1]);
 126       el.constructor = f;
 127     };
 128
 129     f.tagName = tagName;
 130     f.parentConstructor = (opt_parentConstructor ? opt_parentConstructor :
 131                                                    undefined);
 132     f.toString = function() {
 133       if (!f.parentConstructor)
 134         return f.tagName;
 135       return f.parentConstructor.toString() + '::' + f.tagName;
 136     };
 137
 138     return f;
 139   }
 140
 141   function elementIsChildOf(el, potentialParent) {
 142     if (el == potentialParent)
 143       return false;
 144
 145     var cur = el;
 146     while (cur.parentNode) {
 147       if (cur == potentialParent)
 148         return true;
 149       cur = cur.parentNode;
 150     }
 151     return false;
 152   };
 153
 154   return {
 155     decorate: decorate,
 156     define: define,
 157     elementIsChildOf: elementIsChildOf
 158   };
 159 });