add iron card list

dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html

@@ -0,0 +1,107 @@
+<script>
+    
+    require(['imageFetcher'], function (imageFetcher) {
+        window.ImageFetcherLazyloadImage = imageFetcher;
+    });
+
+    /**
+     * <lazyload-image>
+     * HTMLImageElement extension for lazy loading.
+     * http://github.com/1000ch/lazyload-image
+     *
+     * Copyright 1000ch
+     * licensed under the MIT license.
+     */
+    window.LazyloadImage = (function () {
+        'use strict';
+
+        var FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
+        var DEFAULT_OFFSET = 0;
+
+        // create prototype from HTMLImageElement
+        var LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
+
+        function fadeIn(elem) {
+
+            if (elem.classList.contains('noFade')) {
+                return;
+            }
+
+            var keyframes = [
+              { opacity: '0', offset: 0 },
+              { opacity: '1', offset: 1 }];
+            var timing = { duration: 300, iterations: 1 };
+            elem.animate(keyframes, timing);
+        }
+
+        function imgObserver(that, mutations) {
+            mutations.forEach(function (mutation) {
+
+                if (mutation.attributeName != 'src') {
+                    return;
+                }
+
+                var src = that.src;
+
+                if (src && src != FALLBACK_IMAGE) {
+
+                    if (!that.loadingSrc) {
+                        that.src = FALLBACK_IMAGE;
+                        that.loadingSrc = src;
+
+                        if (ImageFetcherLazyloadImage) {
+                            ImageFetcherLazyloadImage.loadImage(that, src);
+                        } else {
+                            that.src = src;
+                        }
+                    } else {
+                        that.loadingSrc = null;
+                    }
+
+                } else if (!src) {
+                    that.src = FALLBACK_IMAGE;
+                }
+            });
+        }
+
+        //// lifecycle callbacks
+        //LazyloadImagePrototype.createdCallback = function () {
+
+        //    var that = this;
+
+        //    // swap original src attribute
+        //    this.original = this.currentSrc || this.src;
+        //    this.src = FALLBACK_IMAGE;
+
+        //    var observer = new MutationObserver(function (mutations) {
+        //        imgObserver(that, mutations);
+        //    });
+
+        //    // pass in the target node, as well as the observer options
+        //    observer.observe(this, { attributes: true, childList: false, characterData: false });
+
+        //    this.observer = observer;
+        //};
+
+        //LazyloadImagePrototype.attachedCallback = function () {
+
+
+        //};
+
+        LazyloadImagePrototype.detachedCallback = function () {
+
+            if (this.observer) {
+                // later, you can stop observing
+                this.observer.disconnect();
+            }
+
+        };
+
+        return document.registerElement('lazyload-image', {
+            prototype: LazyloadImagePrototype,
+            extends: 'img'
+        });
+
+    })();
+
+</script>

dashboard-ui/components/ironcardlist.js

@@ -0,0 +1,32 @@
+define(['iron-list', 'lazyload-image'], function () {
+
+    function getTemplate(scrollTarget) {
+
+        var html = '';
+
+        html += '<template is="dom-bind">\
+	<iron-list as="item" id="ironList" scroll-target="' + scrollTarget + '" max-physical-count="60" style="width:96%;" grid>\
+		<template>\
+			<div class$="{{item.elemClass}}" data-action$="{{item.defaultAction}}">\
+				<div class$="{{item.cardBoxClass}}">\
+					<div class="cardScalable">\
+						<div class="cardPadder"></div>\
+						<a onclick$="{{item.onclick}}" class$="{{item.anchorClass}}" href$="{{item.href}}">\
+							<img class$="{{item.imageClass}}" is="lazyload-image" src$="{{item.imgUrl}}" />\
+						</a>\
+					</div>\
+					<!--cardFooter will be here-->\
+				</div>\
+			</div>\
+		</template>\
+	</iron-list>\
+</template>';
+
+        return Promise.resolve(html);
+    }
+
+    return {
+        getTemplate: getTemplate
+    };
+
+});

dashboard-ui/scripts/site.js

@@ -1606,6 +1606,7 @@ var AppInfo = {};
         var paths = {
             velocity: bowerPath + "/velocity/velocity.min",
             tvguide: 'components/tvguide/tvguide',
+            ironCardList: 'components/ironcardlist',
             directorybrowser: 'components/directorybrowser/directorybrowser',
             collectioneditor: 'components/collectioneditor/collectioneditor',
             playlisteditor: 'components/playlisteditor/playlisteditor',
@@ -1714,6 +1715,7 @@ var AppInfo = {};
         // Done
         define("emby-icons", ["html!" + bowerPath + "/emby-icons/emby-icons.html"]);
 
+        define("lazyload-image", ["html!" + bowerPath + "/emby-lazyload-image/lazyload-image.html"]);
         define("paper-spinner", ["html!" + bowerPath + "/paper-spinner/paper-spinner.html"]);
         define("paper-toast", ["html!" + bowerPath + "/paper-toast/paper-toast.html"]);
         define("paper-slider", ["html!" + bowerPath + "/paper-slider/paper-slider.html"]);
@@ -2732,7 +2734,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/tv.html',
-            dependencies: ['paper-tabs', 'paper-checkbox'],
+            dependencies: ['paper-tabs', 'paper-checkbox', 'paper-button'],
             autoFocus: false,
             controller: 'scripts/tvrecommended'
         });