YUI.add('gallery-node-autogrow', function (Y, NAME) { /** * The NodeAutoGrow Node Plugin makes textarea expands in height * to fit its contents automatically. * * Usage: * * * * * * * @module gallery-node-autogrow */ var _getClassName, _createBox, NodeAutoGrow; /** * A shortcut of Y.ClassNameManager.getClassName method. * * @method _getClassName * @private * @return {String} The class name with prefix generated by classmanager. */ _getClassName = function (text) { var className; if (!text) { className = Y.ClassNameManager.getClassName(NodeAutoGrow.NAME); } else { className = Y.ClassNameManager.getClassName(NodeAutoGrow.NAME, text); } return className; }; /** * For implementing the trick in 'Expanding Text Areas Made Elegant', * a container outside textarea is necessary to be created. * * @method _createBox * @private * @param node {Y.Node} The YUI Node instance. */ _createBox = function (node) { var el, // The wrapper element. text, // The textarea element. range; text = node._node; el = document.createElement("div"); el.className = _getClassName(); if (Y.UA.ie) { // TODO - Make sure if IE9+ supports DOM range. el.applyElement(text, "outside"); } else { range = document.createRange(); range.selectNode(text); range.surroundContents(el); } return Y.one(el); }; /** * An utility that makes textarea expands in height to fit its contents. * * @class NodeAutoGrow * @constructor * @param {Object} config attribute object */ NodeAutoGrow = function (config) { this._node = config.host; NodeAutoGrow.superclass.constructor.apply(this, arguments); }; NodeAutoGrow.MIRROR_HTML = "
"; Y.extend(NodeAutoGrow, Y.Plugin.Base, { /** * Execute automatically when user plugs. * * @method initializer * @public * @param config {Object} The config attribute object. */ initializer: function (config) { var that = this, boundingBox, // The textarea container. html, // The shortcut for NodeAutoGrow.MIRROR_HTML constant. mirrorNode, textNode, width; html = NodeAutoGrow.MIRROR_HTML; textNode = config.host; // Check if the config host is textarea. if (textNode.get("nodeName").toLowerCase() !== "textarea") { return false; } // Create the container if necessary. boundingBox = Y.one(config.boundingBox) || null; if (!boundingBox || !boundingBox.one("textarea")) { boundingBox = _createBox(textNode); that._set("boundingBox", boundingBox); } if (config.width && parseInt(config.width, 10)) { width = parseInt(config.width, 10); boundingBox.setStyle("width", width + "px"); } // Set the mirror element. if (!boundingBox.one("pre span")) { boundingBox.insert(html, textNode); } mirrorNode = boundingBox.one("span"); // Set class boundingBox.addClass(_getClassName()); // Initalize the value. mirrorNode.setHTML(textNode.getHTML()); // Bind event. textNode.on("valuechange", function () { mirrorNode.set("text", this.get("value")); }); } }); NodeAutoGrow.NAME = "autogrow"; NodeAutoGrow.NS = "AutoGrow"; Y.namespace("Plugin"); Y.Plugin.NodeAutoGrow = NodeAutoGrow; }, '@VERSION@', {"requires": ["node-pluginhost", "node-style", "event-valuechange", "classnamemanager", "plugin"]});