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-20 22:28:30 +01:00
parent 8624b38171
commit b4d356f7e4
6 changed files with 483 additions and 460 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.

8
src/scripts/album.js
View File

@ -63,8 +63,14 @@ album = {
album.json = data; album.json = data;
// Calculate delay
durationTime = (new Date().getTime() - startTime); durationTime = (new Date().getTime() - startTime);
if (durationTime>300) waitTime = 0; else if (refresh) waitTime = 0; else waitTime = 300 - durationTime; if (durationTime>300) waitTime = 0;
else waitTime = 300 - durationTime;
// Skip delay when refresh is true
// Skip delay when opening a blank Lychee
if (refresh===true) waitTime = 0;
if (!visible.albums()&&!visible.photo()&&!visible.album()) waitTime = 0; if (!visible.albums()&&!visible.photo()&&!visible.album()) waitTime = 0;
setTimeout(function() { setTimeout(function() {

84
src/scripts/albums.js
View File

@ -3,61 +3,61 @@
* @copyright 2014 by Tobias Reich * @copyright 2014 by Tobias Reich
*/ */
albums = { albums = {}
json: null, albums.json = null;
load: function() { albums.load = function() {
var startTime, var startTime,
durationTime, durationTime,
waitTime; waitTime;
lychee.animate(".album:nth-child(-n+50), .photo:nth-child(-n+50)", "contentZoomOut"); lychee.animate('.album:nth-child(-n+50), .photo:nth-child(-n+50)', 'contentZoomOut');
lychee.animate(".divider", "fadeOut"); lychee.animate('.divider', 'fadeOut');
startTime = new Date().getTime(); startTime = new Date().getTime();
if(albums.json===null) { if (albums.json===null) {
lychee.api("getAlbums", function(data) { lychee.api('getAlbums', function(data) {
/* Smart Albums */ /* Smart Albums */
data.unsortedAlbum = { data.unsortedAlbum = {
id: 0, id: 0,
title: "Unsorted", title: 'Unsorted',
sysdate: data.unsortedNum + " photos", sysdate: data.unsortedNum + ' photos',
unsorted: "1", unsorted: '1',
thumb0: data.unsortedThumb0, thumb0: data.unsortedThumb0,
thumb1: data.unsortedThumb1, thumb1: data.unsortedThumb1,
thumb2: data.unsortedThumb2 thumb2: data.unsortedThumb2
}; };
data.starredAlbum = { data.starredAlbum = {
id: "f", id: 'f',
title: "Starred", title: 'Starred',
sysdate: data.starredNum + " photos", sysdate: data.starredNum + ' photos',
star: "1", star: '1',
thumb0: data.starredThumb0, thumb0: data.starredThumb0,
thumb1: data.starredThumb1, thumb1: data.starredThumb1,
thumb2: data.starredThumb2 thumb2: data.starredThumb2
}; };
data.publicAlbum = { data.publicAlbum = {
id: "s", id: 's',
title: "Public", title: 'Public',
sysdate: data.publicNum + " photos", sysdate: data.publicNum + ' photos',
public: "1", public: '1',
thumb0: data.publicThumb0, thumb0: data.publicThumb0,
thumb1: data.publicThumb1, thumb1: data.publicThumb1,
thumb2: data.publicThumb2 thumb2: data.publicThumb2
}; };
data.recentAlbum = { data.recentAlbum = {
id: "r", id: 'r',
title: "Recent", title: 'Recent',
sysdate: data.recentNum + " photos", sysdate: data.recentNum + ' photos',
recent: "1", recent: '1',
thumb0: data.recentThumb0, thumb0: data.recentThumb0,
thumb1: data.recentThumb1, thumb1: data.recentThumb1,
thumb2: data.recentThumb2 thumb2: data.recentThumb2
@ -65,47 +65,49 @@ albums = {
albums.json = data; albums.json = data;
// Calculate delay
durationTime = (new Date().getTime() - startTime); durationTime = (new Date().getTime() - startTime);
if (durationTime>300) waitTime = 0; else waitTime = 300 - durationTime; if (durationTime>300) waitTime = 0;
else waitTime = 300 - durationTime;
// Skip delay when opening a blank Lychee
if (!visible.albums()&&!visible.photo()&&!visible.album()) waitTime = 0; if (!visible.albums()&&!visible.photo()&&!visible.album()) waitTime = 0;
if (visible.album()&&lychee.content.html()==="") waitTime = 0; if (visible.album()&&lychee.content.html()==='') waitTime = 0;
setTimeout(function() { setTimeout(function() {
view.header.mode("albums"); view.header.mode('albums');
view.albums.init(); view.albums.init();
lychee.animate(".album:nth-child(-n+50), .photo:nth-child(-n+50)", "contentZoomIn"); lychee.animate('.album:nth-child(-n+50), .photo:nth-child(-n+50)', 'contentZoomIn');
}, waitTime); }, waitTime);
}); });
} else { } else {
setTimeout(function() { setTimeout(function() {
view.header.mode("albums"); view.header.mode('albums');
view.albums.init(); view.albums.init();
lychee.animate(".album:nth-child(-n+50), .photo:nth-child(-n+50)", "contentZoomIn"); lychee.animate('.album:nth-child(-n+50), .photo:nth-child(-n+50)', 'contentZoomIn');
}, 300); }, 300);
} }
}, }
parse: function(album) { albums.parse = function(album) {
if (album.password&&lychee.publicMode) { if (album.password&&lychee.publicMode) {
album.thumb0 = "src/images/password.svg"; album.thumb0 = 'src/images/password.svg';
album.thumb1 = "src/images/password.svg"; album.thumb1 = 'src/images/password.svg';
album.thumb2 = "src/images/password.svg"; album.thumb2 = 'src/images/password.svg';
} else { } else {
if (!album.thumb0) album.thumb0 = "src/images/no_images.svg"; if (!album.thumb0) album.thumb0 = 'src/images/no_images.svg';
if (!album.thumb1) album.thumb1 = "src/images/no_images.svg"; if (!album.thumb1) album.thumb1 = 'src/images/no_images.svg';
if (!album.thumb2) album.thumb2 = "src/images/no_images.svg"; if (!album.thumb2) album.thumb2 = 'src/images/no_images.svg';
} }
}, }
refresh: function() { albums.refresh = function() {
albums.json = null; albums.json = null;
} }
};

244
src/scripts/lychee.js
View File

@ -3,44 +3,46 @@
* @copyright 2014 by Tobias Reich * @copyright 2014 by Tobias Reich
*/ */
var lychee = { lychee = {
title: "", title: '',
version: "2.7.0", version: '2.7.0',
version_code: "020700", version_code: '020700',
api_path: "php/api.php", api_path: 'php/api.php',
update_path: "http://lychee.electerious.com/version/index.php", update_path: 'http://lychee.electerious.com/version/index.php',
updateURL: "https://github.com/electerious/Lychee", updateURL: 'https://github.com/electerious/Lychee',
website: "http://lychee.electerious.com", website: 'http://lychee.electerious.com',
publicMode: false, publicMode: false,
viewMode: false, viewMode: false,
debugMode: false, debugMode: false,
username: "", checkForUpdates:false,
checkForUpdates: false, username: '',
sorting: "", sorting: '',
location: "", location: '',
dropbox: false, dropbox: false,
dropboxKey: '', dropboxKey: '',
loadingBar: $("#loading"), loadingBar: $('#loading'),
header: $("header"), header: $('header'),
content: $("#content"), content: $('#content'),
imageview: $("#imageview"), imageview: $('#imageview'),
infobox: $("#infobox"), infobox: $('#infobox')
init: function() { }
lychee.init = function() {
var params; var params;
params = "init&version=" + lychee.version_code; params = 'init&version=' + lychee.version_code;
lychee.api(params, function(data) { lychee.api(params, function(data) {
if (data.loggedIn!==true) { if (data.loggedIn!==true) {
lychee.setMode("public"); lychee.setMode('public');
} else { } else {
lychee.username = data.config.username || ''; lychee.username = data.config.username || '';
lychee.sorting = data.config.sorting || ''; lychee.sorting = data.config.sorting || '';
@ -49,10 +51,10 @@ var lychee = {
} }
// No configuration // No configuration
if (data==="Warning: No configuration!") { if (data==='Warning: No configuration!') {
lychee.header.hide(); lychee.header.hide();
lychee.content.hide(); lychee.content.hide();
$("body").append(build.no_content("cog")); $('body').append(build.no_content('cog'));
settings.createConfig(); settings.createConfig();
return true; return true;
} }
@ -63,37 +65,44 @@ var lychee = {
} }
lychee.checkForUpdates = data.config.checkForUpdates; lychee.checkForUpdates = data.config.checkForUpdates;
$(window).bind("popstate", lychee.load); $(window).bind('popstate', lychee.load);
lychee.load(); lychee.load();
}); });
}, }
api: function(params, callback, loading) { lychee.api = function(params, callback) {
if (loading===undefined) loadingBar.show(); loadingBar.show();
$.ajax({ $.ajax({
type: "POST", type: 'POST',
url: lychee.api_path, url: lychee.api_path,
data: "function=" + params, data: 'function=' + params,
dataType: "text", dataType: 'text',
success: function(data) { success: function(data) {
setTimeout(function() { loadingBar.hide() }, 100); setTimeout(function() { loadingBar.hide() }, 100);
if (typeof data==="string"&&data.substring(0, 7)==="Error: ") { // Catch errors
if (typeof data==='string'&&
data.substring(0, 7)==='Error: ') {
lychee.error(data.substring(7, data.length), params, data); lychee.error(data.substring(7, data.length), params, data);
upload.close(true); upload.close(true);
return false; return false;
} }
if (data==="1") data = true; // Convert 1 to true and an empty string to false
else if (data==="") data = false; if (data==='1') data = true;
else if (data==='') data = false;
if (typeof data==="string"&&data.substring(0, 1)==="{"&&data.substring(data.length-1, data.length)==="}") data = $.parseJSON(data); // Convert to JSON if string start with '{' and ends with '}'
if (typeof data==='string'&&
data.substring(0, 1)==='{'&&
data.substring(data.length-1, data.length)==='}') data = $.parseJSON(data);
// Output response when debug mode is enabled
if (lychee.debugMode) console.log(data); if (lychee.debugMode) console.log(data);
callback(data); callback(data);
@ -101,27 +110,27 @@ var lychee = {
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
lychee.error("Server error or API not found.", params, errorThrown); lychee.error('Server error or API not found.', params, errorThrown);
upload.close(true); upload.close(true);
} }
}); });
}, }
login: function() { lychee.login = function() {
var user = $("input#username").val(), var user = $('input#username').val(),
password = md5($("input#password").val()), password = md5($('input#password').val()),
params; params;
params = "login&user=" + user + "&password=" + password; params = 'login&user=' + user + '&password=' + password;
lychee.api(params, function(data) { lychee.api(params, function(data) {
if (data===true) { if (data===true) {
// Use 'try' to catch a thrown error when Safari is in private mode // Use 'try' to catch a thrown error when Safari is in private mode
try { localStorage.setItem("lychee_username", user); } try { localStorage.setItem('lychee_username', user); }
catch (err) {} catch (err) {}
window.location.reload(); window.location.reload();
@ -129,57 +138,59 @@ var lychee = {
} else { } else {
// Show error and reactive button // Show error and reactive button
$("#password").val("").addClass("error").focus(); $('#password').val('').addClass('error').focus();
$(".message .button.active").removeClass("pressed"); $('.message .button.active').removeClass('pressed');
} }
}); });
}, }
loginDialog: function() { lychee.loginDialog = function() {
var local_username; var local_username;
$("body").append(build.signInModal()); $('body').append(build.signInModal());
$("#username").focus(); $('#username').focus();
if (localStorage) { if (localStorage) {
local_username = localStorage.getItem("lychee_username"); local_username = localStorage.getItem('lychee_username');
if (local_username!==null) { if (local_username!==null) {
if (local_username.length>0) $("#username").val(local_username); if (local_username.length>0) $('#username').val(local_username);
$("#password").focus(); $('#password').focus();
} }
} }
if (lychee.checkForUpdates==="1") lychee.getUpdate();
}, if (lychee.checkForUpdates==='1') lychee.getUpdate();
logout: function() { }
lychee.api("logout", function() { lychee.logout = function() {
lychee.api('logout', function() {
window.location.reload(); window.location.reload();
}); });
}, }
goto: function(url) { lychee.goto = function(url) {
if (url===undefined) url = "#"; if (url===undefined) url = '#';
else url = "#" + url; else url = '#' + url;
history.pushState(null, null, url); history.pushState(null, null, url);
lychee.load(); lychee.load();
}, }
load: function() { lychee.load = function() {
var albumID = "", var albumID = '',
photoID = "", photoID = '',
hash = document.location.hash.replace("#", "").split("/"); hash = document.location.hash.replace('#', '').split('/');
$(".no_content").remove(); $('.no_content').remove();
contextMenu.close(); contextMenu.close();
multiselect.close(); multiselect.close();
@ -192,7 +203,8 @@ var lychee = {
photo.json = null; photo.json = null;
// Show Photo // Show Photo
if (lychee.content.html()===""||($("#search").length&&$("#search").val().length!==0)) { if (lychee.content.html()===''||
($('#search').length&&$('#search').val().length!==0)) {
lychee.content.hide(); lychee.content.hide();
album.load(albumID, true); album.load(albumID, true);
} }
@ -213,7 +225,7 @@ var lychee = {
// Trash data // Trash data
album.json = null; album.json = null;
photo.json = null; photo.json = null;
search.code = ""; search.code = '';
// Show Albums // Show Albums
if (visible.album()) view.album.hide(); if (visible.album()) view.album.hide();
@ -222,43 +234,43 @@ var lychee = {
} }
}, }
getUpdate: function() { lychee.getUpdate = function() {
$.ajax({ $.ajax({
url: lychee.update_path, url: lychee.update_path,
success: function(data) { if (parseInt(data)>parseInt(lychee.version_code)) $("#version span").show(); } success: function(data) { if (parseInt(data)>parseInt(lychee.version_code)) $('#version span').show(); }
}); });
}, }
setTitle: function(title, editable) { lychee.setTitle = function(title, editable) {
if (lychee.title==="") lychee.title = document.title; if (lychee.title==='') lychee.title = document.title;
if (title==="Albums") document.title = lychee.title; if (title==='Albums') document.title = lychee.title;
else document.title = lychee.title + " - " + title; else document.title = lychee.title + ' - ' + title;
if (editable) $("#title").addClass("editable"); if (editable) $('#title').addClass('editable');
else $("#title").removeClass("editable"); else $('#title').removeClass('editable');
$("#title").html(title); $('#title').html(title);
}, }
setMode: function(mode) { lychee.setMode = function(mode) {
$("#button_settings, #button_settings, #button_search, #search, #button_trash_album, #button_share_album, .button_add, .button_divider").remove(); $('#button_settings, #button_settings, #button_search, #search, #button_trash_album, #button_share_album, .button_add, .button_divider').remove();
$("#button_trash, #button_move, #button_share, #button_star").remove(); $('#button_trash, #button_move, #button_share, #button_star').remove();
$(document) $(document)
.on("mouseenter", "#title.editable", function() { $(this).removeClass("editable") }) .on('mouseenter', '#title.editable', function() { $(this).removeClass('editable') })
.off("click", "#title.editable") .off('click', '#title.editable')
.off("touchend", "#title.editable") .off('touchend', '#title.editable')
.off("contextmenu", ".photo") .off('contextmenu', '.photo')
.off("contextmenu", ".album") .off('contextmenu', '.album')
.off("drop"); .off('drop');
Mousetrap Mousetrap
.unbind(['u', 'ctrl+u']) .unbind(['u', 'ctrl+u'])
@ -268,29 +280,29 @@ var lychee = {
.unbind(['t', 'ctrl+t']) .unbind(['t', 'ctrl+t'])
.unbind(['command+backspace', 'ctrl+backspace']); .unbind(['command+backspace', 'ctrl+backspace']);
if (mode==="public") { if (mode==='public') {
$("header #button_signin, header #hostedwith").show(); $('header #button_signin, header #hostedwith').show();
lychee.publicMode = true; lychee.publicMode = true;
} else if (mode==="view") { } else if (mode==='view') {
Mousetrap.unbind('esc'); Mousetrap.unbind('esc');
$("#button_back, a#next, a#previous").remove(); $('#button_back, a#next, a#previous').remove();
$(".no_content").remove(); $('.no_content').remove();
lychee.publicMode = true; lychee.publicMode = true;
lychee.viewMode = true; lychee.viewMode = true;
} }
}, }
animate: function(obj, animation) { lychee.animate = function(obj, animation) {
var animations = [ var animations = [
["fadeIn", "fadeOut"], ['fadeIn', 'fadeOut'],
["contentZoomIn", "contentZoomOut"] ['contentZoomIn', 'contentZoomOut']
]; ];
if (!obj.jQuery) obj = $(obj); if (!obj.jQuery) obj = $(obj);
@ -298,7 +310,7 @@ var lychee = {
for (var i = 0; i < animations.length; i++) { for (var i = 0; i < animations.length; i++) {
for (var x = 0; x < animations[i].length; x++) { for (var x = 0; x < animations[i].length; x++) {
if (animations[i][x]==animation) { if (animations[i][x]==animation) {
obj.removeClass(animations[i][0] + " " + animations[i][1]).addClass(animation); obj.removeClass(animations[i][0] + ' ' + animations[i][1]).addClass(animation);
return true; return true;
} }
} }
@ -306,34 +318,34 @@ var lychee = {
return false; return false;
}, }
escapeHTML: function(s) { lychee.escapeHTML = function(s) {
return s.replace(/&/g, '&amp;') return s.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;') .replace(/"/g, '&quot;')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;'); .replace(/>/g, '&gt;');
}, }
loadDropbox: function(callback) { lychee.loadDropbox = function(callback) {
if (!lychee.dropbox&&lychee.dropboxKey) { if (!lychee.dropbox&&lychee.dropboxKey) {
loadingBar.show(); loadingBar.show();
var g = document.createElement("script"), var g = document.createElement('script'),
s = document.getElementsByTagName("script")[0]; s = document.getElementsByTagName('script')[0];
g.src = "https://www.dropbox.com/static/api/1/dropins.js"; g.src = 'https://www.dropbox.com/static/api/1/dropins.js';
g.id = "dropboxjs"; g.id = 'dropboxjs';
g.type = "text/javascript"; g.type = 'text/javascript';
g.async = "true"; g.async = 'true';
g.setAttribute("data-app-key", lychee.dropboxKey); g.setAttribute('data-app-key', lychee.dropboxKey);
g.onload = g.onreadystatechange = function() { g.onload = g.onreadystatechange = function() {
var rs = this.readyState; var rs = this.readyState;
if (rs&&rs!=="complete"&&rs!=="loaded") return; if (rs&&rs!=='complete'&&rs!=='loaded') return;
lychee.dropbox = true; lychee.dropbox = true;
loadingBar.hide(); loadingBar.hide();
callback(); callback();
@ -350,17 +362,17 @@ var lychee = {
} }
}, }
removeHTML: function(html) { lychee.removeHTML = function(html) {
var tmp = document.createElement("DIV"); var tmp = document.createElement('DIV');
tmp.innerHTML = html; tmp.innerHTML = html;
return tmp.textContent || tmp.innerText; return tmp.textContent || tmp.innerText;
}, }
error: function(errorThrown, params, data) { lychee.error = function(errorThrown, params, data) {
console.error({ console.error({
description: errorThrown, description: errorThrown,
@ -368,8 +380,6 @@ var lychee = {
response: data response: data
}); });
loadingBar.show("error", errorThrown); loadingBar.show('error', errorThrown);
} }
};

2
src/scripts/photo.js
View File

@ -158,7 +158,7 @@ photo.duplicate = function(photoIDs) {
lychee.api(params, function(data) { lychee.api(params, function(data) {
if (data!==true) lychee.error(null, params, data); if (data!==true) lychee.error(null, params, data);
else album.load(album.getID(), false); else album.load(album.getID());
}); });

63
src/scripts/search.js
View File

@ -3,25 +3,26 @@
* @copyright 2014 by Tobias Reich * @copyright 2014 by Tobias Reich
*/ */
search = { search = {}
code: null, search.code = null;
find: function(term) { search.find = function(term) {
var params, var params,
albumsData = "", albumsData = '',
photosData = "", photosData = '',
code; code;
clearTimeout($(window).data("timeout")); clearTimeout($(window).data('timeout'));
$(window).data("timeout", setTimeout(function() { $(window).data('timeout', setTimeout(function() {
if ($("#search").val().length!==0) { if ($('#search').val().length!==0) {
params = "search&term=" + term; params = 'search&term=' + term;
lychee.api(params, function(data) { lychee.api(params, function(data) {
// Build albums
if (data&&data.albums) { if (data&&data.albums) {
albums.json = { content: data.albums }; albums.json = { content: data.albums };
$.each(albums.json.content, function() { $.each(albums.json.content, function() {
@ -30,6 +31,7 @@ search = {
}); });
} }
// Build photos
if (data&&data.photos) { if (data&&data.photos) {
album.json = { content: data.photos }; album.json = { content: data.photos };
$.each(album.json.content, function() { $.each(album.json.content, function() {
@ -37,27 +39,32 @@ search = {
}); });
} }
if (albumsData===""&&photosData==="") code = "error"; // 1. No albums and photos found
else if (albumsData==="") code = build.divider("Photos")+photosData; // 2. Only photos found
else if (photosData==="") code = build.divider("Albums")+albumsData; // 3. Only albums found
else code = build.divider("Photos")+photosData+build.divider("Albums")+albumsData; // 4. Albums and photos found
if (albumsData===''&&photosData==='') code = 'error';
else if (albumsData==='') code = build.divider('Photos') + photosData;
else if (photosData==='') code = build.divider('Albums') + albumsData;
else code = build.divider('Photos') + photosData + build.divider('Albums') + albumsData;
// Only refresh view when search results are different
if (search.code!==md5(code)) { if (search.code!==md5(code)) {
$(".no_content").remove(); $('.no_content').remove();
lychee.animate(".album:nth-child(-n+50), .photo:nth-child(-n+50)", "contentZoomOut"); lychee.animate('.album:nth-child(-n+50), .photo:nth-child(-n+50)', 'contentZoomOut');
lychee.animate(".divider", "fadeOut"); lychee.animate('.divider', 'fadeOut');
search.code = md5(code); search.code = md5(code);
setTimeout(function() { setTimeout(function() {
if (code==="error") $("body").append(build.no_content("search")); if (code==='error') $('body').append(build.no_content('search'));
else { else {
lychee.content.html(code); lychee.content.html(code);
lychee.animate(".album:nth-child(-n+50), .photo:nth-child(-n+50)", "contentZoomIn"); lychee.animate('.album:nth-child(-n+50), .photo:nth-child(-n+50)', 'contentZoomIn');
$("img[data-type!='svg']").retina(); $('img[data-type!="svg"]').retina();
} }
}, 300); }, 300);
@ -70,26 +77,24 @@ search = {
}, 250)); }, 250));
}, }
reset: function() { search.reset = function() {
$("#search").val(""); $('#search').val('');
$(".no_content").remove(); $('.no_content').remove();
if (search.code!=="") { if (search.code!=='') {
// Trash data // Trash data
albums.json = null; albums.json = null;
album.json = null; album.json = null;
photo.json = null; photo.json = null;
search.code = ""; search.code = '';
lychee.animate(".divider", "fadeOut"); lychee.animate('.divider', 'fadeOut');
albums.load(); albums.load();
} }
} }
};