xooie 0.0.17.pre → 0.1.0

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZjU5YmQyYzFiMWZjYjExMmE1MTU2YmE2MzJiYTYxMzRmZDBkNjdjYQ==
+  data.tar.gz: !binary |-
+    MTc0ZGNiYTFlMThmMjkzMTQ0YzZiNjBjYjk4YjQwMzJmNGJkZmZkMA==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    M2M2Yjg2OWVlYjYxOTRiZDhjMzdmMGFlMmRhYjAzNzY3ZDYzNzA0MzYxMDA0
+    YmNjYWMyOWQ1MDUyZDc4M2RiOGFhNzYyZWZiMzY2Njg5YTMxNzg3OTMxYjVl
+    YWQ5MjcwMTNhYTI5MGE4MmViNDUxOWFiZDk0NWM5Y2ZjNzFiM2Y=
+  data.tar.gz: !binary |-
+    NmJkYTZiMWIxMWQzNDYwZDUwNTBlOGYzNWNkY2VjMjgzYjNkMzQwNjY0NmM2
+    YjYxN2U3NjljNDE0NTlhOTRiNjdmMWEyNGUwYjhjMGYzOTcwNzFiNzMzYzMy
+    Mjg1OTY4NzVkM2YyNWEzNjcyNmM1MWNlODQwNjlmN2FhOTI4ZmQ=

data/README.md

@@ -30,6 +30,12 @@ Xooie will work by just loading xooie.js on your page; all other files will be l
 
 Instantiation happens automatically when the page is loaded. All HTML elements tagged with the "data-widget-type" attribute will offer the associated Xooie widget functionality.
 
+1.x vs 0.1.x:
+---
+v1.0 is our official release of Xooie. All new feature development & bug fixes occur on [master](https://github.com/Comcast/Xooie) & are released from a release_1_x branch (e.g. [release_1_1](https://github.com/Comcast/Xooie/tree/release_1_1)). So if you're just getting started with Xooie, be sure to grab the latest 1.x version.
+
+If you were already using a pre-1.0 release of Xooie, there is a [release_0_1_x branch](https://github.com/Comcast/Xooie/tree/release_0_1_x) that is updated with bug fixes only. Any 0.1.x release is from the pre-1.0 Xooie development work. 
+
 Documentation:
 ---
 Carousel

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

@@ -45,7 +45,7 @@ define('xooie/carousel', ['jquery', 'xooie/base'], function($, Base) {
         this.positionUpdaters = {
 
             "item": function(quantity, direction) {
-                var items = self.content.children(),
+                var items = self.content.children(':visible'),
                     bias, offset,
                     position = self.wrapper.scrollLeft(),
                     i;
@@ -73,7 +73,7 @@ define('xooie/carousel', ['jquery', 'xooie/base'], function($, Base) {
 
             "px": function(quantity, direction) {
                 var position;
-                
+
                 if (typeof direction === 'undefined') {
                     position = 0;
                     direction = 1;
@@ -199,7 +199,7 @@ define('xooie/carousel', ['jquery', 'xooie/base'], function($, Base) {
         //It is possible that images may load after the carousel has instantiated/
         //Also, this can be used for lazy-loading images
         //TODO: This can be problematic, since it is triggering update dimensions for each image load
-        this.content.find('img').on('load', this.updateDimensions.bind(this));
+        this.content.find('img').first().on('load', this.updateDimensions.bind(this));
 
         carouselElements = carouselElements.add(this.root);
     });
@@ -244,7 +244,7 @@ define('xooie/carousel', ['jquery', 'xooie/base'], function($, Base) {
     };
 
     Carousel.prototype.currentItem = function(bias) {
-        var i, items = this.content.children(),
+        var i, items = this.content.children(':visible'),
             position, itemWidth;
 
         if (typeof bias === 'undefined') {
@@ -366,7 +366,7 @@ define('xooie/carousel', ['jquery', 'xooie/base'], function($, Base) {
         if (this.isScrolling) {
             self.wrapper.stop(true,true);
         }
-        
+
         callback();
 
     };

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

@@ -0,0 +1,83 @@
+/*
+*   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/event_handler', ['jquery', 'xooie/helpers'], function($, helpers) {
+
+  var EventHandler = function(namespace) {
+    this.namespace = namespace;
+
+    this.handlers = {};
+
+    this._callbacks = {};
+  };
+
+  function format(type, namespace) {
+    if (!namespace) {
+      return type;
+    } else {
+      return type + '.' + namespace;
+    }
+  }
+
+  EventHandler.prototype.add = function(type, method) {
+    var self = this,
+        formattedType, t;
+
+    if (helpers.isObject(type) && helpers.isUndefined(method)) {
+      for(t in type) {
+        if (helpers.isFunction(type[t])) {
+          this.add(t, type[t]);
+        }
+      }
+
+      return;
+    }
+
+    formattedType = format(type, this.namespace);
+
+    if (helpers.isUndefined(this.handlers[formattedType])) {
+      this.handlers[formattedType] = function(e) {
+        self.fire(e, this, arguments);
+      };
+    }
+
+    if (helpers.isUndefined(this._callbacks[type])) {
+      this._callbacks[type] = $.Callbacks('unique');
+    }
+
+    this._callbacks[type].add(method);
+  };
+
+  EventHandler.prototype.clear = function(type) {
+    delete(this.handlers[format(type, this.namespace)]);
+
+    if (!helpers.isUndefined(this._callbacks[type])) {
+      this._callbacks[type].empty();
+    }
+  };
+
+  EventHandler.prototype.fire = function(event, context, args) {
+    if (event.namespace && event.namespace !== this.namespace) {
+      return;
+    }
+
+    if (!helpers.isUndefined(this._callbacks[event.type])) {
+      this._callbacks[event.type].fireWith(context, args);
+    }
+  };
+
+  return EventHandler;
+});

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

@@ -0,0 +1,61 @@
+/*
+*   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.
+*/
+
+/**
+ * class Xooie.helpers
+ *
+ * A collection of helper methods used by Xooie modules.
+ **/
+
+define('xooie/helpers', ['jquery'], function($){
+  var helpers = {};
+/**
+ * Xooie.helpers.toAry(str) -> Array
+ * - str (String | Array): The string to be converted to an array, or an array.
+ *
+ * Converts a string to an array, or returns the passed argument if it is already an array.  Used
+ * when parsing data attributes that can be either a space-delineated string or an array.
+ **/
+  helpers.toAry = function(str) {
+    if (typeof str === 'string') {
+      return str.split(/\s+/);
+    } else if (str instanceof Array) {
+      return str;
+    }
+  };
+
+  helpers.toInt = function(int) {
+    return parseInt(int, 10);
+  };
+
+  helpers.isArray = Array.isArray || function(ary) {
+    return Array.prototype.toString(ary) === '[object Array]';
+  };
+
+  helpers.isObject = function(obj) {
+    return Object.prototype.toString(obj) === '[object Object]';
+  };
+
+  helpers.isUndefined = function(obj) {
+    return obj === void 0;
+  };
+
+  helpers.isFunction = function(func) {
+    return typeof func === 'function';
+  };
+
+  return helpers;
+});

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,193 @@
+/**
+ * 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);
+      }
+    },
+
+/**
+ * Xooie.shared.setData(instance, data)
+ * - instance (Widget | Addon): The instance to set data on
+ * - data (Object): A collection of key/value pairs
+ *
+ * Sets the properties to the values specified, as long as the property has been defined
+ **/
+    setData: function(instance, data) {
+      var i, prop;
+
+      for (i = 0; i < instance._definedProps.length; i++) {
+        prop = instance._definedProps[i];
+        if (typeof data[prop] !== 'undefined') {
+          instance.set(prop, data[prop]);
+        }
+      }
+    }
+
+  };
+
+  return shared;
+});

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

@@ -0,0 +1,32 @@
+define('xooie/widgets/accordion', ['jquery', 'xooie/widgets/tab'], function($, Tab){
+  var Accordion = Tab.extend(function() {
+  });
+
+  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;
+  };
+
+  Accordion.prototype.selectTabs = function(event, selectedTab) {
+    var activeTabs = this.getActiveTabs();
+
+    if (activeTabs.is(selectedTab)) {
+      return activeTabs.not(selectedTab);
+    } else {
+      return activeTabs.add(selectedTab);
+    }
+  };
+
+  return Accordion;
+});