image_share.js 2.5 KB

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