diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js')
| -rw-r--r-- | public/assets/javascripts/ui/editor/MediaViewer.js | 89 |
1 files changed, 60 insertions, 29 deletions
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 436c0cb..b51d8f2 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -3,6 +3,7 @@ var MediaViewer = ModalView.extend({ el: ".mediaDrawer.mediaViewer", destroyAction: "/api/media/destroy", usesFileUpload: true, + loaded: false, events: { 'click .foundToggle': "foundToggle", @@ -14,30 +15,31 @@ var MediaViewer = ModalView.extend({ initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent - this.$foundMedia = this.$(".foundMedia") this.$myMedia = this.$(".myMedia") - this.$foundToggle = this.$(".foundToggle") this.$userToggle = this.$(".userToggle") + this.$foundMedia = this.$(".foundMedia") + this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") - }, + }, foundToggle: function(){ - this.foundMedia.addClass("active"); - this.myMedia.addClass("inactive"); + this.$foundMedia.addClass("active"); + this.$myMedia.addClass("inactive"); this.$("a").removeClass("active"); - this.foundToggle.addClass("active"); + this.$foundToggle.addClass("active"); }, userToggle: function(){ - this.foundMedia.removeClass("active"); - this.myMedia.removeClass("inactive"); + this.$foundMedia.removeClass("active"); + this.$myMedia.removeClass("inactive"); this.$("a").removeClass("active"); - this.userToggle.addClass("active"); + this.$userToggle.addClass("active"); }, show: function(){ if (! this.loaded) { this.load() + this.loadTrending() } else { this.__super__.show.call(this) @@ -53,11 +55,55 @@ var MediaViewer = ModalView.extend({ load: function(){ $.get("/api/media/user", this.populate.bind(this)) }, + + loadTrending: function(){ + var trending_imagery = [ + 'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg', + 'http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg', + 'http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg', + 'http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg', + 'http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg', + 'http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg', + 'http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg', + 'http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg', + ] + trending_imagery.forEach(function(url){ + var loaded = false + var img = new Image () + img.onload = function(){ + if (loaded) return + loaded = true + var media = { + type: 'image', + url: url, + width: img.naturalWidth, + height: img.naturalHeight, + } + this.add(media, this.$foundMedia) + }.bind(this) + img.src = url + if (img.complete && ! loaded) { img.onload() } + }.bind(this)) + }, + + randomize: function(){ + var media_data = $(".mediaContainer").toArray().map(function(el){ + return $(el).data("media") + }) + Scenery.randomize( media_data ) + }, populate: function(data){ this.loaded = true if (data && data.length) { - data.forEach(this.add.bind(this)) + data.forEach(function(media){ + this.add(media, this.$myMedia) + }.bind(this)) + this.$deleteMedia.show() } else { this.$deleteMedia.hide() @@ -65,7 +111,7 @@ var MediaViewer = ModalView.extend({ this.__super__.show.call(this) }, - add: function(media){ + add: function(media, $container){ var image = new Image () var $span = $("<span>") $span.addClass("mediaContainer") @@ -92,8 +138,7 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - this.$(".myMedia").prepend($span) - this.$deleteMedia.show() + $container.prepend($span) }, deleteIsArmed: false, @@ -136,19 +181,6 @@ var MediaViewer = ModalView.extend({ return } -// else { -// this.picked = {} -// this.picked.media = media -// this.picked.image = image -// } -// }, -// -// drag: function(e){ -// if (! this.pickedMedia) return -// var media = this.picked.media -// var image = this.picked.image -// this.picked = null - this.hide() var $ants = $('.ants'); @@ -156,8 +188,6 @@ var MediaViewer = ModalView.extend({ Scenery.nextMedia = media -// console.log(media.type) - switch (media.type) { case "video": $floatingImg.attr('src', '/assets/img/playbutton.png') @@ -185,12 +215,13 @@ var MediaViewer = ModalView.extend({ $floatingImg.attr('src', '') $(window).off('mousemove', _followCursor) $(window).off('mousedown', _hideCursor) + app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) + app.on('cancel-scenery', _hideCursor) $ants.addClass('edit') _followCursor(e) }, - }) |