mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update lazy loading
This commit is contained in:
parent
bcb026427e
commit
67bc4c227e
5 changed files with 52 additions and 39 deletions
|
@ -1,37 +0,0 @@
|
||||||
define(['layoutManager', 'iron-list', 'lazyload-image'], function (layoutManager) {
|
|
||||||
|
|
||||||
function getTemplate(scrollTarget) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var maxPhysical = 80;
|
|
||||||
|
|
||||||
// is="lazyload-image"
|
|
||||||
|
|
||||||
html += '<template is="dom-bind">\
|
|
||||||
<iron-list as="item" id="ironList" scroll-target="' + scrollTarget + '" max-physical-count="' + maxPhysical + '" style="width:96%;" grid>\
|
|
||||||
<template>\
|
|
||||||
<div class$="{{item.elemClass}}" data-action$="{{item.defaultAction}}" data-itemid$="{{item.data-itemid}}" data-commands$="{{item.data-commands}}" data-context$="{{item.data-context}}" data-isfolder$="{{item.data-isfolder}}" data-itemtype$="{{item.data-itemtype}}" data-mediatype$="{{item.data-mediatype}}" data-positionticks$="{{item.data-positionticks}}" data-playaccess$="{{item.data-playaccess}}" data-locationtype$="{{item.data-locationtype}}" data-index$="{{item.data-index}}" data-albumid$="{{item.data-albumid}}" data-channelid$="{{item.data-channelid}}" data-artistid$="{{item.data-artistid}}">\
|
|
||||||
<div class$="{{item.cardBoxClass}}">\
|
|
||||||
<div class="cardScalable">\
|
|
||||||
<div class="cardPadder"></div>\
|
|
||||||
<a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">\
|
|
||||||
<img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />\
|
|
||||||
<div inner-h-t-m-l="{{item.overlayHtml}}"></div>\
|
|
||||||
</a>\
|
|
||||||
</div>\
|
|
||||||
<div inner-h-t-m-l="{{item.footerHtml}}"></div>\
|
|
||||||
</div>\
|
|
||||||
</div>\
|
|
||||||
</template>\
|
|
||||||
</iron-list>\
|
|
||||||
</template>';
|
|
||||||
|
|
||||||
return Promise.resolve(html);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
getTemplate: getTemplate
|
|
||||||
};
|
|
||||||
|
|
||||||
});
|
|
32
dashboard-ui/components/ironcardlist/ironcardlist.js
Normal file
32
dashboard-ui/components/ironcardlist/ironcardlist.js
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
define(['iron-list', 'lazyload-image'], function () {
|
||||||
|
|
||||||
|
function getTemplate(scrollTarget) {
|
||||||
|
|
||||||
|
var maxPhysical = 80;
|
||||||
|
|
||||||
|
// is="lazyload-image"
|
||||||
|
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', 'components/ironcardlist/ironcardlist.template.html', true);
|
||||||
|
|
||||||
|
xhr.onload = function (e) {
|
||||||
|
|
||||||
|
var html = this.response;
|
||||||
|
|
||||||
|
html = html.replace('${maxphysical}', maxPhysical);
|
||||||
|
html = html.replace('${scrolltarget}', scrollTarget);
|
||||||
|
|
||||||
|
resolve(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.send();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
getTemplate: getTemplate
|
||||||
|
};
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template is="dom-bind">
|
||||||
|
<iron-list as="item" id="ironList" scroll-target="${scrolltarget}" max-physical-count="${maxphysical}" style="width:96%;" grid>
|
||||||
|
<template>
|
||||||
|
<div class$="{{item.elemClass}}" data-action$="{{item.defaultAction}}" data-itemid$="{{item.data-itemid}}" data-commands$="{{item.data-commands}}" data-context$="{{item.data-context}}" data-isfolder$="{{item.data-isfolder}}" data-itemtype$="{{item.data-itemtype}}" data-mediatype$="{{item.data-mediatype}}" data-positionticks$="{{item.data-positionticks}}" data-playaccess$="{{item.data-playaccess}}" data-locationtype$="{{item.data-locationtype}}" data-index$="{{item.data-index}}" data-albumid$="{{item.data-albumid}}" data-channelid$="{{item.data-channelid}}" data-artistid$="{{item.data-artistid}}">
|
||||||
|
<div class$="{{item.cardBoxClass}}">
|
||||||
|
<div class="cardScalable">
|
||||||
|
<div class="cardPadder"></div>
|
||||||
|
<a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">
|
||||||
|
<img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
|
||||||
|
<div inner-h-t-m-l="{{item.overlayHtml}}"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div inner-h-t-m-l="{{item.footerHtml}}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</iron-list>
|
||||||
|
</template>
|
|
@ -1,4 +1,4 @@
|
||||||
define(['appSettings'], function (appSettings) {
|
define(['appSettings', 'paper-button'], function (appSettings) {
|
||||||
|
|
||||||
function getReleases() {
|
function getReleases() {
|
||||||
|
|
||||||
|
|
|
@ -1606,7 +1606,7 @@ var AppInfo = {};
|
||||||
var paths = {
|
var paths = {
|
||||||
velocity: bowerPath + "/velocity/velocity.min",
|
velocity: bowerPath + "/velocity/velocity.min",
|
||||||
tvguide: 'components/tvguide/tvguide',
|
tvguide: 'components/tvguide/tvguide',
|
||||||
ironCardList: 'components/ironcardlist',
|
ironCardList: 'components/ironcardlist/ironcardlist',
|
||||||
scrollThreshold: 'components/scrollthreshold',
|
scrollThreshold: 'components/scrollthreshold',
|
||||||
directorybrowser: 'components/directorybrowser/directorybrowser',
|
directorybrowser: 'components/directorybrowser/directorybrowser',
|
||||||
collectioneditor: 'components/collectioneditor/collectioneditor',
|
collectioneditor: 'components/collectioneditor/collectioneditor',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue