arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Front-end rewrite #275

Browse Source
This commit is contained in:
Tobias Reich 2014-11-21 00:13:01 +01:00
parent 1e8e0d9852
commit 23720d4d53
2 changed files with 133 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.js vendored
View File

Binary file not shown.

259
src/scripts/view.js
View File

@ -9,37 +9,39 @@ view.header = {
show: function() { show: function() {
var newMargin = -1*($("#imageview #image").height()/2)+20; var newMargin = -1*($('#imageview #image').height()/2)+20;
clearTimeout($(window).data("timeout")); clearTimeout($(window).data('timeout'));
lychee.imageview.removeClass("full"); lychee.imageview.removeClass('full');
lychee.header.removeClass("hidden"); lychee.header.removeClass('hidden');
lychee.loadingBar.css("opacity", 1); lychee.loadingBar.css('opacity', 1);
if ($("#imageview #image.small").length>0) $("#imageview #image").css('margin-top', newMargin); // Adjust position or size of photo
else $("#imageview #image").removeClass('full'); if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').removeClass('full');
}, },
hide: function(e, delay) { hide: function(e, delay) {
var newMargin = -1*($("#imageview #image").height()/2); var newMargin = -1*($('#imageview #image').height()/2);
if (delay===undefined) delay = 500; if (delay===undefined) delay = 500;
if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) { if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
clearTimeout($(window).data("timeout")); clearTimeout($(window).data('timeout'));
$(window).data("timeout", setTimeout(function() { $(window).data('timeout', setTimeout(function() {
lychee.imageview.addClass("full"); lychee.imageview.addClass('full');
lychee.header.addClass("hidden"); lychee.header.addClass('hidden');
lychee.loadingBar.css("opacity", 0); lychee.loadingBar.css('opacity', 0);
if ($("#imageview #image.small").length>0) $("#imageview #image").css('margin-top', newMargin); // Adjust position or size of photo
else $("#imageview #image").addClass('full'); if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').addClass('full');
}, delay)); }, delay));
@ -53,38 +55,42 @@ view.header = {
switch (mode) { switch (mode) {
case "albums": case 'albums':
lychee.header.removeClass("view"); lychee.header.removeClass('view');
$("#tools_album, #tools_photo").hide(); $('#tools_album, #tools_photo').hide();
$("#tools_albums").show(); $('#tools_albums').show();
break; break;
case "album": case 'album':
lychee.header.removeClass("view"); lychee.header.removeClass('view');
$("#tools_albums, #tools_photo").hide(); $('#tools_albums, #tools_photo').hide();
$("#tools_album").show(); $('#tools_album').show();
album.json.content === false ? $("#button_archive").hide() : $("#button_archive").show(); // Hide download button when album empty
if (lychee.publicMode&&album.json.downloadable==="0") $("#button_archive").hide(); album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show();
if (albumID==="s"||albumID==="f"||albumID==="r") {
$("#button_info_album, #button_trash_album, #button_share_album").hide(); // Hide download button when not logged in and album not downloadable
} else if (albumID==="0") { if (lychee.publicMode&&album.json.downloadable==='0') $('#button_archive').hide();
$("#button_info_album, #button_share_album").hide();
$("#button_trash_album").show(); if (albumID==='s'||albumID==='f'||albumID==='r') {
$('#button_info_album, #button_trash_album, #button_share_album').hide();
} else if (albumID==='0') {
$('#button_info_album, #button_share_album').hide();
$('#button_trash_album').show();
} else { } else {
$("#button_info_album, #button_trash_album, #button_share_album").show(); $('#button_info_album, #button_trash_album, #button_share_album').show();
} }
break; break;
case "photo": case 'photo':
lychee.header.addClass("view"); lychee.header.addClass('view');
$("#tools_albums, #tools_album").hide(); $('#tools_albums, #tools_album').hide();
$("#tools_photo").show(); $('#tools_photo').show();
break; break;
@ -98,16 +104,16 @@ view.infobox = {
show: function() { show: function() {
if (!visible.infobox()) $("body").append("<div id='infobox_overlay' class='fadeIn'></div>"); if (!visible.infobox()) $('body').append("<div id='infobox_overlay' class='fadeIn'></div>");
lychee.infobox.addClass("active"); lychee.infobox.addClass('active');
}, },
hide: function() { hide: function() {
lychee.animate("#infobox_overlay", "fadeOut"); lychee.animate('#infobox_overlay', 'fadeOut');
setTimeout(function() { $("#infobox_overlay").remove() }, 300); setTimeout(function() { $('#infobox_overlay').remove() }, 300);
lychee.infobox.removeClass("active"); lychee.infobox.removeClass('active');
} }
@ -124,7 +130,7 @@ view.albums = {
title: function() { title: function() {
lychee.setTitle("Albums", false); lychee.setTitle('Albums', false);
}, },
@ -134,15 +140,15 @@ view.albums = {
init: function() { init: function() {
var smartData = "", var smartData = '',
albumsData = ""; albumsData = '';
/* Smart Albums */ /* Smart Albums */
albums.parse(albums.json.unsortedAlbum); albums.parse(albums.json.unsortedAlbum);
albums.parse(albums.json.publicAlbum); albums.parse(albums.json.publicAlbum);
albums.parse(albums.json.starredAlbum); albums.parse(albums.json.starredAlbum);
albums.parse(albums.json.recentAlbum); albums.parse(albums.json.recentAlbum);
if (!lychee.publicMode) smartData = build.divider("Smart Albums") + build.album(albums.json.unsortedAlbum) + build.album(albums.json.starredAlbum) + build.album(albums.json.publicAlbum) + build.album(albums.json.recentAlbum); if (!lychee.publicMode) smartData = build.divider('Smart Albums') + build.album(albums.json.unsortedAlbum) + build.album(albums.json.starredAlbum) + build.album(albums.json.publicAlbum) + build.album(albums.json.recentAlbum);
/* Albums */ /* Albums */
if (albums.json.content) { if (albums.json.content) {
@ -150,56 +156,57 @@ view.albums = {
$.each(albums.json.content, function() { $.each(albums.json.content, function() {
albums.parse(this); albums.parse(this);
//display albums in reverse order // Display albums in reverse order
albumsData = build.album(this) + albumsData; albumsData = build.album(this) + albumsData;
}); });
if (!lychee.publicMode) albumsData = build.divider("Albums") + albumsData; if (!lychee.publicMode) albumsData = build.divider('Albums') + albumsData;
} }
if (smartData===""&&albumsData==="") { if (smartData===''&&albumsData==='') {
lychee.content.html(''); lychee.content.html('');
$("body").append(build.no_content("share")); $('body').append(build.no_content('share'));
} else { } else {
lychee.content.html(smartData + albumsData); lychee.content.html(smartData + albumsData);
} }
$("img[data-type!='nonretina']").retina(); $('img[data-type!="nonretina"]').retina();
/* Restore scroll position */ // Restore scroll position
if (view.albums.content.scrollPosition!==null) { if (view.albums.content.scrollPosition!==null) {
$("html, body").scrollTop(view.albums.content.scrollPosition); $('html, body').scrollTop(view.albums.content.scrollPosition);
} }
}, },
title: function(albumID) { title: function(albumID) {
var prefix = "", var prefix = '',
longTitle = "", longTitle = '',
title = albums.json.content[albumID].title; title = albums.json.content[albumID].title;
if (albums.json.content[albumID].password) prefix = "<span class='icon-lock'></span> "; if (albums.json.content[albumID].password) prefix = "<span class='icon-lock'></span> ";
if (title!==null&&title.length>18) { if (title!==null&&title.length>18) {
longTitle = title; longTitle = title;
title = title.substr(0, 18) + "..."; title = title.substr(0, 18) + '...';
} }
$(".album[data-id='" + albumID + "'] .overlay h1") $('.album[data-id="' + albumID + '"] .overlay h1')
.html(prefix + title) .html(prefix + title)
.attr("title", longTitle); .attr('title', longTitle);
}, },
delete: function(albumID) { delete: function(albumID) {
$(".album[data-id='" + albumID + "']").css("opacity", 0).animate({ $('.album[data-id="' + albumID + '"]').css('opacity', 0).animate({
width: 0, width: 0,
marginLeft: 0 marginLeft: 0
}, 300, function() { }, 300, function() {
$(this).remove(); $(this).remove();
if (albums.json.num<=0) lychee.animate(".divider:last-of-type", "fadeOut"); if (albums.json.num<=0) lychee.animate('.divider:last-of-type', 'fadeOut');
}); });
} }
@ -234,20 +241,20 @@ view.album = {
if ((visible.album()||!album.json.init)&&!visible.photo()) { if ((visible.album()||!album.json.init)&&!visible.photo()) {
switch (album.getID()) { switch (album.getID()) {
case "f": case 'f':
lychee.setTitle("Starred", false); lychee.setTitle('Starred', false);
break; break;
case "s": case 's':
lychee.setTitle("Public", false); lychee.setTitle('Public', false);
break; break;
case "r": case 'r':
lychee.setTitle("Recent", false); lychee.setTitle('Recent', false);
break; break;
case "0": case '0':
lychee.setTitle("Unsorted", false); lychee.setTitle('Unsorted', false);
break; break;
default: default:
if (album.json.init) $("#infobox .attr_title").html(album.json.title + " " + build.editIcon("edit_title_album")); if (album.json.init) $('#infobox .attr_title').html(album.json.title + ' ' + build.editIcon('edit_title_album'));
lychee.setTitle(album.json.title, true); lychee.setTitle(album.json.title, true);
break; break;
} }
@ -260,56 +267,56 @@ view.album = {
init: function() { init: function() {
var photosData = ""; var photosData = '';
$.each(album.json.content, function() { $.each(album.json.content, function() {
photosData += build.photo(this); photosData += build.photo(this);
}); });
lychee.content.html(photosData); lychee.content.html(photosData);
$("img[data-type!='svg']").retina(); $('img[data-type!="svg"]').retina();
/* Save and reset scroll position */ /* Save and reset scroll position */
view.albums.content.scrollPosition = $(document).scrollTop(); view.albums.content.scrollPosition = $(document).scrollTop();
$("html, body").scrollTop(0); $('html, body').scrollTop(0);
}, },
title: function(photoID) { title: function(photoID) {
var longTitle = "", var longTitle = '',
title = album.json.content[photoID].title; title = album.json.content[photoID].title;
if (title!==null&&title.length>18) { if (title!==null&&title.length>18) {
longTitle = title; longTitle = title;
title = title.substr(0, 18) + "..."; title = title.substr(0, 18) + '...';
} }
$(".photo[data-id='" + photoID + "'] .overlay h1") $('.photo[data-id="' + photoID + '"] .overlay h1')
.html(title) .html(title)
.attr("title", longTitle); .attr('title', longTitle);
}, },
star: function(photoID) { star: function(photoID) {
$(".photo[data-id='" + photoID + "'] .icon-star").remove(); $('.photo[data-id="' + photoID + '"] .icon-star').remove();
if (album.json.content[photoID].star==1) $(".photo[data-id='" + photoID + "']").append("<a class='badge red icon-star'></a>"); if (album.json.content[photoID].star==1) $('.photo[data-id="' + photoID + '"]').append("<a class='badge red icon-star'></a>");
}, },
public: function(photoID) { public: function(photoID) {
$(".photo[data-id='" + photoID + "'] .icon-share").remove(); $('.photo[data-id="' + photoID + '"] .icon-share').remove();
if (album.json.content[photoID].public==1) $(".photo[data-id='" + photoID + "']").append("<a class='badge red icon-share'></a>"); if (album.json.content[photoID].public==1) $('.photo[data-id="' + photoID + '"]').append("<a class='badge red icon-share'></a>");
}, },
delete: function(photoID) { delete: function(photoID) {
$(".photo[data-id='" + photoID + "']").css("opacity", 0).animate({ $('.photo[data-id="' + photoID + '"]').css('opacity', 0).animate({
width: 0, width: 0,
marginLeft: 0 marginLeft: 0
}, 300, function() { }, 300, function() {
$(this).remove(); $(this).remove();
// Only when search is not active // Only when search is not active
@ -326,35 +333,35 @@ view.album = {
description: function() { description: function() {
$("#infobox .attr_description").html(album.json.description + " " + build.editIcon("edit_description_album")); $('#infobox .attr_description').html(album.json.description + ' ' + build.editIcon('edit_description_album'));
}, },
num: function() { num: function() {
$("#infobox .attr_images").html(album.json.num); $('#infobox .attr_images').html(album.json.num);
}, },
public: function() { public: function() {
if (album.json.public==1) { if (album.json.public==1) {
$("#button_share_album a").addClass("active"); $('#button_share_album a').addClass('active');
$("#button_share_album").attr("title", "Share Album"); $('#button_share_album').attr('title', 'Share Album');
$(".photo .icon-share").remove(); $('.photo .icon-share').remove();
if (album.json.init) $("#infobox .attr_visibility").html("Public"); if (album.json.init) $('#infobox .attr_visibility').html('Public');
} else { } else {
$("#button_share_album a").removeClass("active"); $('#button_share_album a').removeClass('active');
$("#button_share_album").attr("title", "Make Public"); $('#button_share_album').attr('title', 'Make Public');
if (album.json.init) $("#infobox .attr_visibility").html("Private"); if (album.json.init) $('#infobox .attr_visibility').html('Private');
} }
}, },
password: function() { password: function() {
if (album.json.password==1) $("#infobox .attr_password").html("Yes"); if (album.json.password==1) $('#infobox .attr_password').html('Yes');
else $("#infobox .attr_password").html("No"); else $('#infobox .attr_password').html('No');
}, },
@ -385,18 +392,18 @@ view.photo = {
show: function() { show: function() {
// Change header // Change header
lychee.content.addClass("view"); lychee.content.addClass('view');
view.header.mode("photo"); view.header.mode('photo');
// Make body not scrollable // Make body not scrollable
$("body").css("overflow", "hidden"); $('body').css('overflow', 'hidden');
// Fullscreen // Fullscreen
$(document) $(document)
.bind("mouseenter", view.header.show) .bind('mouseenter', view.header.show)
.bind("mouseleave", view.header.hide); .bind('mouseleave', view.header.hide);
lychee.animate(lychee.imageview, "fadeIn"); lychee.animate(lychee.imageview, 'fadeIn');
}, },
@ -405,19 +412,19 @@ view.photo = {
view.header.show(); view.header.show();
if (visible.infobox) view.infobox.hide(); if (visible.infobox) view.infobox.hide();
lychee.content.removeClass("view"); lychee.content.removeClass('view');
view.header.mode("album"); view.header.mode('album');
// Make body scrollable // Make body scrollable
$("body").css("overflow", "auto"); $('body').css('overflow', 'auto');
// Disable Fullscreen // Disable Fullscreen
$(document) $(document)
.unbind("mouseenter") .unbind('mouseenter')
.unbind("mouseleave"); .unbind('mouseleave');
// Hide Photo // Hide Photo
lychee.animate(lychee.imageview, "fadeOut"); lychee.animate(lychee.imageview, 'fadeOut');
setTimeout(function() { setTimeout(function() {
lychee.imageview.hide(); lychee.imageview.hide();
view.album.infobox(); view.album.infobox();
@ -427,28 +434,28 @@ view.photo = {
title: function() { title: function() {
if (photo.json.init) $("#infobox .attr_title").html(photo.json.title + " " + build.editIcon("edit_title")); if (photo.json.init) $('#infobox .attr_title').html(photo.json.title + ' ' + build.editIcon('edit_title'));
lychee.setTitle(photo.json.title, true); lychee.setTitle(photo.json.title, true);
}, },
description: function() { description: function() {
if (photo.json.init) $("#infobox .attr_description").html(photo.json.description + " " + build.editIcon("edit_description")); if (photo.json.init) $('#infobox .attr_description').html(photo.json.description + ' ' + build.editIcon('edit_description'));
}, },
star: function() { star: function() {
$("#button_star a").removeClass("icon-star-empty icon-star"); $('#button_star a').removeClass('icon-star-empty icon-star');
if (photo.json.star==1) { if (photo.json.star==1) {
// Starred // Starred
$("#button_star a").addClass("icon-star"); $('#button_star a').addClass('icon-star');
$("#button_star").attr("title", "Unstar Photo"); $('#button_star').attr('title', 'Unstar Photo');
} else { } else {
// Unstarred // Unstarred
$("#button_star a").addClass("icon-star-empty"); $('#button_star a').addClass('icon-star-empty');
$("#button_star").attr("title", "Star Photo"); $('#button_star').attr('title', 'Star Photo');
} }
}, },
@ -457,21 +464,21 @@ view.photo = {
if (photo.json.public==1||photo.json.public==2) { if (photo.json.public==1||photo.json.public==2) {
// Photo public // Photo public
$("#button_share a").addClass("active"); $('#button_share a').addClass('active');
$("#button_share").attr("title", "Share Photo"); $('#button_share').attr('title', 'Share Photo');
if (photo.json.init) $("#infobox .attr_visibility").html("Public"); if (photo.json.init) $('#infobox .attr_visibility').html('Public');
} else { } else {
// Photo private // Photo private
$("#button_share a").removeClass("active"); $('#button_share a').removeClass('active');
$("#button_share").attr("title", "Make Public"); $('#button_share').attr('title', 'Make Public');
if (photo.json.init) $("#infobox .attr_visibility").html("Private"); if (photo.json.init) $('#infobox .attr_visibility').html('Private');
} }
}, },
tags: function() { tags: function() {
$("#infobox #tags").html(build.tags(photo.json.tags)); $('#infobox #tags').html(build.tags(photo.json.tags));
}, },
@ -479,8 +486,8 @@ view.photo = {
lychee.imageview.html(build.imageview(photo.json, photo.getSize(), visible.controls())); lychee.imageview.html(build.imageview(photo.json, photo.getSize(), visible.controls()));
if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==="")||lychee.viewMode) $("a#next").hide(); if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==='')||lychee.viewMode) $('a#next').hide();
if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==="")||lychee.viewMode) $("a#previous").hide(); if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==='')||lychee.viewMode) $('a#previous').hide();
}, },