fix(controls): Added new class to indicate position of the custom con…

…trols; ensured that all items in right position are prepended rather than appended
openplayerjs · Jan 9, 2019 · c3066ab · c3066ab
1 parent 088a6fd
commit c3066ab
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -62,7 +62,7 @@
         player.addControl({
             icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/32px-Love_Heart_SVG.svg.png',
             title: 'Test',
-            position: 'left',
+            position: 'right',
             click: function() {
                 alert('You clicked the new ' + id + ' control');
             }

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -4674,7 +4674,11 @@ var Controls = function () {
       };
       var customItems = this.player.getCustomControls();
       customItems.forEach(function (item) {
-        _this4.items[item.position].push(item);
+        if (item.position === 'right') {
+          _this4.items[item.position].unshift(item);
+        } else {
+          _this4.items[item.position].push(item);
+        }
       });
 
       if (general_1.isVideo(this.player.getElement())) {
@@ -4715,7 +4719,7 @@ var Controls = function () {
     value: function _createCustomControl(item) {
       var control = document.createElement('button');
       var key = item.title.toLowerCase().replace(' ', '-');
-      control.className = "op-controls__".concat(key);
+      control.className = "op-controls__".concat(key, " op-control__").concat(item.position);
       control.tabIndex = 0;
       control.title = item.title;
       control.innerHTML = "<img src=\"".concat(item.icon, "\"> <span class=\"op-sr\">").concat(item.title, "</span>");

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/controls.ts b/src/js/controls.ts
@@ -322,10 +322,16 @@ class Controls implements PlayerComponent {
             ],
         };
 
-        // Append the custom items (if any)
+        // Append/prepend the custom items (if any) depending on their position:
+        // If position is right, always prepend so Settings and Fullscreen are the last items;
+        // otherwise, append new controls
         const customItems = this.player.getCustomControls();
         customItems.forEach(item => {
-            this.items[item.position].push(item);
+            if (item.position === 'right') {
+                this.items[item.position].unshift(item);
+            } else {
+                this.items[item.position].push(item);
+            }
         });
 
         // Make sure fullscreen is always the last one
@@ -387,7 +393,7 @@ class Controls implements PlayerComponent {
     private _createCustomControl(item: ControlItem): void {
         const control = document.createElement('button');
         const key = item.title.toLowerCase().replace(' ', '-');
-        control.className = `op-controls__${key}`;
+        control.className = `op-controls__${key} op-control__${item.position}`;
         control.tabIndex = 0;
         control.title = item.title;
         control.innerHTML = `<img src="${item.icon}"> <span class="op-sr">${item.title}</span>`;