Skip to content
Browse files

Converted widget to Y.Node plugin as @ericf suggested.

  • Loading branch information...
1 parent 38db78a commit 7fbdb4e15f2a354985abe1f096dbedf2f7b97741 @prajwalit committed Jul 9, 2011
Showing with 43 additions and 37 deletions.
  1. +1 −1 README
  2. +3 −6 index.html
  3. +1 −1 textareaAutoheight-min.js
  4. +38 −29 textareaAutoheight.js
View
2 README
@@ -1,3 +1,3 @@
-A YUI 3 Widget which adds 'auto-height' functionality to textareas.
+A YUI 3 plugin which adds 'auto-height' functionality to textareas.
Demo: http://prajwalit.com/textarea-autoheight/
View
9 index.html
@@ -37,6 +37,7 @@
<body>
<header>
<h2>YUI 3: Textarea Autoheight</h2>
+ <p>A YUI 3 plugin which adds 'auto-height' functionality to textareas.</p>
</header>
<div class="doc">
@@ -50,9 +51,7 @@
&lt;script type="text/javascript" src="textareaAutoheight-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
YUI ().use ("textareaAutoheight", function (Y) {
- new Y.TextareaAutoheight ({
- node: Y.one("textarea")
- }).render ();
+ Y.one("textarea").plug (Y.TextareaAutoheight);
});
&lt;/script&gt;</pre>
</div>
@@ -65,9 +64,7 @@
<script type="text/javascript" src="textareaAutoheight-min.js"></script>
<script type="text/javascript">
YUI ().use ("textareaAutoheight", function (Y) {
- new Y.TextareaAutoheight ({
- node: Y.one("textarea")
- }).render ();
+ Y.one("textarea").plug (Y.TextareaAutoheight);
});
</script>
<script type="text/javascript">
View
2 textareaAutoheight-min.js
@@ -1 +1 @@
-YUI.add("textareaAutoheight",function(a){a.TextareaAutoheight=a.Base.create("textareaAutoheight",a.Widget,[],{_originalRows:1,_rowHeight:0,_eventHandler:null,_currentRows:1,initializer:function(b){a.log("Initializing textareaAutoheight");var e=this.get("node");this._originalRows=e.get("rows");var d=e.get("value");var c=e.getComputedStyle("paddingTop");var f=e.getComputedStyle("paddingBottom");e.setStyles({paddingTop:0,paddingBottom:0,height:"0px"}).setContent("").set("rows","1");this._rowHeight=e.get("scrollHeight");e.setStyles({paddingTop:c,paddingBottom:c,height:"auto"});e.setContent(d)},destructor:function(){this.get("node").setStyle("overflow","auto").set("rows",this._originalRows);this._eventHandler.detach();this._eventHandler=null},renderer:function(){this.renderUI();this.bindUI();this.syncUI(true)},renderUI:function(){this.get("node").setStyle("overflow","hidden")},bindUI:function(){this._eventHandler=this.get("node").on({focus:{fn:function(b){this.syncUI()},context:this},keyup:{fn:function(b){this.syncUI()},context:this},blur:{fn:function(b){this.syncUI(true)},context:this}})},syncUI:function(b){var c=this.get("node");c.set("rows","1");var d=this.get("node").get("scrollHeight")/this._rowHeight;this._currentRows=(d>=this._originalRows?d:this._originalRows);this.get("node").set("rows",(this._currentRows+(b?0:1)))}},{ATTRS:{node:null}})},"0.0.1",{requires:["widget","base-build","node"]});
+YUI.add("textareaAutoheight",function(a){a.TextareaAutoheight=a.Base.create("textareaAutoheight",a.Plugin.Base,[],{_originalRows:1,_rowHeight:0,_eventHandler:null,_currentRows:1,initializer:function(b){a.log("Pluging in textareaAutoheight");var e=this.get("host");this._originalRows=e.get("rows");var d=e.get("value");var c=e.getComputedStyle("paddingTop");var f=e.getComputedStyle("paddingBottom");e.setStyles({paddingTop:0,paddingBottom:0,height:"0px"}).setContent("").set("rows","1");this._rowHeight=e.get("scrollHeight");e.setStyles({paddingTop:c,paddingBottom:c,height:"auto"});e.setContent(d);this.renderUI();this.bindUI();this.syncUI(true)},destructor:function(){this.get("host").setStyle("overflow","auto").set("rows",this._originalRows);this._eventHandler.detach();this._eventHandler=null},renderUI:function(){this.get("host").setStyle("overflow","hidden")},bindUI:function(){this._eventHandler=this.get("host").on({focus:{fn:function(b){this.syncUI()},context:this},keyup:{fn:function(b){this.syncUI()},context:this},blur:{fn:function(b){this.syncUI(true)},context:this}})},syncUI:function(b){var c=this.get("host");c.set("rows","1");var d=this.get("host").get("scrollHeight")/this._rowHeight;this._currentRows=(d>=this._originalRows?d:this._originalRows);this.get("host").set("rows",(this._currentRows+(b?0:1)))}},{NS:"textareaAutoheight",ATTRS:{}})},"0.0.1",{requires:["plugin","base-build","node"]});
View
67 textareaAutoheight.js
@@ -1,5 +1,5 @@
/**
- * A YUI 3 Widget which adds auto-height functionality to textareas.
+ * A YUI3 plugin which adds auto-height functionality to textareas.
* @author Prajwalit Bhopale <prajwalit@infinitelybeta.com>
* @created Jul 9, 2011
* @module textareaAutoheight
@@ -46,25 +46,41 @@ YUI.add("textareaAutoheight", function(Y) {
* node: Y.one("textarea")
* }).render ();
*/
- Y.TextareaAutoheight = Y.Base.create ("textareaAutoheight", Y.Widget, [], {
+ Y.TextareaAutoheight = Y.Base.create ("textareaAutoheight", Y.Plugin.Base, [], {
+ /**
+ * Stores original "rows" attribute to go back to original state.
+ */
_originalRows: 1,
+
+ /**
+ * Stores height of single row used to get total number of rows.
+ */
_rowHeight: 0,
+
+ /**
+ * textarea events handler. focus/keyup/blur
+ */
_eventHandler: null,
+
+ /**
+ * Stores current value of "rows" attribute.
+ */
_currentRows: 1,
/**
* Constructor for TextareaAutoheight.
*/
initializer: function (config) {
- Y.log ("Initializing textareaAutoheight");
- var node = this.get ("node");
+ Y.log ("Pluging in textareaAutoheight");
+
+ var node = this.get ("host");
this._originalRows = node.get ("rows");
- var content = node.get ("value");
// We need to calculate row height of textarea.
// for that we're going to strip all css properties that affect height,
// calculate rowHeight, and then put all those styles back again.
+ var content = node.get ("value");
var paddingTop = node.getComputedStyle ("paddingTop");
var paddingBottom = node.getComputedStyle ("paddingBottom");
node.setStyles ({
@@ -80,34 +96,29 @@ YUI.add("textareaAutoheight", function(Y) {
height: "auto"
});
node.setContent (content);
+
+ // Renderer
+ this.renderUI ();
+ this.bindUI ();
+ this.syncUI (true);
},
/**
* Destructor for TextareaAutoheight.
*/
destructor: function () {
- this.get ("node").setStyle ("overflow", "auto").set ("rows", this._originalRows);
+ this.get ("host").setStyle ("overflow", "auto").set ("rows", this._originalRows);
this._eventHandler.detach ();
this._eventHandler = null;
},
/**
- * Renderer function for TextareaAutoheight.
- * This function gets called when render() function gets executed.
- */
- renderer: function () {
- this.renderUI ();
- this.bindUI ();
- this.syncUI (true);
- },
-
- /**
* RenderUI function for namespace.
* This method is responsible for creating and adding the nodes which
* the widget needs into the document.
*/
renderUI: function () {
- this.get ("node").setStyle ("overflow", "hidden");
+ this.get ("host").setStyle ("overflow", "hidden");
},
/**
@@ -116,7 +127,7 @@ YUI.add("textareaAutoheight", function(Y) {
* to the widget state.
*/
bindUI: function () {
- this._eventHandler = this.get ("node").on ({
+ this._eventHandler = this.get ("host").on ({
"focus": {
fn: function (event) {
this.syncUI ();
@@ -147,25 +158,23 @@ YUI.add("textareaAutoheight", function(Y) {
* When perfectHeight is true, that extra row will not get added.
*/
syncUI: function (perfectHeight) {
- var node = this.get ("node");
+ var node = this.get ("host");
node.set ("rows", "1");
- var rows = this.get ("node").get ("scrollHeight")/this._rowHeight;
+ var rows = this.get ("host").get ("scrollHeight")/this._rowHeight;
this._currentRows = (rows >= this._originalRows ? rows : this._originalRows);
- this.get ("node").set ("rows", (this._currentRows + (perfectHeight?0:1)));
+ this.get ("host").set ("rows", (this._currentRows + (perfectHeight?0:1)));
}
}, {
/**
+ * Plugin NameSpace.
+ */
+ NS: "textareaAutoheight",
+ /**
* Config attributes for TextareaAutoheight go here.
*/
- ATTRS: {
-
- /**
- * Textarea to which autoheight functionality is to be attached.
- */
- node: null
- }
+ ATTRS: {}
});
-}, "0.0.1", {requires:["widget", "base-build", "node"]});
+}, "0.0.1", {requires:["plugin", "base-build", "node"]});

0 comments on commit 7fbdb4e

Please sign in to comment.
Something went wrong with that request. Please try again.