continue jquery removal

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

@@ -5,7 +5,7 @@
     <div class="checkboxList">
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsPlayed" />
-            <span>${OptionContinuing}</span>
+            <span>${OptionPlayed}</span>
         </label>
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsUnPlayed" />

dashboard-ui/connectlogin.html

@@ -1,8 +1,8 @@
-<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin,emby-input,emby-button">
+<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b">
 
     <div data-role="content">
 
-        <form class="connectLoginForm" style="margin: 0 auto;display:none;">
+        <form class="connectLoginForm hide" style="margin: 0 auto">
 
             <div style="height:0; overflow: hidden;"><input type="text" name="fakeusernameremembered" tabindex="-1" /><input type="password" name="fakepasswordremembered" tabindex="-1" /></div>
 
@@ -36,7 +36,7 @@
             <div class="hide tvAppInfo"><br /><br /><iron-icon icon="new-releases" style="color: #52B54B"></iron-icon> Try the new <a href="//tv.emby.media" target="_blank">Emby Theater at tv.emby.media</a>, a remote-friendly app designed for your TV or large screen monitor.</div>
         </form>
 
-        <form class="manualServerForm" style="margin: 0 auto;display:none;">
+        <form class="manualServerForm hide" style="margin: 0 auto;;">
 
             <div style="display: none;">
                 <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
@@ -57,7 +57,7 @@
             <button is="emby-button" type="button" class="raised cancel block btnCancelManualServer"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
         </form>
 
-        <form class="signupForm" style="margin: 0 auto;display:none;">
+        <form class="signupForm hide" style="margin: 0 auto;">
 
             <div style="display: none;">
                 <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
@@ -85,7 +85,7 @@
             <button is="emby-button" type="button" class="raised cancel block btnCancelSignup"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
         </form>
 
-        <div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto; display: none;">
+        <div class="welcomeContainer readOnlyContent hide" style="text-align: center; margin: 0 auto;">
 
             <div style="text-align: left;">
                 <h1>${HeaderWelcomeToEmby}</h1>

dashboard-ui/itemlist.html

@@ -3,9 +3,11 @@
     </div>
     <div data-role="content" class="itemListContent">
 
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
-            <div class="listTopPaging">
+            <div class="paging"></div>
-            </div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>

dashboard-ui/livetv.html

@@ -46,9 +46,9 @@
     <div class="pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
     </div>
     <div class="pageTabContent ehsContent" id="channelsTab" data-index="2">
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
-            <div class="listTopPaging">
+            <div class="paging"></div>
-            </div>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer"></div>
     </div>

dashboard-ui/login.html

@@ -2,7 +2,7 @@
 
     <div data-role="content">
 
-        <form class="manualLoginForm" style="display: none; margin: 0 auto;">
+        <form class="manualLoginForm hide" style="margin: 0 auto;">
 
             <h1 style="text-align: left;">${HeaderPleaseSignIn}</h1>
 
@@ -41,7 +41,7 @@
         <div class="readOnlyContent" style="margin: .5em auto 1em;">
             <button is="emby-button" type="button" class="raised cancel block btnForgotPassword"><iron-icon icon="info"></iron-icon><span>${ButtonForgotPassword}</span></button>
 
-            <div class="connectButtons" style="display:none;">
+            <div class="connectButtons hide">
                 <a href="selectserver.html" class="clearLink">
                     <button is="emby-button" type="button" class="raised cancel block"><iron-icon icon="settings"></iron-icon><span>${ButtonChangeServer}</span></button>
                 </a>

dashboard-ui/scripts/connectlogin.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     function login(page, username, password) {
 
@@ -18,7 +18,7 @@
                 title: Globalize.translate('HeaderLoginFailure')
             });
 
-            $('#txtManualPassword', page).val('');
+            page.querySelector('#txtManualPassword').value = '';
 
         });
 
@@ -102,28 +102,29 @@
     function loadMode(page, mode) {
 
         if (mode == 'welcome') {
-            $('.connectLoginForm', page).hide();
+
-            $('.welcomeContainer', page).show();
+            page.querySelector('.connectLoginForm').classList.add('hide');
-            $('.manualServerForm', page).hide();
+            page.querySelector('.welcomeContainer').classList.remove('hide');
-            $('.signupForm', page).hide();
+            page.querySelector('.manualServerForm').classList.add('hide');
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'connect') {
-            $('.connectLoginForm', page).show();
+            page.querySelector('.connectLoginForm').classList.remove('hide');
-            $('.welcomeContainer', page).hide();
+            page.querySelector('.welcomeContainer').classList.add('hide');
-            $('.manualServerForm', page).hide();
+            page.querySelector('.manualServerForm').classList.add('hide');
-            $('.signupForm', page).hide();
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'manualserver') {
-            $('.manualServerForm', page).show();
+            page.querySelector('.manualServerForm').classList.remove('hide');
-            $('.connectLoginForm', page).hide();
+            page.querySelector('.connectLoginForm').classList.add('hide');
-            $('.welcomeContainer', page).hide();
+            page.querySelector('.welcomeContainer').classList.add('hide');
-            $('.signupForm', page).hide();
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'signup') {
-            $('.manualServerForm', page).hide();
+            page.querySelector('.manualServerForm').classList.add('hide');
-            $('.connectLoginForm', page).hide();
+            page.querySelector('.connectLoginForm').classList.add('hide');
-            $('.welcomeContainer', page).hide();
+            page.querySelector('.welcomeContainer').classList.add('hide');
-            $('.signupForm', page).show();
+            page.querySelector('.signupForm').classList.remove('hide');
             initSignup(page);
         }
     }
@@ -133,31 +134,87 @@
         Dashboard.navigate('selectserver.html');
     }
 
-    function onSubmit() {
+    function requireCaptcha() {
-        var page = $(this).parents('.page');
+        return !AppInfo.isNativeApp && window.location.href.toLowerCase().indexOf('https') == 0;
-
-        submit(page);
-
-        return false;
     }
 
-    function onManualServerSubmit() {
+    function supportInAppSignup() {
-        var page = $(this).parents('.page');
+        return AppInfo.isNativeApp;
-
+        return AppInfo.isNativeApp || window.location.href.toLowerCase().indexOf('https') == 0;
-        submitManualServer(page);
-
-        return false;
     }
 
-    function onSignupFormSubmit() {
+    function initSignup(page) {
 
         if (!supportInAppSignup()) {
+            return;
+        }
+
+        if (!requireCaptcha()) {
+            return;
+        }
+
+        require(['https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'], function () {
+
+        });
+    }
+
+    function submitManualServer(page) {
+
+        var host = page.querySelector('#txtServerHost').value;
+        var port = page.querySelector('#txtServerPort').value;
+
+        if (port) {
+            host += ':' + port;
+        }
+
+        Dashboard.showModalLoadingMsg();
+
+        ConnectionManager.connectToAddress(host).then(function (result) {
+
+            handleConnectionResult(page, result);
+
+        }, function () {
+            handleConnectionResult(page, {
+                State: MediaBrowser.ConnectionState.Unavailable
+            });
+
+        });
+    }
+
+    function submit(page) {
+
+        var user = page.querySelector('#txtManualName').value;
+        var password = page.querySelector('#txtManualPassword').value;
+
+        login(page, user, password);
+    }
+
+    return function (view, params) {
+
+        function onSubmit(e) {
+            submit(view);
+
+            e.preventDefault();
             return false;
         }
 
-        var page = $(this).parents('.page');
+        function onManualServerSubmit(e) {
+            submitManualServer(view);
 
-        ConnectionManager.signupForConnect($('#txtSignupEmail', page).val(), $('#txtSignupUsername', page).val(), $('#txtSignupPassword', page).val(), $('#txtSignupPasswordConfirm', page).val()).then(function () {
+            e.preventDefault();
+            return false;
+        }
+
+        function onSignupFormSubmit(e) {
+
+            if (!supportInAppSignup()) {
+                e.preventDefault();
+                return false;
+            }
+
+            var page = view;
+
+            ConnectionManager.signupForConnect(page.querySelector('#txtSignupEmail', page).value, page.querySelector('#txtSignupUsername', page).value, page.querySelector('#txtSignupPassword', page).value, page.querySelector('#txtSignupPasswordConfirm', page).value).then(function () {
 
                 Dashboard.alert({
                     message: Globalize.translate('MessageThankYouForConnectSignUp'),
@@ -190,130 +247,68 @@
 
             });
 
+            e.preventDefault();
             return false;
         }
 
-    function requireCaptcha() {
+        view.querySelector('.btnSkipConnect').addEventListener('click', skip);
-        return !AppInfo.isNativeApp && window.location.href.toLowerCase().indexOf('https') == 0;
-    }
 
-    function supportInAppSignup() {
+        view.querySelector('.connectLoginForm').addEventListener('submit', onSubmit);
-        return AppInfo.isNativeApp;
+        view.querySelector('.manualServerForm').addEventListener('submit', onManualServerSubmit);
-        return AppInfo.isNativeApp || window.location.href.toLowerCase().indexOf('https') == 0;
+        view.querySelector('.signupForm').addEventListener('submit', onSignupFormSubmit);
-    }
-
-    function initSignup(page) {
-
-        if (!supportInAppSignup()) {
-            return;
-        }
-
-        if (!requireCaptcha()) {
-            return;
-        }
-
-        require(['https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'], function () {
-
-        });
-    }
-
-    $(document).on('pageinit', "#connectLoginPage", function () {
-
-        var page = this;
-
-        $('.btnSkipConnect', page).on('click', function () {
-            skip();
-        });
-
-        $('.connectLoginForm').off('submit', onSubmit).on('submit', onSubmit);
-        $('.manualServerForm').off('submit', onManualServerSubmit).on('submit', onManualServerSubmit);
-        $('.signupForm').off('submit', onSignupFormSubmit).on('submit', onSignupFormSubmit);
-
-        $('.btnSignupForConnect', page).on('click', function () {
 
+        view.querySelector('.btnSignupForConnect').addEventListener('click', function (e) {
             if (supportInAppSignup()) {
+                e.preventDefault();
+                e.stopPropagation();
                 Dashboard.navigate('connectlogin.html?mode=signup');
                 return false;
             }
         });
 
-        $('.btnCancelSignup', page).on('click', function () {
+        view.querySelector('.btnCancelSignup').addEventListener('click', function () {
-
             history.back();
         });
 
-        $('.btnCancelManualServer', page).on('click', function () {
+        view.querySelector('.btnCancelManualServer').addEventListener('click', function () {
-
             history.back();
         });
 
-        $('.btnWelcomeNext', page).on('click', function () {
+        view.querySelector('.btnWelcomeNext').addEventListener('click', function () {
             Dashboard.navigate('connectlogin.html?mode=connect');
         });
 
-        var terms = page.querySelector('.terms');
+        var terms = view.querySelector('.terms');
         terms.innerHTML = Globalize.translate('LoginDisclaimer') + "<div style='margin-top:5px;'><a href='http://emby.media/terms' target='_blank'>" + Globalize.translate('TermsOfUse') + "</a></div>";
 
         if (AppInfo.isNativeApp) {
             terms.classList.add('hide');
-            page.querySelector('.tvAppInfo').classList.add('hide');
+            view.querySelector('.tvAppInfo').classList.add('hide');
         } else {
             terms.classList.remove('hide');
-            page.querySelector('.tvAppInfo').classList.remove('hide');
+            view.querySelector('.tvAppInfo').classList.remove('hide');
         }
 
-    }).on('pagebeforeshow', "#connectLoginPage", function () {
+        view.addEventListener('viewbeforeshow', function () {
 
             var page = this;
 
-        $('#txtSignupEmail', page).val('');
+            page.querySelector('#txtSignupEmail').value = '';
-        $('#txtSignupUsername', page).val('');
+            page.querySelector('#txtSignupUsername').value = '';
-        $('#txtSignupPassword', page).val('');
+            page.querySelector('#txtSignupPassword').value = '';
-        $('#txtSignupPasswordConfirm', page).val('');
+            page.querySelector('#txtSignupPasswordConfirm').value = '';
 
             if (browserInfo.safari && AppInfo.isNativeApp) {
                 // With apple we can't even have a link to the site
-            $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessageWithoutLink'));
+                page.querySelector('.embyIntroDownloadMessage').innerHTML = Globalize.translate('EmbyIntroDownloadMessageWithoutLink');
             } else {
                 var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
-            $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
+                page.querySelector('.embyIntroDownloadMessage').innerHTML = Globalize.translate('EmbyIntroDownloadMessage', link);
             }
-
-    }).on('pageshow', "#connectLoginPage", function () {
-
-        var page = this;
-        loadPage(page);
         });
 
-    function submitManualServer(page) {
+        view.addEventListener('viewshow', function () {
-
+            loadPage(view);
-        var host = $('#txtServerHost', page).val();
-        var port = $('#txtServerPort', page).val();
-
-        if (port) {
-            host += ':' + port;
-        }
-
-        Dashboard.showModalLoadingMsg();
-
-        ConnectionManager.connectToAddress(host).then(function (result) {
-
-            handleConnectionResult(page, result);
-
-        }, function () {
-            handleConnectionResult(page, {
-                State: MediaBrowser.ConnectionState.Unavailable
         });
-
+    };
-        });
-    }
-
-    function submit(page) {
-
-        var user = $('#txtManualName', page).val();
-        var password = $('#txtManualPassword', page).val();
-
-        login(page, user, password);
-    }
-
 });

dashboard-ui/scripts/itemlistpage.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery', 'alphaPicker'], function (libraryBrowser, $, alphaPicker) {
+define(['libraryBrowser', 'alphaPicker'], function (libraryBrowser, alphaPicker) {
 
     return function (view, params) {
 
@@ -75,14 +75,13 @@
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
                     showLimit: false,
-                    addLayoutButton: true,
+                    addLayoutButton: false,
                     currentLayout: viewStyle,
-                    sortButton: true,
+                    sortButton: false,
-                    layouts: 'Poster,PosterCard,Thumb',
+                    filterButton: false
-                    filterButton: true
                 });
 
-                view.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                view.querySelector('.paging').innerHTML = pagingHtml;
 
                 updateFilterControls();
 
@@ -104,13 +103,6 @@
 
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 }
-                else if (viewStyle == "Poster") {
-
-                    posterOptions.showTitle = context == 'photos' ? 'auto' : true;
-                    posterOptions.overlayText = context == 'photos';
-
-                    html = libraryBrowser.getPosterViewHtml(posterOptions);
-                }
                 else if (viewStyle == "PosterCard") {
 
                     posterOptions.showTitle = true;
@@ -124,6 +116,13 @@
 
                     posterOptions.preferThumb = true;
                     posterOptions.shape = "backdrop";
+                    html = libraryBrowser.getPosterViewHtml(posterOptions);
+                } else {
+                    
+                    // Poster
+                    posterOptions.showTitle = context == 'photos' ? 'auto' : true;
+                    posterOptions.overlayText = context == 'photos';
+
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 }
 
@@ -131,71 +130,31 @@
                 elem.innerHTML = html + pagingHtml;
                 ImageLoader.lazyChildren(elem);
 
-                $('.btnFilter', view).on('click', function () {
+                var i, length;
-                    showFilterMenu();
+                var elems = view.querySelectorAll('.paging');
-                });
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
 
-                $('.btnNextPage', view).on('click', function () {
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
                     reloadItems(view);
-                });
+                }
 
-                $('.btnPreviousPage', view).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
                     reloadItems(view);
-                });
+                }
 
-                $('.btnChangeLayout', view).on('layoutchange', function (e, layout) {
+                elems = view.querySelectorAll('.btnNextPage');
-                    getPageData(view).view = layout;
+                for (i = 0, length = elems.length; i < length; i++) {
-                    libraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
+                    elems[i].addEventListener('click', onNextPageClick);
-                    reloadItems(view);
+                }
-                });
 
-                // On callback make sure to set StartIndex = 0
+                elems = view.querySelectorAll('.btnPreviousPage');
-                $('.btnSort', view).on('click', function () {
+                for (i = 0, length = elems.length; i < length; i++) {
-                    libraryBrowser.showSortMenu({
+                    elems[i].addEventListener('click', onPreviousPageClick);
-                        items: [{
+                }
-                            name: Globalize.translate('OptionNameSort'),
-                            id: 'SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionCommunityRating'),
-                            id: 'CommunityRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionCriticRating'),
-                            id: 'CriticRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDateAdded'),
-                            id: 'DateCreated,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDatePlayed'),
-                            id: 'DatePlayed,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionParentalRating'),
-                            id: 'OfficialRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionPlayCount'),
-                            id: 'PlayCount,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionReleaseDate'),
-                            id: 'PremiereDate,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionRuntime'),
-                            id: 'Runtime,SortName'
-                        }],
-                        callback: function () {
-                            reloadItems(view);
-                        },
-                        query: query
-                    });
-                });
 
                 libraryBrowser.saveQueryValues(params.parentId, query);
 
@@ -237,19 +196,6 @@
             });
         }
 
-        function onListItemClick(e) {
-
-            var query = getQuery();
-            var info = libraryBrowser.getListItemInfo(this);
-
-            if (info.mediaType == 'Photo') {
-                require(['scripts/photos'], function () {
-                    Photos.startSlideshow(view, query, info.id);
-                });
-                return false;
-            }
-        }
-
         var alphaPickerElement = view.querySelector('.alphaPicker');
         alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
             var newValue = e.detail.value;
@@ -264,7 +210,35 @@
             valueChangeEvent: 'click'
         });
 
-        $(view).on('click', '.mediaItem', onListItemClick);
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
+        view.addEventListener('click', function (e) {
+
+            var mediaItem = parentWithClass(e.target, 'mediaItem');
+            if (mediaItem) {
+                var query = getQuery();
+                var info = libraryBrowser.getListItemInfo(mediaItem);
+
+                if (info.mediaType == 'Photo') {
+                    require(['scripts/photos'], function () {
+                        Photos.startSlideshow(view, query, info.id);
+                    });
+                    e.preventDefault();
+                    return false;
+                }
+            }
+        });
 
         function updateFilterControls() {
 
@@ -273,6 +247,69 @@
             self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
+        var btnSelectView = view.querySelector('.btnSelectView');
+        btnSelectView.addEventListener('click', function (e) {
+
+            libraryBrowser.showLayoutMenu(e.target, getPageData().view, 'Poster,PosterCard,Thumb'.split(','));
+        });
+
+        btnSelectView.addEventListener('layoutchange', function (e) {
+            var layout = e.detail.viewStyle;
+            getPageData().view = layout;
+            libraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
+            reloadItems(view);
+        });
+
+        view.querySelector('.btnFilter').addEventListener('click', function () {
+            showFilterMenu();
+        });
+
+        // On callback make sure to set StartIndex = 0
+        view.querySelector('.btnSort').addEventListener('click', function () {
+            libraryBrowser.showSortMenu({
+                items: [{
+                    name: Globalize.translate('OptionNameSort'),
+                    id: 'IsFolder,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionCommunityRating'),
+                    id: 'CommunityRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionCriticRating'),
+                    id: 'CriticRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionDateAdded'),
+                    id: 'DateCreated,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionDatePlayed'),
+                    id: 'DatePlayed,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionParentalRating'),
+                    id: 'OfficialRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionPlayCount'),
+                    id: 'PlayCount,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionReleaseDate'),
+                    id: 'PremiereDate,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionRuntime'),
+                    id: 'Runtime,SortName'
+                }],
+                callback: function () {
+                    reloadItems(view);
+                },
+                query: getQuery()
+            });
+        });
+
         view.addEventListener('viewbeforeshow', function (e) {
             reloadItems(view);
             updateFilterControls();

dashboard-ui/scripts/livetvchannels.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     return function (view, params, tabContent) {
 
@@ -52,14 +52,14 @@
 
             var query = getQuery(context);
 
-            $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
+            context.querySelector('.paging').innerHTML = LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 showLimit: false,
                 updatePageSizeSetting: false,
-                filterButton: true
+                filterButton: false
-            }));
+            });
 
             var html = getChannelsHtml(result.Items);
 
@@ -67,19 +67,28 @@
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', context).on('click', function () {
+            var i, length;
+            var elems;
+
+            function onNextPageClick() {
                 query.StartIndex += query.Limit;
                 reloadItems(context);
-            });
+            }
 
-            $('.btnPreviousPage', context).on('click', function () {
+            function onPreviousPageClick() {
                 query.StartIndex -= query.Limit;
                 reloadItems(context);
-            });
+            }
 
-            $('.btnFilter', context).on('click', function () {
+            elems = context.querySelectorAll('.btnNextPage');
-                showFilterMenu(context);
+            for (i = 0, length = elems.length; i < length; i++) {
-            });
+                elems[i].addEventListener('click', onNextPageClick);
+            }
+
+            elems = context.querySelectorAll('.btnPreviousPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onPreviousPageClick);
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
         }
@@ -117,6 +126,10 @@
             });
         }
 
+        tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+            showFilterMenu(tabContent);
+        });
+
         self.renderTab = function () {
 
             reloadItems(tabContent);

dashboard-ui/scripts/livetvitems.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
 
@@ -69,15 +69,28 @@
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+            var i, length;
+            var elems;
+
+            function onNextPageClick() {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
-            });
+            }
 
-            $('.btnPreviousPage', page).on('click', function () {
+            function onPreviousPageClick() {
                 query.StartIndex -= query.Limit;
                 reloadItems(page);
-            });
+            }
+
+            elems = page.querySelectorAll('.btnNextPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onNextPageClick);
+            }
+
+            elems = page.querySelectorAll('.btnPreviousPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onPreviousPageClick);
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 

dashboard-ui/scripts/livetvrecordinglist.js

@@ -29,7 +29,7 @@
 
             updateFilterControls();
 
-            var screenWidth = $(window).width();
+            var screenWidth = window.innerWidth;
 
             html += LibraryBrowser.getPosterViewHtml({
 

dashboard-ui/scripts/livetvtunerprovider-satip.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     function reload(page, providerId) {
 

dashboard-ui/scripts/loginpage.js

@@ -1,10 +1,11 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var LoginPage = {
 
         showVisualForm: function (page) {
-            $('.visualLoginForm', page).show();
+
-            $('.manualLoginForm', page).hide();
+            page.querySelector('.visualLoginForm').classList.remove('hide');
+            page.querySelector('.manualLoginForm').classList.add('hide');
         },
 
         getLastSeenText: function (lastActivityDate) {
@@ -41,9 +42,8 @@
 
             }, function (response) {
 
-                $('#pw', page).val('');
+                page.querySelector('#txtManualName').value = '';
-                $('#txtManualName', page).val('');
+                page.querySelector('#txtManualPassword').value = '';
-                $('#txtManualPassword', page).val('');
 
                 Dashboard.hideLoadingMsg();
 
@@ -80,31 +80,21 @@
         }
     }
 
-    function onManualSubmit() {
-        var page = $(this).parents('.page');
-
-        getApiClient().then(function (apiClient) {
-            LoginPage.authenticateUserByName(page, apiClient, $('#txtManualName', page).val(), $('#txtManualPassword', page).val());
-        });
-
-        // Disable default form submission
-        return false;
-    }
-
     function showManualForm(context, showCancel, focusPassword) {
-        $('.visualLoginForm', context).hide();
+
-        $('.manualLoginForm', context).show();
+        context.querySelector('.manualLoginForm').classList.remove('hide');
+        context.querySelector('.visualLoginForm').classList.add('hide');
 
         if (focusPassword) {
-            $('#txtManualPassword', context).focus();
+            context.querySelector('#txtManualPassword').focus();
         } else {
-            $('#txtManualName', context).focus();
+            context.querySelector('#txtManualName').focus();
         }
 
         if (showCancel) {
-            $('.btnCancel', context).show();
+            context.querySelector('.btnCancel').classList.remove('hide');
         } else {
-            $('.btnCancel', context).hide();
+            context.querySelector('.btnCancel').classList.add('hide');
         }
     }
 
@@ -163,32 +153,59 @@
             html += '</div>';
         }
 
-        var elem = $('#divUsers', context).html(html);
+        context.querySelector('#divUsers').innerHTML = html;
-
-        $('a', elem).on('click', function () {
-
-            var id = this.getAttribute('data-userid');
-            var name = this.getAttribute('data-username');
-            var haspw = this.getAttribute('data-haspw');
-
-            if (id == 'manual') {
-                showManualForm(context, true);
     }
-            else if (haspw == 'false') {
+
-                LoginPage.authenticateUserByName(context, apiClient, name, '');
+    function parentWithClass(elem, className) {
-            } else {
+
-                $('#txtManualName', context).val(name);
+        while (!elem.classList || !elem.classList.contains(className)) {
-                $('#txtManualPassword', context).val('');
+            elem = elem.parentNode;
-                showManualForm(context, true, true);
+
+            if (!elem) {
+                return null;
             }
-        });
+        }
+
+        return elem;
     }
 
     return function (view, params) {
 
         var self = this;
 
-        $('.manualLoginForm', view).on('submit', onManualSubmit);
+        view.querySelector('#divUsers').addEventListener('click', function(e) {
+            var cardContent = parentWithClass(e.target, 'cardContent');
+
+            if (cardContent) {
+
+                var context = view;
+                var id = cardContent.getAttribute('data-userid');
+                var name = cardContent.getAttribute('data-username');
+                var haspw = cardContent.getAttribute('data-haspw');
+
+                if (id == 'manual') {
+                    showManualForm(context, true);
+                }
+                else if (haspw == 'false') {
+                    LoginPage.authenticateUserByName(context, getApiClient(), name, '');
+                } else {
+
+                    context.querySelector('#txtManualName').value = name;
+                    context.querySelector('#txtManualPassword').value = '';
+                    showManualForm(context, true, true);
+                }
+            }
+        });
+
+        view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
+            getApiClient().then(function (apiClient) {
+                LoginPage.authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
+            });
+
+            e.preventDefault();
+            // Disable default form submission
+            return false;
+        });
 
         view.querySelector('.btnForgotPassword').addEventListener('click', function () {
             Dashboard.navigate('forgotpassword.html');
@@ -224,14 +241,14 @@
 
                 apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).then(function (options) {
 
-                    $('.disclaimer', view).html(options.LoginDisclaimer || '');
+                    view.querySelector('.disclaimer').innerHTML = options.LoginDisclaimer || '';
                 });
             });
 
             if (Dashboard.isConnectMode()) {
-                $('.connectButtons', view).show();
+                view.querySelector('.connectButtons').classList.remove('hide');
             } else {
-                $('.connectButtons', view).hide();
+                view.querySelector('.connectButtons').classList.add('hide');
             }
         });
     };

dashboard-ui/scripts/selectserver.js

@@ -1,45 +1,16 @@
-define(['jQuery', 'paper-icon-button-light'], function ($) {
+define(['paper-icon-button-light'], function () {
 
-    function connectToServer(page, server) {
+    function updatePageStyle(page) {
 
-        Dashboard.showLoadingMsg();
+        if (getParameterByName('showuser') == '1') {
-
+            page.classList.add('libraryPage');
-        ConnectionManager.connectToServer(server).then(function (result) {
+            page.classList.add('noSecondaryNavPage');
-
+            page.classList.remove('standalonePage');
-            Dashboard.hideLoadingMsg();
+        } else {
-
+            page.classList.add('standalonePage');
-            var apiClient = result.ApiClient;
+            page.classList.remove('noSecondaryNavPage');
-
+            page.classList.remove('libraryPage');
-            switch (result.State) {
-
-                case MediaBrowser.ConnectionState.SignedIn:
-                    {
-                        Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
-                        Dashboard.navigate('home.html');
         }
-                    break;
-                case MediaBrowser.ConnectionState.ServerSignIn:
-                    {
-                        Dashboard.onServerChanged(null, null, apiClient);
-                        Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id);
-                    }
-                    break;
-                case MediaBrowser.ConnectionState.ServerUpdateNeeded:
-                    {
-                        Dashboard.alert(alert({
-
-                            text: Globalize.translate('core#ServerUpdateNeeded', 'https://emby.media'),
-                            html: Globalize.translate('core#ServerUpdateNeeded', '<a href="https://emby.media">https://emby.media</a>')
-
-                        }));
-                    }
-                    break;
-                default:
-                    showServerConnectionFailure();
-                    break;
-            }
-
-        });
     }
 
     function showServerConnectionFailure() {
@@ -84,48 +55,85 @@
     function renderServers(page, servers) {
 
         if (servers.length) {
-            $('.noServersMessage', page).hide();
+            page.querySelector('.noServersMessage').classList.add('hide');
-            $('.serverList', page).show();
+            page.querySelector('.serverList').classList.remove('hide');
         } else {
-            $('.noServersMessage', page).show();
+            page.querySelector('.serverList').classList.add('hide');
-            $('.serverList', page).hide();
+            page.querySelector('.noServersMessage').classList.remove('hide');
         }
 
         var html = '';
 
         html += servers.map(getServerHtml).join('');
 
-        var elem = $('.serverList', page).html(html);
+        page.querySelector('.serverList').innerHTML = html;
-
-        $('.lnkServer', elem).on('click', function () {
-
-            var item = $(this).parents('.serverItem')[0];
-            var id = item.getAttribute('data-id');
-
-            var server = servers.filter(function (s) {
-                return s.Id == id;
-            })[0];
-
-            connectToServer(page, server);
-
-        });
-
-        $('.btnServerMenu', elem).on('click', function () {
-            showServerMenu(this);
-        });
     }
 
     function showGeneralError() {
 
-        // Need the timeout because jquery mobile will not show a popup if there's currently already one in the process of closing
-        setTimeout(function () {
-
         Dashboard.hideModalLoadingMsg();
         Dashboard.alert({
             message: Globalize.translate('DefaultErrorMessage')
         });
-        }, 300);
+    }
 
+    function parentWithClass(elem, className) {
+
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
+
+            if (!elem) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
+    return function (view, params) {
+
+        var cachedServers;
+
+        function connectToServer(page, server) {
+
+            Dashboard.showLoadingMsg();
+
+            ConnectionManager.connectToServer(server).then(function (result) {
+
+                Dashboard.hideLoadingMsg();
+
+                var apiClient = result.ApiClient;
+
+                switch (result.State) {
+
+                    case MediaBrowser.ConnectionState.SignedIn:
+                        {
+                            Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
+                            Dashboard.navigate('home.html');
+                        }
+                        break;
+                    case MediaBrowser.ConnectionState.ServerSignIn:
+                        {
+                            Dashboard.onServerChanged(null, null, apiClient);
+                            Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id);
+                        }
+                        break;
+                    case MediaBrowser.ConnectionState.ServerUpdateNeeded:
+                        {
+                            Dashboard.alert(alert({
+
+                                text: Globalize.translate('core#ServerUpdateNeeded', 'https://emby.media'),
+                                html: Globalize.translate('core#ServerUpdateNeeded', '<a href="https://emby.media">https://emby.media</a>')
+
+                            }));
+                        }
+                        break;
+                    default:
+                        showServerConnectionFailure();
+                        break;
+                }
+
+            });
         }
 
         function acceptInvitation(page, id) {
@@ -182,9 +190,9 @@
 
         function showServerMenu(elem) {
 
-        var card = $(elem).parents('.serverItem');
+            var card = parentWithClass(elem, 'serverItem');
-        var page = $(elem).parents('.page');
+            var page = parentWithClass(elem, 'page');
-        var serverId = card.attr('data-id');
+            var serverId = card.getAttribute('data-id');
 
             var menuItems = [];
 
@@ -217,9 +225,9 @@
 
         function showPendingInviteMenu(elem) {
 
-        var card = $(elem).parents('.inviteItem');
+            var card = parentWithClass(elem, 'inviteItem');
-        var page = $(elem).parents('.page');
+            var page = parentWithClass(elem, 'page');
-        var invitationId = card.attr('data-id');
+            var invitationId = card.getAttribute('data-id');
 
             var menuItems = [];
 
@@ -285,18 +293,14 @@
         function renderInvitations(page, list) {
 
             if (list.length) {
-            $('.invitationSection', page).show();
+                page.querySelector('.invitationSection').classList.remove('hide');
             } else {
-            $('.invitationSection', page).hide();
+                page.querySelector('.invitationSection').classList.add('hide');
             }
 
             var html = list.map(getPendingInviteHtml).join('');
 
-        var elem = $('.invitationList', page).html(html);
+            page.querySelector('.invitationList').innerHTML = html;
-
-        $('.btnInviteMenu', elem).on('click', function () {
-            showPendingInviteMenu(this);
-        });
         }
 
         function loadInvitations(page) {
@@ -323,6 +327,7 @@
             ConnectionManager.getAvailableServers().then(function (servers) {
 
                 servers = servers.slice(0);
+                cachedServers = servers;
 
                 renderServers(page, servers);
 
@@ -332,32 +337,44 @@
             loadInvitations(page);
 
             if (ConnectionManager.isLoggedIntoConnect()) {
-            $('.connectLogin', page).hide();
+                page.querySelector('.connectLogin').classList.add('hide');
             } else {
-            $('.connectLogin', page).show();
+                page.querySelector('.connectLogin').classList.remove('hide');
             }
         }
 
-    function updatePageStyle(page) {
+        view.querySelector('.invitationList').addEventListener('click', function (e) {
 
-        if (getParameterByName('showuser') == '1') {
+            var btnInviteMenu = parentWithClass(e.target, 'btnInviteMenu');
-            $(page).addClass('libraryPage').addClass('noSecondaryNavPage').removeClass('standalonePage');
+            if (btnInviteMenu) {
-        } else {
+                showPendingInviteMenu(btnInviteMenu);
-            $(page).removeClass('libraryPage').removeClass('noSecondaryNavPage').addClass('standalonePage');
             }
+        });
+        view.querySelector('.serverList').addEventListener('click', function (e) {
+
+            var lnkServer = parentWithClass(e.target, 'lnkServer');
+            if (lnkServer) {
+                var item = parentWithClass(lnkServer, 'serverItem');
+                var id = item.getAttribute('data-id');
+
+                var server = cachedServers.filter(function (s) {
+                    return s.Id == id;
+                })[0];
+
+                connectToServer(page, server);
             }
 
-    pageIdOn('pagebeforeshow', "selectServerPage", function () {
+            var btnServerMenu = parentWithClass(e.target, 'btnServerMenu');
-
+            if (btnServerMenu) {
-        var page = this;
+                showServerMenu(btnServerMenu);
-        updatePageStyle(page);
+            }
         });
 
-    pageIdOn('pageshow', "selectServerPage", function () {
+        view.addEventListener('viewbeforeshow', function () {
-
+            updatePageStyle(this);
-        var page = this;
-
-        loadPage(page);
         });
-
+        view.addEventListener('viewshow', function () {
+            loadPage(this);
+        });
+    };
 });

dashboard-ui/scripts/site.js

@@ -310,18 +310,20 @@ var Dashboard = {
             footerHtml += '<div id="footerNotifications"></div>';
             footerHtml += '</div>';
 
-            $(document.body).append(footerHtml);
+            document.body.insertAdjacentHTML('beforeend', footerHtml);
-
         }
 
-        var footer = $(".footer").css("top", "initial").show();
+        var footer = document.querySelector('.footer');
+        footer.style.top = 'initial';
+        footer.classList.remove('hide');
 
-        var parentElem = $('#footerNotifications', footer);
+        var parentElem = footer.querySelector('#footerNotifications');
 
-        var elem = $('#' + options.id, parentElem);
+        var elem = parentElem.querySelector('#' + options.id);
 
         if (!elem.length) {
-            elem = $('<p id="' + options.id + '" class="footerNotification"></p>').appendTo(parentElem);
+            parentElem.insertAdjacentHTML('beforeend', '<p id="' + options.id + '" class="footerNotification"></p>');
+            elem = parentElem.querySelector('#' + options.id);
         }
 
         var onclick = removeOnHide ? "jQuery(\"#" + options.id + "\").trigger(\"notification.remove\").remove();" : "jQuery(\"#" + options.id + "\").trigger(\"notification.hide\").hide();";
@@ -331,30 +333,30 @@ var Dashboard = {
         }
 
         if (options.forceShow) {
-            elem.show();
+            elem.classList.remove('hide');
         }
 
-        elem.html(options.html);
+        elem.innerHTML = options.html;
 
         if (options.timeout) {
 
             setTimeout(function () {
 
                 if (removeOnHide) {
-                    elem.trigger("notification.remove").remove();
+                    $(elem).trigger("notification.remove").remove();
                 } else {
-                    elem.trigger("notification.hide").hide();
+                    $(elem).trigger("notification.hide").hide();
                 }
 
             }, options.timeout);
         }
 
-        footer.on("notification.remove notification.hide", function (e) {
+        $(footer).on("notification.remove notification.hide", function (e) {
 
             setTimeout(function () { // give the DOM time to catch up
 
-                if (!parentElem.html()) {
+                if (!parentElem.innerHTML) {
-                    footer.hide();
+                    footer.classList.add('hide');
                 }
 
             }, 50);
@@ -2429,9 +2431,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/connectlogin.html',
-            dependencies: ['emby-button'],
+            dependencies: ['emby-button', 'emby-input'],
             autoFocus: false,
-            anonymous: true
+            anonymous: true,
+            controller: 'scripts/connectlogin'
         });
 
         defineRoute({
@@ -2928,9 +2931,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/selectserver.html',
-            dependencies: [],
+            dependencies: ['paper-fab', 'paper-item-body', 'paper-icon-item', 'emby-button'],
             autoFocus: false,
-            anonymous: true
+            anonymous: true,
+            controller: 'scripts/selectserver'
         });
 
         defineRoute({
@@ -3179,7 +3183,6 @@ var AppInfo = {};
 
             layoutManager.init();
 
-            //$.mobile.initializePage();
             window.Emby = {};
             window.Emby.Page = pageObjects;
             window.Emby.TransparencyLevel = pageObjects.TransparencyLevel;

dashboard-ui/selectserver.html

@@ -1,4 +1,4 @@
-<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage" data-theme="b" data-require="scripts/selectserver,paper-fab,paper-item-body,paper-icon-item,emby-button">
+<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage" data-theme="b">
 
     <div data-role="content">