Permalink
Browse files

the PaintWeb GUI is now resizable. the TinyMCE plugin now syncs the s…

…ize of PaintWeb viewport with the size of the editor iframe.

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40111
  • Loading branch information...
1 parent 8b86fec commit c8199bb86986dac8ce30375eac2a3d0bd0bc5e79 mihai.sucan committed Aug 13, 2009
View
@@ -1,3 +1,26 @@
+2009-08-13:
+===========
+
+- Implemented support for dynamic PaintWeb GUI resize. Developers now have
+a method for resizing the GUI: PaintWeb.gui.resizeTo(width, height).
+
+- Added a new application event: viewportSizeChange.
+
+- Users can easily resize the PaintWeb GUI with a new resize handle added in the
+status bar.
+
+- The TinyMCE plugin has been updated to synchronize the size of the editor
+viewport with the image editor viewport of PaintWeb. So, now when you start
+editing an image from TinyMCE, the PaintWeb instance will be of a similar size
+(GUI differences account for the size differences). Nonetheless, strictly
+speaking of the PaintWeb image viewport, it always has the same dimensions as
+the TinyMCE editor iframe (where the article is displayed).
+
+- Added a new application event: guiResizeMouseMove. This is used by the new
+viewport resize handle.
+
+- Updated English strings and configuration properties.
+
2009-08-12:
===========
@@ -1,5 +1,5 @@
{
- // $Date: 2009-07-28 20:03:39 +0300 $
+ // $Date: 2009-08-13 20:22:44 +0300 $
/**
* The list of available languages. This associated language IDs to their
@@ -76,24 +76,26 @@
"guiScript": "script.js",
/**
- * Viewport width.
+ * The image viewport width. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default -1
+ * @type String
+ * @default "100%"
*/
- "viewportWidth": -1,
+ "viewportWidth": "100%",
/**
- * Viewport height.
+ * The image viewport height. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default 400
+ * @type String
+ * @default "400px"
*/
- "viewportHeight": 400,
+ "viewportHeight": "400px",
/**
* Image save quality for the JPEG format.
@@ -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-12 20:06:23 +0300 $
+ * $Date: 2009-08-13 20:15:20 +0300 $
*/
/**
@@ -201,8 +201,14 @@ function paintwebInitialized (ev) {
}
pwlib = window.pwlib;
- paintwebInstance.events.add('imageSave', paintwebSave);
- paintwebInstance.events.add('imageSaveResult', paintwebSaveResult);
+ paintwebInstance.events.add('imageSave', paintwebSave);
+ paintwebInstance.events.add('imageSaveResult', paintwebSaveResult);
+
+ if (pluginBar) {
+ paintwebInstance.events.add('viewportSizeChange',
+ paintwebViewportSizeChange);
+ }
+
paintwebShow(ev);
};
@@ -307,6 +313,17 @@ function pluginBarResetContent () {
};
/**
+ * The <code>viewportSizeChange</code> PaintWeb application event handler. This
+ * synchronises the size of the TinyMCE plugin bar with that of the PaintWeb
+ * GUI.
+ *
+ * @param {pwlib.appEvent.viewportSizeChange} ev The application event object.
+ */
+function paintwebViewportSizeChange (ev) {
+ pluginBar.style.width = ev.width;
+};
+
+/**
* Start PaintWeb. This function performs the actual PaintWeb invocation.
*
* @returns {Boolean} True PaintWeb is about to start, or false otherwise.
@@ -329,8 +346,6 @@ function paintwebEditStart () {
}
if (paintwebInstance) {
- // Give PaintWeb access to the TinyMCE editor instance.
- paintwebConfig.tinymceEditor = targetEditor;
paintwebInstance.imageLoad(targetImage);
paintwebShow();
} else {
@@ -453,24 +468,30 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
* Show PaintWeb on-screen. This function hides the current TinyMCE editor
* instance and shows up the PaintWeb instance.
*
- * @param {mixed} [ev] Event object.
+ * @param [ev] Event object.
*/
function paintwebShow (ev) {
+ var rect = targetEditor.dom.getRect(targetEditor.getContentAreaContainer());
+
+ targetContainer.style.display = 'none';
+
+ // Give PaintWeb access to the TinyMCE editor instance.
+ paintwebConfig.tinymceEditor = targetEditor;
if (!ev || ev.type !== 'appInit') {
paintwebInstance.gui.show();
}
- targetContainer.style.display = 'none';
-
- if (!pluginBar) {
- return;
+ if (rect && rect.w && rect.h) {
+ paintwebInstance.gui.resizeTo(rect.w + 'px', rect.h + 'px');
}
- pluginBarResetContent();
+ if (pluginBar) {
+ pluginBarResetContent();
- var placeholder = paintwebConfig.guiPlaceholder;
- if (!pluginBar.parentNode) {
- placeholder.parentNode.insertBefore(pluginBar, placeholder);
+ var placeholder = paintwebConfig.guiPlaceholder;
+ if (!pluginBar.parentNode) {
+ placeholder.parentNode.insertBefore(pluginBar, placeholder);
+ }
}
};
@@ -1,5 +1,5 @@
{
- // $Date: 2009-07-28 20:04:15 +0300 $
+ // $Date: 2009-08-13 19:23:55 +0300 $
// TODO: try jsdoc-toolkit on this json (!)
/**
@@ -73,24 +73,26 @@
"guiScript": "script.js",
/**
- * Viewport width.
+ * The image viewport width. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default -1
+ * @type String
+ * @default "100%"
*/
- "viewportWidth": -1,
+ "viewportWidth": "100%",
/**
- * Viewport height.
+ * The image viewport height. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default 400
+ * @type String
+ * @default "400px"
*/
- "viewportHeight": 400,
+ "viewportHeight": "400px",
/**
* Image save quality for the JPEG format.
View
@@ -2,7 +2,7 @@
* © 2009 ROBO Design
* http://www.robodesign.ro
*
- * $Date: 2009-08-04 19:34:48 +0300 $
+ * $Date: 2009-08-13 18:47:20 +0300 $
*/
/**
@@ -328,6 +328,10 @@ pwlib.appEvent = function (type, cancelable) {
this.stopPropagation = function () {
this.propagationStopped_ = true;
};
+
+ this.toString = function () {
+ return '[pwlib.appEvent.' + this.type + ']';
+ };
};
/**
@@ -796,6 +800,34 @@ pwlib.appEvent.canvasSizeChange = function (width, height, scale) {
};
/**
+ * @class Image viewport size change event. This event is not cancelable.
+ *
+ * @augments pwlib.appEvent
+ *
+ * @param {String} width The new viewport width. This must be a CSS length
+ * value, like "100px", "100%" or "100em".
+ *
+ * @param {String} height The new viewport height. This must be a CSS length
+ * value, like "100px", "100%" or "100em".
+ */
+pwlib.appEvent.viewportSizeChange = function (width, height) {
+ /**
+ * New viewport width.
+ * @type String
+ */
+ this.width = width;
+
+ /**
+ * New viewport height.
+ * @type String
+ */
+ this.height = height;
+
+ pwlib.appEvent.call(this, 'viewportSizeChange');
+};
+
+
+/**
* @class Image zoom event. This event is cancelable.
*
* @augments pwlib.appEvent
@@ -1,5 +1,5 @@
<div xmlns="http://www.w3.org/1999/xhtml">
- <!-- $Date: 2009-07-01 15:17:39 +0300 $ -->
+ <!-- $Date: 2009-08-13 19:34:24 +0300 $ -->
<h1 class="paintweb_appTitle">PaintWeb</h1>
<!-- All elements with data-pwTabPanel become interactive tabbed panels which
@@ -226,7 +226,7 @@
<div id="viewport">
<div id="canvasContainer">
</div>
- <div id="canvasResizer">Resize the image Canvas</div>
+ <div id="canvasResizer">Resize the image Canvas.</div>
</div> <!-- .paintweb_viewport -->
<div class="paintweb_statusbar">
@@ -238,6 +238,7 @@
</p>
<p id="statusMessage">Status</p>
+ <p id="viewportResizer">Resize the image viewport.</p>
</div> <!-- .paintweb_statusbar -->
<!-- Elements with data-pwFloatingPanel become interactive GUI components.
Oops, something went wrong.

0 comments on commit c8199bb

Please sign in to comment.