Skip to content
Browse files

@erikyuzwa added ability to add child component at specific index. cl…

…oses #2540
  • Loading branch information...
1 parent 341c9c7 commit fc7a166705872714fcc889c67d8dbb73dca3cbec @erikyuzwa erikyuzwa committed with gkatsev
Showing with 44 additions and 4 deletions.
  1. +2 −0 .gitignore
  2. +1 −0 CHANGELOG.md
  3. +6 −3 src/js/component.js
  4. +5 −0 src/js/player.js
  5. +30 −1 test/unit/component.test.js
View
2 .gitignore
@@ -28,3 +28,5 @@ test/coverage/*
.sass-cache
dist/*
+
+.idea/
View
1 CHANGELOG.md
@@ -10,6 +10,7 @@ CHANGELOG
* @hartman updated fullscreen and time controls for more consistent widths ([view](https://github.com/videojs/video.js/pull/2893))
* @hartman Set a min-width for the progress slider of 4em ([view](https://github.com/videojs/video.js/pull/2902))
* @misteroneill fixed iphone useragent detection ([view](https://github.com/videojs/video.js/pull/3077))
+* @erikyuzwa added ability to add child component at specific index ([view](https://github.com/videojs/video.js/pull/2540))
--------------------
View
9 src/js/component.js
@@ -336,10 +336,11 @@ class Component {
*
* @param {String|Component} child The class name or instance of a child to add
* @param {Object=} options Options, including options to be passed to children of the child.
+ * @param {Number} index into our children array to attempt to add the child
* @return {Component} The child component (created by this process if a string was used)
* @method addChild
*/
- addChild(child, options={}) {
+ addChild(child, options={}, index=this.children_.length) {
let component;
let componentName;
@@ -388,7 +389,7 @@ class Component {
component = child;
}
- this.children_.push(component);
+ this.children_.splice(index, 0, component);
if (typeof component.id === 'function') {
this.childIndex_[component.id()] = component;
@@ -405,7 +406,9 @@ class Component {
// 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.contentEl().appendChild(component.el());
+ let childNodes = this.contentEl().children;
+ let refNode = childNodes[index] || null;
+ this.contentEl().insertBefore(component.el(), refNode);
}
// Return so it can stored on parent object if desired.
View
5 src/js/player.js
@@ -300,7 +300,12 @@ class Player extends Component {
if (tag.parentNode) {
tag.parentNode.insertBefore(el, tag);
}
+
+ // insert the tag as the first child of the player element
+ // then manually add it to the children array so that this.addChild
+ // will work properly for other components
Dom.insertElFirst(tag, el); // Breaks iPhone, fixed in HTML5 setup.
+ this.children_.unshift(tag);
this.el_ = el;
View
31 test/unit/component.test.js
@@ -55,14 +55,43 @@ test('should add a child component', function(){
ok(comp.getChildById(child.id()) === child);
});
+test('should add a child component to an index', function(){
+ var comp = new Component(getFakePlayer());
+
+ var child = comp.addChild('component');
+
+ ok(comp.children().length === 1);
+ ok(comp.children()[0] === child);
+
+ var child0 = comp.addChild('component', {}, 0);
+ ok(comp.children().length === 2);
+ ok(comp.children()[0] === child0);
+ ok(comp.children()[1] === child);
+
+ var child1 = comp.addChild('component', {}, '2');
+ ok(comp.children().length === 3);
+ ok(comp.children()[2] === child1);
+
+ var child2 = comp.addChild('component', {}, undefined);
+ ok(comp.children().length === 4);
+ ok(comp.children()[3] === child2);
+
+ var child3 = comp.addChild('component', {}, -1);
+ ok(comp.children().length === 5);
+ ok(comp.children()[3] === child3);
+ ok(comp.children()[4] === child2);
+});
+
test('addChild should throw if the child does not exist', function() {
var comp = new Component(getFakePlayer());
throws(function() {
- comp.addChild('non-existent-child');
+ comp.addChild('non-existent-child');
}, new Error('Component Non-existent-child does not exist'), 'addChild threw');
+
});
+
test('should init child components from options', function(){
var comp = new Component(getFakePlayer(), {
children: {

0 comments on commit fc7a166

Please sign in to comment.
Something went wrong with that request. Please try again.