Skip to content

Instantly share code, notes, and snippets.

@jonpitch
Last active August 29, 2016 01:39
Show Gist options
  • Save jonpitch/a346d4acdde3afc0b55e3dd5eeb34620 to your computer and use it in GitHub Desktop.
Save jonpitch/a346d4acdde3afc0b55e3dd5eeb34620 to your computer and use it in GitHub Desktop.
asset-map
// app/initializers/asset-map.js
import Ember from 'ember';
export function initialize(application) {
let assetMap = Ember.Object.extend();
application.register('impact:assets', assetMap);
application.inject('component:i18n-image', 'assets', 'impact:assets');
}
export default {
name: 'asset-map',
initialize
};
// app/instance-initializers/asset-map.js
import Ember from 'ember';
import config from 'app/config/environment';
export function initialize(appInstance) {
const getAssetMap = new Ember.RSVP.Promise((resolve, reject) => {
const env = config.environment;
if (env === 'development' || env === 'test') {
resolve();
} else {
Ember.$.getJSON('assetMap.json', resolve).fail(reject);
}
});
let map = appInstance.lookup('impact:assets');
return getAssetMap.then((assets) => {
map.reopen({
assetMap: assets,
resolve: function(name) {
return assets.assets[name];
}
});
});
}
export default {
name: 'asset-map',
initialize
};
// app/components/i18n-image.js
import Ember from 'ember';
import config from 'app/config/environment';
export default Ember.Component.extend({
i18n: Ember.inject.service(),
file: null,
altText: '',
styles: '',
dataTest: '',
isLocal: Ember.computed('config', function() {
const env = config.environment;
return env === 'development' || env === 'test';
}),
// build source - depending on environment
src: Ember.computed('file', 'i18n.locale', 'isLocal', function() {
const locale = this.get('i18n.locale');
const name = this.get('file');
// for non-production like builds - ignore cdn, fingerprinting, etc.
if (this.get('isLocal')) {
return `/images/${locale}/${name}`;
}
// asset map is loaded in: instance-initializers/asset-map
const assets = this.assets;
const path = `images/${locale}/${name}`;
const cdn = config.APP.cdn;
const mapped = assets.resolve(path);
return `${cdn}${mapped}`;
})
});
// app/templates/components/i18n-image.hbs
<img src={{src}} ... />
// asset-map.json
{
"images/en/something.png": "somethingXYZ12341249158197.png",
"images/es/something.png": "something1234aaqwerasdflla.png"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment