From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 6 Oct 2014 16:01:13 -0400
Subject: new scenery type: text

---
 public/assets/javascripts/ui/editor/TextEditor.js | 85 ++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 3 deletions(-)

(limited to 'public/assets/javascripts/ui/editor/TextEditor.js')

diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 0319a31..0d082ca 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -1,6 +1,8 @@
 
 var TextEditor = FormView.extend({
 	el: "#textEditor",
+	tainted: false,
+	scenery: null,
 		
 	events: {
 		"keydown": 'taint',
@@ -9,20 +11,87 @@ var TextEditor = FormView.extend({
 		"change [name=font-family]": 'changeFontFamily',
 		"change [name=font-size]": 'changeFontSize',
 		"input [name=text-body]": 'changeText',
-		"click [data-role=destroy-media]": "destroy",
+		"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]")
 	},
 
   toggle: function(state){
-    this.$el.toggleClass("active", state);
+    $("#keyhint").fadeOut(200)
+    
+    this.$el.toggleClass("active", state)
+    if (state) {
+      Scenery.nextMedia = { type: 'text', width: 300, height: 150 }
+      this.createMode(true)
+    }
+  },
+
+	hide: function(scenery){
+		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 && 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()
+		}
+
+		Scenery.resize.show(scenery)
+		Scenery.hovering = true
+		
+		this.bind(scenery)
+		this.$el.toggleClass("active", true)
+		this.$textBody.val( this.scenery.media.description )
+
+    this.createMode(false)
+
+    if (! this.scenery.media.description) {
+      setTimeout(function(){
+        this.$textBody.focus()
+      }.bind(this), 100)
+    }
   },
   
   taint: function(e){
@@ -35,7 +104,17 @@ var TextEditor = FormView.extend({
   changeFontSize: function(){
   },
   
-  changeText: function(){
+  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()
+	},
 
 })
-- 
cgit v1.2.3-70-g09d2


From 1dae6e5dfce901cdadeebd2e191927dbc5a326f6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
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/ui/editor/TextEditor.js')

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 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/prefixfree/prefixfree.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/marked/lib/marked.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 4d78b32ce840bb804221f0208ee7cb0c8ffa8e02 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
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/ui/editor/TextEditor.js')

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


From 20b1d2787e71cb28c55187d42805407fef63d0e4 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 6 Oct 2014 18:38:26 -0400
Subject: text align

---
 public/assets/javascripts/mx/primitives/mx.text.js |  7 +------
 public/assets/javascripts/ui/editor/TextEditor.js  | 13 +++++++++++--
 views/controls/editor/text-editor.ejs              |  6 ++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

(limited to 'public/assets/javascripts/ui/editor/TextEditor.js')

diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index 8db28d0..1d975ec 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -40,19 +40,14 @@ MX.Text = MX.Object3D.extend({
     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.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"
+    this.el.style.textAlign = font.align
   },
   
   setText: function(text){
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c867d94..1e35c12 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -10,6 +10,7 @@ var TextEditor = FormView.extend({
 		"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",
 	},
@@ -23,6 +24,7 @@ var TextEditor = FormView.extend({
     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){
@@ -35,8 +37,7 @@ var TextEditor = FormView.extend({
         width: 600,
         height: 450,
         scale: 0.5,
-        font: { family: 'Lato', size: 12 },
-        align: 'left',
+        font: { family: 'Lato', size: 12, align: 'left' },
       }
       
       this.createMode(true)
@@ -94,6 +95,10 @@ var TextEditor = FormView.extend({
 		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)
 
@@ -111,6 +116,10 @@ var TextEditor = FormView.extend({
   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() )
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs
index a14c469..3a367d5 100644
--- a/views/controls/editor/text-editor.ejs
+++ b/views/controls/editor/text-editor.ejs
@@ -21,6 +21,12 @@
       <option value="36">36pt</option>
       <option value="72">72pt</option>
     </select>
+    <select name="text-align">
+      <option value="left">Left</option>
+      <option value="center">Center</option>
+      <option value="right">Right</option>
+      <option value="justify">Justify</option>
+    </select>
   </div>
   
 	<div class="setting">
-- 
cgit v1.2.3-70-g09d2