view.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. /**
  2. * @name UI View
  3. * @description Responsible to reflect data changes to the UI.
  4. * @author Tobias Reich
  5. * @copyright 2014 by Tobias Reich
  6. */
  7. view = {
  8. header: {
  9. show: function() {
  10. clearTimeout($(window).data("timeout"));
  11. if (visible.photo()) {
  12. lychee.imageview.removeClass("full");
  13. lychee.loadingBar.css("opacity", 1);
  14. lychee.header.removeClass("hidden");
  15. if ($("#imageview #image.small").length>0) {
  16. $("#imageview #image").css({
  17. marginTop: -1*($("#imageview #image").height()/2)+20
  18. });
  19. } else {
  20. $("#imageview #image").css({
  21. top: 60,
  22. right: 30,
  23. bottom: 30,
  24. left: 30
  25. });
  26. }
  27. }
  28. },
  29. hide: function() {
  30. if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
  31. clearTimeout($(window).data("timeout"));
  32. $(window).data("timeout", setTimeout(function() {
  33. lychee.imageview.addClass("full");
  34. lychee.loadingBar.css("opacity", 0);
  35. lychee.header.addClass("hidden");
  36. if ($("#imageview #image.small").length>0) {
  37. $("#imageview #image").css({
  38. marginTop: -1*($("#imageview #image").height()/2)
  39. });
  40. } else {
  41. $("#imageview #image").css({
  42. top: 0,
  43. right: 0,
  44. bottom: 0,
  45. left: 0
  46. });
  47. }
  48. }, 500));
  49. }
  50. },
  51. mode: function(mode) {
  52. var albumID = album.getID();
  53. switch (mode) {
  54. case "albums":
  55. lychee.header.removeClass("view");
  56. $("#tools_album, #tools_photo").hide();
  57. $("#tools_albums").show();
  58. break;
  59. case "album":
  60. lychee.header.removeClass("view");
  61. $("#tools_albums, #tools_photo").hide();
  62. $("#tools_album").show();
  63. if (albumID==="s"||albumID==="f") {
  64. $("#button_info_album, #button_trash_album, #button_share_album").hide();
  65. } else if (albumID==="0") {
  66. $("#button_info_album, #button_share_album").hide();
  67. $("#button_trash_album").show();
  68. } else {
  69. $("#button_info_album, #button_trash_album, #button_share_album").show();
  70. }
  71. break;
  72. case "photo":
  73. lychee.header.addClass("view");
  74. $("#tools_albums, #tools_album").hide();
  75. $("#tools_photo").show();
  76. break;
  77. }
  78. }
  79. },
  80. infobox: {
  81. show: function() {
  82. if (!visible.infobox()) $("body").append("<div id='infobox_overlay' class='fadeIn'></div>");
  83. lychee.infobox.addClass("active");
  84. },
  85. hide: function() {
  86. lychee.animate("#infobox_overlay", "fadeOut");
  87. setTimeout(function() { $("#infobox_overlay").remove() }, 300);
  88. lychee.infobox.removeClass("active");
  89. }
  90. },
  91. albums: {
  92. init: function() {
  93. view.albums.title();
  94. view.albums.content.init();
  95. },
  96. title: function() {
  97. lychee.setTitle("Albums", false);
  98. },
  99. content: {
  100. init: function() {
  101. var smartData = "",
  102. albumsData = "";
  103. /* Smart Albums */
  104. albums.parse(albums.json.unsortedAlbum);
  105. albums.parse(albums.json.publicAlbum);
  106. albums.parse(albums.json.starredAlbum);
  107. if (!lychee.publicMode) smartData = build.divider("Smart Albums") + build.album(albums.json.unsortedAlbum) + build.album(albums.json.starredAlbum) + build.album(albums.json.publicAlbum);
  108. /* Albums */
  109. if (albums.json.content) {
  110. if (!lychee.publicMode) albumsData = build.divider("Albums");
  111. $.each(albums.json.content, function() {
  112. albums.parse(this);
  113. albumsData += build.album(this);
  114. });
  115. }
  116. if (smartData===""&&albumsData==="") $("body").append(build.no_content("picture"));
  117. else lychee.content.html(smartData + albumsData);
  118. $("img[data-type!='svg']").retina();
  119. },
  120. title: function(albumID) {
  121. var prefix = "",
  122. title = albums.json.content[albumID].title;
  123. if (albums.json.content[albumID].password) prefix = "<span class='icon-lock'></span> ";
  124. if (title.length>18) title = title.substr(0, 18) + "...";
  125. $(".album[data-id='" + albumID + "'] .overlay h1").html(prefix + title);
  126. },
  127. delete: function(albumID) {
  128. $(".album[data-id='" + albumID + "']").css("opacity", 0).animate({
  129. width: 0,
  130. marginLeft: 0
  131. }, 300, function() {
  132. $(this).remove();
  133. if (albums.json.num<=0) lychee.animate(".divider:last-of-type", "fadeOut");
  134. });
  135. }
  136. }
  137. },
  138. album: {
  139. init: function() {
  140. album.parse();
  141. view.album.infobox();
  142. view.album.title();
  143. view.album.public();
  144. view.album.content.init();
  145. album.json.init = 1;
  146. },
  147. hide: function() {
  148. view.infobox.hide();
  149. },
  150. title: function(oldTitle) {
  151. if ((visible.album()||!album.json.init)&&!visible.photo()) {
  152. switch (album.getID()) {
  153. case "f":
  154. lychee.setTitle("Starred", false);
  155. break;
  156. case "s":
  157. lychee.setTitle("Public", false);
  158. break;
  159. case "0":
  160. lychee.setTitle("Unsorted", false);
  161. break;
  162. default:
  163. if (album.json.init) $("#infobox .attr_name").html(album.json.title + " " + build.editIcon("edit_title_album"));
  164. lychee.setTitle(album.json.title, true);
  165. break;
  166. }
  167. }
  168. },
  169. description: function() {
  170. $("#infobox .attr_description").html(album.json.description + " " + build.editIcon("edit_description_album"));
  171. },
  172. content: {
  173. init: function() {
  174. var photosData = "";
  175. $.each(album.json.content, function() {
  176. album.parse(this);
  177. photosData += build.photo(this);
  178. });
  179. lychee.content.html(photosData);
  180. $("img[data-type!='svg']").retina();
  181. },
  182. title: function(photoID) {
  183. var title = album.json.content[photoID].title;
  184. if (title.length>18) title = title.substr(0, 18) + "...";
  185. $(".photo[data-id='" + photoID + "'] .overlay h1").html(title);
  186. },
  187. star: function(photoID) {
  188. $(".photo[data-id='" + photoID + "'] .icon-star").remove();
  189. if (album.json.content[photoID].star==1) $(".photo[data-id='" + photoID + "']").append("<a class='badge red icon-star'></a>");
  190. },
  191. public: function(photoID) {
  192. $(".photo[data-id='" + photoID + "'] .icon-share").remove();
  193. if (album.json.content[photoID].public==1) $(".photo[data-id='" + photoID + "']").append("<a class='badge red icon-share'></a>");
  194. },
  195. delete: function(photoID) {
  196. $(".photo[data-id='" + photoID + "']").css("opacity", 0).animate({
  197. width: 0,
  198. marginLeft: 0
  199. }, 300, function() {
  200. $(this).remove();
  201. // Only when search is not active
  202. if (!visible.albums()) {
  203. album.json.num--;
  204. view.album.num();
  205. view.album.title();
  206. }
  207. });
  208. }
  209. },
  210. num: function() {
  211. $("#infobox .attr_images").html(album.json.num);
  212. },
  213. public: function() {
  214. if (album.json.public==1) {
  215. $("#button_share_album a").addClass("active");
  216. $("#button_share_album").attr("title", "Share Album");
  217. $(".photo .icon-share").remove();
  218. if (album.json.init) $("#infobox .attr_visibility").html("Public");
  219. } else {
  220. $("#button_share_album a").removeClass("active");
  221. $("#button_share_album").attr("title", "Make Public");
  222. if (album.json.init) $("#infobox .attr_visibility").html("Private");
  223. }
  224. },
  225. password: function() {
  226. if (album.json.password==1) $("#infobox .attr_password").html("Yes");
  227. else $("#infobox .attr_password").html("No");
  228. },
  229. infobox: function() {
  230. if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.html(build.infoboxAlbum(album.json)).show();
  231. }
  232. },
  233. photo: {
  234. init: function() {
  235. photo.parse();
  236. view.photo.infobox();
  237. view.photo.title();
  238. view.photo.star();
  239. view.photo.public();
  240. view.photo.photo();
  241. photo.json.init = 1;
  242. },
  243. show: function() {
  244. // Change header
  245. lychee.content.addClass("view");
  246. view.header.mode("photo");
  247. // Make body not scrollable
  248. $("body").css("overflow", "hidden");
  249. // Fullscreen
  250. $(document)
  251. .bind("mouseenter", view.header.show)
  252. .bind("mouseleave", view.header.hide);
  253. lychee.animate(lychee.imageview, "fadeIn");
  254. },
  255. hide: function() {
  256. if (!visible.controls()) view.header.show();
  257. if (visible.infobox) view.infobox.hide();
  258. lychee.content.removeClass("view");
  259. view.header.mode("album");
  260. // Make body scrollable
  261. $("body").css("overflow", "scroll");
  262. // Disable Fullscreen
  263. $(document)
  264. .unbind("mouseenter")
  265. .unbind("mouseleave");
  266. // Hide Photo
  267. lychee.animate(lychee.imageview, "fadeOut");
  268. setTimeout(function() {
  269. lychee.imageview.hide();
  270. view.album.infobox();
  271. }, 300);
  272. },
  273. title: function(oldTitle) {
  274. if (photo.json.init) $("#infobox .attr_name").html(photo.json.title + " " + build.editIcon("edit_title"));
  275. lychee.setTitle(photo.json.title, true);
  276. },
  277. description: function() {
  278. if (photo.json.init) $("#infobox .attr_description").html(photo.json.description + " " + build.editIcon("edit_description"));
  279. },
  280. star: function() {
  281. $("#button_star a").removeClass("icon-star-empty icon-star");
  282. if (photo.json.star==1) {
  283. // Starred
  284. $("#button_star a").addClass("icon-star");
  285. $("#button_star").attr("title", "Unstar Photo");
  286. } else {
  287. // Unstarred
  288. $("#button_star a").addClass("icon-star-empty");
  289. $("#button_star").attr("title", "Star Photo");
  290. }
  291. },
  292. public: function() {
  293. if (photo.json.public==1||photo.json.public==2) {
  294. // Photo public
  295. $("#button_share a").addClass("active");
  296. $("#button_share").attr("title", "Share Photo");
  297. if (photo.json.init) $("#infobox .attr_visibility").html("Public");
  298. } else {
  299. // Photo private
  300. $("#button_share a").removeClass("active");
  301. $("#button_share").attr("title", "Make Public");
  302. if (photo.json.init) $("#infobox .attr_visibility").html("Private");
  303. }
  304. },
  305. photo: function() {
  306. lychee.imageview.html(build.imageview(photo.json, photo.isSmall(), visible.controls()));
  307. if ((album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==="")||lychee.viewMode) $("a#next").hide();
  308. if ((album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==="")||lychee.viewMode) $("a#previous").hide();
  309. },
  310. infobox: function() {
  311. lychee.infobox.html(build.infoboxPhoto(photo.json)).show();
  312. }
  313. }
  314. }