strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
tommy tomson 2012-04-15 04:39:33 +02:00
parent 170c15ceb9
commit dddf3307af
12 changed files with 238 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
view/theme/diabook-aerith/comment_item.tpl
View file

@ -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> <a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div> </div>
<div class="comment-edit-photo-end"></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-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</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> <a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>

46
view/theme/diabook-aerith/js/jquery.autogrow.textarea.js Normal file
View file

@ -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);

13
view/theme/diabook-aerith/theme.php
View file

@ -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"; $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); $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 //js scripts
//comment-edit-wrapper on photo_view //comment-edit-wrapper on photo_view
if ($a->argv[0].$a->argv[2] === "photos"."image"){ if ($a->argv[0].$a->argv[2] === "photos"."image"){
@ -316,6 +320,15 @@ $a->page['htmlhead'] .= '
</script>'; </script>';
$a->page['htmlhead'] .= '
<script type="text/javascript">
function tautogrow(id){
$("textarea#comment-edit-text-" +id).autogrow();
};
</script>';
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>

2
view/theme/diabook-blue/comment_item.tpl
View file

@ -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> <a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div> </div>
<div class="comment-edit-photo-end"></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-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</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> <a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>

46
view/theme/diabook-blue/js/jquery.autogrow.textarea.js Normal file
View file

@ -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);

13
view/theme/diabook-blue/theme.php
View file

@ -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"; $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); $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 //js scripts
//comment-edit-wrapper on photo_view //comment-edit-wrapper on photo_view
if ($a->argv[0].$a->argv[2] === "photos"."image"){ if ($a->argv[0].$a->argv[2] === "photos"."image"){
@ -315,6 +319,15 @@ $a->page['htmlhead'] .= '
</script>'; </script>';
$a->page['htmlhead'] .= '
<script type="text/javascript">
function tautogrow(id){
$("textarea#comment-edit-text-" +id).autogrow();
};
</script>';
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>

2
view/theme/diabook-red/comment_item.tpl
View file

@ -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> <a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div> </div>
<div class="comment-edit-photo-end"></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-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</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> <a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>

46
view/theme/diabook-red/js/jquery.autogrow.textarea.js Normal file
View file

@ -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);

12
view/theme/diabook-red/theme.php
View file

@ -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"; $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); $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 //js scripts
//comment-edit-wrapper on photo_view //comment-edit-wrapper on photo_view
@ -314,6 +317,15 @@ $a->page['htmlhead'] .= '
</script>'; </script>';
$a->page['htmlhead'] .= '
<script type="text/javascript">
function tautogrow(id){
$("textarea#comment-edit-text-" +id).autogrow();
};
</script>';
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>

2
view/theme/diabook/comment_item.tpl
View file

@ -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> <a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
</div> </div>
<div class="comment-edit-photo-end"></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-image" onclick="insertFormatting('$comment','img',$id);">img</a>
<a class="icon bb-url" onclick="insertFormatting('$comment','url',$id);">url</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> <a class="icon bb-video" onclick="insertFormatting('$comment','video',$id);">video</a>

46
view/theme/diabook/js/jquery.autogrow.textarea.js Normal file
View file

@ -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);

12
view/theme/diabook/theme.php
View file

@ -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"; $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); $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 //js scripts
//comment-edit-wrapper on photo_view //comment-edit-wrapper on photo_view
@ -329,6 +332,15 @@ $a->page['htmlhead'] .= '
</script>'; </script>';
$a->page['htmlhead'] .= '
<script type="text/javascript">
function tautogrow(id){
$("textarea#comment-edit-text-" +id).autogrow();
};
</script>';
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>