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

Added new JS module: header

Browse Source
This commit is contained in:
Tobias Reich 2015-01-04 22:27:34 +01:00
parent 1f3b164d59
commit 522d31d33d
12 changed files with 161 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

2
src/scripts/album.js
View File

@ -80,7 +80,7 @@ album.load = function(albumID, refresh) {
if (!refresh) {
lychee.animate('.album, .photo', 'contentZoomIn');
view.header.mode('album');
header.setMode('album');
}
}, waitTime);

4
src/scripts/albums.js
View File

@ -77,7 +77,7 @@ albums.load = function() {
if (visible.album()&&lychee.content.html()==='') waitTime = 0;
setTimeout(function() {
view.header.mode('albums');
header.setMode('albums');
view.albums.init();
lychee.animate('.album, .photo', 'contentZoomIn');
}, waitTime);
@ -86,7 +86,7 @@ albums.load = function() {
} else {
setTimeout(function() {
view.header.mode('albums');
header.setMode('albums');
view.albums.init();
lychee.animate('.album, .photo', 'contentZoomIn');
}, 300);

2
src/scripts/build.coffee
View File

@ -18,7 +18,7 @@ build.divider = (title) ->
build.editIcon = (id) ->
"<div id='#{ id }' class='edit'><a class='icon-pencil'></a></div>"
"<div id='#{ id }' class='edit'>#{ build.iconic('pencil') }</div>"
build.multiselect = (top, left) ->

108
src/scripts/header.js Normal file
View File

@ -0,0 +1,108 @@
/**
* @description This module takes care of the header.
* @copyright 2014 by Tobias Reich
*/
header = {
_dom: $('header')
}
header.dom = function(selector) {
if (selector===undefined||selector===null||selector==='') return header._dom;
return header._dom.find(selector);
}
header.show = function() {
var newMargin = -1*($('#imageview #image').height()/2)+20;
clearTimeout($(window).data('timeout'));
lychee.imageview.removeClass('full');
header.dom().removeClass('hidden');
lychee.loadingBar.css('opacity', 1);
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').removeClass('full');
}
header.hide = function(e, delay) {
var newMargin = -1*($('#imageview #image').height()/2);
if (delay===undefined) delay = 500;
if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
clearTimeout($(window).data('timeout'));
$(window).data('timeout', setTimeout(function() {
lychee.imageview.addClass('full');
header.dom().addClass('hidden');
lychee.loadingBar.css('opacity', 0);
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').addClass('full');
}, delay));
}
}
header.setMode = function(mode) {
var albumID = album.getID();
switch (mode) {
case 'albums':
header.dom().removeClass('view');
$('#tools_album, #tools_photo').hide();
$('#tools_albums').show();
break;
case 'album':
header.dom().removeClass('view');
$('#tools_albums, #tools_photo').hide();
$('#tools_album').show();
// Hide download button when album empty
album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show();
// Hide download button when not logged in and album not downloadable
if (lychee.publicMode&&album.json.downloadable==='0') $('#button_archive').hide();
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 {
$('#button_info_album, #button_trash_album, #button_share_album').show();
}
break;
case 'photo':
header.dom().addClass('view');
$('#tools_albums, #tools_album').hide();
$('#tools_photo').show();
break;
}
}

52
src/scripts/init.js
View File

@ -16,40 +16,40 @@ $(document).ready(function() {
$(document) .on('mouseup', multiselect.getSelection);
/* Header */
lychee.header.find('#title').on(eventName, function(e) {
header.dom('#title').on(eventName, function(e) {
if (!$(this).hasClass('editable')) return false;
if (visible.photo()) photo.setTitle([photo.getID()]);
else contextMenu.albumTitle([album.getID()], e);
});
lychee.header.find('#button_share').on(eventName, function(e) {
header.dom('#button_share').on(eventName, function(e) {
if (photo.json.public==1||photo.json.public==2) contextMenu.sharePhoto(photo.getID(), e);
else photo.setPublic(photo.getID(), e);
});
lychee.header.find('#button_share_album').on(eventName, function(e) {
header.dom('#button_share_album').on(eventName, function(e) {
if (album.json.public==1) contextMenu.shareAlbum(album.getID(), e);
else album.setPublic(album.getID(), e);
});
lychee.header.find('#button_signin') .on(eventName, lychee.loginDialog);
lychee.header.find('#button_settings') .on(eventName, contextMenu.settings);
lychee.header.find('#button_info_album') .on(eventName, view.infobox.show);
lychee.header.find('#button_info') .on(eventName, view.infobox.show);
lychee.header.find('.button_add') .on(eventName, contextMenu.add);
lychee.header.find('#button_more') .on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) });
lychee.header.find('#button_move') .on(eventName, function(e) { contextMenu.move([photo.getID()], e) });
lychee.header.find('#hostedwith') .on(eventName, function() { window.open(lychee.website) });
lychee.header.find('#button_trash_album') .on(eventName, function() { album.delete([album.getID()]) });
lychee.header.find('#button_trash') .on(eventName, function() { photo.delete([photo.getID()]) });
lychee.header.find('#button_archive') .on(eventName, function() { album.getArchive(album.getID()) });
lychee.header.find('#button_star') .on(eventName, function() { photo.setStar([photo.getID()]) });
lychee.header.find('#button_back_home') .on(eventName, function() { lychee.goto('') });
lychee.header.find('#button_back') .on(eventName, function() { lychee.goto(album.getID()) });
header.dom('#button_signin') .on(eventName, lychee.loginDialog);
header.dom('#button_settings') .on(eventName, contextMenu.settings);
header.dom('#button_info_album') .on(eventName, view.infobox.show);
header.dom('#button_info') .on(eventName, view.infobox.show);
header.dom('.button_add') .on(eventName, contextMenu.add);
header.dom('#button_more') .on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) });
header.dom('#button_move') .on(eventName, function(e) { contextMenu.move([photo.getID()], e) });
header.dom('#hostedwith') .on(eventName, function() { window.open(lychee.website) });
header.dom('#button_trash_album') .on(eventName, function() { album.delete([album.getID()]) });
header.dom('#button_trash') .on(eventName, function() { photo.delete([photo.getID()]) });
header.dom('#button_archive') .on(eventName, function() { album.getArchive(album.getID()) });
header.dom('#button_star') .on(eventName, function() { photo.setStar([photo.getID()]) });
header.dom('#button_back_home') .on(eventName, function() { lychee.goto('') });
header.dom('#button_back') .on(eventName, function() { lychee.goto(album.getID()) });
/* Search */
lychee.header.find('#search').on('keyup click', function() { search.find($(this).val()) });
header.dom('#search').on('keyup click', function() { search.find($(this).val()) });
/* Clear Search */
lychee.header.find('#clearSearch').on(eventName, function () {
lychee.header.find('#search').focus();
header.dom('#clearSearch').on(eventName, function () {
header.dom('#search').focus();
search.reset();
});
@ -63,10 +63,10 @@ $(document).ready(function() {
/* Infobox */
lychee.infobox
.on(eventName, '#edit_title_album', function() { album.setTitle([album.getID()]) })
.on(eventName, '#edit_title_album', function() { album.setTitle([album.getID()]) })
.on(eventName, '#edit_description_album', function() { album.setDescription(album.getID()) })
.on(eventName, '#edit_title', function() { photo.setTitle([photo.getID()]) })
.on(eventName, '#edit_description', function() { photo.setDescription(photo.getID()) })
.on(eventName, '#edit_description', function() { photo.setDescription(photo.getID()) })
.on(eventName, '#edit_tags', function() { photo.editTags([photo.getID()]) })
.on(eventName, '#tags .tag span', function() { photo.deleteTag(photo.getID(), $(this).data('index')) });
@ -77,10 +77,10 @@ $(document).ready(function() {
.bind(['u', 'ctrl+u'], function() { $('#upload_files').click() })
.bind(['s', 'ctrl+s', 'f', 'ctrl+f'], function(e) {
if (visible.photo()) {
lychee.header.find('#button_star').click();
header.dom('#button_star').click();
} else if (visible.albums()) {
e.preventDefault();
lychee.header.find('#search').focus();
header.dom('#search').focus();
}
})
.bind(['r', 'ctrl+r'], function(e) {
@ -135,8 +135,8 @@ $(document).ready(function() {
/* Fullscreen on mobile */
.on('touchend', '#image', function(e) {
if (swipe.obj===null||(swipe.offset>=-5&&swipe.offset<=5)) {
if (visible.controls()) view.header.hide(e, 0);
else view.header.show();
if (visible.controls()) header.hide(e, 0);
else header.show();
}
})

6
src/scripts/loadingBar.js
View File

@ -21,7 +21,7 @@ loadingBar.show = function(status, errorText) {
if (!errorText) errorText = 'Whoops, it looks like something went wrong. Please reload the site and try again!';
// Move header down
if (visible.controls()) lychee.header.addClass('error');
if (visible.controls()) header.dom().addClass('error');
// Modify loading
lychee.loadingBar
@ -49,7 +49,7 @@ loadingBar.show = function(status, errorText) {
lychee.loadingBar.data('timeout', setTimeout(function() {
// Move header down
if (visible.controls()) lychee.header.addClass('loading');
if (visible.controls()) header.dom().addClass('loading');
// Modify loading
lychee.loadingBar
@ -73,7 +73,7 @@ loadingBar.hide = function(force) {
loadingBar.status = null;
// Move header up
if (visible.controls()) lychee.header.removeClass('error loading');
if (visible.controls()) header.dom().removeClass('error loading');
// Modify loading
lychee.loadingBar

7
src/scripts/lychee.js
View File

@ -27,7 +27,6 @@ lychee = {
dropboxKey: '',
loadingBar: $('#loading'),
header: $('header'),
content: $('#content'),
imageview: $('#imageview'),
infobox: $('#infobox')
@ -52,7 +51,7 @@ lychee.init = function() {
// No configuration
if (data==='Warning: No configuration!') {
lychee.header.hide();
header.dom().hide();
lychee.content.hide();
$('body').append(build.no_content('cog'));
settings.createConfig();
@ -250,7 +249,7 @@ lychee.getUpdate = function() {
lychee.setTitle = function(title, editable) {
var $title = lychee.header.find('#title');
var $title = header.dom('#title');
document.title = lychee.title + ' - ' + title;
@ -286,7 +285,7 @@ lychee.setMode = function(mode) {
if (mode==='public') {
$('header #button_signin, header #hostedwith').show();
header.dom('#button_signin, #hostedwith').show();
lychee.publicMode = true;
} else if (mode==='view') {

105
src/scripts/view.js
View File

@ -5,101 +5,6 @@
view = {}
view.header = {
show: function() {
var newMargin = -1*($('#imageview #image').height()/2)+20;
clearTimeout($(window).data('timeout'));
lychee.imageview.removeClass('full');
lychee.header.removeClass('hidden');
lychee.loadingBar.css('opacity', 1);
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').removeClass('full');
},
hide: function(e, delay) {
var newMargin = -1*($('#imageview #image').height()/2);
if (delay===undefined) delay = 500;
if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
clearTimeout($(window).data('timeout'));
$(window).data('timeout', setTimeout(function() {
lychee.imageview.addClass('full');
lychee.header.addClass('hidden');
lychee.loadingBar.css('opacity', 0);
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin);
else $('#imageview #image').addClass('full');
}, delay));
}
},
mode: function(mode) {
var albumID = album.getID();
switch (mode) {
case 'albums':
lychee.header.removeClass('view');
$('#tools_album, #tools_photo').hide();
$('#tools_albums').show();
break;
case 'album':
lychee.header.removeClass('view');
$('#tools_albums, #tools_photo').hide();
$('#tools_album').show();
// Hide download button when album empty
album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show();
// Hide download button when not logged in and album not downloadable
if (lychee.publicMode&&album.json.downloadable==='0') $('#button_archive').hide();
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 {
$('#button_info_album, #button_trash_album, #button_share_album').show();
}
break;
case 'photo':
lychee.header.addClass('view');
$('#tools_albums, #tools_album').hide();
$('#tools_photo').show();
break;
}
}
}
view.infobox = {
show: function() {
@ -393,15 +298,15 @@ view.photo = {
// Change header
lychee.content.addClass('view');
view.header.mode('photo');
header.setMode('photo');
// Make body not scrollable
$('body').css('overflow', 'hidden');
// Fullscreen
$(document)
.bind('mouseenter', view.header.show)
.bind('mouseleave', view.header.hide);
.bind('mouseenter', header.show)
.bind('mouseleave', header.hide);
lychee.animate(lychee.imageview, 'fadeIn');
@ -409,11 +314,11 @@ view.photo = {
hide: function() {
view.header.show();
header.show();
if (visible.infobox) view.infobox.hide();
lychee.content.removeClass('view');
view.header.mode('album');
header.setMode('album');
// Make body scrollable
$('body').css('overflow', 'auto');

22
src/styles/_infobox.scss
View File

@ -36,11 +36,18 @@
}
.edit {
display: inline;
display: inline-block;
margin-left: 3px;
width: 20px;
height: 5px;
width: 10px;
cursor: pointer;
.iconic {
fill: white(.5);
filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease-out;
}
&:hover .iconic { fill: white(1); }
}
.bumper {
@ -82,7 +89,6 @@
}
&:hover .iconic { fill: #fff; }
}
/* Divider ------------------------------------------------*/
@ -135,13 +141,9 @@
margin-bottom: 8px;
}
#tags .edit {
display: inline-block;
}
#tags .edit { margin-top: 6px; }
#tags .empty .edit {
display: inline;
}
#tags .empty .edit { margin-top: 0; }
#tags .tag {
float: left;