aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authortommy tomson <thomas.bierey@gmx.de>2012-04-15 04:39:33 +0200
committertommy tomson <thomas.bierey@gmx.de>2012-04-15 04:39:33 +0200
commitdddf3307af24de71a8b6e52a984ba2f2e310c3b7 (patch)
treeb45087fc3bd2c69c7fd872106365d70aa4d0ce84 /view
parent170c15ceb9cac013146b7f9687b83a376a3a21ff (diff)
downloadvolse-hubzilla-dddf3307af24de71a8b6e52a984ba2f2e310c3b7.tar.gz
volse-hubzilla-dddf3307af24de71a8b6e52a984ba2f2e310c3b7.tar.bz2
volse-hubzilla-dddf3307af24de71a8b6e52a984ba2f2e310c3b7.zip
diabook-themes: added js for auto-growing comment-textareas
Diffstat (limited to 'view')
-rw-r--r--view/theme/diabook-aerith/comment_item.tpl2
-rw-r--r--view/theme/diabook-aerith/js/jquery.autogrow.textarea.js46
-rw-r--r--view/theme/diabook-aerith/theme.php13
-rw-r--r--view/theme/diabook-blue/comment_item.tpl2
-rw-r--r--view/theme/diabook-blue/js/jquery.autogrow.textarea.js46
-rw-r--r--view/theme/diabook-blue/theme.php13
-rw-r--r--view/theme/diabook-red/comment_item.tpl2
-rw-r--r--view/theme/diabook-red/js/jquery.autogrow.textarea.js46
-rw-r--r--view/theme/diabook-red/theme.php12
-rw-r--r--view/theme/diabook/comment_item.tpl2
-rw-r--r--view/theme/diabook/js/jquery.autogrow.textarea.js46
-rwxr-xr-xview/theme/diabook/theme.php12
12 files changed, 238 insertions, 4 deletions
diff --git a/view/theme/diabook-aerith/comment_item.tpl b/view/theme/diabook-aerith/comment_item.tpl
index 09fd8da3d..47046c371 100644
--- a/view/theme/diabook-aerith/comment_item.tpl
+++ b/view/theme/diabook-aerith/comment_item.tpl
@@ -11,7 +11,7 @@
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div>
<div class="comment-edit-photo-end"></div>
- <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+ <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);tautogrow($id)" onBlur="commentClose(this,$id);" >$comment</textarea>
<a class="icon bb-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</a>
<a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>
diff --git a/view/theme/diabook-aerith/js/jquery.autogrow.textarea.js b/view/theme/diabook-aerith/js/jquery.autogrow.textarea.js
new file mode 100644
index 000000000..806e34f51
--- /dev/null
+++ b/view/theme/diabook-aerith/js/jquery.autogrow.textarea.js
@@ -0,0 +1,46 @@
+(function($) {
+
+ /*
+ * Auto-growing textareas; technique ripped from Facebook
+ */
+ $.fn.autogrow = function(options) {
+
+ this.filter('textarea').each(function() {
+
+ var $this = $(this),
+ minHeight = $this.height(),
+ lineHeight = $this.css('lineHeight');
+
+ var shadow = $('<div></div>').css({
+ position: 'absolute',
+ top: -10000,
+ left: -10000,
+ width: $(this).width(),
+ fontSize: $this.css('fontSize'),
+ fontFamily: $this.css('fontFamily'),
+ lineHeight: $this.css('lineHeight'),
+ resize: 'none'
+ }).appendTo(document.body);
+
+ var update = function() {
+
+ var val = this.value.replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/&/g, '&amp;')
+ .replace(/\n/g, '<br/>');
+
+ shadow.html(val);
+ $(this).css('height', Math.max(shadow.height() + 20, minHeight));
+ }
+
+ $(this).change(update).keyup(update).keydown(update);
+
+ update.apply(this);
+
+ });
+
+ return this;
+
+ }
+
+})(jQuery); \ No newline at end of file
diff --git a/view/theme/diabook-aerith/theme.php b/view/theme/diabook-aerith/theme.php
index 53c564a94..907865207 100644
--- a/view/theme/diabook-aerith/theme.php
+++ b/view/theme/diabook-aerith/theme.php
@@ -292,6 +292,10 @@ $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></scrip
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-aerith/js/jquery.ae.image.resize.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
+//load jquery.autogrow-textarea.js
+$autogrowJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-aerith/js/jquery.autogrow.textarea.js";
+$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $autogrowJS);
+
//js scripts
//comment-edit-wrapper on photo_view
if ($a->argv[0].$a->argv[2] === "photos"."image"){
@@ -315,6 +319,15 @@ $a->page['htmlhead'] .= '
});
</script>';
+
+$a->page['htmlhead'] .= '
+
+<script type="text/javascript">
+
+function tautogrow(id){
+ $("textarea#comment-edit-text-" +id).autogrow();
+ };
+ </script>';
$a->page['htmlhead'] .= '
<script>
diff --git a/view/theme/diabook-blue/comment_item.tpl b/view/theme/diabook-blue/comment_item.tpl
index 09fd8da3d..47046c371 100644
--- a/view/theme/diabook-blue/comment_item.tpl
+++ b/view/theme/diabook-blue/comment_item.tpl
@@ -11,7 +11,7 @@
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div>
<div class="comment-edit-photo-end"></div>
- <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+ <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);tautogrow($id)" onBlur="commentClose(this,$id);" >$comment</textarea>
<a class="icon bb-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</a>
<a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>
diff --git a/view/theme/diabook-blue/js/jquery.autogrow.textarea.js b/view/theme/diabook-blue/js/jquery.autogrow.textarea.js
new file mode 100644
index 000000000..806e34f51
--- /dev/null
+++ b/view/theme/diabook-blue/js/jquery.autogrow.textarea.js
@@ -0,0 +1,46 @@
+(function($) {
+
+ /*
+ * Auto-growing textareas; technique ripped from Facebook
+ */
+ $.fn.autogrow = function(options) {
+
+ this.filter('textarea').each(function() {
+
+ var $this = $(this),
+ minHeight = $this.height(),
+ lineHeight = $this.css('lineHeight');
+
+ var shadow = $('<div></div>').css({
+ position: 'absolute',
+ top: -10000,
+ left: -10000,
+ width: $(this).width(),
+ fontSize: $this.css('fontSize'),
+ fontFamily: $this.css('fontFamily'),
+ lineHeight: $this.css('lineHeight'),
+ resize: 'none'
+ }).appendTo(document.body);
+
+ var update = function() {
+
+ var val = this.value.replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/&/g, '&amp;')
+ .replace(/\n/g, '<br/>');
+
+ shadow.html(val);
+ $(this).css('height', Math.max(shadow.height() + 20, minHeight));
+ }
+
+ $(this).change(update).keyup(update).keydown(update);
+
+ update.apply(this);
+
+ });
+
+ return this;
+
+ }
+
+})(jQuery); \ No newline at end of file
diff --git a/view/theme/diabook-blue/theme.php b/view/theme/diabook-blue/theme.php
index 844682943..eb2d484ba 100644
--- a/view/theme/diabook-blue/theme.php
+++ b/view/theme/diabook-blue/theme.php
@@ -290,6 +290,10 @@ $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></scrip
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-blue/js/jquery.ae.image.resize.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
+//load jquery.autogrow-textarea.js
+$autogrowJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-blue/js/jquery.autogrow.textarea.js";
+$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $autogrowJS);
+
//js scripts
//comment-edit-wrapper on photo_view
if ($a->argv[0].$a->argv[2] === "photos"."image"){
@@ -314,6 +318,15 @@ $a->page['htmlhead'] .= '
});
</script>';
+
+$a->page['htmlhead'] .= '
+
+<script type="text/javascript">
+
+function tautogrow(id){
+ $("textarea#comment-edit-text-" +id).autogrow();
+ };
+ </script>';
$a->page['htmlhead'] .= '
<script>
diff --git a/view/theme/diabook-red/comment_item.tpl b/view/theme/diabook-red/comment_item.tpl
index 09fd8da3d..47046c371 100644
--- a/view/theme/diabook-red/comment_item.tpl
+++ b/view/theme/diabook-red/comment_item.tpl
@@ -11,7 +11,7 @@
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div>
<div class="comment-edit-photo-end"></div>
- <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+ <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);tautogrow($id)" onBlur="commentClose(this,$id);" >$comment</textarea>
<a class="icon bb-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</a>
<a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>
diff --git a/view/theme/diabook-red/js/jquery.autogrow.textarea.js b/view/theme/diabook-red/js/jquery.autogrow.textarea.js
new file mode 100644
index 000000000..806e34f51
--- /dev/null
+++ b/view/theme/diabook-red/js/jquery.autogrow.textarea.js
@@ -0,0 +1,46 @@
+(function($) {
+
+ /*
+ * Auto-growing textareas; technique ripped from Facebook
+ */
+ $.fn.autogrow = function(options) {
+
+ this.filter('textarea').each(function() {
+
+ var $this = $(this),
+ minHeight = $this.height(),
+ lineHeight = $this.css('lineHeight');
+
+ var shadow = $('<div></div>').css({
+ position: 'absolute',
+ top: -10000,
+ left: -10000,
+ width: $(this).width(),
+ fontSize: $this.css('fontSize'),
+ fontFamily: $this.css('fontFamily'),
+ lineHeight: $this.css('lineHeight'),
+ resize: 'none'
+ }).appendTo(document.body);
+
+ var update = function() {
+
+ var val = this.value.replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/&/g, '&amp;')
+ .replace(/\n/g, '<br/>');
+
+ shadow.html(val);
+ $(this).css('height', Math.max(shadow.height() + 20, minHeight));
+ }
+
+ $(this).change(update).keyup(update).keydown(update);
+
+ update.apply(this);
+
+ });
+
+ return this;
+
+ }
+
+})(jQuery); \ No newline at end of file
diff --git a/view/theme/diabook-red/theme.php b/view/theme/diabook-red/theme.php
index c7fa77985..479a0130a 100644
--- a/view/theme/diabook-red/theme.php
+++ b/view/theme/diabook-red/theme.php
@@ -289,6 +289,9 @@ $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></scrip
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-red/js/jquery.ae.image.resize.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
+//load jquery.autogrow-textarea.js
+$autogrowJS = $a->get_baseurl($ssl_state)."/view/theme/diabook-red/js/jquery.autogrow.textarea.js";
+$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $autogrowJS);
//js scripts
//comment-edit-wrapper on photo_view
@@ -313,6 +316,15 @@ $a->page['htmlhead'] .= '
});
</script>';
+
+$a->page['htmlhead'] .= '
+
+<script type="text/javascript">
+
+function tautogrow(id){
+ $("textarea#comment-edit-text-" +id).autogrow();
+ };
+ </script>';
$a->page['htmlhead'] .= '
<script>
diff --git a/view/theme/diabook/comment_item.tpl b/view/theme/diabook/comment_item.tpl
index 09fd8da3d..47046c371 100644
--- a/view/theme/diabook/comment_item.tpl
+++ b/view/theme/diabook/comment_item.tpl
@@ -11,7 +11,7 @@
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div>
<div class="comment-edit-photo-end"></div>
- <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+ <textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);tautogrow($id)" onBlur="commentClose(this,$id);" >$comment</textarea>
<a class="icon bb-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</a>
<a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>
diff --git a/view/theme/diabook/js/jquery.autogrow.textarea.js b/view/theme/diabook/js/jquery.autogrow.textarea.js
new file mode 100644
index 000000000..806e34f51
--- /dev/null
+++ b/view/theme/diabook/js/jquery.autogrow.textarea.js
@@ -0,0 +1,46 @@
+(function($) {
+
+ /*
+ * Auto-growing textareas; technique ripped from Facebook
+ */
+ $.fn.autogrow = function(options) {
+
+ this.filter('textarea').each(function() {
+
+ var $this = $(this),
+ minHeight = $this.height(),
+ lineHeight = $this.css('lineHeight');
+
+ var shadow = $('<div></div>').css({
+ position: 'absolute',
+ top: -10000,
+ left: -10000,
+ width: $(this).width(),
+ fontSize: $this.css('fontSize'),
+ fontFamily: $this.css('fontFamily'),
+ lineHeight: $this.css('lineHeight'),
+ resize: 'none'
+ }).appendTo(document.body);
+
+ var update = function() {
+
+ var val = this.value.replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/&/g, '&amp;')
+ .replace(/\n/g, '<br/>');
+
+ shadow.html(val);
+ $(this).css('height', Math.max(shadow.height() + 20, minHeight));
+ }
+
+ $(this).change(update).keyup(update).keydown(update);
+
+ update.apply(this);
+
+ });
+
+ return this;
+
+ }
+
+})(jQuery); \ No newline at end of file
diff --git a/view/theme/diabook/theme.php b/view/theme/diabook/theme.php
index 4b4064a6c..8c5521eec 100755
--- a/view/theme/diabook/theme.php
+++ b/view/theme/diabook/theme.php
@@ -304,6 +304,9 @@ $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s"></script
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.ae.image.resize.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
+//load jquery.autogrow-textarea.js
+$autogrowJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.autogrow.textarea.js";
+$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $autogrowJS);
//js scripts
//comment-edit-wrapper on photo_view
@@ -329,6 +332,15 @@ $a->page['htmlhead'] .= '
</script>';
+$a->page['htmlhead'] .= '
+
+<script type="text/javascript">
+
+function tautogrow(id){
+ $("textarea#comment-edit-text-" +id).autogrow();
+ };
+ </script>';
+
$a->page['htmlhead'] .= '
<script>