Add text view with size calculations

koenbok · Nov 22, 2013 · 1f3e010ce3766be8772291358be59d62a44e69c6 · 1f3e010
1 parent ae7c991
commit 1f3e010ce3766be8772291358be59d62a44e69c6
Unified Split

Showing with 92 additions and 20 deletions.

+75 −3 build/framer.js

+2 −0 src/init.coffee

+15 −17 src/views/textview.coffee
diff --git a/build/framer.js b/build/framer.js
@@ -1,7 +1,7 @@
-// Framer 2.0-47-ge4c5467 (c) 2013 Koen Bok
+// Framer 2.0-49-gae7c991 (c) 2013 Koen Bok
 // https://github.com/koenbok/Framer

-window.FramerVersion = "2.0-47-ge4c5467";
+window.FramerVersion = "2.0-49-gae7c991";


 (function(){var require = function (file, cwd) {
@@ -4315,6 +4315,74 @@ require.define("/src/views/imageview.coffee",function(require,module,exports,__d

 });

+require.define("/src/views/textview.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
+  var TextView, View,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  View = require("./view").View;
+
+  TextView = (function(_super) {
+    __extends(TextView, _super);
+
+    function TextView(args) {
+      TextView.__super__.constructor.apply(this, arguments);
+      this.text = (args != null ? args.text : void 0) || "";
+    }
+
+    TextView.define("text", {
+      get: function() {
+        return this.html;
+      },
+      set: function(value) {
+        return this.html = value;
+      }
+    });
+
+    TextView.prototype.calculateSize = function(options) {
+      var frame, size, styleOverride, view;
+      view = new TextView();
+      view.text = this.text;
+      styleOverride = {
+        position: "absolute",
+        height: "auto",
+        width: "auto",
+        backgroundColor: "rgba(0,255,0,.2)",
+        visbility: "hidden"
+      };
+      view.style = _.extend({}, this.style, styleOverride);
+      frame = {
+        x: -10000,
+        y: -10000
+      };
+      if (options == null) {
+        options = {};
+      }
+      if (options.width) {
+        frame.width = options.width;
+      }
+      if (options.height) {
+        frame.width = options.height;
+      }
+      view.frame = frame;
+      view.__insertElement();
+      size = {
+        width: view._element.clientWidth,
+        height: view._element.clientHeight
+      };
+      return size;
+    };
+
+    return TextView;
+
+  })(View);
+
+  exports.TextView = TextView;
+
+}).call(this);
+
+});
+
 require.define("/src/primitives/events.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
  var Events, utils, _;

@@ -4789,7 +4857,7 @@ require.define("/src/ui/pagingview.coffee",function(require,module,exports,__dir
 });

 require.define("/src/init.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
-  var Animation, EventEmitter, Events, Frame, Global, ImageView, Matrix, ScrollView, View, ViewList, config, css, debug, tools, utils;
+  var Animation, EventEmitter, Events, Frame, Global, ImageView, Matrix, ScrollView, TextView, View, ViewList, config, css, debug, tools, utils;

  css = require("./css");

@@ -4809,6 +4877,8 @@ require.define("/src/init.coffee",function(require,module,exports,__dirname,__fi

  ImageView = require("./views/imageview").ImageView;

+  TextView = require("./views/textview").TextView;
+
  Animation = require("./animation").Animation;

  Frame = require("./primitives/frame").Frame;
@@ -4827,6 +4897,8 @@ require.define("/src/init.coffee",function(require,module,exports,__dirname,__fi

  Global.ImageView = ImageView;

+  Global.TextView = TextView;
+
  Global.Animation = Animation;

  Global.Frame = Frame;
diff --git a/src/init.coffee b/src/init.coffee
@@ -8,6 +8,7 @@ debug = require "./debug"
 {ViewList} = require "./views/view"
 {ScrollView} = require "./views/scrollview"
 {ImageView} = require "./views/imageview"
+{TextView} = require "./views/textview"
 {Animation} = require "./animation"

 {Frame} = require "./primitives/frame"
@@ -21,6 +22,7 @@ Global = {}
 Global.View = View
 Global.ScrollView = ScrollView
 Global.ImageView = ImageView
+Global.TextView = TextView
 Global.Animation = Animation

 Global.Frame = Frame
diff --git a/src/views/textview.coffee b/src/views/textview.coffee
@@ -1,6 +1,6 @@
 {View} = require "./view"

-class exports.TextView extends View
+class TextView extends View
 	
 	constructor: (args) ->
 		super
@@ -13,11 +13,18 @@ class exports.TextView extends View
 	
 	calculateSize: (options)->
 		
-		view = new exports.TextView()
+		view = new TextView()
 		view.text = @text
-		view.style = @style
-		view.style["position"] = "relative"
 		
+		styleOverride = 
+			position: "absolute"
+			height: "auto"
+			width: "auto"
+			backgroundColor: "rgba(0,255,0,.2)"
+			visbility: "hidden"
+
+		view.style = _.extend {}, @style, styleOverride
+
 		frame = {x:-10000, y:-10000}
 		
 		options ?= {}
@@ -28,21 +35,12 @@ class exports.TextView extends View
 			frame.width = options.height

 		view.frame = frame
-		view.insert()
+		view.__insertElement()
 		
 		size =
-			width: view.layer.element_.clientWidth
-			height: view.layer.element_.clientHeight
+			width: view._element.clientWidth
+			height: view._element.clientHeight
 		
 		return size
-	
-	autoWidth: (extra) ->
-		extra ?= 0
-		size = @calculateSize(height:@frame.height)
-		@frame.width = size.width + extra
-
-	autoHeight: (extra) ->
-		extra ?= 0
-		size = @calculateSize(width:@frame.width)
-		@frame.height = size.height + extra

+exports.TextView = TextView