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
mihaisucan · Jun 26, 2010 · 1fad5c2 · 1fad5c2
1 parent d074652
commit 1fad5c2
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 71 deletions.
diff --git a/CHANGES b/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:
 ===========
 

diff --git a/README b/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:
 

diff --git a/src/includes/lib.js b/src/includes/lib.js
@@ -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;
   }
 

diff --git a/src/interfaces/default/script.js b/src/interfaces/default/script.js
@@ -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;
   };