From 16e66718f955daf9dbf26b30113dd29cdfb86907 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Mon, 15 Aug 2016 14:18:05 -0400 Subject: [PATCH] update docked tabs --- .../components/appfooter/appfooter.css | 20 ++++++ .../components/appfooter/appfooter.js | 72 +++++++++++++++++++ .../components/dockedtabs/dockedtabs.css | 29 +------- .../components/dockedtabs/dockedtabs.js | 36 +--------- dashboard-ui/itemdetails.html | 14 +++- dashboard-ui/scripts/itemdetailpage.js | 35 +++++---- dashboard-ui/scripts/librarymenu.js | 11 ++- dashboard-ui/scripts/site.js | 1 + dashboard-ui/serviceworker.js | 9 +++ 9 files changed, 147 insertions(+), 80 deletions(-) create mode 100644 dashboard-ui/components/appfooter/appfooter.css create mode 100644 dashboard-ui/components/appfooter/appfooter.js diff --git a/dashboard-ui/components/appfooter/appfooter.css b/dashboard-ui/components/appfooter/appfooter.css new file mode 100644 index 0000000000..145d588342 --- /dev/null +++ b/dashboard-ui/components/appfooter/appfooter.css @@ -0,0 +1,20 @@ +.appfooter { + background: #1c1c1c; + position: fixed; + left: 0; + right: 0; + z-index: 1; + bottom: 0; +} + +.appfooter-headroom { + transition: transform 180ms linear; +} + +.appfooter--pinned { + transform: none; +} + +.appfooter--unpinned { + transform: translateY(100%); +} \ No newline at end of file diff --git a/dashboard-ui/components/appfooter/appfooter.js b/dashboard-ui/components/appfooter/appfooter.js new file mode 100644 index 0000000000..c2bdbd5d8b --- /dev/null +++ b/dashboard-ui/components/appfooter/appfooter.js @@ -0,0 +1,72 @@ +define(['css!./appfooter'], function () { + + function render(options) { + + var elem = document.createElement('div'); + + elem.classList.add('appfooter'); + + document.body.appendChild(elem); + + return elem; + } + + function initHeadRoom(instance, elem) { + + require(["headroom"], function () { + + // construct an instance of Headroom, passing the element + var headroom = new Headroom(elem, { + // or scroll tolerance per direction + tolerance: { + down: 20, + up: 0 + }, + classes: { + pinned: 'appfooter--pinned', + unpinned: 'appfooter--unpinned', + top: 'appfooter--top', + notTop: 'appfooter--not-top', + initial: 'appfooter-headroom' + } + }); + // initialise + headroom.init(); + + instance.headroom = headroom; + }); + } + + function dockedTabs(options) { + + var self = this; + + self.element = render(options); + + self.add = function (elem) { + self.element.appendChild(elem); + }; + + self.insert = function (elem) { + if (typeof elem === 'string') { + self.element.insertAdjacentHTML('afterbegin', elem); + } else { + self.element.insertBefore(elem, self.element.firstChild); + } + }; + + initHeadRoom(self, self.element); + } + + dockedTabs.prototype.destroy = function () { + var self = this; + + if (self.headroom) { + self.headroom.destroy(); + } + + self.Element = null; + }; + + return dockedTabs; +}); \ No newline at end of file diff --git a/dashboard-ui/components/dockedtabs/dockedtabs.css b/dashboard-ui/components/dockedtabs/dockedtabs.css index 1fc63186c3..1c975aed36 100644 --- a/dashboard-ui/components/dockedtabs/dockedtabs.css +++ b/dashboard-ui/components/dockedtabs/dockedtabs.css @@ -1,32 +1,7 @@ -.dockedtabs { - height: 54px; - background: #212121; - position: fixed; - left: 0; - right: 0; - z-index: 1; - display: flex; -} - -.dockedtabs-bottom { - bottom: 0; -} - -.dockedtabs-headroom { - transition: transform 180ms linear; -} - -.dockedtabs--pinned { - transform: none; -} - -.dockedtabs--unpinned { - transform: translateY(100%); -} - -.dockedtabs-tabs { +.dockedtabs-tabs { flex-grow: 1; display: flex; + padding: .5em 0; } .dockedtabs-tab-button { diff --git a/dashboard-ui/components/dockedtabs/dockedtabs.js b/dashboard-ui/components/dockedtabs/dockedtabs.js index f5cd853b2e..7c5074b891 100644 --- a/dashboard-ui/components/dockedtabs/dockedtabs.js +++ b/dashboard-ui/components/dockedtabs/dockedtabs.js @@ -36,53 +36,21 @@ elem.innerHTML = html; - document.body.appendChild(elem); + options.appFooter.add(elem); return elem; } - function initHeadRoom(instance, elem) { - - require(["headroom"], function () { - - // construct an instance of Headroom, passing the element - var headroom = new Headroom(elem, { - // or scroll tolerance per direction - tolerance: { - down: 20, - up: 0 - }, - classes: { - pinned: 'dockedtabs--pinned', - unpinned: 'dockedtabs--unpinned', - top: 'dockedtabs--top', - notTop: 'dockedtabs--not-top', - initial: 'dockedtabs-headroom' - } - }); - // initialise - headroom.init(); - - instance.headroom = headroom; - }); - } - function dockedTabs(options) { var self = this; self.element = render(options); - - initHeadRoom(self, self.element); } - dockedTabs.prototype.destroy = function() { + dockedTabs.prototype.destroy = function () { var self = this; - if (self.headroom) { - self.headroom.destroy(); - } - self.Element = null; }; diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 43f607d688..4688e5f5ee 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -33,9 +33,14 @@ -
+
+ +
@@ -52,9 +57,14 @@ -
+
+ +
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 11c5445753..be5a1304f4 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'apphost', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators, appHost) { +define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'apphost', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators, appHost) { var currentItem; @@ -87,16 +87,10 @@ function updateSyncStatus(page, item) { var i, length; - var elems = page.querySelectorAll('.btnSyncLocal'); + var elems = page.querySelectorAll('.chkOffline'); for (i = 0, length = elems.length; i < length; i++) { - if (item.SyncPercent == 100) { - elems[i].querySelector('i').innerHTML = 'offline_pin'; - elems[i].classList.add('btnSyncComplete'); - } else { - elems[i].querySelector('i').innerHTML = 'file_download'; - elems[i].classList.remove('btnSyncComplete'); - } + elems[i].checked = item.SyncPercent == 100; } } @@ -169,16 +163,16 @@ if (itemHelper.canSync(user, item)) { if (appHost.supports('sync')) { - hideAll(page, 'btnSyncLocal', true); + hideAll(page, 'syncLocalContainer', true); hideAll(page, 'btnSync'); } else { - hideAll(page, 'btnSyncLocal'); + hideAll(page, 'syncLocalContainer'); hideAll(page, 'btnSync', true); } updateSyncStatus(page, item); } else { hideAll(page, 'btnSync'); - hideAll(page, 'btnSyncLocal'); + hideAll(page, 'syncLocalContainer'); } if (item.Type == 'Program' && item.TimerId) { @@ -2060,6 +2054,19 @@ }); } + function onSyncLocalClick() { + + if (this.checked) { + require(['syncDialog'], function (syncDialog) { + syncDialog.showMenu({ + items: [currentItem] + }); + }); + } else { + + } + } + return function (view, params) { function onPlayTrailerClick() { @@ -2116,9 +2123,9 @@ elems[i].addEventListener('click', onSyncClick); } - elems = view.querySelectorAll('.btnSyncLocal'); + elems = view.querySelectorAll('.chkOffline'); for (i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onSyncClick); + elems[i].addEventListener('change', onSyncLocalClick); } elems = view.querySelectorAll('.btnRecord,.btnFloatingRecord'); diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index b24afda042..720591519b 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -666,7 +666,7 @@ } viewMenuBarTabs.querySelector('is=["emby-tabs"]').selectedIndex(selectedIndex); - + LibraryMenu.tabType = type; }); }, @@ -1105,7 +1105,12 @@ setDrawerClass(); - //require(['dockedtabs'], function (dockedtabs) { - // new dockedtabs({}); + //require(['appfooter'], function (appfooter) { + // var footer = new appfooter({}); + // require(['dockedtabs'], function (dockedtabs) { + // new dockedtabs({ + // appFooter: footer + // }); + // }); //}); }); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index d54bc28b9e..1d4f3c3ded 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1260,6 +1260,7 @@ var AppInfo = {}; define("libjass", [bowerPath + "/libjass/libjass.min", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency); + define("appfooter", ["components/appfooter/appfooter"], returnFirstDependency); define("dockedtabs", ["components/dockedtabs/dockedtabs"], returnFirstDependency); define("directorybrowser", ["components/directorybrowser/directorybrowser"], returnFirstDependency); define("metadataEditor", [embyWebComponentsBowerPath + "/metadataeditor/metadataeditor"], returnFirstDependency); diff --git a/dashboard-ui/serviceworker.js b/dashboard-ui/serviceworker.js index 4c84b6b818..1483972572 100644 --- a/dashboard-ui/serviceworker.js +++ b/dashboard-ui/serviceworker.js @@ -7,6 +7,8 @@ var staticFileBaseUrl = baseUrl + '/staticfiles'; console.log('service worker location: ' + self.location); console.log('service worker base url: ' + baseUrl); +var connectionManager; + function getStaticFileList() { if (staticFileList) { @@ -100,6 +102,13 @@ self.addEventListener('activate', function (event) { }); function getApiClient(serverId) { + + if (connectionManager) { + return Promise.resolve(connectionManager.getApiClient(serverId)); + } + + //importScripts('serviceworker-cache-polyfill.js'); + return Promise.reject(); }