From 9df823863a7c711f48b33459f234480773713e86 Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Wed, 25 Aug 2010 15:10:43 +0000 Subject: [PATCH] Made icons work in IE9 (with a few minor bugs) git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1680 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/images/svg_edit_icons.svg | 4 +- editor/svg-editor.js | 2 + editor/svgcanvas.js | 13 ++-- editor/svgicons/jquery.svgicons.js | 108 +++++++++++++++++++++++------ 4 files changed, 96 insertions(+), 31 deletions(-) diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg index 78e72f24..2b1a3780 100644 --- a/editor/images/svg_edit_icons.svg +++ b/editor/images/svg_edit_icons.svg @@ -733,8 +733,8 @@ - - T + + T T diff --git a/editor/svg-editor.js b/editor/svg-editor.js index ca158ecf..5d04f147 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -11,6 +11,8 @@ */ (function() { + // TODO: Find out what causes bugs in jQuery animate for IE9 + if($.browser.msie) $.fx.off = true; if(!window.svgEditor) window.svgEditor = function($) { var svgCanvas; diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index fe6dd3a0..02df0354 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -403,13 +403,13 @@ var Utils = this.Utils = function() { var out; try{ - var dXML = ($.browser.msie)?new ActiveXObject("Microsoft.XMLDOM"):new DOMParser(); + var dXML = (window.DOMParser)?new DOMParser():new ActiveXObject("Microsoft.XMLDOM"); dXML.async = false; } catch(e){ throw new Error("XML Parser could not be instantiated"); }; try{ - if($.browser.msie) out = (dXML.loadXML(sXML))?dXML:false; + if(dXML.loadXML) out = (dXML.loadXML(sXML))?dXML:false; else out = dXML.parseFromString(sXML, "text/xml"); } catch(e){ throw new Error("Error parsing XML string"); }; @@ -422,7 +422,6 @@ var Utils = this.Utils = function() { // TODO: declare the variables and set them as null, then move this setup stuff to // an initialization function - probably just use clear() - console.log('r'); var canvas = this, // Namespace constants @@ -4315,10 +4314,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) { } start_x *= current_zoom; start_y *= current_zoom; - console.log('p',[evt.pageX, evt.pageY]); - console.log('c',[evt.clientX, evt.clientY]); - console.log('o',[evt.offsetX, evt.offsetY]); - console.log('s',[start_x, start_y]); +// console.log('p',[evt.pageX, evt.pageY]); +// console.log('c',[evt.clientX, evt.clientY]); +// console.log('o',[evt.offsetX, evt.offsetY]); +// console.log('s',[start_x, start_y]); assignAttributes(rubberBox, { 'x': start_x, diff --git a/editor/svgicons/jquery.svgicons.js b/editor/svgicons/jquery.svgicons.js index 85d19dff..f19198cf 100644 --- a/editor/svgicons/jquery.svgicons.js +++ b/editor/svgicons/jquery.svgicons.js @@ -128,6 +128,38 @@ $(function() { (function($) { + function makeSVG(el) { + // manually create a copy of the element + var new_el = document.createElementNS(el.namespaceURI, el.nodeName); + $.each(el.attributes, function(i, attr) { + var ns = attr.namespaceURI; + if(ns) { + new_el.setAttributeNS(ns, attr.nodeName, attr.nodeValue); + } else { + new_el.setAttribute(attr.nodeName, attr.nodeValue); + } + if(attr.nodeName == 'transform') { + console.log('val1:', attr.nodeValue); + console.log('val2:', new_el.getAttribute('transform')); + } + }); + + // now create copies of all children + $.each(el.childNodes, function(i, child) { + switch(child.nodeType) { + case 1: // element node + new_el.appendChild(makeSVG(child)); + break; + case 3: // text node + new_el.textContent = child.nodeValue; + break; + default: + break; + } + }); + return new_el; + } + var svg_icons = {}; $.svgIcons = function(file, opts) { @@ -168,7 +200,19 @@ $(function() { }); } else { if(err.responseXML) { + // Is there a non-ActiveX solution in IE9? svgdoc = err.responseXML; + + if(!svgdoc.childNodes.length) { + if(window.ActiveXObject) { + svgdoc = new ActiveXObject("Microsoft.XMLDOM"); + svgdoc.loadXML(err.responseText); + } else { + $(useFallback); + } + } else { + $(useFallback); + } $(function() { getIcons('ajax'); }); @@ -220,20 +264,29 @@ $(function() { } } }); - elems = $(svgdoc.firstChild).children(); //.getElementsByTagName('foreignContent'); - var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; - testImg = $(new Image()).attr({ - src: testSrc, - width: 0, - height: 0 - }).appendTo('body') - .load(function () { - // Safari 4 crashes, Opera and Chrome don't - makeIcons(!isSafari); - }).error(function () { - makeIcons(); - }); + elems = $(svgdoc.firstChild).children(); //.getElementsByTagName('foreignContent'); + + if(!opts.no_img) { + + var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; + + testImg = $(new Image()).attr({ + src: testSrc, + width: 0, + height: 0 + }).appendTo('body') + .load(function () { + // Safari 4 crashes, Opera and Chrome don't + makeIcons(!isSafari); + }).error(function () { + makeIcons(); + }); + } else { + setTimeout(function() { + if(!icons_made) makeIcons(); + },500); + } } function makeIcons(toImage, fallback) { @@ -290,9 +343,12 @@ $(function() { var id = elem.getAttribute('id'); if(id == 'svg_eof') return; holder = $('#' + id); - - var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0]; - var svgroot = svgdoc.createElementNS(svgns, "svg"); + if(elem.getElementsByTagNameNS) { + var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0]; + } else { + var svg = elem.getElementsByTagName('svg')[0]; + } + var svgroot = document.createElementNS(svgns, "svg"); svgroot.setAttributeNS(svgns, 'viewBox', [0,0,icon_w,icon_h].join(' ')); // Make flexible by converting width/height to viewBox @@ -318,7 +374,13 @@ $(function() { // With cloning, causes issue in Opera/Win/Non-EN if(!isOpera) svg = svg.cloneNode(true); - svgroot.appendChild(svg); + // TODO: Figure out why makeSVG is necessary for IE9 + try { + svgroot.appendChild(svg); + } catch(e) { + // For IE9 + svgroot.appendChild(makeSVG(svg)); + } if(toImage) { // Without cloning, Safari will crash @@ -339,8 +401,12 @@ $(function() { $.each(opts.placement, function(sel, id) { if(!svg_icons[id]) return; $(sel).each(function(i) { - var copy = svg_icons[id].clone(); - if(i > 0 && !toImage) copy = fixIDs(copy, i, true); + // TODO: Figure out why makeSVG is necessary for IE9 + try { + var copy = svg_icons[id].clone(); + } catch(e) { + var copy = makeSVG(svg_icons[id][0]); + } setIcon($(this), copy, id); }) }); @@ -348,11 +414,9 @@ $(function() { if(!fallback) { if(toImage) temp_holder.remove(); if(data_el) data_el.remove(); - testImg.remove(); + if(testImg) testImg.remove(); } - if(opts.resize) $.resizeSvgIcons(opts.resize); - icons_made = true; if(opts.callback) opts.callback(svg_icons);