diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 5f83619bb3..fcff827481 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -15,12 +15,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.0.81", - "_release": "1.0.81", + "version": "1.0.82", + "_release": "1.0.82", "_resolution": { "type": "version", - "tag": "1.0.81", - "commit": "60dfd52a18f23047b6d6b08973ab0b77585f9a90" + "tag": "1.0.82", + "commit": "87ca65dd008946b330945c0c1adcaf3b6337c1d2" }, "_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_target": "~1.0.0", diff --git a/dashboard-ui/bower_components/emby-webcomponents/loading/loading.css b/dashboard-ui/bower_components/emby-webcomponents/loading/loading.css new file mode 100644 index 0000000000..84e3f23f4d --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/loading/loading.css @@ -0,0 +1,14 @@ +.docspinner { + margin-top: -5vh; + margin-left: -5vh; + width: 10vh; + height: 10vh; + position: fixed; + top: 50%; + left: 50%; + z-index: 9999999; +} + +.loadingHide { + display: none !important; +} diff --git a/dashboard-ui/bower_components/emby-webcomponents/loading/loading.js b/dashboard-ui/bower_components/emby-webcomponents/loading/loading.js new file mode 100644 index 0000000000..c900612b25 --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/loading/loading.js @@ -0,0 +1,28 @@ +define(['paper-spinner', 'css!./loading'], function () { + + return { + show: function () { + var elem = document.querySelector('.docspinner'); + + if (!elem) { + + elem = document.createElement("paper-spinner"); + elem.classList.add('docspinner'); + + document.body.appendChild(elem); + } + + elem.active = true; + elem.classList.remove('loadingHide'); + }, + hide: function () { + var elem = document.querySelector('.docspinner'); + + if (elem) { + + elem.active = false; + elem.classList.add('loadingHide'); + } + } + }; +}); \ No newline at end of file diff --git a/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js new file mode 100644 index 0000000000..5e92c19d4a --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js @@ -0,0 +1,19 @@ +define(['paper-toast'], function () { + + var toastId = 0; + + return function (options) { + + var elem = document.createElement("paper-toast"); + elem.setAttribute('text', options.text); + elem.id = 'toast' + (toastId++); + + document.body.appendChild(elem); + + // This timeout is obviously messy but it's unclear how to determine when the webcomponent is ready for use + // element onload never fires + setTimeout(function () { + elem.show(); + }, 300); + }; +}); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 0bd9e1235e..ed6540d650 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -458,39 +458,27 @@ var Dashboard = { showLoadingMsg: function () { Dashboard.loadingVisible = true; - var elem = document.querySelector('.docspinner'); - if (elem) { - - // This is just an attempt to prevent the fade-in animation from running repeating and causing flickering - elem.active = true; - elem.classList.remove('hide'); - - } else if (!Dashboard.loadingAdded) { - - Dashboard.loadingAdded = true; - - require(['paper-spinner'], function () { - elem = document.createElement("paper-spinner"); - elem.classList.add('docspinner'); - - document.body.appendChild(elem); - elem.active = Dashboard.loadingVisible == true; - }); - } + require(['loading'], function (loading) { + if (Dashboard.loadingVisible) { + loading.show(); + } else { + loading.hide(); + } + }); }, hideLoadingMsg: function () { Dashboard.loadingVisible = false; - var elem = document.querySelector('.docspinner'); - - if (elem) { - - elem.active = false; - elem.classList.add('hide'); - } + require(['loading'], function (loading) { + if (Dashboard.loadingVisible) { + loading.show(); + } else { + loading.hide(); + } + }); }, getModalLoadingMsg: function () { @@ -537,28 +525,11 @@ var Dashboard = { if (typeof options == "string") { - require(['paper-toast'], function () { - var message = options; + require(['toast'], function (toast) { - Dashboard.toastId = Dashboard.toastId || 0; - - var id = 'toast' + (Dashboard.toastId++); - - var elem = document.createElement("paper-toast"); - elem.setAttribute('text', message); - elem.id = id; - - document.body.appendChild(elem); - - // This timeout is obviously messy but it's unclear how to determine when the webcomponent is ready for use - // element onload never fires - setTimeout(function () { - elem.show(); - }, 300); - - setTimeout(function () { - elem.parentNode.removeChild(elem); - }, 5300); + toast({ + text: options + }); }); @@ -1996,6 +1967,8 @@ var AppInfo = {}; define("swiper", [bowerPath + "/Swiper/dist/js/swiper.min", "css!" + bowerPath + "/Swiper/dist/css/swiper.min"], returnFirstDependency); define("paperdialoghelper", [embyWebComponentsBowerPath + "/paperdialoghelper/paperdialoghelper"], returnFirstDependency); + define("loading", [embyWebComponentsBowerPath + "/loading/loading"], returnFirstDependency); + define("toast", [embyWebComponentsBowerPath + "/toast/toast"], returnFirstDependency); // alias define("historyManager", [], function () { diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css index bf09d134b7..8da574464f 100644 --- a/dashboard-ui/thirdparty/paper-button-style.css +++ b/dashboard-ui/thirdparty/paper-button-style.css @@ -187,16 +187,6 @@ paper-button.notext { color: #43A047; } -.docspinner { - display: block; - margin-top: -14px; - margin-left: -14px; - position: fixed; - top: 50%; - left: 50%; - z-index: 9999999; -} - /*paper-toast { background-color: #eee; color: #000;