Skip to content

Instantly share code, notes, and snippets.

@workmanw
Last active March 29, 2017 00:25
Show Gist options
  • Save workmanw/c687a500f402cdbfe049300acced9e33 to your computer and use it in GitHub Desktop.
Save workmanw/c687a500f402cdbfe049300acced9e33 to your computer and use it in GitHub Desktop.
Theme Service
import Ember from 'ember';
import ThemeMixin from 'app/mixins/theme';
export default Ember.Component.extend(ThemeMixin, {
tagName: 'button',
label: '',
themeType: 'button'
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
themeService: Ember.inject.service('theme'),
buttonSubmitTheme: Ember.computed('themeService.themes.[]', function() {
return this.get('themeService').lookupTheme('button', 'submit');
}),
buttonCancelTheme: Ember.computed('themeService.themes.[]', function() {
return this.get('themeService').lookupTheme('button', 'cancel');
}),
});
import Ember from 'ember';
export default Ember.Mixin.create({
attributeBindings: 'style',
themeService: Ember.inject.service('theme'),
themeType: '',
themeSubtype: '',
theme: Ember.computed('themeService.themes.[]', 'themeType', 'themeSubtype', function() {
let type = this.get('themeType');
let subtype = this.get('themeSubtype');
return this.get('themeService').lookupTheme(type, subtype);
}),
style: Ember.computed('theme.style', function() {
let style = this.get('theme.style') || '';
return Ember.String.htmlSafe(style);
})
});
import Ember from 'ember';
export default Ember.Route.extend({
themeService: Ember.inject.service('theme'),
afterModel() {
return this.get('themeService').fetchThemes();
}
});
import Ember from 'ember';
export let ThemeModel = Ember.Object.extend({
type: '',
subtype: '',
backgroundColor: '#FFF',
fontSize: '13px',
style: Ember.computed('backgroundColor', 'fontSize', function() {
let bgColor = this.get('backgroundColor');
let fontSize = this.get('fontSize');
return Ember.String.htmlSafe(`font-size: ${fontSize}; background-color: ${bgColor};`);
})
});
export default Ember.Service.extend({
init() {
this._super(...arguments);
this.set('themes', []);
},
themes: null,
fetchThemes() {
// NORMALLY AJAX
let themes = [
ThemeModel.create({ type: 'button', subtype: 'submit', backgroundColor: '#6FB400' }),
ThemeModel.create({ type: 'button', subtype: 'cancel', backgroundColor: '#98AAB3' })
];
this.set('themes', themes);
},
lookupTheme(type, subtype) {
return this.get('themes').find(theme => {
return theme.get('type') === type && theme.get('subtype') === subtype;
});
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
Submit Theme
{{input value=buttonSubmitTheme.backgroundColor}}
{{input value=buttonSubmitTheme.fontSize}}
<br>
Cancel Theme
{{input value=buttonCancelTheme.backgroundColor}}
{{input value=buttonCancelTheme.fontSize}}
<hr>
{{outlet}}
<br>
{{x-button label="Submit" themeSubtype="submit"}}
{{x-button label="Cancel" themeSubtype="cancel"}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment