Permalink
Browse files

TinyMCE plugin improvements.

- Added a new option to the TinyMCE plugin: syncViewportSize. This allows you to
enable/disable the PaintWeb image viewport size synchronization between TinyMCE
and PaintWeb.

- Now the TinyMCE plugin properly handles form submission while the user is
editing an image. If the image has changes, then form submission is cancelled.
The user is informed that the form submission is cancelled because the image
changes are not saved.

Thanks to Dan Poltawski for this suggestion!

- Added a new option to the TinyMCE plugin: onSubmitUnsaved. This allows you to
provide an event handler function which is invoked *only* when the user attempts
to perform form submission while editing an image which has unsaved changes.
Using this option you can provide custom user feedback for when the form
submission "fails" due to the aforementioned reasons. Your event handler is
passed three paramaters: the DOM event object (form submit), a reference to the
TinyMCE editor instance, and a reference to the PaintWeb instance.

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40115
  • Loading branch information...
1 parent 12334cd commit c3bd1fcc33a46c20f90b3884e1754f0b69187b50 mihai.sucan committed Aug 20, 2009
View
22 CHANGES
@@ -1,3 +1,25 @@
+2009-08-20:
+===========
+
+- Added a new option to the TinyMCE plugin: syncViewportSize. This allows you to
+enable/disable the PaintWeb image viewport size synchronization between TinyMCE
+and PaintWeb.
+
+- Now the TinyMCE plugin properly handles form submission while the user is
+editing an image. If the image has changes, then form submission is cancelled.
+The user is informed that the form submission is cancelled because the image
+changes are not saved.
+
+Thanks to Dan Poltawski for this suggestion!
+
+- Added a new option to the TinyMCE plugin: onSubmitUnsaved. This allows you to
+provide an event handler function which is invoked *only* when the user attempts
+to perform form submission while editing an image which has unsaved changes.
+Using this option you can provide custom user feedback for when the form
+submission "fails" due to the aforementioned reasons. Your event handler is
+passed three paramaters: the DOM event object (form submit), a reference to the
+TinyMCE editor instance, and a reference to the PaintWeb instance.
+
2009-08-19:
===========
View
@@ -6,7 +6,7 @@
<link rel="author" type="text/html" href="http://www.robodesign.ro"
title="Marius and Mihai Şucan, ROBO Design">
<!-- $URL: http://code.google.com/p/paintweb $
- $Date: 2009-07-21 21:20:11 +0300 $ -->
+ $Date: 2009-08-20 13:39:59 +0300 $ -->
<!-- This demo requires you to have TinyMCE. Please point to your TinyMCE
3 installation. -->
@@ -26,7 +26,8 @@
overlayButton: true,
contextMenuItem: true,
dblclickHandler: true,
- pluginBar: true
+ pluginBar: true,
+ syncViewportSize: true
}
},
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-19 20:02:09 +0300 $
+ * $Date: 2009-08-20 20:03:26 +0300 $
*/
/**
@@ -44,7 +44,7 @@ var paintwebInstance = null;
var pluginBar = null;
// The delay used for displaying temporary messages in the plugin bar.
-var pluginBarDelay = 5000; // 5 seconds
+var pluginBarDelay = 10000; // 10 seconds
// The timeout ID used for the plugin bar when a temporary message is displayed.
var pluginBarTimeout = null;
@@ -249,7 +249,12 @@ function paintwebSave (ev) {
paintwebInstance.events.dispatch(new pwlib.appEvent.imageSaveResult(true,
url, ev.dataURL));
- } else if (pluginBar && !pluginBarTimeout) {
+ } else if (pluginBar) {
+ if (pluginBarTimeout) {
+ clearTimeout(pluginBarTimeout);
+ pluginBarTimeout = null;
+ }
+
pluginBar.firstChild.innerHTML
= targetEditor.getLang('paintweb.statusSavingImage', 'Saving image...');
}
@@ -278,6 +283,10 @@ function paintwebSaveResult (ev) {
'Image save failed!');
}
+ if (pluginBarTimeout) {
+ clearTimeout(pluginBarTimeout);
+ }
+
pluginBarTimeout = setTimeout(pluginBarResetContent, pluginBarDelay);
}
@@ -301,15 +310,15 @@ function paintwebSaveResult (ev) {
* Reset the text content of the plugin bar.
*/
function pluginBarResetContent () {
- if (!pluginBar || !targetImage) {
+ if (!pluginBar) {
return;
}
pluginBarTimeout = null;
pluginBar.firstChild.innerHTML
= targetEditor.getLang('paintweb.statusImageEditing',
- 'You are editing {file}.');
+ 'You are editing an image from TinyMCE.');
};
/**
@@ -470,7 +479,10 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
* @param [ev] Event object.
*/
function paintwebShow (ev) {
- var rect = tinymce.DOM.getRect(targetEditor.getContentAreaContainer());
+ var rect = null;
+ if (paintwebConfig.tinymce.syncViewportSize) {
+ rect = tinymce.DOM.getRect(targetEditor.getContentAreaContainer());
+ }
tinymce.DOM.setStyle(targetContainer, 'display', 'none');
@@ -716,6 +728,11 @@ tinymce.create('tinymce.plugins.paintweb', {
ed.plugins.contextmenu.onContextMenu.add(this.pluginContextMenu);
}
+ // Listen for the form submission event. This is needed when the user is
+ // inside PaintWeb, editing an image. The user is warned that image changed
+ // and it's not saved, and the form submission event is cancelled.
+ ed.onSubmit.add(this.edSubmit);
+
// Create the overlay button element if the configuration allows so.
if (config.tinymce.overlayButton) {
ed.onClick.add(this.edClick);
@@ -907,6 +924,56 @@ tinymce.create('tinymce.plugins.paintweb', {
},
/**
+ * The <code>submit</code> event handler for the form associated to the
+ * textarea of the current TinyMCE editor instance. This method checks if the
+ * current PaintWeb instance is open and if the user has made changes to the
+ * image. If yes, then the form submission is cancelled and the user is warned
+ * about losing unsaved changes.
+ *
+ * @param {tinymce.Editor} ed The TinyMCE editor instance.
+ * @param {Event} ev The DOM Event object.
+ */
+ edSubmit: function (ed, ev) {
+ // Check if PaintWeb is active.
+ if (!targetImage || !paintwebInstance) {
+ return;
+ }
+
+ // Check if the image has been modified.
+ if (!paintwebInstance.image.modified) {
+ // If not, then hide PaintWeb so we can update the target image.
+ paintwebHide();
+ // Save the textarea content once again.
+ ed.save();
+ return;
+ }
+
+ // The image is not saved, thus we prevent form submission.
+ ev.preventDefault();
+
+ if (typeof paintwebConfig.tinymce.onSubmitUnsaved === 'function') {
+ paintwebConfig.tinymce.onSubmitUnsaved(ev, ed, paintwebInstance);
+
+ } else {
+ var str = ed.getLang('paintweb.submitUnsaved',
+ 'The image is not saved! You cannot submit the form. Please save ' +
+ 'the image changes, or cancel image editing, then try again.');
+ pluginBar.firstChild.innerHTML = str;
+
+ if (pluginBarTimeout) {
+ clearTimeout(pluginBarTimeout);
+ }
+
+ pluginBarTimeout = setTimeout(pluginBarResetContent, pluginBarDelay);
+
+ // tabIndex is needed so we can focus and scroll to the plugin bar.
+ pluginBar.tabIndex = 5;
+ pluginBar.focus();
+ pluginBar.tabIndex = -1;
+ }
+ },
+
+ /**
* This is the <code>contextmenu</code> event handler for the ContextMenu
* plugin provided in the default TinyMCE installation.
*
@@ -11,6 +11,7 @@ tinyMCE.addI18n('en.paintweb',{
imageSaveButtonTitle: 'Save the image and return to TinyMCE.',
cancelButton: 'Cancel',
cancelButtonTitle: 'Cancel image edits and return to TinyMCE.',
+ submitUnsaved: 'The image is not saved! You cannot submit the form. Please save the image changes, or cancel image editing, then try again.',
dlg_delta_width: 0,
dlg_delta_height: 0
});
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-13 20:19:48 +0300 $
+ * $Date: 2009-08-20 19:16:32 +0300 $
*/
.paintweb_placeholder {
@@ -1040,16 +1040,20 @@
.paintweb_tinymce_status {
background: #ffffc5;
- border: 1px solid #9e9e9e;
border-bottom: 0;
+ border: 1px solid #9e9e9e;
color: #000;
display: block !important;
- font: 14px/2.3em sans-serif;
+ font: 14px sans-serif;
min-width: 535px;
position: relative
}
-.paintweb_tinymce_status span { padding: 0 6px }
+.paintweb_tinymce_status span {
+ display: block;
+ margin-right: 9em;
+ padding: 8px
+}
.paintweb_tinymce_save, .paintweb_tinymce_cancel {
cursor: pointer;
@@ -1058,7 +1062,6 @@
}
.paintweb_tinymce_cancel { right: 5px }
-
.paintweb_tinymce_save { right: 6em }
/* vim:set fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: */
View
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-04 19:46:19 +0300 $
+ * $Date: 2009-08-20 17:51:19 +0300 $
*/
/**
@@ -169,7 +169,7 @@ function PaintWeb (win, doc) {
this.win = win;
/**
- * Holds image information: width and height.
+ * Holds image information: width, height, zoom and more.
*
* @type Object
*/
@@ -205,7 +205,15 @@ function PaintWeb (win, doc) {
* @type Number
* @default 1
*/
- canvasScale: 1
+ canvasScale: 1,
+
+ /**
+ * Tells if the current image has been modified since the initial load.
+ *
+ * @type Boolean
+ * @default false
+ */
+ modified: false
};
/**
@@ -1003,6 +1011,7 @@ function PaintWeb (win, doc) {
// The initial blank state of the image
this.historyAdd();
+ this.image.modified = false;
// The global keyboard events handler implements everything needed for
// switching between tools and for accessing any other functionality of the
@@ -1015,7 +1024,8 @@ function PaintWeb (win, doc) {
this.updateCanvasScaling();
this.win.addEventListener('resize', this.updateCanvasScaling, false);
- this.events.add('configChange', this.configChangeHandler);
+ this.events.add('configChange', this.configChangeHandler);
+ this.events.add('imageSaveResult', this.imageSaveResultHandler);
this.initialized = PaintWeb.INIT_DONE;
@@ -1889,6 +1899,8 @@ function PaintWeb (win, doc) {
}
history.pos = history.states.length;
+ this.image.modified = true;
+
this.events.dispatch(new appEvent.historyUpdate(history.pos, prevPos,
history.pos));
@@ -2453,6 +2465,7 @@ function PaintWeb (win, doc) {
}
this.historyAdd();
+ image.modified = false;
return result;
};
@@ -2590,6 +2603,23 @@ function PaintWeb (win, doc) {
};
/**
+ * The <code>imageSaveResult</code> application event handler. This method
+ * PaintWeb-related stuff: for example, the {@link PaintWeb.image.modified}
+ * flag is turned to false.
+ *
+ * @private
+ *
+ * @param {pwlib.appEvent.imageSaveResult} ev The application event object.
+ *
+ * @see {PaintWeb#imageSave} The method which allows you to save the image.
+ */
+ this.imageSaveResultHandler = function (ev) {
+ if (ev.successful) {
+ _self.image.modified = false;
+ }
+ };
+
+ /**
* Swap the fill and stroke styles. This is just like in Photoshop, if the
* user presses X, the fill/stroke colors are swapped.
*

0 comments on commit c3bd1fc

Please sign in to comment.