dispy theme hide editor if without focus

This commit is contained in:
Tobias Diekershoff 2011-07-24 09:32:20 +02:00
parent 0fbaac59f0
commit a4f7e8e8fe
3 changed files with 113 additions and 80 deletions

View File

@ -2,78 +2,103 @@
<script language="javascript" type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script> <script language="javascript" type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var editor; var editor=false;
var textlen = 0; var textlen = 0;
tinyMCE.init({ function initEditor(cb) {
theme : "advanced", if (editor==false) {
mode : "specific_textareas", $("#profile-jot-text-loading").show();
editor_selector: /(profile-jot-text|prvmail-text)/, tinyMCE.init({
plugins : "bbcode,paste,fullscreen,autoresize", theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code,fullscreen", mode : "specific_textareas",
theme_advanced_buttons2 : "", editor_selector: /(profile-jot-text|prvmail-text)/,
theme_advanced_buttons3 : "", plugins : "bbcode,paste,fullscreen,autoresize",
theme_advanced_toolbar_location : "top", theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code,fullscreen",
theme_advanced_toolbar_align : "center", theme_advanced_buttons2 : "",
theme_advanced_blockformats : "blockquote,code", theme_advanced_buttons3 : "",
//theme_advanced_resizing : true, theme_advanced_toolbar_location : "top",
//theme_advanced_statusbar_location : "bottom", theme_advanced_toolbar_align : "center",
paste_text_sticky : true, theme_advanced_blockformats : "blockquote,code",
entity_encoding : "raw", //theme_advanced_resizing : true,
add_unload_trigger : false, //theme_advanced_statusbar_location : "bottom",
remove_linebreaks : false, paste_text_sticky : true,
force_p_newlines : false, entity_encoding : "raw",
force_br_newlines : true, add_unload_trigger : false,
forced_root_block : '', remove_linebreaks : false,
convert_urls: false, force_p_newlines : false,
content_css: "$baseurl/view/custom_tinymce.css", force_br_newlines : true,
theme_advanced_path : false, forced_root_block : '',
setup : function(ed) { convert_urls: false,
//Character count content_css: "$baseurl/view/custom_tinymce.css",
ed.onKeyUp.add(function(ed, e) { theme_advanced_path : false,
var txt = tinyMCE.activeEditor.getContent(); setup : function(ed) {
textlen = txt.length; //Character count
if(textlen != 0 && $('#jot-perms-icon').is('.unlock')) { ed.onKeyUp.add(function(ed, e) {
$('#profile-jot-desc').html(ispublic); var txt = tinyMCE.activeEditor.getContent();
} textlen = txt.length;
else { if(textlen != 0 && $('#jot-perms-icon').is('.unlock')) {
$('#profile-jot-desc').html('&nbsp;'); $('#profile-jot-desc').html(ispublic);
} }
else {
if(textlen <= 140) { $('#profile-jot-desc').html('&nbsp;');
$('#character-counter').removeClass('red'); }
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('grey');
}
if((textlen > 140) && (textlen <= 420)) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('red');
$('#character-counter').addClass('orange');
}
if(textlen > 420) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('red');
}
$('#character-counter').text(textlen);
});
ed.onInit.add(function(ed) {
ed.pasteAsPlainText = true;
});
}
});
if(textlen <= 140) {
$('#character-counter').removeClass('red');
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('grey');
}
if((textlen > 140) && (textlen <= 420)) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('red');
$('#character-counter').addClass('orange');
}
if(textlen > 420) {
$('#character-counter').removeClass('grey');
$('#character-counter').removeClass('orange');
$('#character-counter').addClass('red');
}
$('#character-counter').text(textlen);
});
ed.onInit.add(function(ed) {
ed.pasteAsPlainText = true;
$("#profile-jot-text-loading").hide();
$("#profile-jot-submit-wrapper").show();
$("#profile-upload-wrapper").show();
$("#profile-attach-wrapper").show();
$("#profile-link-wrapper").show();
$("#profile-youtube-wrapper").show();
$("#profile-video-wrapper").show();
$("#profile-audio-wrapper").show();
$("#profile-location-wrapper").show();
$("#profile-nolocation-wrapper").show();
$("#profile-title-wrapper").show();
$("#profile-jot-plugin-wrapper").show();
$("#character-counter").show();
if (typeof cb!="undefined") cb();
});
}
});
editor = true;
// setup acl popup
$("a#jot-perms-icon").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
} else {
if (typeof cb!="undefined") cb();
}
} // initEditor
</script> </script>
<script type="text/javascript" src="include/ajaxupload.js" ></script> <script type="text/javascript" src="include/ajaxupload.js" ></script>
<script> <script>
var ispublic = '$ispublic'; var ispublic = '$ispublic';
$(document).ready(function() { $(document).ready(function() {
$("#profile-jot-acl-wrapper").hide(); /* enable tinymce on focus */
$("a#jot-perms-icon").fancybox({ $("#profile-jot-text").focus(function(){
'transitionIn' : 'none', if (editor) return;
'transitionOut' : 'none' $(this).val("");
initEditor();
}); });
var uploader = new window.AjaxUpload( var uploader = new window.AjaxUpload(
'wall-image-upload', 'wall-image-upload',
@ -184,9 +209,11 @@ tinyMCE.init({
function jotShare(id) { function jotShare(id) {
$('#like-rotator-' + id).show(); $('#like-rotator-' + id).show();
$.get('share/' + id, function(data) { $.get('share/' + id, function(data) {
tinyMCE.execCommand('mceInsertRawHTML',false,data); initEditor(function(){
$('#like-rotator-' + id).hide(); tinyMCE.execCommand('mceInsertRawHTML',false,data);
$(window).scrollTop(0); $('#like-rotator-' + id).hide();
$(window).scrollTop(0);
})
}); });
} }

View File

@ -2,7 +2,7 @@
<div id="profile-jot-wrapper" > <div id="profile-jot-wrapper" >
<div id="profile-jot-banner-wrapper"> <div id="profile-jot-banner-wrapper">
<div id="profile-jot-desc" >&nbsp;</div> <div id="profile-jot-desc" >&nbsp;</div>
<div id="character-counter" class="grey">0</div> <div id="character-counter" class="grey" style="display: none;">0</div>
<div id="profile-rotator-wrapper" style="display: $visitor;" > <div id="profile-rotator-wrapper" style="display: $visitor;" >
<img id="profile-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display:none;" /> <img id="profile-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display:none;" />
</div> </div>
@ -17,47 +17,48 @@
<input type="hidden" name="title" id="jot-title" value="" /> <input type="hidden" name="title" id="jot-title" value="" />
<input type="hidden" name="post_id" value="$post_id" /> <input type="hidden" name="post_id" value="$post_id" />
<textarea rows="5" style="width:100%" class="profile-jot-text" id="profile-jot-text" name="body" >$content</textarea> <img id="profile-jot-text-loading" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" >{{ if $content }}$content{{ else }}$share{{ endif }}</textarea>
{{ if $content }}<script>initEditor();</script>{{ endif }}
<div id="profile-jot-submit-wrapper" > <div id="profile-jot-submit-wrapper" style="display:none">
<div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" > <div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" >
<a href="#profile-jot-acl-wrapper" id="jot-perms-icon" class="icon $lockstate" title="$permset" ></a>$bang</div> <a href="#profile-jot-acl-wrapper" id="jot-perms-icon" class="icon $lockstate" title="$permset" ></a>$bang</div>
<input type="submit" id="profile-jot-submit" name="submit" value="$share" /> <input type="submit" id="profile-jot-submit" name="submit" value="$share" />
</div> </div>
<div id="profile-upload-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-upload-wrapper" class="jot-tool" style="display: none;" >
<div id="wall-image-upload-div" ><a onclick="return false;" id="wall-image-upload" class="icon border camera" title="$upload"></a></div> <div id="wall-image-upload-div" ><a onclick="return false;" id="wall-image-upload" class="icon border camera" title="$upload"></a></div>
</div> </div>
<div id="profile-attach-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-attach-wrapper" class="jot-tool" style="display: none;" >
<div id="wall-file-upload-div" ><a href="#" onclick="return false;" id="wall-file-upload" class="icon border attach" title="$attach"></a></div> <div id="wall-file-upload-div" ><a href="#" onclick="return false;" id="wall-file-upload" class="icon border attach" title="$attach"></a></div>
</div> </div>
<div id="profile-link-wrapper" class="jot-tool" style="display: $visitor;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" > <div id="profile-link-wrapper" class="jot-tool" style="display: none;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
<a id="profile-link" class="icon border link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></a> <a id="profile-link" class="icon border link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></a>
</div> </div>
<div id="profile-youtube-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-youtube-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-youtube" class="icon border youtube" title="$youtube" onclick="jotGetVideo(); return false;"></a> <a id="profile-youtube" class="icon border youtube" title="$youtube" onclick="jotGetVideo(); return false;"></a>
</div> </div>
<div id="profile-video-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-video-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-video" class="icon border video" title="$video" onclick="jotVideoURL(); return false;"></a> <a id="profile-video" class="icon border video" title="$video" onclick="jotVideoURL(); return false;"></a>
</div> </div>
<div id="profile-audio-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-audio-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-audio" class="icon border audio" title="$audio" onclick="jotAudioURL(); return false;"></a> <a id="profile-audio" class="icon border audio" title="$audio" onclick="jotAudioURL(); return false;"></a>
</div> </div>
<div id="profile-location-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-location-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-location" class="icon border globe" title="$setloc" onclick="jotGetLocation(); return false;"></a> <a id="profile-location" class="icon border globe" title="$setloc" onclick="jotGetLocation(); return false;"></a>
</div> </div>
<div id="profile-nolocation-wrapper" class="jot-tool" style="display: none;" > <div id="profile-nolocation-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-nolocation" class="icon border noglobe" title="$noloc" onclick="jotClearLocation(); return false;"></a> <a id="profile-nolocation" class="icon border noglobe" title="$noloc" onclick="jotClearLocation(); return false;"></a>
</div> </div>
<div id="profile-title-wrapper" class="jot-tool" style="display: $visitor;" > <div id="profile-title-wrapper" class="jot-tool" style="display: none;" >
<a id="profile-title" class="icon border article" title="$title" onclick="jotTitle(); return false;"></a> <a id="profile-title" class="icon border article" title="$title" onclick="jotTitle(); return false;"></a>
</div> </div>
<div id="profile-jot-plugin-wrapper"> <div id="profile-jot-plugin-wrapper" style="display: none;">
$jotplugins $jotplugins
</div> </div>
<div id="profile-jot-tools-end"></div> <div id="profile-jot-tools-end"></div>
<div style="display: none;"> <div style="display: none;">

View File

@ -1112,6 +1112,11 @@ div[id$="wrapper"] br { clear: left; }
.cc-license { margin-top: 100px; font-size: 0.7em; } .cc-license { margin-top: 100px; font-size: 0.7em; }
footer { display: block; margin: 50px 20%; clear: both; } footer { display: block; margin: 50px 20%; clear: both; }
#profile-jot-text {
height: 20px;
color:#cccccc;
border: 1px solid #cccccc;
}
/** acl **/ /** acl **/
#photo-edit-perms-select, #photo-edit-perms-select,
#photos-upload-permissions-wrapper, #photos-upload-permissions-wrapper,