skip web components polyfill when not needed

dashboard-ui/css/materialize.css

@@ -1,164 +0,0 @@
-.z-depth-1, nav, .card-panel, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, ul.side-nav.full, ul.side-nav.fixed {
-    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-}
-
-    .z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover, .modal {
-        -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-        -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-    }
-
-    .toast .btn, .toast .btn-large, .toast .btn-flat {
-        margin: 0;
-        margin-left: 3rem;
-    }
-
-.btn, .btn-large, .btn-flat {
-    display: block;
-    padding: 0 2rem;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-clip: padding-box;
-    border: none;
-    outline: 0;
-    -webkit-tap-highlight-color: transparent;
-    margin-bottom: 15px;
-}
-
-    .btn.disabled, .disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
-        background-color: #DFDFDF;
-        box-shadow: none;
-        color: #9F9F9F;
-    }
-
-        .btn.disabled:hover, .disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
-            background-color: #DFDFDF;
-            color: #9F9F9F;
-        }
-
-    .btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
-        font-size: 1.3rem;
-    }
-
-.btn, .btn-large {
-    text-decoration: none;
-    color: #FFF;
-    background-color: #2196F3;
-    text-align: center;
-    letter-spacing: 0.5px;
-    -webkit-transition: 0.2s ease-out;
-    -moz-transition: 0.2s ease-out;
-    -o-transition: 0.2s ease-out;
-    -ms-transition: 0.2s ease-out;
-    transition: 0.2s ease-out;
-    position: relative;
-}
-
-    .btn:not(.btnStatic), .btn-large:not(.btnStatic) {
-        cursor: pointer;
-    }
-
-.btn-flat {
-    box-shadow: none;
-    background-color: transparent;
-    color: #343434;
-    cursor: pointer;
-}
-
-    .btn-flat.disabled {
-        color: #b3b3b3;
-    }
-
-.btn {
-    padding: .6em 1.6em .6em 2em;
-}
-
-.btn-large {
-    padding: 1em 2em;
-}
-
-.btn.btn-inline {
-    padding: .6em 1.25em .6em 34px;
-}
-
-.btn-large i {
-    font-size: 1.6rem;
-}
-
-.btn-floating-large i {
-    font-size: 1.6rem;
-}
-
-
-.btn, .btn-large {
-    background-color: #38c;
-}
-
-.btnAction {
-    background-color: #ee6e73;
-}
-
-.btnAltAction {
-    background-color: #ff8f00;
-}
-
-.btnActionAccent {
-    background-color: #52B54B;
-}
-
-.btnWarningAccent {
-    background-color: #FF6A00;
-}
-
-.btnDarkAccent {
-    background-color: #666;
-}
-
-.btn, .btn-large {
-    color: #fff !important;
-    font-weight: 500 !important;
-    font-size: 15px;
-    font-family: Roboto !important;
-}
-
-.btn-inline {
-    display: inline-block;
-    width: auto;
-    margin-bottom: 0;
-    padding: .6em .5em .6em .5em !important;
-}
-
-button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
-    width: 100%;
-}
-
-.btn i, .btn-large i, .btn-floating-large i, .btn span, .btn-large span {
-    vertical-align: middle;
-}
-
-.btn:not(.btn-inline):not(.btnNoText):not(.btnIconRight) i {
-    position: absolute;
-    left: 10px;
-}
-
-.btnIconRight:not(.btn-inline):not(.btnNoText) i {
-    position: absolute;
-    right: 10px;
-}
-
-.btn-large i {
-    position: absolute;
-    left: 24px;
-    top: 22px;
-}
-
-.btnNoText {
-    padding: .6em .5em !important;
-}
-
-.btnNoText {
-    border-radius: 5px;
-}

dashboard-ui/scripts/site.js

@@ -2065,7 +2065,7 @@ var AppInfo = {};
         }
     }
 
-    function init(deferred, capabilities, appName, appVersion, deviceId, deviceName) {
+    function initRequire() {
 
         var urlArgs = "v=" + window.dashboardVersion;
 
@@ -2082,7 +2082,8 @@ var AppInfo = {};
             medialibrarycreator: 'components/medialibrarycreator/medialibrarycreator',
             medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor',
             howler: 'bower_components/howler.js/howler.min',
-            sortable: 'bower_components/Sortable/Sortable.min'
+            sortable: 'bower_components/Sortable/Sortable.min',
+            masonry: 'bower_components/masonry/dist/masonry.pkgd.min'
         };
 
         if (Dashboard.isRunningInCordova()) {
@@ -2091,14 +2092,16 @@ var AppInfo = {};
             paths.prompt = "components/prompt";
         }
 
-        paths.masonry = "bower_components/masonry/dist/masonry.pkgd.min";
-
         requirejs.config({
             urlArgs: urlArgs,
 
             paths: paths
         });
 
+    }
+
+    function init(deferred, capabilities, appName, appVersion, deviceId, deviceName) {
+
         // Required since jQuery is loaded before requireJs
         define('jquery', [], function () {
             return jQuery;
@@ -2451,14 +2454,26 @@ var AppInfo = {};
     setAppInfo();
     setDocumentClasses();
 
-    $(document).on('WebComponentsReady', function () {
+    function onWebComponentsReady() {
-
         if (Dashboard.isRunningInCordova()) {
             initCordova(initDeferred);
         } else {
             init(initDeferred, Dashboard.capabilities());
         }
-    });
+    }
+
+    initRequire();
+
+    if ('registerElement' in document && 'content' in document.createElement('template')) {
+        onWebComponentsReady();
+    } else {
+
+        $(document).on('WebComponentsReady', function() {
+
+            setTimeout(onWebComponentsReady, 200);
+        });
+        require(['bower_components/webcomponentsjs/webcomponents-lite.js']);
+    }
 
 })();