image_share.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // this is image_share.js
  2. Images = new Mongo.Collection("images");
  3. if (Meteor.isClient) {
  4. Template.images.helpers({
  5. images: Images.find({}, { sort: { createdOn: -1, rating: -1 }}),
  6. image_id: function () {
  7. return "rating-" + this._id;
  8. }
  9. });
  10. Template.body.helpers({
  11. username: function () {
  12. let user = Meteor.user();
  13. let name = user ? user.emails[0].address : "anon";
  14. return name;
  15. }
  16. });
  17. Template.images.events({
  18. "click .js-image": function (event) {
  19. $(event.target).css("width", "50px");
  20. },
  21. "click .js-del-image": function (event) {
  22. let imageId = this._id;
  23. console.log(imageId);
  24. // use jquery to hide the image component
  25. // then remove it at the end of the animation
  26. $("#" + imageId).hide("slow", function () {
  27. Images.remove({ _id: imageId });
  28. });
  29. },
  30. "click .js-rate-image": function (event) {
  31. let rating = $(event.currentTarget).data("userrating");
  32. let imageId = this.id.substring(7); // "rating-".length = 7.
  33. console.log(imageId);
  34. Images.update({ _id: imageId },
  35. { $set: { rating: rating }}
  36. );
  37. },
  38. "click .js-show-image-form": function (event) {
  39. $("#image_add_form").modal("show");
  40. }
  41. });
  42. Template.image_add_form.events({
  43. 'submit .js-add-image': function (event) {
  44. let img_src = event.target.img_src.value;
  45. let img_alt = event.target.img_alt.value;
  46. console.log("src: " + img_src + " alt: " + img_alt);
  47. Images.insert({
  48. img_src: img_src,
  49. img_alt: img_alt,
  50. createdOn: new Date()
  51. });
  52. $("#image_add_form").modal('show');
  53. return false;
  54. }
  55. });
  56. }