view.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * @name view.js
  3. * @author Philipp Maurer
  4. * @author Tobias Reich
  5. * @copyright 2012 by Philipp Maurer, Tobias Reich
  6. */
  7. var header = $("header"),
  8. headerTitle = $("#title"),
  9. image_view = $("#image_view"),
  10. api_path = "php/api.php",
  11. infobox = $("#infobox");
  12. $(document).ready(function(){
  13. /* Window */
  14. $(window).keydown(key);
  15. /* Infobox */
  16. $("#infobox_overlay, #infobox .header a").live("click", function() { hideInfobox() });
  17. $("#button_info").live("click", function() { showInfobox() });
  18. /* Download */
  19. $("#button_download").live("click", function() {
  20. link = $("#image_view #image").css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "");
  21. window.open(link,"_newtab");
  22. });
  23. loadPhotoInfo(gup("p"));
  24. });
  25. function key(e) {
  26. code = (e.keyCode ? e.keyCode : e.which);
  27. if (code==27&&visibleInfobox()) { hideInfobox(); e.preventDefault(); }
  28. }
  29. function visibleInfobox() {
  30. if (parseInt(infobox.css("right").replace("px", ""))<0) return false;
  31. else return true;
  32. }
  33. function isPhotoSmall(photo) {
  34. size = [
  35. ["width", false],
  36. ["height", false]
  37. ];
  38. if (photo.width<$(window).width()-60) size["width"] = true;
  39. if (photo.height<$(window).height()-100) size["height"] = true;
  40. if (size["width"]&&size["height"]) return true;
  41. else return false;
  42. }
  43. function showInfobox() {
  44. $("body").append("<div id='infobox_overlay'></div>");
  45. infobox.css("right", "0px");
  46. }
  47. function hideInfobox() {
  48. $("#infobox_overlay").remove();
  49. infobox.css("right", "-320px");
  50. }
  51. function loadPhotoInfo(photoID) {
  52. params = "function=getPhotoInfo&photoID=" + photoID;
  53. $.ajax({type: "POST", url: api_path, data: params, dataType: "json", success: function(data) {
  54. if (!data.title) data.title = "Untitled";
  55. document.title = "Lychee - " + data.title;
  56. headerTitle.html(data.title);
  57. image_view.attr("data-id", photoID);
  58. if (isPhotoSmall(data)) image_view.html("").append("<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>");
  59. else image_view.html("").append("<div id='image' style='background-image: url(" + data.url + "); top: 70px; right: 30px; bottom: 30px; left: 30px;'></div>");
  60. image_view.removeClass("fadeOut").addClass("fadeIn").show();
  61. infobox.html(buildInfobox(data)).show();
  62. }, error: ajaxError });
  63. }
  64. function ajaxError(jqXHR, textStatus, errorThrown) {
  65. console.log(jqXHR);
  66. console.log(textStatus);
  67. console.log(errorThrown);
  68. }