123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- /**
- * @description This module takes care of the sidebar.
- * @copyright 2015 by Tobias Reich
- */
- sidebar = {
- _dom: $('#sidebar'),
- types: {
- DEFAULT: 0,
- TAGS: 1
- },
- createStructure: {}
- }
- sidebar.dom = function(selector) {
- if (selector===undefined||selector===null||selector==='') return sidebar._dom;
- return sidebar._dom.find(selector);
- }
- sidebar.bind = function() {
- // This function should be called after building and appending
- // the sidebars content to the DOM.
- // This function can be called multiple times, therefore
- // event handlers should be removed before binding a new one.
- // Event Name
- var 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()]);
- });
- sidebar
- .dom('#edit_description')
- .off(eventName)
- .on(eventName, function() {
- 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;
- }
- sidebar.toggle = function() {
- if (visible.sidebar()||
- visible.sidebarbutton()) {
- header.dom('.button--info').toggleClass('active')
- lychee.content.toggleClass('sidebar');
- sidebar.dom().toggleClass('active');
- return true;
- }
- return false;
- }
- sidebar.setSelectable = function(selectable = true) {
- // Attributes/Values inside the sidebar are selectable by default.
- // 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');
- }
- sidebar.changeAttr = function(attr, value = '-') {
- if (attr===undefined||attr===null||attr==='') return false;
- // Set a default for the value
- if (value===''||value===null) value = '-';
- sidebar.dom('.attr_' + attr).html(value);
- return true;
- }
- sidebar.createStructure.photo = function(data) {
- if (data===undefined||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 = '';
- // Enable editable when user logged in
- 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;
- }
- 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 },
- ]
- }
- 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 }
- ]
- }
- // Only create tags section when user logged in
- if (lychee.publicMode===false) {
- structure.tags = {
- title: 'Tags',
- type: sidebar.types.TAGS,
- value: build.tags(data.tags),
- editable
- }
- } else {
- structure.tags = {}
- }
- // Only create EXIF section when EXIF data available
- 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 }
- ]
- }
- } else {
- structure.exif = {}
- }
- structure.sharing = {
- title: 'Sharing',
- type: sidebar.types.DEFAULT,
- rows: [
- { title: 'Public', value: public },
- ]
- }
- // Construct all parts of the structure
- structure = [
- structure.basics,
- structure.image,
- structure.tags,
- structure.exif,
- structure.sharing
- ]
- return structure;
- }
- sidebar.createStructure.album = function(data) {
- if (data===undefined||data===null||data==='') return false;
- var editable = false,
- structure = {},
- public = '',
- visible = '',
- downloadable = '',
- password = '';
- // Enable editable when user logged in
- 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;
- }
- // Set value for visible
- switch (data.visible) {
- 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;
- }
- // Set value for password
- switch (data.password) {
- 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 }
- ]
- }
- structure.album = {
- 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 }
- ]
- }
- // Construct all parts of the structure
- structure = [
- structure.basics,
- structure.album,
- structure.share
- ]
- return structure;
- }
- sidebar.render = function(structure) {
- if (structure===undefined||structure===null||structure==='') return false;
- var html = '';
- var renderDefault = function(section) {
- let _html = '';
- _html += `
- <div class='divider'>
- <h1>${ section.title }</h1>
- </div>
- <table>
- `
- section.rows.forEach(function(row) {
- let value = row.value;
- // Set a default for the value
- if (value===''||value===null||value===undefined) value = '-';
- // Wrap span-element around value for easier selecting on change
- 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());
- _html += `
- <tr>
- <td>${ row.title }</td>
- <td>${ value }</td>
- </tr>
- `
- });
- _html += `
- </table>
- `
- return _html;
- };
- var renderTags = function(section) {
- let _html = '';
- _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');
- _html += `
- </div>
- `
- 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);
- });
- return html;
- }
|