Build to coffee
This commit is contained in:
Tobias Reich
parent
96023b58f8
commit
0afcd107a9
454
src/scripts/build.coffee
Normal file
454
src/scripts/build.coffee
Normal file
@ -0,0 +1,454 @@
|
||||
###
|
||||
# @description This module is used to generate HTML-Code.
|
||||
# @copyright 2014 by Tobias Reich
|
||||
###
|
||||
|
||||
window.build = {}
|
||||
|
||||
build.divider = (title) ->
|
||||
|
||||
"<div class='divider fadeIn'><h1>#{ title }</h1></div>"
|
||||
|
||||
build.editIcon = (id) ->
|
||||
|
||||
"<div id='#{ id }' class='edit'><a class='icon-pencil'></a></div>"
|
||||
|
||||
build.multiselect = (top, left) ->
|
||||
|
||||
"<div id='multiselect' style='top: #{ top }px; left: #{ left }px;'></div>"
|
||||
|
||||
build.album = (data) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
title = data.title
|
||||
longTitle = ''
|
||||
typeThumb = ''
|
||||
|
||||
if title? and title.length > 18
|
||||
|
||||
title = data.title.substr(0, 18) + '...'
|
||||
longTitle = data.title
|
||||
|
||||
if data.thumb0.split('.').pop() is 'svg' then typeThumb = 'nonretina'
|
||||
|
||||
html = """
|
||||
<div class='album' data-id='#{ data.id }' data-password='#{ data.password }'>
|
||||
<img src='#{ data.thumb2 }' width='200' height='200' alt='thumb' data-type='nonretina'>
|
||||
<img src='#{ data.thumb1 }' width='200' height='200' alt='thumb' data-type='nonretina'>
|
||||
<img src='#{ data.thumb0 }' width='200' height='200' alt='thumb' data-type='#{ typeThumb }'>
|
||||
<div class='overlay'>
|
||||
"""
|
||||
|
||||
if data.password and lychee.publicMode is false
|
||||
html += "<h1 title='#{ longTitle }'><span class='icon-lock'></span> #{ title }</h1>";
|
||||
else
|
||||
html += "<h1 title='#{ longTitle }'>#{ title }</h1>"
|
||||
|
||||
html += """
|
||||
<a>#{ data.sysdate }</a>
|
||||
</div>
|
||||
"""
|
||||
|
||||
if lychee.publicMode is false
|
||||
|
||||
if data.star is '1' then html += "<a class='badge red icon-star'></a>"
|
||||
if data.public is '1' then html += "<a class='badge red icon-share'></a>"
|
||||
if data.unsorted is '1' then html += "<a class='badge red icon-reorder'></a>"
|
||||
if data.recent is '1' then html += "<a class='badge red icon-time'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.photo = (data) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
title = data.title
|
||||
longTitle = ''
|
||||
|
||||
if title? and 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 is '1'
|
||||
html += "<a><span class='icon-camera' title='Photo Date'></span>#{ data.sysdate }</a>"
|
||||
else
|
||||
html += "<a>#{ data.sysdate }</a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
if data.star is '1' then html += "<a class='badge red icon-star'></a>"
|
||||
if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge red icon-share'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.imageview = (data, size, visibleControls) ->
|
||||
|
||||
return '' if not data?
|
||||
|
||||
html = """
|
||||
<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>
|
||||
<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>
|
||||
"""
|
||||
|
||||
if size is 'big'
|
||||
|
||||
if visibleControls is 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 is 'medium'
|
||||
|
||||
if visibleControls is 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 is 'small'
|
||||
|
||||
if visibleControls is 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 = (typ) ->
|
||||
|
||||
html = """
|
||||
<div class='no_content fadeIn'>
|
||||
<a class='icon icon-#{ typ }'></a>
|
||||
"""
|
||||
|
||||
switch typ
|
||||
when 'search' then html += "<p>No results</p>"
|
||||
when 'share' then html += "<p>No public albums</p>"
|
||||
when 'cog' then html += "<p>No configuration</p>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.modal = (title, text, button, marginTop, closeButton) ->
|
||||
|
||||
if marginTop? then custom_style = "style='margin-top: #{ marginTop }px;'"
|
||||
else custom_style = ''
|
||||
|
||||
html = """
|
||||
<div class='message_overlay fadeIn'>
|
||||
<div class='message center' #{ custom_style }>
|
||||
<h1>#{ title }</h1>
|
||||
"""
|
||||
|
||||
if closeButton isnt false then html += "<a class='close icon-remove-sign'></a>"
|
||||
|
||||
html += "<p>#{ text }</p>"
|
||||
|
||||
$.each button, (index) ->
|
||||
|
||||
if this[0] isnt ''
|
||||
|
||||
if index is 0 then html += "<a class='button active'>#{ this[0] }</a>"
|
||||
else html += "<a class='button'>#{ this[0] }</a>"
|
||||
|
||||
html += """
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.signInModal = ->
|
||||
|
||||
html = """
|
||||
<div class='message_overlay'>
|
||||
<div class='message center'>
|
||||
<h1><a class='icon-lock'></a> Sign In</h1>
|
||||
<a class='close icon-remove-sign'></a>
|
||||
<div class='sign_in'>
|
||||
<input id='username' type='text' value='' placeholder='username' autocapitalize='off' autocorrect='off'>
|
||||
<input id='password' type='password' value='' placeholder='password'>
|
||||
</div>
|
||||
<div id='version'>Version #{ lychee.version }<span> – <a target='_blank' href='#{ lychee.updateURL }'>Update available!</a><span></div>
|
||||
<a onclick='lychee.login()' class='button active'>Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.uploadModal = (title, files) ->
|
||||
|
||||
html = """
|
||||
<div class='upload_overlay fadeIn'>
|
||||
<div class='upload_message center'>
|
||||
<h1>#{ title }</h1>
|
||||
<a class='close icon-remove-sign'></a>
|
||||
<div class='rows'>
|
||||
"""
|
||||
|
||||
console.log files
|
||||
|
||||
files.forEach (file, i, files) ->
|
||||
|
||||
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 is true then html += "<a class='status'></a>"
|
||||
else html += "<a class='status error'>Not supported</a>"
|
||||
|
||||
html += """
|
||||
<p class='notice'></p>
|
||||
</div>
|
||||
"""
|
||||
|
||||
html += """
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.contextMenu = (items) ->
|
||||
|
||||
html = """
|
||||
<div class='contextmenu_bg'></div>
|
||||
<div class='contextmenu'>
|
||||
<table>
|
||||
<tbody>
|
||||
"""
|
||||
|
||||
items.forEach (item, i, items) ->
|
||||
|
||||
if item[0] is 'separator' and item[1] is -1
|
||||
|
||||
html += "<tr class='separator'></tr>"
|
||||
|
||||
else if item[1] is -1
|
||||
|
||||
html += "<tr class='no_hover'><td>#{ item[0] }</td></tr>"
|
||||
|
||||
else if item[2]?
|
||||
|
||||
html += "<tr><td onclick='#{ item[2] }; window.contextMenu.close();'>#{ item[0] }</td></tr>"
|
||||
|
||||
else
|
||||
|
||||
html += "<tr><td onclick='window.contextMenu.fns[#{ item[1] }](); window.contextMenu.close();'>#{ item[0] }</td></tr>";
|
||||
|
||||
html += """
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.tags = (tags, forView) ->
|
||||
|
||||
html = ''
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTagsHTML = ''
|
||||
else editTagsHTML = ' ' + build.editIcon('edit_tags')
|
||||
|
||||
if tags isnt ''
|
||||
|
||||
tags = tags.split ','
|
||||
|
||||
tags.forEach (tag, index, array) ->
|
||||
html += "<a class='tag'>#{ tag }<span class='icon-remove' data-index='#{ index }'></span></a>"
|
||||
|
||||
html += editTagsHTML
|
||||
|
||||
else
|
||||
|
||||
html = "<div class='empty'>No Tags#{ editTagsHTML }</div>"
|
||||
|
||||
return html
|
||||
|
||||
build.infoboxPhoto = (data, forView) ->
|
||||
|
||||
html = """
|
||||
<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
|
||||
<div class='wrapper'>
|
||||
"""
|
||||
|
||||
switch data.public
|
||||
when '0' then visible = 'No'
|
||||
when '1' then visible = 'Yes'
|
||||
when '2' then visible = 'Yes (Album)'
|
||||
else visible = '-'
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTitleHTML = ''
|
||||
else editTitleHTML = ' ' + build.editIcon('edit_title')
|
||||
|
||||
if forView is true or lychee.publicMode is true then editDescriptionHTML = ''
|
||||
else 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 isnt '0' or exifHash isnt '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 (info, i, items) ->
|
||||
|
||||
if info[1] is '' or
|
||||
not info[1]?
|
||||
|
||||
info[1] = '-'
|
||||
|
||||
switch info[0]
|
||||
|
||||
when ''
|
||||
|
||||
# Separator
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><h1>#{ info[1] }</h1></div>
|
||||
<table>
|
||||
"""
|
||||
|
||||
when 'Tags'
|
||||
|
||||
# Tags
|
||||
if forView isnt true and lychee.publicMode is false
|
||||
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><h1>#{ info[0] }</h1></div>
|
||||
<div id='tags'>#{ info[1] }</div>
|
||||
"""
|
||||
|
||||
else
|
||||
|
||||
# Item
|
||||
html += """
|
||||
<tr>
|
||||
<td>#{ info[0] }</td>
|
||||
<td class='attr_#{ info[0].toLowerCase() }'>#{ info[1] }</td>
|
||||
</tr>
|
||||
"""
|
||||
|
||||
html += """
|
||||
</table>
|
||||
<div class='bumper'></div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
|
||||
build.infoboxAlbum = (data, forView) ->
|
||||
|
||||
html = """
|
||||
<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
|
||||
<div class='wrapper'>
|
||||
"""
|
||||
|
||||
switch data.public
|
||||
when '0' then visible = 'No'
|
||||
when '1' then visible = 'Yes'
|
||||
else visible = '-'
|
||||
|
||||
switch data.password
|
||||
when false then password = 'No'
|
||||
when true then password = 'Yes'
|
||||
else password = '-'
|
||||
|
||||
switch data.downloadable
|
||||
when '0' then downloadable = 'No'
|
||||
when '1' then downloadable = 'Yes'
|
||||
else downloadable = '-'
|
||||
|
||||
if forView is true or lychee.publicMode is true then editTitleHTML = ''
|
||||
else editTitleHTML = ' ' + build.editIcon('edit_title_album')
|
||||
|
||||
if forView is true or lychee.publicMode is true then editDescriptionHTML = ''
|
||||
else editDescriptionHTML = ' ' + build.editIcon('edit_description_album')
|
||||
|
||||
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 (info, i, items) ->
|
||||
|
||||
if info[0] is ''
|
||||
|
||||
# Separator
|
||||
html += """
|
||||
</table>
|
||||
<div class='separator'><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>
|
||||
<div class='bumper'></div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
return html
|
||||
@ -1,495 +0,0 @@
|
||||
/**
|
||||
* @name Build Module
|
||||
* @description This module is used to generate HTML-Code.
|
||||
* @author Tobias Reich
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
build = {}
|
||||
|
||||
build.divider = function(title) {
|
||||
|
||||
return "<div class='divider fadeIn'><h1>" + title + "</h1></div>";
|
||||
|
||||
}
|
||||
|
||||
build.editIcon = function(id) {
|
||||
|
||||
return "<div id='" + id + "' class='edit'><a class='icon-pencil'></a></div>";
|
||||
|
||||
}
|
||||
|
||||
build.multiselect = function(top, left) {
|
||||
|
||||
return "<div id='multiselect' style='top: " + top + "px; left: " + left + "px;'></div>";
|
||||
|
||||
}
|
||||
|
||||
build.album = function(albumJSON) {
|
||||
|
||||
if (!albumJSON) return "";
|
||||
|
||||
var album = "",
|
||||
longTitle = "",
|
||||
title = albumJSON.title,
|
||||
typeThumb = "";
|
||||
|
||||
if (title!==null&&title.length>18) {
|
||||
title = albumJSON.title.substr(0, 18) + "...";
|
||||
longTitle = albumJSON.title;
|
||||
}
|
||||
|
||||
if (albumJSON.thumb0.split('.').pop()==="svg") typeThumb = "nonretina";
|
||||
|
||||
album += "<div class='album' data-id='" + albumJSON.id + "' data-password='" + albumJSON.password + "'>";
|
||||
album += "<img src='" + albumJSON.thumb2 + "' width='200' height='200' alt='thumb' data-type='nonretina'>";
|
||||
album += "<img src='" + albumJSON.thumb1 + "' width='200' height='200' alt='thumb' data-type='nonretina'>";
|
||||
album += "<img src='" + albumJSON.thumb0 + "' width='200' height='200' alt='thumb' data-type='" + typeThumb + "'>";
|
||||
album += "<div class='overlay'>";
|
||||
|
||||
if (albumJSON.password&&!lychee.publicMode) album += "<h1><span class='icon-lock'></span> " + title + "</h1>";
|
||||
else album += "<h1 title='" + longTitle + "'>" + title + "</h1>";
|
||||
|
||||
album += "<a>" + albumJSON.sysdate + "</a>";
|
||||
album += "</div>";
|
||||
|
||||
if (!lychee.publicMode) {
|
||||
|
||||
if(albumJSON.star==1) album += "<a class='badge red icon-star'></a>";
|
||||
if(albumJSON.public==1) album += "<a class='badge red icon-share'></a>";
|
||||
if(albumJSON.unsorted==1) album += "<a class='badge red icon-reorder'></a>";
|
||||
if(albumJSON.recent==1) album += "<a class='badge red icon-time'></a>";
|
||||
|
||||
}
|
||||
|
||||
album += "</div>";
|
||||
|
||||
return album;
|
||||
|
||||
}
|
||||
|
||||
build.photo = function(photoJSON) {
|
||||
|
||||
if (!photoJSON) return "";
|
||||
|
||||
var photo = "",
|
||||
longTitle = "",
|
||||
title = photoJSON.title;
|
||||
|
||||
if (title!==null&&title.length>18) {
|
||||
title = photoJSON.title.substr(0, 18) + "...";
|
||||
longTitle = photoJSON.title;
|
||||
}
|
||||
|
||||
photo += "<div class='photo' data-album-id='" + photoJSON.album + "' data-id='" + photoJSON.id + "'>";
|
||||
photo += "<img src='" + photoJSON.thumbUrl + "' width='200' height='200' alt='thumb'>";
|
||||
photo += "<div class='overlay'>";
|
||||
photo += "<h1 title='" + longTitle + "'>" + title + "</h1>";
|
||||
|
||||
if (photoJSON.cameraDate==1) {
|
||||
photo += "<a><span class='icon-camera' title='Photo Date'></span>" + photoJSON.sysdate + "</a>";
|
||||
} else {
|
||||
photo += "<a>" + photoJSON.sysdate + "</a>";
|
||||
}
|
||||
|
||||
photo += "</div>";
|
||||
|
||||
if (photoJSON.star==1) photo += "<a class='badge red icon-star'></a>";
|
||||
if (!lychee.publicMode&&photoJSON.public==1&&album.json.public!=1) photo += "<a class='badge red icon-share'></a>";
|
||||
|
||||
photo += "</div>";
|
||||
|
||||
return photo;
|
||||
|
||||
}
|
||||
|
||||
build.imageview = function(photoJSON, size, visibleControls) {
|
||||
|
||||
if (!photoJSON) return "";
|
||||
|
||||
var view = "";
|
||||
|
||||
view += "<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>";
|
||||
view += "<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>";
|
||||
|
||||
if (size==="big") {
|
||||
|
||||
if (visibleControls)
|
||||
view += "<div id='image' style='background-image: url(" + photoJSON.url + ")'></div>";
|
||||
else
|
||||
view += "<div id='image' style='background-image: url(" + photoJSON.url + ");' class='full'></div>";
|
||||
|
||||
} else if (size==="medium") {
|
||||
|
||||
if (visibleControls)
|
||||
view += "<div id='image' style='background-image: url(" + photoJSON.medium + ")'></div>";
|
||||
else
|
||||
view += "<div id='image' style='background-image: url(" + photoJSON.medium + ");' class='full'></div>";
|
||||
|
||||
} else if (size==='small') {
|
||||
|
||||
if (visibleControls)
|
||||
view += "<div id='image' class='small' style='background-image: url(" + photoJSON.url + "); width: " + photoJSON.width + "px; height: " + photoJSON.height + "px; margin-top: -" + parseInt(photoJSON.height/2-20) + "px; margin-left: -" + photoJSON.width/2 + "px;'></div>";
|
||||
else
|
||||
view += "<div id='image' class='small' style='background-image: url(" + photoJSON.url + "); width: " + photoJSON.width + "px; height: " + photoJSON.height + "px; margin-top: -" + parseInt(photoJSON.height/2) + "px; margin-left: -" + photoJSON.width/2 + "px;'></div>";
|
||||
|
||||
|
||||
}
|
||||
|
||||
return view;
|
||||
|
||||
}
|
||||
|
||||
build.no_content = function(typ) {
|
||||
|
||||
var no_content = "";
|
||||
|
||||
no_content += "<div class='no_content fadeIn'>";
|
||||
no_content += "<a class='icon icon-" + typ + "'></a>";
|
||||
|
||||
if (typ==="search") no_content += "<p>No results</p>";
|
||||
else if (typ==="share") no_content += "<p>No public albums</p>";
|
||||
else if (typ==="cog") no_content += "<p>No configuration</p>";
|
||||
|
||||
no_content += "</div>";
|
||||
|
||||
return no_content;
|
||||
|
||||
}
|
||||
|
||||
build.modal = function(title, text, button, marginTop, closeButton) {
|
||||
|
||||
var modal = "",
|
||||
custom_style = "";
|
||||
|
||||
if (marginTop) custom_style = "style='margin-top: " + marginTop + "px;'";
|
||||
|
||||
modal += "<div class='message_overlay fadeIn'>";
|
||||
modal += "<div class='message center'" + custom_style + ">";
|
||||
modal += "<h1>" + title + "</h1>";
|
||||
|
||||
if (closeButton!==false) {
|
||||
|
||||
modal += "<a class='close icon-remove-sign'></a>";
|
||||
|
||||
}
|
||||
|
||||
modal += "<p>" + text + "</p>";
|
||||
|
||||
$.each(button, function(index) {
|
||||
|
||||
if (this[0]!=="") {
|
||||
|
||||
if (index===0) modal += "<a class='button active'>" + this[0] + "</a>";
|
||||
else modal += "<a class='button'>" + this[0] + "</a>";
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
modal += "</div>";
|
||||
modal += "</div>";
|
||||
|
||||
return modal;
|
||||
|
||||
}
|
||||
|
||||
build.signInModal = function() {
|
||||
|
||||
var modal = "";
|
||||
|
||||
modal += "<div class='message_overlay'>";
|
||||
modal += "<div class='message center'>";
|
||||
modal += "<h1><a class='icon-lock'></a> Sign In</h1>";
|
||||
modal += "<a class='close icon-remove-sign'></a>";
|
||||
modal += "<div class='sign_in'>";
|
||||
modal += "<input id='username' type='text' value='' placeholder='username' autocapitalize='off' autocorrect='off'>";
|
||||
modal += "<input id='password' type='password' value='' placeholder='password'>";
|
||||
modal += "</div>";
|
||||
modal += "<div id='version'>Version " + lychee.version + "<span> – <a target='_blank' href='" + lychee.updateURL + "'>Update available!</a><span></div>";
|
||||
modal += "<a onclick='lychee.login()' class='button active'>Sign in</a>";
|
||||
modal += "</div>";
|
||||
modal += "</div>";
|
||||
|
||||
return modal;
|
||||
|
||||
}
|
||||
|
||||
build.uploadModal = function(title, files) {
|
||||
|
||||
var modal = "";
|
||||
|
||||
modal += "<div class='upload_overlay fadeIn'>";
|
||||
modal += "<div class='upload_message center'>";
|
||||
modal += "<h1>" + title + "</h1>";
|
||||
modal += "<a class='close icon-remove-sign'></a>";
|
||||
modal += "<div class='rows'>";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
|
||||
if (files[i].name.length>40) files[i].name = files[i].name.substr(0, 17) + "..." + files[i].name.substr(files[i].name.length-20, 20);
|
||||
|
||||
modal += "<div class='row'>";
|
||||
modal += "<a class='name'>" + lychee.escapeHTML(files[i].name) + "</a>";
|
||||
|
||||
if (files[i].supported===true) modal += "<a class='status'></a>";
|
||||
else modal += "<a class='status error'>Not supported</a>";
|
||||
|
||||
modal += "<p class='notice'></p>";
|
||||
modal += "</div>";
|
||||
|
||||
}
|
||||
|
||||
modal += "</div>";
|
||||
modal += "</div>";
|
||||
modal += "</div>";
|
||||
|
||||
return modal;
|
||||
|
||||
}
|
||||
|
||||
build.contextMenu = function(items) {
|
||||
|
||||
var menu = "";
|
||||
|
||||
menu += "<div class='contextmenu_bg'></div>";
|
||||
menu += "<div class='contextmenu'>";
|
||||
menu += "<table>";
|
||||
menu += "<tbody>";
|
||||
|
||||
$.each(items, function(index) {
|
||||
|
||||
if (items[index][0]==="separator"&&items[index][1]===-1) menu += "<tr class='separator'></tr>";
|
||||
else if (items[index][1]===-1) menu += "<tr class='no_hover'><td>" + items[index][0] + "</td></tr>";
|
||||
else if (items[index][2]!=undefined) menu += "<tr><td onclick='" + items[index][2] + "; window.contextMenu.close();'>" + items[index][0] + "</td></tr>";
|
||||
else menu += "<tr><td onclick='window.contextMenu.fns[" + items[index][1] + "](); window.contextMenu.close();'>" + items[index][0] + "</td></tr>";
|
||||
|
||||
});
|
||||
|
||||
menu += "</tbody>";
|
||||
menu += "</table>";
|
||||
menu += "</div>";
|
||||
|
||||
return menu;
|
||||
|
||||
}
|
||||
|
||||
build.tags = function(tags, forView) {
|
||||
|
||||
var html = "",
|
||||
editTagsHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_tags");
|
||||
|
||||
if (tags!=="") {
|
||||
|
||||
tags = tags.split(",");
|
||||
|
||||
tags.forEach(function(tag, index, array) {
|
||||
|
||||
html += "<a class='tag'>" + tag + "<span class='icon-remove' data-index='" + index + "'></span></a>";
|
||||
|
||||
});
|
||||
|
||||
html += editTagsHTML;
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
html = "<div class='empty'>No Tags" + editTagsHTML + "</div>";
|
||||
|
||||
}
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
build.infoboxPhoto = function(photoJSON, forView) {
|
||||
|
||||
if (!photoJSON) return "";
|
||||
|
||||
var infobox = "",
|
||||
public,
|
||||
editTitleHTML,
|
||||
editDescriptionHTML,
|
||||
infos,
|
||||
exifHash = "";
|
||||
|
||||
infobox += "<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>";
|
||||
infobox += "<div class='wrapper'>";
|
||||
|
||||
switch (photoJSON.public) {
|
||||
case "0":
|
||||
public = "No";
|
||||
break;
|
||||
case "1":
|
||||
public = "Yes";
|
||||
break;
|
||||
case "2":
|
||||
public = "Yes (Album)";
|
||||
break;
|
||||
default:
|
||||
public = "-";
|
||||
break;
|
||||
}
|
||||
|
||||
editTitleHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_title");
|
||||
editDescriptionHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_description");
|
||||
|
||||
infos = [
|
||||
["", "Basics"],
|
||||
["Title", photoJSON.title + editTitleHTML],
|
||||
["Uploaded", photoJSON.sysdate],
|
||||
["Description", photoJSON.description + editDescriptionHTML],
|
||||
["", "Image"],
|
||||
["Size", photoJSON.size],
|
||||
["Format", photoJSON.type],
|
||||
["Resolution", photoJSON.width + " x " + photoJSON.height],
|
||||
["Tags", build.tags(photoJSON.tags, forView)]
|
||||
];
|
||||
|
||||
exifHash = photoJSON.takestamp+photoJSON.make+photoJSON.model+photoJSON.shutter+photoJSON.aperture+photoJSON.focal+photoJSON.iso;
|
||||
|
||||
if (exifHash!="0"&&exifHash!=="null") {
|
||||
|
||||
infos = infos.concat([
|
||||
["", "Camera"],
|
||||
["Captured", photoJSON.takedate],
|
||||
["Make", photoJSON.make],
|
||||
["Type/Model", photoJSON.model],
|
||||
["Shutter Speed", photoJSON.shutter],
|
||||
["Aperture", photoJSON.aperture],
|
||||
["Focal Length", photoJSON.focal],
|
||||
["ISO", photoJSON.iso]
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
infos = infos.concat([
|
||||
["", "Share"],
|
||||
["Public", public]
|
||||
]);
|
||||
|
||||
$.each(infos, function(index) {
|
||||
|
||||
if (infos[index][1]===""||infos[index][1]===undefined||infos[index][1]===null) infos[index][1] = "-";
|
||||
|
||||
switch (infos[index][0]) {
|
||||
|
||||
case "": // Separator
|
||||
infobox += "</table>";
|
||||
infobox += "<div class='separator'><h1>" + infos[index][1] + "</h1></div>";
|
||||
infobox += "<table>";
|
||||
break;
|
||||
|
||||
case "Tags": // Tags
|
||||
if (forView!==true&&!lychee.publicMode) {
|
||||
infobox += "</table>";
|
||||
infobox += "<div class='separator'><h1>" + infos[index][0] + "</h1></div>";
|
||||
infobox += "<div id='tags'>" + infos[index][1] + "</div>";
|
||||
}
|
||||
break;
|
||||
|
||||
default: // Item
|
||||
infobox += "<tr>";
|
||||
infobox += "<td>" + infos[index][0] + "</td>";
|
||||
infobox += "<td class='attr_" + infos[index][0].toLowerCase() + "'>" + infos[index][1] + "</td>";
|
||||
infobox += "</tr>";
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
infobox += "</table>";
|
||||
infobox += "<div class='bumper'></div>";
|
||||
infobox += "</div>";
|
||||
|
||||
return infobox;
|
||||
|
||||
}
|
||||
|
||||
build.infoboxAlbum = function(albumJSON, forView) {
|
||||
|
||||
if (!albumJSON) return "";
|
||||
|
||||
var infobox = "",
|
||||
public = "-",
|
||||
password = "-",
|
||||
downloadable = "-",
|
||||
editTitleHTML,
|
||||
editDescriptionHTML,
|
||||
infos;
|
||||
|
||||
infobox += "<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>";
|
||||
infobox += "<div class='wrapper'>";
|
||||
|
||||
switch (albumJSON.public) {
|
||||
case "0":
|
||||
public = "No";
|
||||
break;
|
||||
case "1":
|
||||
public = "Yes";
|
||||
break;
|
||||
}
|
||||
|
||||
switch (albumJSON.password) {
|
||||
case false:
|
||||
password = "No";
|
||||
break;
|
||||
case true:
|
||||
password = "Yes";
|
||||
break;
|
||||
}
|
||||
|
||||
switch (albumJSON.downloadable) {
|
||||
case "0":
|
||||
downloadable = "No";
|
||||
break;
|
||||
case "1":
|
||||
downloadable = "Yes";
|
||||
break;
|
||||
}
|
||||
|
||||
editTitleHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_title_album");
|
||||
editDescriptionHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_description_album");
|
||||
|
||||
infos = [
|
||||
["", "Basics"],
|
||||
["Title", albumJSON.title + editTitleHTML],
|
||||
["Description", albumJSON.description + editDescriptionHTML],
|
||||
["", "Album"],
|
||||
["Created", albumJSON.sysdate],
|
||||
["Images", albumJSON.num],
|
||||
["", "Share"],
|
||||
["Public", public],
|
||||
["Downloadable", downloadable],
|
||||
["Password", password]
|
||||
];
|
||||
|
||||
$.each(infos, function(index) {
|
||||
|
||||
if (infos[index][1]===""||infos[index][1]===undefined||infos[index][1]===null) infos[index][1] = "-";
|
||||
|
||||
if (infos[index][0]==="") {
|
||||
|
||||
infobox += "</table>";
|
||||
infobox += "<div class='separator'><h1>" + infos[index][1] + "</h1></div>";
|
||||
infobox += "<table id='infos'>";
|
||||
|
||||
} else {
|
||||
|
||||
infobox += "<tr>";
|
||||
infobox += "<td>" + infos[index][0] + "</td>";
|
||||
infobox += "<td class='attr_" + infos[index][0].toLowerCase() + "'>" + infos[index][1] + "</td>";
|
||||
infobox += "</tr>";
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
infobox += "</table>";
|
||||
infobox += "<div class='bumper'></div>";
|
||||
infobox += "</div>";
|
||||
|
||||
return infobox;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user