diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js')
| -rw-r--r-- | public/assets/javascripts/ui/editor/WallpaperPicker.js | 229 |
1 files changed, 197 insertions, 32 deletions
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 0dd2921..3640d6d 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -3,34 +3,57 @@ var WallpaperPicker = UploadView.extend({ el: ".wallpaper", mediaTag: "wallpaper", + createAction: "/api/media/new", uploadAction: "/api/media/upload", + destroyAction: "/api/media/destroy", events: { + "contextmenu": 'contextmenu', + "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', + "input [data-role='wallpaper-scale']": 'updateScale', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", }, - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") - this.$remove.hide() + + this.$url = this.$(".url") + + this.$position = this.$("[data-role='wallpaper-position']") + this.$scale = this.$("[data-role='wallpaper-scale']") + + this.$wallpaperResizeControls = this.$(".wallpaperResizeControls") + this.$wallpaperResizeControls.addClass('disabled') + + this.initializePositionCursor() }, loaded: false, show: function(){ - if (! this.loaded) { - this.load() - } - else { - this.toggle(true) - } + this.toggle(true) }, - hide: function(){ - this.__super__.hide.call(this) + this.toggle(false) }, - + + toggle: function (state) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + this.$el.toggleClass("active", state) + if (state) { + this.parent.cursor.message("wallpaper") + if (! this.loaded) { + this.load() + } + } + }, + load: function(){ $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, @@ -39,49 +62,98 @@ var WallpaperPicker = UploadView.extend({ this.loaded = true if (data && data.length) { data.forEach(this.add.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() } this.toggle(true) }, + seenWallpapers: {}, add: function (media) { if (media.type !== "image") { return } + if (this.seenWallpapers[ media.url ]) { return } var swatch = document.createElement("div") swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" + swatch.setAttribute("data-id", media._id) this.$swatches.append(swatch) this.$swatches.show() - }, - - toggle: function (state) { - if (state && ! this.loaded) { - this.show() - } - else { - this.$el.toggleClass("active", state) - } - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper") + this.$(".txt").hide() + this.seenWallpapers[ media.url ] = true }, - hide: function(){ - this.toggle(false) + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) }, - + beforeUpload: function(){ }, pick: function(e){ var $swatch = $(e.currentTarget) - this.follow( e, $swatch.css('background-image') ) - this.$remove.show() + if (Scenery.nextWallpaper == "none") { + var _id = $swatch[0].getAttribute("data-id") + $swatch.remove() + this.destroy(_id, function(){}) + } + else { + app.tube('cancel-wallpaper') + this.follow( e, $swatch.css('background-image') ) + this.parent.presets.modified = true + } }, remove: function(e){ - this.follow( e, "none" ) - $(".floatingSwatch").addClass("scissors") + if (Scenery.nextWallpaper) { + // remove red class to the wallpaper + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + else { + // add red class to the wallpaper + this.follow( e, "none" ) + $(".floatingSwatch").addClass("scissors") + this.$el.addClass("deleteArmed") + } + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + contextmenu: function(e){ + if (Scenery.nextWallpaper) { + e.preventDefault() + this.cancel() + } + }, + cancel: function(){ + if (Scenery.nextWallpaper) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } }, follow: function(e, wallpaper, icon){ + var base = this icon = icon || wallpaper var $floatingSwatch = $(".floatingSwatch") @@ -90,6 +162,8 @@ var WallpaperPicker = UploadView.extend({ Scenery.nextWallpaper = wallpaper + $(".floodMessage").show() + setTimeout(function(){ function _followCursor(e) { $floatingSwatch.css({ @@ -97,14 +171,105 @@ var WallpaperPicker = UploadView.extend({ left: (e.pageX + 10) + 'px', }); } - $(window).on('mousemove', _followCursor) - $(window).one('click', function () { + function _hideCursor (e) { + $(window).off('keydown', _floodRoom) $(window).off('mousemove', _followCursor) + app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() - }); + $(".floodMessage").hide() + base.$el.removeClass("deleteArmed") + } + function _floodRoom (e) { + if (e.keyCode == 13) { + base.flood() + } + } + $(window).on('keydown', _floodRoom) + $(window).on('mousemove', _followCursor) + // $(window).one('click', _hideCursor); + app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); }) }, + wall: null, + pickWall: function(wall){ + if (! wall.background || wall.background.src == "none") { + this.$wallpaperResizeControls.addClass('disabled') + this.$scale.val( 0.0 ) + return; + } + this.$wallpaperResizeControls.removeClass('disabled') + this.wall = wall + this.$scale.val( Math.log( this.wall.background.scale ) ) + }, + + scaleTimeout: null, + updateScale: function(){ + if (! this.wall) return; + var scale = Math.exp( parseFloat(this.$scale.val()) ) + this.wall.wallpaperPosition({ scale: scale }) + + clearTimeout(this.scaleTimeout) + this.scaleTimeout = setTimeout(function(){ + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + }.bind(this), 500) + }, + + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + flood: function(url){ + url = url || Scenery.nextWallpaper + if (! url) return + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + this.cancel() + }, + + initializePositionCursor: function(){ + var base = this + var dx = 0, dy = 0, dragging = false, delta + var x = 0, y = 0, s = 1 + var mymouse = new mouse({ + el: this.$position[0], + down: function(e, cursor){ + if (! base.wall) return + dragging = true + // s = parseFloat( base.$scale.val() ) + x = base.wall.background.x + y = base.wall.background.y + }, + drag: function(e, cursor){ + if (! dragging) return + delta = cursor.delta() + delta.a = - delta.a + dx = delta.a*s + dy = delta.b*s + base.wall.wallpaperPosition({ + // scale: s, + x: x+dx, + y: y+dy, + }) + }, + up: function(e, cursor, new_cursor){ + dragging = false + }, + }) + }, + }) |