aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Ugnich Anton2012-01-28 15:23:08 +0700
committerGravatar Ugnich Anton2012-01-28 15:23:08 +0700
commit2acfbc4184eec216c2a394029962aa2905c6b0a2 (patch)
tree800489f62d09f05ee2c9a5c4409a9c831dd8e59e
parentad61ffdbaf004dd3b33adf8f2780500069fa097b (diff)
Textarea autoresize update
-rw-r--r--src/java/com/juick/http/www/Blogs.java3
-rw-r--r--src/java/com/juick/http/www/PageTemplates.java2
-rw-r--r--src/java/com/juick/http/www/User.java3
-rw-r--r--src/java/com/juick/http/www/UserThread.java6
-rw-r--r--web/js/jquery.autoresize.js140
-rw-r--r--web/scripts3.js13
6 files changed, 106 insertions, 61 deletions
diff --git a/src/java/com/juick/http/www/Blogs.java b/src/java/com/juick/http/www/Blogs.java
index b4d30de0..1e212b7a 100644
--- a/src/java/com/juick/http/www/Blogs.java
+++ b/src/java/com/juick/http/www/Blogs.java
@@ -121,9 +121,6 @@ public class Blogs {
}
out.println("</ul>");
- out.println("<script type=\"text/javascript\">");
- out.println("$(\"textarea\").autoResize();");
- out.println("</script>");
if (mids.size() == 20) {
String nextpage = "?before=" + mids.get(mids.size() - 1);
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java
index 8bb77238..4997f778 100644
--- a/src/java/com/juick/http/www/PageTemplates.java
+++ b/src/java/com/juick/http/www/PageTemplates.java
@@ -374,7 +374,7 @@ public class PageTemplates {
out.println(" <div class=\"msg-comments\"><a href=\"/" + uname + "/" + mid + "\">" + formatReplies(rs.getInt(10), locale) + "</a> " + rb.getString("(replies) by") + " " + repliesby + "</div>");
} else {
out.println(" <form action=\"/post\" method=\"POST\" enctype=\"multipart/form-data\"><input type=\"hidden\" name=\"mid\" value=\"" + mid + "\"/>");
- out.println(" <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
+ out.println(" <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
out.println(" </form>");
}
out.println(" </li>");
diff --git a/src/java/com/juick/http/www/User.java b/src/java/com/juick/http/www/User.java
index 9d692a44..940cbfc4 100644
--- a/src/java/com/juick/http/www/User.java
+++ b/src/java/com/juick/http/www/User.java
@@ -109,9 +109,6 @@ public class User {
}
out.println("</ul>");
- out.println("<script type=\"text/javascript\">");
- out.println("$(\"textarea\").autoResize();");
- out.println("</script>");
if (mids.size() == 20) {
String nextpage = "?before=" + mids.get(19);
diff --git a/src/java/com/juick/http/www/UserThread.java b/src/java/com/juick/http/www/UserThread.java
index 7248697b..eb3adfad 100644
--- a/src/java/com/juick/http/www/UserThread.java
+++ b/src/java/com/juick/http/www/UserThread.java
@@ -72,10 +72,6 @@ public class UserThread {
printReplies(out, sql, MID, locale, listview);
- out.println("<script type=\"text/javascript\">");
- out.println("$(\"textarea\").autoResize();");
- out.println("</script>");
-
out.println("</div>");
out.println("</div>");
@@ -149,7 +145,7 @@ public class UserThread {
out.println(" <div class=\"msg-txt\">" + txt + "</div>");
out.println(" <form action=\"/post\" method=\"POST\" enctype=\"multipart/form-data\"><input type=\"hidden\" name=\"mid\" value=\"" + mid + "\"/>");
- out.println(" <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
+ out.println(" <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
out.println(" </form>");
out.println(" </li>");
diff --git a/web/js/jquery.autoresize.js b/web/js/jquery.autoresize.js
index a54ec545..4bc0959a 100644
--- a/web/js/jquery.autoresize.js
+++ b/web/js/jquery.autoresize.js
@@ -1,7 +1,7 @@
/*
- * jQuery.fn.autoResize 1.1
+ * jQuery.fn.autoResize 1.14
* --
- * https://github.com/jamespadolsey/jQuery.fn.autoResize
+ * https://github.com/padolsey/jQuery.fn.autoResize
* --
* This program is free software. It comes without any warranty, to
* the extent permitted by applicable law. You can redistribute it
@@ -11,24 +11,28 @@
(function($){
- var defaults = autoResize.defaults = {
- onResize: function(){},
- animate: {
- duration: 200,
- complete: function(){}
- },
- extraSpace: 0,
- minHeight: 1,
- maxHeight: 500,
- minWidth: 'original',
- maxWidth: 500
- };
+ var uid = 'ar' + +new Date,
+
+ defaults = autoResize.defaults = {
+ onResize: function(){},
+ onBeforeResize: function(){return 123},
+ onAfterResize: function(){return 555},
+ animate: {
+ duration: 200,
+ complete: function(){}
+ },
+ extraSpace: 50,
+ minHeight: 'original',
+ maxHeight: 500,
+ minWidth: 'original',
+ maxWidth: 500
+ };
autoResize.cloneCSSProperties = [
'lineHeight', 'textDecoration', 'letterSpacing',
'fontSize', 'fontFamily', 'fontStyle', 'fontWeight',
'textTransform', 'textAlign', 'direction', 'wordSpacing', 'fontSizeAdjust',
- 'padding'
+ 'paddingTop', 'paddingLeft', 'paddingBottom', 'paddingRight', 'width'
];
autoResize.cloneCSSValues = {
@@ -39,7 +43,14 @@
overflow: 'hidden'
};
- autoResize.resizableFilterSelector = 'textarea,input:not(input[type]),input[type=text],input[type=password]';
+ autoResize.resizableFilterSelector = [
+ 'textarea:not(textarea.' + uid + ')',
+ 'input:not(input[type])',
+ 'input[type=text]',
+ 'input[type=password]',
+ 'input[type=email]',
+ 'input[type=url]'
+ ].join(',');
autoResize.AutoResizer = AutoResizer;
@@ -53,8 +64,12 @@
}
function AutoResizer(el, config) {
+
+ if (el.data('AutoResizer')) {
+ el.data('AutoResizer').destroy();
+ }
- config = this.config = $.extend(autoResize.defaults, config);
+ config = this.config = $.extend({}, autoResize.defaults, config);
this.el = el;
this.nodeName = el[0].nodeName.toLowerCase();
@@ -78,8 +93,14 @@
el.data('AutoResizer', this);
- this.createClone();
- this.injectClone();
+ // Make sure onAfterResize is called upon animation completion
+ config.animate.complete = (function(f){
+ return function() {
+ config.onAfterResize.call(el);
+ return f.apply(this, arguments);
+ };
+ }(config.animate.complete));
+
this.bind();
}
@@ -98,9 +119,14 @@
this.el
.bind('keyup.autoResize', check)
//.bind('keydown.autoResize', check)
- .bind('change.autoResize', check);
+ .bind('change.autoResize', check)
+ .bind('paste.autoResize', function() {
+ setTimeout(function() { check(); }, 0);
+ });
- this.check(null, true);
+ if (!this.el.is(':hidden')) {
+ this.check(null, true);
+ }
},
@@ -111,15 +137,7 @@
createClone: function() {
var el = this.el,
- clone;
-
- if (this.nodeName === 'textarea') {
- clone = el.clone().height('auto');
- } else {
- clone = $('<span/>').width('auto').css({
- whiteSpace: 'nowrap'
- });
- }
+ clone = this.nodeName === 'textarea' ? el.clone() : $('<span/>');
this.clone = clone;
@@ -130,18 +148,36 @@
clone
.removeAttr('name')
.removeAttr('id')
+ .addClass(uid)
.attr('tabIndex', -1)
.css(autoResize.cloneCSSValues);
+ if (this.nodeName === 'textarea') {
+ clone.height('auto');
+ } else {
+ clone.width('auto').css({
+ whiteSpace: 'nowrap'
+ });
+ }
+
},
check: function(e, immediate) {
+ if (!this.clone) {
+ this.createClone();
+ this.injectClone();
+ }
+
var config = this.config,
clone = this.clone,
el = this.el,
value = el.val();
+ // Do nothing if value hasn't changed
+ if (value === this.prevValue) { return true; }
+ this.prevValue = value;
+
if (this.nodeName === 'input') {
clone.text(value);
@@ -159,15 +195,19 @@
(newWidth >= config.minWidth && newWidth <= config.maxWidth)
) {
+ config.onBeforeResize.call(el);
config.onResize.call(el);
el.scrollLeft(0);
- config.animate && !immediate ?
+ if (config.animate && !immediate) {
el.stop(1,1).animate({
width: newWidth
- }, config.animate)
- : el.width(newWidth);
+ }, config.animate);
+ } else {
+ el.width(newWidth);
+ config.onAfterResize.call(el);
+ }
}
@@ -177,9 +217,9 @@
// TEXTAREA
- clone.height(0).val(value).scrollTop(10000);
+ clone.width(el.width()).height(0).val(value).scrollTop(10000);
- var scrollTop = clone[0].scrollTop + config.extraSpace;
+ var scrollTop = clone[0].scrollTop;
// Don't do anything if scrollTop hasen't changed:
if (this.previousScrollTop === scrollTop) {
@@ -188,26 +228,30 @@
this.previousScrollTop = scrollTop;
- if (scrollTop >= config.maxHeight) {
+ if (scrollTop + config.extraSpace >= config.maxHeight) {
el.css('overflowY', '');
- return;
- }
-
- el.css('overflowY', 'hidden');
-
- if (scrollTop < config.minHeight) {
+ scrollTop = config.maxHeight;
+ immediate = true;
+ } else if (scrollTop <= config.minHeight) {
scrollTop = config.minHeight;
+ } else {
+ el.css('overflowY', 'hidden');
+ scrollTop += config.extraSpace;
}
+ config.onBeforeResize.call(el);
config.onResize.call(el);
-
+
// Either animate or directly apply height:
- config.animate && !immediate ?
+ if (config.animate && !immediate) {
el.stop(1,1).animate({
height: scrollTop
- }, config.animate)
- : el.height(scrollTop);
-
+ }, config.animate);
+ } else {
+ el.height(scrollTop);
+ config.onAfterResize.call(el);
+ }
+
},
destroy: function() {
@@ -227,4 +271,4 @@
};
-})(jQuery); \ No newline at end of file
+})(jQuery);
diff --git a/web/scripts3.js b/web/scripts3.js
index ec86d39e..12e0aeee 100644
--- a/web/scripts3.js
+++ b/web/scripts3.js
@@ -39,10 +39,21 @@ function showCommentForm(mid,rid) {
var c=$('#replies #'+rid+' .msg-comment');
c.wrap('<form action="/post" method="POST" enctype="multipart/form-data"/>');
c.before('<input type="hidden" name="mid" value="'+mid+'"/><input type="hidden" name="rid" value="'+rid+'"/>');
- c.append('<textarea name="body" rows="1" placeholder="Add a comment..." onkeypress="postformListener(this.form,event)"></textarea>');
+ c.append('<textarea name="body" rows="1" class="reply" placeholder="Add a comment..." onkeypress="postformListener(this.form,event)"></textarea>');
}
$('#replies #'+rid+' .msg-links').hide();
$('#replies #'+rid+' .msg-comment').show();
$('#replies #'+rid+' textarea')[0].focus();
+ $('#replies #'+rid+' textarea').autoResize({
+ extraSpace: 0,
+ minHeight: 1
+ });
return false;
}
+
+$(document).ready(function() {
+ $('textarea.reply').autoResize({
+ extraSpace: 0,
+ minHeight: 1
+ });
+});