Skip to content
Permalink
Browse files

refactor logic to update image src

Issue: ENYO-510
Enyo-DCO-1.1-Signed-off-by: Ryan Duffy (ryan.duffy@lge.com)
  • Loading branch information...
ryanjduffy committed Jun 9, 2015
1 parent 91af275 commit 4b3dd50b806281db9591c3193683a1c323222235
Showing with 66 additions and 34 deletions.
  1. +66 −34 lib/Image/Image.js
@@ -41,6 +41,11 @@ var
* [onerror]{@link enyo.Image#onerror} [events]{@glossary event}. Image dragging is suppressed by
* default, so as not to interfere with touch interfaces.
*
* When {@link enyo.Image#sizing} is used, the control will not have a natural size and must be
* manually sized using CSS `height` and `width`. Also, when {@link enyo.Image#placeholder} is used
* without {@link enyo.Image#sizing}, you may wish to specify the size as the image will not have a
* natural size until the image loads causing the placeholder to not be visible.
*
* {@link enyo.Image} also has support for multi-resolution images. If you are developing assets
* for specific screen sizes, HD (720p), FHD (1080p), UHD (4k), for example, you may provide
* specific image assets in a hash/object format to the `src` property, instead of the usual
@@ -143,7 +148,11 @@ module.exports = kind(
* @public
*/
position: 'center',

/**
* Provides a default image displayed while the URL specified by `src` is loaded or when that
* image fails to load.
*
* @type {String}
* @default ''
* @public
@@ -161,6 +170,13 @@ module.exports = kind(
*/
classes: 'enyo-image',

/**
* `src` copied here to avoid overwriting the user-provided value when loading values
*
* @private
*/
_src: null,

/**
* @type {Object}
* @property {Boolean} draggable - This attribute will take one of the following
@@ -172,11 +188,21 @@ module.exports = kind(
draggable: 'false'
},

/**
* @private
*/
handlers: {
onload: 'handleLoad',
onerror: 'handleError'
},

/**
* @private
*/
observers: [
{method: 'updateSource', path: ['_src', 'placeholder']}
],

/**
* @method
* @private
@@ -196,36 +222,12 @@ module.exports = kind(
}),

/**
* Cache the value of user-provided `src` value in `_src`
*
* @private
*/
srcChanged: function () {
var url = 'none',
src = ri.selectSrc(this.src);
src = src ? path.rewrite(src) : ''; // Only run rewrite if src is truthy.
if (this.sizing) {
var urlSrc = 'url(\'' + src + '\')', urlPh;
if(this.placeholder) {
urlPh = 'url(\'' + path.rewrite(this.placeholder) + '\')';
url = src ? urlSrc + ',' + urlPh : urlPh;
} else {
url = src ? urlSrc : url;
}
this.applyStyle('background-image', url);
} else {
this.placeholder? this.applyStyle('background-image', 'url(\'' + path.rewrite(this.placeholder) + '\')') : '';
this.setAttribute('src', src);
}
},

/**
* @private
*/
placeholderChanged: function(){
var placeholder = this.placeholder ? path.rewrite(this.placeholder) : '';
//Change placeholder when the src is empty
if (!this.src) {
this.applyStyle('background-image', placeholder ? 'url(\'' + placeholder + '\')' : 'none');
}
this.set('_src', this.src);
},

/**
@@ -248,7 +250,7 @@ module.exports = kind(
this.addClass(this.sizing);
}
if (this.generated) {
this.srcChanged();
this.updateSource();
this.render();
}
},
@@ -263,6 +265,10 @@ module.exports = kind(
},

/**
* When the image is loaded successfully, we want to clear out the background image so it doesn't
* show through the transparency of the image. This only works when not using `sizing` because we
* do not get load/error events for failed background-image's.
*
* @private
*/
handleLoad: function () {
@@ -274,9 +280,31 @@ module.exports = kind(
/**
* @private
*/
handleError: function() {
handleError: function () {
if (this.placeholder) {
this.setSrc(null);
this.set('_src', null);
}
},

/**
* Updates the Image's src or background-image based on the values of _src and placeholder
*
* @private
*/
updateSource: function (was, is, prop) {
var src = ri.selectSrc(this._src),
srcUrl = src ? 'url(\'' + path.rewrite(src) + '\')' : null,
plUrl = this.placeholder ? 'url(\'' + path.rewrite(this.placeholder) + '\')' : null;
if (this.sizing) {
// use either both urls, src, placeholder, or 'none', in that order
url = srcUrl && plUrl && (srcUrl + ',' + plUrl) || srcUrl || plUrl || 'none';
this.applyStyle('background-image', url);
}
// if we've haven't failed to load src (this.src && this._src == this.src), we don't want to
// add the bg image that may have already been removed by handleLoad
else if (!(prop == 'placeholder' && this.src && this._src == this.src)) {
this.applyStyle('background-image', plUrl);
this.setAttribute('src', src);
}
},

@@ -293,14 +321,18 @@ module.exports = kind(
}),

/**
* @lends enyo.Image
* @private
*/
statics: {
/**
A globally accessible data URL that describes a simple
placeholder image that may be used in samples and applications
until final graphics are provided. As an SVG image, it will
expand to fill the desired width and height set in the style.
* A globally accessible data URL that describes a simple
* placeholder image that may be used in samples and applications
* until final graphics are provided. As an SVG image, it will
* expand to fill the desired width and height set in the style.
*
* @type {String}
* @public
*/
placeholder:
'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +

0 comments on commit 4b3dd50

Please sign in to comment.
You can’t perform that action at this time.