From 1ad103c29fd5c92fc05c6a6d85c9d74e61b0fb54 Mon Sep 17 00:00:00 2001
From: Sam <me@sampotts.me>
Date: Mon, 26 Sep 2016 23:21:57 +1000
Subject: Menu animation

---
 src/js/plyr.js     | 200 +++++++++++++++++++++++++++++++----------------------
 src/less/plyr.less |  19 +++++
 2 files changed, 135 insertions(+), 84 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f6c98caa..e24f258b 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -888,81 +888,83 @@
                             '<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
                         '</button>',
                         '<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
-                            '<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
-                                '<ul>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
-                                            config.i18n.captions + ' <span class="plyr__menu__btn__value">{lang}</span>',
-                                        '</button>',
-                                    '</li>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
-                                            config.i18n.speed + ' <span class="plyr__menu__btn__value">{speed}</span>',
-                                        '</button>',
-                                    '</li>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
-                                            config.i18n.quality + ' <span class="plyr__menu__btn__value">Auto</span>',
-                                        '</button>',
-                                    '</li>',
-                                '</ul>',
-                            '</div>',
-                            '<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
-                                '<ul>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
-                                            config.i18n.captions,
-                                        '</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">English</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">Off</button>',
-                                    '</li>',
-                                    '</ul>',
-                            '</div>',
-                            '<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
-                                '<ul>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
-                                            config.i18n.speed,
-                                        '</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">2&times;</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">1.5&times;</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">1&times;</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">0.5&times;</button>',
-                                    '</li>',
-                                    '</ul>',
-                            '</div>',
-                            '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
-                                '<ul>',
-                                    '<li role="tab">',
-                                        '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
-                                            config.i18n.quality,
-                                        '</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">1080P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">720P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">480P</button>',
-                                    '</li>',
-                                    '<li>',
-                                        '<button type="button">320P</button>',
-                                    '</li>',
+                            '<div>',
+                                '<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
+                                                config.i18n.captions + ' <span class="plyr__menu__btn__value">{lang}</span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
+                                                config.i18n.speed + ' <span class="plyr__menu__btn__value">{speed}</span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
+                                                config.i18n.quality + ' <span class="plyr__menu__btn__value">Auto</span>',
+                                            '</button>',
+                                        '</li>',
                                     '</ul>',
+                                '</div>',
+                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.captions,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">English</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">Off</button>',
+                                        '</li>',
+                                        '</ul>',
+                                '</div>',
+                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.speed,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">2&times;</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">1.5&times;</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">1&times;</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">0.5&times;</button>',
+                                        '</li>',
+                                        '</ul>',
+                                '</div>',
+                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.quality,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">1080P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">720P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">480P</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button">320P</button>',
+                                        '</li>',
+                                        '</ul>',
+                                '</div>',
                             '</div>',
                         '</div>',
                     '</div>'
@@ -3159,7 +3161,6 @@
                 var menu = this,
                     toggle = event.target,
                     target = document.getElementById(toggle.getAttribute('aria-controls')),
-                    tabs = menu.querySelectorAll('[role="tabpanel"]'),
                     show = (toggle.getAttribute('aria-expanded') === 'false');
 
                 // Nothing to show, bail
@@ -3167,21 +3168,52 @@
                     return;
                 }
 
+                // Are we targetting a tab?
+                var isTab = target.getAttribute('role') === 'tabpanel',
+                    targetWidth, 
+                    targetHeight,
+                    container;
+
                 // Hide all other tabs
-                if (target.getAttribute('role') === 'tabpanel') {
-                    [].forEach.call(tabs, function(tab) {
-                        tab.setAttribute('aria-hidden', true);
-                        tab.setAttribute('tabindex', -1);
+                if (isTab) {
+                    // Get other tabs
+                    var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');                        
+                    container = current.parentNode;
 
-                        [].forEach.call(menu.querySelectorAll('[aria-controls="' + tab.getAttribute('id') + '"]'), function(toggle) {
-                            toggle.setAttribute('aria-expanded', false);
-                        });
+                    [].forEach.call(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]'), function(toggle) {
+                        toggle.setAttribute('aria-expanded', false);
                     });
-                }
 
-                toggle.setAttribute('aria-expanded', show);
+                    container.style.width = current.scrollWidth + 'px'; 
+                    container.style.height = current.scrollHeight + 'px'; 
+
+                    current.setAttribute('aria-hidden', true);
+                    current.setAttribute('tabindex', -1);
+
+                    // Get the natural element size
+                    var clone = target.cloneNode(true);
+                    clone.style.position = "absolute";
+                    clone.style.opacity = 0;
+                    clone.setAttribute('aria-hidden', false);
+                    container.appendChild(clone);
+                    targetWidth = clone.scrollWidth;
+                    targetHeight = clone.scrollHeight;
+                    _remove(clone);                
+                }
+                
                 target.setAttribute('aria-hidden', !show);
+                toggle.setAttribute('aria-expanded', show);
                 target.setAttribute('tabindex', 0);
+
+                if (isTab) {
+                    container.style.width = targetWidth + 'px';
+                    container.style.height = targetHeight + 'px';
+
+                    window.setTimeout(function() {
+                        container.style.width = '';
+                        container.style.height = '';
+                    }, 300);
+                }
             });
 
             // Seek tooltip
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 26c92b2d..5ba916cd 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -492,14 +492,21 @@
         right: -5px;
         margin-bottom: 10px;
         animation: plyr-popup .2s ease;
+
         background: @plyr-menu-bg;
         box-shadow: 0 1px 0 fade(#000, 20%);
         border-radius: 4px;
+
         white-space: nowrap;
         text-align: left;
         color: @plyr-menu-color;
         font-size: @plyr-font-size-small;
 
+        > div {
+            overflow: hidden;
+            transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
+        }
+
         // Arrow
         &::after {
             content: "";
@@ -516,6 +523,7 @@
             margin: 0;
             padding: 5px;
             list-style: none;
+            overflow: hidden;
         }
         button {
             display: flex;
@@ -575,6 +583,7 @@
             margin-left: auto;
             padding-left: ceil(@plyr-control-padding * 3.5);
             pointer-events: none;
+            overflow: hidden;
         }
 
         // Option value
@@ -591,6 +600,16 @@
             color: @plyr-menu-bg;
             font-size: 10px;
         }
+
+        // When animating between menus
+        &.is-resizing {
+            overflow: hidden;
+            transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
+
+            ul {
+                //opacity: 0;
+            }
+        }
     }
 }
 
-- 
cgit v1.2.3