| Index: trunk/extensions/SVGZoom/SVGZoom.js |
| — | — | @@ -3,19 +3,12 @@ |
| 4 | 4 | // whether to display debugging output |
| 5 | 5 | var svgDebug = true; |
| 6 | 6 | |
| 7 | | -// whether we are locally debugging (i.e. the page is downloaded to our |
| 8 | | -// hard drive and served from a local server to ease development) |
| 9 | | -var localDebug = true; |
| 10 | | - |
| 11 | 7 | // the full URL to where svg.js is located |
| 12 | | -// Note: Update this before putting on production |
| 13 | | -var svgSrcURL; |
| 14 | | -if (localDebug) { |
| 15 | | - svgSrcURL = wgScriptPath + '/extensions/SVGZoom/src/svg.js'; |
| 16 | | -} else { |
| 17 | | - svgSrcURL = wgScriptPath + '/extensions/SVGZoom/src/svg.js'; |
| 18 | | -} |
| | 8 | +var svgSrcURL = wgScriptPath + '/extensions/SVGZoom/src/svg.js'; |
| 19 | 9 | |
| | 10 | +// the full path to where our SVG Web source files are located |
| | 11 | +var svgDataPath = wgScriptPath + '/extensions/SVGZoom/src'; |
| | 12 | + |
| 20 | 13 | // whether the pan and zoom UI is initialized |
| 21 | 14 | var svgUIReady = false; |
| 22 | 15 | |
| — | — | @@ -42,33 +35,17 @@ |
| 43 | 36 | |
| 44 | 37 | // the location of our images |
| 45 | 38 | var imageBundle; |
| 46 | | -if (localDebug) { |
| 47 | | - // for local debugging |
| 48 | | - var imageRoot = '/images/'; |
| 49 | | - imageBundle = { |
| 50 | | - 'searchtool': imageRoot + 'searchtool.png', |
| 51 | | - 'controls-north-mini': imageRoot + 'north-mini.png', |
| 52 | | - 'controls-west-mini': imageRoot + 'west-mini.png', |
| 53 | | - 'controls-east-mini': imageRoot + 'east-mini.png', |
| 54 | | - 'controls-south-mini': imageRoot + 'south-mini.png', |
| 55 | | - 'controls-zoom-plus-mini': imageRoot + 'zoom-plus-mini.png', |
| 56 | | - 'controls-zoom-world-mini': imageRoot + 'zoom-world-mini.png', |
| 57 | | - 'controls-zoom-minus-mini': imageRoot + 'zoom-minus-mini.png' |
| 58 | | - }; |
| 59 | | -} else { |
| 60 | | - // Note: update this before putting on production |
| 61 | | - var imageRoot = wgScriptPath + '/extensions/SVGZoom/images/'; |
| 62 | | - imageBundle = { |
| 63 | | - 'searchtool': imageRoot + 'searchtool.png', |
| 64 | | - 'controls-north-mini': imageRoot + 'north-mini.png', |
| 65 | | - 'controls-west-mini': imageRoot + 'west-mini.png', |
| 66 | | - 'controls-east-mini': imageRoot + 'east-mini.png', |
| 67 | | - 'controls-south-mini': imageRoot + 'south-mini.png', |
| 68 | | - 'controls-zoom-plus-mini': imageRoot + 'zoom-plus-mini.png', |
| 69 | | - 'controls-zoom-world-mini': imageRoot + 'zoom-world-mini.png', |
| 70 | | - 'controls-zoom-minus-mini': imageRoot + 'zoom-minus-mini.png' |
| 71 | | - }; |
| 72 | | -} |
| | 39 | +var imageRoot = wgScriptPath + '/extensions/SVGZoom/images/'; |
| | 40 | +imageBundle = { |
| | 41 | + 'searchtool': imageRoot + 'searchtool.png', |
| | 42 | + 'controls-north-mini': imageRoot + 'north-mini.png', |
| | 43 | + 'controls-west-mini': imageRoot + 'west-mini.png', |
| | 44 | + 'controls-east-mini': imageRoot + 'east-mini.png', |
| | 45 | + 'controls-south-mini': imageRoot + 'south-mini.png', |
| | 46 | + 'controls-zoom-plus-mini': imageRoot + 'zoom-plus-mini.png', |
| | 47 | + 'controls-zoom-world-mini': imageRoot + 'zoom-world-mini.png', |
| | 48 | + 'controls-zoom-minus-mini': imageRoot + 'zoom-minus-mini.png' |
| | 49 | +}; |
| 73 | 50 | |
| 74 | 51 | // determines if we are at a Wikimedia Commons detail page for an SVG file |
| 75 | 52 | function isSVGPage() { |
| — | — | @@ -96,7 +73,7 @@ |
| 97 | 74 | function insertSVGWeb() { |
| 98 | 75 | document.write('<script type="text/javascript" ' |
| 99 | 76 | + 'src="' + svgSrcURL + '" ' |
| 100 | | - + 'data-path="../../../../src" ' /* Note: remove before production */ |
| | 77 | + + 'data-path="' + svgDataPath + '" ' |
| 101 | 78 | + 'data-debug="' + svgDebug + '"></script>'); |
| 102 | 79 | } |
| 103 | 80 | |
| — | — | @@ -169,13 +146,15 @@ |
| 170 | 147 | } |
| 171 | 148 | |
| 172 | 149 | // reveal the SVG object and controls |
| 173 | | - svgObject.parentNode.style.zIndex = 1000; |
| 174 | 150 | svgControls.style.display = 'block'; |
| | 151 | + var container = svgObject.parentNode; |
| | 152 | + container.style.zIndex = 1000; |
| | 153 | + container.style.top = '0px'; |
| | 154 | + container.style.left = '0px'; |
| 175 | 155 | |
| 176 | 156 | // make the cursor a hand when over the SVG; not all browsers support |
| 177 | 157 | // this property yet |
| 178 | 158 | svgRoot.setAttribute('cursor', 'pointer'); |
| 179 | | - // TODO: Get hand cursor showing up in SVG Web's Flash renderer |
| 180 | 159 | |
| 181 | 160 | // add drag listeners on the SVG root |
| 182 | 161 | svgRoot.addEventListener('mousedown', mouseDown, false); |
| — | — | @@ -191,7 +170,7 @@ |
| 192 | 171 | if (hasAnnotation()) { |
| 193 | 172 | thumbnail = thumbnail.childNodes[0].childNodes[0]; |
| 194 | 173 | } |
| 195 | | - |
| | 174 | + |
| 196 | 175 | // create the SVG OBJECT that will replace our thumbnail container |
| 197 | 176 | var obj = document.createElement('object', true); |
| 198 | 177 | obj.setAttribute('type', 'image/svg+xml'); |
| — | — | @@ -234,21 +213,14 @@ |
| 235 | 214 | // reset our absolutely positioned elements to be relative to our parent |
| 236 | 215 | // so we have correct coordinates |
| 237 | 216 | thumbnail.style.position = 'relative'; |
| 238 | | - // position object behind the PNG image; do it in a DIV to avoid any |
| 239 | | - // strange style + OBJECT interactions |
| | 217 | + // position object behind the PNG image and move it off screen; do it in |
| | 218 | + // a DIV to avoid any strange style + OBJECT interactions |
| 240 | 219 | var container = document.createElement('div'); |
| 241 | 220 | container.id = 'SVGZoom.container'; |
| 242 | 221 | container.style.zIndex = -1000; |
| 243 | 222 | container.style.position = 'absolute'; |
| 244 | | - // FIXME: This is a hack; figure out why the Flash version of Commons-logo.svg |
| 245 | | - // is off by one 1 pixel on x and y |
| 246 | | - if (!hasAnnotation() && svgweb.getHandlerType() == 'flash') { |
| 247 | | - container.style.top = '-1px'; |
| 248 | | - container.style.left = '-1px'; |
| 249 | | - } else { |
| 250 | | - container.style.top = '0px'; |
| 251 | | - container.style.left = '0px'; |
| 252 | | - } |
| | 223 | + container.style.top = '-1000px'; |
| | 224 | + container.style.left = '-1000px'; |
| 253 | 225 | if (thumbnail.lastChild.nodeType == 1 |
| 254 | 226 | && thumbnail.lastChild.nodeName.toLowerCase() == 'br') { |
| 255 | 227 | thumbnail.insertBefore(container, thumbnail.lastChild); |