web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-02 09:11:54 +02:00
Code Releases Activity

Added an optional contentEl for compontents.

Browse Source 
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.
This commit is contained in:
Steve Heffernan 2013-04-30 17:27:36 -07:00
parent 04feef9303
commit f0d3680fe4
2 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/js/component.js
View File

@ -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());
}
};

26
test/unit/component.js
View File

@ -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.');
});