mirror of https://github.com/rancher/ui.git
152 lines
3.9 KiB
JavaScript
152 lines
3.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';
|
|
import { isEmpty } from '@ember/utils';
|
|
|
|
export default Service.extend({
|
|
prefs: service(),
|
|
session: service(),
|
|
language: service('user-language'),
|
|
currentTheme: null,
|
|
updateTimer: null,
|
|
app: service(),
|
|
cookies: service(),
|
|
|
|
setupTheme() {
|
|
const cachedTheme = this.cookies.get(C.COOKIE.THEME);
|
|
const personalTheme = cachedTheme ? `ui-${ cachedTheme }` : undefined;
|
|
var defaultTheme = this.get('session').get(C.PREFS.THEME) || personalTheme;
|
|
var userTheme = this.get(`prefs.${ C.PREFS.THEME }`);
|
|
const isEmbedded = window.top !== window;
|
|
|
|
if ( userTheme ) {
|
|
this.setTheme(userTheme, false);
|
|
} else { // no user pref'd theme
|
|
if (isEmbedded && isEmpty(defaultTheme)) {
|
|
// on an upgrade if the user theme pref was never set and we're in the dashboard which defaults to ui-auto
|
|
defaultTheme = 'ui-auto';
|
|
}
|
|
|
|
this.setTheme(defaultTheme, true);
|
|
}
|
|
},
|
|
|
|
setTheme(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();
|
|
}
|
|
},
|
|
|
|
getTheme() {
|
|
return this.get(`prefs.${ C.PREFS.THEME }`);
|
|
},
|
|
|
|
setAutoUpdate() {
|
|
var self = this;
|
|
const watchDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const watchLight = window.matchMedia('(prefers-color-scheme: light)');
|
|
const watchNone = window.matchMedia('(prefers-color-scheme: no-preference)');
|
|
|
|
var nextHalfHour = C.THEME.AUTO_UPDATE_TIMER - Math.round(new Date().getTime()) % C.THEME.AUTO_UPDATE_TIMER;
|
|
|
|
if ( !this.updateTimer ) {
|
|
if ( watchDark.matches ) {
|
|
changed('ui-dark');
|
|
} else if ( watchLight.matches ) {
|
|
changed('ui-light');
|
|
} else {
|
|
changed(fromClock());
|
|
}
|
|
|
|
watchDark.addListener((e) => {
|
|
if ( e.matches ) {
|
|
changed('ui-dark');
|
|
}
|
|
});
|
|
|
|
watchLight.addListener((e) => {
|
|
if ( e.matches ) {
|
|
changed('ui-light');
|
|
}
|
|
});
|
|
|
|
watchNone.addListener((e) => {
|
|
if ( e.matches ) {
|
|
changed(fromClock());
|
|
}
|
|
});
|
|
}
|
|
|
|
this.set('updateTimer', later(() => {
|
|
return this.setAutoUpdate();
|
|
}, nextHalfHour));
|
|
|
|
function fromClock() {
|
|
const hour = new Date().getHours();
|
|
|
|
if ( hour < C.THEME.START_HOUR || hour >= C.THEME.END_HOUR ) {
|
|
return 'ui-dark';
|
|
}
|
|
|
|
return 'ui-light';
|
|
}
|
|
|
|
function changed(newTheme) {
|
|
console.log('Theme change', newTheme);
|
|
self.set('currentTheme', newTheme);
|
|
self.writeStyleNode();
|
|
}
|
|
},
|
|
|
|
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);
|
|
}
|
|
}
|
|
},
|
|
|
|
});
|