123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494 |
- /**
- * @description This module is used to generate HTML-Code.
- * @copyright 2015 by Tobias Reich
- */
- window.build = {}
- build.iconic = function(icon, classes, file) {
- var html = '',
- path = 'src/images/';
- file = file || 'iconic';
- classes = classes || '';
- html = `
- <svg viewBox='0 0 8 8' class='iconic ${ classes }'>
- <use xlink:href='${ path }${ file }.svg#${ icon }' />
- </svg>
- `
- return html;
- }
- build.divider = function(title) {
- var html = '';
- html = `
- <div class='divider fadeIn'>
- <h1>${ title }</h1>
- </div>
- `
- return html;
- }
- build.editIcon = function(id) {
- var html = '';
- html = `<div id='${ id }' class='edit'>${ build.iconic('pencil') }</div>`
- return html;
- }
- build.multiselect = function(top, left) {
- var html = '';
- html = `<div id='multiselect' style='top: ${ top }px; left: ${ left }px;'></div>`
- return html;
- }
- build.album = function(data) {
- if (data===null||data===undefined) return '';
- var html = '',
- title = data.title,
- longTitle = '',
- typeThumb = '';
- if (title!==null&&title.length>18) {
- title = data.title.substr(0, 18) + '...';
- longTitle = data.title;
- }
- if (data.thumbs[0].split('.').pop()==='svg') typeThumb = 'nonretina';
- html = `
- <div class='album' data-id='${ data.id }'>
- <img src='${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-type='nonretina'>
- <img src='${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-type='nonretina'>
- <img src='${ data.thumbs[0] }' width='200' height='200' alt='thumb' data-type='${ typeThumb }'>
- <div class='overlay'>
- <h1 title='${ longTitle }'>${ title }</h1>
- <a>${ data.sysdate }</a>
- </div>
- `
- if (lychee.publicMode===false) {
- if (data.star==='1') html += `<a class='badge icn-star'>${ build.iconic('star') }</a>`;
- if (data.public==='1') html += `<a class='badge icn-share'>${ build.iconic('eye') }</a>`;
- if (data.unsorted==='1') html += `<a class='badge'>${ build.iconic('list') }</a>`;
- if (data.recent==='1') html += `<a class='badge'>${ build.iconic('clock') }</a>`;
- if (data.password==='1') html += `<a class='badge'>${ build.iconic('lock-locked') }</a>`;
- }
- html += '</div>'
- return html;
- }
- build.photo = function(data) {
- if (data===null||data===undefined) return '';
- var html = '',
- title = data.title,
- longTitle = '';
- if (title!==null&&title.length>18) {
- title = data.title.substr(0, 18) + '...';
- longTitle = data.title;
- }
- html = `
- <div class='photo' data-album-id='${ data.album }' data-id='${ data.id }'>
- <img src='${ data.thumbUrl }' width='200' height='200' alt='thumb'>
- <div class='overlay'>
- <h1 title='${ longTitle }'>${ title }</h1>
- `
- if (data.cameraDate==='1') html += `<a><span title='Camera Date'>${ build.iconic('camera-slr') }</span>${ data.sysdate }</a>`;
- else html += `<a>${ data.sysdate }</a>`;
- html += '</div>';
- if (lychee.publicMode===false) {
- if (data.star==='1') html += `<a class='badge iconic-star'>${ build.iconic('star') }</a>`;
- if (data.public==='1'&&album.json.public!=='1') html += `<a class='badge iconic-share'>${ build.iconic('eye') }</a>`;
- }
- html += '</div>';
- return html
- }
- build.imageview = function(data, size, visibleControls) {
- if (data===null||data===undefined) return '';
- var html = '';
- html = `
- <div class='arrow_wrapper arrow_wrapper--previous'><a id='previous'>${ build.iconic('caret-left') }</a></div>
- <div class='arrow_wrapper arrow_wrapper--next'><a id='next'>${ build.iconic('caret-right') }</a></div>
- `
- if (size==='big') {
- if (visibleControls===true)
- html += `<div id='image' style='background-image: url(${ data.url })'></div>`;
- else
- html += `<div id='image' style='background-image: url(${ data.url });' class='full'></div>`;
- } else if (size==='medium') {
- if (visibleControls===true)
- html += `<div id='image' style='background-image: url(${ data.medium })'></div>`;
- else
- html += `<div id='image' style='background-image: url(${ data.medium });' class='full'></div>`;
- } else if (size==='small') {
- if (visibleControls===true)
- html += `<div id='image' class='small' style='background-image: url(${ data.url }); width: ${ data.width }px; height: ${ data.height }px; margin-top: -${ parseInt(data.height/2-20) }px; margin-left: -${ data.width/2 }px;'></div>`;
- else
- html += `<div id='image' class='small' style='background-image: url(${ data.url }); width: ${ data.width }px; height: ${ data.height }px; margin-top: -${ parseInt(data.height/2) }px; margin-left: -${ data.width/2 }px;'></div>`;
- }
- return html;
- }
- build.no_content = function(typ) {
- var html;
- html = `
- <div class='no_content fadeIn'>
- ${ build.iconic(typ) }
- `
- switch (typ) {
- case 'magnifying-glass': html += '<p>No results</p>';
- break;
- case 'eye': html += '<p>No public albums</p>';
- break;
- case 'cog': html += '<p>No configuration</p>';
- break;
- }
- html += '</div>';
- return html;
- }
- build.uploadModal = function(title, files) {
- var html = '',
- i = 0,
- file = null;
- html = `
- <h1>${ title }</h1>
- <div class='rows'>
- `
- while (i<files.length) {
- file = files[i];
- if (file.name.length>40) file.name = file.name.substr(0, 17) + '...' + file.name.substr(file.name.length-20, 20);
- html += `
- <div class='row'>
- <a class='name'>${ lychee.escapeHTML(file.name) }</a>
- `
- if (file.supported===true) html += `<a class='status'></a>`;
- else html += `<a class='status error'>Not supported</a>`;
- html += `
- <p class='notice'></p>
- </div>
- `
- i++;
- }
- html += '</div>';
- return html;
- }
- build.tags = function(tags, forView = false) {
- var html = '',
- editTagsHTML = '';
- if (forView===false&&lychee.publicMode===false) editTagsHTML = ' ' + build.editIcon('edit_tags');
- if (tags!=='') {
- tags = tags.split(',');
- tags.forEach(function(tag, index, array) {
- 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>`;
- }
- return html;
- }
- 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 = '',
- visible = '',
- password = '',
- downloadable = '',
- editTitleHTML = '',
- editDescriptionHTML = '',
- infos = [];
- switch (data.public) {
- case '0': visible = 'No';
- break;
- case '1': visible = 'Yes';
- break;
- default: visible = '-';
- break;
- }
- switch (data.password) {
- case '0': password = 'No';
- break;
- case '1': password = 'Yes';
- break;
- default: password = '-';
- break;
- }
- switch (data.downloadable) {
- case '0': downloadable = 'No';
- break;
- case '1': downloadable = 'Yes';
- break;
- default: downloadable = '-';
- break;
- }
- if (forView===false&&lychee.publicMode===false) {
- editTitleHTML = ' ' + build.editIcon('edit_title');
- editDescriptionHTML = ' ' + build.editIcon('edit_description');
- }
- infos = [
- ['', 'Basics'],
- ['Title', data.title + editTitleHTML],
- ['Description', data.description + editDescriptionHTML],
- ['', 'Album'],
- ['Created', data.sysdate],
- ['Images', data.num],
- ['', 'Share'],
- ['Public', visible],
- ['Downloadable', downloadable],
- ['Password', password]
- ]
- infos.forEach(function(info, i, items) {
- // Set default for empty values
- if (info[1]===''||info[1]===null||info[1]===undefined) info[1] = '-';
- if (info[0]==='') {
- // Divider
- html += `
- </table>
- <div class='divider'>
- <h1>${ info[1] }</h1>
- </div>
- <table id='infos'>
- `
- } else {
- // Item
- html += `
- <tr>
- <td>${ info[0] }</td>
- <td class='attr_${ info[0].toLowerCase() }'>${ info[1] }</td>
- </tr>
- `
- }
- });
- html += `
- </table>
- `
- return html;
- }
|