Code adjustments and small performance improvements

This commit is contained in:
Tobias Reich 2015-07-09 14:33:34 +02:00
parent 46a8beae88
commit bcad26a8d1
2 changed files with 297 additions and 283 deletions

View File

@ -1,217 +1,231 @@
/**
* @description Select multiple albums or photos.
* @copyright 2015 by Tobias Reich
* @description Select multiple albums or photos.
* @copyright 2015 by Tobias Reich
*/
multiselect = {}
multiselect.position = {
top: null,
right: null,
bottom: null,
left: null
top : null,
right : null,
bottom : null,
left : null
}
multiselect.bind = function() {
$('#content') .on('mousedown', function(e) { if (e.which===1) multiselect.show(e) });
$(document) .on('mouseup', function(e) { if (e.which===1) multiselect.getSelection(e) });
$('#content') .on('mousedown', (e) => { if (e.which===1) multiselect.show(e) })
$(document) .on('mouseup', (e) => { if (e.which===1) multiselect.getSelection(e) })
return true;
return true
}
multiselect.show = function(e) {
if (lychee.publicMode) return false;
if (visible.search()) return false;
if (!visible.albums()&&!visible.album) return false;
if ($('.album:hover, .photo:hover').length!==0) return false;
if (visible.multiselect()) $('#multiselect').remove();
if (lychee.publicMode) return false
if (visible.search()) return false
if (!visible.albums() && !visible.album) return false
if ($('.album:hover, .photo:hover').length!==0) return false
if (visible.multiselect()) $('#multiselect').remove()
sidebar.setSelectable(false);
sidebar.setSelectable(false)
multiselect.position.top = e.pageY;
multiselect.position.right = -1 * (e.pageX - $(document).width());
multiselect.position.bottom = -1 * (multiselect.position.top - $(window).height());
multiselect.position.left = e.pageX;
multiselect.position.top = e.pageY
multiselect.position.right = -1 * (e.pageX - $(document).width())
multiselect.position.bottom = -1 * (multiselect.position.top - $(window).height())
multiselect.position.left = e.pageX
$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
$(document).on('mousemove', multiselect.resize);
$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left))
$(document).on('mousemove', multiselect.resize)
}
multiselect.selectAll = function() {
var e,
newWidth,
newHeight;
if (lychee.publicMode) return false
if (visible.search()) return false
if (!visible.albums() && !visible.album) return false
if (visible.multiselect()) $('#multiselect').remove()
if (lychee.publicMode) return false;
if (visible.search()) return false;
if (!visible.albums()&&!visible.album) return false;
if (visible.multiselect()) $('#multiselect').remove();
sidebar.setSelectable(false)
sidebar.setSelectable(false);
multiselect.position.top = 70
multiselect.position.right = 40
multiselect.position.bottom = 90
multiselect.position.left = 20
multiselect.position.top = 70;
multiselect.position.right = 40;
multiselect.position.bottom = 90;
multiselect.position.left = 20;
$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left))
$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
let documentSize = {
width : $(document).width(),
height : $(document).height()
}
newWidth = $(document).width() - multiselect.position.right + 2;
newHeight = $(document).height() - multiselect.position.bottom;
let newSize = {
width : documentSize.width - multiselect.position.right + 2,
height : documentSize.height - multiselect.position.bottom
}
$('#multiselect').css({
width: newWidth,
height: newHeight
});
let e = {
pageX : documentSize.width - (multiselect.position.right / 2),
pageY : documentSize.height - multiselect.position.bottom
}
e = {
pageX: $(document).width() - (multiselect.position.right / 2),
pageY: $(document).height() - multiselect.position.bottom
};
$('#multiselect').css(newSize)
multiselect.getSelection(e);
multiselect.getSelection(e)
}
multiselect.resize = function(e) {
var mouse_x = e.pageX,
mouse_y = e.pageY,
newHeight,
newWidth;
if (multiselect.position.top === null ||
multiselect.position.right === null ||
multiselect.position.bottom === null ||
multiselect.position.left === null) return false
if (multiselect.position.top===null||
multiselect.position.right===null||
multiselect.position.bottom===null||
multiselect.position.left===null) return false;
let newSize = {},
documentSize = {}
if (mouse_y>=multiselect.position.top) {
// Get the position of the mouse
let mousePos = {
x : e.pageX,
y : e.pageY
}
// Default CSS
let newCSS = {
top : null,
bottom : null,
height : null,
left : null,
right : null,
width : null
}
if (mousePos.y>=multiselect.position.top) {
documentSize.height = $(document).height()
// Do not leave the screen
newHeight = mouse_y - multiselect.position.top;
if ((multiselect.position.top+newHeight)>=$(document).height())
newHeight -= (multiselect.position.top + newHeight) - $(document).height() + 2;
newSize.height = mousePos.y - multiselect.position.top
if ((multiselect.position.top+newSize.height)>=documentSize.height) {
newSize.height -= (multiselect.position.top + newSize.height) - documentSize.height + 2
}
$('#multiselect').css({
top: multiselect.position.top,
bottom: 'inherit',
height: newHeight
});
newCSS.top = multiselect.position.top
newCSS.bottom = 'inherit'
newCSS.height = newSize.height
} else {
$('#multiselect').css({
top: 'inherit',
bottom: multiselect.position.bottom,
height: multiselect.position.top - e.pageY
});
newCSS.top = 'inherit'
newCSS.bottom = multiselect.position.bottom
newCSS.height = multiselect.position.top - e.pageY
}
if (mouse_x>=multiselect.position.left) {
if (mousePos.x>=multiselect.position.left) {
documentSize.width = $(document).width()
// Do not leave the screen
newWidth = mouse_x - multiselect.position.left;
if ((multiselect.position.left+newWidth)>=$(document).width())
newWidth -= (multiselect.position.left + newWidth) - $(document).width() + 2;
newSize.width = mousePos.x - multiselect.position.left
if ((multiselect.position.left+newSize.width)>=documentSize.width) {
newSize.width -= (multiselect.position.left + newSize.width) - documentSize.width + 2
}
$('#multiselect').css({
right: 'inherit',
left: multiselect.position.left,
width: newWidth
});
newCSS.right = 'inherit'
newCSS.left = multiselect.position.left
newCSS.width = newSize.width
} else {
$('#multiselect').css({
right: multiselect.position.right,
left: 'inherit',
width: multiselect.position.left - e.pageX
});
newCSS.right = multiselect.position.right
newCSS.left = 'inherit'
newCSS.width = multiselect.position.left - e.pageX
}
// Updated all CSS properties at once
$('#multiselect').css(newCSS)
}
multiselect.stopResize = function() {
$(document).off('mousemove');
$(document).off('mousemove')
}
multiselect.getSize = function() {
if (!visible.multiselect()) return false;
if (!visible.multiselect()) return false
let $elem = $('#multiselect'),
offset = $elem.offset()
return {
top: $('#multiselect').offset().top,
left: $('#multiselect').offset().left,
width: parseInt($('#multiselect').css('width').replace('px', '')),
height: parseInt($('#multiselect').css('height').replace('px', ''))
};
top : offset.top,
left : offset.left,
width : parseInt($elem.css('width').replace('px', '')),
height : parseInt($elem.css('height').replace('px', ''))
}
}
multiselect.getSelection = function(e) {
var tolerance = 150,
id,
ids = [],
offset,
size = multiselect.getSize();
let tolerance = 150,
ids = [],
size = multiselect.getSize()
if (visible.contextMenu()) return false;
if (!visible.multiselect()) return false;
if (visible.contextMenu()) return false
if (!visible.multiselect()) return false
$('.photo, .album').each(function() {
offset = $(this).offset();
let offset = $(this).offset()
if (offset.top>=(size.top-tolerance)&&
offset.left>=(size.left-tolerance)&&
(offset.top+206)<=(size.top+size.height+tolerance)&&
if (offset.top>=(size.top-tolerance) &&
offset.left>=(size.left-tolerance) &&
(offset.top+206)<=(size.top+size.height+tolerance) &&
(offset.left+206)<=(size.left+size.width+tolerance)) {
id = $(this).data('id');
let id = $(this).data('id')
if (id!=='0'&&id!==0&&id!=='f'&&id!=='s'&&id!=='r'&&id!==null&&id!==undefined) {
if (id!=='0' && id!==0 && id!=='f' && id!=='s' && id!=='r' && id!==null) {
ids.push(id);
$(this).addClass('active');
ids.push(id)
$(this).addClass('active')
}
}
}
});
})
if (ids.length!==0&&visible.album()) contextMenu.photoMulti(ids, e);
else if (ids.length!==0&&visible.albums()) contextMenu.albumMulti(ids, e);
else multiselect.close();
if (ids.length!==0 && visible.album()) contextMenu.photoMulti(ids, e)
else if (ids.length!==0 && visible.albums()) contextMenu.albumMulti(ids, e)
else multiselect.close()
}
multiselect.close = function() {
sidebar.setSelectable(true);
sidebar.setSelectable(true)
multiselect.stopResize();
multiselect.stopResize()
multiselect.position.top = null;
multiselect.position.right = null;
multiselect.position.bottom = null;
multiselect.position.left = null;
multiselect.position.top = null
multiselect.position.right = null
multiselect.position.bottom = null
multiselect.position.left = null
lychee.animate('#multiselect', 'fadeOut');
setTimeout(function() {
$('#multiselect').remove();
}, 300);
lychee.animate('#multiselect', 'fadeOut')
setTimeout(() => $('#multiselect').remove(), 300)
}

View File

@ -7,8 +7,8 @@ sidebar = {
_dom: $('#sidebar'),
types: {
DEFAULT: 0,
TAGS: 1
DEFAULT : 0,
TAGS : 1
},
createStructure: {}
@ -16,8 +16,9 @@ sidebar = {
sidebar.dom = function(selector) {
if (selector===undefined||selector===null||selector==='') return sidebar._dom;
return sidebar._dom.find(selector);
if (selector==null || selector==='') return sidebar._dom
return sidebar._dom.find(selector)
}
@ -29,56 +30,55 @@ sidebar.bind = function() {
// event handlers should be removed before binding a new one.
// Event Name
var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
let eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click'
sidebar
.dom('#edit_title')
.off(eventName)
.on(eventName, function() {
if (visible.photo()) photo.setTitle([photo.getID()]);
else if (visible.album()) album.setTitle([album.getID()]);
});
if (visible.photo()) photo.setTitle([photo.getID()])
else if (visible.album()) album.setTitle([album.getID()])
})
sidebar
.dom('#edit_description')
.off(eventName)
.on(eventName, function() {
if (visible.photo()) photo.setDescription(photo.getID());
else if (visible.album()) album.setDescription(album.getID());
});
if (visible.photo()) photo.setDescription(photo.getID())
else if (visible.album()) album.setDescription(album.getID())
})
sidebar
.dom('#edit_tags')
.off(eventName)
.on(eventName, function() {
photo.editTags([photo.getID()])
});
})
sidebar
.dom('#tags .tag span')
.off(eventName)
.on(eventName, function() {
photo.deleteTag(photo.getID(), $(this).data('index'))
});
})
return true;
return true
}
sidebar.toggle = function() {
if (visible.sidebar()||
visible.sidebarbutton()) {
if (visible.sidebar() || visible.sidebarbutton()) {
header.dom('.button--info').toggleClass('active');
lychee.content.toggleClass('sidebar');
sidebar.dom().toggleClass('active');
header.dom('.button--info').toggleClass('active')
lychee.content.toggleClass('sidebar')
sidebar.dom().toggleClass('active')
return true;
return true
}
return false;
return false
}
@ -88,67 +88,67 @@ sidebar.setSelectable = function(selectable = true) {
// Selection needs to be deactivated to prevent an unwanted selection
// while using multiselect.
if (selectable===true) sidebar.dom().removeClass('notSelectable');
else sidebar.dom().addClass('notSelectable');
if (selectable===true) sidebar.dom().removeClass('notSelectable')
else sidebar.dom().addClass('notSelectable')
}
sidebar.changeAttr = function(attr, value = '-') {
if (attr===undefined||attr===null||attr==='') return false;
if (attr==null || attr==='') return false
// Set a default for the value
if (value===''||value===null) value = '-';
if (value==null || value==='') value = '-'
sidebar.dom('.attr_' + attr).html(value);
sidebar.dom('.attr_' + attr).html(value)
return true;
return true
}
sidebar.createStructure.photo = function(data) {
if (data===undefined||data===null||data==='') return false;
if (data==null || data==='') return false
var editable = false,
exifHash = data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
structure = {},
_public = '';
let editable = false,
exifHash = data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
structure = {},
_public = ''
// Enable editable when user logged in
if (lychee.publicMode===false) editable = true;
if (lychee.publicMode===false) editable = true
// Set value for public
switch (data.public) {
case '0': _public = 'No';
break;
case '1': _public = 'Yes';
break;
case '2': _public = 'Yes (Album)';
break;
default: _public = '-';
break;
case '0' : _public = 'No'
break
case '1' : _public = 'Yes'
break
case '2' : _public = 'Yes (Album)'
break
default : _public = '-'
break
}
structure.basics = {
title: 'Basics',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Title', value: data.title, editable },
{ title: 'Uploaded', value: data.sysdate },
{ title: 'Description', value: data.description, editable },
title : 'Basics',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Title', value: data.title, editable },
{ title: 'Uploaded', value: data.sysdate },
{ title: 'Description', value: data.description, editable }
]
}
structure.image = {
title: 'Image',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Size', value: data.size },
{ title: 'Format', value: data.type },
{ title: 'Resolution', value: data.width + ' x ' + data.height }
title : 'Image',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Size', value: data.size },
{ title: 'Format', value: data.type },
{ title: 'Resolution', value: data.width + ' x ' + data.height }
]
}
@ -156,9 +156,9 @@ sidebar.createStructure.photo = function(data) {
if (lychee.publicMode===false) {
structure.tags = {
title: 'Tags',
type: sidebar.types.TAGS,
value: build.tags(data.tags),
title : 'Tags',
type : sidebar.types.TAGS,
value : build.tags(data.tags),
editable
}
@ -172,16 +172,16 @@ sidebar.createStructure.photo = function(data) {
if (exifHash!=='0') {
structure.exif = {
title: 'Camera',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Captured', value: data.takedate },
{ title: 'Make', value: data.make },
{ title: 'Type/Model', value: data.model },
{ title: 'Shutter Speed', value: data.shutter },
{ title: 'Aperture', value: data.aperture },
{ title: 'Focal Length', value: data.focal },
{ title: 'ISO', value: data.iso }
title : 'Camera',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Captured', value: data.takedate },
{ title: 'Make', value: data.make },
{ title: 'Type/Model', value: data.model },
{ title: 'Shutter Speed', value: data.shutter },
{ title: 'Aperture', value: data.aperture },
{ title: 'Focal Length', value: data.focal },
{ title: 'ISO', value: data.iso }
]
}
@ -192,10 +192,10 @@ sidebar.createStructure.photo = function(data) {
}
structure.sharing = {
title: 'Sharing',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Public', value: _public },
title : 'Sharing',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Public', value: _public }
]
}
@ -208,98 +208,98 @@ sidebar.createStructure.photo = function(data) {
structure.sharing
]
return structure;
return structure
}
sidebar.createStructure.album = function(data) {
if (data===undefined||data===null||data==='') return false;
if (data==null || data==='') return false
var editable = false,
structure = {},
_public = '',
visible = '',
downloadable = '',
password = '';
let editable = false,
structure = {},
_public = '',
visible = '',
downloadable = '',
password = ''
// Enable editable when user logged in
if (lychee.publicMode===false) editable = true;
if (lychee.publicMode===false) editable = true
// Set value for public
switch (data.public) {
case '0': _public = 'No';
break;
case '1': _public = 'Yes';
break;
default: _public = '-';
break;
case '0' : _public = 'No'
break
case '1' : _public = 'Yes'
break
default : _public = '-'
break
}
// Set value for visible
switch (data.visible) {
case '0': visible = 'No';
break;
case '1': visible = 'Yes';
break;
default: visible = '-';
break;
case '0' : visible = 'No'
break
case '1' : visible = 'Yes'
break
default : visible = '-'
break
}
// Set value for downloadable
switch (data.downloadable) {
case '0': downloadable = 'No';
break;
case '1': downloadable = 'Yes';
break;
default: downloadable = '-';
break;
case '0' : downloadable = 'No'
break
case '1' : downloadable = 'Yes'
break
default : downloadable = '-'
break
}
// Set value for password
switch (data.password) {
case '0': password = 'No';
break;
case '1': password = 'Yes';
break;
default: password = '-';
break;
case '0' : password = 'No'
break
case '1' : password = 'Yes'
break
default : password = '-'
break
}
structure.basics = {
title: 'Basics',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Title', value: data.title, editable },
{ title: 'Description', value: data.description, editable }
title : 'Basics',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Title', value: data.title, editable },
{ title: 'Description', value: data.description, editable }
]
}
structure.album = {
title: 'Album',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Created', value: data.sysdate },
{ title: 'Images', value: data.num }
title : 'Album',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Created', value: data.sysdate },
{ title: 'Images', value: data.num }
]
}
structure.share = {
title: 'Share',
type: sidebar.types.DEFAULT,
rows: [
{ title: 'Public', value: _public },
{ title: 'Visible', value: visible },
{ title: 'Downloadable', value: downloadable },
{ title: 'Password', value: password }
title : 'Share',
type : sidebar.types.DEFAULT,
rows : [
{ title: 'Public', value: _public },
{ title: 'Visible', value: visible },
{ title: 'Downloadable', value: downloadable },
{ title: 'Password', value: password }
]
}
@ -310,87 +310,87 @@ sidebar.createStructure.album = function(data) {
structure.share
]
return structure;
return structure
}
sidebar.render = function(structure) {
if (structure===undefined||structure===null||structure==='') return false;
if (structure==null || structure==='') return false
var html = '';
let html = ''
var renderDefault = function(section) {
let renderDefault = function(section) {
let _html = '';
let _html = ''
_html += `
<div class='divider'>
<h1>${ section.title }</h1>
</div>
<table>
`
_html += `
<div class='divider'>
<h1>${ section.title }</h1>
</div>
<table>
`
section.rows.forEach(function(row) {
let value = row.value;
let value = row.value
// Set a default for the value
if (value===''||value===null||value===undefined) value = '-';
if (value==='' || value==null) value = '-'
// Wrap span-element around value for easier selecting on change
value = `<span class='attr_${ row.title.toLowerCase() }'>${ value }</span>`;
value = `<span class='attr_${ row.title.toLowerCase() }'>${ value }</span>`
// Add edit-icon to the value when editable
if (row.editable===true) value += ' ' + build.editIcon('edit_' + row.title.toLowerCase());
if (row.editable===true) value += ' ' + build.editIcon('edit_' + row.title.toLowerCase())
_html += `
<tr>
<td>${ row.title }</td>
<td>${ value }</td>
</tr>
`
_html += `
<tr>
<td>${ row.title }</td>
<td>${ value }</td>
</tr>
`
});
})
_html += `
</table>
`
_html += `
</table>
`
return _html;
return _html
};
}
var renderTags = function(section) {
let renderTags = function(section) {
let _html = '';
let _html = ''
_html += `
<div class='divider'>
<h1>${ section.title }</h1>
</div>
<div id='tags'>
<div class='attr_${ section.title.toLowerCase() }'>${ section.value }</div>
`
_html += `
<div class='divider'>
<h1>${ section.title }</h1>
</div>
<div id='tags'>
<div class='attr_${ section.title.toLowerCase() }'>${ section.value }</div>
`
// Add edit-icon to the value when editable
if (section.editable===true) _html += build.editIcon('edit_tags');
if (section.editable===true) _html += build.editIcon('edit_tags')
_html += `
</div>
`
_html += `
</div>
`
return _html;
return _html
}
structure.forEach(function(section) {
if (section.type===sidebar.types.DEFAULT) html += renderDefault(section);
else if (section.type===sidebar.types.TAGS) html += renderTags(section);
if (section.type===sidebar.types.DEFAULT) html += renderDefault(section)
else if (section.type===sidebar.types.TAGS) html += renderTags(section)
});
})
return html;
return html
}