123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398 |
- /**
- * @description This module takes care of the sidebar.
- */
- sidebar = {
- _dom: $('.sidebar'),
- types: {
- DEFAULT : 0,
- TAGS : 1
- },
- createStructure: {}
- }
- sidebar.dom = function(selector) {
- if (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
- let eventName = lychee.getEventName()
- 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('content--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 = '-', dangerouslySetInnerHTML = false) {
- if (attr==null || attr==='') return false
- // Set a default for the value
- if (value==null || value==='') value = '-'
- // Escape value
- if (dangerouslySetInnerHTML===false) value = lychee.escapeHTML(value)
- // Set new value
- sidebar.dom('.attr_' + attr).html(value)
- return true
- }
- sidebar.createStructure.photo = function(data) {
- if (data==null || data==='') return false
- let editable = false
- let exifHash = data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso
- let structure = {}
- let _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==null || data==='') return false
- let editable = false
- let structure = {}
- let _public = ''
- let hidden = ''
- let downloadable = ''
- let 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 hidden
- switch (data.visible) {
- case '0' : hidden = 'Yes'
- break
- case '1' : hidden = 'No'
- break
- default : hidden = '-'
- 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: 'Hidden', value: hidden },
- { 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==null || structure==='' || structure===false) return false
- let html = ''
- let renderDefault = function(section) {
- let _html = ''
- _html += `
- <div class='sidebar__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 = '-'
- // Wrap span-element around value for easier selecting on change
- value = lychee.html`<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 += lychee.html`
- <tr>
- <td>$${ row.title }</td>
- <td>${ value }</td>
- </tr>
- `
- })
- _html += `
- </table>
- `
- return _html
- }
- let renderTags = function(section) {
- let _html = ''
- let editable = ''
- // Add edit-icon to the value when editable
- if (section.editable===true) editable = build.editIcon('edit_tags')
- _html += lychee.html`
- <div class='sidebar__divider'>
- <h1>$${ section.title }</h1>
- </div>
- <div id='tags'>
- <div class='attr_$${ section.title.toLowerCase() }'>${ section.value }</div>
- ${ editable }
- </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
- }
|