811 lines
37 KiB
JavaScript
811 lines
37 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2024
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Created on 2/5/2021.
|
|
*/
|
|
|
|
define([
|
|
'core'
|
|
], function () {
|
|
'use strict';
|
|
|
|
!Common.UI && (Common.UI = {});
|
|
|
|
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': {
|
|
text: locale.txtThemeSystem || 'Same as system',
|
|
type: THEME_TYPE_SYSTEM,
|
|
source: 'static',
|
|
},
|
|
'theme-light': {
|
|
text: locale.txtThemeLight || 'Light',
|
|
type: 'light',
|
|
source: 'static',
|
|
skeleton: {
|
|
css: `.loadmask {--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
|
|
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
|
|
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f7f7f7;
|
|
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
|
|
--sk-background-toolbar-header-slide: #BE664F; --sk-background-toolbar-header-cell: #40865c;
|
|
--sk-background-toolbar-header-visio: #444796;
|
|
--sk-background-toolbar-tab: rgba(0,0,0,.15); --sk-background-toolbar-button: #d8dadc;
|
|
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
|
|
--sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
|
|
--sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05);
|
|
--sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
|
|
--sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
|
|
--sk-border-radius-formula-field: 0px; --sk-layout-padding-placeholder: 46px auto;
|
|
}`
|
|
},
|
|
},
|
|
'theme-classic-light': {
|
|
text: locale.txtThemeClassicLight || 'Classic Light',
|
|
type: 'light',
|
|
source: 'static',
|
|
skeleton: {
|
|
css: `.loadmask {--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
|
|
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
|
|
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
|
|
--sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c;
|
|
--sk-background-toolbar-header-visio: #444796;
|
|
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
|
|
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #d8dadc;
|
|
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
|
|
--sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
|
|
--sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05);
|
|
--sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
|
|
--sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
|
|
--sk-border-radius-formula-field: 0px; --sk-layout-padding-placeholder: 46px auto;
|
|
}`
|
|
},
|
|
},
|
|
'theme-dark': {
|
|
text: locale.txtThemeDark || 'Dark',
|
|
type: 'dark',
|
|
source: 'static',
|
|
skeleton: {
|
|
css: `.theme-dark .loadmask, .theme-type-dark .loadmask {
|
|
--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
|
|
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
|
|
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
|
|
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
|
|
--sk-background-toolbar-header-visio: #2a2a2a;
|
|
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
|
|
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
|
|
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
|
|
--sk-canvas-background: #555; --sk-canvas-content-background: #fff;
|
|
--sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
|
|
--sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
|
|
--sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
|
|
--sk-border-radius-formula-field: 0px; --sk-layout-padding-placeholder: 46px auto;
|
|
}
|
|
.content-theme-dark {
|
|
--sk-canvas-content-background: #3a3a3a; --sk-canvas-page-border: #616161;
|
|
--sk-canvas-line: rgba(255,255,255,.05);
|
|
}`
|
|
},
|
|
},
|
|
'theme-contrast-dark': {
|
|
text: locale.txtThemeContrastDark || 'Dark Contrast',
|
|
type: 'dark',
|
|
source: 'static',
|
|
skeleton: {
|
|
css: `.theme-dark .loadmask, .theme-type-dark .loadmask {
|
|
--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
|
|
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
|
|
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
|
|
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
|
|
--sk-background-toolbar-header-visio: #2a2a2a;
|
|
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
|
|
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
|
|
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
|
|
--sk-canvas-background: #555; --sk-canvas-content-background: #fff;
|
|
--sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
|
|
--sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
|
|
--sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
|
|
--sk-border-radius-formula-field: 0px; --sk-layout-padding-placeholder: 46px auto;
|
|
}
|
|
.content-theme-dark {
|
|
--sk-canvas-content-background: #3a3a3a;
|
|
--sk-canvas-page-border: #616161; --sk-canvas-line: rgba(255,255,255,.05);
|
|
}`
|
|
},
|
|
},
|
|
'theme-gray': {
|
|
text: locale.txtThemeGray || 'Gray',
|
|
type: 'light',
|
|
source: 'static',
|
|
skeleton: {
|
|
css: `.loadmask {--sk-height-toolbar-controls: 66px;--sk-layout-padding-toolbar: 0;
|
|
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
|
|
--sk-background-toolbar-header-word: #f7f7f7; --sk-background-toolbar-header-pdf: #f7f7f7;
|
|
--sk-background-toolbar-header-slide: #f7f7f7;--sk-background-toolbar-header-cell: #f7f7f7;
|
|
--sk-background-toolbar-header-visio: #f7f7f7;
|
|
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
|
|
--sk-background-toolbar-tab: #e0e0e0; --sk-background-toolbar-button: #e0e0e0;
|
|
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
|
|
--sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
|
|
--sk-canvas-page-border: #ccc; --sk-canvas-line: rgba(0,0,0,.05);
|
|
--sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
|
|
--sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
|
|
--sk-border-radius-formula-field: 0px; --sk-layout-padding-placeholder: 46px auto;
|
|
}`
|
|
},
|
|
},
|
|
'theme-white': {
|
|
text: locale.txtThemeModernLight || 'White',
|
|
type: 'light',
|
|
source: 'static',
|
|
icons: {
|
|
cls: 'mod2',
|
|
}
|
|
},
|
|
'theme-night': {
|
|
text: locale.txtThemeModernDark || 'Night',
|
|
type: 'dark',
|
|
source: 'static',
|
|
icons: {
|
|
cls: 'mod2',
|
|
}
|
|
},
|
|
}
|
|
|
|
var name_colors = [
|
|
"toolbar-header-document",
|
|
"toolbar-header-spreadsheet",
|
|
"toolbar-header-presentation",
|
|
"toolbar-header-pdf",
|
|
"toolbar-header-visio",
|
|
|
|
"text-toolbar-header-on-background-document",
|
|
"text-toolbar-header-on-background-spreadsheet",
|
|
"text-toolbar-header-on-background-presentation",
|
|
"text-toolbar-header-on-background-pdf",
|
|
"text-toolbar-header-on-background-visio",
|
|
|
|
"background-normal",
|
|
"background-toolbar",
|
|
"background-toolbar-additional",
|
|
"background-primary-dialog-button",
|
|
"background-notification-popover",
|
|
"background-notification-badge",
|
|
"background-scrim",
|
|
"background-loader",
|
|
"background-accent-button",
|
|
"background-contrast-popover",
|
|
"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-text-select",
|
|
"highlight-accent-button-hover",
|
|
"highlight-accent-button-pressed",
|
|
"highlight-toolbar-tab-underline-document",
|
|
"highlight-toolbar-tab-underline-spreadsheet",
|
|
"highlight-toolbar-tab-underline-presentation",
|
|
"highlight-toolbar-tab-underline-pdf",
|
|
"highlight-toolbar-tab-underline-visio",
|
|
"highlight-header-tab-underline-document",
|
|
"highlight-header-tab-underline-spreadsheet",
|
|
"highlight-header-tab-underline-presentation",
|
|
"highlight-header-tab-underline-pdf",
|
|
"highlight-header-tab-underline-visio",
|
|
|
|
"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",
|
|
"border-contrast-popover",
|
|
|
|
"text-normal",
|
|
"text-normal-pressed",
|
|
"text-secondary",
|
|
"text-tertiary",
|
|
"text-link",
|
|
"text-link-hover",
|
|
"text-link-active",
|
|
"text-link-visited",
|
|
"text-inverse",
|
|
"text-toolbar-header",
|
|
"text-contrast-background",
|
|
"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-border",
|
|
"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-background",
|
|
"canvas-cell-title-background-hover",
|
|
"canvas-cell-title-background-selected",
|
|
"canvas-cell-title-border",
|
|
"canvas-cell-title-border-hover",
|
|
"canvas-cell-title-border-selected",
|
|
"canvas-cell-title-text",
|
|
|
|
"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",
|
|
"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",
|
|
|
|
"canvas-sheet-view-cell-background",
|
|
"canvas-sheet-view-cell-background-hover",
|
|
"canvas-sheet-view-cell-background-pressed",
|
|
"canvas-sheet-view-cell-title-label",
|
|
|
|
"canvas-freeze-line-1px",
|
|
"canvas-freeze-line-2px",
|
|
"canvas-select-all-icon",
|
|
|
|
"canvas-anim-pane-background",
|
|
"canvas-anim-pane-item-fill-selected",
|
|
"canvas-anim-pane-item-fill-hovered",
|
|
"canvas-anim-pane-button-fill",
|
|
"canvas-anim-pane-button-fill-hovered",
|
|
"canvas-anim-pane-button-fill-disabled",
|
|
"canvas-anim-pane-play-button-fill",
|
|
"canvas-anim-pane-play-button-outline",
|
|
"canvas-anim-pane-effect-bar-entrance-fill",
|
|
"canvas-anim-pane-effect-bar-entrance-outline",
|
|
"canvas-anim-pane-effect-bar-emphasis-fill",
|
|
"canvas-anim-pane-effect-bar-emphasis-outline",
|
|
"canvas-anim-pane-effect-bar-exit-fill",
|
|
"canvas-anim-pane-effect-bar-exit-outline",
|
|
"canvas-anim-pane-effect-bar-path-fill",
|
|
"canvas-anim-pane-effect-bar-path-outline",
|
|
"canvas-anim-pane-timeline-ruler-outline",
|
|
"canvas-anim-pane-timeline-ruler-tick",
|
|
|
|
"canvas-anim-pane-timeline-scroller-fill",
|
|
"canvas-anim-pane-timeline-scroller-outline",
|
|
"canvas-anim-pane-timeline-scroller-opacity",
|
|
"canvas-anim-pane-timeline-scroller-opacity-hovered",
|
|
"canvas-anim-pane-timeline-scroller-opacity-active",
|
|
|
|
"toolbar-height-controls",
|
|
"sprite-button-icons-uid",
|
|
];
|
|
var theme_props = {};
|
|
|
|
var get_current_theme_colors = function (c) {
|
|
const colors = c || name_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;
|
|
}
|
|
|
|
const validate_vars = function (obj) {
|
|
if ( obj ) {
|
|
let i = 0, count = 5;
|
|
for (const value of Object.values(obj)) {
|
|
if (value != "") {
|
|
return true;
|
|
}
|
|
|
|
if ( ++i < count )
|
|
break;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
var create_colors_css = function (id, colors) {
|
|
if ( !!colors && !!id ) {
|
|
var _css_array = [':root .', id, '{'];
|
|
for (var c in colors) {
|
|
if (c==='highlight-toolbar-tab-underline') {
|
|
_css_array.push('--', c + '-document', ':', colors[c], ';');
|
|
_css_array.push('--', c + '-spreadsheet', ':', colors[c], ';');
|
|
_css_array.push('--', c + '-presentation', ':', colors[c], ';');
|
|
_css_array.push('--', c + '-pdf', ':', colors[c], ';');
|
|
_css_array.push('--', c + '-visio', ':', colors[c], ';');
|
|
console.log("Obsolete: The 'highlight-toolbar-tab-underline' color for interface themes is deprecated. Please use 'highlight-toolbar-tab-underline-document', 'highlight-toolbar-tab-underline-presentation', etc. instead.");
|
|
} else
|
|
_css_array.push('--', c, ':', colors[c], ';');
|
|
}
|
|
|
|
_css_array.push('}');
|
|
return _css_array.join('');
|
|
}
|
|
}
|
|
|
|
var write_theme_css = function (id, css) {
|
|
if ( !!css ) {
|
|
var style = document.createElement('style');
|
|
style.id = id;
|
|
style.type = 'text/css';
|
|
style.innerHTML = css;
|
|
document.getElementsByTagName('head')[0].appendChild(style);
|
|
}
|
|
}
|
|
|
|
const normalize_theme_icons = t => {
|
|
if ( t.src && t.src.icons ) {
|
|
!t.icons && (t.icons = {});
|
|
|
|
if ( !!t.src.icons['sprite-buttons-base-url'] )
|
|
t.icons.basepath = t.src.icons['sprite-buttons-base-url'];
|
|
|
|
if ( !!t.src.icons['style-class-selector'] )
|
|
t.icons.src = t.src.icons['style-class-selector'];
|
|
}
|
|
};
|
|
|
|
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, src: item};
|
|
// write_theme_css(item.id, 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, src: obj};
|
|
// write_theme_css( obj.id, create_colors_css(obj.id, obj.colors) );
|
|
}
|
|
|
|
Common.NotificationCenter.trigger('uitheme:countchanged');
|
|
}
|
|
|
|
const check_launched_custom_theme = function () {
|
|
let theme_id = window.uitheme.id;
|
|
if ( themes_map[theme_id] ) {
|
|
if ( themes_map[theme_id].source != 'static') {
|
|
const m = document.body.className.match('theme-type-' + themes_map[theme_id].type);
|
|
if ( !m )
|
|
document.body.classList.add('theme-type-' + themes_map[theme_id].type);
|
|
else if ( m.length )
|
|
document.body.className = document.body.className.replace(/theme-type-(?:dark|ligth)/i, 'theme-type-' + themes_map[theme_id].type);
|
|
}
|
|
} else {
|
|
theme_id = get_system_default_theme().id;
|
|
|
|
document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
|
|
document.body.classList.add(theme_id, 'theme-type-' + themes_map[theme_id].type);
|
|
}
|
|
|
|
const s = Common.localStorage.getItem('ui-theme');
|
|
if (!s || get_ui_theme_name(s) !== theme_id) {
|
|
var theme_obj = {
|
|
id: theme_id,
|
|
type: themes_map[theme_id].type,
|
|
text: themes_map[theme_id].text,
|
|
colors: get_current_theme_colors(),
|
|
};
|
|
|
|
if ( themes_map[theme_id].icons )
|
|
theme_obj.icons = themes_map[theme_id].icons;
|
|
|
|
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
|
|
}
|
|
}
|
|
|
|
var get_themes_config = function (url) {
|
|
const me = this;
|
|
|
|
Common.Utils.loadConfig(url,
|
|
function ( obj ) {
|
|
if ( obj != 'error' ) {
|
|
parse_themes_object(obj);
|
|
check_launched_custom_theme();
|
|
} else {
|
|
console.warn('failed to load/parse themes.json');
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
var on_document_ready = function (el) {
|
|
// get_themes_config('../../common/main/resources/themes/themes.json');
|
|
if ( !Common.Controllers.Desktop.isActive() /*|| !Common.Controllers.Desktop.isOffline()*/ )
|
|
get_themes_config.call(this, '../../../../themes.json');
|
|
else
|
|
if ( Common.Controllers.Desktop.localThemes() ) {
|
|
parse_themes_object({'themes': Common.Controllers.Desktop.localThemes()});
|
|
check_launched_custom_theme();
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
var on_document_open = function (data) {
|
|
// if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
|
|
// this.api.asc_setContentDarkMode(this.isContentThemeDark());
|
|
// }
|
|
};
|
|
|
|
const is_theme_type_system = function (id) { return themes_map[id].type == THEME_TYPE_SYSTEM; }
|
|
const get_system_theme_type = function () {
|
|
if ( Common.Controllers.Desktop && Common.Controllers.Desktop.isActive() )
|
|
return Common.Controllers.Desktop.systemThemeType();
|
|
|
|
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 ?
|
|
window.uitheme.DEFAULT_DARK_THEME_ID : window.uitheme.DEFAULT_LIGHT_THEME_ID;
|
|
|
|
return {id: id, info: themes_map[id]};
|
|
};
|
|
|
|
const on_system_theme_dark = function (mql) {
|
|
if ( window.uitheme.is_theme_system() ) {
|
|
refresh_theme.call(this, true);
|
|
}
|
|
};
|
|
|
|
const apply_theme = function (id) {
|
|
window.uitheme.set_id(id);
|
|
|
|
const theme_id = window.uitheme.relevant_theme_id();
|
|
if ( !!themes_map[theme_id].src ) {
|
|
let t = themes_map[theme_id];
|
|
write_theme_css(t.src.id, create_colors_css(t.src.id, t.src.colors));
|
|
normalize_theme_icons(t);
|
|
|
|
delete t.src;
|
|
}
|
|
|
|
document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
|
|
document.body.classList.add(theme_id, 'theme-type-' + themes_map[theme_id].type);
|
|
|
|
let icons_base_url = getComputedStyle(document.body).getPropertyValue('--sprite-button-icons-base-url');
|
|
if ( !!themes_map[theme_id].icons ) {
|
|
if ( !!themes_map[theme_id].icons.basepath )
|
|
icons_base_url = themes_map[theme_id].icons.basepath;
|
|
else if ( icons_base_url )
|
|
themes_map[theme_id].icons.basepath = icons_base_url;
|
|
|
|
if ( themes_map[theme_id].icons.cls )
|
|
document.body.classList.add('theme-icons-cls-' + themes_map[theme_id].icons.cls);
|
|
}
|
|
|
|
if ( icons_base_url && !(window.uitheme.embedicons === true) ) {
|
|
window.uitheme.apply_icons_from_url(theme_id, icons_base_url);
|
|
}
|
|
|
|
if ( this.api.asc_setContentDarkMode )
|
|
if ( themes_map[theme_id].type == 'dark' ) {
|
|
this.api.asc_setContentDarkMode(this.isContentThemeDark());
|
|
Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark());
|
|
} else {
|
|
this.api.asc_setContentDarkMode(false);
|
|
}
|
|
|
|
const colors_obj = get_current_theme_colors();
|
|
if ( validate_vars(colors_obj) ) {
|
|
colors_obj.type = themes_map[theme_id].type;
|
|
colors_obj.name = theme_id;
|
|
this.api.asc_setSkin(colors_obj);
|
|
|
|
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
|
|
const theme_str = Common.localStorage.getItem("ui-theme");
|
|
let theme_id;
|
|
if ( theme_str ) {
|
|
const reid = /id":\s?"([\w-]+)/.exec(theme_str);
|
|
if ( reid[1] ) {
|
|
theme_id = reid[1];
|
|
}
|
|
}
|
|
|
|
if ( theme_id !== id ) {
|
|
|
|
// if ( themes_map[id].source != 'static' ) { // TODO: check writing styles
|
|
const theme_obj = Object.assign({id:id, colors: colors_obj},
|
|
themes_map[id]);
|
|
delete theme_obj.source;
|
|
|
|
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
|
|
}
|
|
}
|
|
}
|
|
theme_props = {};
|
|
}
|
|
|
|
const refresh_theme = function (force, caller) {
|
|
if ( force || Common.localStorage.getItem('ui-theme-id') != window.uitheme.id ) {
|
|
const theme_id = Common.localStorage.getItem('ui-theme-id');
|
|
|
|
if ( theme_id ) {
|
|
apply_theme.call(this, theme_id);
|
|
Common.NotificationCenter.trigger('uitheme:changed', theme_id, caller);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
init: function (api) {
|
|
['toolbar-header-document', 'toolbar-header-spreadsheet', 'toolbar-header-presentation', 'toolbar-header-pdf', 'toolbar-header-visio']
|
|
.forEach(function (i) {
|
|
document.documentElement.style.removeProperty('--' + i);
|
|
});
|
|
|
|
|
|
Common.Gateway.on('opendocument', on_document_open.bind(this));
|
|
$(window).on('storage', function (e) {
|
|
if ( e.key == 'ui-theme-id' && !Common.Controllers.Desktop.isActive() ) {
|
|
if ( !!e.originalEvent.newValue ) {
|
|
refresh_theme.call(this);
|
|
}
|
|
} else
|
|
if ( e.key == 'content-theme' ) {
|
|
this.setContentTheme(e.originalEvent.newValue, true, false);
|
|
}
|
|
}.bind(this))
|
|
|
|
this.api = api;
|
|
|
|
const theme_id = window.uitheme.relevant_theme_id();
|
|
if ( window.uitheme.type && themes_map[theme_id] &&
|
|
window.uitheme.type !== themes_map[theme_id].type )
|
|
{
|
|
apply_theme.call(this, window.uitheme.id);
|
|
}
|
|
|
|
const obj = get_current_theme_colors(name_colors);
|
|
obj.type = window.uitheme.type ? window.uitheme.type : themes_map[theme_id] ? themes_map[theme_id].type : THEME_TYPE_LIGHT;
|
|
obj.name = theme_id;
|
|
api.asc_setSkin(obj);
|
|
|
|
const is_content_dark = themes_map[theme_id] && themes_map[theme_id].type == 'dark' && window.uitheme.iscontentdark;
|
|
if ( api.asc_setContentDarkMode )
|
|
api.asc_setContentDarkMode(is_content_dark);
|
|
|
|
if ( !document.body.classList.contains('theme-type-' + obj.type) )
|
|
document.body.classList.add('theme-type-' + obj.type);
|
|
|
|
if ( !themes_map[theme_id] && window.uitheme && window.uitheme.id == theme_id ) {
|
|
themes_map[theme_id] = window.uitheme;
|
|
}
|
|
|
|
const comp_style = getComputedStyle(document.body);
|
|
if (themes_map[theme_id] && themes_map[theme_id].icons) {
|
|
if ( !document.querySelector('style#' + theme_id) && !(window.uitheme.embedicons === true) ) {
|
|
const icons_base_url = !!themes_map[theme_id].icons.basepath ? themes_map[theme_id].icons.basepath :
|
|
comp_style.getPropertyValue('--sprite-button-icons-base-url');
|
|
|
|
if ( icons_base_url )
|
|
window.uitheme.apply_icons_from_url(theme_id, icons_base_url);
|
|
}
|
|
|
|
if ( themes_map[theme_id].icons.cls ) {
|
|
document.body.classList.add('theme-icons-cls-' + themes_map[theme_id].icons.cls);
|
|
}
|
|
}
|
|
|
|
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) && !Common.Controllers.Desktop.isActive() )
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', on_system_theme_dark.bind(this));
|
|
Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
|
|
},
|
|
|
|
available: function () {
|
|
return !Common.Utils.isIE && !this.locked;
|
|
},
|
|
|
|
setAvailable: function (value) {
|
|
this.locked = !value;
|
|
},
|
|
|
|
map: function () {
|
|
if ( Common.Controllers.Desktop.isActive() && !Common.Controllers.Desktop.systemThemeSupported() ) {
|
|
const new_map = Object.assign({}, themes_map);
|
|
delete new_map['theme-system'];
|
|
|
|
return new_map;
|
|
}
|
|
return themes_map
|
|
},
|
|
|
|
get: function (id) {
|
|
return themes_map[id]
|
|
},
|
|
|
|
currentThemeId: function () {
|
|
return !!themes_map[window.uitheme.id] ? window.uitheme.id : window.uitheme.DEFAULT_LIGHT_THEME_ID;
|
|
},
|
|
|
|
currentThemeColor: function (token) {
|
|
return getComputedStyle(document.body).getPropertyValue(token);
|
|
},
|
|
|
|
defaultThemeId: function (type) {
|
|
return type == 'dark' ? window.uitheme.DEFAULT_LIGHT_THEME_ID : window.uitheme.DEFAULT_LIGHT_THEME_ID;
|
|
},
|
|
|
|
defaultTheme: function (type) {
|
|
return themes_map[this.defaultThemeId(type)]
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
isContentThemeDark: function () {
|
|
return window.uitheme.iscontentdark;
|
|
},
|
|
|
|
setContentTheme: function (mode, force, keep) {
|
|
var set_dark = mode == 'dark';
|
|
if ( set_dark != window.uitheme.iscontentdark || force ) {
|
|
window.uitheme.iscontentdark = set_dark;
|
|
|
|
if ( this.isDarkTheme() )
|
|
this.api.asc_setContentDarkMode(set_dark);
|
|
|
|
if ( !(keep === false) && Common.localStorage.getItem('content-theme') != mode )
|
|
Common.localStorage.setItem('content-theme', mode);
|
|
|
|
Common.NotificationCenter.trigger('contenttheme:dark', set_dark);
|
|
}
|
|
},
|
|
|
|
toggleContentTheme: function () {
|
|
window.uitheme.iscontentdark = !window.uitheme.iscontentdark;
|
|
Common.localStorage.setItem('content-theme', window.uitheme.iscontentdark ? 'dark' : 'light');
|
|
|
|
if ( this.isDarkTheme() )
|
|
this.api.asc_setContentDarkMode(window.uitheme.iscontentdark);
|
|
|
|
Common.NotificationCenter.trigger('contenttheme:dark', window.uitheme.iscontentdark);
|
|
},
|
|
|
|
setTheme: function (obj, caller) {
|
|
if ( !obj ) return;
|
|
|
|
const id = get_ui_theme_name(obj);
|
|
if ( themes_map[id] ) {
|
|
if ( !(id == window.uitheme.id) ) {
|
|
apply_theme.call(this, id);
|
|
|
|
Common.localStorage.setItem('ui-theme-id', id);
|
|
Common.NotificationCenter.trigger('uitheme:changed', id, caller);
|
|
}
|
|
}
|
|
},
|
|
|
|
refreshTheme: refresh_theme,
|
|
|
|
addTheme: function (obj) {
|
|
parse_themes_object(obj);
|
|
},
|
|
|
|
toggleTheme: function () {
|
|
// this.setTheme( this.isDarkTheme() ? id_default_light_theme : id_default_dark_theme );
|
|
},
|
|
|
|
getThemeColors: function() {
|
|
const theme_id = window.uitheme.relevant_theme_id();
|
|
const obj = get_current_theme_colors();
|
|
obj.type = themes_map[theme_id] ? themes_map[theme_id].type : 'light';
|
|
obj.name = theme_id;
|
|
return obj;
|
|
},
|
|
|
|
getThemeProps: function(prop) {
|
|
if (prop==='font') {
|
|
if (!theme_props[prop]) {
|
|
theme_props[prop] = {
|
|
size: document.documentElement.style.getPropertyValue("--font-size-base-app-custom") || window.getComputedStyle(document.body).getPropertyValue("--font-size-base") || '11px',
|
|
name: document.documentElement.style.getPropertyValue("--font-family-base-custom") || 'Arial, Helvetica, "Helvetica Neue", sans-serif'
|
|
};
|
|
}
|
|
} else if (prop==='tab-style') {
|
|
return (Common.Utils.isIE || Common.Controllers.Desktop && Common.Controllers.Desktop.isWinXp()) ? 'fill' : window.getComputedStyle(document.body).getPropertyValue("--toolbar-preferred-tab-style") || 'line';
|
|
} else if (prop==='small-btn-size') {
|
|
if (!theme_props[prop]) {
|
|
theme_props[prop] = window.getComputedStyle(document.body).getPropertyValue("--x-small-btn-size") || '20px';
|
|
}
|
|
}
|
|
return theme_props[prop];
|
|
}
|
|
}
|
|
})(Common.UI.Themes);
|
|
});
|