1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
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',
"input [name=text-body]": 'changeText',
"click [data-role=destroy-text]": "destroy",
},
initialize: function(opt){
this.parent = opt.parent
this.__super__.initialize.call(this)
this.$settings = this.$(".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]")
},
toggle: function(state){
$("#keyhint").fadeOut(200)
this.$el.toggleClass("active", state)
if (state) {
Scenery.nextMedia = {
type: 'text',
width: 600,
height: 450,
scale: 0.5,
font: { family: 'Lato', size: 12, align: 'left' },
}
this.createMode(true)
}
else {
$("[data-role='toggle-text-editor']").removeClass("inuse")
}
},
hide: function(scenery){
Scenery.nextMedia = null
if (this.scenery) {
this.unbind()
}
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")
},
unbind: function(){
if (this.scenery) {
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")
}
}
this.tainted = false
this.scenery = null
},
createMode: function(state){
this.$settings.toggle(! state)
this.$noTextMessage.toggle(!! state)
$("body").toggleClass("addText", !! state)
},
pick: function(scenery){
if (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.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(){
var scenery = this.scenery
this.hide()
Scenery.remove(scenery.id)
Scenery.resize.hide()
},
})
|
