Permalink
Browse files

Implemented support for Microsoft Internet Explorer 9, technical prev…

…iew 3.

- Made the code to not rely on the existence of the global Node object.
- Made the code to not rely on the expression evaluation:
  if (window.getComputedStyle)
  because MSIE 9 reports that as false (window.getComputedStyle is null), even
  if it does actually implement support for the method. This is similar to how
  document.all is hidden in Opera.
- Made the code to not rely on the successful execution of elem.focus(). MSIE 9
shows an error when code tries to focus an invisible element.
- MSIE 9 does not properly parse the user interface markup when it is loaded
using the XMLHttpRequest. This broke the PaintWeb initialization when it loaded
from the source code, without being packaged. I worked around the issue by using
the xhr.responseText, instead of the responseXML result.
- Fixed a bug in the pwlib.isSameHost() method which prevented it from working
properly in MSIE 9.

Known issues:
- MSIE 9 does not yet implement the globalCompositeOperation property, which
makes the Color mixer visualisation look weird.
- Changing elem.style.width/height causes the Canvas element to be cleared,
  which is entirely wrong. This breaks:
  - The PaintWeb.imageCrop() method that is used by the image resize handle (the
      bottom right corner). I was able to fix this by reordering the code.
  - The PaintWeb.updateCanvasScaling() method. This issue cannot be worked
  around and it causes PaintWeb to display a transparent image on load.
  - The PaintWeb.imageLoad() method. This issue cannot be worked around - at the
  moment - and it causes for any image loaded by PaintWeb to disappear ... erm,
  in the same method execution. Effectively, you cannot see the image you loaded
  into PaintWeb.
  - The PaintWeb.imageZoomTo() method. This issue cannot be worked around. Image
  zoom relies on having the Canvas element scaled up with CSS.

All in all, thank you Microsoft! :)

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40155
  • Loading branch information...
mihai.sucan@gmail.com
mihai.sucan@gmail.com committed Jun 26, 2010
1 parent d074652 commit 1fad5c2b4d770436cc86e4c8450e4e67969e838f
Showing with 175 additions and 71 deletions.
  1. +37 −0 CHANGES
  2. +4 −6 README
  3. +25 −5 src/includes/lib.js
  4. +39 −16 src/interfaces/default/script.js
  5. +70 −44 src/paintweb.js
View
37 CHANGES
@@ -1,3 +1,40 @@
+2010-06-26:
+===========
+
+- Implemented support for Microsoft Internet Explorer 9, technical preview 3.
+- Made the code to not rely on the existence of the global Node object.
+- Made the code to not rely on the expression evaluation:
+ if (window.getComputedStyle)
+ because MSIE 9 reports that as false (window.getComputedStyle is null), even
+ if it does actually implement support for the method. This is similar to how
+ document.all is hidden in Opera.
+- Made the code to not rely on the successful execution of elem.focus(). MSIE 9
+shows an error when code tries to focus an invisible element.
+- MSIE 9 does not properly parse the user interface markup when it is loaded
+using the XMLHttpRequest. This broke the PaintWeb initialization when it loaded
+from the source code, without being packaged. I worked around the issue by using
+the xhr.responseText, instead of the responseXML result.
+- Fixed a bug in the pwlib.isSameHost() method which prevented it from working
+properly in MSIE 9.
+
+Known issues:
+- MSIE 9 does not yet implement the globalCompositeOperation property, which
+makes the Color mixer visualisation look weird.
+- Changing elem.style.width/height causes the Canvas element to be cleared,
+ which is entirely wrong. This breaks:
+ - The PaintWeb.imageCrop() method that is used by the image resize handle (the
+ bottom right corner). I was able to fix this by reordering the code.
+ - The PaintWeb.updateCanvasScaling() method. This issue cannot be worked
+ around and it causes PaintWeb to display a transparent image on load.
+ - The PaintWeb.imageLoad() method. This issue cannot be worked around - at the
+ moment - and it causes for any image loaded by PaintWeb to disappear ... erm,
+ in the same method execution. Effectively, you cannot see the image you loaded
+ into PaintWeb.
+ - The PaintWeb.imageZoomTo() method. This issue cannot be worked around. Image
+ zoom relies on having the Canvas element scaled up with CSS.
+
+All in all, thank you Microsoft!
+
2009-11-16:
===========
View
10 README
@@ -1,7 +1,7 @@
-Copyright (C) 2008, 2009 Mihai Şucan
+Copyright (C) 2008, 2009, 2010 Mihai Şucan
$URL: http://code.google.com/p/paintweb $
-$Date: 2009-10-10 20:37:32 +0300 $
+$Date: 2010-06-26 20:43:47 +0300 $
PaintWeb is a Web application which allows users to draw inside the Web browser
making use of new Web technologies.
@@ -13,12 +13,10 @@ PaintWeb build.
Requirements:
A Web browser which implements the HTML 5 <canvas> 2D context API.
- Known to work are: Opera 9.5+, Firefox 3+, Safari 3.1+, Konqueror 4.1+.
+ Known to work are: Opera 9.5+, Firefox 3+, Safari 3.1+, Chrome 3+, Konqueror
+ 4.1+, Microsoft Internet Explorer 9+.
Each Web browser has its minor quirks.
- Internet Explorer does not support Canvas. This application does not work in
- this Web browser.
-
Usage:
View
@@ -1,8 +1,23 @@
/*
- * © 2009 ROBO Design
- * http://www.robodesign.ro
+ * Copyright (C) 2008, 2009, 2010 Mihai Şucan
*
- * $Date: 2009-08-13 18:47:20 +0300 $
+ * This file is part of PaintWeb.
+ *
+ * PaintWeb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * PaintWeb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
+ *
+ * $URL: http://code.google.com/p/paintweb $
+ * $Date: 2010-06-26 20:35:34 +0300 $
*/
/**
@@ -233,7 +248,8 @@ pwlib.xhrLoad = function (url, handler, method, send, headers) {
* <p>Note that data URIs always return true.
*
* @param {String} url The URL you want to check.
- * @param {String} host The host you want in the URL.
+ * @param {String} host The host you want in the URL. The host name can include
+ * the port definition as well.
*
* @returns {Boolean} True if the <var>url</var> points to a resource from the
* <var>host</var> given, or false otherwise.
@@ -260,7 +276,11 @@ pwlib.isSameHost = function (url, host) {
urlHost = urlHost.substr(0, pos);
}
- if (urlHost !== host) {
+ // remove default port (80)
+ urlHost = urlHost.replace(/:80$/, '');
+ host = host.replace(/:80$/, '');
+
+ if (!urlHost || !host || urlHost !== host) {
return false;
}
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2008, 2009 Mihai Şucan
+ * Copyright (C) 2008, 2009, 2010 Mihai Şucan
*
* This file is part of PaintWeb.
*
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-11-07 18:13:21 +0200 $
+ * $Date: 2010-06-26 21:47:30 +0300 $
*/
/**
@@ -207,6 +207,7 @@ pwlib.gui = function (app) {
var placeholder = config.guiPlaceholder,
placeholderStyle = placeholder.style;
+
placeholderStyle.display = 'none';
placeholderStyle.height = '1px';
placeholderStyle.overflow = 'hidden';
@@ -403,7 +404,7 @@ pwlib.gui = function (app) {
this.initImportDoc = function (markup) {
// I could use some XPath here, but for the sake of compatibility I don't.
var destElem = config.guiPlaceholder,
- elType = Node.ELEMENT_NODE,
+ elType = app.ELEMENT_NODE,
elem, root, nodes, n, tag, isInput;
if (typeof markup === 'string') {
@@ -423,7 +424,7 @@ pwlib.gui = function (app) {
// PaintWeb instance.
for (var i = 0; i < n; i++) {
elem = nodes[i];
- if (elem.nodeType !== elType) {
+ if (elem.nodeType !== elType || !elem.tagName) {
continue;
}
tag = elem.tagName.toLowerCase();
@@ -447,6 +448,7 @@ pwlib.gui = function (app) {
// Import all the nodes.
n = root.childNodes.length;
+
for (var i = 0; i < n; i++) {
destElem.appendChild(doc.importNode(root.childNodes[i], true));
}
@@ -499,7 +501,7 @@ pwlib.gui = function (app) {
*/
this.initParseMarkup = function () {
var nodes = config.guiPlaceholder.getElementsByTagName('*'),
- elType = Node.ELEMENT_NODE,
+ elType = app.ELEMENT_NODE,
elem, tag, isInput, tool, tabPanel, floatingPanel, cmd, id, cfgAttr,
colorInput;
@@ -672,7 +674,7 @@ pwlib.gui = function (app) {
var elem, anchor, val,
className = ' ' + this.classPrefix + 'configActive';
nodes = input.getElementsByTagName('*'),
- elType = Node.ELEMENT_NODE;
+ elType = app.ELEMENT_NODE;
for (var i = 0; i < nodes.length; i++) {
elem = nodes[i];
@@ -965,7 +967,9 @@ pwlib.gui = function (app) {
placeholderStyle.position = 'relative';
}
- placeholder.focus();
+ try {
+ placeholder.focus();
+ } catch (err) { }
app.events.dispatch(new appEvent.guiShow());
};
@@ -1028,7 +1032,9 @@ pwlib.gui = function (app) {
this.viewportResizeEnd = function (ev) {
_self.elems.viewport.style.width = '';
_self.resizeTo(ev.width + 'px', ev.height + 'px');
- config.guiPlaceholder.focus();
+ try {
+ config.guiPlaceholder.focus();
+ } catch (err) { }
};
/**
@@ -1144,7 +1150,9 @@ pwlib.gui = function (app) {
lineWidthLabel = null;
tabActive.className += ' ' + _self.classPrefix + 'toolActive';
- tabActive.firstChild.focus();
+ try {
+ tabActive.firstChild.focus();
+ } catch (err) { }
if ((ev.id + 'Active') in lang.status) {
_self.statusShow(ev.id + 'Active');
@@ -1344,7 +1352,10 @@ pwlib.gui = function (app) {
app.commands[cmd].call(this, ev);
}
ev.preventDefault();
- this.focus();
+
+ try {
+ this.focus();
+ } catch (err) { }
};
/**
@@ -1807,7 +1818,9 @@ pwlib.gui = function (app) {
placeholder.className += ' ' + className;
}
- placeholder.focus();
+ try {
+ placeholder.focus();
+ } catch (err) { }
app.events.dispatch(new appEvent.guiShow());
};
@@ -2137,7 +2150,9 @@ pwlib.guiFloatingPanel = function (gui, container) {
*/
function ev_minimize (ev) {
ev.preventDefault();
- this.focus();
+ try {
+ this.focus();
+ } catch (err) { }
var classMinimized = ' ' + gui.classPrefix + 'floatingPanel_minimized';
@@ -2183,7 +2198,9 @@ pwlib.guiFloatingPanel = function (gui, container) {
function ev_close (ev) {
ev.preventDefault();
_self.hide();
- guiPlaceholder.focus();
+ try {
+ guiPlaceholder.focus();
+ } catch (err) { }
};
/**
@@ -2268,7 +2285,10 @@ pwlib.guiFloatingPanel = function (gui, container) {
doc.removeEventListener('mousemove', ev_mousemove, false);
doc.removeEventListener('mouseup', ev_mouseup, false);
- guiPlaceholder.focus();
+ try {
+ guiPlaceholder.focus();
+ } catch (err) { }
+
_self.events.dispatch(new appEvent.guiFloatingPanelStateChange(_self.state));
};
@@ -2776,7 +2796,7 @@ pwlib.guiTabPanel = function (gui, panel) {
tabButton = null,
tabDefault = _self.container.getAttribute('data-pwTabDefault') || null,
childNodes = _self.container.childNodes,
- type = Node.ELEMENT_NODE,
+ type = gui.app.ELEMENT_NODE,
elem = null,
tabId = null,
anchor = null;
@@ -2889,9 +2909,12 @@ pwlib.guiTabPanel = function (gui, panel) {
tabButton = this.tabs[tabId].button;
tabButton.className = gui.classPrefix + 'tabActive';
tabButton.style.display = ''; // make sure the tab is not hidden
- tabButton.firstChild.focus();
this.tabId = tabId;
+ try {
+ tabButton.firstChild.focus();
+ } catch (err) { }
+
return true;
};
Oops, something went wrong.

0 comments on commit 1fad5c2

Please sign in to comment.