character counter

This commit is contained in:
Mike Macgirvin 2010-08-07 02:53:59 -07:00
parent 4a7643b3ec
commit edff5b5289
4 changed files with 78 additions and 4 deletions

View file

@ -18,7 +18,31 @@ tinyMCE.init({
add_unload_trigger : false, add_unload_trigger : false,
remove_linebreaks : false, remove_linebreaks : false,
convert_urls: false, convert_urls: false,
content_css: "$baseurl/view/custom_tinymce.css" content_css: "$baseurl/view/custom_tinymce.css",
//Character count
theme_advanced_path : false,
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
var txt = tinyMCE.activeEditor.getContent();
var text = txt.length;
if(txt.length <= 140) {
$('#character-counter').removeClass('red');
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('grey');
}
if((txt.length > 140) && (txt .length <= 420)) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('red');
$('#character-counter').addClass('orange');
}
if(txt.length > 420) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('red');
}
$('#character-counter').text(text);
});
}
}); });
</script> </script>

View file

@ -1,8 +1,10 @@
<div id="profile-jot-wrapper" > <div id="profile-jot-wrapper" >
<p id="profile-jot-desc" > <div id="profile-jot-banner-wrapper">
What's on your mind? <div id="profile-jot-desc" >What's on your mind?</div>
</p> <div id="character-counter" class="grey"></div>
</div>
<div id="profile-jot-banner-end"></div>
<form id="profile-jot-form" action="item" method="post" > <form id="profile-jot-form" action="item" method="post" >
<input type="hidden" name="type" value="wall" /> <input type="hidden" name="type" value="wall" />
<input type="hidden" name="profile_uid" value="$profile_uid" /> <input type="hidden" name="profile_uid" value="$profile_uid" />

22
view/photo_item.tpl Normal file
View file

@ -0,0 +1,22 @@
<div class="wall-item-outside-wrapper$indent" id="wall-item-outside-wrapper-$id" >
<div class="wall-item-photo-wrapper" id="wall-item-photo-wrapper-$id" >
<a href="$profile_url" title="View $name's profile" class="wall-item-photo-link" id="wall-item-photo-link-$id">
<img src="$thumb" class="wall-item-photo" id="wall-item-photo-$id" height="80" width="80" alt="$name" /></a>
</div>
<div class="wall-item-wrapper" id="wall-item-wrapper-$id" >
<a href="$profile_url" title="View $name's profile" class="wall-item-name-link"><span class="wall-item-name" id="wall-item-name-$id" >$name</span></a>
<div class="wall-item-ago" id="wall-item-ago-$id">$ago</div>
</div>
<div class="wall-item-content" id="wall-item-content-$id" >
<div class="wall-item-title" id="wall-item-title-$id">$title</div>
<div class="wall-item-body" id="wall-item-body-$id" >$body</div>
</div>
$drop
<div class="wall-item-wrapper-end"></div>
<div class="wall-item-comment-separator"></div>
$comment
</div>
<div class="wall-item-outside-wrapper-end$indent" ></div>

View file

@ -1282,4 +1282,30 @@ input#dfrn-url {
#photos-upload-no-java-message { #photos-upload-no-java-message {
margin-bottom: 15px; margin-bottom: 15px;
}
#profile-jot-desc {
float: left;
width: 480px;
margin-top: 10px;
margin-bottom: 10px;
}
#character-counter {
float: left;
font-size: 120%;
}
#character-counter.grey {
color: #888888;
}
#character-counter.orange {
color: orange;
}
#character-counter.red {
color: red;
}
#profile-jot-banner-end {
clear: both;
} }