From f0d3680fe4644256d1bfe6a3c0d8889cb620e2cd Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Tue, 30 Apr 2013 17:27:36 -0700
Subject: [PATCH] Added an optional contentEl for compontents.

This allows you to define a different element to append children to as opposed to the main component element. Because sometimes components require more than one element to create their structure. e.g. a menu button.
---
 src/js/component.js    | 23 ++++++++++++++++++++---
 test/unit/component.js | 26 ++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/js/component.js b/src/js/component.js
index ac6f98588..9b5e7a0d0 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -164,6 +164,23 @@ vjs.Component.prototype.el = function(){
   return this.el_;
 };
 
+/**
+ * An optional element where, if defined, children will be inserted
+ *   instead of directly in el_
+ * @type {Element}
+ * @private
+ */
+vjs.Component.prototype.contentEl_;
+
+/**
+ * Return the component's DOM element for embedding content.
+ *   will either be el_ or a new element defined in createEl
+ * @return {Element}
+ */
+vjs.Component.prototype.contentEl = function(){
+  return this.contentEl_ || this.el_;
+};
+
 /**
  * The ID for the component.
  * @type {String}
@@ -292,7 +309,7 @@ vjs.Component.prototype.addChild = function(child, options){
   // Add the UI object's element to the container div (box)
   // Having an element is not required
   if (typeof component['el'] === 'function' && component['el']()) {
-    this.el_.appendChild(component['el']());
+    this.contentEl().appendChild(component['el']());
   }
 
   // Return so it can stored on parent object if desired.
@@ -321,8 +338,8 @@ vjs.Component.prototype.removeChild = function(component){
   this.childNameIndex_[component.name] = null;
 
   var compEl = component.el();
-  if (compEl && compEl.parentNode === this.el_) {
-    this.el_.removeChild(component.el());
+  if (compEl && compEl.parentNode === this.contentEl()) {
+    this.contentEl().removeChild(component.el());
   }
 };
 
diff --git a/test/unit/component.js b/test/unit/component.js
index 35841c620..4255ddd1b 100644
--- a/test/unit/component.js
+++ b/test/unit/component.js
@@ -191,3 +191,29 @@ test('should change the width and height of a component', function(){
   ok(comp.width() === 1000, 'forced width was removed');
   ok(comp.height() === 0, 'forced height was removed');
 });
+
+
+test('should use a defined content el for appending children', function(){
+  var CompWithContent = vjs.Component.extend();
+  CompWithContent.prototype.createEl = function(){
+    // Create the main componenent element
+    var el = vjs.createEl('div');
+    // Create the element where children will be appended
+    this.contentEl_ = vjs.createEl('div', { 'id': 'contentEl' });
+    el.appendChild(this.contentEl_);
+    return el;
+  };
+
+  var comp = new CompWithContent(getFakePlayer());
+  var child = comp.addChild('component');
+
+  ok(comp.children().length === 1);
+  ok(comp.el().childNodes[0]['id'] === 'contentEl');
+  ok(comp.el().childNodes[0].childNodes[0] === child.el());
+
+  comp.removeChild(child);
+
+  ok(comp.children().length === 0, 'Length should now be zero');
+  ok(comp.el().childNodes[0]['id'] === 'contentEl', 'Content El should still exist');
+  ok(comp.el().childNodes[0].childNodes[0] !== child.el(), 'Child el should be removed.');
+});