diabook-themes: added js for auto-growing comment-textareas
This commit is contained in:
parent
170c15ceb9
commit
dddf3307af
12 changed files with 238 additions and 4 deletions
|
@ -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>
|
||||
|
|
46
view/theme/diabook-aerith/js/jquery.autogrow.textarea.js
Normal file
46
view/theme/diabook-aerith/js/jquery.autogrow.textarea.js
Normal 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, '<')
|
||||
.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);
|
|
@ -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"){
|
||||
|
@ -316,6 +320,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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
46
view/theme/diabook-blue/js/jquery.autogrow.textarea.js
Normal file
46
view/theme/diabook-blue/js/jquery.autogrow.textarea.js
Normal 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, '<')
|
||||
.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);
|
|
@ -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"){
|
||||
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
46
view/theme/diabook-red/js/jquery.autogrow.textarea.js
Normal file
46
view/theme/diabook-red/js/jquery.autogrow.textarea.js
Normal 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, '<')
|
||||
.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);
|
|
@ -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
|
||||
|
@ -314,6 +317,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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
46
view/theme/diabook/js/jquery.autogrow.textarea.js
Normal file
46
view/theme/diabook/js/jquery.autogrow.textarea.js
Normal 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, '<')
|
||||
.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);
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue