main.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. Session.set("imageLimit", 8);
  2. let lastScrollTop = 0;
  3. $(window).scroll(function (event) {
  4. let $window = $(window);
  5. // Current position in the page.
  6. let scrollTop = $window.scrollTop();
  7. // If we are near the bottom of the window.
  8. if (scrollTop + $window.height() > $(document).height() - 100) {
  9. // If we are heading down.
  10. if (scrollTop > lastScrollTop) {
  11. Session.set("imageLimit", Session.get("imageLimit") + 4);
  12. console.log('Increased image count');
  13. }
  14. lastScrollTop = scrollTop;
  15. }
  16. });
  17. Accounts.ui.config({
  18. passwordSignupFields: "USERNAME_AND_EMAIL"
  19. });
  20. const getUser = (userId) => {
  21. let user = Meteor.users.findOne({ _id: userId });
  22. return user ? user.username : "anonymous";
  23. };
  24. Template.images.helpers({ getUser,
  25. images: function () {
  26. const createdBy = Session.get("userFilter");
  27. const selector = createdBy ? { createdBy } : {};
  28. return Images.find(selector, {
  29. sort: { createdOn: -1, rating: -1 },
  30. limit: Session.get("imageLimit")
  31. });
  32. },
  33. filtering_images: function () {
  34. const userFilter = Session.get("userFilter");
  35. return !!userFilter;
  36. },
  37. image_id: function () {
  38. return "rating-" + this._id;
  39. },
  40. getFilterUser: function () {
  41. const userFilter = Session.get("userFilter");
  42. return getUser(userFilter);
  43. }
  44. });
  45. Template.body.helpers({
  46. username: function () {
  47. let user = Meteor.user();
  48. let name = user ? user.username : "anon";
  49. return name;
  50. }
  51. });
  52. Template.images.events({
  53. "click .js-image": function (event) {
  54. $(event.target).css("width", "50px");
  55. },
  56. "click .js-del-image": function (event) {
  57. let imageId = this._id;
  58. console.log(imageId);
  59. // use jquery to hide the image component
  60. // then remove it at the end of the animation
  61. $("#" + imageId).hide("slow", function () {
  62. Images.remove({ _id: imageId });
  63. });
  64. },
  65. "click .js-rate-image": function (event) {
  66. let rating = $(event.currentTarget).data("userrating");
  67. let imageId = this.id.substring(7); // "rating-".length = 7.
  68. console.log(imageId);
  69. Images.update({ _id: imageId },
  70. { $set: { rating: rating }}
  71. );
  72. },
  73. "click .js-show-image-form": function () {
  74. $("#image_add_form").modal("show");
  75. },
  76. "click .js-set-image-filter": function () {
  77. Session.set("userFilter", this.createdBy);
  78. },
  79. "click .js-unset-image-filter": () => {
  80. Session.delete("userFilter");
  81. }
  82. });
  83. Template.image_add_form.events({
  84. 'submit .js-add-image': function (event) {
  85. let img_src = event.target.img_src.value;
  86. let img_alt = event.target.img_alt.value;
  87. console.log("src: " + img_src + " alt: " + img_alt);
  88. if (Meteor.user()) {
  89. Images.insert({
  90. img_src: img_src,
  91. img_alt: img_alt,
  92. createdOn: new Date(),
  93. createdBy: Meteor.userId()
  94. });
  95. }
  96. $("#image_add_form").modal("hide");
  97. return false;
  98. }
  99. });