diabook-themes: added js for auto-growing comment-textareas

diff --git a/view/theme/diabook-aerith/comment_item.tpl b/view/theme/diabook-aerith/comment_item.tpl
index 09fd8da3dc163505ab9e771d3f7efe561ed0c1b3..47046c371a62f2e98eeec1b2abd57907483972b3 100644 (file)
--- 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 (file)
index 0000000..806e34f
--- /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 53c564a945761cf1c32ed8cfe7c2cbc85487b561..907865207ebf96aaceab9333087f3b608627f7c7 100644 (file)
--- 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 09fd8da3dc163505ab9e771d3f7efe561ed0c1b3..47046c371a62f2e98eeec1b2abd57907483972b3 100644 (file)
--- 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 (file)
index 0000000..806e34f
--- /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 8446829438f993ec3b7bdce2e7cd63bd9143f0ca..eb2d484ba02b69326ecfa4fd4c28f96a83e7ad70 100644 (file)
--- 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 09fd8da3dc163505ab9e771d3f7efe561ed0c1b3..47046c371a62f2e98eeec1b2abd57907483972b3 100644 (file)
--- 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 (file)
index 0000000..806e34f
--- /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 c7fa77985b812deb6be3bfd5ea9dd0fabcb1c48d..479a0130a9864d5882c6e19b89f1936bddbec260 100644 (file)
--- 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 09fd8da3dc163505ab9e771d3f7efe561ed0c1b3..47046c371a62f2e98eeec1b2abd57907483972b3 100644 (file)
--- 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 (file)
index 0000000..806e34f
--- /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 4b4064a6cf3e2a564de855aefd655425cbc8ec11..8c5521eecae931142f9a78818a69c959dcfc4fcb 100755 (executable)
--- 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>