switch to shared paperdialoghelper

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.32",
+  "version": "1.0.35",
-  "_release": "1.0.32",
+  "_release": "1.0.35",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.32",
+    "tag": "1.0.35",
-    "commit": "4f59bdceba30ab8a9e1bf4c7d6bacd659d27b9bb"
+    "commit": "3fbcae2c9495ad83a36aa1bcf34f985f979923e7"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.0.0",

dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.css

@@ -1,15 +1,17 @@
 .paperDialog {
     margin: 0;
-    top: 0;
+}
-    left: 0;
+
-    right: 0;
+    .paperDialog.fixedSize {
-    bottom: 0;
+        position: fixed !important;
-    position: fixed;
+        top: 0 !important;
-    max-width: none !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        margin: 0 !important;
+        border-radius: 0 !important;
         max-height: none !important;
-    display: flex;
+        max-width: none !important;
-    align-items: center;
-    justify-content: center;
     }
 
     .paperDialog.scrollY {
@@ -26,3 +28,35 @@
         -ms-overflow-style: none;
         overflow: -moz-scrollbars-none;
     }
+
+@media all and (min-width: 1280px) and (min-height: 720px) {
+
+    .paperDialog.medium {
+        top: 10% !important;
+        bottom: 10% !important;
+        left: 10% !important;
+        right: 10% !important;
+    }
+
+    .paperDialog.small {
+        top: 10% !important;
+        bottom: 10% !important;
+        left: 20% !important;
+        right: 20% !important;
+    }
+}
+
+@media all and (min-width: 1280px) and (min-height: 720px) {
+
+    .paperDialog.fullscreen-border {
+        top: 5% !important;
+        bottom: 5% !important;
+        left: 5% !important;
+        right: 5% !important;
+    }
+}
+
+.noScroll {
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+}

dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.js

@@ -5,6 +5,7 @@
         var self = this;
         self.originalUrl = window.location.href;
         var activeElement = document.activeElement;
+        var removeScrollLockOnClose = false;
 
         function onHashChange(e) {
 
@@ -22,9 +23,8 @@
 
         function onDialogClosed() {
 
-            if (lockDocumentScroll !== false) {
+            if (removeScrollLockOnClose) {
-                // TODO
+                document.body.classList.remove('noScroll');
-                //Dashboard.onPopupClose();
             }
 
             window.removeEventListener('popstate', onHashChange);
@@ -55,9 +55,9 @@
         dlg.addEventListener('iron-overlay-closed', onDialogClosed);
         dlg.open();
 
-        if (lockDocumentScroll !== false) {
+        if (lockDocumentScroll !== false && !document.body.classList.contains('noScroll')) {
-            // TODO
+            document.body.classList.add('noScroll');
-            //Dashboard.onPopupOpen();
+            removeScrollLockOnClose = true;
         }
 
         historyManager.pushState({ dialogId: hash }, "Dialog", hash);
@@ -135,7 +135,14 @@
             dlg.setAttribute('data-removeonclose', 'true');
         }
 
+        if (options.size) {
+            dlg.classList.add('fixedSize');
+            dlg.classList.add(options.size);
+        }
+
+        if (options.autoFocus !== false) {
             dlg.addEventListener('iron-overlay-opened', onDialogOpened);
+        }
 
         return dlg;
     }

dashboard-ui/bower_components/iron-behaviors/.bower.json

@@ -29,14 +29,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/iron-behaviors",
+  "homepage": "https://github.com/polymerelements/iron-behaviors",
   "_release": "1.0.12",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.12",
     "commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
   },
-  "_source": "git://github.com/PolymerElements/iron-behaviors.git",
+  "_source": "git://github.com/polymerelements/iron-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-behaviors"
+  "_originalSource": "polymerelements/iron-behaviors"
 }

dashboard-ui/components/collectioneditor/collectioneditor.js

@@ -193,11 +193,14 @@
                 size: 'small'
             });
 
+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+
             var html = '';
             var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
 
             html += '<div class="dialogHeader">';
-            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
             html += '<div class="dialogHeaderTitle">';
             html += title;
             html += '</div>';

dashboard-ui/components/directorybrowser/directorybrowser.js

@@ -208,10 +208,13 @@
             getSystemInfo().then(function (systemInfo) {
 
                 var dlg = paperDialogHelper.createDialog({
-                    theme: 'a',
                     size: 'medium'
                 });
 
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                 dlg.classList.add('directoryPicker');
 
                 var html = '';

dashboard-ui/components/imagedownloader/imagedownloader.js

@@ -271,11 +271,19 @@
             currentItemId = itemId;
             currentItemType = itemType;
 
-            var dlg = paperDialogHelper.createDialog();
+            var dlg = paperDialogHelper.createDialog({
+                size: 'fullscreen-border'
+            });
+
+            var theme = 'b';
+
+            dlg.classList.add('ui-body-' + theme);
+            dlg.classList.add('background-theme-' + theme);
+            dlg.classList.add('popupEditor');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
             html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
             html += '</h2>';
 

dashboard-ui/components/imageeditor/imageeditor.js

@@ -242,12 +242,18 @@
             ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
 
                 var dlg = paperDialogHelper.createDialog({
-                    theme: options.theme
+                    size: 'fullscreen-border'
                 });
 
+                var theme = options.theme || 'b';
+
+                dlg.classList.add('ui-body-' + theme);
+                dlg.classList.add('background-theme-' + theme);
+                dlg.classList.add('popupEditor');
+
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
                 html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
                 html += '</h2>';
 

dashboard-ui/components/imageuploader/imageuploader.js

@@ -134,12 +134,18 @@
             currentItemId = itemId;
 
             var dlg = paperDialogHelper.createDialog({
-                theme: options.theme
+                size: 'fullscreen-border'
             });
 
+            var theme = options.theme || 'b';
+
+            dlg.classList.add('ui-body-' + theme);
+            dlg.classList.add('background-theme-' + theme);
+            dlg.classList.add('popupEditor');
+
             var html = '';
             html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
             html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
             html += '</h2>';
 

dashboard-ui/components/itemidentifier/itemidentifier.js

@@ -295,6 +295,9 @@
                     size: 'medium'
                 });
 
+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                 var html = '';
                 html += Globalize.translateDocument(template);
 

dashboard-ui/components/itemidentifier/itemidentifier.template.html

@@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
+    <paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
     <div class="dialogHeaderTitle">
     </div>
 </div>

dashboard-ui/components/medialibrarycreator/medialibrarycreator.js

@@ -194,15 +194,18 @@
                 var template = this.response;
                 var dlg = paperDialogHelper.createDialog({
                     size: 'small',
-                    theme: 'a',
 
                     // In (at least) chrome this is causing the text field to not be editable
                     modal: false
                 });
 
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
 
                 var title = Globalize.translate('ButtonAddMediaLibrary');
 

dashboard-ui/components/medialibraryeditor/medialibraryeditor.js

@@ -148,15 +148,18 @@
                 var template = this.response;
                 var dlg = paperDialogHelper.createDialog({
                     size: 'small',
-                    theme: 'a',
 
                     // In (at least) chrome this is causing the text field to not be editable
                     modal: false
                 });
 
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
 
                 html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
                 html += '</h2>';

dashboard-ui/components/metadataeditor/metadataeditor.js

@@ -868,6 +868,9 @@
                         size: 'small'
                     });
 
+                    dlg.classList.add('ui-body-b');
+                    dlg.classList.add('background-theme-b');
+
                     dlg.classList.add('formDialog');
 
                     var html = '';

dashboard-ui/components/paperdialoghelper.js

@@ -1,207 +0,0 @@
-define(['paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation'], function () {
-
-    function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
-
-        var self = this;
-        self.originalUrl = window.location.href;
-        var activeElement = document.activeElement;
-
-        function onHashChange(e) {
-
-            var isBack = self.originalUrl == window.location.href;
-
-            if (isBack || !dlg.opened) {
-                window.removeEventListener('popstate', onHashChange);
-            }
-
-            if (isBack) {
-                self.closedByBack = true;
-                dlg.close();
-            }
-        }
-
-        function onDialogClosed() {
-
-            if (lockDocumentScroll !== false) {
-                Dashboard.onPopupClose();
-            }
-
-            window.removeEventListener('popstate', onHashChange);
-
-            if (!self.closedByBack) {
-                var state = history.state || {};
-                if (state.dialogId == hash) {
-                    history.back();
-                }
-            }
-
-            activeElement.focus();
-
-            if (dlg.getAttribute('data-removeonclose') == 'true') {
-                dlg.parentNode.removeChild(dlg);
-            }
-
-            //resolve();
-            // if we just called history.back(), then use a timeout to allow the history events to fire first
-            setTimeout(function () {
-                resolve({
-                    element: dlg,
-                    closedByBack: self.closedByBack
-                });
-            }, 1);
-        }
-
-        dlg.addEventListener('iron-overlay-closed', onDialogClosed);
-        dlg.open();
-
-        if (lockDocumentScroll !== false) {
-            Dashboard.onPopupOpen();
-        }
-
-        var state = {
-            dialogId: hash,
-            navigate: false
-        };
-        history.pushState(state, "Dialog", hash);
-
-        jQuery.onStatePushed(state);
-
-        window.addEventListener('popstate', onHashChange);
-    }
-
-    function open(dlg) {
-
-        return new Promise(function (resolve, reject) {
-
-            new paperDialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
-        });
-    }
-
-    function close(dlg) {
-
-        if (dlg.opened) {
-            history.back();
-        }
-    }
-
-    function onDialogOpened(e) {
-
-        //Emby.FocusManager.autoFocus(e.target, true);
-    }
-
-    function createDialog(options) {
-
-        options = options || {};
-
-        var dlg = document.createElement('paper-dialog');
-
-        dlg.setAttribute('with-backdrop', 'with-backdrop');
-        dlg.setAttribute('role', 'alertdialog');
-
-        // without this safari will scroll the background instead of the dialog contents
-        // but not needed here since this is already on top of an existing dialog
-        // but skip it in IE because it's causing the entire browser to hang
-        // Also have to disable for firefox because it's causing select elements to not be clickable
-        if (!browserInfo.msie && !browserInfo.firefox) {
-            if (options.modal !== false) {
-                //dlg.setAttribute('modal', 'modal');
-            }
-        }
-
-        // seeing max call stack size exceeded in the debugger with this
-        dlg.setAttribute('noAutoFocus', 'noAutoFocus');
-
-        // These don't seem to perform well on mobile
-        var defaultEntryAnimation = browserInfo.mobile ? 'fade-in-animation' : 'scale-up-animation';
-        dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
-        dlg.exitAnimation = 'fade-out-animation';
-
-        dlg.animationConfig = {
-            // scale up
-            'entry': {
-                name: options.entryAnimation || defaultEntryAnimation,
-                node: dlg,
-                timing: { duration: options.entryAnimationDuration || 300, easing: 'ease-out' }
-            },
-            // fade out
-            'exit': {
-                name: 'fade-out-animation',
-                node: dlg,
-                timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
-            }
-        };
-
-        if (options.size != 'auto') {
-            dlg.classList.add('popupEditor');
-
-            if (options.size == 'small') {
-                dlg.classList.add('small-paper-dialog');
-            }
-            else if (options.size == 'medium') {
-                dlg.classList.add('medium-paper-dialog');
-            } else {
-                dlg.classList.add('fullscreen-paper-dialog');
-            }
-        }
-
-        var theme = options.theme || 'b';
-
-        dlg.classList.add('ui-body-' + theme);
-        dlg.classList.add('background-theme-' + theme);
-        dlg.classList.add('smoothScrollY');
-
-        if (options.removeOnClose) {
-            dlg.setAttribute('data-removeonclose', 'true');
-        }
-
-        return dlg;
-    }
-
-    function positionTo(dlg, elem) {
-
-        var windowHeight = $(window).height();
-
-        // If the window height is under a certain amount, don't bother trying to position
-        // based on an element.
-        if (windowHeight >= 540) {
-
-            var pos = $(elem).offset();
-
-            pos.top += elem.offsetHeight / 2;
-            pos.left += elem.offsetWidth / 2;
-
-            // Account for margins
-            pos.top -= 24;
-            pos.left -= 24;
-
-            // Account for popup size - we can't predict this yet so just estimate
-            pos.top -= $(dlg).height() / 2;
-            pos.left -= $(dlg).width() / 2;
-
-            // Account for scroll position
-            pos.top -= $(window).scrollTop();
-            pos.left -= $(window).scrollLeft();
-
-            // Avoid showing too close to the bottom
-            pos.top = Math.min(pos.top, windowHeight - 300);
-            pos.left = Math.min(pos.left, $(window).width() - 300);
-
-            // Do some boundary checking
-            pos.top = Math.max(pos.top, 0);
-            pos.left = Math.max(pos.left, 0);
-
-            dlg.style.position = 'fixed';
-            dlg.style.left = pos.left + 'px';
-            dlg.style.top = pos.top + 'px';
-        }
-    }
-
-    window.PaperDialogHelper = {
-        open: open,
-        close: close,
-        createDialog: createDialog,
-        positionTo: positionTo
-    };
-
-    return PaperDialogHelper;
-});

dashboard-ui/components/playlisteditor/playlisteditor.js

@@ -198,12 +198,15 @@
                 size: 'small'
             });
 
+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+
             var html = '';
 
             var title = Globalize.translate('HeaderAddToPlaylist');
 
             html += '<div class="dialogHeader">';
-            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
             html += '<div class="dialogHeaderTitle">';
             html += title;
             html += '</div>';

dashboard-ui/components/recordingcreator/recordingcreator.js

@@ -296,6 +296,9 @@
                     size: 'small'
                 });
 
+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                 dlg.classList.add('formDialog');
 
                 var html = '';

dashboard-ui/components/recordingcreator/recordingcreator.template.html

@@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
+    <paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
     <div class="dialogHeaderTitle">
         ${HeaderNewRecording}
     </div>

dashboard-ui/components/subtitleeditor/subtitleeditor.js

@@ -344,9 +344,12 @@
                     removeOnClose: true
                 });
 
+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                 var html = '';
                 html += '<div class="dialogHeader">';
-                html += '<paper-icon-button icon="arrow-back" class="btnCancel"></paper-icon-button>';
+                html += '<paper-icon-button icon="arrow-back" class="btnCancel" tabindex="-1"></paper-icon-button>';
                 html += '<div class="dialogHeaderTitle">';
                 html += item.Name;
                 html += '</div>';

dashboard-ui/scripts/librarybrowser.js

@@ -2881,11 +2881,12 @@
 
                 var dlg = paperDialogHelper.createDialog({
                     removeOnClose: true,
-                    theme: 'a',
-                    size: 'auto',
                     modal: false
                 });
 
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+
                 var html = '';
 
                 // There seems to be a bug with this in safari causing it to immediately roll up to 0 height

dashboard-ui/scripts/registrationservices.js

@@ -99,14 +99,20 @@
 
         require(['paperdialoghelper', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper) {
 
-            var dlg = paperDialogHelper.createDialog({});
+            var dlg = paperDialogHelper.createDialog({
+                size: 'fullscreen-border'
+            });
+
+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+            dlg.classList.add('popupEditor');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo" tabindex="-1"></paper-fab>';
             html += '</h2>';
 
-            html += '<div class="readOnlyContent" style="margin:20px auto 0;color:#fff;padding:1em;">';
+            html += '<div class="readOnlyContent" style="margin:0 auto 0;color:#fff;padding:1em;">';
 
             html += '<h1>' + Globalize.translate('HeaderTryEmbyPremiere') + '</h1>';
 
@@ -123,7 +129,7 @@
 
             html += '<br/>';
 
-            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
+            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block" autoFocus><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
             html += '<paper-button raised class="subdued block btnCancelSupporterInfo" style="background:#444;"><iron-icon icon="close"></iron-icon><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></paper-button>';
 
             html += '</div>';

dashboard-ui/scripts/sync.js

@@ -236,10 +236,14 @@
 
                 var dlg = paperDialogHelper.createDialog({
                     size: 'small',
-                    theme: 'a',
+                    removeOnClose: true,
-                    removeOnClose: true
+                    autoFocus: false
                 });
 
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                 var html = '';
                 html += '<h2 class="dialogHeader">';
                 html += '<paper-fab icon="arrow-back" mini class="btnCancel"></paper-fab>';

dashboard-ui/thirdparty/paper-button-style.css

@@ -532,45 +532,6 @@ paper-dialog paper-radio-group paper-radio-button {
     display: block;
 }
 
-.fullscreen-paper-dialog, .medium-paper-dialog, .small-paper-dialog {
-    position: fixed !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    margin: 0 !important;
-    border-radius: 0 !important;
-    max-height: none !important;
-    max-width: none !important;
-}
-
-@media all and (min-width: 1280px) and (min-height: 720px) {
-
-    .medium-paper-dialog {
-        top: 10% !important;
-        bottom: 10% !important;
-        left: 10% !important;
-        right: 10% !important;
-    }
-
-    .small-paper-dialog {
-        top: 10% !important;
-        bottom: 10% !important;
-        left: 20% !important;
-        right: 20% !important;
-    }
-}
-
-@media all and (min-width: 1280px) and (min-height: 720px) {
-
-    .fullscreen-paper-dialog {
-        top: 5% !important;
-        bottom: 5% !important;
-        left: 5% !important;
-        right: 5% !important;
-    }
-}
-
 div.dialogHeader {
     margin: 0 0 2.5em!important;
     padding: .35em .5em;

dashboard-ui/voice/voice.js

@@ -234,9 +234,12 @@
             removeOnClose: true
         });
 
+        dlg.classList.add('ui-body-b');
+        dlg.classList.add('background-theme-b');
+
         var html = '';
         html += '<h2 class="dialogHeader">';
-        html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput"></paper-fab>';
+        html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput" tabindex="-1"></paper-fab>';
         html += '</h2>';
 
         html += '<div>';