xooie 1.0.4 → 1.0.5

data/vendor/assets/javascripts/xooie/shared.js

@@ -5,8 +5,10 @@
  * This module exists to abstract common functionality so that it can be maintained in one place.
  * It is not intended to be used independently.
  **/
-define('xooie/shared', ['jquery'], function($){
+define('xooie/shared', ['jquery', 'xooie/helpers'], function ($, helpers) {
+  'use strict';
 
+  var shared;
 /** internal
  * Xooie.shared.propertyDetails(name) -> Object
  * - name (String): The name of the property
@@ -28,7 +30,7 @@ define('xooie/shared', ['jquery'], function($){
  * - **value** (String): The name of the internally stored value for this property.
  * `_name`
  **/
-  function propertyDetails (name) {
+  function propertyDetails(name) {
     return {
       getter: '_get_' + name,
       setter: '_set_' + name,
@@ -48,23 +50,22 @@ define('xooie/shared', ['jquery'], function($){
  * (or [[Xooie.Addon#_definedProps]]).  Adds a method called `name` to the prototype that allows this property to be set or
  * retrieved.
  **/
-  function propertyDispatcher (name, prototype) {
+  function propertyDispatcher(name, prototype) {
     var prop = propertyDetails(name);
 
-    if (typeof prototype[name] !== 'function') {
+    if (!helpers.isFunction(prototype[name])) {
       prototype._definedProps.push(name);
 
-      prototype[name] = function(value) {
-        if (typeof value === 'undefined') {
+      prototype[name] = function (value) {
+        if (helpers.isUndefined(value)) {
           return this[prop.getter]();
-        } else {
-          return this[prop.setter](value);
         }
+        return this[prop.setter](value);
       };
     }
   }
 
-  var shared = {
+  shared = {
 /**
  * Xooie.shared.defineReadOnly(module, name[, defaultValue])
  * - module (Widget | Addon): The module on which this property will be defined.
@@ -74,7 +75,7 @@ define('xooie/shared', ['jquery'], function($){
  * Defines a read-only property that can be accessed either by [[Xooie.Widget#get]]/[[Xooie.Addon#get]] or
  * calling the `{{name}}` method on the instance of the module.
  **/
-    defineReadOnly: function(module, name, defaultValue){
+    defineReadOnly: function (module, name, defaultValue) {
       var prop = propertyDetails(name);
 
       propertyDispatcher(name, module.prototype);
@@ -82,11 +83,11 @@ define('xooie/shared', ['jquery'], function($){
       //The default value is reset each time this method is called;
       module.prototype[prop.defaultValue] = defaultValue;
 
-      if (typeof module.prototype[prop.getter] !== 'function') {
-        module.prototype[prop.getter] = function() {
-          var value = typeof this[prop.value] !== 'undefined' ? this[prop.value] : this[prop.defaultValue];
+      if (!helpers.isFunction(module.prototype[prop.getter])) {
+        module.prototype[prop.getter] = function () {
+          var value = helpers.isUndefined(this[prop.value]) ? this[prop.defaultValue] : this[prop.value];
 
-          if (typeof this[prop.processor] === 'function') {
+          if (helpers.isFunction(this[prop.processor])) {
             return this[prop.processor](value);
           }
 
@@ -102,42 +103,69 @@ define('xooie/shared', ['jquery'], function($){
  * Defines a write-only property that can be set using [[Xooie.Widget#set]]/[[Xooie.Addon#set]] or by passing
  * a value to the `{{name}}` method on the instance of the module.
  **/
-    defineWriteOnly: function(module, name){
+    defineWriteOnly: function (module, name) {
       var prop = propertyDetails(name);
 
       propertyDispatcher(name, module.prototype);
 
-      if (typeof module.prototype[prop.setter] !== 'function') {
-        module.prototype[prop.setter] = function(value){
-          if (typeof this[prop.validator] !== 'function' || this[prop.validator](name)) {
+      if (!helpers.isFunction(module.prototype[prop.setter])) {
+        module.prototype[prop.setter] = function (value) {
+          if (!helpers.isFunction(this[prop.validator]) || this[prop.validator](name)) {
             this[prop.value] = value;
           }
         };
       }
     },
 /**
- * Xooie.shared.extend(constr, _super) -> Widget | Addon
+ * Xooie.shared.create(constr, post_constr, _super) -> Widget | Addon
  * - constr (Function): The constructor for the new [[Xooie.Widget]] or [[Xooie.Addon]] class.
- * - _super (Widget | Addon): The module which is to be extended
+ * - post_constr (Function): The optional constructor method to run after all constructors have run.
+ * - _super (Widget | Addon): The optional module which is to be extended
  *
  * Creates a new Xooie widget/addon class that inherits all properties from the extended class.
  * Constructors for the class are called in order from the top-level constructor to the
- * base constructor.
+ * base constructor followed by the post constructors from the base to top-level post constructor.
  **/
-    extend: function(constr, module){
-      var newModule = (function(){
+
+    create: function (constr, post_constr, _super) {
+      var newModule = (function () {
         return function Child() {
-          module.apply(this, arguments);
-          constr.apply(this, arguments);
-          this._extendCount -= 1;
+          var i, result;
+
+          for (i = 0; i < Child._constructors.length; i += 1) {
+            result = Child._constructors[i].apply(this, arguments);
+
+            if (!helpers.isUndefined(result)) {
+              return result;
+            }
+          }
+
+          for (i = 0; i < Child._postConstructors.length; i += 1) {
+            Child._postConstructors[i].apply(this, arguments);
+          }
         };
-      })();
-      
+      }());
+
+      if (!helpers.isUndefined(_super)) {
+        $.extend(true, newModule, _super);
+        $.extend(true, newModule.prototype, _super.prototype);
+      }
+
+      if (helpers.isUndefined(newModule._constructors)) {
+        newModule._constructors = [];
+      }
 
-      $.extend(true, newModule, module);
-      $.extend(true, newModule.prototype, module.prototype);
+      if (constr) {
+        newModule._constructors.push(constr);
+      }
 
-      newModule.prototype._extendCount = newModule.prototype._extendCount === null ? 1 : newModule.prototype._extendCount += 1;
+      if (helpers.isUndefined(newModule._postConstructors)) {
+        newModule._postConstructors = [];
+      }
+
+      if (post_constr) {
+        newModule._postConstructors.unshift(post_constr);
+      }
 
       return newModule;
     },
@@ -148,7 +176,7 @@ define('xooie/shared', ['jquery'], function($){
  *
  * Retrieves the value of the property.  Returns `undefined` if the property has not been defined.
  **/
-    get: function(instance, name){
+    get: function (instance, name) {
       var prop = propertyDetails(name);
 
       return instance[prop.getter]();
@@ -161,10 +189,10 @@ define('xooie/shared', ['jquery'], function($){
  *
  * Sets a property, so long as that property has been defined.
  **/
-    set: function(instance, name, value){
+    set: function (instance, name, value) {
       var prop = propertyDetails(name);
 
-      if (typeof instance[prop.setter] === 'function') {
+      if (helpers.isFunction(instance[prop.setter])) {
         instance[prop.setter](value);
       }
     },
@@ -176,12 +204,12 @@ define('xooie/shared', ['jquery'], function($){
  *
  * Sets the properties to the values specified, as long as the property has been defined
  **/
-    setData: function(instance, data) {
+    setData: function (instance, data) {
       var i, prop;
 
-      for (i = 0; i < instance._definedProps.length; i++) {
+      for (i = 0; i < instance._definedProps.length; i += 1) {
         prop = instance._definedProps[i];
-        if (typeof data[prop] !== 'undefined') {
+        if (!helpers.isUndefined(data[prop])) {
           instance.set(prop, data[prop]);
         }
       }

data/vendor/assets/javascripts/xooie/stylesheet.js

@@ -14,120 +14,125 @@
 *   limitations under the License.
 */
 
-define('xooie/stylesheet', ['jquery', 'xooie/helpers'], function($, helpers) {
-    
+define('xooie/stylesheet', ['jquery', 'xooie/helpers'], function ($, helpers) {
+  'use strict';
 
-    function nameCheck (index, name) {
-        return document.styleSheets[index].ownerNode.getAttribute('id') === name;
+  function nameCheck(index, name) {
+    var s = document.styleSheets[index];
+
+    if (!helpers.isUndefined(s.ownerNode)) {
+      return s.ownerNode.getAttribute('id') === name;
     }
+    return s.id === name;
+  }
 
-    var Stylesheet = function(name){
-        var title;
+  var Stylesheet = function (name) {
+    //check to see if a stylesheet already exists with this name
+    this.element = $('style[id=' + name + ']');
 
-        //check to see if a stylesheet already exists with this name
-        this.element = $('style[id=' + name + ']');
+    if (this.element.length <= 0) {
+      //if it does, use it, else create a new one
+      this.element = $(['<style id="' + name + '">',
+                          '/* This is a dynamically generated stylesheet: ' + name + ' */',
+                      '</style>'].join(''));
 
-        if (this.element.length <= 0) {
-            //if it does, use it, else create a new one
-            this.element = $(['<style id="' + name + '">',
-                                '/* This is a dynamically generated stylesheet: ' + name + ' */',
-                            '</style>'].join(''));
+      this.element.appendTo($('head'));
+    }
 
-            this.element.appendTo($('head'));
-        }
+    this._name = name;
+  };
 
-        this._name = name;
-    };
+  Stylesheet.prototype.get = function () {
+    return document.styleSheets[this.getIndex()];
+  };
 
-    Stylesheet.prototype.get = function(){
-        return document.styleSheets[this.getIndex()];
-    };
+  Stylesheet.prototype.getRule = function (ruleName) {
+    var i, rules;
 
-    Stylesheet.prototype.getRule = function(ruleName){
-        ruleName = ruleName.toLowerCase();
+    ruleName = ruleName.toLowerCase();
 
-        var i, rules;
+    //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
+    rules = this.get().cssRules || this.get().rules;
 
-        //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
-        rules = this.get().cssRules || this.get().rules;
+    for (i = 0; i < rules.length; i += 1) {
+      if (rules[i].selectorText.toLowerCase() === ruleName) {
+        return rules[i];
+      }
+    }
 
-        for (i = 0; i < rules.length; i += 1){
-            if (rules[i].selectorText.toLowerCase() === ruleName) {
-                return rules[i];
-            }
-        }
+    return false;
+  };
 
-        return false;
-    };
-
-    Stylesheet.prototype.addRule = function(ruleName, properties){
-        var rule = this.getRule(ruleName), index, prop, propString = '';
-
-        if (!rule){
-            for (prop in properties) {
-                propString += prop + ': ' + properties[prop] + ';';
-            }
-
-            if (this.get().insertRule) {
-                //This is the W3C-preferred method
-                index = this.get().cssRules.length;
-                this.get().insertRule(ruleName + ' {' + propString + '}', index);
-                rule = this.get().cssRules[index];
-            } else {
-                //support for IE < 9
-                index = this.get().rules.length;
-                this.get().addRule(ruleName, propString, index);
-                rule = this.get().rules[index];
-            }
-        }
+  Stylesheet.prototype.addRule = function (ruleName, properties) {
+    var rule = this.getRule(ruleName), index, prop, propString = '';
 
-        return rule;
-    };
+    if (!rule) {
+      for (prop in properties) {
+        if (properties.hasOwnProperty(prop)) {
+          propString += prop + ': ' + properties[prop] + ';';
+        }
+      }
+
+      if (this.get().insertRule) {
+        //This is the W3C-preferred method
+        index = this.get().cssRules.length;
+        this.get().insertRule(ruleName + ' {' + propString + '}', index);
+        rule = this.get().cssRules[index];
+      } else {
+        //support for IE < 9
+        index = this.get().rules.length;
+        this.get().addRule(ruleName, propString, index);
+        rule = this.get().rules[index];
+      }
+    }
 
-    Stylesheet.prototype.deleteRule = function(ruleName){
-        ruleName = ruleName.toLowerCase();
+    return rule;
+  };
 
-        var i, rules;
+  Stylesheet.prototype.deleteRule = function (ruleName) {
+    var i, rules;
 
-        //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
-        rules = this.get().cssRules || this.get().rules;
+    ruleName = ruleName.toLowerCase();
 
-        for (i = 0; i < rules.length; i += 1){
-            if (rules[i].selectorText.toLowerCase() === ruleName) {
-                if (this.get().deleteRule) {
-                    //this is the W3C-preferred method
-                    this.get().deleteRule(i);
-                } else {
-                    //support for IE < 9
-                    this.get().removeRule(i);
-                }
+    //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
+    rules = this.get().cssRules || this.get().rules;
 
-                return true;
-            }
+    for (i = 0; i < rules.length; i += 1) {
+      if (rules[i].selectorText.toLowerCase() === ruleName) {
+        if (this.get().deleteRule) {
+          //this is the W3C-preferred method
+          this.get().deleteRule(i);
+        } else {
+          //support for IE < 9
+          this.get().removeRule(i);
         }
 
-        return false;
-    };
+        return true;
+      }
+    }
 
-    Stylesheet.prototype.getIndex = function() {
-        var i;
+    return false;
+  };
 
-        if (helpers.isUndefined(document.styleSheets)) {
-            return;
-        }
+  Stylesheet.prototype.getIndex = function () {
+    var i;
 
-        if (!helpers.isUndefined(this._index) && nameCheck(this._index, this._name)) {
-            return this._index;
-        } else {
-            for (i = 0; i < document.styleSheets.length; i += 1){
-                if (nameCheck(i, this._name)) {
-                    this._index = i;
-                    return i;
-                }
-            }
-        }
-    };
+    if (helpers.isUndefined(document.styleSheets)) {
+      return;
+    }
+
+    if (!helpers.isUndefined(this._index) && nameCheck(this._index, this._name)) {
+      return this._index;
+    }
+
+    for (i = 0; i < document.styleSheets.length; i += 1) {
+      if (nameCheck(i, this._name)) {
+        this._index = i;
+        return i;
+      }
+    }
+  };
 
-    return Stylesheet;
+  return Stylesheet;
 
 });

data/vendor/assets/javascripts/xooie/tab.js

@@ -0,0 +1,125 @@
+/*
+*   Copyright 2012 Comcast
+*
+*   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.
+*/
+
+define('xooie/tab', ['jquery', 'xooie/base'], function($, Base) {
+
+    var Tab = Base('tab', function() {
+        var self = this;
+
+        this.createTabs();
+    });
+
+    Tab.setDefaultOptions({
+        panelSelector: '[data-role="tab-panel"]',
+        stripSelector: '[data-role="tab-strip"]',
+        controlSelector: '[data-role="tab-selector"]',
+        controlButtonSelector: '[data-tab-control]',
+        tabTemplateSelector: '[data-role="tab-template"]',
+
+        activeTabClass: 'is-tab-active'
+    });
+
+    $.extend(Tab.prototype, {
+        switchToTab: function(index, key) {
+            if (index !== this._currentTab && index >= 0 && index < this.getPanel().length) {
+                var e = $.Event('tabChange');
+                e.fromTab = this._currentTab;
+                e.toTab = index;
+                e.which = key;
+
+                this.getPanel(this._currentTab).removeClass(this.options.activeTabClass);
+                this.getTab(this._currentTab).removeClass(this.options.activeTabClass);
+
+                this.getPanel(index).addClass(this.options.activeTabClass);
+                this.getTab(index).addClass(this.options.activeTabClass);
+
+                this._currentTab = index;
+
+                this.root.trigger(e);
+            }
+        },
+
+        getPanel: function(index) {
+            var panels = this.root.find(this.options.panelSelector);
+
+            if (typeof index === 'undefined') {
+                return panels;
+            } else {
+                return panels.eq(index);
+            }
+        },
+
+        getTab: function(index) {
+            var tabs = this.root.find(this.options.controlSelector);
+            if (typeof index === 'undefined') {
+                return tabs;
+            } else {
+                return tabs.eq(index);
+            }
+        },
+
+        createTabs: function() {
+            var tabStrip = this.root.find(this.options.stripSelector),
+                template = this.root.find(this.options.tabTemplateSelector),
+                panels = this.getPanel(),
+                i, element, control,
+                activeTab = 0, handler, self = this;
+
+            if (template.length === 0){
+                return;
+            }
+
+            this.getTab().remove();
+
+            handler = function(event) {
+                var keys = [13,32];
+
+                if ([1,13,32].indexOf(event.which) !== -1){
+                    self.switchToTab($(this).data('tab-index'), event.which);
+                }
+            };
+
+            for (i = 0; i < panels.length; i++) {
+                if(tabStrip.length > 0 && template.length > 0) {
+                    element = this.render(template, {
+                        panel_label: panels.eq(i).attr('data-tab-label'),
+                        panel_index: i,
+                        panel_has_next: (i < panels.length - 1)
+                    });
+
+                    if (element.is(this.options.controlButtonSelector)) {
+                        control = element;
+                    } else {
+                        control = element.find(this.options.controlButtonSelector);
+                    }
+
+                    control.data('tab-index', i)
+                           .on('mouseup keyup', handler);
+
+                    tabStrip.append(element);
+                }
+
+                if (panels.eq(i).hasClass(this.options.activeTabClass)) {
+                    activeTab = i;
+                }
+            }
+
+            this.switchToTab(activeTab);
+        }
+    });
+
+    return Tab;
+});

data/vendor/assets/javascripts/xooie/widgets/accordion.js

@@ -1,6 +1,7 @@
-define('xooie/widgets/accordion', ['jquery', 'xooie/widgets/tab'], function($, Tab){
-  var Accordion = Tab.extend(function() {
-  });
+define('xooie/widgets/accordion', ['xooie/widgets/tab'], function (Tab) {
+  'use strict';
+
+  var Accordion = Tab.extend();
 
   Accordion.define('namespace', 'accordion');
 
@@ -10,7 +11,7 @@ define('xooie/widgets/accordion', ['jquery', 'xooie/widgets/tab'], function($, T
  *
  * Same as [[Xooie.Tab#_process_role_tablist]] and also adds the [`aria-multiselectable="true"`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-multiselectable) attribute.
  **/
-  Accordion.prototype._process_role_tablist = function(tablist) {
+  Accordion.prototype._process_role_tablist = function (tablist) {
     Tab.prototype._process_role_tablist.apply(this, arguments);
 
     tablist.attr('aria-multiselectable', true);
@@ -18,14 +19,13 @@ define('xooie/widgets/accordion', ['jquery', 'xooie/widgets/tab'], function($, T
     return tablist;
   };
 
-  Accordion.prototype.selectTabs = function(event, selectedTab) {
+  Accordion.prototype.selectTabs = function (selectedTab) {
     var activeTabs = this.getActiveTabs();
 
     if (activeTabs.is(selectedTab)) {
       return activeTabs.not(selectedTab);
-    } else {
-      return activeTabs.add(selectedTab);
     }
+    return activeTabs.add(selectedTab);
   };
 
   return Accordion;