From f807d511e1c52209c87878fe75394e8912136337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Mon, 16 Mar 2015 17:17:50 +0100 Subject: [PATCH 1/6] fixes server side rendering and lowSrc property. @see https://github.com/oncletom/Imager.jsx/issues/10 and https://github.com/oncletom/Imager.jsx/issues/3 --- src/imager.jsx | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/imager.jsx b/src/imager.jsx index 45cbf79..7d51bbd 100644 --- a/src/imager.jsx +++ b/src/imager.jsx @@ -1,7 +1,10 @@ 'use strict'; +var isBrowser = (typeof window !== 'undefined'); + var React = require('react'); -var Imager = require('imager.js'); + +var Imager = isBrowser ? require('imager.js') : null; /** * Imager.jsx Component Factory @@ -20,9 +23,9 @@ module.exports = function (config) { // Where the magic happens. // A 'blind' Imager instance shared by all the rendered components. - var imgr = new Imager([], imagerConfig); + var imgr = isBrowser ? new Imager([], imagerConfig) : null; - if (onResize) { + if (isBrowser && onResize) { Imager.addEvent(window, 'resize', Imager.debounce(function(){ Imager.applyEach(imagesCache, function(component){ component.refreshImageWidth(); @@ -36,6 +39,7 @@ module.exports = function (config) { src: React.PropTypes.string, 'background-src': React.PropTypes.string, // optional props + lowSrc: React.PropTypes.string, alt: React.PropTypes.string, className: React.PropTypes.string }, @@ -43,7 +47,7 @@ module.exports = function (config) { componentDidMount: function () { this.refreshImageWidth(); - if (onResize) { + if (isBrowser && onResize) { imagesCache.push(this); } }, @@ -54,7 +58,7 @@ module.exports = function (config) { componentWillUnmount: function () { var self = this; - if (onResize) { + if (isBrowser && onResize) { imagesCache = Imager.applyEach(imagesCache, function(component){ return component === self ? null : component; }).filter(function(c){ return c; }); @@ -67,9 +71,9 @@ module.exports = function (config) { getDefaultProps: function () { return { - className: imgr.className, - src: imgr.gif.src, - alt: imgr.gif.src + className: imgr ? imgr.className : 'image-replace', // add imagers className to server side rendering. It's kind of dirty but fixes Reacts invalid checksum warning for now. + src: imgr ? imgr.gif.src : '', + alt: imgr ? imgr.gif.src : '' // <-- why are you using the src as alt attribute here? }; }, @@ -79,9 +83,22 @@ module.exports = function (config) { } }, + getLowSrc: function () { + var lowSrc = this.props.src; + + if (this.props.lowSrc) { + lowSrc = this.props.lowSrc; + } + else if (imgr) { + lowSrc = imgr.gif.src; + } + + return lowSrc; + }, + getImageSrc: function () { if (!this.state.width) { - return imgr.gif.src; + return this.getLowSrc(); } return imgr.changeImageSrcToUseNewImageDimensions(this.props.src, this.state.width).replace('{height}', this.state.height); From 462718b9e0f2a883008af3c5710d8c5d6d3dc8e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Mon, 16 Mar 2015 17:19:42 +0100 Subject: [PATCH 2/6] removed unused background-src property --- src/imager.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/imager.jsx b/src/imager.jsx index 7d51bbd..ddf30bf 100644 --- a/src/imager.jsx +++ b/src/imager.jsx @@ -37,7 +37,6 @@ module.exports = function (config) { propTypes: { // mandatory props src: React.PropTypes.string, - 'background-src': React.PropTypes.string, // optional props lowSrc: React.PropTypes.string, alt: React.PropTypes.string, From 2a16bce9075224ac71175ec6c8efcf696750d208 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Mon, 16 Mar 2015 17:35:54 +0100 Subject: [PATCH 3/6] added smallest image as fallback url if no lowSrc property is provided --- src/imager.jsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/imager.jsx b/src/imager.jsx index ddf30bf..d756c5b 100644 --- a/src/imager.jsx +++ b/src/imager.jsx @@ -85,11 +85,28 @@ module.exports = function (config) { getLowSrc: function () { var lowSrc = this.props.src; + // use the defined low src property if (this.props.lowSrc) { lowSrc = this.props.lowSrc; } + /*// use imagers gif src else if (imgr) { lowSrc = imgr.gif.src; + }*/ + // use the smallest width and replace it in the default src property + else { + var smallestWidth = -1; + + if (config.availableWidths && config.availableWidths.length) { + for (var i = 0, l = config.availableWidths.length; i < l; i++) { + var width = config.availableWidths[i]; + if (smallestWidth === -1 || smallestWidth > width) { + smallestWidth = width; + } + } + } + + lowSrc = this.props.src.replace('{width}', smallestWidth); } return lowSrc; From 22d512e711c5b16852b4a131cb8180c681316cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Thu, 19 Mar 2015 15:28:42 +0100 Subject: [PATCH 4/6] Updated fallback url handling. Added `availableWidths` object parsing {width: 'name' } --- src/imager.jsx | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/imager.jsx b/src/imager.jsx index d756c5b..951d592 100644 --- a/src/imager.jsx +++ b/src/imager.jsx @@ -89,24 +89,36 @@ module.exports = function (config) { if (this.props.lowSrc) { lowSrc = this.props.lowSrc; } - /*// use imagers gif src - else if (imgr) { - lowSrc = imgr.gif.src; - }*/ // use the smallest width and replace it in the default src property else { var smallestWidth = -1; - - if (config.availableWidths && config.availableWidths.length) { - for (var i = 0, l = config.availableWidths.length; i < l; i++) { - var width = config.availableWidths[i]; - if (smallestWidth === -1 || smallestWidth > width) { - smallestWidth = width; + var replacement = ''; + + if (config.availableWidths) { + if (config.availableWidths.constructor === Array && config.availableWidths.length) { + for (var i = 0, l = config.availableWidths.length; i < l; i++) { + var width = config.availableWidths[i]; + if (smallestWidth === -1 || smallestWidth > width) { + smallestWidth = width; + replacement = width; + } + } + } + else if (config.availableWidths !== null && typeof config.availableWidths === 'object') { + var keys = Object.keys(config.availableWidths); + + for (var i = 0, l = keys.length; i < l; i++) { + var width = parseInt(keys[i], 10); + + if (smallestWidth === -1 || smallestWidth > width) { + smallestWidth = width; + replacement = config.availableWidths[width]; + } } } } - lowSrc = this.props.src.replace('{width}', smallestWidth); + lowSrc = this.props.src.replace('{width}', replacement); } return lowSrc; From 594cfd5f350fb4d78dbdf28aac43f7be82251437 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Fri, 29 May 2015 18:27:33 +0200 Subject: [PATCH 5/6] updated package dependencies --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 55b6b7a..dc11255 100644 --- a/package.json +++ b/package.json @@ -36,12 +36,12 @@ "author": "Thomas Parisot (https://oncletom.io)", "license": "MIT", "dependencies": { - "imager.js": "^0.4.0", - "react": "^0.12.1" + "imager.js": "^0.5.0", + "react": "^0.13.3" }, "devDependencies": { - "browserify": "^6.3.2", - "reactify": "^0.17.1", - "watchify": "^2.1.1" + "browserify": "^10.2.3", + "reactify": "^1.1.1", + "watchify": "^3.2.1" } } From d60a994f17e2d85d0b5e2df0d7719bc0d3f31fc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Ro=CC=88der?= Date: Fri, 29 May 2015 18:27:37 +0200 Subject: [PATCH 6/6] Updated react to 0.13.x --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc11255..91cdb84 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "imager.jsx", - "version": "1.1.3", + "version": "1.2.0", "description": "A React component for responsive images in desktop and mobile browsers. Featuring Imager.js.", "main": "./src/imager.jsx", "repository": {