web-apps/apps/common/main/lib/controller/Themes.js

469 lines
18 KiB
JavaScript
Raw Normal View History

2021-02-06 10:03:46 +00:00
/**
* Created by Maxim.Kadushkin on 2/5/2021.
*/
define([
'core'
], function () {
'use strict';
!Common.UI && (Common.UI = {});
2021-04-18 14:32:39 +00:00
Common.UI.Themes = new (function(locale) {
!locale && (locale = {});
const THEME_TYPE_LIGHT = 'light';
const THEME_TYPE_DARK = 'dark';
const THEME_TYPE_SYSTEM = 'system';
var themes_map = {
'theme-system': {
2022-04-14 12:11:57 +00:00
text: locale.txtThemeSystem || 'Same as system',
type: THEME_TYPE_SYSTEM,
source: 'static',
},
2021-04-18 14:32:39 +00:00
'theme-light': {
text: locale.txtThemeLight || 'Light',
2021-06-25 08:53:43 +00:00
type: 'light',
source: 'static',
2021-04-18 14:32:39 +00:00
},
'theme-classic-light': {
text: locale.txtThemeClassicLight || 'Classic Light',
2021-06-25 08:53:43 +00:00
type: 'light',
source: 'static',
2021-04-18 14:32:39 +00:00
},
'theme-dark': {
text: locale.txtThemeDark || 'Dark',
2021-06-25 08:53:43 +00:00
type: 'dark',
source: 'static',
2021-04-18 14:32:39 +00:00
},
}
2021-06-25 08:53:43 +00:00
if ( !!window.currentLoaderTheme ) {
themes_map[currentLoaderTheme.id] = {};
window.currentLoaderTheme = undefined;
}
2021-12-06 14:40:29 +00:00
var is_dark_mode_allowed = true;
2021-04-22 16:49:37 +00:00
var id_default_light_theme = 'theme-classic-light',
id_default_dark_theme = 'theme-dark';
var name_colors = [
2021-06-25 08:53:43 +00:00
"toolbar-header-document",
"toolbar-header-spreadsheet",
"toolbar-header-presentation",
"text-toolbar-header-on-background-document",
"text-toolbar-header-on-background-spreadsheet",
"text-toolbar-header-on-background-presentation",
"background-normal",
"background-toolbar",
"background-toolbar-additional",
"background-primary-dialog-button",
"background-tab-underline",
"background-notification-popover",
"background-notification-badge",
"background-scrim",
"background-loader",
2021-11-17 21:35:58 +00:00
"background-accent-button",
2021-11-17 21:35:25 +00:00
"background-contrast-popover",
2021-12-02 11:57:27 +00:00
"shadow-contrast-popover",
"highlight-button-hover",
"highlight-button-pressed",
"highlight-button-pressed-hover",
"highlight-primary-dialog-button-hover",
"highlight-header-button-hover",
"highlight-header-button-pressed",
"highlight-toolbar-tab-underline",
"highlight-text-select",
2021-11-17 21:35:58 +00:00
"highlight-accent-button-hover",
"highlight-accent-button-pressed",
"border-toolbar",
"border-divider",
"border-regular-control",
"border-toolbar-button-hover",
"border-preview-hover",
"border-preview-select",
"border-control-focus",
"border-color-shading",
"border-error",
2021-11-17 21:35:25 +00:00
"border-contrast-popover",
"text-normal",
"text-normal-pressed",
"text-secondary",
"text-tertiary",
"text-link",
2021-04-24 20:20:55 +00:00
"text-link-hover",
"text-link-active",
"text-link-visited",
"text-inverse",
"text-toolbar-header",
"text-contrast-background",
2021-09-23 16:49:02 +00:00
"text-alt-key-hint",
"icon-normal",
"icon-normal-pressed",
"icon-inverse",
"icon-toolbar-header",
"icon-notification-badge",
"icon-contrast-popover",
"icon-success",
"canvas-background",
"canvas-content-background",
"canvas-page-border",
"canvas-ruler-background",
"canvas-ruler-margins-background",
"canvas-ruler-mark",
"canvas-ruler-handle-border",
"canvas-ruler-handle-border-disabled",
"canvas-high-contrast",
"canvas-high-contrast-disabled",
"canvas-cell-border",
"canvas-cell-title-border",
"canvas-cell-title-border-hover",
"canvas-cell-title-border-selected",
"canvas-cell-title-hover",
"canvas-cell-title-selected",
"canvas-dark-cell-title",
"canvas-dark-cell-title-hover",
"canvas-dark-cell-title-selected",
"canvas-dark-cell-title-border",
"canvas-dark-cell-title-border-hover",
"canvas-dark-cell-title-border-selected",
2021-09-23 16:49:02 +00:00
"canvas-dark-content-background",
"canvas-dark-page-border",
"canvas-scroll-thumb",
"canvas-scroll-thumb-hover",
"canvas-scroll-thumb-pressed",
"canvas-scroll-thumb-border",
"canvas-scroll-thumb-border-hover",
"canvas-scroll-thumb-border-pressed",
"canvas-scroll-arrow",
"canvas-scroll-arrow-hover",
"canvas-scroll-arrow-pressed",
"canvas-scroll-thumb-target",
"canvas-scroll-thumb-target-hover",
"canvas-scroll-thumb-target-pressed"
];
var get_current_theme_colors = function (colors) {
var out_object = {};
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
var style = getComputedStyle(document.body);
colors.forEach(function (item, index) {
out_object[item] = style.getPropertyValue('--' + item).trim()
})
}
return out_object;
}
var create_colors_css = function (id, colors) {
if ( !!colors && !!id ) {
var _css_array = [':root .', id, '{'];
for (var c in colors) {
_css_array.push('--', c, ':', colors[c], ';');
}
_css_array.push('}');
return _css_array.join('');
}
}
var write_theme_css = function (css) {
if ( !!css ) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);
}
}
var parse_themes_object = function (obj) {
var curr_lang = Common.Locale.getCurrentLanguage(),
theme_label;
if ( !!obj.themes && obj.themes instanceof Array ) {
obj.themes.forEach(function (item) {
if ( !!item.id ) {
theme_label = !item.l10n || !item.l10n[curr_lang] ? item.name : item.l10n[curr_lang];
themes_map[item.id] = {text: theme_label, type: item.type};
write_theme_css(create_colors_css(item.id, item.colors));
} else
if ( typeof item == 'string' ) {
get_themes_config(item)
}
});
} else
if ( obj.id ) {
theme_label = !obj.l10n || !obj.l10n[curr_lang] ? obj.name : obj.l10n[curr_lang];
themes_map[obj.id] = {text: theme_label, type: obj.type};
write_theme_css( create_colors_css(obj.id, obj.colors) );
}
}
var get_themes_config = function (url) {
2021-06-25 08:53:43 +00:00
Common.Utils.loadConfig(url,
function ( obj ) {
if ( obj != 'error' ) {
parse_themes_object(obj);
2021-09-01 13:36:57 +00:00
} else {
console.warn('failed to load/parse themes.json');
2021-06-25 08:53:43 +00:00
}
}
2021-06-25 08:53:43 +00:00
);
// fetch(url, {
// method: 'get',
// headers: {
// 'Accept': 'application/json',
// },
// }).then(function(response) {
// if (!response.ok) {
// throw new Error('server error');
// }
// return response.json();
// }).then(function(response) {
// if ( response.then ) {
// // return response.json();
// } else {
// parse_themes_object(response);
//
// /* to break promises chain */
// throw new Error('loaded');
// }
// }).catch(function(e) {
// if ( e.message == 'loaded' ) {
// } else console.log('fetch error: ' + e);
// });
}
var on_document_ready = function (el) {
// get_themes_config('../../common/main/resources/themes/themes.json');
2022-02-05 14:30:22 +00:00
if ( !Common.Controllers.Desktop.isActive() || !Common.Controllers.Desktop.isOffline() )
get_themes_config('../../../../themes.json');
}
2021-06-25 08:03:05 +00:00
var get_ui_theme_name = function (objtheme) {
if ( typeof(objtheme) == 'string' &&
objtheme.startsWith("{") && objtheme.endsWith("}") )
{
objtheme = JSON.parse(objtheme);
}
if ( objtheme && typeof(objtheme) == 'object' )
return objtheme.id;
return objtheme;
}
2021-12-06 14:40:29 +00:00
var on_document_open = function (data) {
2021-12-13 15:24:48 +00:00
if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
this.api.asc_setContentDarkMode(this.isContentThemeDark());
2021-12-06 14:40:29 +00:00
}
};
2022-04-26 11:51:39 +00:00
const is_theme_type_system = function (id) { return themes_map[id].type == THEME_TYPE_SYSTEM; }
const get_system_theme_type = function () { return window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME_TYPE_DARK : THEME_TYPE_LIGHT; }
const get_system_default_theme = function () {
const id = get_system_theme_type() == THEME_TYPE_DARK ?
2022-04-26 11:51:39 +00:00
id_default_dark_theme : id_default_light_theme;
return {id: id, info: themes_map[id]};
};
2022-04-26 11:51:39 +00:00
const on_system_theme_dark = function (mql) {
if (Common.localStorage.getBool('ui-theme-use-system', false)) {
this.setTheme('theme-system');
}
};
2021-02-06 10:03:46 +00:00
return {
init: function (api) {
var me = this;
2021-03-13 21:20:01 +00:00
2021-12-06 14:40:29 +00:00
Common.Gateway.on('opendocument', on_document_open.bind(this));
2021-02-06 10:03:46 +00:00
$(window).on('storage', function (e) {
2021-06-25 08:03:05 +00:00
if ( e.key == 'ui-theme' || e.key == 'ui-theme-id' ) {
2021-12-03 13:02:31 +00:00
if ( !!e.originalEvent.newValue ) {
2021-12-03 21:10:35 +00:00
me.setTheme(e.originalEvent.newValue, true);
2021-12-02 21:22:21 +00:00
}
} else
if ( e.key == 'content-theme' ) {
me.setContentTheme(e.originalEvent.newValue, true);
console.log('changed content', e.originalEvent.newValue);
2021-02-06 10:03:46 +00:00
}
})
this.api = api;
2021-06-25 08:03:05 +00:00
var theme_name = get_ui_theme_name(Common.localStorage.getItem('ui-theme'));
2021-08-23 16:02:32 +00:00
if ( !theme_name ) {
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
2021-09-03 09:25:52 +00:00
document.body.classList.forEach(function (classname, i, o) {
2021-09-13 11:20:42 +00:00
if ( !theme_name && classname.startsWith('theme-') &&
!classname.startsWith('theme-type-') && themes_map[classname] )
2021-09-13 11:20:42 +00:00
{
2021-09-03 09:25:52 +00:00
theme_name = classname;
2021-09-24 14:12:58 +00:00
var theme_obj = {
id: theme_name,
type: themes_map[theme_name].type
2021-09-24 14:12:58 +00:00
};
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
2021-08-23 16:02:32 +00:00
}
2021-09-03 09:25:52 +00:00
});
2021-08-23 16:02:32 +00:00
}
2021-04-26 10:36:18 +00:00
if ( !themes_map[theme_name] )
2021-04-26 07:53:52 +00:00
theme_name = id_default_light_theme;
if ( !$('body').hasClass(theme_name) ) {
$('body').addClass(theme_name);
}
2021-02-06 10:03:46 +00:00
2021-05-25 14:16:00 +00:00
if ( !document.body.className.match(/theme-type-/) ) {
document.body.classList.add('theme-type-' + themes_map[theme_name].type);
}
var obj = get_current_theme_colors(name_colors);
2021-04-23 12:39:46 +00:00
obj.type = themes_map[theme_name].type;
2021-04-06 17:06:14 +00:00
obj.name = theme_name;
api.asc_setSkin(obj);
2022-04-26 11:51:39 +00:00
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', on_system_theme_dark.bind(this));
Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
2021-02-06 10:03:46 +00:00
},
available: function () {
2021-05-15 10:47:32 +00:00
return !Common.Utils.isIE && !this.locked;
},
setAvailable: function (value) {
this.locked = !value;
},
2021-04-18 14:32:39 +00:00
map: function () {
return themes_map
},
get: function (id) {
return themes_map[id]
},
currentThemeId: function () {
if ( Common.localStorage.getBool('ui-theme-use-system', false) )
return 'theme-system';
2021-06-28 14:26:13 +00:00
var t = Common.localStorage.getItem('ui-theme') || Common.localStorage.getItem('ui-theme-id');
2021-08-02 08:02:11 +00:00
var id = get_ui_theme_name(t);
return !!themes_map[id] ? id : id_default_light_theme;
2021-04-18 14:32:39 +00:00
},
2021-04-22 16:49:37 +00:00
defaultThemeId: function (type) {
return type == 'dark' ? id_default_dark_theme : id_default_light_theme;
2021-04-18 14:32:39 +00:00
},
2021-04-22 16:49:37 +00:00
defaultTheme: function (type) {
return themes_map[this.defaultThemeId(type)]
2021-02-06 10:03:46 +00:00
},
isDarkTheme: function (id) {
!id && (id = this.currentThemeId());
return (is_theme_type_system(id) ? get_system_default_theme().info.type : themes_map[id].type) == THEME_TYPE_DARK;
},
2021-07-02 13:15:54 +00:00
isContentThemeDark: function () {
return Common.localStorage.getItem("content-theme") == 'dark';
},
setContentTheme: function (mode, force) {
var set_dark = mode == 'dark';
if ( set_dark && !this.isDarkTheme() )
return;
if ( set_dark != this.isContentThemeDark() || force ) {
if ( this.api.asc_setContentDarkMode )
this.api.asc_setContentDarkMode(set_dark);
if ( Common.localStorage.getItem('content-theme') != mode )
Common.localStorage.setItem('content-theme', mode);
Common.NotificationCenter.trigger('contenttheme:dark', set_dark);
}
},
2021-07-02 13:15:54 +00:00
toggleContentTheme: function () {
var is_current_dark = this.isContentThemeDark();
is_current_dark ? Common.localStorage.setItem('content-theme', 'light') : Common.localStorage.setItem('content-theme', 'dark');
if ( this.api.asc_setContentDarkMode )
this.api.asc_setContentDarkMode(!is_current_dark);
Common.NotificationCenter.trigger('contenttheme:dark', !is_current_dark);
},
2021-06-25 08:03:05 +00:00
setTheme: function (obj, force) {
2021-12-02 21:22:21 +00:00
if ( !obj ) return;
2021-06-25 08:03:05 +00:00
var id = get_ui_theme_name(obj);
if ( is_theme_type_system(id) ) {
Common.localStorage.setBool('ui-theme-use-system', true);
id = get_system_default_theme().id;
} else {
Common.localStorage.setBool('ui-theme-use-system', false);
}
2021-05-12 14:20:01 +00:00
if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) {
2021-05-25 14:16:00 +00:00
document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
document.body.classList.add(id, 'theme-type-' + themes_map[id].type);
2021-02-06 10:03:46 +00:00
2021-05-28 12:12:22 +00:00
if ( this.api ) {
2021-12-06 14:40:29 +00:00
if ( this.api.asc_setContentDarkMode && is_dark_mode_allowed )
if ( themes_map[id].type == 'light' ) {
this.api.asc_setContentDarkMode(false);
} else {
this.api.asc_setContentDarkMode(this.isContentThemeDark());
Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark());
}
2021-05-28 12:12:22 +00:00
var obj = get_current_theme_colors(name_colors);
obj.type = themes_map[id].type;
obj.name = id;
2021-05-28 12:12:22 +00:00
this.api.asc_setSkin(obj);
}
2021-02-17 21:27:58 +00:00
2021-06-25 08:03:05 +00:00
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
var theme_obj = {
id: id,
type: obj.type,
};
2021-06-25 08:53:43 +00:00
if ( themes_map[id].source != 'static' ) {
theme_obj.colors = obj;
}
2021-06-25 08:03:05 +00:00
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
}
Common.localStorage.setItem('ui-theme-id', id);
2021-04-18 14:32:39 +00:00
Common.NotificationCenter.trigger('uitheme:changed', id);
2021-02-06 10:03:46 +00:00
}
},
toggleTheme: function () {
2021-04-22 16:49:37 +00:00
this.setTheme( this.isDarkTheme() ? id_default_light_theme : id_default_dark_theme );
2021-02-06 10:03:46 +00:00
}
}
2021-04-18 14:32:39 +00:00
})(Common.UI.Themes);
2021-04-06 17:06:14 +00:00
});