Permalink
Browse files

The Moodle 2.0 image script now uses a regular expression to parse th…

…e data URL. The TinyMCE plugin now uses more of the TinyMCE API.

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40114
  • Loading branch information...
1 parent 9106c12 commit 12334cdf28491aac90277954ef7fab6dce0145e9 mihai.sucan committed Aug 19, 2009
Showing with 81 additions and 79 deletions.
  1. +10 −0 CHANGES
  2. +17 −26 ext/moodle/imagesave20.php
  3. +50 −48 ext/tinymce-plugin/paintweb/editor_plugin_src.js
  4. +4 −5 ext/tinymce-plugin/paintweb/js/newimage.js
View
10 CHANGES
@@ -1,3 +1,13 @@
+2009-08-19:
+===========
+
+- Switched to using a regular expression to parse the data URL, inside the
+moodle/imagesave20.php script as suggested by Dan Poltawski. Thanks! It's
+cleaner and nicer now.
+
+- Some code adjustments in the TinyMCE plugin - using more of the TinyMCE API,
+ where appropriate.
+
2009-08-13:
===========
View
@@ -18,7 +18,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-12 17:24:43 +0300 $
+ * $Date: 2009-08-19 19:06:45 +0300 $
*/
// This script performs asynchronous image save in PaintWeb. This is used by the
@@ -108,43 +108,33 @@ function paintweb_send_result($url, $urlnew, $successful, $errormessage=null) {
// A data URL starts like this:
// data:[<MIME-type>][;charset="<encoding>"][;base64],<data>
+// See details at:
+// http://en.wikipedia.org/wiki/Data_URI_scheme
-// Here we find the comma delimiter.
-$comma = strpos($imgdataurl, ',');
-if (!$comma) {
- paintweb_send_result($imgurl, $imgurlnew, false,
- get_string('moodleServer:malformedDataUrl', 'paintweb'));
-}
-
-$imginfo = substr($imgdataurl, 0, $comma);
-if (empty($imginfo) || !isset($imgdataurl{($comma+2)})) {
- paintweb_send_result($imgurl, $imgurlnew, false,
- get_string('moodleServer:malformedDataUrl', 'paintweb'));
-}
+$mimetype = 'text/plain';
+$base64data = '';
-// Split by ':' to find the 'data' prefix and the rest of the info.
-$imginfo = explode(':', $imginfo);
+$regex = '/^data:([^;,]+);base64,(.+)$/';
-// The array must have exactly two elements and the second element must not be
-// empty.
-if (count($imginfo) !== 2 || $imginfo[0] !== 'data' || empty($imginfo[1])) {
+$matches = array();
+if (preg_match($regex, $imgdataurl, $matches)) {
+ $mimetype = $matches[1];
+ $base64data = $matches[2];
+ $imgdataurl = null;
+} else {
paintweb_send_result($imgurl, $imgurlnew, false,
get_string('moodleServer:malformedDataUrl', 'paintweb'));
}
-// The MIME type must be given and it must be base64-encoded.
-$imginfo = explode(';', $imginfo[1]);
-
-if (count($imginfo) < 2 || !array_key_exists($imginfo[0], $imgallowedtypes) ||
- ($imginfo[1] !== 'base64' && $imginfo[2] !== 'base64')) {
+if (empty($base64data) || !isset($imgallowedtypes[$mimetype])) {
paintweb_send_result($imgurl, $imgurlnew, false,
get_string('moodleServer:malformedDataUrl', 'paintweb'));
}
-$imgdata = base64_decode(substr($imgdataurl, $comma + 1));
-$imgdataurl = null;
+$imgdata = base64_decode($base64data);
+$base64data = null;
-$filename = 'paintweb_' . sha1($imgdata) . '.' . $imgallowedtypes[$imginfo[0]];
+$filename = 'paintweb_' . sha1($imgdata) . '.' . $imgallowedtypes[$mimetype];
// Save the file using the new File API.
@@ -164,6 +154,7 @@ function paintweb_send_result($url, $urlnew, $successful, $errormessage=null) {
} catch (Exception $err) {
paintweb_send_result($imgurl, $imgurlnew, false, $err->getMessage());
}
+$imgdata = null;
$binfo = $fbrowser->get_file_info($context, $file->get_filearea(),
$file->get_itemid(), $file->get_filepath(), $file->get_filename());
@@ -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:15:20 +0300 $
+ * $Date: 2009-08-19 20:02:09 +0300 $
*/
/**
@@ -100,10 +100,10 @@ if (!window.XMLHttpRequest || !window.getComputedStyle ||
// in Webkit (Chrome/Safari). This is a problem because PaintWeb cannot save the
// image once such data URL is loaded.
var dataURLfilterNeeded = (function () {
- var ua = navigator.userAgent.toLowerCase(),
- isOpera = window.opera || /\b(opera|presto)\b/.test(ua),
+ var ua = navigator.userAgent.toLowerCase(),
+ isOpera = window.opera || /\b(opera|presto)\b/.test(ua),
isWebkit = !isOpera && /\b(applewebkit|webkit)\b/.test(ua),
- isGecko = !isOpera && !isWebkit && /\bgecko\b/.test(ua);
+ isGecko = !isOpera && !isWebkit && /\bgecko\b/.test(ua);
if (isWebkit) {
return true;
@@ -132,7 +132,7 @@ function paintwebLoad () {
}
var config = targetEditor.getParam('paintweb_config'),
- src = config.tinymce.paintwebFolder + 'paintweb.js';
+ src = config.tinymce.paintwebFolder + 'paintweb.js';
tinymce.ScriptLoader.load(src, paintwebLoaded);
};
@@ -152,12 +152,12 @@ function paintwebLoaded () {
var config = targetEditor.getParam('paintweb_config'),
textarea = targetEditor.getElement();
pNode = targetContainer.parentNode,
- pwContainer = document.createElement('div');
+ pwContainer = tinymce.DOM.create('div');
pNode.insertBefore(pwContainer, textarea.nextSibling);
if (!PaintWeb.baseFolder) {
- PaintWeb.baseFolder = config.tinymce.paintwebFolder;
+ PaintWeb.baseFolder = config.tinymce.paintwebFolder;
}
config.imageLoad = targetImage;
@@ -201,8 +201,8 @@ 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',
@@ -320,7 +320,7 @@ function pluginBarResetContent () {
* @param {pwlib.appEvent.viewportSizeChange} ev The application event object.
*/
function paintwebViewportSizeChange (ev) {
- pluginBar.style.width = ev.width;
+ tinymce.DOM.setStyle(pluginBar, 'width', ev.width);
};
/**
@@ -354,7 +354,7 @@ function paintwebEditStart () {
};
var dataURLfilterLoaded = function () {
- targetImage.removeEventListener('load', dataURLfilterLoaded, false);
+ tinymce.dom.Event.remove(targetImage, 'load', dataURLfilterLoaded);
imgIsDataURL = false;
pwStart();
};
@@ -396,7 +396,7 @@ function paintwebEditStart () {
}
imgNewUrl = targetImage.src;
- targetImage.addEventListener('load', dataURLfilterLoaded, false);
+ tinymce.dom.Event.add(targetImage, 'load', dataURLfilterLoaded);
targetEditor.dom.setAttrib(targetImage, 'src', result.urlNew);
}
});
@@ -427,12 +427,11 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
return;
}
- var canvas = document.createElement('canvas'),
+ var canvas = tinymce.DOM.create('canvas', {
+ 'width': width,
+ 'height': height}),
context = canvas.getContext('2d');
- canvas.width = width;
- canvas.height = height;
-
if (bgrColor) {
context.fillStyle = bgrColor;
context.fillRect(0, 0, width, height);
@@ -448,10 +447,10 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
}
if (alt) {
- elem.setAttribute('alt', alt);
+ targetEditor.dom.setAttrib(elem, 'alt', alt);
}
if (title) {
- elem.setAttribute('title', title);
+ targetEditor.dom.setAttrib(elem, 'title', title);
}
elem.src = canvas.toDataURL();
elem.setAttribute('mce_src', elem.src);
@@ -471,9 +470,9 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
* @param [ev] Event object.
*/
function paintwebShow (ev) {
- var rect = targetEditor.dom.getRect(targetEditor.getContentAreaContainer());
+ var rect = tinymce.DOM.getRect(targetEditor.getContentAreaContainer());
- targetContainer.style.display = 'none';
+ tinymce.DOM.setStyle(targetContainer, 'display', 'none');
// Give PaintWeb access to the TinyMCE editor instance.
paintwebConfig.tinymceEditor = targetEditor;
@@ -725,12 +724,11 @@ tinymce.create('tinymce.plugins.paintweb', {
ed.onRemove.add(this.edPreProcess);
ed.onInit.add(overlayButtonCleanup);
- overlayButton = document.createElement('input');
- overlayButton.type = 'button';
- overlayButton.className = 'paintwebOverlayButton';
- overlayButton.value = ed.getLang('paintweb.overlayButton', 'Edit');
-
- overlayButton.style.position = 'absolute';
+ overlayButton = tinymce.DOM.create('input', {
+ 'type': 'button',
+ 'class': 'paintweb_tinymce_overlayButton',
+ 'style': 'position:absolute',
+ 'value': ed.getLang('paintweb.overlayButton', 'Edit')});
}
// Handle the dblclick events for image elements, if the user wants it.
@@ -742,28 +740,30 @@ tinymce.create('tinymce.plugins.paintweb', {
// This bar shows the image file name being edited, and provides two buttons
// for image save and for cancelling any image edits.
if (config.tinymce.pluginBar) {
- pluginBar = document.createElement('div');
+ pluginBar = tinymce.DOM.create('div', {
+ 'class': 'paintweb_tinymce_status',
+ 'style': 'display:none'});
- var saveBtn = document.createElement('input'),
- cancelBtn = document.createElement('input'),
- textSpan = document.createElement('span');
+ var saveBtn = tinymce.DOM.create('input', {
+ 'type': 'button',
+ 'class': 'paintweb_tinymce_save',
+ 'title': ed.getLang('paintweb.imageSaveButtonTitle',
+ 'Save the image and return to TinyMCE.'),
+ 'value': ed.getLang('paintweb.imageSaveButton', 'Save')});
- saveBtn.type = 'button';
- saveBtn.className = 'paintweb_tinymce_save';
- saveBtn.title = ed.getLang('paintweb.imageSaveButtonTitle',
- 'Save the image and return to TinyMCE.');
- saveBtn.value = ed.getLang('paintweb.imageSaveButton', 'Save');
saveBtn.addEventListener('click', pluginSaveButton, false);
- cancelBtn.type = 'button';
- cancelBtn.className = 'paintweb_tinymce_cancel';
- cancelBtn.title = ed.getLang('paintweb.cancelEditButtonTitle',
- 'Cancel image edits and return to TinyMCE.');
- cancelBtn.value = ed.getLang('paintweb.cancelEditButton', 'Cancel');
+ var cancelBtn = tinymce.DOM.create('input', {
+ 'type': 'button',
+ 'class': 'paintweb_tinymce_cancel',
+ 'title': ed.getLang('paintweb.cancelEditButtonTitle',
+ 'Cancel image edits and return to TinyMCE.'),
+ 'value': ed.getLang('paintweb.cancelEditButton', 'Cancel')});
+
cancelBtn.addEventListener('click', pluginCancelButton, false);
- pluginBar.className = 'paintweb_tinymce_status';
- pluginBar.style.display = 'none';
+ var textSpan = tinymce.DOM.create('span');
+
pluginBar.appendChild(textSpan);
pluginBar.appendChild(saveBtn);
pluginBar.appendChild(cancelBtn);
@@ -856,10 +856,12 @@ tinymce.create('tinymce.plugins.paintweb', {
// Add the overlay button.
overlayButton._targetImage = n;
- overlayButton.style.top = (n.offsetTop + offsetTop) + 'px';
- overlayButton.style.left = (n.offsetLeft + offsetLeft) + 'px';
- overlayButton.value = ed.getLang('paintweb.overlayButton', 'Edit');
+ ed.dom.setStyles(overlayButton, {
+ 'top': (n.offsetTop + offsetTop) + 'px',
+ 'left': (n.offsetLeft + offsetLeft) + 'px'});
+
+ overlayButton.value = ed.getLang('paintweb.overlayButton', 'Edit');
pNode.insertBefore(overlayButton, sibling);
} else if (overlayButton._targetImage) {
overlayButton._targetImage = null;
@@ -932,10 +934,10 @@ tinymce.create('tinymce.plugins.paintweb', {
getInfo: function () {
return {
longname: 'PaintWeb - online painting application',
- author: 'Mihai Şucan',
+ author: 'Mihai Şucan',
authorurl: 'http://www.robodesign.ro/mihai',
- infourl: 'http://code.google.com/p/paintweb',
- version: '0.9'
+ infourl: 'http://code.google.com/p/paintweb',
+ version: '0.9'
};
}
});
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-07-30 21:08:19 +0300 $
+ * $Date: 2009-08-19 20:09:54 +0300 $
*/
/**
@@ -37,7 +37,7 @@ tinyMCEPopup.onInit.add(function() {
altText = document.getElementById('altText'),
btnCancel = document.getElementById('cancel');
- newImageForm.addEventListener('submit', function (ev) {
+ newImageForm.onsubmit = function (ev) {
var fn = tinyMCEPopup.getWindowArg('newImageFn');
if (fn) {
@@ -46,7 +46,7 @@ tinyMCEPopup.onInit.add(function() {
}
tinyMCEPopup.close();
- }, false);
+ };
imgBgrColor.parentNode.lastChild.innerHTML
= ' ' + getColorPickerHTML('imgBgrColor_pick',
@@ -57,8 +57,7 @@ tinyMCEPopup.onInit.add(function() {
updateColor('imgBgrColor_pick', 'imgBgrColor');
- btnCancel.addEventListener('click', function () { tinyMCEPopup.close(); },
- false);
+ btnCancel.onclick = function () { tinyMCEPopup.close(); };
});
// vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:

0 comments on commit 12334cd

Please sign in to comment.