diff --git a/src/scripts/multiselect.js b/src/scripts/multiselect.js index 30afe41..37a85c2 100644 --- a/src/scripts/multiselect.js +++ b/src/scripts/multiselect.js @@ -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) } \ No newline at end of file diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js index e2ca668..0f66b28 100644 --- a/src/scripts/sidebar.js +++ b/src/scripts/sidebar.js @@ -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 += ` -
${ row.title } | -${ value } | -
${ row.title } | +${ value } | +