diff --git a/Gruntfile.js b/Gruntfile.js index e0ba636..0f82c14 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,8 +46,7 @@ module.exports = function( grunt ) { uglify: { dist: { files: { - "dist/respimg-inspector.min.js": [ "dist/respimg-inspector.js" ], - "dist/bookmarklet.js": [ "src/bookmarklet.js" ] + "dist/respimg-inspector.min.js": [ "dist/respimg-inspector.js" ] } }, options: { @@ -67,12 +66,21 @@ module.exports = function( grunt ) { files: [ { expand: true, flatten: true, - src: [ "dist/bookmarklet.js" ], + src: [ "src/bookmarklet.js" ], dest: "dist/" } ] } }, + // Bookmarklet wrapper definitions + bookmarklet_wrapper: { + dist: { + files: { + "dist/bookmarklet.js": [ "dist/bookmarklet.js" ] + } + } + }, + // Clean definitions clean: { dist: { @@ -124,12 +132,14 @@ module.exports = function( grunt ) { grunt.loadNpmTasks( "grunt-contrib-uglify" ); grunt.loadNpmTasks( "grunt-contrib-watch" ); grunt.loadNpmTasks( "grunt-replace" ); + grunt.loadNpmTasks( "grunt-bookmarklet-wrapper" ); grunt.registerTask( "build", [ "clean:dist", "concat", "uglify", "replace", + "bookmarklet_wrapper", "copy:chrome" ] ); diff --git a/README.md b/README.md index 0d34f48..89ffe6c 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,6 @@ Or install via npm: `npm install respimg-inspector` ```html - ``` By default, all document's nodes are processed except those: diff --git a/bower.json b/bower.json index 7b55556..bd7c8a0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "respimg-inspector", - "version": "0.2.3", + "version": "0.2.4", "homepage": "https://github.com/creative-area/respimg-inspector", "repository": { "type": "git", diff --git a/dist/bookmarklet.js b/dist/bookmarklet.js index 10cc255..8c724b6 100644 --- a/dist/bookmarklet.js +++ b/dist/bookmarklet.js @@ -1,9 +1 @@ -/* - * respimg-inspector - v0.2.3 - * A javascript plugin to check responsive images in the browser. - * https://www.npmjs.com/package/respimg-inspector - * - * Made by Florent Bourgeois - * Under MIT License - */ -!function(){var a=document.createElement("link");a.id="respimage-inspector-link",a.href="https://cdn.rawgit.com/creative-area/respimg-inspector/0.2.3/dist/respimg-inspector.css",document.head.appendChild(a);var b=document.createElement("script");b.id="respimage-inspector-script",b.src="https://cdn.rawgit.com/creative-area/respimg-inspector/0.2.3/dist/respimg-inspector.min.js",document.body.appendChild(b)}(); \ No newline at end of file +javascript:(function(){var%20link%20=%20document.createElement(%20%22link%22%20);%0Alink.id%20=%20%22respimage-inspector-link%22;%0Alink.href%20=%20%22https://cdn.rawgit.com/creative-area/respimg-inspector/0.2.4/dist/respimg-inspector.css%22;%0Adocument.head.appendChild(%20link%20);%0A%0Avar%20script%20=%20document.createElement(%20%22script%22%20);%0Ascript.id%20=%20%22respimage-inspector-script%22;%0Ascript.src%20=%20%22https://cdn.rawgit.com/creative-area/respimg-inspector/0.2.4/dist/respimg-inspector.min.js%22;%0Adocument.body.appendChild(%20script%20);%0A})(); \ No newline at end of file diff --git a/dist/chrome/respimg-inspector.js b/dist/chrome/respimg-inspector.js index bb4d0cb..aacffd9 100644 --- a/dist/chrome/respimg-inspector.js +++ b/dist/chrome/respimg-inspector.js @@ -1,5 +1,5 @@ /* - * respimg-inspector - v0.2.3 + * respimg-inspector - v0.2.4 * A javascript plugin to check responsive images in the browser. * https://www.npmjs.com/package/respimg-inspector * @@ -281,8 +281,6 @@ window.respImgInspector = respImgInspector; } - window.addEventListener( "load", function() { - respImgInspector.init(); - } ); + respImgInspector.init(); } )( window, document ); diff --git a/dist/respimg-inspector.js b/dist/respimg-inspector.js index bb4d0cb..aacffd9 100644 --- a/dist/respimg-inspector.js +++ b/dist/respimg-inspector.js @@ -1,5 +1,5 @@ /* - * respimg-inspector - v0.2.3 + * respimg-inspector - v0.2.4 * A javascript plugin to check responsive images in the browser. * https://www.npmjs.com/package/respimg-inspector * @@ -281,8 +281,6 @@ window.respImgInspector = respImgInspector; } - window.addEventListener( "load", function() { - respImgInspector.init(); - } ); + respImgInspector.init(); } )( window, document ); diff --git a/dist/respimg-inspector.min.js b/dist/respimg-inspector.min.js index db0fca5..371067a 100644 --- a/dist/respimg-inspector.min.js +++ b/dist/respimg-inspector.min.js @@ -1,9 +1,9 @@ /* - * respimg-inspector - v0.2.3 + * respimg-inspector - v0.2.4 * A javascript plugin to check responsive images in the browser. * https://www.npmjs.com/package/respimg-inspector * * Made by Florent Bourgeois * Under MIT License */ -!function(a,b,c){"use strict";var d,e={},f=!!(b.querySelector&&a.addEventListener&&a.MutationObserver&&a.Promise),g=!1,h=[],i=[],j=[],k={selectors:null,classNamespace:"respimg-inspector-"},l=["span","em","strong","i","b","big","small","tt","abbr","script","br","hr","sub","sup","button","input","label","select","textarea","samp","var","iframe","script","video","object","canvas","center","font","frame","frameset","noframe","noscript","option","strike","s","wbr","bdi","kbd","audio","map","area","track","embed","param","source","del","ins","acronym","applet","blink","dir","spacer","isindex","content","element","shadow","template","noembed","head","meta","link","title","style","html"],m=b.body,n=b.documentElement,o=function(a,b,c){if("[object Object]"===Object.prototype.toString.call(a))for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&b.call(c,a[d],d,a);else for(var e=0,f=a.length;f>e;e++)b.call(c,a[e],e,a)},p=function(a,b){var c,d={};for(c in a)Object.prototype.hasOwnProperty.call(a,c)&&(d[c]=a[c]);for(c in b)Object.prototype.hasOwnProperty.call(b,c)&&(d[c]=b[c]);return d},q=function(b,c,d){var e=d||a,f=function(){g||(g=!0,s.disconnect(),requestAnimationFrame(function(){e.dispatchEvent(new CustomEvent(c)),g=!1}))};e.addEventListener(b,f)},r=function(b,c){return a.getComputedStyle(b,null).getPropertyValue(c)},s=new MutationObserver(function(a){a.forEach(function(){u()})}),t=function(a){return new Promise(function(b,c){a.complete?b(a):(a.onload=function(){b(a)},a.onerror=function(){c()})})},u=function(){g=!0,C();var a=v(),c=b.querySelectorAll(a);o(c,function(a){var b=y(a);if(b){var c={el:a,img:b};"IMG"!==c.el.nodeName&&"cover"!==r(c.el,"background-size")||(h.push(c),i.push(b))}});var d=i.map(t);Promise.all(d).then(function(){o(h,function(a){var b=p(w(a.el),x(a.img));j.push(A(b)),s.observe(a.el,{attributes:!0})}),B(),s.observe(m,{childList:!0}),g=!1})},v=function(){if(d.selectors)return d.selectors;var a=l.map(function(a){return"not("+a+")"});return"*:"+a.join(":")},w=function(b){var c=b.getBoundingClientRect(),d=a.pageYOffset||n.scrollTop||m.scrollTop,e=a.pageXOffset||n.scrollLeft||m.scrollLeft,f=n.clientTop||m.clientTop||0,g=n.clientLeft||m.clientLeft||0;return{elTag:b.nodeName.toLowerCase(),elWidth:c.width,elHeight:c.height,elTop:Math.round(c.top+d-f),elBottom:Math.round(c.bottom+d-f),elLeft:Math.round(c.left+e-g),elRight:Math.round(c.right+e-g)}},x=function(a){return{imgWidth:a.width,imgHeight:a.height,imgNaturalWidth:a.naturalWidth,imgNaturalHeight:a.naturalHeight,imgSizes:a.sizes}},y=function(a){var b;if("IMG"===a.nodeName)b=a;else if("none"!==r(a,"background-image")){var c=/^url\((['"]?)(.*)\1\)$/.exec(r(a,"background-image"));c&&(b=new Image,b.src=c[2])}return b},z=function(b){var c,e=a.devicePixelRatio;return c=b.elWidth*eb.imgNaturalWidth||b.elHeight*e>b.imgNaturalHeight?"bad":"good",d.classNamespace+c},A=function(a){var c=b.createElement("div");return c.classList.add(d.classNamespace+"overlay"),c.style.position="absolute",c.style.width=a.elWidth+"px",c.style.height=a.elHeight+"px",c.style.top=a.elTop+"px",c.style.left=a.elLeft+"px",c.style.zIndex=2147483647,c.classList.add(z(a)),o(a,function(a,b){c.dataset[b]=a}),c},B=function(){o(j,function(a){m.appendChild(a)})},C=function(){s.disconnect(),j.length&&o(j,function(a){a.remove()}),h=[],i=[],j=[]};e.init=function(){var b={};return f?(a.respImgInspectorSelectors&&(b.selectors=a.respImgInspectorSelectors),d=p(k,b||{}),q("resize","optimizedResize"),a.addEventListener("optimizedResize",u,!1),void u()):void console.log("Unsupported browser... Sorry.")},e.destroy=function(){d&&(C(),a.removeEventListener("optimizedResize",u,!1))},"function"==typeof define&&define.amd?define([],function(){return e}):"undefined"!=typeof module&&module.exports?module.exports=e:a.respImgInspector=e,a.addEventListener("load",function(){e.init()})}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";var d,e={},f=!!(b.querySelector&&a.addEventListener&&a.MutationObserver&&a.Promise),g=!1,h=[],i=[],j=[],k={selectors:null,classNamespace:"respimg-inspector-"},l=["span","em","strong","i","b","big","small","tt","abbr","script","br","hr","sub","sup","button","input","label","select","textarea","samp","var","iframe","script","video","object","canvas","center","font","frame","frameset","noframe","noscript","option","strike","s","wbr","bdi","kbd","audio","map","area","track","embed","param","source","del","ins","acronym","applet","blink","dir","spacer","isindex","content","element","shadow","template","noembed","head","meta","link","title","style","html"],m=b.body,n=b.documentElement,o=function(a,b,c){if("[object Object]"===Object.prototype.toString.call(a))for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&b.call(c,a[d],d,a);else for(var e=0,f=a.length;f>e;e++)b.call(c,a[e],e,a)},p=function(a,b){var c,d={};for(c in a)Object.prototype.hasOwnProperty.call(a,c)&&(d[c]=a[c]);for(c in b)Object.prototype.hasOwnProperty.call(b,c)&&(d[c]=b[c]);return d},q=function(b,c,d){var e=d||a,f=function(){g||(g=!0,s.disconnect(),requestAnimationFrame(function(){e.dispatchEvent(new CustomEvent(c)),g=!1}))};e.addEventListener(b,f)},r=function(b,c){return a.getComputedStyle(b,null).getPropertyValue(c)},s=new MutationObserver(function(a){a.forEach(function(){u()})}),t=function(a){return new Promise(function(b,c){a.complete?b(a):(a.onload=function(){b(a)},a.onerror=function(){c()})})},u=function(){g=!0,C();var a=v(),c=b.querySelectorAll(a);o(c,function(a){var b=y(a);if(b){var c={el:a,img:b};"IMG"!==c.el.nodeName&&"cover"!==r(c.el,"background-size")||(h.push(c),i.push(b))}});var d=i.map(t);Promise.all(d).then(function(){o(h,function(a){var b=p(w(a.el),x(a.img));j.push(A(b)),s.observe(a.el,{attributes:!0})}),B(),s.observe(m,{childList:!0}),g=!1})},v=function(){if(d.selectors)return d.selectors;var a=l.map(function(a){return"not("+a+")"});return"*:"+a.join(":")},w=function(b){var c=b.getBoundingClientRect(),d=a.pageYOffset||n.scrollTop||m.scrollTop,e=a.pageXOffset||n.scrollLeft||m.scrollLeft,f=n.clientTop||m.clientTop||0,g=n.clientLeft||m.clientLeft||0;return{elTag:b.nodeName.toLowerCase(),elWidth:c.width,elHeight:c.height,elTop:Math.round(c.top+d-f),elBottom:Math.round(c.bottom+d-f),elLeft:Math.round(c.left+e-g),elRight:Math.round(c.right+e-g)}},x=function(a){return{imgWidth:a.width,imgHeight:a.height,imgNaturalWidth:a.naturalWidth,imgNaturalHeight:a.naturalHeight,imgSizes:a.sizes}},y=function(a){var b;if("IMG"===a.nodeName)b=a;else if("none"!==r(a,"background-image")){var c=/^url\((['"]?)(.*)\1\)$/.exec(r(a,"background-image"));c&&(b=new Image,b.src=c[2])}return b},z=function(b){var c,e=a.devicePixelRatio;return c=b.elWidth*eb.imgNaturalWidth||b.elHeight*e>b.imgNaturalHeight?"bad":"good",d.classNamespace+c},A=function(a){var c=b.createElement("div");return c.classList.add(d.classNamespace+"overlay"),c.style.position="absolute",c.style.width=a.elWidth+"px",c.style.height=a.elHeight+"px",c.style.top=a.elTop+"px",c.style.left=a.elLeft+"px",c.style.zIndex=2147483647,c.classList.add(z(a)),o(a,function(a,b){c.dataset[b]=a}),c},B=function(){o(j,function(a){m.appendChild(a)})},C=function(){s.disconnect(),j.length&&o(j,function(a){a.remove()}),h=[],i=[],j=[]};e.init=function(){var b={};return f?(a.respImgInspectorSelectors&&(b.selectors=a.respImgInspectorSelectors),d=p(k,b||{}),q("resize","optimizedResize"),a.addEventListener("optimizedResize",u,!1),void u()):void console.log("Unsupported browser... Sorry.")},e.destroy=function(){d&&(C(),a.removeEventListener("optimizedResize",u,!1))},"function"==typeof define&&define.amd?define([],function(){return e}):"undefined"!=typeof module&&module.exports?module.exports=e:a.respImgInspector=e,e.init()}(window,document); \ No newline at end of file diff --git a/package.json b/package.json index e4c0890..eebfb2c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "respimg-inspector", - "version": "0.2.3", + "version": "0.2.4", "description": "A javascript plugin to check responsive images in the browser.", "homepage": "https://www.npmjs.com/package/respimg-inspector", "keywords": [ @@ -30,6 +30,7 @@ "dependencies": {}, "devDependencies": { "grunt": "^1.0.1", + "grunt-bookmarklet-wrapper": "^1.2.0", "grunt-cli": "^1.2.0", "grunt-contrib-clean": "^1.0.0", "grunt-contrib-concat": "^1.0.1", diff --git a/src/bookmarklet.js b/src/bookmarklet.js index cde9c3c..bf1df61 100644 --- a/src/bookmarklet.js +++ b/src/bookmarklet.js @@ -1,13 +1,9 @@ -( function() { +var link = document.createElement( "link" ); +link.id = "respimage-inspector-link"; +link.href = "https://cdn.rawgit.com/creative-area/respimg-inspector/@@version/dist/respimg-inspector.css"; +document.head.appendChild( link ); - var link = document.createElement( "link" ); - link.id = "respimage-inspector-link"; - link.href = "https://cdn.rawgit.com/creative-area/respimg-inspector/@@version/dist/respimg-inspector.css"; - document.head.appendChild( link ); - - var script = document.createElement( "script" ); - script.id = "respimage-inspector-script"; - script.src = "https://cdn.rawgit.com/creative-area/respimg-inspector/@@version/dist/respimg-inspector.min.js"; - document.body.appendChild( script ); - -} )(); +var script = document.createElement( "script" ); +script.id = "respimage-inspector-script"; +script.src = "https://cdn.rawgit.com/creative-area/respimg-inspector/@@version/dist/respimg-inspector.min.js"; +document.body.appendChild( script ); diff --git a/src/respimg-inspector.js b/src/respimg-inspector.js index 58d66e2..684c83a 100644 --- a/src/respimg-inspector.js +++ b/src/respimg-inspector.js @@ -273,8 +273,6 @@ window.respImgInspector = respImgInspector; } - window.addEventListener( "load", function() { - respImgInspector.init(); - } ); + respImgInspector.init(); } )( window, document );