diff options
Diffstat (limited to 'view/theme/diabook-red')
| -rw-r--r-- | view/theme/diabook-red/comment_item.tpl | 2 | ||||
| -rw-r--r-- | view/theme/diabook-red/js/jquery.autogrow.textarea.js | 46 | ||||
| -rw-r--r-- | view/theme/diabook-red/theme.php | 12 |
3 files changed, 59 insertions, 1 deletions
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, '<') + .replace(/>/g, '>') + .replace(/&/g, '&') + .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> |