Rewritten building and binding of sidebar
This commit is contained in:
Tobias Reich
parent
ae3ffec4ce
commit
5c71fc3727
BIN
dist/main.css
vendored
BIN
dist/main.css
vendored
Binary file not shown.
BIN
dist/main.js
vendored
BIN
dist/main.js
vendored
Binary file not shown.
BIN
dist/view.js
vendored
BIN
dist/view.js
vendored
Binary file not shown.
@ -244,13 +244,11 @@ build.uploadModal = function(title, files) {
|
||||
|
||||
}
|
||||
|
||||
build.tags = function(tags, forView = false) {
|
||||
build.tags = function(tags) {
|
||||
|
||||
var html = '',
|
||||
editTagsHTML = '';
|
||||
|
||||
if (forView===false&&lychee.publicMode===false) editTagsHTML = ' ' + build.editIcon('edit_tags');
|
||||
|
||||
if (tags!=='') {
|
||||
|
||||
tags = tags.split(',');
|
||||
@ -259,11 +257,9 @@ build.tags = function(tags, forView = false) {
|
||||
html += `<a class='tag'>${ tag }<span data-index='${ index }'>${ build.iconic('x') }</span></a>`
|
||||
});
|
||||
|
||||
html += editTagsHTML;
|
||||
|
||||
} else {
|
||||
|
||||
html = `<div class='empty'>No Tags${ editTagsHTML }</div>`;
|
||||
html = `<div class='empty'>No Tags</div>`;
|
||||
|
||||
}
|
||||
|
||||
@ -271,129 +267,6 @@ build.tags = function(tags, forView = false) {
|
||||
|
||||
}
|
||||
|
||||
build.sidebarPhoto = function(data, forView = false) {
|
||||
|
||||
var html = '',
|
||||
visible = '',
|
||||
editTitleHTML = '',
|
||||
editDescriptionHTML = '',
|
||||
exifHash = '',
|
||||
info = [];
|
||||
|
||||
switch (data.public) {
|
||||
|
||||
case '0': visible = 'No';
|
||||
break;
|
||||
case '1': visible = 'Yes';
|
||||
break;
|
||||
case '2': visible = 'Yes (Album)';
|
||||
break;
|
||||
default: visible = '-';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
if (forView===false&&lychee.publicMode===false) {
|
||||
editTitleHTML = ' ' + build.editIcon('edit_title');
|
||||
editDescriptionHTML = ' ' + build.editIcon('edit_description');
|
||||
}
|
||||
|
||||
infos = [
|
||||
['', 'Basics'],
|
||||
['Title', data.title + editTitleHTML],
|
||||
['Uploaded', data.sysdate],
|
||||
['Description', data.description + editDescriptionHTML],
|
||||
['', 'Image'],
|
||||
['Size', data.size],
|
||||
['Format', data.type],
|
||||
['Resolution', data.width + ' x ' + data.height],
|
||||
['Tags', build.tags(data.tags, forView)]
|
||||
]
|
||||
|
||||
exifHash = data.takestamp+data.make+data.model+data.shutter+data.aperture+data.focal+data.iso;
|
||||
|
||||
if (exifHash!=='0') {
|
||||
|
||||
infos = infos.concat([
|
||||
['', 'Camera'],
|
||||
['Captured', data.takedate],
|
||||
['Make', data.make],
|
||||
['Type/Model', data.model],
|
||||
['Shutter Speed', data.shutter],
|
||||
['Aperture', data.aperture],
|
||||
['Focal Length', data.focal],
|
||||
['ISO', data.iso]
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
infos = infos.concat([
|
||||
['', 'Share'],
|
||||
['Public', visible]
|
||||
]);
|
||||
|
||||
infos.forEach(function(info, i, items) {
|
||||
|
||||
// Set default for empty values
|
||||
if (info[1]===''||info[1]===null||info[1]===undefined) info[1] = '-';
|
||||
|
||||
switch (info[0]) {
|
||||
|
||||
case '':
|
||||
|
||||
// Divider
|
||||
html += `
|
||||
</table>
|
||||
<div class='divider'>
|
||||
<h1>${ info[1] }</h1>
|
||||
</div>
|
||||
<table>
|
||||
`
|
||||
|
||||
break;
|
||||
|
||||
case 'Tags':
|
||||
|
||||
// Tags
|
||||
if (forView===false&&lychee.publicMode===false) {
|
||||
|
||||
html += `
|
||||
</table>
|
||||
<div class='divider'>
|
||||
<h1>${ info[0] }</h1>
|
||||
</div>
|
||||
<div id='tags'>${ info[1] }</div>
|
||||
`
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
// Item
|
||||
html += `
|
||||
<tr>
|
||||
<td>${ info[0] }</td>
|
||||
<td class='attr_${ info[0].toLowerCase() }'>${ info[1] }</td>
|
||||
</tr>
|
||||
`
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
html += `
|
||||
</table>
|
||||
`
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.sidebarAlbum = function(data, forView = false) {
|
||||
|
||||
var html = '',
|
||||
|
||||
@ -5,7 +5,12 @@
|
||||
|
||||
sidebar = {
|
||||
|
||||
_dom: $('#sidebar')
|
||||
_dom: $('#sidebar'),
|
||||
types: {
|
||||
DEFAULT: 0,
|
||||
TAGS: 1
|
||||
},
|
||||
createStructure: {}
|
||||
|
||||
}
|
||||
|
||||
@ -19,23 +24,42 @@ sidebar.dom = function(selector) {
|
||||
sidebar.bind = function() {
|
||||
|
||||
// This function should be called after building and appending
|
||||
// the sidebars content to the DOM
|
||||
// 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').on(eventName, function() {
|
||||
if (visible.photo()) photo.setTitle([photo.getID()]);
|
||||
else if (visible.album()) album.setTitle([album.getID()]);
|
||||
});
|
||||
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').on(eventName, function() {
|
||||
if (visible.photo()) photo.setDescription(photo.getID());
|
||||
else if (visible.album()) album.setDescription(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') .on(eventName, function() { photo.editTags([photo.getID()]) });
|
||||
sidebar.dom('#tags .tag span') .on(eventName, function() { photo.deleteTag(photo.getID(), $(this).data('index')) });
|
||||
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;
|
||||
|
||||
@ -69,20 +93,202 @@ sidebar.setSelectable = function(selectable = true) {
|
||||
|
||||
}
|
||||
|
||||
sidebar.changeAttr = function(attr, value, editable = false) {
|
||||
sidebar.changeAttr = function(attr, value = '-') {
|
||||
|
||||
if (attr===undefined||attr===null||attr==='') return false;
|
||||
|
||||
// This will add an edit-icon next to the value when editable is true.
|
||||
// The id of the edit-icon always starts with 'edit_' followed by the name of the attribute.
|
||||
if (editable===true) value = value + ' ' + build.editIcon('edit_' + attr);
|
||||
// Set a default for the value
|
||||
if (value===''||value===null) value = '-';
|
||||
|
||||
sidebar.dom('.attr_' + attr).html(value);
|
||||
|
||||
// The new edit-icon needs an event, therefore the binding function
|
||||
// should be executed again after changing the value
|
||||
if (editable===true) sidebar.bind();
|
||||
|
||||
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 = {},
|
||||
visible = '';
|
||||
|
||||
// Enable editable when user logged in
|
||||
if (lychee.publicMode===false) editable = true;
|
||||
|
||||
// Set value for public
|
||||
switch (data.public) {
|
||||
|
||||
case '0': visible = 'No';
|
||||
break;
|
||||
case '1': visible = 'Yes';
|
||||
break;
|
||||
case '2': visible = 'Yes (Album)';
|
||||
break;
|
||||
default: visible = '-';
|
||||
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: visible },
|
||||
]
|
||||
}
|
||||
|
||||
// Construct all parts of the structure
|
||||
structure = [
|
||||
structure.basics,
|
||||
structure.image,
|
||||
structure.tags,
|
||||
structure.exif,
|
||||
structure.sharing
|
||||
]
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
@ -137,7 +137,7 @@ view.album = {
|
||||
lychee.setTitle('Unsorted', false);
|
||||
break;
|
||||
default:
|
||||
if (album.json.init) sidebar.changeAttr('title', album.json.title, true);
|
||||
if (album.json.init) sidebar.changeAttr('title', album.json.title);
|
||||
lychee.setTitle(album.json.title, true);
|
||||
break;
|
||||
}
|
||||
@ -216,7 +216,7 @@ view.album = {
|
||||
|
||||
description: function() {
|
||||
|
||||
sidebar.changeAttr('description', album.json.description, true);
|
||||
sidebar.changeAttr('description', album.json.description);
|
||||
|
||||
},
|
||||
|
||||
@ -334,14 +334,14 @@ view.photo = {
|
||||
|
||||
title: function() {
|
||||
|
||||
if (photo.json.init) sidebar.changeAttr('title', photo.json.title, true);
|
||||
if (photo.json.init) sidebar.changeAttr('title', photo.json.title);
|
||||
lychee.setTitle(photo.json.title, true);
|
||||
|
||||
},
|
||||
|
||||
description: function() {
|
||||
|
||||
if (photo.json.init) sidebar.changeAttr('description', photo.json.description, true);
|
||||
if (photo.json.init) sidebar.changeAttr('description', photo.json.description);
|
||||
|
||||
},
|
||||
|
||||
@ -380,7 +380,7 @@ view.photo = {
|
||||
|
||||
tags: function() {
|
||||
|
||||
sidebar.dom('#tags').html(build.tags(photo.json.tags));
|
||||
sidebar.changeAttr('tags', build.tags(photo.json.tags));
|
||||
sidebar.bind();
|
||||
|
||||
},
|
||||
@ -418,7 +418,10 @@ view.photo = {
|
||||
|
||||
sidebar: function() {
|
||||
|
||||
sidebar.dom('.wrapper').html(build.sidebarPhoto(photo.json));
|
||||
var structure = sidebar.createStructure.photo(photo.json),
|
||||
html = sidebar.render(structure);
|
||||
|
||||
sidebar.dom('.wrapper').html(html);
|
||||
sidebar.bind();
|
||||
|
||||
}
|
||||
|
||||
@ -141,9 +141,13 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tags .empty {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
margin: 0 2px 8px 0;
|
||||
}
|
||||
|
||||
#tags .edit { margin-top: 6px; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user