[pLog-svn] r3385 - in plog/trunk: class/action/admin js/tinymce
js/ui locale templates/admin
mark at devel.lifetype.net
mark at devel.lifetype.net
Thu May 11 17:58:36 GMT 2006
Author: mark
Date: 2006-05-11 17:58:34 +0000 (Thu, 11 May 2006)
New Revision: 3385
Added:
plog/trunk/js/ui/autosave.js
Modified:
plog/trunk/class/action/admin/adminaddpostaction.class.php
plog/trunk/js/tinymce/tiny_mce-plog.js
plog/trunk/js/ui/plogui.js
plog/trunk/locale/locale_en_UK.php
plog/trunk/locale/locale_zh_TW.php
plog/trunk/templates/admin/header.template
plog/trunk/templates/admin/newpost.template
Log:
An improved version of autosave:
1. For some reasons, I change the autosave from event-base(onChange) to time-base(setInterval). Currently, the post will saved to cookie in every 5 seconds.
2. Now, the script can handle multiple installations and multiple blogs in the same domain.
3. When user want to leave the current newPost page, it will show a dialog to ask user really want to leave or not. At the same time, the cookie will clean and the autosave will restart again after 10 seconds.
4. Add postTopic support.
That's all!
Modified: plog/trunk/class/action/admin/adminaddpostaction.class.php
===================================================================
--- plog/trunk/class/action/admin/adminaddpostaction.class.php 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/class/action/admin/adminaddpostaction.class.php 2006-05-11 17:58:34 UTC (rev 3385)
@@ -213,8 +213,15 @@
function clearAutoSaveCookie()
{
+ $rg = $this->_blogInfo->getBlogRequestGenerator();
+ $plogAdminBaseUrl = $rg->getBaseUrl(false)."/admin.php";
+ $cookieBaseName = "LT" . preg_replace("/[^a-zA-Z0-9]/", "", $plogAdminBaseUrl).$this->_blogInfo->getId();
+
// set the auto save cookie as false
- setcookie( 'LTpostNotSaved', '0', -1, '/' );
+ setcookie( $cookieBaseName.'postNotSaved', '0', -1, '/' );
+ setcookie( $cookieBaseName.'postTopic', '', -1, '/' );
+ setcookie( $cookieBaseName.'postText', '', -1, '/' );
+ setcookie( $cookieBaseName.'postExtendedText', '', -1, '/' );
}
}
?>
\ No newline at end of file
Modified: plog/trunk/js/tinymce/tiny_mce-plog.js
===================================================================
--- plog/trunk/js/tinymce/tiny_mce-plog.js 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/js/tinymce/tiny_mce-plog.js 2006-05-11 17:58:34 UTC (rev 3385)
@@ -18,7 +18,6 @@
theme_advanced_path_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
- onchange_callback : "tinyMCEOnChangeEvent",
extended_valid_elements : "a[class|name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
verify_html : true,
valid_elements : ""
Added: plog/trunk/js/ui/autosave.js
===================================================================
--- plog/trunk/js/ui/autosave.js 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/js/ui/autosave.js 2006-05-11 17:58:34 UTC (rev 3385)
@@ -0,0 +1,176 @@
+/**
+ * functions for auto save
+ */
+
+// Before you change the following values, please make sure the total cookie size of the domain does not exceed
+// your LimitRequestFieldsize value in Apache. Or you will get a ugly error message like this in your browser:
+//
+// [Bad Request: Size of a request header field exceeds server limit]
+//
+// The default LimitRequestFieldsize value of apache is 8192 bytes.
+
+// In generally, the cookie size is 4096 bytes, So this number should be smaller then 4096
+var maxBackupCookieLength = 3240;
+
+// How many cookies we can use per postText and PostExtentedText
+var maxBackupCookiesPerBlog = 1;
+
+// It doesn't make sense just backup few characters, use this to control the minimal backup length
+var minBackupLength = 9;
+
+// The time interval between two post backup, the default is 5 seconds
+var backupInterval = 5;
+
+// Timer we used for post backup
+var backupTimer;
+
+// Make a unique cookie name for each blog.
+// If you change this, please remember change the cookie name in adminaddpostaction.class.php too.
+var re = new RegExp("[^a-zA-Z0-9]", "g" );
+var LTCookieBaseName = "LT" + plogAdminBaseUrl.replace( re, "" ) + plogAdminBlogId;
+var postNotSavedCookieName = LTCookieBaseName + "postNotSaved";
+var postTopicCookieName = LTCookieBaseName + "postTopic";
+var postTextCookieName = LTCookieBaseName + "postText";
+var postExtendedTextCookieName = LTCookieBaseName + "postExtendedText";
+
+function deleteBackupPostFromCookie()
+{
+ deleteCookie( postNotSavedCookieName );
+ for( cookieNum = 0; cookieNum < maxBackupCookiesPerBlog; cookieNum++ )
+ {
+ deleteCookie( postTopicCookieName + cookieNum );
+ deleteCookie( postTextCookieName + cookieNum );
+ deleteCookie( postExtendedTextCookieName + cookieNum );
+ }
+}
+
+function saveBackupPostToCookie( cookieName, content )
+{
+ // Clear old post, I know it stupid. But it seems the best way to keep the data clean.
+ // If we use mutiple cookies to compose a single post.
+ for( cookieNum = 0; cookieNum < maxBackupCookiesPerBlog; cookieNum++ )
+ {
+ deleteCookie( cookieName + cookieNum );
+ }
+
+ var dataIndex = 0;
+ var cookieNum = 0;
+ var data = escape( content );
+ while ( ( dataIndex < data.length ) && ( cookieNum < maxBackupCookiesPerBlog ) ) {
+ var cookieData = data.substring(dataIndex, dataIndex + maxBackupCookieLength);
+ setCookie( cookieName + cookieNum, cookieData, 1);
+ dataIndex += maxBackupCookieLength;
+ cookieNum++;
+ }
+}
+
+function loadBackupPostFromCookie( cookieName )
+{
+ var content = "";
+ for( cookieNum = 0; cookieNum < maxBackupCookiesPerBlog; cookieNum++ )
+ {
+ data = getCookie( cookieName + cookieNum );
+ if ( data )
+ content += data;
+ else
+ break;
+ }
+
+ return unescape( content );
+}
+
+function backupPost()
+{
+ postTopic = $('postTopic').value;
+
+ if( htmlAreaEnabled )
+ {
+ postText = tinyMCE.getInstanceById('postText').getBody().innerHTML;
+ postExtendedText = tinyMCE.getInstanceById('postExtendedText').getBody().innerHTML;
+ }
+ else
+ {
+ postText = $('postText').value;
+ postExtendedText = $('postExtendedText').value;
+ }
+
+ if( postTopic.length > minBackupLength )
+ {
+ setCookie( postNotSavedCookieName, 1, 1);
+ saveBackupPostToCookie( postTopicCookieName, postTopic );
+ }
+
+ if( postText.length > minBackupLength )
+ {
+ setCookie( postNotSavedCookieName, 1, 1);
+ saveBackupPostToCookie( postTextCookieName, postText );
+ }
+
+ if( postExtendedText.length > minBackupLength )
+ {
+ setCookie( postNotSavedCookieName, 1, 1);
+ saveBackupPostToCookie( postExtendedTextCookieName, postExtendedText );
+ }
+}
+
+function initialAutoSave()
+{
+ window.onbeforeunload = beforeUnload;
+
+ postNotSaved = getCookie( postNotSavedCookieName );
+ if ( postNotSaved == 1 )
+ {
+ $('autoSaveMessage').innerHTML = msgAutoSaveMessage;
+ Element.show($('autoSaveMessage'));
+ }
+ else
+ {
+ deleteBackupPostFromCookie();
+ }
+}
+
+function startAutoSave() {
+ backupTimer = setInterval('backupPost();', backupInterval * 1000 );
+}
+
+function restartAutoSave() {
+ deleteBackupPostFromCookie();
+ clearInterval( backupTimer );
+ setTimeout( 'startAutoSave();', backupInterval * 1000 );
+}
+
+function restoreAutoSave()
+{
+ $('postTopic').value = loadBackupPostFromCookie( postTopicCookieName );
+
+ if( htmlAreaEnabled )
+ {
+ tinyMCE.getInstanceById('postText').getBody().innerHTML = loadBackupPostFromCookie( postTextCookieName );
+ tinyMCE.getInstanceById('postExtendedText').getBody().innerHTML = loadBackupPostFromCookie( postExtendedTextCookieName );
+ }
+ else
+ {
+ $('postText').value = loadBackupPostFromCookie( postTextCookieName );
+ $('postExtendedText').value = loadBackupPostFromCookie( postExtendedTextCookieName );
+ }
+
+ $('autoSaveMessage').innerHTML = '';
+ Element.hide($('autoSaveMessage'));
+}
+
+function eraseAutoSave()
+{
+ deleteBackupPostFromCookie();
+
+ $('autoSaveMessage').innerHTML = '';
+ Element.hide($('autoSaveMessage'));
+}
+
+function beforeUnload()
+{
+ postNotSaved = getCookie( postNotSavedCookieName );
+ if ( postNotSaved ) {
+ restartAutoSave();
+ return msgBeforeUnloadMessage.replace( "restart-seconds", backupInterval * 2 );
+ }
+}
\ No newline at end of file
Modified: plog/trunk/js/ui/plogui.js
===================================================================
--- plog/trunk/js/ui/plogui.js 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/js/ui/plogui.js 2006-05-11 17:58:34 UTC (rev 3385)
@@ -1,76 +1,4 @@
/**
- * functions for auto save
- */
-
-function initialAutoSave()
-{
- LTpostNotSaved = getCookie( 'LTpostNotSaved' );
- if ( LTpostNotSaved == 1 )
- {
- $('autoSaveMessage').innerHTML = msgAutoSaveMessage;
- Element.show($('autoSaveMessage'));
- }
- else
- {
- deleteCookie( 'LTpostNotSaved' );
- deleteCookie( 'LTpostText' );
- deleteCookie( 'LTpostExtendedText' );
- }
-}
-
-function restoreAutoSave()
-{
- if( htmlAreaEnabled )
- {
- tinyMCE.getInstanceById('postText').getBody().innerHTML = decodeURIComponent( getCookie( 'LTpostText' ) );
- tinyMCE.getInstanceById('postExtendedText').getBody().innerHTML = decodeURIComponent( getCookie( 'LTpostExtendedText' ) );
- }
- else
- {
- $('postText').value = decodeURIComponent( getCookie( 'LTpostText' ) );
- $('postExtendedText').value = decodeURIComponent( getCookie( 'LTpostExtendedText' ) );
- }
-
- $('autoSaveMessage').innerHTML = '';
- Element.hide($('autoSaveMessage'));
-}
-
-function eraseAutoSave()
-{
- deleteCookie( 'LTpostNotSaved' );
- deleteCookie( 'LTpostText' );
- deleteCookie( 'LTpostExtendedText' );
-
- $('autoSaveMessage').innerHTML = '';
- Element.hide($('autoSaveMessage'));
-}
-
-function tinyMCEOnChangeEvent( inst ) {
- // set the postNotSaved ture
- setCookie( 'LTpostNotSaved', 1, 7);
-
- // postText
- if( inst.editorId == 'mce_editor_0' )
- cookieId = 'LTpostText';
- else
- cookieId = 'LTpostExtendedText';
-
- setCookie( cookieId, encodeURIComponent( inst.getBody().innerHTML ), 7 );
-}
-
-function plogEditorOnChangeEvent( editor ) {
- setCookie( 'LTpostNotSaved', 1, 7);
-
- // postText
- if( editor.id == 'postText' )
- cookieId = 'LTpostText';
- else
- cookieId = 'LTpostExtendedText';
-
- setCookie( cookieId, encodeURIComponent( editor.value ), 7 );
-}
-
-/**
* when adding a new form, checks that there is at least one category selected
*/
function submitNewPost(form)
Modified: plog/trunk/locale/locale_en_UK.php
===================================================================
--- plog/trunk/locale/locale_en_UK.php 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/locale/locale_en_UK.php 2006-05-11 17:58:34 UTC (rev 3385)
@@ -1026,4 +1026,6 @@
$messages['warning_autosave_message'] = '<img src="imgs/admin/icon_warning-16.png" alt="Error" class="InfoIcon"/><p class="ErrorText">You seem to have left here without saving your post. If so, you may <a href="#" onclick="restoreAutoSave();">click here to restore it</a> or <a href="#" onclick="eraseAutoSave();">delete it</a>.</p>';
+$messages['before_unload_message'] = 'It seems you have unsaved post, are you sure you want to leave?\n (If you don\'t press the "Ok" button in restart-seconds seconds, the auto save mechanisim will restart again.)';
+
?>
\ No newline at end of file
Modified: plog/trunk/locale/locale_zh_TW.php
===================================================================
--- plog/trunk/locale/locale_zh_TW.php 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/locale/locale_zh_TW.php 2006-05-11 17:58:34 UTC (rev 3385)
@@ -1026,4 +1026,6 @@
$messages['warning_autosave_message'] = '<img src="imgs/admin/icon_warning-16.png" alt="Error" class="InfoIcon"/><p class="ErrorText">你好像有之前尚未存檔的文章。如果你還想繼續編輯，你可以 <a href="#" onclick="restoreAutoSave();">取回未存檔文章繼續編輯</a> 或是 <a href="#" onclick="eraseAutoSave();">把他刪除</a> 。</p>';
+$messages['before_unload_message'] = '你有尚未儲存的變更，你確定要離開嗎？\n如果你未於 restart-seconds 秒內按下『確定』，自動備份機制將重新啟動。';
+
?>
\ No newline at end of file
Modified: plog/trunk/templates/admin/header.template
===================================================================
--- plog/trunk/templates/admin/header.template 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/templates/admin/header.template 2006-05-11 17:58:34 UTC (rev 3385)
@@ -28,7 +28,8 @@
}
{/literal}
// base url where we can find the admin.php script
- var plogAdminBaseUrl = "{$url->getBaseUrl(false)}/admin.php";
+ var plogAdminBaseUrl = "{$url->getBaseUrl(false)}/admin.php";
+ var plogAdminBlogId = "{$blog->getId()}";
</script>
<script type="text/javascript" src="js/prototype/prototype.js"></script>
<script type="text/javascript" src="js/rico/rico.js"></script>
Modified: plog/trunk/templates/admin/newpost.template
===================================================================
--- plog/trunk/templates/admin/newpost.template 2006-05-11 14:45:23 UTC (rev 3384)
+++ plog/trunk/templates/admin/newpost.template 2006-05-11 17:58:34 UTC (rev 3385)
@@ -6,6 +6,7 @@
{assign var=htmlarea value=$blogsettings->getValue("htmlarea_enabled")}
<script type="text/javascript" src="js/ui/plogui.js"></script>
<script type="text/javascript" src="js/calendar/datetimepicker.js"></script>
+ <script type="text/javascript" src="js/ui/autosave.js"></script>
{if $htmlarea}
<script type="text/javascript" src="js/tinymce/tiny_mce_gzip.php"></script>
<script type="text/javascript" src="js/tinymce/tiny_mce-plog.js"></script>
@@ -26,6 +27,7 @@
var msgShowOptionPanel = "{$locale->tr("show_option_panel")}";
var msgHideOptionPanel = "{$locale->tr("hide_option_panel")}";
var msgAutoSaveMessage = '{$locale->tr("warning_autosave_message")}';
+ var msgBeforeUnloadMessage = '{$locale->tr("before_unload_message")}';
var todayDay = '{$today->getDay()}';
var todayMonth = '{$today->getMonth()}';
@@ -62,7 +64,7 @@
<span class="required">*</span>
<div class="formHelp">{$locale->tr("text_help")}</div>
{if !$htmlarea}<script type="text/javascript">var ed1 = new pLogEditor('postText','ed1');</script>{/if}
- <textarea {if $htmlarea==1}rows="20"{else}rows="15"{/if} id="postText" name="postText" style="width:100%" {if !$htmlarea}onChange="javascript:plogEditorOnChangeEvent(this);"{/if}>{$postText}</textarea>
+ <textarea {if $htmlarea==1}rows="20"{else}rows="15"{/if} id="postText" name="postText" style="width:100%">{$postText}</textarea>
{include file="$admintemplatepath/validate.template" field=postText message=$locale->tr("error_missing_post_text")}
</div>
@@ -70,7 +72,7 @@
<label for="postExtendedText">{$locale->tr("extended_text")}</label>
<div class="formHelp">{$locale->tr("extended_text_help")}</div>
{if !$htmlarea}<script type="text/javascript">var ed2 = new pLogEditor('postExtendedText','ed2');</script>{/if}
- <textarea {if $htmlarea}rows="25"{else}rows="20"{/if} id="postExtendedText" name="postExtendedText" style="width:100%" {if !$htmlarea}onChange="javascript:plogEditorOnChangeEvent(this);"{/if}>{$postExtendedText}</textarea>
+ <textarea {if $htmlarea}rows="25"{else}rows="20"{/if} id="postExtendedText" name="postExtendedText" style="width:100%">{$postExtendedText}</textarea>
</div>
<div class="field">
@@ -188,7 +190,7 @@
<input type="button" name="saveDraftAndContinue" value="{$locale->tr("save_draft_and_continue")}" onclick="javascript:saveDraftArticleAjax()" />
{/if}
<input type="button" name="previewPost" value="{$locale->tr("preview")}" onclick="javascript:previewNewPost()" />
- <input type="submit" name="addPost" value="{$locale->tr("add_post")}"/>
+ <input type="button" name="addPost" value="{$locale->tr("add_post")}" onclick="window.onbeforeunload = null; this.form.submit();"/>
<input type="hidden" name="isDraft" value="" />
<input type="hidden" name="op" value="addPost"/>
<input type="hidden" name="postId" id="postId" value="{$postId}" />
@@ -196,6 +198,7 @@
</form>
<script type="text/javascript">
initialAutoSave();
+ startAutoSave();
</script>
{include file="$admintemplatepath/footernavigation.template"}
{include file="$admintemplatepath/footer.template"}
\ No newline at end of file
More information about the pLog-svn
mailing list