Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding the `destroy` functionality.

Adding a destroy by determining the original values and restoring to the original when destroyed.
  • Loading branch information...
commit a2fa0a0f2704a859df52f21596d03255a183abb3 1 parent eef098b
@Zoramite Zoramite authored
Showing with 67 additions and 17 deletions.
  1. +47 −16 expanding.js
  2. +20 −1 index.html
View
63 expanding.js
@@ -20,46 +20,78 @@
];
var textareaCSS = {
- position: "absolute",
- height: "100%",
- resize: "none"
+ position : "absolute",
+ height : "100%",
+ resize : "none"
};
var preCSS = {
- visibility: "hidden",
- border: "0 solid"
+ visibility : "hidden",
+ border : "0 solid"
};
var containerCSS = {
- position: "relative"
+ position : "relative"
};
function resize() {
$(this).parent().find("div").text(this.value + ' ');
}
-
- $.fn.expandingTextarea = function (o) {
+
+ $.fn.expandingTextarea = function(o) {
if (o === "resize") {
return this.trigger("input.expanding");
}
- this.filter("textarea").not(".expanding-init").each(function () {
+ if (o === "destroy") {
+ this.filter(".expanding-init").each(function() {
+ var textarea = $(this);
+ var container = textarea.parents('.expandingText').first();
+
+ textarea = textarea.detach();
+
+ textarea
+ .insertBefore(container)
+ .css(textarea.data('originalCss') || {})
+ .attr('style', textarea.data('originalStyle') || '')
+ .removeClass('expanding-init')
+ .removeData('originalCss')
+ .removeData('originalStyle');
+
+ container.remove();
+ });
+ return this;
+ }
+
+ this.filter("textarea").not(".expanding-init").each(function() {
var textarea = $(this).addClass("expanding-init");
-
+
+ // Store the original styles for destroying
+ textarea.data('originalStyle', textarea.attr('style'));
+
textarea.wrap("<div class='expandingText'></div>");
textarea.after("<pre class='textareaClone'><div></div></pre>");
var container = textarea.parent().css(containerCSS);
var pre = container.find("pre").css(preCSS);
-
+
+ var originalCSS = {};
+
+ $.each(textareaCSS, function(i, p) {
+ originalCSS[i] = textarea.css(p);
+ });
+
+ textarea.data('originalCss', originalCSS);
+
textarea.css(textareaCSS);
- $.each(cloneCSSProperties, function (i, p) {
+ $.each(cloneCSSProperties, function(i, p) {
var val = textarea.css(p);
- // Only set if different to prevent overriding percentage css values
+ // Only set if different to prevent overriding percentage css
+ // values
if (pre.css(p) !== val) {
pre.css(p, val);
}
@@ -71,12 +103,11 @@
return this;
};
-
+
$(function () {
if ($.expandingTextarea.autoInitialize) {
$($.expandingTextarea.initialSelector).expandingTextarea();
}
});
-
+
})(jQuery);
-
View
21 index.html
@@ -132,7 +132,7 @@
If you'd like to manually call the plugin instead, use:
<pre><code>&lt;script&gt;
-$("#element").expandingTextarea();
+ $("#element").expandingTextarea();
&lt;/script&gt;</code></pre>
See the <a href='http://github.com/bgrins/ExpandingTextareas'>project page</a> for an explanation of how it works.
@@ -255,6 +255,25 @@
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
+
+ <div class='example destroy'>
+ <h3>Destroying</h3>
+ <p>Allows for removing the expanding functionality.</p>
+
+<pre><code>&lt;script&gt;
+ $("#element").expandingTextarea('destroy');
+&lt;/script&gt;</code></pre>
+
+ <textarea class='expanding' placeholder='Enter Some Text'></textarea>
+
+ <script type='text/javascript'>
+ (function($){
+ $(function(){
+ $('.example.destroy .expanding').expandingTextarea('destroy');
+ });
+ }(jQuery));
+ </script>
+ </div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.