From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- .../rectangles/engine/scenery/_scenery.js | 4 ++ .../rectangles/engine/scenery/resize.js | 16 +----- .../rectangles/engine/scenery/types/image.js | 2 + .../rectangles/engine/scenery/types/text.js | 66 ++++++++++++++++++++++ .../rectangles/engine/scenery/types/video.js | 2 + 5 files changed, 75 insertions(+), 15 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/text.js (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 69e9ba7..3d3067f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -24,6 +24,10 @@ var Scenery = new function(){ case 'vimeo': scene_media = new Scenery.types.video (opt) break + + case 'text': + scene_media = new Scenery.types.text (opt) + break } base.list[scene_media.id] = scene_media return scene_media diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 893237c..0ce976e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -117,22 +117,13 @@ Scenery.resize = new function(){ base.bind = function(){ dots.forEach(function(dot){ Scenery.mouse.bind_el(dot.el) - $(dot.el).bind({ - mouseenter: function(e){ -// Scenery.resize.hovering = true - }, - mouseleave: function(e){ -// Scenery.resize.hovering = false -// base.defer_hide() - } - }) }) Scenery.mouse.on("down", down) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) } - this.unbind = function(){ + base.unbind = function(){ dots.forEach(function(dot){ Scenery.mouse.unbind_el(dot.el) }) @@ -151,7 +142,6 @@ Scenery.resize = new function(){ naturalDimension = obj.naturalDimensions dimension = obj.dimensions position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) - scale = obj.mx.scale oldState = obj.serialize() document.body.classList.add("dragging") @@ -165,7 +155,6 @@ Scenery.resize = new function(){ var width = cursor.x.magnitude() var height = cursor.y.magnitude() var mag = cursor.magnitude() - var old_width = dimension.a * scale if (abs(width) > abs(height)) { mag = x_sign * mag * sign(width) @@ -175,9 +164,6 @@ Scenery.resize = new function(){ } obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) - // dimension.a // scale * (old_width + mag) / old_width - -// console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a) if (selected_dot.side & LEFT_RIGHT) { obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index aa43341..bed847b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -3,6 +3,8 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { + type: 'image', + init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js new file mode 100644 index 0000000..16c7a5c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -0,0 +1,66 @@ + +Scenery.types.text = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'text', + + init: function(opt){ + + opt.scale = 1 + + base.init.call(this, opt) + + this.build() + this.bind() + + if (opt.data) { + if (opt.wall) { + var position = opt.wall.mxToPosition(opt.data.position) + opt.index = opt.wall.surface.index_for_x( position.a, 0 ) + } + this.set_wall(opt) + this.deserialize(opt.data) + } + else { + this.set_wall(opt) + if (this.bounds) { + this.recenter() + if (opt.position) { + this.translateTo(opt.position) + } + var mx_position = this.wall.positionToMx( this.position, this.dimensions ) + this.mx.move(mx_position) + } + } + }, + + build: function(){ + this.mx = new MX.Text({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + }, + + setText: function(text){ + this.media.description = text + this.mx.setText(text) + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + }, + } + + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 2ef6ec3..b723f56 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -2,6 +2,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { + + type: 'video', init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) -- cgit v1.2.3-70-g09d2 From 1dae6e5dfce901cdadeebd2e191927dbc5a326f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:07:21 -0400 Subject: bower: adding marked --- bower.json | 3 ++- public/assets/javascripts/defaults.js | 7 +++++++ public/assets/javascripts/mx/primitives/mx.text.js | 8 ++++---- .../javascripts/rectangles/engine/scenery/types/text.js | 2 +- public/assets/javascripts/ui/editor/MediaEditor.js | 10 ++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 6 ++++-- public/assets/stylesheets/app.css | 12 +++++++++++- views/partials/scripts.ejs | 1 + 8 files changed, 36 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/bower.json b/bower.json index faffbfb..5f35d6c 100644 --- a/bower.json +++ b/bower.json @@ -8,6 +8,7 @@ "lodash": "", "fiber": "", "jquery-jsonview": "1.2.0", - "prefixfree": "" + "prefixfree": "", + "marked": "0.3.2" } } diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 038a882..c779233 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -12,3 +12,10 @@ app.defaults = { ceiling: [255,255,255], }, } + +marked.setOptions({ + gfm: true, + breaks: true, + sanitize: true, + smartypants: true, +}) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 7b8e595..b4089f3 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -26,11 +26,11 @@ MX.Text = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("text") + this.el.classList.add("mx-text") this.el.classList.add("mx-scenery") this.inner = document.createElement("div") - this.inner.style.width = "100%" + this.inner.classList.add("inner") this.el.appendChild(this.inner) this.load(ops) @@ -41,11 +41,11 @@ MX.Text = MX.Object3D.extend({ if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.inner.innerHTML = ops.media.description || "" + this.inner.innerHTML = marked( ops.media.description || "" ) }, setText: function(text){ - this.inner.innerHTML = text + this.inner.innerHTML = marked( text || "" ) }, }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 16c7a5c..20e9883 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -47,7 +47,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ setText: function(text){ this.media.description = text - this.mx.setText(text) + this.mx.setText( text ) }, serialize: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 0a4d894..9b81db1 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -160,10 +160,12 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - this.scenery.media.title = this.$name.val() - this.scenery.media.description = this.$description.val() - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + this.scenery.media.title = this.$name.val() + this.scenery.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false this.scenery.mx.el.classList.remove("picked") diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0d082ca..3d3124b 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -55,8 +55,10 @@ var TextEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e746cad..02bbe6a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -698,6 +698,16 @@ iframe.embed { .mx-object3d video { pointer-events: none; } +.mx-text { + overflow: hidden; +} +.mx-text .inner { + width: 100%; + pointer-events: none; +} +.mx-text p { + margin-bottom: 1em; +} #keyhint { position: fixed; bottom:0; @@ -2117,7 +2127,7 @@ a[data-role="forgot-password"] { background: white; padding: 10px; margin: 20px auto; -position: relative; + position: relative; } .collaborators button { diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 35dd782..f768160 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -3,6 +3,7 @@ + -- cgit v1.2.3-70-g09d2 From 4d78b32ce840bb804221f0208ee7cb0c8ffa8e02 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 18:13:58 -0400 Subject: setting font family & size --- public/assets/javascripts/defaults.js | 2 -- public/assets/javascripts/mx/primitives/mx.text.js | 19 +++++++++++++++---- .../rectangles/engine/scenery/types/text.js | 11 ++++++++++- public/assets/javascripts/ui/editor/TextEditor.js | 13 ++++++++++++- public/assets/stylesheets/app.css | 9 +++++++-- 5 files changed, 44 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index c779233..9ba0b4d 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -14,8 +14,6 @@ app.defaults = { } marked.setOptions({ - gfm: true, - breaks: true, sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index b4089f3..8db28d0 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -37,11 +37,22 @@ MX.Text = MX.Object3D.extend({ }, load: function(ops){ - if (ops.color) this.el.style.color = ops.color; - if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; - if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; + var media = ops.media + if (media.color) this.el.style.color = media.color; + if (media.font) this.setFont(media.font) + if (media.align) this.setAlign(media.align) - this.inner.innerHTML = marked( ops.media.description || "" ) + this.setText( media.description ) + }, + + setAlign: function(align) { + this.el.style.textAlign = "align" + }, + + setFont: function(font){ + console.log(font) + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" + this.el.style.fontSize = (2 * font.size) + "pt" }, setText: function(text){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 20e9883..a10a332 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -7,7 +7,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ init: function(opt){ - opt.scale = 1 + opt.scale = 0.5 base.init.call(this, opt) @@ -49,6 +49,15 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ this.media.description = text this.mx.setText( text ) }, + + setFont: function(style){ + for (var i in style) { + if (style.hasOwnProperty(i)) { + this.media.font[i] = style[i] + } + } + this.mx.setFont(this.media.font) + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 3d3124b..c867d94 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -30,7 +30,15 @@ var TextEditor = FormView.extend({ this.$el.toggleClass("active", state) if (state) { - Scenery.nextMedia = { type: 'text', width: 300, height: 150 } + Scenery.nextMedia = { + type: 'text', + width: 600, + height: 450, + scale: 0.5, + font: { family: 'Lato', size: 12 }, + align: 'left', + } + this.createMode(true) } }, @@ -101,9 +109,12 @@ var TextEditor = FormView.extend({ }, changeFontFamily: function(){ + this.scenery.setFont({ family: this.$fontFamily.val() }) }, changeFontSize: function(){ + var size = parseInt( this.$fontSize.val() ) + size && this.scenery.setFont({ size: size }) }, changeText: function(e){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 02bbe6a..1c20493 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -4,9 +4,11 @@ margin:0; padding:0; outline:0; - font-family: 'Lato', sans-serif; -webkit-font-smoothing: subpixel-antialiased; } +body,textarea,input { + font-family: 'Lato', sans-serif; +} *, *:before, *:after { moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -1597,7 +1599,10 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; width: 100%; max-height: 200px; - max-width: 180px; +} +#textEditor.settings textarea { + max-height: none; + height: 290px; } .settings input[type="text"]:focus{ -- cgit v1.2.3-70-g09d2