build.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. /**
  2. * @name Build Module
  3. * @description This module is used to generate HTML-Code.
  4. * @author Tobias Reich
  5. * @copyright 2014 by Tobias Reich
  6. */
  7. build = {
  8. divider: function(title) {
  9. return "<div class='divider fadeIn'><h1>" + title + "</h1></div>";
  10. },
  11. editIcon: function(id) {
  12. return "<div id='" + id + "' class='edit'><a class='icon-pencil'></a></div>";
  13. },
  14. multiselect: function(top, left) {
  15. return "<div id='multiselect' style='top: " + top + "px; left: " + left + "px;'></div>";
  16. },
  17. album: function(albumJSON) {
  18. if (!albumJSON) return "";
  19. var album = "",
  20. longTitle = "",
  21. title = albumJSON.title,
  22. typeThumb = "";
  23. if (title.length>18) {
  24. title = albumJSON.title.substr(0, 18) + "...";
  25. longTitle = albumJSON.title;
  26. }
  27. if (albumJSON.thumb0.split('.').pop()==="svg") typeThumb = "nonretina";
  28. album += "<div class='album' data-id='" + albumJSON.id + "' data-password='" + albumJSON.password + "'>";
  29. album += "<img src='" + albumJSON.thumb2 + "' width='200' height='200' alt='thumb' data-type='nonretina'>";
  30. album += "<img src='" + albumJSON.thumb1 + "' width='200' height='200' alt='thumb' data-type='nonretina'>";
  31. album += "<img src='" + albumJSON.thumb0 + "' width='200' height='200' alt='thumb' data-type='" + typeThumb + "'>";
  32. album += "<div class='overlay'>";
  33. if (albumJSON.password&&!lychee.publicMode) album += "<h1><span class='icon-lock'></span> " + title + "</h1>";
  34. else album += "<h1 title='" + longTitle + "'>" + title + "</h1>";
  35. album += "<a>" + albumJSON.sysdate + "</a>";
  36. album += "</div>";
  37. if (!lychee.publicMode) {
  38. if(albumJSON.star==1) album += "<a class='badge red icon-star'></a>";
  39. if(albumJSON.public==1) album += "<a class='badge red icon-share'></a>";
  40. if(albumJSON.unsorted==1) album += "<a class='badge red icon-reorder'></a>";
  41. if(albumJSON.recent==1) album += "<a class='badge red icon-time'></a>";
  42. }
  43. album += "</div>";
  44. return album;
  45. },
  46. photo: function(photoJSON) {
  47. if (!photoJSON) return "";
  48. var photo = "",
  49. longTitle = "",
  50. title = photoJSON.title;
  51. if (title.length>18) {
  52. title = photoJSON.title.substr(0, 18) + "...";
  53. longTitle = photoJSON.title;
  54. }
  55. photo += "<div class='photo' data-album-id='" + photoJSON.album + "' data-id='" + photoJSON.id + "'>";
  56. photo += "<img src='" + photoJSON.thumbUrl + "' width='200' height='200' alt='thumb'>";
  57. photo += "<div class='overlay'>";
  58. photo += "<h1 title='" + longTitle + "'>" + title + "</h1>";
  59. if (photoJSON.cameraDate==1) {
  60. photo += "<a><span class='icon-camera' title='Photo Date'></span>" + photoJSON.sysdate + "</a>";
  61. } else {
  62. photo += "<a>" + photoJSON.sysdate + "</a>";
  63. }
  64. photo += "</div>";
  65. if (photoJSON.star==1) photo += "<a class='badge red icon-star'></a>";
  66. if (!lychee.publicMode&&photoJSON.public==1&&album.json.public!=1) photo += "<a class='badge red icon-share'></a>";
  67. photo += "</div>";
  68. return photo;
  69. },
  70. imageview: function(photoJSON, isSmall, visibleControls) {
  71. if (!photoJSON) return "";
  72. var view = "";
  73. view += "<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>";
  74. view += "<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>";
  75. if (isSmall) {
  76. if (visibleControls)
  77. 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>";
  78. else
  79. 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>";
  80. } else {
  81. if (visibleControls)
  82. view += "<div id='image' style='background-image: url(" + photoJSON.url + ")'></div>";
  83. else
  84. view += "<div id='image' style='background-image: url(" + photoJSON.url + ");' class='full'></div>";
  85. }
  86. return view;
  87. },
  88. no_content: function(typ) {
  89. var no_content = "";
  90. no_content += "<div class='no_content fadeIn'>";
  91. no_content += "<a class='icon icon-" + typ + "'></a>";
  92. if (typ==="search") no_content += "<p>No results</p>";
  93. else if (typ==="picture") no_content += "<p>No public albums</p>";
  94. else if (typ==="cog") no_content += "<p>No Configuration!</p>";
  95. no_content += "</div>";
  96. return no_content;
  97. },
  98. modal: function(title, text, button, marginTop, closeButton) {
  99. var modal = "",
  100. custom_style = "";
  101. if (marginTop) custom_style = "style='margin-top: " + marginTop + "px;'";
  102. modal += "<div class='message_overlay fadeIn'>";
  103. modal += "<div class='message center'" + custom_style + ">";
  104. modal += "<h1>" + title + "</h1>";
  105. if (closeButton!==false) {
  106. modal += "<a class='close icon-remove-sign'></a>";
  107. }
  108. modal += "<p>" + text + "</p>";
  109. $.each(button, function(index) {
  110. if (this[0]!=="") {
  111. if (index===0) modal += "<a class='button active'>" + this[0] + "</a>";
  112. else modal += "<a class='button'>" + this[0] + "</a>";
  113. }
  114. });
  115. modal += "</div>";
  116. modal += "</div>";
  117. return modal;
  118. },
  119. signInModal: function() {
  120. var modal = "";
  121. modal += "<div class='message_overlay'>";
  122. modal += "<div class='message center'>";
  123. modal += "<h1><a class='icon-lock'></a> Sign In</h1>";
  124. modal += "<a class='close icon-remove-sign'></a>";
  125. modal += "<div class='sign_in'>";
  126. modal += "<input id='username' type='text' name='' value='' placeholder='username'>";
  127. modal += "<input id='password' type='password' name='' value='' placeholder='password'>";
  128. modal += "</div>";
  129. modal += "<div id='version'>Version " + lychee.version + "<span> &#8211; <a target='_blank' href='" + lychee.updateURL + "'>Update available!</a><span></div>";
  130. modal += "<a onclick='lychee.login()' class='button active'>Sign in</a>";
  131. modal += "</div>";
  132. modal += "</div>";
  133. return modal;
  134. },
  135. uploadModal: function(title, files) {
  136. var modal = "";
  137. modal += "<div class='upload_overlay fadeIn'>";
  138. modal += "<div class='upload_message center'>";
  139. modal += "<h1>" + title + "</h1>";
  140. modal += "<div class='rows'>";
  141. for (var i = 0; i < files.length; i++) {
  142. if (files[i].name.length>40) files[i].name = files[i].name.substr(0, 40) + "...";
  143. if (files[i].supported===true) {
  144. modal += "<div class='row'>"
  145. modal += "<a class='name'>" + lychee.escapeHTML(files[i].name) + "</a>"
  146. modal += "<a class='status'></a>"
  147. modal += "</div>";
  148. } else {
  149. modal += "<div class='row'>"
  150. modal += "<a class='name'>" + lychee.escapeHTML(files[i].name) + "</a>"
  151. modal += "<a class='status error'>Not supported</a>"
  152. modal += "</div>";
  153. }
  154. }
  155. modal += "</div>";
  156. modal += "</div>";
  157. modal += "</div>";
  158. return modal;
  159. },
  160. contextMenu: function(items) {
  161. var menu = "";
  162. menu += "<div class='contextmenu_bg'></div>";
  163. menu += "<div class='contextmenu'>";
  164. menu += "<table>";
  165. menu += "<tbody>";
  166. $.each(items, function(index) {
  167. if (items[index][0]==="separator"&&items[index][1]===-1) menu += "<tr class='separator'></tr>";
  168. else if (items[index][1]===-1) menu += "<tr class='no_hover'><td>" + items[index][0] + "</td></tr>";
  169. else if (items[index][2]!=undefined) menu += "<tr><td onclick='" + items[index][2] + "; window.contextMenu.close();'>" + items[index][0] + "</td></tr>";
  170. else menu += "<tr><td onclick='window.contextMenu.fns[" + items[index][1] + "](); window.contextMenu.close();'>" + items[index][0] + "</td></tr>";
  171. });
  172. menu += "</tbody>";
  173. menu += "</table>";
  174. menu += "</div>";
  175. return menu;
  176. },
  177. tags: function(tags, forView) {
  178. var html = "",
  179. editTagsHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_tags");
  180. if (tags!=="") {
  181. tags = tags.split(",");
  182. tags.forEach(function(tag, index, array) {
  183. html += "<a class='tag'>" + tag + "<span class='icon-remove' data-index='" + index + "'></span></a>";
  184. });
  185. html += editTagsHTML;
  186. } else {
  187. html = "<div class='empty'>No Tags" + editTagsHTML + "</div>";
  188. }
  189. return html;
  190. },
  191. infoboxPhoto: function(photoJSON, forView) {
  192. if (!photoJSON) return "";
  193. var infobox = "",
  194. public,
  195. editTitleHTML,
  196. editDescriptionHTML,
  197. infos;
  198. infobox += "<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>";
  199. infobox += "<div class='wrapper'>";
  200. switch (photoJSON.public) {
  201. case "0":
  202. public = "Private";
  203. break;
  204. case "1":
  205. public = "Public";
  206. break;
  207. case "2":
  208. public = "Public (Album)";
  209. break;
  210. default:
  211. public = "-";
  212. break;
  213. }
  214. editTitleHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_title");
  215. editDescriptionHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_description");
  216. infos = [
  217. ["", "Basics"],
  218. ["Title", photoJSON.title + editTitleHTML],
  219. ["Uploaded", photoJSON.sysdate],
  220. ["Description", photoJSON.description + editDescriptionHTML],
  221. ["", "Image"],
  222. ["Size", photoJSON.size],
  223. ["Format", photoJSON.type],
  224. ["Resolution", photoJSON.width + " x " + photoJSON.height],
  225. ["Tags", build.tags(photoJSON.tags, forView)]
  226. ];
  227. if ((photoJSON.takestamp+photoJSON.make+photoJSON.model+photoJSON.shutter+photoJSON.aperture+photoJSON.focal+photoJSON.iso)!=="null") {
  228. infos = infos.concat([
  229. ["", "Camera"],
  230. ["Captured", photoJSON.takedate],
  231. ["Make", photoJSON.make],
  232. ["Type/Model", photoJSON.model],
  233. ["Shutter Speed", photoJSON.shutter],
  234. ["Aperture", photoJSON.aperture],
  235. ["Focal Length", photoJSON.focal],
  236. ["ISO", photoJSON.iso]
  237. ]);
  238. }
  239. infos = infos.concat([
  240. ["", "Share"],
  241. ["Visibility", public]
  242. ]);
  243. $.each(infos, function(index) {
  244. if (infos[index][1]===""||infos[index][1]===undefined||infos[index][1]===null) infos[index][1] = "-";
  245. switch (infos[index][0]) {
  246. case "": // Separator
  247. infobox += "</table>";
  248. infobox += "<div class='separator'><h1>" + infos[index][1] + "</h1></div>";
  249. infobox += "<table>";
  250. break;
  251. case "Tags": // Tags
  252. if (forView!==true&&!lychee.publicMode) {
  253. infobox += "</table>";
  254. infobox += "<div class='separator'><h1>" + infos[index][0] + "</h1></div>";
  255. infobox += "<div id='tags'>" + infos[index][1] + "</div>";
  256. }
  257. break;
  258. default: // Item
  259. infobox += "<tr>";
  260. infobox += "<td>" + infos[index][0] + "</td>";
  261. infobox += "<td class='attr_" + infos[index][0].toLowerCase() + "'>" + infos[index][1] + "</td>";
  262. infobox += "</tr>";
  263. break;
  264. }
  265. });
  266. infobox += "</table>";
  267. infobox += "<div class='bumper'></div>";
  268. infobox += "</div>";
  269. return infobox;
  270. },
  271. infoboxAlbum: function(albumJSON, forView) {
  272. if (!albumJSON) return "";
  273. var infobox = "",
  274. public,
  275. password,
  276. editTitleHTML,
  277. editDescriptionHTML,
  278. infos;
  279. infobox += "<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>";
  280. infobox += "<div class='wrapper'>";
  281. switch (albumJSON.public) {
  282. case "0":
  283. public = "Private";
  284. break;
  285. case "1":
  286. public = "Public";
  287. break;
  288. default:
  289. public = "-";
  290. break;
  291. }
  292. switch (albumJSON.password) {
  293. case false:
  294. password = "No";
  295. break;
  296. case true:
  297. password = "Yes";
  298. break;
  299. default:
  300. password = "-";
  301. break;
  302. }
  303. editTitleHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_title_album");
  304. editDescriptionHTML = (forView===true||lychee.publicMode) ? "" : " " + build.editIcon("edit_description_album");
  305. infos = [
  306. ["", "Basics"],
  307. ["Title", albumJSON.title + editTitleHTML],
  308. ["Description", albumJSON.description + editDescriptionHTML],
  309. ["", "Album"],
  310. ["Created", albumJSON.sysdate],
  311. ["Images", albumJSON.num],
  312. ["", "Share"],
  313. ["Visibility", public],
  314. ["Password", password]
  315. ];
  316. $.each(infos, function(index) {
  317. if (infos[index][1]===""||infos[index][1]===undefined||infos[index][1]===null) infos[index][1] = "-";
  318. if (infos[index][0]==="") {
  319. infobox += "</table>";
  320. infobox += "<div class='separator'><h1>" + infos[index][1] + "</h1></div>";
  321. infobox += "<table id='infos'>";
  322. } else {
  323. infobox += "<tr>";
  324. infobox += "<td>" + infos[index][0] + "</td>";
  325. infobox += "<td class='attr_" + infos[index][0].toLowerCase() + "'>" + infos[index][1] + "</td>";
  326. infobox += "</tr>";
  327. }
  328. });
  329. infobox += "</table>";
  330. infobox += "<div class='bumper'></div>";
  331. infobox += "</div>";
  332. return infobox;
  333. }
  334. };