Release v1.0.0

README.md

@@ -39,19 +39,12 @@ $(document).ready(function() {
 ###Example
 http://davidjbradshaw.com/imagemap-resizer/example/
 
-### A note on IE8 and below
+### IE8 Support
 
-To use this library with old IE you will need to also load the included polyfil and ensure IE is running in "[Standards mode](http://en.wikipedia.org/wiki/Internet_Explorer_8#Standards_mode)". This can be done by adding the following to your HTML head section.
-
-```html
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<!--[if lte IE 8]>
-	<script type="text/javascript" src="js/ie8.polyfil.min.js"></script>
-<![endif]-->
-```
+Version 1.0 of this project is optimised for IE9 and above. If you still require support for IE8 then please use [version 0.6.x](https://github.com/davidjbradshaw/image-map-resizer/tree/v0.6.x). Both versions are functionally equivalent.
 
 ### License
-Copyright &copy; 2014 [David J. Bradshaw](https://github.com/davidjbradshaw).
+Copyright &copy; 2014-15 [David J. Bradshaw](https://github.com/davidjbradshaw).
 Licensed under the [MIT license](http://opensource.org/licenses/MIT).
 
 [![NPM](https://nodei.co/npm/image-map-resizer.png)](https://nodei.co/npm/image-map-resizer/)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "image-map-resizer",
-  "version": "0.5.4",
+  "version": "1.0.0",
   "homepage": "https://github.com/davidjbradshaw/image-map-resizer",
   "authors": [
     "David J. Bradshaw <[email protected]>"

gruntfile.js

@@ -53,13 +53,6 @@ module.exports = function(grunt) {
         },
         src: ['js/imageMapResizer.js'],
         dest: 'js/imageMapResizer.min.js',
-      },
-      ie8: {
-        options:{
-          sourceMapName: 'js/ie8.polyfil.map'
-        },
-        src: ['js/ie8.polyfil.js'],
-        dest: 'js/ie8.polyfil.min.js',
       }
     },
 
@@ -115,7 +108,7 @@ module.exports = function(grunt) {
   grunt.registerTask('notest',  ['jshint','uglify']);
   grunt.registerTask('test',    ['jshint','qunit']);
 
-  grunt.registerTask('postBump',['bump-commit','shell']);
+  grunt.registerTask('postBump',['uglify','bump-commit','shell']);
   grunt.registerTask('patch',   ['default','bump-only:patch','postBump']);
   grunt.registerTask('minor',   ['default','bump-only:minor','postBump']);
   grunt.registerTask('major',   ['default','bump-only:major','postBump']);

imageMapResizer.jquery.json

@@ -11,7 +11,7 @@
 		"resize",
 		"design"
 	],
-	"version": "0.5.4",
+	"version": "1.0.0",
 	"author": {
 		"name": "David J. Bradshaw",
 		"email": "[email protected]"

js/imageMapResizer.js

@@ -10,84 +10,72 @@
     function scaleImageMap(){
 
         function resizeMap() {
-            function resizeAreaTag(cachedAreaCoords){
-                function scaleCoord(e){
-                    return e * scallingFactor[(1===(isWidth = 1-isWidth) ? 'width' : 'height')];
+            function resizeAreaTag(cachedAreaCoords,idx){
+                function scale(coord){
+                    var dimension = ( 1 === (isWidth = 1-isWidth) ? 'width' : 'height' );
+                    return Math.floor(Number(coord) * scallingFactor[dimension]);
                 }
 
                 var isWidth = 0;
 
-                return cachedAreaCoords.split(',').map(Number).map(scaleCoord).map(Math.floor).join(',');
+                areas[idx].coords = cachedAreaCoords.split(',').map(scale).join(',');
             }
 
             var scallingFactor = {
-                width  : displayedImage.width  / sourceImage.width,
-                height : displayedImage.height / sourceImage.height
+                width  : image.width  / image.naturalWidth,
+                height : image.height / image.naturalHeight
             };
 
-            for (var i=0; i < areasLen ; i++) {
-                areas[i].coords = resizeAreaTag(cachedAreaCoordsArray[i]);
-            }
+            cachedAreaCoordsArray.forEach(resizeAreaTag);
         }
 
-        function start(){
-            var
-                displayedWidth  = null,
-                displayedHeight = null;
-
-            //WebKit asyncs image loading, so we have to catch the load event.
-            sourceImage.onload = function sourceImageOnLoadF(){
-                displayedWidth = displayedImage.width;
-                displayedHeight = displayedImage.height;
-
-                if ((displayedWidth !== sourceImage.width) || (displayedHeight !== sourceImage.height)) {
-                    resizeMap();
-                }
-            };
-
-            //IE11 can late load this image, so make sure we have the correct sizes (#10)
-            displayedImage.onload = function() {
-                if (null !== displayedWidth && displayedImage.width !== displayedWidth) {
-                    resizeMap();
-                }
-            };
+        function getCoords(e){
+            //Normalize coord-string to csv format without any space chars
+            return e.coords.replace(/ *, */g,',').replace(/ +/g,',');
+        }
 
-            //Make copy of image, so we can get the actual size measurements
-            sourceImage.src = displayedImage.src;
+        function debounce() {
+            clearTimeout(timer);
+            timer = setTimeout(resizeMap, 250);
         }
 
-        function listenForResize(){
-            function debounce() {
-                clearTimeout(timer);
-                timer = setTimeout(resizeMap, 250);
+        function start(){
+            if ((image.width !== image.naturalWidth) || (image.height !== image.naturalHeight)) {
+                resizeMap();
             }
-            if (window.addEventListener) { window.addEventListener('resize', debounce, false); }
-            else if (window.attachEvent) { window.attachEvent('onresize', debounce); }
         }
 
-        function listenForFocus(){
-            if (window.addEventListener) { window.addEventListener('focus', resizeMap, false); }
-            else if (window.attachEvent) { window.attachEvent('onfocus', resizeMap); }
+        function attach(){
+            map._resize = resizeMap; //Bind resize method to HTML map element
+            image.addEventListener('onload',  resizeMap, false); //Detect late image loads in IE11
+            window.addEventListener('focus',  resizeMap, false); //Cope with window being resized whilst on another tab
+            window.addEventListener('resize', debounce,  false);
+            document.addEventListener('fullscreenchange', resizeMap,  false);
         }
 
-        function getCoords(e){
-            // normalize coord-string to csv format without any space chars
-            return e.coords.replace(/ *, */g,',').replace(/ +/g,',');
+        function beenHere(){
+            return ('function' === typeof map._resize);
+        }
+
+        function setup(){
+            areas                 = map.getElementsByTagName('area');
+            cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords);
+            image                 = document.querySelector('img[usemap="#'+map.name+'"]');
+
         }
 
         var
             /*jshint validthis:true */
-            map                   = this,
-            areas                 = map.getElementsByTagName('area'),
-            areasLen              = areas.length,
-            cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords),
-            displayedImage        = document.querySelector('img[usemap="#'+map.name+'"]'),
-            sourceImage           = new Image(),
-            timer                 = null;
-
-        start();
-        listenForResize();
-        listenForFocus();
+            map   = this,
+            areas = null, cachedAreaCoordsArray = null, image = null, timer = null;
+
+        if (!beenHere()){
+            setup();
+            attach();
+            start();
+        } else {
+            map._resize(); //Already setup, so just resize map
+        }
     }
 
 
@@ -113,16 +101,15 @@
                     init(target);
                     break;
                 default:
-                    throw new TypeError('Unexpected data type ('+typeof(target)+').');
+                    throw new TypeError('Unexpected data type ('+typeof target+').');
             }
         };
     }
 
-
     if (typeof define === 'function' && define.amd) {
         define([],factory);
-    } else if (typeof exports === 'object') { //Node for browserfy
-        module.exports = factory();
+    } else if (typeof module === 'object' && typeof module.exports === 'object'){
+        module.exports = factory(); //Node for browserfy
     } else {
         window.imageMapResize = factory();
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-map-resizer",
-  "version": "0.5.4",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/davidjbradshaw/image-map-resizer.git"
@@ -17,6 +17,7 @@
     "url": "https://github.com/davidjbradshaw/image-map-resizer.git"
   },
   "github": "https://github.com/davidjbradshaw/image-map-resizer",
+  "main": "js/imageMapResizer.min.js",
   "dependencies": {},
   "devDependencies": {
     "grunt": "0.4.1",