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

add item flyouts

Browse source
This commit is contained in:
Luke Pulverenti 2015-05-14 22:16:57 -04:00
parent ce35317652
commit 4b2be0b97a
16 changed files with 478 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

7
dashboard-ui/css/card.css
View file

@ -84,13 +84,6 @@
margin: 12px;
}
@media all and (min-width: 600px) {
.largeCardMargin .visualCardBox {
margin: 18px;
}
}
.ui-page-theme-b .visualCardBox {
background: rgba(45,45,45,.85);
border-radius: 3px;

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

@ -20,6 +20,10 @@
background-color: rgba(240, 240,240, .94) !important;
}
.ui-page-theme-b {
background-color: #1f1f1f;
}
.backdropPage.ui-page-theme-b {
background-color: rgba(20, 20,20, .86) !important;
}
@ -1283,80 +1287,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
text-decoration: none;
}
.groupingMenu {
width: 240px;
}
.groupingMenuScroller {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 1em;
}
@media all and (min-width: 400px) {
.groupingMenu {
width: 360px;
}
}
@media all and (min-width: 500px) {
.groupingMenu {
width: 460px;
}
}
@media all and (min-width: 600px) {
.groupingMenu {
width: 560px;
}
}
@media all and (min-width: 700px) {
.groupingMenu {
width: 660px;
}
}
@media all and (min-width: 800px) {
.groupingMenu {
width: 760px;
}
}
@media all and (min-width: 900px) {
.groupingMenu {
width: 860px;
}
}
@media all and (min-width: 1000px) {
.groupingMenu {
width: 960px;
}
}
@media all and (min-width: 1100px) {
.groupingMenu {
width: 1060px;
}
}
@media all and (min-width: 1200px) {
.groupingMenu {
width: 1160px;
}
}
.itemsContainer:not(.fullWidthItemsContainer) .itemsListview {
max-width: 800px;
@ -1547,3 +1477,126 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.homeFavoritesTabDisabled .homeFavoritesTab {
display: none !important;
}
.detailsMenu {
width: 280px;
}
@media all and (min-width: 360px) {
.detailsMenu {
width: 320px;
}
}
@media all and (min-width: 400px) {
.detailsMenu {
width: 340px;
}
}
@media all and (min-width: 500px) {
.detailsMenu {
width: 440px;
}
}
@media all and (min-width: 600px) {
.detailsMenu {
width: 540px;
}
}
@media all and (min-width: 700px) {
.detailsMenu {
width: 640px;
}
}
@media all and (min-width:800px) {
.detailsMenu {
width: 740px;
}
}
.detailsMenuLeftButton {
position: absolute;
left: 0;
top: 0;
padding: 23px 15px;
}
.detailsMenuRightButton {
position: absolute;
right: 0;
top: 0;
padding: 23px 15px;
}
.detailsMenuHeaderWithLogo .detailsMenuLeftButton, .detailsMenuHeaderWithLogo .detailsMenuRightButton {
padding-top: 30px;
padding-bottom: 30px;
}
.detailsMenuContentInner {
height: 200px;
}
.detailsMenuOverview {
max-height: 30px;
text-overflow: ellipsis;
overflow-y: hidden;
}
.detailsMenuButtons {
padding: 1em 0 .5em;
text-transform: uppercase;
text-align: center;
}
.detailsMenuButtons .btn {
font-size: 14px;
}
.detailsMenuButtonContainer {
display: inline-block;
}
.detailsMenuButtonContainer span {
padding-left: 1em;
}
.detailsMenuButtonContainer + .detailsMenuButtonContainer {
margin-left: 1em;
}
.detailsMenu h3 {
padding: 0 30px;
}
@media all and (min-height:500px) {
.detailsMenuContentInner {
height: 300px;
}
.detailsMenuOverview {
max-height: 120px;
}
}
@media all and (min-height:600px) {
.detailsMenuContentInner {
height: 400px;
}
.detailsMenuOverview {
max-height: 220px;
}
}

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

@ -69,7 +69,8 @@
showParentTitle: true,
overlayText: true,
lazy: true,
context: 'tv'
context: 'tv',
showDetailsMenu: true
});
}
else if (view == "PosterCard") {
@ -80,7 +81,8 @@
showParentTitle: true,
lazy: true,
context: 'tv',
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
}

3
dashboard-ui/scripts/favorites.js
View file

@ -48,7 +48,8 @@
context: 'home-favorites',
showTitle: section.showTitle,
showParentTitle: section.showParentTitle,
lazy: true
lazy: true,
showDetailsMenu: true
});
if (result.TotalRecordCount > result.Items.length) {

17
dashboard-ui/scripts/indexpage.js
View file

@ -161,7 +161,8 @@
lazy: true,
cardLayout: cardLayout,
showTitle: cardLayout,
showYear: cardLayout
showYear: cardLayout,
showDetailsMenu: true
});
html += '</div>';
}
@ -196,7 +197,8 @@
shape: 'auto',
showTitle: true,
centerText: true,
lazy: true
lazy: true,
showDetailsMenu: true
});
html += '</div>';
}
@ -251,7 +253,7 @@
html += '</div>';
}
$(elem).html(html).lazyChildren().createCardMenus();
$(elem).html(html).lazyChildren().createCardMenus({ showDetailsMenu: false });
handleLibraryLinkNavigations(elem);
});
@ -294,7 +296,8 @@
showParentTitle: true,
context: 'home',
lazy: true,
cardLayout: cardLayout
cardLayout: cardLayout,
showDetailsMenu: true
});
html += '</div>';
}
@ -384,7 +387,8 @@
showTitle: true,
centerText: true,
context: 'channels',
lazy: true
lazy: true,
showDetailsMenu: true
});
html += '</div>';
@ -424,7 +428,8 @@
showParentTitle: true,
overlayText: screenWidth >= 600,
coverImage: true,
lazy: true
lazy: true,
showDetailsMenu: true
});
elem.html(html).lazyChildren().trigger('create');

14
dashboard-ui/scripts/itemdetailpage.js
View file

@ -666,7 +666,8 @@
borderless: item.Type == "Game",
context: context,
overlayText: item.Type != "MusicAlbum",
lazy: true
lazy: true,
showDetailsMenu: true
});
$('#similarContent', page).html(html).lazyChildren();
@ -866,7 +867,8 @@
context: context,
playFromHere: true,
overlayText: true,
lazy: true
lazy: true,
showDetailsMenu: true
});
}
else if (item.Type == "GameSystem") {
@ -876,7 +878,8 @@
showTitle: true,
centerText: true,
context: context,
lazy: true
lazy: true,
showDetailsMenu: true
});
}
@ -982,13 +985,14 @@
showTitle: true,
centerText: true,
context: context,
lazy: true
lazy: true,
showDetailsMenu: true
});
html += '</div>';
html += '</div>';
$('.collectionItems', page).append(html);
$('.collectionItems', page).append(html).lazyChildren();
}
function renderUserDataIcons(page, item) {

7
dashboard-ui/scripts/librarybrowser.js
View file

@ -884,6 +884,10 @@
atts.push('data-locationtype="' + (item.LocationType || '') + '"');
atts.push('data-index="' + index + '"');
if (options.showDetailsMenu) {
atts.push('data-detailsmenu="true"');
}
var html = atts.join(' ');
if (html) {
@ -1689,7 +1693,8 @@
return {
id: itemId,
index: index,
mediaType: mediaType
mediaType: mediaType,
context: elemWithAttributes.getAttribute('data-context')
};
},

323
dashboard-ui/scripts/librarylist.js
View file

@ -492,8 +492,6 @@
function onGroupedCardClick(e) {
var target = $(e.target);
var card = this;
var itemId = card.getAttribute('data-itemid');
var context = card.getAttribute('data-context');
@ -502,8 +500,6 @@
var userId = Dashboard.getCurrentUserId();
var promise1 = ApiClient.getItem(userId, itemId);
var options = {
Limit: parseInt($('.playedIndicator', card).html() || '10'),
@ -512,59 +508,285 @@
GroupItems: false
};
var promise2 = ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options));
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
$.when(promise1, promise2).done(function (response1, response2) {
var item = response1[0];
var latestItems = response2[0];
if (latestItems.length == 1) {
if (!target.is('a,button')) {
var first = latestItems[0];
Dashboard.navigate(LibraryBrowser.getHref(first, context));
return;
}
}
var html = '<div data-role="popup" class="groupingMenu" data-transition="slide" style="background:rgba(0,0,0,.85);border:0;padding:0;">';
var href = card.href || LibraryBrowser.getHref(item, context);
var header = Globalize.translate('HeaderLatestFromChannel').replace('{0}', '<a href="' + href + '" style="outline:0;">' + item.Name + '</a>');
html += '<h3 style="padding:.5em 1em;background:#222;margin:0;">' + header + '</h3>';
html += '<div class="groupingMenuScroller">';
html += LibraryBrowser.getPosterViewHtml({
items: latestItems,
shape: "detailPage169",
showTitle: true,
overlayText: true,
lazy: true,
context: context
var ids = items.map(function (i) {
return i.Id;
});
html += '</div>';
html += '</div>';
$($.mobile.activePage).append(html);
$('.groupingMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
$(card).removeClass('hasContextMenu');
}).lazyChildren();
showItemsOverlay({
ids: ids,
context: context
});
});
e.preventDefault();
return false;
}
function getItemsOverlay(ids, context) {
$.fn.createCardMenus = function () {
var html = '<div data-role="popup" class="detailsMenu" data-transition="slidedown" style="border:0;padding:0;" data-ids="' + ids.join(',') + '" data-context="' + (context || '') + '">';
html += '<div style="padding:1em 1em;background:rgba(20,20,20,1);margin:0;text-align:center;" class="detailsMenuHeader">';
html += '<button type="button" class="imageButton detailsMenuLeftButton" data-role="none"><i class="fa fa-arrow-left"></i></button>';
html += '<h3 style="font-weight:400;margin:.5em 0;"></h3>';
html += '<button type="button" class="imageButton detailsMenuRightButton" data-role="none"><i class="fa fa-arrow-right"></i></button>';
html += '</div>';
html += '<div class="detailsMenuContent" style="background-position:center center;background-repeat:no-repeat;background-size:cover;">';
html += '<div style="padding:.5em 1em 1em;background:rgba(0,0,0,.80);" class="detailsMenuContentInner">';
html += '</div>';
html += '</div>';
html += '</div>';
$($.mobile.activePage).append(html);
var elem = $('.detailsMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
});
$('.detailsMenuLeftButton', elem).on('click', function () {
var overlay = $(this).parents('.detailsMenu');
setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) - 1, context);
});
$('.detailsMenuRightButton', elem).on('click', function () {
var overlay = $(this).parents('.detailsMenu');
setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) + 1, context);
});
return elem;
}
function setItemIntoOverlay(elem, index) {
var ids = elem.attr('data-ids').split(',');
var itemId = ids[index];
var userId = Dashboard.getCurrentUserId();
var context = elem.attr('data-context');
elem.attr('data-index', index);
if (index > 0) {
$('.detailsMenuLeftButton', elem).show();
} else {
$('.detailsMenuLeftButton', elem).hide();
}
if (index < ids.length - 1) {
$('.detailsMenuRightButton', elem).show();
} else {
$('.detailsMenuRightButton', elem).hide();
}
var promise1 = ApiClient.getItem(userId, itemId);
var promise2 = Dashboard.getCurrentUser();
$.when(promise1, promise2).done(function (response1, response2) {
var item = response1[0];
var user = response2[0];
var background = 'none';
if (!AppInfo.hasLowImageBandwidth) {
var backdropUrl;
var screenWidth = $(window).width();
var backdropWidth = Math.min(screenWidth, 800);
if (item.BackdropImageTags && item.BackdropImageTags.length) {
backdropUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
index: 0,
maxWidth: backdropWidth,
tag: item.BackdropImageTags[0]
});
}
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
backdropUrl = ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
type: 'Backdrop',
index: 0,
tag: item.ParentBackdropImageTags[0],
maxWidth: backdropWidth
});
}
if (backdropUrl) {
background = 'url(' + backdropUrl + ')';
}
}
$('.detailsMenuContent', elem).css('backgroundImage', background);
var headerHtml = LibraryBrowser.getPosterViewDisplayName(item);
$('.detailsMenuHeader', elem).removeClass('detailsMenuHeaderWithLogo');
if (!AppInfo.hasLowImageBandwidth) {
var logoUrl;
var logoHeight = 30;
if (item.ImageTags && item.ImageTags.Logo) {
logoUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Logo",
index: 0,
height: logoHeight,
tag: item.ImageTags.Logo
});
}
if (logoUrl) {
headerHtml = '<img src="' + logoUrl + '" style="height:' + logoHeight + 'px;" />';
$('.detailsMenuHeader', elem).addClass('detailsMenuHeaderWithLogo');
}
}
$('h3', elem).html(headerHtml);
var contentHtml = '';
var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
if (miscInfo) {
contentHtml += '<p>' + miscInfo + '</p>';
}
var userData = LibraryBrowser.getUserDataIconsHtml(item);
if (userData) {
contentHtml += '<p>' + userData + '</p>';
}
var ratingHtml = LibraryBrowser.getRatingHtml(item);
if (ratingHtml) {
contentHtml += '<p>' + ratingHtml + '</p>';
}
if (item.Overview) {
contentHtml += '<p class="detailsMenuOverview">' + item.Overview + '</p>';
}
contentHtml += '<div class="detailsMenuButtons">';
if (MediaController.canPlay(item)) {
if (item.MediaType == 'Video' && !item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnAltAction btnResume">';
contentHtml += '<i class="fa fa-play"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonResume') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnActionAccent btnPlay">';
contentHtml += '<i class="fa fa-play"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonPlay') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="' + LibraryBrowser.getHref(item, context) + '" class="btn" style="background-color: #673AB7;">';
contentHtml += '<i class="fa fa-folder-open"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonOpen') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
if (SyncManager.isAvailable(item, user)) {
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnSync">';
contentHtml += '<i class="fa fa-cloud"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonSync') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '</div>';
$('.detailsMenuContentInner', elem).html(contentHtml).trigger('create');
$('.btnSync', elem).on('click', function () {
elem.popup('close');
SyncManager.showMenu({
items: [item]
});
});
$('.btnPlay', elem).on('click', function () {
elem.popup('close');
MediaController.play({
items: [item]
});
});
$('.btnResume', elem).on('click', function () {
elem.popup('close');
MediaController.play({
items: [item],
startPositionTicks: item.UserData.PlaybackPositionTicks
});
});
});
}
function showItemsOverlay(options) {
var context = options.context;
var elem = getItemsOverlay(options.ids, context);
setItemIntoOverlay(elem, 0);
}
function onCardClick() {
var info = LibraryBrowser.getListItemInfo(this);
var itemId = info.id;
var context = info.context;
var card = $(this);
if (card.hasClass('itemWithAction')) {
return;
}
if (!card.hasClass('card')) {
card = $(card).parents('.card');
}
if (card.hasClass('groupedCard')) {
return;
}
if (card.attr('data-detailsmenu') != 'true') {
return;
}
showItemsOverlay({
ids: [itemId],
context: context
});
return false;
}
$.fn.createCardMenus = function (options) {
var preventHover = false;
@ -643,8 +865,7 @@
preventHover = true;
}
return this
.off('.cardMenu')
this.off('.cardMenu')
.on('contextmenu.cardMenu', '.card', onCardTapHold)
.off('.latestgroupings')
.on('click.latestgroupings', '.groupedCard', onGroupedCardClick)
@ -654,6 +875,10 @@
.on('mouseenter.cardHoverMenu', '.card:not(.bannerCard)', onHoverIn)
.on('mouseleave.cardHoverMenu', '.card:not(.bannerCard)', onHoverOut)
.on("touchstart.cardHoverMenu", '.card:not(.bannerCard)', preventTouchHover);
this.off('.mediaDetails').on('click.mediaDetails', '.mediaItem', onCardClick);
return this;
};
function toggleSelections(page) {

18
dashboard-ui/scripts/movies.js
View file

@ -64,7 +64,8 @@
preferThumb: true,
context: 'movies',
lazy: true,
overlayText: true
overlayText: true,
showDetailsMenu: true
});
}
else if (view == "ThumbCard") {
@ -77,7 +78,8 @@
lazy: true,
showTitle: true,
cardLayout: true,
showYear: true
showYear: true,
showDetailsMenu: true
});
}
else if (view == "Banner") {
@ -87,7 +89,8 @@
shape: "banner",
preferBanner: true,
context: 'movies',
lazy: true
lazy: true,
showDetailsMenu: true
});
}
else if (view == "List") {
@ -106,7 +109,8 @@
context: 'movies',
centerText: true,
lazy: true,
overlayText: true
overlayText: true,
showDetailsMenu: true
});
}
else if (view == "PosterCard") {
@ -117,7 +121,8 @@
showTitle: true,
showYear: true,
lazy: true,
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
}
else if (view == "Timeline") {
@ -128,7 +133,8 @@
showTitle: true,
timeline: true,
centerText: true,
lazy: true
lazy: true,
showDetailsMenu: true
});
}

15
dashboard-ui/scripts/moviesrecommended.js
View file

@ -49,7 +49,8 @@
overlayText: false,
showTitle: true,
showYear: true,
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
@ -107,7 +108,8 @@
showTitle: true,
showYear: true,
lazy: true,
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
@ -119,7 +121,8 @@
shape: 'backdrop',
overlayText: true,
showTitle: true,
lazy: true
lazy: true,
showDetailsMenu: true
});
}
@ -167,7 +170,8 @@
overlayText: false,
showTitle: true,
showYear: true,
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
@ -178,7 +182,8 @@
shape: "portrait",
centerText: true,
lazy: true,
overlayText: true
overlayText: true,
showDetailsMenu: true
});
}
html += '</div>';

3
dashboard-ui/scripts/movietrailers.js
View file

@ -57,7 +57,8 @@
showTitle: true,
showYear: true,
lazy: true,
cardLayout: true
cardLayout: true,
showDetailsMenu: true
});
var elem = $('.itemsContainer', page).html(html).lazyChildren();

6
dashboard-ui/scripts/musicvideos.js
View file

@ -52,7 +52,8 @@
context: 'music',
showTitle: true,
lazy: true,
centerText: true
centerText: true,
showDetailsMenu: true
});
}
else if (view == "PosterCard") {
@ -65,7 +66,8 @@
centerText: true,
cardLayout: true,
lazy: true,
showParentTitle: true
showParentTitle: true,
showDetailsMenu: true
});
}

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

@ -1367,10 +1367,10 @@ var Dashboard = {
if (AppInfo.hasLowImageBandwidth) {
quality -= 20;
quality -= 50;
if (isBackdrop) {
quality -= 20;
//quality -= 20;
}
}
@ -1816,12 +1816,14 @@ $(document).on('pagecreate', ".page", function () {
if (current && current != newTheme) {
page.page("option", "theme", newTheme);
}
current = newTheme;
}
if (current == 'b') {
$(document.body).addClass('darkScrollbars');
} else {
$(document.body).addClass('removeScrollbars');
$(document.body).removeClass('darkScrollbars');
}
}).on('pageinit', ".page", function () {
@ -1831,7 +1833,7 @@ $(document).on('pagecreate', ".page", function () {
var require = this.getAttribute('data-require');
if (require) {
requirejs([require], function() {
requirejs([require], function () {
$(page).trigger('pageinitdepends');
});

12
dashboard-ui/scripts/tvrecommended.js
View file

@ -81,7 +81,8 @@
showParentTitle: true,
lazy: true,
cardLayout: true,
context: 'tv'
context: 'tv',
showDetailsMenu: true
});
} else if (view == 'Thumb') {
@ -94,7 +95,8 @@
overlayText: false,
context: context,
lazy: true,
preferThumb: true
preferThumb: true,
showDetailsMenu: true
});
}
@ -149,7 +151,8 @@
showParentTitle: true,
lazy: true,
cardLayout: true,
context: 'tv'
context: 'tv',
showDetailsMenu: true
});
} else if (view == 'Poster') {
@ -161,7 +164,8 @@
showParentTitle: true,
overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth,
lazy: true,
context: 'tv'
context: 'tv',
showDetailsMenu: true
});
}

1
dashboard-ui/scripts/tvupcoming.js
View file

@ -52,6 +52,7 @@
preferThumb: true,
context: context || 'home-upcoming',
lazy: true,
showDetailsMenu: true
})).lazyChildren();
});

240
dashboard-ui/thirdparty/jquery.unveil-custom.js vendored
View file

@ -309,7 +309,6 @@
setImageIntoElement(elem, localUrl);
}).fail(onFail);
};
}
@ -458,245 +457,6 @@
};
}
function indexedDbWebpImageStore() {
var self = this;
openDb().done(function (db) {
self._db = db;
window.ImageStore = self;
});
self.addImageToDatabase = function (blob, key) {
console.log("addImageToDatabase");
// Open a transaction to the database
var transaction = self.db().transaction([imagesStoreName], "readwrite");
// Put the blob into the dabase
var put = transaction.objectStore(imagesStoreName).put(blob, key);
};
self.db = function () {
return self._db;
};
self.get = function (key) {
var deferred = DeferredBuilder.Deferred();
var transaction = self.db().transaction([imagesStoreName], "readonly");
// Open a transaction to the database
var getRequest = transaction.objectStore(imagesStoreName).get(key);
getRequest.onsuccess = function (event) {
var imgFile = event.target.result;
if (imgFile) {
deferred.resolveWith(null, [imgFile]);
} else {
deferred.reject();
}
};
getRequest.onerror = function () {
deferred.reject();
};
return deferred.promise();
};
self.getImageUrl = function (originalUrl) {
console.log('getImageUrl:' + originalUrl);
var key = CryptoJS.SHA1(originalUrl).toString();
var deferred = DeferredBuilder.Deferred();
self.get(key).done(function (url) {
deferred.resolveWith(null, [url]);
}).fail(function () {
self.downloadImage(originalUrl, key).done(function () {
self.get(key).done(function (url) {
deferred.resolveWith(null, [url]);
}).fail(function () {
deferred.reject();
});
}).fail(function () {
deferred.reject();
});
});
return deferred.promise();
};
self.downloadImage = function (url, key) {
var deferred = DeferredBuilder.Deferred();
console.log('downloadImage:' + url);
// Create XHR
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
// Set the responseType to blob
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
try {
self.addImageToDatabase(this.response, key);
deferred.resolve();
} catch (err) {
console.log("Error adding image to database");
deferred.reject();
}
} else {
deferred.reject();
}
}, false);
// Send XHR
xhr.send();
return deferred.promise();
};
function decode(data, elem) {
console.log('decoding webp');
var WebPImage = { width: { value: 0 }, height: { value: 0 } }
var decoder = new WebPDecoder();
//Config, you can set all arguments or what you need, nothing no objeect
var config = decoder.WebPDecoderConfig;
var output_buffer = config.j;
var bitstream = config.input;
if (!decoder.WebPInitDecoderConfig(config)) {
throw new Error("Library version mismatch!\n");
}
var StatusCode = decoder.VP8StatusCode;
var status = decoder.WebPGetFeatures(data, data.length, bitstream);
if (status != 0) {
console.log('error');
}
var mode = decoder.WEBP_CSP_MODE;
output_buffer.J = 4;
status = decoder.WebPDecode(data, data.length, config);
var ok = (status == 0);
if (!ok) {
throw new Error("Decoding of %s failed.\n");
}
drawIntoElement(output_buffer, elem);
}
function drawIntoElement(output_buffer, elem) {
console.log('drawing canvas');
var bitmap = output_buffer.c.RGBA.ma;
var canvas = document.createElement("canvas");
var biHeight = output_buffer.height; var biWidth = output_buffer.width;
canvas.height = biHeight;
canvas.width = biWidth;
var context = canvas.getContext('2d');
var output = context.createImageData(canvas.width, canvas.height);
var outputData = output.data;
for (var h = 0; h < biHeight; h++) {
for (var w = 0; w < biWidth; w++) {
outputData[0 + w * 4 + (biWidth * 4) * h] = bitmap[1 + w * 4 + (biWidth * 4) * h];
outputData[1 + w * 4 + (biWidth * 4) * h] = bitmap[2 + w * 4 + (biWidth * 4) * h];
outputData[2 + w * 4 + (biWidth * 4) * h] = bitmap[3 + w * 4 + (biWidth * 4) * h];
outputData[3 + w * 4 + (biWidth * 4) * h] = bitmap[0 + w * 4 + (biWidth * 4) * h];
};
}
context.putImageData(output, 0, 0);
elem.appendChild(canvas);
}
self.setImageInto = function (elem, url) {
if (url.indexOf('format=webp') == -1 || elem.tagName != 'DIV') {
setImageIntoElement(elem, url);
return;
}
// Create XHR
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
// Set the responseType to blob
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
try {
var arr = new Uint8Array(this.response);
//// Convert the int array to a binary string
//// We have to use apply() as we are converting an *array*
//// and String.fromCharCode() takes one or more single values, not
//// an array.
//var raw = String.fromCharCode.apply(null, arr);
//// This works!!!
//var b64 = btoa(raw);
//var dataURL = "data:image/jpeg;base64," + b64;
console.log(url);
decode(arr, elem);
} catch (err) {
console.log("Error adding image to database");
}
} else {
}
}, false);
// Send XHR
xhr.send();
};
}
function simpleImageStore() {
var self = this;