mirror of https://github.com/rancher/ui.git
117 lines
2.9 KiB
JavaScript
117 lines
2.9 KiB
JavaScript
import $ from 'jquery';
|
|
import { cancel, later } from '@ember/runloop';
|
|
import Service, { inject as service } from '@ember/service';
|
|
import C from 'shared/utils/constants';
|
|
|
|
export default Service.extend({
|
|
prefs : service(),
|
|
session : service(),
|
|
language : service('user-language'),
|
|
currentTheme : null,
|
|
updateTimer : null,
|
|
app: service(),
|
|
|
|
setupTheme: function() {
|
|
var userTheme = this.get(`prefs.${C.PREFS.THEME}`);
|
|
var defaultTheme = this.get('session').get(C.PREFS.THEME);
|
|
|
|
if (userTheme) {
|
|
if (userTheme !== defaultTheme) {
|
|
if (defaultTheme !== 'ui-auto') {
|
|
this.setTheme(userTheme);
|
|
} else {
|
|
this.setAutoUpdate();
|
|
}
|
|
|
|
this.get('session').set(C.PREFS.THEME, userTheme);
|
|
}
|
|
} else { // no user pref'd theme
|
|
this.set(`prefs.${C.PREFS.THEME}`, defaultTheme);
|
|
}
|
|
},
|
|
|
|
setTheme: function(newTheme, save=true) {
|
|
if ( save ) {
|
|
this.set(`prefs.${C.PREFS.THEME}`, newTheme);
|
|
}
|
|
|
|
if (this.get('updateTimer')) {
|
|
cancel(this.get('updateTimer'));
|
|
}
|
|
|
|
if (newTheme === 'ui-auto') {
|
|
this.setAutoUpdate();
|
|
} else {
|
|
this.set('currentTheme', newTheme);
|
|
this.writeStyleNode();
|
|
this.get('session').set(C.PREFS.THEME, newTheme);
|
|
}
|
|
|
|
},
|
|
|
|
getTheme: function() {
|
|
return this.get(`prefs.${C.PREFS.THEME}`);
|
|
},
|
|
|
|
setAutoUpdate: function() {
|
|
var hour = new Date().getHours();
|
|
var newTheme = 'ui-light';
|
|
var nextHalfHour = C.THEME.AUTO_UPDATE_TIMER - Math.round(new Date().getTime())%C.THEME.AUTO_UPDATE_TIMER;
|
|
var userTheme = this.get('currentTheme');
|
|
|
|
if ( hour < C.THEME.START_HOUR || hour >= C.THEME.END_HOUR ) {
|
|
newTheme = 'ui-dark';
|
|
}
|
|
|
|
if (userTheme !== newTheme) {
|
|
this.set('currentTheme', newTheme);
|
|
this.writeStyleNode();
|
|
this.get('session').set(C.PREFS.THEME, newTheme);
|
|
}
|
|
|
|
this.set('updateTimer', later(() => {
|
|
return this.setAutoUpdate();
|
|
}, nextHalfHour));
|
|
|
|
},
|
|
|
|
writeStyleNode() {
|
|
var application = this.get('app');
|
|
var $body = $('BODY');
|
|
let theme = this.get('currentTheme');
|
|
let lang = this.get(`session.${C.SESSION.LANGUAGE}`);
|
|
var direction = '';
|
|
let assets = application.get('baseAssets');
|
|
let version = application.get('version');
|
|
|
|
if ( !theme || !lang ) {
|
|
return;
|
|
}
|
|
|
|
$body.attr('class').split(/\s+/).forEach((cls) => {
|
|
if ( cls.indexOf('theme-') === 0 )
|
|
{
|
|
$body.removeClass(cls);
|
|
}
|
|
});
|
|
|
|
$body.addClass('theme-' + theme);
|
|
|
|
if (this.get('language').isRtl(lang)) {
|
|
direction = '.rtl';
|
|
}
|
|
|
|
updateHref('#theme', `${assets}assets/${theme}${direction}.css?${version}`);
|
|
updateHref('#vendor',`${assets}assets/vendor${direction}.css?${version}`);
|
|
|
|
function updateHref(node, neu) {
|
|
let elem = $(node);
|
|
let cur = elem.attr('href');
|
|
if ( cur !== neu ) {
|
|
elem.attr('href', neu);
|
|
}
|
|
}
|
|
},
|
|
|
|
});
|