mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update lazy images

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-25 14:33:17 -04:00
parent 8379939279
commit 0bdb63bcff
8 changed files with 34 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

82
dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html vendored
View file

@ -1,8 +1,8 @@
<script>
//require(['imageFetcher'], function (imageFetcher) {
// window.ImageFetcherLazyloadImage = imageFetcher;
//});
require(['imageFetcher'], function (imageFetcher) {
window.ImageFetcherLazyloadImage = imageFetcher;
});
/**
* <lazyload-image>
@ -16,83 +16,25 @@
'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;
ImageFetcherLazyloadImage.loadImage(that, src);
} else {
that.loadingSrc = null;
}
} else if (!src) {
that.src = FALLBACK_IMAGE;
}
});
}
// lifecycle callbacks
LazyloadImagePrototype.createdCallback = function () {
var that = this;
if (window.ImageFetcherLazyloadImage) {
// 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.createdCallback = function () {
//};
LazyloadImagePrototype.detachedCallback = function () {
LazyloadImagePrototype.attachedCallback = function () {
if (this.observer) {
// later, you can stop observing
this.observer.disconnect();
var original = this.currentSrc || this.src;
if (original && window.ImageFetcherLazyloadImage) {
//console.log(original);
this.src = FALLBACK_IMAGE;
console.log('loading ' + original);
ImageFetcherLazyloadImage.loadImage(this, original);
}
};
return document.registerElement('lazyload-image', {

6
dashboard-ui/bower_components/iron-icon/.bower.json vendored
View file

@ -32,14 +32,14 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-icon",
"homepage": "https://github.com/polymerelements/iron-icon",
"_release": "1.0.8",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
},
"_source": "git://github.com/PolymerElements/iron-icon.git",
"_source": "git://github.com/polymerelements/iron-icon.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-icon"
"_originalSource": "polymerelements/iron-icon"
}

2
dashboard-ui/components/ironcardlist/ironcardlist.js
View file

@ -2,7 +2,7 @@
function getTemplate(scrollTarget) {
var maxPhysical = 80;
var maxPhysical = 200;
// is="lazyload-image"

2
dashboard-ui/components/ironcardlist/ironcardlist.template.html
View file

@ -6,7 +6,7 @@
<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}}" />
<img is="lazyload-image" class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
<div inner-h-t-m-l="{{item.overlayHtml}}"></div>
</a>
</div>

2
dashboard-ui/css/librarybrowser.css
View file

@ -1192,7 +1192,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
}
.layout-desktop .absolutePageTabContent .alphabetPicker {
right: 15px;
right: 20px;
}
.alphabetPicker a {

5
dashboard-ui/scripts/episodes.js
View file

@ -183,7 +183,7 @@
self.showFilterMenu();
});
tabContent.querySelector('.btnSort').addEventListener('click', function () {
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({
items: [{
name: Globalize.translate('OptionNameSort'),
@ -224,7 +224,8 @@
callback: function () {
reloadItems(tabContent);
},
query: getQuery(tabContent)
query: getQuery(tabContent),
button: e.target
});
});

10
dashboard-ui/scripts/site.js
View file

@ -3107,11 +3107,11 @@ pageClassOn('viewshow', "page", function () {
page.classList.remove('ui-body-a');
}
if (currentTheme != 'a' && !browserInfo.mobile) {
document.documentElement.classList.add('darkScrollbars');
} else {
document.documentElement.classList.remove('darkScrollbars');
}
//if (currentTheme != 'a' && !browserInfo.mobile) {
// document.documentElement.classList.add('darkScrollbars');
//} else {
// document.documentElement.classList.remove('darkScrollbars');
//}
var apiClient = window.ApiClient;

11
dashboard-ui/scripts/tvshows.js
View file

@ -153,7 +153,6 @@
// Hack: notifyResize needs to be done after the items have been rendered
setTimeout(function () {
ironList.notifyResize();
self.scrollThreshold.resetSize();
}, 300);
@ -213,7 +212,7 @@
self.showFilterMenu();
});
tabContent.querySelector('.btnSort').addEventListener('click', function () {
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({
items: [{
name: Globalize.translate('OptionNameSort'),
@ -251,7 +250,8 @@
getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent);
},
query: getQuery(tabContent)
query: getQuery(tabContent),
button: e.target
});
});
@ -287,6 +287,11 @@
tabContent.querySelector('.itemsContainer').innerHTML = html;
self.listCreated = true;
return new Promise(function (resolve, reject) {
setTimeout(resolve, 2000);
});
});
}