Merge branch 'Akkuma-master'

src/js/component.js

@@ -439,31 +439,62 @@ vjs.Component.prototype.removeChild = function(component){
  *         myChildOption: true
  *       }
  *     }
+ *
+ *     // Or when creating the component
+ *     var myComp = new MyComponent(player, {
+ *       children: {
+ *         myChildComponent: {
+ *           myChildOption: true
+ *         }
+ *       }
+ *     });
+ *
+ * The children option can also be an Array of child names or
+ * child options objects (that also include a 'name' key).
+ *
+ *     var myComp = new MyComponent(player, {
+ *       children: [
+ *         'button',
+ *         {
+ *           name: 'button',
+ *           someOtherOption: true
+ *         }
+ *       ]
+ *     });
+ *
  */
 vjs.Component.prototype.initChildren = function(){
-  var options = this.options_;
+  var parent, children, child, name, opts;
 
-  if (options && options['children']) {
-    var self = this;
+  parent = this;
+  children = this.options()['children'];
 
-    // Loop through components and add them to the player
-    vjs.obj.each(options['children'], function(name, opts){
-      // Allow for disabling default components
-      // e.g. vjs.options['children']['posterImage'] = false
-      if (opts === false) return;
+  if (children) {
+    // Allow for an array of children details to passed in the options
+    if (children instanceof Array) {
+      for (var i = 0; i < children.length; i++) {
+        child = children[i];
 
-      // Allow waiting to add components until a specific event is called
-      var tempAdd = function(){
-        // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
-        self[name] = self.addChild(name, opts);
-      };
+        if (typeof child == 'string') {
+          name = child;
+          opts = {};
+        } else {
+          name = child.name;
+          opts = child;
+        }
 
-      if (opts['loadEvent']) {
-        // this.one(opts.loadEvent, tempAdd)
-      } else {
-        tempAdd();
+        parent[name] = parent.addChild(name, opts);
       }
-    });
+    } else {
+      vjs.obj.each(children, function(name, opts){
+        // Allow for disabling default components
+        // e.g. vjs.options['children']['posterImage'] = false
+        if (opts === false) return;
+
+        // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
+        parent[name] = parent.addChild(name, opts);
+      });
+    }
   }
 };
 

src/js/lib.js

@@ -60,7 +60,7 @@ vjs.obj = {};
  * @param  {Object}   obj Object to use as prototype
  * @private
  */
- vjs.obj.create = Object.create || function(obj){
+vjs.obj.create = Object.create || function(obj){
   //Create a new function called 'F' which is just an empty object.
   function F() {}
 
@@ -669,33 +669,33 @@ vjs.log = function(){
 // Offset Left
 // getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
 vjs.findPosition = function(el) {
-    var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
+  var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
 
-    if (el.getBoundingClientRect && el.parentNode) {
-      box = el.getBoundingClientRect();
-    }
+  if (el.getBoundingClientRect && el.parentNode) {
+    box = el.getBoundingClientRect();
+  }
 
-    if (!box) {
-      return {
-        left: 0,
-        top: 0
-      };
-    }
-
-    docEl = document.documentElement;
-    body = document.body;
-
-    clientLeft = docEl.clientLeft || body.clientLeft || 0;
-    scrollLeft = window.pageXOffset || body.scrollLeft;
-    left = box.left + scrollLeft - clientLeft;
-
-    clientTop = docEl.clientTop || body.clientTop || 0;
-    scrollTop = window.pageYOffset || body.scrollTop;
-    top = box.top + scrollTop - clientTop;
-
-    // Android sometimes returns slightly off decimal values, so need to round
+  if (!box) {
     return {
-      left: vjs.round(left),
-      top: vjs.round(top)
+      left: 0,
+      top: 0
     };
+  }
+
+  docEl = document.documentElement;
+  body = document.body;
+
+  clientLeft = docEl.clientLeft || body.clientLeft || 0;
+  scrollLeft = window.pageXOffset || body.scrollLeft;
+  left = box.left + scrollLeft - clientLeft;
+
+  clientTop = docEl.clientTop || body.clientTop || 0;
+  scrollTop = window.pageYOffset || body.scrollTop;
+  top = box.top + scrollTop - clientTop;
+
+  // Android sometimes returns slightly off decimal values, so need to round
+  return {
+    left: vjs.round(left),
+    top: vjs.round(top)
+  };
 };

test/unit/component.js

@@ -26,7 +26,7 @@ test('should add a child component', function(){
   ok(comp.getChildById(child.id()) === child);
 });
 
-test('should init child coponents from options', function(){
+test('should init child components from options', function(){
   var comp = new vjs.Component(getFakePlayer(), {
     children: {
       'component': true
@@ -37,6 +37,32 @@ test('should init child coponents from options', function(){
   ok(comp.el().childNodes.length === 1);
 });
 
+test('should init child components from simple children array', function(){
+  var comp = new vjs.Component(getFakePlayer(), {
+    children: [
+      'component',
+      'component',
+      'component'
+    ]
+  });
+
+  ok(comp.children().length === 3);
+  ok(comp.el().childNodes.length === 3);
+});
+
+test('should init child components from children array of objects', function(){
+  var comp = new vjs.Component(getFakePlayer(), {
+    children: [
+      { 'name': 'component' },
+      { 'name': 'component' },
+      { 'name': 'component' }
+    ]
+  });
+
+  ok(comp.children().length === 3);
+  ok(comp.el().childNodes.length === 3);
+});
+
 test('should do a deep merge of child options', function(){
   // Create a default option for component
   vjs.Component.prototype.options_ = {