123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- ###
- # @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'>
- """
- i = 0
- file = null
- 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 is true then html += "<a class='status'></a>"
- else html += "<a class='status error'>Not supported</a>"
- html += """
- <p class='notice'></p>
- </div>
- """
- i++
- 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
|