var MediaViewer = ModalView.extend({ el: ".mediaDrawer.mediaViewer", destroyAction: "/api/media/destroy", events: { 'click .foundToggle': "foundToggle", 'click .yourMedia': "userToggle", 'click #deleteMedia': "deleteArmed", 'mousedown .mediaContainer': "pick", }, foundToggle: function(){ $(".foundMedia").addClass("active"); $(".myMedia").addClass("inactive"); $('a').removeClass("active"); $('.foundToggle').addClass("active"); }, userToggle: function(){ this.$(".foundMedia").removeClass("active"); this.$(".myMedia").removeClass("inactive"); this.$('a').removeClass("active"); this.$('.yourMedia').addClass("active"); }, show: function(){ if (! this.loaded) { this.load() } else { this.__super__.show.call(this) } }, hide: function(){ this.__super__.hide.call(this) this.parent.mediaUpload.hide() }, load: function(){ $.get("/api/media/user", $.proxy(this.populate, this)) }, populate: function(data){ this.loaded = true data.forEach($.proxy(this.add, this)) this.__super__.show.call(this) }, add: function(media){ var image = new Image () var $span = $("") $span.addClass("mediaContainer") switch (media.type) { case 'image': image.src = media.url break case 'youtube': case 'vimeo': image.src = media.thumbnail break } $span.data("media", media) $span.append(image) this.$(".myMedia").prepend($span) }, deleteIsArmed: false, deleteArmed: function(e, state){ if (typeof state != "boolean") { state = ! this.deleteIsArmed } console.log(state) this.deleteIsArmed = state $("body").toggleClass("deleteArmed", state) }, pick: function(e){ var target = e.currentTarget var $target = $(target) var media = $target.data('media') if (this.deleteIsArmed) { this.destroy(media._id) $target.remove() } else { // pick this image ... } }, destroy: function(_id, cb){ $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } }).complete(cb || function(){}) }, })