New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
imager.js - npm Package Compare versions
Comparing version 0.3.0 to 0.3.1
| { | ||
| "name": "imager.js", | ||
| "main": "Imager.js", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "homepage": "https://github.com/BBC-News/Imager.js", | ||
@@ -6,0 +6,0 @@ "authors": [ |
177
Imager.js
| ;(function (window, document) { | ||
| 'use strict'; | ||
| var defaultWidths, getKeys, nextTick, addEvent, getNaturalWidth; | ||
| var defaultWidths, getKeys, addEvent; | ||
| nextTick = window.requestAnimationFrame || | ||
| var nextTick = window.requestAnimationFrame || | ||
| window.mozRequestAnimationFrame || | ||
@@ -26,18 +25,6 @@ window.webkitRequestAnimationFrame || | ||
| function returnDirectValue (value) { | ||
| return value; | ||
| } | ||
| function returnFn(value) { return value; } | ||
| function noop(){} | ||
| function trueFn(){ return true;} | ||
| getNaturalWidth = (function(){ | ||
| if (Object.prototype.hasOwnProperty.call(document.createElement('img'), 'naturalWidth')) { | ||
| return function (image){ return image.naturalWidth;}; | ||
| } | ||
| // IE8 and below lacks the naturalWidth property | ||
| return function (source){ | ||
| var img = document.createElement('img'); | ||
| img.src = source.src; | ||
| return img.width; | ||
| }; | ||
| })(); | ||
| addEvent = (function(){ | ||
@@ -118,3 +105,2 @@ if (document.addEventListener){ | ||
| this.imagesOffScreen = []; | ||
| this.viewportHeight = doc.documentElement.clientHeight; | ||
@@ -133,6 +119,6 @@ this.selector = opts.selector || '.delayed-image-load'; | ||
| this.availableWidths = opts.availableWidths || defaultWidths; | ||
| this.onImagesReplaced = opts.onImagesReplaced || function () {}; | ||
| this.onImagesReplaced = opts.onImagesReplaced || noop; | ||
| this.widthsMap = {}; | ||
| this.refreshPixelRatio(); | ||
| this.widthInterpolator = opts.widthInterpolator || returnDirectValue; | ||
| this.widthInterpolator = opts.widthInterpolator || returnFn; | ||
@@ -157,13 +143,12 @@ // Needed as IE8 adds a default `width`/`height` attribute… | ||
| if (elements) { | ||
| this.divs = applyEach(elements, returnDirectValue); | ||
| this.divs = applyEach(elements, returnFn); | ||
| this.selector = null; | ||
| } | ||
| else { | ||
| this.divs = applyEach(doc.querySelectorAll(this.selector), returnDirectValue); | ||
| this.divs = applyEach(doc.querySelectorAll(this.selector), returnFn); | ||
| } | ||
| this.changeDivsToEmptyImages(); | ||
| this.ready(opts.onReady); | ||
| this.changeDivsToEmptyImages(this.divs); | ||
@@ -176,10 +161,23 @@ nextTick(function(){ | ||
| Imager.prototype.scrollCheck = function(){ | ||
| var self = this; | ||
| var offscreenImageCount = 0; | ||
| var elements = []; | ||
| if (this.scrolled) { | ||
| if (!this.imagesOffScreen.length) { | ||
| window.clearInterval(this.interval); | ||
| // collects a subset of not-yet-responsive images and not offscreen anymore | ||
| applyEach(this.divs, function(element){ | ||
| if (self.isPlaceholder(element)) { | ||
| ++offscreenImageCount; | ||
| if (self.isThisElementOnScreen(element)) { | ||
| elements.push(element); | ||
| } | ||
| } | ||
| }); | ||
| if (offscreenImageCount === 0) { | ||
| window.clearInterval(self.interval); | ||
| } | ||
| this.divs = this.imagesOffScreen.slice(0); // copy by value, don't copy by reference | ||
| this.imagesOffScreen.length = 0; | ||
| this.changeDivsToEmptyImages(); | ||
| this.changeDivsToEmptyImages(elements); | ||
| this.scrolled = false; | ||
@@ -190,14 +188,36 @@ } | ||
| Imager.prototype.init = function(){ | ||
| var self = this; | ||
| this.initialized = true; | ||
| this.checkImagesNeedReplacing(this.divs); | ||
| var filterFn = trueFn; | ||
| if (this.lazyload) { | ||
| this.registerScrollEvent(); | ||
| filterFn = function(element){ | ||
| return self.isPlaceholder(element) === false; | ||
| }; | ||
| } | ||
| else { | ||
| this.checkImagesNeedReplacing(this.divs); | ||
| } | ||
| if (this.onResize) { | ||
| this.registerResizeEvent(); | ||
| this.registerResizeEvent(filterFn); | ||
| } | ||
| if (this.lazyload) { | ||
| this.registerScrollEvent(); | ||
| } | ||
| this.onReady(); | ||
| }; | ||
| /** | ||
| * Executes a function when Imager is ready to work | ||
| * It acts as a convenient/shortcut for `new Imager({ onReady: fn })` | ||
| * | ||
| * @since 0.3.1 | ||
| * @param {Function} fn | ||
| */ | ||
| Imager.prototype.ready = function(fn){ | ||
| this.onReady = fn || noop; | ||
| }; | ||
| Imager.prototype.createGif = function (element) { | ||
@@ -227,22 +247,25 @@ // if the element is already a responsive image then we don't replace it again | ||
| Imager.prototype.changeDivsToEmptyImages = function(){ | ||
| Imager.prototype.changeDivsToEmptyImages = function(elements){ | ||
| var self = this; | ||
| applyEach(this.divs, function(element, i){ | ||
| if (self.lazyload) { | ||
| if (self.isThisElementOnScreen(element)) { | ||
| self.divs[i] = self.createGif(element); | ||
| } else { | ||
| self.imagesOffScreen.push(element); | ||
| } | ||
| } else { | ||
| self.divs[i] = self.createGif(element); | ||
| } | ||
| applyEach(elements, function(element, i){ | ||
| elements[i] = self.createGif(element); | ||
| }); | ||
| if (this.initialized) { | ||
| this.checkImagesNeedReplacing(this.divs); | ||
| this.checkImagesNeedReplacing(elements); | ||
| } | ||
| }; | ||
| /** | ||
| * Indicates if an element is an Imager placeholder | ||
| * | ||
| * @since 1.3.1 | ||
| * @param {HTMLImageElement} element | ||
| * @returns {boolean} | ||
| */ | ||
| Imager.prototype.isPlaceholder = function (element){ | ||
| return element.src === this.gif.src; | ||
| }; | ||
| Imager.prototype.isThisElementOnScreen = function (element) { | ||
@@ -261,7 +284,8 @@ // document.body.scrollTop was working in Chrome but didn't work on Firefox, so had to resort to window.pageYOffset | ||
| return (elementOffsetTop < (this.viewportHeight + offset)) ? true : false; | ||
| return elementOffsetTop < (this.viewportHeight + offset); | ||
| }; | ||
| Imager.prototype.checkImagesNeedReplacing = function (images) { | ||
| Imager.prototype.checkImagesNeedReplacing = function (images, filterFn) { | ||
| var self = this; | ||
| filterFn = filterFn || trueFn; | ||
@@ -273,3 +297,5 @@ if (!this.isResizing) { | ||
| applyEach(images, function(image){ | ||
| self.replaceImagesBasedOnScreenDimensions(image); | ||
| if (filterFn(image)) { | ||
| self.replaceImagesBasedOnScreenDimensions(image); | ||
| } | ||
| }); | ||
@@ -282,6 +308,11 @@ | ||
| /** | ||
| * Upgrades an image from an empty placeholder to a fully sourced image element | ||
| * | ||
| * @param {HTMLImageElement} image | ||
| */ | ||
| Imager.prototype.replaceImagesBasedOnScreenDimensions = function (image) { | ||
| var computedWidth, src, naturalWidth; | ||
| var computedWidth, naturalWidth; | ||
| naturalWidth = getNaturalWidth(image); | ||
| naturalWidth = Imager.getNaturalWidth(image); | ||
| computedWidth = typeof this.availableWidths === 'function' ? this.availableWidths(image) | ||
@@ -292,9 +323,9 @@ : this.determineAppropriateResolution(image); | ||
| if (image.src !== this.gif.src && computedWidth <= naturalWidth) { | ||
| if (!this.isPlaceholder(image) && computedWidth <= naturalWidth) { | ||
| return; | ||
| } | ||
| src = this.changeImageSrcToUseNewImageDimensions(image.getAttribute('data-src'), computedWidth); | ||
| image.src = src; | ||
| image.src = this.changeImageSrcToUseNewImageDimensions(image.getAttribute('data-src'), computedWidth); | ||
| image.removeAttribute('width'); | ||
| image.removeAttribute('height'); | ||
| }; | ||
@@ -371,3 +402,3 @@ | ||
| baseValue = parseFloat(baseValue, 10); | ||
| baseValue = parseFloat(baseValue); | ||
@@ -383,7 +414,7 @@ while (i--) { | ||
| Imager.prototype.registerResizeEvent = function(){ | ||
| Imager.prototype.registerResizeEvent = function(filterFn){ | ||
| var self = this; | ||
| addEvent(window, 'resize', function(){ | ||
| self.checkImagesNeedReplacing(self.divs); | ||
| self.checkImagesNeedReplacing(self.divs, filterFn); | ||
| }); | ||
@@ -404,2 +435,7 @@ }; | ||
| }); | ||
| addEvent(window, 'resize', function(){ | ||
| self.viewportHeight = document.documentElement.clientHeight; | ||
| self.scrolled = true; | ||
| }); | ||
| }; | ||
@@ -416,2 +452,23 @@ | ||
| /** | ||
| * Returns the naturalWidth of an image element. | ||
| * | ||
| * @since 1.3.1 | ||
| * @param {HTMLImageElement} image | ||
| * @return {Number} Image width in pixels | ||
| */ | ||
| Imager.getNaturalWidth = (function () { | ||
| if ('naturalWidth' in (new Image())) { | ||
| return function (image) { | ||
| return image.naturalWidth; | ||
| }; | ||
| } | ||
| // non-HTML5 browsers workaround | ||
| return function (image) { | ||
| var imageCopy = document.createElement('img'); | ||
| imageCopy.src = image.src; | ||
| return imageCopy.width; | ||
| }; | ||
| })(); | ||
| // This form is used because it seems impossible to stub `window.pageYOffset` | ||
@@ -418,0 +475,0 @@ Imager.getPageOffset = Imager.getPageOffsetGenerator(Object.prototype.hasOwnProperty.call(window, 'pageYOffset')); |
@@ -5,90 +5,91 @@ 'use strict'; | ||
| function filterBrowsers(browsers, re){ | ||
| return Object.keys(browsers).filter(function(key){ | ||
| return re.test(key); | ||
| }); | ||
| function filterBrowsers (browsers, re) { | ||
| return Object.keys(browsers).filter(function (key) { | ||
| return re.test(key); | ||
| }); | ||
| } | ||
| module.exports = function (config) { | ||
| var isCI = (Boolean(process.env.CI) && Boolean(process.env.BROWSER_STACK_ACCESS_KEY)) === true; | ||
| var isCI = (Boolean(process.env.CI) && Boolean(process.env.BROWSER_STACK_ACCESS_KEY)) === true; | ||
| var browsers = process.env.BROWSERS ? process.env.BROWSERS.split(',') : null; | ||
| config.set({ | ||
| config.set({ | ||
| // base path, that will be used to resolve files and exclude | ||
| basePath: '', | ||
| // base path, that will be used to resolve files and exclude | ||
| basePath: '', | ||
| // frameworks to use | ||
| frameworks: ['mocha', 'mocha', 'expect', 'sinon'], | ||
| // frameworks to use | ||
| frameworks: ['mocha', 'mocha', 'expect', 'sinon'], | ||
| // list of files / patterns to load in the browser | ||
| files: [ | ||
| 'node_modules/components-jquery/jquery.min.js', | ||
| 'test/fixtures/jquery-noconflict.js', | ||
| 'test/fixtures/*.html', | ||
| 'Imager.js', | ||
| 'test/*.js', | ||
| 'test/unit/**/*.js', | ||
| { 'pattern': 'Demo - Grunt/Assets/Images/**/*.jpg', 'included': false, 'served': true }, | ||
| { 'pattern': 'test/fixtures/**/*.jpg', 'included': false, 'served': true }, | ||
| { 'pattern': 'test/fixtures/oldformat/*', 'included': false, 'served': true } | ||
| ], | ||
| // list of files / patterns to load in the browser | ||
| files: [ | ||
| 'node_modules/components-jquery/jquery.min.js', | ||
| 'test/fixtures/jquery-noconflict.js', | ||
| 'test/fixtures/*.html', | ||
| 'Imager.js', | ||
| 'test/*.js', | ||
| 'test/unit/**/*.js', | ||
| { 'pattern': 'Demo - Grunt/Assets/Images/**/*.jpg', 'included': false, 'served': true }, | ||
| { 'pattern': 'test/fixtures/**/*.jpg', 'included': false, 'served': true }, | ||
| { 'pattern': 'test/fixtures/oldformat/*', 'included': false, 'served': true } | ||
| ], | ||
| preprocessors: { | ||
| '**/*.html': ['html2js'] | ||
| }, | ||
| preprocessors: { | ||
| '**/*.html': ['html2js'] | ||
| }, | ||
| // list of files to exclude | ||
| exclude: [ | ||
| // list of files to exclude | ||
| exclude: [ | ||
| ], | ||
| ], | ||
| // test results reporter to use | ||
| // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage' | ||
| reporters: ['progress'], | ||
| // test results reporter to use | ||
| // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage' | ||
| reporters: ['progress'], | ||
| // essential for non xhr2 browsers | ||
| transports: ['jsonp-polling'], | ||
| // essential for non xhr2 browsers | ||
| transports: ['jsonp-polling'], | ||
| // web server port | ||
| port: 9876, | ||
| // web server port | ||
| port: 9876, | ||
| // enable / disable colors in the output (reporters and logs) | ||
| colors: true, | ||
| // enable / disable colors in the output (reporters and logs) | ||
| colors: true, | ||
| // level of logging | ||
| // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG | ||
| logLevel: config.LOG_INFO, | ||
| // level of logging | ||
| // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG | ||
| logLevel: config.LOG_INFO, | ||
| // enable / disable watching file and executing tests whenever any file changes | ||
| autoWatch: false, | ||
| // enable / disable watching file and executing tests whenever any file changes | ||
| autoWatch: false, | ||
| sauceLabs: { | ||
| tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || null, | ||
| accessKey: process.env.SAUCE_ACCESS_KEY, | ||
| testName: 'BBC-News/Imager.js', | ||
| startConnect: false | ||
| }, | ||
| sauceLabs: { | ||
| tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || null, | ||
| accessKey: process.env.SAUCE_ACCESS_KEY, | ||
| testName: 'BBC-News/Imager.js', | ||
| startConnect: false | ||
| }, | ||
| browserStack: { | ||
| project: 'BBC-News/Imager.js', | ||
| build: process.env.CONTINUOUS_INTEGRATION ? null : ('Local testing - ' + Date.now()) | ||
| }, | ||
| browserStack: { | ||
| project: 'BBC-News/Imager.js', | ||
| build: process.env.CONTINUOUS_INTEGRATION ? null : ('Local testing - ' + Date.now()) | ||
| }, | ||
| customLaunchers: { | ||
| 'PhantomJSCustom': { | ||
| base: 'PhantomJS', | ||
| options: { | ||
| viewportSize: { | ||
| width: 1024, | ||
| height: 768 | ||
| } | ||
| } | ||
| }, | ||
| // Browserstack | ||
| customLaunchers: { | ||
| 'PhantomJSCustom': { | ||
| base: 'PhantomJS', | ||
| options: { | ||
| viewportSize: { | ||
| width: 1024, | ||
| height: 768 | ||
| } | ||
| } | ||
| }, | ||
| // Browserstack | ||
| // BSIE6: { | ||
@@ -101,198 +102,195 @@ // base: 'BrowserStack', | ||
| // }, | ||
| BSIE7: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '7.0', | ||
| os: 'Windows', | ||
| os_version: 'XP' | ||
| }, | ||
| BSIE8: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '8.0', | ||
| os: 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSIE9: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '9.0', | ||
| os: 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSIE10: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '10.0', | ||
| os: 'Windows', | ||
| os_version: '8' | ||
| }, | ||
| BSIE11: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '11.0', | ||
| os: 'Windows', | ||
| os_version: '8.1' | ||
| }, | ||
| BSOS4: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 4', | ||
| os: 'ios', | ||
| os_version: '4.0' | ||
| }, | ||
| BSOS5: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 4S', | ||
| os: 'ios', | ||
| os_version: '5.1' | ||
| }, | ||
| BSOS6: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 5', | ||
| os: 'ios', | ||
| os_version: '6.0' | ||
| }, | ||
| BSOS7: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 5S', | ||
| os: 'ios', | ||
| os_version: '7.0' | ||
| }, | ||
| BSAndroid2: { | ||
| base: 'BrowserStack', | ||
| device: 'Samsung Galaxy S II', | ||
| browser: 'android', | ||
| os: 'android', | ||
| os_version: '2.3' | ||
| }, | ||
| BSAndroid4: { | ||
| base: 'BrowserStack', | ||
| device: 'Samsung Galaxy Nexus', | ||
| browser: 'android', | ||
| os: 'android', | ||
| os_version: '4.0' | ||
| }, | ||
| BSFirefox: { | ||
| base: 'BrowserStack', | ||
| browser: 'firefox', | ||
| browser_version: '22.0', | ||
| os : 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSSafari5: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '5.1', | ||
| os: 'OS X', | ||
| os_version: 'Snow Leopard' | ||
| }, | ||
| BSSafari6: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '6.1', | ||
| os: 'OS X', | ||
| os_version: 'Mountain Lion' | ||
| }, | ||
| BSSafari7: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '7.0', | ||
| os: 'OS X', | ||
| os_version: 'Mavericks' | ||
| }, | ||
| BSIE7: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '7.0', | ||
| os: 'Windows', | ||
| os_version: 'XP' | ||
| }, | ||
| BSIE8: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '8.0', | ||
| os: 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSIE9: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '9.0', | ||
| os: 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSIE10: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '10.0', | ||
| os: 'Windows', | ||
| os_version: '8' | ||
| }, | ||
| BSIE11: { | ||
| base: 'BrowserStack', | ||
| browser: 'ie', | ||
| browser_version: '11.0', | ||
| os: 'Windows', | ||
| os_version: '8.1' | ||
| }, | ||
| BSOS4: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 4', | ||
| os: 'ios', | ||
| os_version: '4.0' | ||
| }, | ||
| BSOS5: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 4S', | ||
| os: 'ios', | ||
| os_version: '5.1' | ||
| }, | ||
| BSOS6: { | ||
| base: 'BrowserStack', | ||
| device: 'iPhone 5', | ||
| os: 'ios', | ||
| os_version: '6.1' | ||
| }, | ||
| BSOS7: { | ||
| base: 'BrowserStack', | ||
| device: 'iPad mini Retina', | ||
| os: 'ios', | ||
| os_version: '7.0' | ||
| }, | ||
| BSAndroid2: { | ||
| base: 'BrowserStack', | ||
| device: 'Samsung Galaxy S II', | ||
| browser: 'android', | ||
| os: 'android', | ||
| os_version: '2.3' | ||
| }, | ||
| BSAndroid4: { | ||
| base: 'BrowserStack', | ||
| device: 'Samsung Galaxy Nexus', | ||
| browser: 'android', | ||
| os: 'android', | ||
| os_version: '4.0' | ||
| }, | ||
| BSFirefox: { | ||
| base: 'BrowserStack', | ||
| browser: 'firefox', | ||
| browser_version: '22.0', | ||
| os: 'Windows', | ||
| os_version: '7' | ||
| }, | ||
| BSSafari5: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '5.1', | ||
| os: 'OS X', | ||
| os_version: 'Snow Leopard' | ||
| }, | ||
| BSSafari6: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '6.1', | ||
| os: 'OS X', | ||
| os_version: 'Mountain Lion' | ||
| }, | ||
| BSSafari7: { | ||
| base: 'BrowserStack', | ||
| browser: 'safari', | ||
| browser_version: '7.0', | ||
| os: 'OS X', | ||
| os_version: 'Mavericks' | ||
| }, | ||
| // Saucelabs | ||
| SauceIE6: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows XP', | ||
| version: '6' | ||
| }, | ||
| SauceIE7: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows XP', | ||
| version: '7' | ||
| }, | ||
| SauceIE8: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 7', | ||
| version: '8' | ||
| }, | ||
| SauceIE9: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 7', | ||
| version: '9' | ||
| }, | ||
| SauceIE10: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 8', | ||
| version: '10' | ||
| }, | ||
| SauceIE11: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 8.1', | ||
| version: '11' | ||
| }, | ||
| SauceFirefox: { | ||
| base: 'SauceLabs', | ||
| browserName: 'firefox', | ||
| platform: 'Windows 7', | ||
| version: '21' | ||
| }, | ||
| SauceAndroid: { | ||
| base: 'SauceLabs', | ||
| browserName: 'android', | ||
| platform: 'Linux', | ||
| version: '4.0' | ||
| }, | ||
| SauceiOS7: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.9', | ||
| version: '7.1' | ||
| }, | ||
| SauceiOS6: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.8', | ||
| version: '6.1' | ||
| }, | ||
| SauceiOS5: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.8', | ||
| version: '5.1' | ||
| }, | ||
| SauceiOS4: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.6', | ||
| version: '4.3' | ||
| }, | ||
| SauceSafari5: { | ||
| base: 'SauceLabs', | ||
| browserName: 'safari', | ||
| platform: 'OS X 10.6' | ||
| } | ||
| }, | ||
| // Saucelabs | ||
| SauceIE6: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows XP', | ||
| version: '6' | ||
| }, | ||
| SauceIE7: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows XP', | ||
| version: '7' | ||
| }, | ||
| SauceIE8: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 7', | ||
| version: '8' | ||
| }, | ||
| SauceIE9: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 7', | ||
| version: '9' | ||
| }, | ||
| SauceIE10: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 8', | ||
| version: '10' | ||
| }, | ||
| SauceIE11: { | ||
| base: 'SauceLabs', | ||
| browserName: 'internet explorer', | ||
| platform: 'Windows 8.1', | ||
| version: '11' | ||
| }, | ||
| SauceFirefox: { | ||
| base: 'SauceLabs', | ||
| browserName: 'firefox', | ||
| platform: 'Windows 7', | ||
| version: '21' | ||
| }, | ||
| SauceAndroid: { | ||
| base: 'SauceLabs', | ||
| browserName: 'android', | ||
| platform: 'Linux', | ||
| version: '4.0' | ||
| }, | ||
| SauceiOS7: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.9', | ||
| version: '7.1' | ||
| }, | ||
| SauceiOS6: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.8', | ||
| version: '6.1' | ||
| }, | ||
| SauceiOS5: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.8', | ||
| version: '5.1' | ||
| }, | ||
| SauceiOS4: { | ||
| base: 'SauceLabs', | ||
| browserName: 'iphone', | ||
| platform: 'OS X 10.6', | ||
| version: '4.3' | ||
| }, | ||
| SauceSafari5: { | ||
| base: 'SauceLabs', | ||
| browserName: 'safari', | ||
| platform: 'OS X 10.6' | ||
| } | ||
| }, | ||
| // Continuous Integration mode | ||
| // if true, it capture browsers, run tests and exit | ||
| singleRun: true, | ||
| browserNoActivityTimeout: 45000 | ||
| }); | ||
| captureTimeout: 120000, | ||
| browserDisconnectTolerance: isCI ? 3 : 1, | ||
| browserNoActivityTimeout: isCI ? 120000 : null, | ||
| // Continuous Integration mode | ||
| // if true, it capture browsers, run tests and exit | ||
| singleRun: true | ||
| }); | ||
| config.set({ | ||
| browsers: isCI ? filterBrowsers(config.customLaunchers, /^BS/) : ['PhantomJSCustom', 'Firefox'] | ||
| }); | ||
| config.set({ | ||
| browsers: browsers || (isCI | ||
| ? filterBrowsers(config.customLaunchers, /^BS/) | ||
| : ['PhantomJSCustom', 'Firefox']) | ||
| }); | ||
| }; |
| { | ||
| "name": "imager.js", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "description": "Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News.", | ||
@@ -9,5 +9,5 @@ "main": "Imager.js", | ||
| "test-pre": "jshint Imager.js", | ||
| "test-watch": "./node_modules/karma/bin/karma start --auto-watch", | ||
| "test-watch": "./node_modules/karma/bin/karma start --auto-watch --no-single-run", | ||
| "build": "uglifyjs ./Imager.js -c -m -o ./Imager.min.js --source-map ./Imager.map.js && mv -f Imager.{map,min}.js ./dist", | ||
| "release": "for TASK in (test-pre test-local build changelog changelog-post tag-and-publish); do npm run $TASK; done", | ||
| "release": "for TASK in test-pre test-local build changelog changelog-post tag-and-publish; do npm run $TASK; done", | ||
| "changelog": "github-changes -o BBC-News -r Imager.js -n ${npm_package_version} -a --use-commit-body --only-merges", | ||
@@ -14,0 +14,0 @@ "changelog-post": "git add CHANGELOG.md && git commit -m 'Updated CHANGELOG'", |
@@ -1,2 +0,2 @@ | ||
| # Imager.js [](http://travis-ci.org/BBC-News/Imager.js) | ||
| # Imager.js [](http://travis-ci.org/BBC-News/Imager.js) | ||
@@ -3,0 +3,0 @@ > Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at [BBC News](http://responsivenews.co.uk/). |
@@ -17,12 +17,2 @@ 'use strict'; | ||
| } | ||
| } | ||
| /** | ||
| * Runs a bit of code after an Animation Frame. Supposedly. | ||
| * | ||
| * @param {Function} fn | ||
| * @returns {Number} Timeout ID | ||
| */ | ||
| function runAfterAnimationFrame(fn){ | ||
| return setTimeout(fn, 20); | ||
| } |
@@ -23,3 +23,3 @@ 'use strict'; | ||
| runAfterAnimationFrame(function () { | ||
| imgr.ready(function () { | ||
| expect(imgr.initialized).to.equal(true); | ||
@@ -46,3 +46,3 @@ expect(imgr.scrolled).to.equal(false); | ||
| runAfterAnimationFrame(function () { | ||
| imgr.ready(function () { | ||
| expect(imgr.initialized).to.equal(true); | ||
@@ -61,3 +61,3 @@ expect(imgr.scrolled).to.equal(false); | ||
| runAfterAnimationFrame(function () { | ||
| imgr.ready(function () { | ||
| expect(imgr.initialized).to.equal(true); | ||
@@ -76,3 +76,3 @@ expect(imgr.scrolled).to.equal(false); | ||
| runAfterAnimationFrame(function () { | ||
| imgr.ready(function () { | ||
| expect(imgr.initialized).to.equal(true); | ||
@@ -91,3 +91,3 @@ expect(imgr.scrolled).to.equal(false); | ||
| runAfterAnimationFrame(function () { | ||
| imgr.ready(function () { | ||
| expect(imgr.initialized).to.equal(true); | ||
@@ -94,0 +94,0 @@ expect(imgr.scrolled).to.equal(false); |
@@ -25,3 +25,3 @@ 'use strict'; | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| applyEach(imgr.divs, function(el){ | ||
@@ -40,3 +40,3 @@ expect(el).to.have.property('nodeName', 'IMG'); | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| var src = applyEach(imgr.divs, function(el){ return el.getAttribute('src'); }); | ||
@@ -58,3 +58,3 @@ | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| var src = applyEach(imgr.divs, function(el){ return el.getAttribute('src'); }); | ||
@@ -75,3 +75,3 @@ | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| var src = applyEach(imgr.divs, function(el){ return el.getAttribute('src'); }); | ||
@@ -100,3 +100,3 @@ | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| var src = applyEach(imgr.divs, function(el){ return el.getAttribute('src'); }); | ||
@@ -156,3 +156,3 @@ | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| expect(imgr.divs[0]).to.have.property('alt', imgr.gif.alt); | ||
@@ -170,3 +170,3 @@ | ||
| runAfterAnimationFrame(function(){ | ||
| imgr.ready(function(){ | ||
| expect(imgr.divs[1]).to.have.property('alt', 'Responsive Image alternative'); | ||
@@ -173,0 +173,0 @@ |
@@ -5,85 +5,94 @@ 'use strict'; | ||
| describe('Imager.js Events', function(){ | ||
| var fixtures, sandbox; | ||
| describe('Imager.js Events', function () { | ||
| var fixtures, sandbox; | ||
| beforeEach(function(){ | ||
| fixtures = undefined; | ||
| sandbox = sinon.sandbox.create(); | ||
| }); | ||
| beforeEach(function () { | ||
| fixtures = undefined; | ||
| sandbox = sinon.sandbox.create(); | ||
| }); | ||
| afterEach(function(){ | ||
| sandbox.restore(); | ||
| cleanFixtures(fixtures); | ||
| }); | ||
| afterEach(function () { | ||
| sandbox.restore(); | ||
| cleanFixtures(fixtures); | ||
| }); | ||
| describe('Constructor Options', function(){ | ||
| it('should register the relevant events by default', function(){ | ||
| var imgr = new Imager(); | ||
| describe('Constructor Options', function () { | ||
| it('should register the relevant events by default', function () { | ||
| var imgr = new Imager(); | ||
| expect(imgr.onResize).to.equal(true); | ||
| expect(imgr.lazyload).to.equal(false); | ||
| }); | ||
| expect(imgr.onResize).to.equal(true); | ||
| expect(imgr.lazyload).to.equal(false); | ||
| }); | ||
| it('should handle onResize only', function(done){ | ||
| var imgr = new Imager({ onResize: true, lazyload: false }); | ||
| var resizeSpy = sandbox.spy(imgr, 'registerResizeEvent'); | ||
| var scrollSpy = sandbox.spy(imgr, 'registerScrollEvent'); | ||
| it('should handle onResize only', function (done) { | ||
| var imgr = new Imager({ onResize: true, lazyload: false }); | ||
| var resizeSpy = sandbox.spy(imgr, 'registerResizeEvent'); | ||
| var scrollSpy = sandbox.spy(imgr, 'registerScrollEvent'); | ||
| expect(resizeSpy.called).to.equal(false); | ||
| expect(scrollSpy.called).to.equal(false); | ||
| expect(resizeSpy.called).to.equal(false); | ||
| expect(scrollSpy.called).to.equal(false); | ||
| runAfterAnimationFrame(function(){ | ||
| expect(resizeSpy.callCount).to.equal(1); | ||
| expect(scrollSpy.callCount).to.equal(0); | ||
| imgr.ready(function () { | ||
| expect(resizeSpy.callCount).to.equal(1); | ||
| expect(scrollSpy.callCount).to.equal(0); | ||
| done(); | ||
| }); | ||
| }); | ||
| done(); | ||
| }); | ||
| }); | ||
| it('should handle onScroll only', function(done){ | ||
| var imgr = new Imager({ onResize: false, lazyload: true }); | ||
| var resizeSpy = sandbox.spy(imgr, 'registerResizeEvent'); | ||
| var scrollSpy = sandbox.spy(imgr, 'registerScrollEvent'); | ||
| it('should handle onScroll only', function (done) { | ||
| var imgr = new Imager({ onResize: false, lazyload: true }); | ||
| var resizeSpy = sandbox.spy(imgr, 'registerResizeEvent'); | ||
| var scrollSpy = sandbox.spy(imgr, 'registerScrollEvent'); | ||
| expect(resizeSpy.called).to.equal(false); | ||
| expect(scrollSpy.called).to.equal(false); | ||
| expect(resizeSpy.called).to.equal(false); | ||
| expect(scrollSpy.called).to.equal(false); | ||
| runAfterAnimationFrame(function(){ | ||
| expect(resizeSpy.callCount).to.equal(0); | ||
| expect(scrollSpy.callCount).to.equal(1); | ||
| imgr.ready(function () { | ||
| expect(resizeSpy.callCount).to.equal(0); | ||
| expect(scrollSpy.callCount).to.equal(1); | ||
| done(); | ||
| }); | ||
| }); | ||
| done(); | ||
| }); | ||
| }); | ||
| describe('onImagesReplaced', function(){ | ||
| it('should run during the init process', function(done){ | ||
| var replaceImagesSpy = sandbox.spy(); | ||
| var imgr = new Imager({ onImagesReplaced: replaceImagesSpy }); | ||
| describe('onImagesReplaced', function () { | ||
| it('should run during the init process', function (done) { | ||
| var replaceImagesSpy = sandbox.spy(); | ||
| var imgr = new Imager({ onImagesReplaced: replaceImagesSpy }); | ||
| expect(replaceImagesSpy.called).to.equal(false); | ||
| expect(replaceImagesSpy.called).to.equal(false); | ||
| runAfterAnimationFrame(function(){ | ||
| expect(replaceImagesSpy.callCount).to.equal(1); | ||
| imgr.ready(function () { | ||
| expect(replaceImagesSpy.callCount).to.equal(1); | ||
| done(); | ||
| }); | ||
| }); | ||
| done(); | ||
| }); | ||
| }); | ||
| it('should receive the targeted list of images as sole argument', function(done){ | ||
| loadFixtures('regular'); | ||
| var replaceImagesSpy = sandbox.spy(); | ||
| var imgr = new Imager({ selector: '#main .delayed-image-load', onImagesReplaced: replaceImagesSpy }); | ||
| it('should receive the targeted list of images as sole argument', function (done) { | ||
| loadFixtures('regular'); | ||
| var replaceImagesSpy = sandbox.spy(); | ||
| var imgr = new Imager({ selector: '#main .delayed-image-load', onImagesReplaced: replaceImagesSpy }); | ||
| runAfterAnimationFrame(function(){ | ||
| var args = replaceImagesSpy.getCall(0).args; | ||
| imgr.ready(function () { | ||
| var args = replaceImagesSpy.getCall(0).args; | ||
| expect(args).to.have.length(1); | ||
| expect(args[0]).to.have.length(3); | ||
| expect(args).to.have.length(1); | ||
| expect(args[0]).to.have.length(3); | ||
| done(); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('onresize', function () { | ||
| it('should update the viewportHeight internal on window resize if lazyloading is enabled', function(){ | ||
| var imgr = new Imager({ lazyload: true }); | ||
| // we could do better but trigger window.onresize is not the most funny thing | ||
| expect(imgr.registerScrollEvent.toString()).to.match(/viewportHeight = document.documentElement.clientHeight/); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.07%
28607683
- Number of package files
- increased by4.35%
72
- Lines of code
- increased by5.94%
1160
No dependency changes