Merge branch 'feature/fix-menu-title' of git://github.com/coursera/video.js into coursera-feature/fix-menu-title

CHANGELOG.md

@@ -5,6 +5,7 @@ CHANGELOG
 * Updated the UI to support live video ([view](https://github.com/videojs/video.js/pull/1121))
 * The UI now resets after a source change ([view](https://github.com/videojs/video.js/pull/1124))
 * Now assuming smart CSS defaults for sliders to prevent reflow on player init ([view](https://github.com/videojs/video.js/pull/1122))
+* Fixed the title element placement in menus [[view](https://github.com/videojs/video.js/pull/1114)]
 
 --------------------
 

src/js/menu.js

@@ -129,7 +129,7 @@ vjs.MenuButton.prototype.createMenu = function(){
 
   // Add a title list item to the top
   if (this.options().title) {
-    menu.el().appendChild(vjs.createEl('li', {
+    menu.contentEl().appendChild(vjs.createEl('li', {
       className: 'vjs-menu-title',
       innerHTML: vjs.capitalize(this.kind_),
       tabindex: -1

src/js/tracks.js

@@ -948,7 +948,7 @@ vjs.ChaptersButton.prototype.createMenu = function(){
 
   var menu = this.menu = new vjs.Menu(this.player_);
 
-  menu.el_.appendChild(vjs.createEl('li', {
+  menu.contentEl().appendChild(vjs.createEl('li', {
     className: 'vjs-menu-title',
     innerHTML: vjs.capitalize(this.kind_),
     tabindex: -1

test/index.html

@@ -33,7 +33,9 @@
         'test/unit/poster.js',
         'test/unit/plugins.js',
         'test/unit/flash.js',
-        'test/unit/api.js'
+        'test/unit/api.js',
+        'test/unit/menu.js',
+        'test/unit/tracks.js'
       ];
 
       var projectRoot = '../';

test/unit/menu.js

@@ -0,0 +1,20 @@
+module('MenuButton');
+
+test('should place title list item into ul', function() {
+  var player, menuButton;
+
+  player = PlayerTest.makePlayer();
+
+  vjs.MenuButton.prototype.kind_ = 'testTitle';
+
+  menuButton = new vjs.MenuButton(player, {
+    'title': true
+  });
+
+  var menuContentElement = menuButton.el().getElementsByTagName('UL')[0];
+  var titleElement = menuContentElement.children[0];
+
+  ok(titleElement.innerHTML === 'TestTitle', 'title element placed in ul');
+
+  player.dispose();
+});

test/unit/tracks.js

@@ -0,0 +1,16 @@
+module('Tracks');
+
+test('should place title list item into ul', function() {
+  var player, chaptersButton;
+
+  player = PlayerTest.makePlayer();
+
+  chaptersButton = new vjs.ChaptersButton(player);
+
+  var menuContentElement = chaptersButton.el().getElementsByTagName('UL')[0];
+  var titleElement = menuContentElement.children[0];
+
+  ok(titleElement.innerHTML === 'Chapters', 'title element placed in ul');
+
+  player.dispose();
+});