From 72c0f869f85790a925887d07aa626b27ed45db1b Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 19 Jun 2016 12:53:53 -0400
Subject: [PATCH] continue jquery reduction

---
 dashboard-ui/music.html                       |   1 +
 dashboard-ui/mypreferencesdisplay.html        |   4 +-
 dashboard-ui/mypreferenceslanguages.html      |  18 +--
 dashboard-ui/mysync.html                      |   2 +-
 dashboard-ui/mysyncsettings.html              |   2 +-
 dashboard-ui/scripts/librarymenu.js           |  13 +-
 dashboard-ui/scripts/loginpage.js             |  56 ++++----
 dashboard-ui/scripts/mypreferencesdisplay.js  |  89 ++++++-------
 .../scripts/mypreferenceslanguages.js         | 124 +++++++++---------
 dashboard-ui/scripts/mysync.js                | 102 +++++++-------
 dashboard-ui/scripts/mysyncsettings.js        |  73 +++++------
 dashboard-ui/scripts/site.js                  |  20 +--
 dashboard-ui/scripts/userprofilespage.js      |   4 +-
 13 files changed, 238 insertions(+), 270 deletions(-)

diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 2d4f188e1..0587a31d5 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -93,6 +93,7 @@
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
diff --git a/dashboard-ui/mypreferencesdisplay.html b/dashboard-ui/mypreferencesdisplay.html
index bb92df2ea..c1ff8120a 100644
--- a/dashboard-ui/mypreferencesdisplay.html
+++ b/dashboard-ui/mypreferencesdisplay.html
@@ -1,4 +1,4 @@
-<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplaySettings}" data-require="scripts/mypreferencesdisplay,emby-checkbox,emby-button,emby-select" data-backbutton="true" data-menubutton="false">
+<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplaySettings}" data-backbutton="true" data-menubutton="false">
     <div data-role="content">
         <form class="displayPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
             <div class="detailSection languageSection hide">
@@ -64,7 +64,7 @@
                     <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
                 </div>
                 <br />
-                <div class="fldEnableBackdrops selectContainer" style="display:none;">
+                <div class="fldEnableBackdrops selectContainer">
                     <select id="selectBackdrop" is="emby-select" label="${LabelEnableBackdrops}">
                         <option value="">${OptionAuto}</option>
                         <option value="1">${OptionYes}</option>
diff --git a/dashboard-ui/mypreferenceslanguages.html b/dashboard-ui/mypreferenceslanguages.html
index 78587d5a8..c27e42c3a 100644
--- a/dashboard-ui/mypreferenceslanguages.html
+++ b/dashboard-ui/mypreferenceslanguages.html
@@ -1,4 +1,4 @@
-<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderPlaybackSettings}" data-require="scripts/mypreferenceslanguages,emby-checkbox,emby-button" data-backbutton="true" data-menubutton="false">
+<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderPlaybackSettings}" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
 
@@ -40,14 +40,14 @@
                     <option value="Always">${OptionAlwaysPlaySubtitles}</option>
                     <option value="None">${OptionNoSubtitles}</option>
                 </select>
-                <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp" style="display: none;">${OptionDefaultSubtitlesHelp}</div>
-                <div class="fieldDescription subtitlesSmartHelp subtitlesHelp" style="display: none;">${OptionSmartSubtitlesHelp}</div>
-                <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div>
-                <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div>
-                <div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${OptionDefaultSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${OptionSmartSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp hide">${OptionAlwaysPlaySubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp hide">${OptionOnlyForcedSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesNoneHelp subtitlesHelp hide">${OptionNoSubtitlesHelp}</div>
 
             </div>
-            <div class="detailSection cinemaModeOptions" style="display:none;">
+            <div class="detailSection cinemaModeOptions hide">
                 <h1>
                     ${HeaderCinemaMode}
                 </h1>
@@ -88,8 +88,8 @@
                         <span>${OptionEnableExternalVideoPlayers}</span>
                     </label>
                     <div class="fieldDescription checkboxFieldDescription">
-                        <div style="display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
-                        <div style="display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
+                        <div class="labelGenericExternalPlayers hide">${LabelExternalPlayersHelp}</div>
+                        <div class="labelNativeExternalPlayers hide">${LabelNativeExternalPlayersHelp}</div>
                     </div>
                 </div>
             </div>
diff --git a/dashboard-ui/mysync.html b/dashboard-ui/mysync.html
index 5711e9138..51f761b0a 100644
--- a/dashboard-ui/mysync.html
+++ b/dashboard-ui/mysync.html
@@ -1,4 +1,4 @@
-<div id="mySyncActivityPage" data-role="page" class="page libraryPage syncActivityPage mySyncPage noSecondaryNavPage" data-contextname="${TitleSync}" data-require="scripts/syncactivity,scripts/taskbutton,scripts/mysync,paper-spinner,paper-fab,emby-button">
+<div id="mySyncActivityPage" data-role="page" class="page libraryPage syncActivityPage mySyncPage noSecondaryNavPage" data-contextname="${TitleSync}">
 
     <div data-role="content">
 
diff --git a/dashboard-ui/mysyncsettings.html b/dashboard-ui/mysyncsettings.html
index c98a960ff..99206cdd5 100644
--- a/dashboard-ui/mysyncsettings.html
+++ b/dashboard-ui/mysyncsettings.html
@@ -1,4 +1,4 @@
-<div id="syncPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${ButtonSyncSettings}" data-require="scripts/mysyncsettings,emby-checkbox,emby-input,emby-button,paper-icon-button-light" data-backbutton="true" data-menubutton="false">
+<div id="syncPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${ButtonSyncSettings}" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <form class="userProfileSettingsForm" style="margin: 0 auto;">
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index f2cd3668a..b00066ddd 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -91,7 +91,7 @@
                 }
 
                 if (headerUserButton) {
-                    updateHeaderUserButton(headerUserButton, url, null);
+                    updateHeaderUserButton(headerUserButton, url);
                     hasImage = true;
                 }
             }
@@ -99,7 +99,7 @@
 
         if (headerUserButton && !hasImage) {
 
-            updateHeaderUserButton(headerUserButton, null, 'person');
+            updateHeaderUserButton(headerUserButton, null);
         }
         if (user) {
             updateLocalUser(user.localUser);
@@ -108,19 +108,16 @@
         requiresUserRefresh = false;
     }
 
-    function updateHeaderUserButton(headerUserButton, src, icon) {
+    function updateHeaderUserButton(headerUserButton, src) {
 
         if (src) {
             headerUserButton.classList.add('headerUserButtonRound');
             headerUserButton.classList.remove('autoSize');
             headerUserButton.innerHTML = '<img src="' + src + '" />';
-        } else if (icon) {
-            headerUserButton.classList.remove('headerUserButtonRound');
-            headerUserButton.classList.add('autoSize');
-            headerUserButton.innerHTML = '<i class="md-icon>' + icon + '</i>';
         } else {
-            headerUserButton.classList.add('autoSize');
             headerUserButton.classList.remove('headerUserButtonRound');
+            headerUserButton.classList.add('autoSize');
+            headerUserButton.innerHTML = '<i class="md-icon">person</i>';
         }
     }
 
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index 514223564..01b5f7dd5 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -1,5 +1,17 @@
 define([], function () {
 
+    function getApiClient() {
+
+        var serverId = getParameterByName('serverid');
+
+        if (serverId) {
+            return ConnectionManager.getOrCreateApiClient(serverId);
+
+        } else {
+            return ApiClient;
+        }
+    }
+
     var LoginPage = {
 
         showVisualForm: function (page) {
@@ -68,18 +80,6 @@
         });
     }
 
-    function getApiClient() {
-
-        var serverId = getParameterByName('serverid');
-
-        if (serverId) {
-            return Promise.resolve(ConnectionManager.getOrCreateApiClient(serverId));
-
-        } else {
-            return Promise.resolve(ApiClient);
-        }
-    }
-
     function showManualForm(context, showCancel, focusPassword) {
 
         context.querySelector('.manualLoginForm').classList.remove('hide');
@@ -198,9 +198,9 @@
         });
 
         view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
-            getApiClient().then(function (apiClient) {
-                LoginPage.authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
-            });
+
+            var apiClient = getApiClient();
+            LoginPage.authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
 
             e.preventDefault();
             // Disable default form submission
@@ -222,27 +222,25 @@
         view.addEventListener('viewshow', function (e) {
             Dashboard.showLoadingMsg();
 
-            getApiClient().then(function (apiClient) {
+            var apiClient = getApiClient();
+            apiClient.getPublicUsers().then(function (users) {
 
-                apiClient.getPublicUsers().then(function (users) {
+                if (!users.length) {
 
-                    if (!users.length) {
+                    showManualForm(view, false, false);
 
-                        showManualForm(view, false, false);
+                } else {
 
-                    } else {
+                    LoginPage.showVisualForm(view);
+                    loadUserList(view, apiClient, users);
+                }
 
-                        LoginPage.showVisualForm(view);
-                        loadUserList(view, apiClient, users);
-                    }
+                Dashboard.hideLoadingMsg();
+            });
 
-                    Dashboard.hideLoadingMsg();
-                });
+            apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).then(function (options) {
 
-                apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).then(function (options) {
-
-                    view.querySelector('.disclaimer').innerHTML = options.LoginDisclaimer || '';
-                });
+                view.querySelector('.disclaimer').innerHTML = options.LoginDisclaimer || '';
             });
 
             if (Dashboard.isConnectMode()) {
diff --git a/dashboard-ui/scripts/mypreferencesdisplay.js b/dashboard-ui/scripts/mypreferencesdisplay.js
index 302ef90db..8e71f2782 100644
--- a/dashboard-ui/scripts/mypreferencesdisplay.js
+++ b/dashboard-ui/scripts/mypreferencesdisplay.js
@@ -1,14 +1,14 @@
-define(['userSettings', 'appStorage', 'jQuery'], function (userSettings, appStorage, $) {
+define(['userSettings', 'appStorage'], function (userSettings, appStorage) {
 
     function loadForm(page, user) {
 
         page.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
         page.querySelector('.chkDisplayUnairedEpisodes').checked = user.Configuration.DisplayUnairedEpisodes || false;
 
-        $('#selectThemeSong', page).val(appStorage.getItem('enableThemeSongs-' + user.Id) || '');
-        $('#selectBackdrop', page).val(appStorage.getItem('enableBackdrops-' + user.Id) || '');
+        page.querySelector('#selectThemeSong').value = appStorage.getItem('enableThemeSongs-' + user.Id) || '';
+        page.querySelector('#selectBackdrop').value = appStorage.getItem('enableBackdrops-' + user.Id) || '';
 
-        $('#selectLanguage', page).val(userSettings.language() || '');
+        page.querySelector('#selectLanguage').value = userSettings.language() || '';
 
         Dashboard.hideLoadingMsg();
     }
@@ -20,8 +20,8 @@
 
         userSettings.language(page.querySelector('#selectLanguage').value);
 
-        appStorage.setItem('enableThemeSongs-' + user.Id, $('#selectThemeSong', page).val());
-        appStorage.setItem('enableBackdrops-' + user.Id, $('#selectBackdrop', page).val());
+        appStorage.setItem('enableThemeSongs-' + user.Id, page.querySelector('#selectThemeSong').value);
+        appStorage.setItem('enableBackdrops-' + user.Id, page.querySelector('#selectBackdrop').value);
 
         return ApiClient.updateUserConfiguration(user.Id, user.Configuration);
     }
@@ -52,65 +52,56 @@
         });
     }
 
-    function onSubmit() {
+    return function (view, params) {
 
-        var page = $(this).parents('.page')[0];
-
-        save(page);
-
-        // Disable default form submission
-        return false;
-    }
-
-    pageIdOn('pageinit', "displayPreferencesPage", function () {
-
-        var page = this;
-
-        $('.displayPreferencesForm').off('submit', onSubmit).on('submit', onSubmit);
+        view.querySelector('.displayPreferencesForm').addEventListener('submit', function (e) {
+            save(view);
+            e.preventDefault();
+            // Disable default form submission
+            return false;
+        });
 
         if (AppInfo.enableAutoSave) {
-            page.querySelector('.btnSave').classList.add('hide');
+            view.querySelector('.btnSave').classList.add('hide');
         } else {
-            page.querySelector('.btnSave').classList.remove('hide');
+            view.querySelector('.btnSave').classList.remove('hide');
         }
 
-    });
-    pageIdOn('pageshow', "displayPreferencesPage", function () {
+        view.addEventListener('viewshow', function () {
+            var page = this;
 
-        var page = this;
+            Dashboard.showLoadingMsg();
 
-        Dashboard.showLoadingMsg();
+            var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
-        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+            ApiClient.getUser(userId).then(function (user) {
 
-        ApiClient.getUser(userId).then(function (user) {
+                loadForm(page, user);
 
-            loadForm(page, user);
+                var requiresUserPreferences = view.querySelectorAll('.requiresUserPreferences');
+                for (var i = 0, length = requiresUserPreferences.length; i < length; i++) {
+                    if (user.Policy.EnableUserPreferenceAccess) {
+                        requiresUserPreferences[i].classList.remove('hide');
+                    } else {
+                        requiresUserPreferences[i].classList.add('hide');
+                    }
+                }
+            });
 
-            if (user.Policy.EnableUserPreferenceAccess) {
-                $('.requiresUserPreferences', page).show();
+            if (AppInfo.supportsUserDisplayLanguageSetting) {
+                page.querySelector('.languageSection').classList.remove('hide');
             } else {
-                $('.requiresUserPreferences', page).hide();
+                page.querySelector('.languageSection').classList.add('hide');
             }
         });
 
-        $('.fldEnableBackdrops', page).show();
+        view.addEventListener('viewbeforehide', function () {
+            var page = this;
 
-        if (AppInfo.supportsUserDisplayLanguageSetting) {
-            page.querySelector('.languageSection').classList.remove('hide');
-        } else {
-            page.querySelector('.languageSection').classList.add('hide');
-        }
-
-    });
-    pageIdOn('pagebeforehide', "displayPreferencesPage", function () {
-
-        var page = this;
-
-        if (AppInfo.enableAutoSave) {
-            save(page);
-        }
-
-    });
+            if (AppInfo.enableAutoSave) {
+                save(page);
+            }
+        });
+    };
 
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mypreferenceslanguages.js b/dashboard-ui/scripts/mypreferenceslanguages.js
index 979f32425..95ad01880 100644
--- a/dashboard-ui/scripts/mypreferenceslanguages.js
+++ b/dashboard-ui/scripts/mypreferenceslanguages.js
@@ -1,4 +1,4 @@
-define(['appSettings', 'userSettings', 'jQuery'], function (appSettings, userSettings, $) {
+define(['appSettings', 'userSettings'], function (appSettings, userSettings) {
 
     function populateLanguages(select, languages) {
 
@@ -13,22 +13,22 @@
             html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
         }
 
-        $(select).html(html);
+        select.innerHTML = html;
     }
 
     function loadForm(page, user, loggedInUser, allCulturesPromise) {
 
         allCulturesPromise.then(function (allCultures) {
 
-            populateLanguages($('#selectAudioLanguage', page), allCultures);
-            populateLanguages($('#selectSubtitleLanguage', page), allCultures);
+            populateLanguages(page.querySelector('#selectAudioLanguage'), allCultures);
+            populateLanguages(page.querySelector('#selectSubtitleLanguage'), allCultures);
 
-            $('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "");
-            $('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "");
+            page.querySelector('#selectAudioLanguage', page).value = user.Configuration.AudioLanguagePreference || "";
+            page.querySelector('#selectSubtitleLanguage', page).value = user.Configuration.SubtitleLanguagePreference || "";
             page.querySelector('.chkEpisodeAutoPlay').checked = user.Configuration.EnableNextEpisodeAutoPlay || false;
         });
 
-        $('#selectSubtitlePlaybackMode', page).val(user.Configuration.SubtitleMode || "").trigger('change');
+        page.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || "";
 
         page.querySelector('.chkPlayDefaultAudioTrack').checked = user.Configuration.PlayDefaultAudioTrack || false;
         page.querySelector('.chkEnableCinemaMode').checked = userSettings.enableCinemaMode();
@@ -44,16 +44,16 @@
 
             bitrateOptions = '<option value="">' + Globalize.translate('OptionAutomatic') + '</option>' + bitrateOptions;
 
-            $('#selectMaxBitrate', page).html(bitrateOptions);
-            $('#selectMaxChromecastBitrate', page).html(bitrateOptions);
+            page.querySelector('#selectMaxBitrate').innerHTML = bitrateOptions;
+            page.querySelector('#selectMaxChromecastBitrate').innerHTML = bitrateOptions;
 
             if (appSettings.enableAutomaticBitrateDetection()) {
-                $('#selectMaxBitrate', page).val('');
+                page.querySelector('#selectMaxBitrate').value = '';
             } else {
-                $('#selectMaxBitrate', page).val(appSettings.maxStreamingBitrate());
+                page.querySelector('#selectMaxBitrate').value = appSettings.maxStreamingBitrate();
             }
 
-            $('#selectMaxChromecastBitrate', page).val(appSettings.maxChromecastBitrate());
+            page.querySelector('#selectMaxChromecastBitrate').value = appSettings.maxChromecastBitrate();
 
             Dashboard.hideLoadingMsg();
         });
@@ -80,19 +80,19 @@
         ApiClient.getNamedConfiguration("cinemamode").then(function (cinemaConfig) {
 
             if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) {
-                $('.cinemaModeOptions', page).show();
+                page.querySelector('.cinemaModeOptions').classList.remove('hide');
             } else {
-                $('.cinemaModeOptions', page).hide();
+                page.querySelector('.cinemaModeOptions').classList.add('hide');
             }
         });
     }
 
     function saveUser(page, user) {
 
-        user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
-        user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
+        user.Configuration.AudioLanguagePreference = page.querySelector('#selectAudioLanguage').value;
+        user.Configuration.SubtitleLanguagePreference = page.querySelector('#selectSubtitleLanguage').value;
 
-        user.Configuration.SubtitleMode = $('#selectSubtitlePlaybackMode', page).val();
+        user.Configuration.SubtitleMode = page.querySelector('#selectSubtitlePlaybackMode').value;
         user.Configuration.PlayDefaultAudioTrack = page.querySelector('.chkPlayDefaultAudioTrack').checked;
         user.Configuration.EnableNextEpisodeAutoPlay = page.querySelector('.chkEpisodeAutoPlay').checked;
         userSettings.enableCinemaMode(page.querySelector('.chkEnableCinemaMode').checked);
@@ -104,14 +104,14 @@
 
         appSettings.enableExternalPlayers(page.querySelector('.chkExternalVideoPlayer').checked);
 
-        if ($('#selectMaxBitrate', page).val()) {
-            appSettings.maxStreamingBitrate($('#selectMaxBitrate', page).val());
+        if (page.querySelector('#selectMaxBitrate').value) {
+            appSettings.maxStreamingBitrate(page.querySelector('#selectMaxBitrate').value);
             appSettings.enableAutomaticBitrateDetection(false);
         } else {
             appSettings.enableAutomaticBitrateDetection(true);
         }
 
-        appSettings.maxChromecastBitrate($('#selectMaxChromecastBitrate', page).val());
+        appSettings.maxChromecastBitrate(page.querySelector('#selectMaxChromecastBitrate').value);
 
         var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
@@ -137,63 +137,57 @@
         });
     }
 
-    function onSubmit() {
+    return function (view, params) {
 
-        var page = $(this).parents('.page')[0];
+        view.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', function () {
 
-        save(page);
-
-        // Disable default form submission
-        return false;
-    }
-
-    pageIdOn('pageinit', "languagePreferencesPage", function () {
-
-        var page = this;
-
-        $('#selectSubtitlePlaybackMode', page).on('change', function () {
-
-            $('.subtitlesHelp', page).hide();
-            $('.subtitles' + this.value + 'Help', page).show();
+            var subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
+            for (var i = 0, length = subtitlesHelp.length; i < length; i++) {
+                subtitlesHelp[i].classList.add('hide');
+            }
+            view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
         });
 
-        $('.languagePreferencesForm').off('submit', onSubmit).on('submit', onSubmit);
+        view.querySelector('.languagePreferencesForm').addEventListener('submit', function (e) {
+            save(view);
+
+            // Disable default form submission
+            e.preventDefault();
+            return false;
+        });
 
         if (AppInfo.enableAutoSave) {
-            page.querySelector('.btnSave').classList.add('hide');
+            view.querySelector('.btnSave').classList.add('hide');
         } else {
-            page.querySelector('.btnSave').classList.remove('hide');
-        }
-    });
-
-    pageIdOn('pageshow', "languagePreferencesPage", function () {
-
-        var page = this;
-
-        if (AppInfo.supportsExternalPlayers) {
-            $('.fldExternalPlayer', page).show();
-        } else {
-            $('.fldExternalPlayer', page).hide();
+            view.querySelector('.btnSave').classList.remove('hide');
         }
 
-        if (AppInfo.supportsExternalPlayerMenu) {
-            $('.labelNativeExternalPlayers', page).show();
-            $('.labelGenericExternalPlayers', page).hide();
-        } else {
-            $('.labelGenericExternalPlayers', page).show();
-            $('.labelNativeExternalPlayers', page).hide();
-        }
+        view.addEventListener('viewshow', function () {
 
-        loadPage(page);
-    });
+            if (AppInfo.supportsExternalPlayers) {
+                view.querySelector('.fldExternalPlayer').classList.remove('hide');
+            } else {
+                view.querySelector('.fldExternalPlayer').classList.add('hide');
+            }
 
-    pageIdOn('pagebeforehide', "languagePreferencesPage", function () {
+            if (AppInfo.supportsExternalPlayerMenu) {
+                view.querySelector('.labelNativeExternalPlayers').classList.remove('hide');
+                view.querySelector('.labelGenericExternalPlayers').classList.add('hide');
+            } else {
+                view.querySelector('.labelGenericExternalPlayers').classList.remove('hide');
+                view.querySelector('.labelNativeExternalPlayers').classList.add('hide');
+            }
 
-        var page = this;
+            loadPage(view);
+        });
 
-        if (AppInfo.enableAutoSave) {
-            save(page);
-        }
-    });
+        view.addEventListener('viewbeforehide', function () {
+            var page = this;
+
+            if (AppInfo.enableAutoSave) {
+                save(page);
+            }
+        });
+    };
 
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mysync.js b/dashboard-ui/scripts/mysync.js
index 510752033..66b608448 100644
--- a/dashboard-ui/scripts/mysync.js
+++ b/dashboard-ui/scripts/mysync.js
@@ -1,81 +1,69 @@
-define(['jQuery'], function ($) {
+define(['localsync'], function () {
 
     function refreshSyncStatus(page) {
 
-        require(['localsync'], function () {
+        if (LocalSync.isSupported()) {
 
-            if (LocalSync.isSupported()) {
+            var status = LocalSync.getSyncStatus();
 
-                var status = LocalSync.getSyncStatus();
-
-                page.querySelector('.labelSyncStatus').innerHTML = Globalize.translate('LabelLocalSyncStatusValue', status);
-                page.querySelector('.syncSpinner').active = status == "Active";
-
-                if (status == "Active") {
-                    page.querySelector('.btnSyncNow').classList.add('hide');
-                }
-                else {
-                    page.querySelector('.btnSyncNow').classList.remove('hide');
-                }
+            page.querySelector('.labelSyncStatus').innerHTML = Globalize.translate('LabelLocalSyncStatusValue', status);
+            page.querySelector('.syncSpinner').active = status == "Active";
 
+            if (status == "Active") {
+                page.querySelector('.btnSyncNow').classList.add('hide');
             }
-        });
+            else {
+                page.querySelector('.btnSyncNow').classList.remove('hide');
+            }
+
+        }
     }
 
     function syncNow(page) {
 
-        require(['localsync'], function () {
-
-            LocalSync.sync();
-            require(['toast'], function (toast) {
-                toast(Globalize.translate('MessageSyncStarted'));
-            });
-            refreshSyncStatus(page);
+        LocalSync.sync();
+        require(['toast'], function (toast) {
+            toast(Globalize.translate('MessageSyncStarted'));
         });
+        refreshSyncStatus(page);
     }
 
-    var interval;
+    return function (view, params) {
 
-    $(document).on('pageinit', "#mySyncActivityPage", function () {
+        var interval;
 
-        var page = this;
-
-        $('.btnSyncNow', page).on('click', function () {
-            syncNow(page);
+        view.querySelector('.btnSyncNow').addEventListener('click', function () {
+            syncNow(view);
         });
 
-        require(['localsync'], function () {
+        if (LocalSync.isSupported()) {
 
-            if (LocalSync.isSupported()) {
+            view.querySelector('.localSyncStatus').classList.remove('hide');
 
-                page.querySelector('.localSyncStatus').classList.remove('hide');
+        } else {
+            view.querySelector('.localSyncStatus').classList.add('hide');
+            view.querySelector('.syncSpinner').active = false;
+        }
 
-            } else {
-                page.querySelector('.localSyncStatus').classList.add('hide');
-                page.querySelector('.syncSpinner').active = false;
+        view.addEventListener('viewbeforeshow', function () {
+            var page = this;
+
+            refreshSyncStatus(page);
+
+            interval = setInterval(function () {
+                refreshSyncStatus(page);
+            }, 5000);
+        });
+
+        view.addEventListener('viewbeforehide', function () {
+            var page = this;
+
+            page.querySelector('.syncSpinner').active = false;
+
+            if (interval) {
+                clearInterval(interval);
+                interval = null;
             }
         });
-
-    }).on('pagebeforeshow', "#mySyncActivityPage", function () {
-
-        var page = this;
-
-        refreshSyncStatus(page);
-
-        interval = setInterval(function () {
-            refreshSyncStatus(page);
-        }, 5000);
-
-    }).on('pagebeforehide', "#mySyncActivityPage", function () {
-
-        var page = this;
-
-        page.querySelector('.syncSpinner').active = false;
-
-        if (interval) {
-            clearInterval(interval);
-            interval = null;
-        }
-    });
-
+    };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mysyncsettings.js b/dashboard-ui/scripts/mysyncsettings.js
index 0000b378c..a7c2e8191 100644
--- a/dashboard-ui/scripts/mysyncsettings.js
+++ b/dashboard-ui/scripts/mysyncsettings.js
@@ -1,4 +1,4 @@
-define(['appSettings', 'jQuery'], function (appSettings, $) {
+define(['appSettings'], function (appSettings) {
 
     function loadForm(page, user) {
 
@@ -26,14 +26,14 @@
         appSettings.syncPath(syncPath);
         appSettings.syncOnlyOnWifi(page.querySelector('#chkWifi').checked);
 
-        var cameraUploadServers = $(".chkUploadServer", page).get().filter(function (i) {
+        var chkUploadServer = page.querySelectorAll('.chkUploadServer');
+        var cameraUploadServers = [];
 
-            return i.checked;
-
-        }).map(function (i) {
-
-            return i.getAttribute('data-id');
-        });
+        for (var i = 0, length = chkUploadServer.length; i < length; i++) {
+            if (chkUploadServer[i].checked) {
+                cameraUploadServers.push(chkUploadServer[i].getAttribute('data-id'));
+            }
+        }
 
         appSettings.cameraUploadServers(cameraUploadServers);
 
@@ -49,60 +49,55 @@
         }
     }
 
-    function onSubmit() {
+    return function (view, params) {
 
-        var page = $(this).parents('.page')[0];
+        view.querySelector('form').addEventListener('submit', function (e) {
 
-        Dashboard.showLoadingMsg();
+            Dashboard.showLoadingMsg();
 
-        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+            var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
-        ApiClient.getUser(userId).then(function (user) {
+            ApiClient.getUser(userId).then(function (user) {
 
-            saveUser(page, user);
+                saveUser(view, user);
 
+            });
+
+            // Disable default form submission
+            e.preventDefault();
+            return false;
         });
 
-        // Disable default form submission
-        return false;
-    }
-
-    $(document).on('pageinit', "#syncPreferencesPage", function () {
-
-        var page = this;
-
-        $('form', page).off('submit', onSubmit).on('submit', onSubmit);
-
-        $('#btnSelectSyncPath', page).on('click', function () {
+        view.querySelector('#btnSelectSyncPath').addEventListener('click', function () {
 
             require(['nativedirectorychooser'], function () {
                 NativeDirectoryChooser.chooseDirectory().then(function (path) {
 
                     if (path) {
-                        $('#txtSyncPath', page).val(path);
+                        view.querySelector('#txtSyncPath').value = path;
                     }
                 });
             });
         });
 
-    }).on('pageshow', "#syncPreferencesPage", function () {
+        view.addEventListener('viewshow', function () {
+            var page = this;
 
-        var page = this;
+            Dashboard.showLoadingMsg();
 
-        Dashboard.showLoadingMsg();
+            var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
-        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+            ApiClient.getUser(userId).then(function (user) {
 
-        ApiClient.getUser(userId).then(function (user) {
+                loadForm(page, user);
+            });
 
-            loadForm(page, user);
+            if (AppInfo.supportsSyncPathSetting) {
+                page.querySelector('.fldSyncPath').classList.remove('hide');
+            } else {
+                page.querySelector('.fldSyncPath').classList.add('hide');
+            }
         });
-
-        if (AppInfo.supportsSyncPathSetting) {
-            page.querySelector('.fldSyncPath').classList.remove('hide');
-        } else {
-            page.querySelector('.fldSyncPath').classList.add('hide');
-        }
-    });
+    };
 
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index ba8ead593..70255c0ca 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2771,9 +2771,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/mypreferencesdisplay.html',
-            dependencies: ['emby-button'],
+            dependencies: ['emby-checkbox', 'emby-button', 'emby-select'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/mypreferencesdisplay'
         });
 
         defineRoute({
@@ -2785,9 +2786,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/mypreferenceslanguages.html',
-            dependencies: ['emby-button'],
+            dependencies: ['emby-button', 'emby-checkbox'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/mypreferenceslanguages'
         });
 
         defineRoute({
@@ -2806,9 +2808,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/mysync.html',
-            dependencies: [],
+            dependencies: ['scripts/syncactivity', 'scripts/taskbutton', 'paper-spinner', 'paper-fab', 'emby-button'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/mysync'
         });
 
         defineRoute({
@@ -2821,9 +2824,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/mysyncsettings.html',
-            dependencies: [],
+            dependencies: ['emby-checkbox', 'emby-input', 'emby-button', 'paper-icon-button-light'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/mysyncsettings'
         });
 
         defineRoute({
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index f231f1bc1..fbf80f61b 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -122,7 +122,7 @@
         html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">';
 
         if (user.ConnectUserId && addConnectIndicator) {
-            html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><iron-icon icon="cloud"></iron-icon></div>';
+            html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="md-icon">cloud</i></div>';
         }
 
         html += "</div>";
@@ -136,7 +136,7 @@
         html += '<div class="cardFooter">';
 
         html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
         html += "</div>";
 
         html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';