xooie 0.1.7 → 1.0.0

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

@@ -0,0 +1,216 @@
+define('xooie/keyboard_navigation', ['jquery', 'xooie/helpers'], function($, helpers){
+  var selectors, keyboardNavigation, keybindings;
+
+
+  keybindings = {
+    37: function(event) {
+      moveFocus($(event.target), -1);
+
+      event.preventDefault();
+    },
+
+    38: function() {
+
+    },
+
+    39: function(event) {
+      moveFocus($(event.target), 1);
+
+      event.preventDefault();
+    },
+
+    40: function() {
+
+    }
+  };
+
+/** internal
+ * Xooie.Widget._moveFocus(direction)
+ * - direction (Integer): Determines whether or not to increment or decrement the index.  Can be 1 or -1.
+ *
+ * Moves focus to either the next or previous focusable item, if available.  Focus order follows the
+ * tab order of the page (items without tabindex or tabindex=0 will be focused before tabindex=1).  Focusable
+ * items with a tabindex=-1 will not be focused.
+ **/
+  function moveFocus(current, direction) {
+    // TODO: Clean this up. It's a mess
+    // TODO: Write tests.
+    // TODO: Add detection of new contexts
+    // TODO: Add recollection of last focused item
+
+    var selector, selectors, tabindex, index, target;
+
+    var tabIndicies= [];
+
+    selectors = {
+      unindexed: ['[data-widget-type] a[href]:visible:not(:disabled):not([tabindex])',
+        '[data-widget-type] button:visible:not(:disabled):not([tabindex])',
+        '[data-widget-type] input:visible:not(:disabled):not([tabindex])',
+        '[data-widget-type] select:visible:not(:disabled):not([tabindex])',
+        '[data-widget-type] textarea:visible:not(:disabled):not([tabindex])',
+        '[data-widget-type] [tabindex=0]:visible:not(:disabled)'].join(','),
+      indexed: function(t) {
+        if (t > 0) {
+          return '[data-widget-type] [tabindex=' + t + ']:visible:not(:disabled)';
+        }
+      },
+      allIndexed: '[data-widget-type] [tabindex]:visible:not(:disabled)'
+    };
+
+    // jquery select the current item
+    current = $(current);
+
+    // we may not be focused on anything.  If that's the case, focus on the first focusable item
+    if (!current.is(selectors.unindexed) && !current.is(selectors.allIndexed)) {
+      // get the lowest tabindex
+      $(selectors.allIndexed).each(function(){
+        var i = helpers.toInt($(this).attr('tabindex'));
+
+        if (tabIndicies.indexOf(i) === -1 && i > 0) {
+          tabIndicies.push(i);
+        }
+      });
+
+      if (tabIndicies.length > 0) {
+        tabIndicies.sort(function(a,b) { return a-b; });
+      
+        target = $(selectors.indexed(tabIndicies[0])).first();
+      } else {
+        target = $(selectors.unindexed).first();
+      }
+
+      if (target.length > 0) {
+        target.focus();
+
+        return;
+      }
+    }
+
+    // get the current tabindex
+    tabindex = helpers.toInt(current.attr('tabindex'));
+
+    // check if tabindex is a number and not 0...
+    if (!tabindex) {
+      // if it is not, assume we're on an element that has no tab index and select other such elements
+      selector = selectors.unindexed;
+    } else {
+      // otherwise, select all items that are of the same tabindex
+      selector = selectors.indexed(tabindex);
+    }
+
+    // find the index of the current item
+    index = current.index(selector);
+
+    if (index + direction >= 0) {
+      // get the next/previous item
+      target = $(selector).eq(index + direction);
+
+      // Check to see if we have a valid target...
+      if (target.length > 0) {
+        // if it is, focus the target and return
+        target.focus();
+
+        return;
+      }
+    }
+
+    // if it is not, then we have several possibilities:
+    
+    // If the direction is 1 and tabindex is not a number or 0, then we are at the end of the tab order.  Do nothing.
+    if (direction === 1 && !tabindex) {
+      return;
+    // If the direction is 1 and the tabindex is a number, then we need to check for the presence of the next tabindex
+    } else if (direction === 1 && !isNaN(tabindex)) {
+      // Loop through all elements with a tab index
+      $(selectors.allIndexed).each(function() {
+        // Build a collection of all tab indicies greater than the current tab index:
+        var i = helpers.toInt($(this).attr('tabindex'));
+
+        if (i > tabindex && tabIndicies.indexOf(i) === -1 && i > 0) {
+          tabIndicies.push(i);
+        }
+      });
+
+      // If there are tab indicies that are greater than the current one...
+      if (tabIndicies.length > 0) {
+        // sort our tab indicies ascending
+        tabIndicies.sort(function(a, b) { return a-b; });
+
+        // we now have our new tab index
+        tabindex = tabIndicies[0];
+
+        // Get the first item of the new tab index
+        target = $(selectors.indexed(tabindex)).first();
+      } else {
+        // Otherwise, select the first unindexed item
+        target = $(selectors.unindexed).first();
+      }
+      
+    } else if (direction === -1 && isNaN(tabindex))  {
+      // In this case, we are at the first non-indexed focusable item.  We need to find the last indexed item.
+      // Loop through all elements with a tab index
+      $(selectors.allIndexed).each(function() {
+        var i = helpers.toInt($(this).attr('tabindex'));
+        // Build a collection of all tab indicies
+        if (tabIndicies.indexOf(i) === -1) {
+          tabIndicies.push(i);
+        }
+      });
+
+      if (tabIndicies.length > 0) {
+        // sort our tab indicies descending
+        tabIndicies.sort(function(a, b) { return b-a; });
+
+        // we now have our new tab index
+        tabindex = tabIndicies[0];
+
+        // Select the last indexed item
+        target = $(selectors.indexed(tabindex)).last();
+      }
+    } else if (direction === -1 && !isNaN(tabindex) && tabindex > 0) {
+      $(selectors.allIndexed).each(function(){
+        var i = helpers.toInt($(this).attr('tabindex'));
+
+        if (i < tabindex && tabIndicies.indexOf(i) === -1 && i > 0) {
+          tabIndicies.push(i);
+        }
+      });
+
+      if (tabIndicies.length > 0) {
+        // sort our tab indicies asceding
+        tabIndicies.sort(function(a, b) { return a-b; });
+
+        // we now have our new tab index
+        tabindex = tabIndicies[0];
+
+        // Select the last indexed item
+        target = $(selectors.indexed(tabindex)).last();
+      }
+    }
+
+    if (!helpers.isUndefined(target)) {
+      // assuming we have a target, focus it.
+      target.focus();
+    }
+    
+  }
+
+  var instantiated;
+
+  keyboardNavigation = function(){
+    if (instantiated) {
+      return instantiated;
+    }
+
+    $(document).on('keyup', function(event) {
+      if (helpers.isFunction(keybindings[event.which])) {
+        keybindings[event.which](event);
+      }
+    });
+
+    instantiated = this;
+  };
+
+  return keyboardNavigation;
+
+});

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

@@ -0,0 +1,175 @@
+/**
+ * class Xooie.shared
+ *
+ * A module that contains functionality that is used both by [[Xooie.Widget]] and [[Xooie.Addon]]
+ * 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($){
+
+/** internal
+ * Xooie.shared.propertyDetails(name) -> Object
+ * - name (String): The name of the property
+ *
+ * Generates a hash of attributes that will be used in setting and getting the property.
+ *
+ * ##### Return values
+ *
+ * - **getter** (String): The name of the internal getter method for this property.
+ * `_get_name`
+ * - **setter** (String): The name of the internal setter method for this property.
+ * `_set_name`
+ * - **processor** (String): The name of the internal processor method for this property.
+ * `_process_name`
+ * - **validator** (String): The name of the internal validator method for this property.
+ * `_validate_name`
+ * **default** (String): The name of the internally stored default value for this property.
+ * `_default_name`
+ * - **value** (String): The name of the internally stored value for this property.
+ * `_name`
+ **/
+  function propertyDetails (name) {
+    return {
+      getter: '_get_' + name,
+      setter: '_set_' + name,
+      processor: '_process_' + name,
+      validator: '_validate_' + name,
+      defaultValue: '_default_value_' + name,
+      value: '_' + name
+    };
+  }
+
+/** internal
+ * Xooie.shared.propertyDispatcher(name, prototype)
+ * - name (String): The name of the property
+ * - prototype (Object): The prototype of the [[Xooie.Widget]] or [[Xooie.Addon]] for which the property is being set.
+ *
+ * Gets the [[Xooie.shared.propertyDetails]] for the property, adds the `name` to the list of [[Xooie.Widget#_definedProps]]
+ * (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) {
+    var prop = propertyDetails(name);
+
+    if (typeof prototype[name] !== 'function') {
+      prototype._definedProps.push(name);
+
+      prototype[name] = function(value) {
+        if (typeof value === 'undefined') {
+          return this[prop.getter]();
+        } else {
+          return this[prop.setter](value);
+        }
+      };
+    }
+  }
+
+  var shared = {
+/**
+ * Xooie.shared.defineReadOnly(module, name[, defaultValue])
+ * - module (Widget | Addon): The module on which this property will be defined.
+ * - name (String): The name of the property to define as a read-only property.
+ * - defaultValue (Object): An optional default value.
+ *
+ * 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){
+      var prop = propertyDetails(name);
+
+      propertyDispatcher(name, module.prototype);
+
+      //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 (typeof this[prop.processor] === 'function') {
+            return this[prop.processor](value);
+          }
+
+          return value;
+        };
+      }
+    },
+/**
+ * Xooie.shared.defineWriteOnly(module, name)
+ * - module (Widget | Addon): The module on which this property will be defined.
+ * - name (String): The name of the property to define as a write-only property
+ *
+ * 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){
+      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)) {
+            this[prop.value] = value;
+          }
+        };
+      }
+    },
+/**
+ * Xooie.shared.extend(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
+ *
+ * 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.
+ **/
+    extend: function(constr, module){
+      var newModule = (function(){
+        return function Child() {
+          module.apply(this, arguments);
+          constr.apply(this, arguments);
+          this._extendCount -= 1;
+        };
+      })();
+      
+
+      $.extend(true, newModule, module);
+      $.extend(true, newModule.prototype, module.prototype);
+
+      newModule.prototype._extendCount = newModule.prototype._extendCount === null ? 1 : newModule.prototype._extendCount += 1;
+
+      return newModule;
+    },
+/**
+ * Xooie.shared.get(instance, name) -> object
+ * - instance (Widget | Addon): The instance from which the property is to be retrieved.
+ * - name (String): The name of the property to be retrieved.
+ *
+ * Retrieves the value of the property.  Returns `undefined` if the property has not been defined.
+ **/
+    get: function(instance, name){
+      var prop = propertyDetails(name);
+
+      return instance[prop.getter]();
+    },
+/**
+ * Xooie.shared.set(instance, name, value)
+ * - instance (Widget | Addon): The instance where the property is being set.
+ * - name (String): The name of the property to be set.
+ * - value: The value of the property to be set.
+ *
+ * Sets a property, so long as that property has been defined.
+ **/
+    set: function(instance, name, value){
+      var prop = propertyDetails(name);
+
+      if (typeof instance[prop.setter] === 'function') {
+        instance[prop.setter](value);
+      }
+    }
+
+  };
+
+  return shared;
+});

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

@@ -1,5 +1,5 @@
 /*
-*   Copyright 2013 Comcast
+*   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.
@@ -14,102 +14,101 @@
 *   limitations under the License.
 */
 
-define('xooie/stylesheet', ['jquery'], function ($) {
-  'use strict';
+define('xooie/stylesheet', ['jquery'], function($) {
+    var Stylesheet = function(name){
+        var i, 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._name = name;
-  };
-
-  Stylesheet.prototype.get = function () {
-    return this.element[0].sheet || this.element[0].styleSheet;
-  };
-
-  Stylesheet.prototype.getRule = function (ruleName) {
-    var i, rules;
+            this.element.appendTo($('head'));
+        }
 
-    ruleName = ruleName.toLowerCase();
+        if (document.styleSheets) {
+            for (i = 0; i < document.styleSheets.length; i += 1){
+                if (document.styleSheets[i].ownerNode.getAttribute('id') === name) {
+                    this._index = i;
+                }
+            }
+        }
+    };
 
-    //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
-    rules = this.get().cssRules || this.get().rules;
+    Stylesheet.prototype.get = function(){
+        return document.styleSheets[this._index];
+    };
 
-    for (i = 0; i < rules.length; i += 1) {
-      if (rules[i].selectorText.toLowerCase() === ruleName) {
-        return rules[i];
-      }
-    }
+    Stylesheet.prototype.getRule = function(ruleName){
+        ruleName = ruleName.toLowerCase();
 
-    return false;
-  };
+        var i, rules;
 
-  Stylesheet.prototype.addRule = function (ruleName, properties) {
-    var rule = this.getRule(ruleName), index, prop, propString = '', ruleNameArray, i;
+        //Check if this uses the IE format (styleSheet.rules) or the Mozilla/Webkit format
+        rules = this.get().cssRules || this.get().rules;
 
-    if (!rule) {
-      for (prop in properties) {
-        if (properties.hasOwnProperty(prop)) {
-          propString += prop + ': ' + properties[prop] + ';';
+        for (i = 0; i < rules.length; i += 1){
+            if (rules[i].selectorText.toLowerCase() === ruleName) {
+                return rules[i];
+            }
         }
-      }
-
-      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;
-        ruleNameArray = ruleName.split(',');
-        // READ: http://msdn.microsoft.com/en-us/library/ie/aa358796%28v=vs.85%29.aspx
-        for (i = 0; i < ruleNameArray.length; i += 1) {
-          this.get().addRule(ruleNameArray[i], propString, index + i);
+
+        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];
+            }
         }
 
-        rule = this.get().rules[index];
-      }
-    }
+        return rule;
+    };
 
-    return rule;
-  };
+    Stylesheet.prototype.deleteRule = function(ruleName){
+        ruleName = ruleName.toLowerCase();
 
-  Stylesheet.prototype.deleteRule = function (ruleName) {
-    var i, rules;
+        var i, rules;
 
-    ruleName = ruleName.toLowerCase();
+        //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) {
+                if (this.get().deleteRule) {
+                    //this is the W3C-preferred method
+                    this.get().deleteRule(i);
+                } else {
+                    //support for IE < 9
+                    this.get().removeRule(i);
+                }
 
-    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 true;
+            }
         }
 
-        return true;
-      }
-    }
-
-    return false;
-  };
+        return false;
+    };
 
-  return Stylesheet;
+    return Stylesheet;
 
 });

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

@@ -0,0 +1,52 @@
+define('xooie/widgets/accordion', ['jquery', 'xooie/widgets/tab'], function($, Tab){
+  var Accordion = Tab.extend(function() {
+    var self = this;
+
+    this._tabEvents.clear('keyup');
+    this._tabEvents.clear('mouseup');
+
+    this._tabEvents.add({
+      keyup: function(event){
+        var activeTab = self.getActiveTabs();
+
+        if ([13,32].indexOf(event.which) !== -1){
+          if (activeTab.is(this)) {
+            self.deactivateTab($(this));
+          } else {
+            self.activateTab($(this));
+          }
+
+          event.preventDefault();
+        }
+      },
+
+      mouseup: function(){
+        var activeTab = self.getActiveTabs();
+
+        if (activeTab.is(this)) {
+          self.deactivateTab($(this));
+        } else {
+          self.activateTab($(this));
+        }
+      }
+    });
+  });
+
+  Accordion.define('namespace', 'accordion');
+
+/** internal
+ * Xooie.Accordion#_process_role_tablist(tablist) -> Element
+ * - tablist (Element): A jQuery-selected collection of [[Xooie.Tab#tablists]]
+ *
+ * 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) {
+    Tab.prototype._process_role_tablist.apply(this, arguments);
+
+    tablist.attr('aria-multiselectable', true);
+
+    return tablist;
+  };
+
+  return Accordion;
+});