diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor/TextEditor.js')
| -rw-r--r-- | public/assets/javascripts/ui/editor/TextEditor.js | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js new file mode 100644 index 0000000..53d5b9f --- /dev/null +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -0,0 +1,238 @@ + +var TextEditor = FormView.extend({ + el: "#textEditor", + tainted: false, + scenery: null, + + events: { + "keydown": 'taint', + "focus [name]": "clearMinotaur", + "mousedown": "stopPropagation", + "change [name=font-family]": 'changeFontFamily', + "change [name=font-size]": 'changeFontSize', + "change [name=text-align]": 'changeTextAlign', + "click .swatch": 'showColorPicker', + "click [data-role=hide-color-picker]": 'hideColorPicker', + "click [data-role=hide-text-editor]": 'hide', + "input [name=text-body]": 'changeText', + "click [data-role=destroy-text]": "destroy", + "click .colors span": "setHue", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$textSettings = this.$(".text-setting") + this.$colorSettings = this.$(".color-setting") + this.$noTextMessage = this.$(".no-text") + this.$fontFamily = this.$("[name=font-family]") + this.$fontSize = this.$("[name=font-size]") + this.$textBody = this.$("[name=text-body]") + this.$textAlign = this.$("[name=text-align]") + this.$swatch = this.$(".swatch") + + this.colorPicker = new LabColorPicker(this, 155, 155) + this.$(".color-picker").append( this.colorPicker.canvas ) + this.$(".color-picker").append( this.colorPicker.cursor ) + this.$(".slider").append( this.colorPicker.brightness ) + + this.$colors = this.$(".colors") + this.parent.colorControl.colors.forEach(function(color){ + var $swatch = $("<span>") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + + this.$(".setting").hide() + + app.on("cancel-scenery", function(){ + this.createMode(true) + $("body").toggleClass("addText", false) + }.bind(this)) + + }, + + toggle: function(state){ + this.$el.toggleClass("active", state) + if (state) { + $("#keyhint").fadeOut(200) + Scenery.nextMedia = { + type: 'text', + width: 600, + height: 450, + scale: 0.5, + font: { family: 'Lato', size: 24, align: 'left', color: "#000" }, + } + this.createMode(true) + } + else { + $("[data-role='toggle-text-editor']").removeClass("inuse") + } + }, + + hide: function(scenery){ + Scenery.nextMedia = null + if (this.scenery) { + this.unbind() + } + Scenery.resize.hide() + this.toggle(false) + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(scenery){ + this.tainted = false + this.scenery = scenery + this.scenery.mx.bound = true + this.scenery.mx.el.classList.add("picked") + this.scenery.media.font.color = this.scenery.media.font.color || [0,0,0] + }, + + unbind: function(){ + if (this.scenery) { + this.scenery.focused = false + if (this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + } + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } + if (! this.scenery.media || ! this.scenery.media.description || this.scenery.media.description == "") { + this.scenery.remove() + } + } + this.tainted = false + this.scenery = null + }, + + createMode: function(state){ + this.hideColorPicker() + this.$textSettings.toggle(! state) + this.$noTextMessage.toggle(!! state) + $("body").toggleClass("addText", !! state) + }, + + pick: function(scenery){ + if (this.scenery && scenery !== this.scenery) { + this.unbind() + } + + this.parent.settings.hide() + Scenery.resize.show(scenery) + Scenery.hovering = true + + this.bind(scenery) + this.$el.toggleClass("active", true) + this.$textBody.val( this.scenery.media.description ) + + this.$fontFamily.val( this.scenery.media.font.family ) + this.$fontSize.val( this.scenery.media.font.size ) + this.$textAlign.val( this.scenery.media.font.align ) + this.setSwatchColor( this.scenery.media.font.color ) + + this.createMode(false) + + if (! this.scenery.media.description) { + setTimeout(function(){ + this.$textBody.focus() + }.bind(this), 100) + } + }, + + taint: function(e){ + e.stopPropagation() + }, + + changeFontFamily: function(){ + this.scenery.setFont({ family: this.$fontFamily.val() }) + }, + + changeTextAlign: function(){ + this.scenery.setFont({ align: this.$textAlign.val() }) + }, + + changeFontSize: function(){ + var size = parseInt( this.$fontSize.val() ) + size && this.scenery.setFont({ size: size }) + }, + + changeText: function(e){ + e.stopPropagation() + var text = this.$textBody.val() + this.scenery.setText(text) + }, + + destroy: function(){ + this.tainted = false + this.scenery.remove() + this.hide() + }, + + setSwatchColor: function(rgb){ + this.$swatch.css("background-color", rgb_string(rgb)) + }, + showColorPicker: function(){ + this.$textSettings.hide() + this.$colorSettings.show() + + var color = this.scenery.media.font.color + this.labColor = this.colorPicker.load(color) + this.pickColor(color, this.labColor) + + this.$el.addClass("color-mode") + }, + + hideColorPicker: function(e){ + e && e.preventDefault() + this.$textSettings.show() + this.$colorSettings.hide() + this.$el.removeClass("color-mode") + }, + + pickColor: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(rgb) + this.scenery.setFont({ color: rgb }) + this.tainted = true + }, + + setHue: function(e){ + var color = $(e.currentTarget).data('color') + this.labColor = this.colorPicker.load(color) + this.pickColor(color, this.labColor) + }, + + initialState: null, + + begin: function(){ + // this.initialState = this.serialize() + }, + + serialize: function(){ + return { + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, + +}) |