340 lines
11 KiB
JavaScript
340 lines
11 KiB
JavaScript
(() => {
|
||
|
||
goog.require('ace');
|
||
goog.require('ace.ExtLanguageTools');
|
||
goog.require('layui');
|
||
goog.require('store');
|
||
goog.require('$.select2');
|
||
goog.require('$.fomanticUI');
|
||
goog.require('Mixly.XML');
|
||
goog.require('Mixly.LayerExt');
|
||
goog.require('Mixly.Msg');
|
||
goog.require('Mixly.BoardManager');
|
||
goog.require('Mixly.Config');
|
||
goog.require('Mixly.Env');
|
||
goog.require('Mixly.MJson');
|
||
goog.require('Mixly.Storage');
|
||
goog.require('Mixly.WebSocket.Socket');
|
||
goog.provide('Mixly.Setting');
|
||
|
||
const {
|
||
XML,
|
||
LayerExt,
|
||
Msg,
|
||
BoardManager,
|
||
Config,
|
||
Env,
|
||
MJson,
|
||
Storage,
|
||
Setting
|
||
} = Mixly;
|
||
|
||
const { LANG } = Msg;
|
||
const { element, form, layer } = layui;
|
||
const { USER, SOFTWARE } = Config;
|
||
|
||
Setting.ID = 'setting-menu';
|
||
Setting.CONFIG = {}
|
||
Setting.nowIndex = 0;
|
||
Setting.config = {};
|
||
|
||
Setting.init = () => {
|
||
element.tab({
|
||
headerElem: '#setting-menu-options>li',
|
||
bodyElem: '#setting-menu-body>.menu-body'
|
||
});
|
||
element.render('nav', 'setting-menu-filter');
|
||
Setting.addOnchangeOptionListener();
|
||
|
||
form.on('switch(setting-theme-filter)', function(data) {
|
||
const { checked } = data.elem;
|
||
USER.theme = checked ? 'dark' : 'light';
|
||
$('body').removeClass('dark light')
|
||
.addClass(USER.theme);
|
||
$('html').attr('data-bs-theme', USER.theme);
|
||
Storage.user('/', USER);
|
||
});
|
||
|
||
form.on('submit(open-setting-dialog-filter)', function(data) {
|
||
Setting.onclick();
|
||
return false;
|
||
});
|
||
|
||
form.on('submit(board-reset-filter)', function(data) {
|
||
BoardManager.resetBoard((error) => {
|
||
if (error) {
|
||
console.log(error);
|
||
}
|
||
BoardManager.screenWidthLevel = -1;
|
||
BoardManager.screenHeightLevel = -1;
|
||
BoardManager.loadBoards();
|
||
BoardManager.updateBoardsCard();
|
||
});
|
||
return false;
|
||
});
|
||
}
|
||
|
||
Setting.menuInit = () => {
|
||
$('#setting-menu-options').children('.layui-this').removeClass('layui-this');
|
||
$('#setting-menu-options').children('li').first().addClass('layui-this');
|
||
$('#setting-menu-body').children('.layui-show').removeClass('layui-show');
|
||
$('#setting-menu-body').children('div').first().addClass('layui-show');
|
||
form.render(null, 'setting-form-filter');
|
||
form.val('setting-form-filter', USER);
|
||
}
|
||
|
||
Setting.onclick = () => {
|
||
Setting.menuInit();
|
||
let obj = $(".setting-menu-item").select2({
|
||
width: '100%',
|
||
minimumResultsForSearch: 10
|
||
});
|
||
Setting.configMenuSetValue(obj, USER);
|
||
element.render('collapse', 'menu-user-collapse-filter');
|
||
Setting.nowIndex = 0;
|
||
LayerExt.open({
|
||
title: [Msg.getLang('SETTING'), '36px'],
|
||
id: 'setting-menu-layer',
|
||
content: $('#' + Setting.ID),
|
||
shade: LayerExt.SHADE_ALL,
|
||
area: ['50%', '50%'],
|
||
min: ['400px', '200px'],
|
||
success: () => {
|
||
}
|
||
});
|
||
$('#setting-menu-user button').off().click((event) => {
|
||
const type = $(event.currentTarget).attr('value');
|
||
switch (type) {
|
||
case 'apply':
|
||
let oldTheme = USER.themeAuto? 'auto' : USER.theme;
|
||
let oldLanglage = USER.languageAuto? 'auto' : USER.language;
|
||
let updateTheme = false, updateLanguage = false;
|
||
let value = Setting.configMenuGetValue(obj);
|
||
for (let i in value) {
|
||
USER[i] = value[i];
|
||
}
|
||
updateTheme = oldTheme !== USER.theme;
|
||
updateLanguage = oldLanglage !== USER.language;
|
||
if (updateTheme) {
|
||
if (USER.theme === 'auto') {
|
||
const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
|
||
USER.theme = themeMedia.matches ? 'light' : 'dark';
|
||
USER.themeAuto = true;
|
||
} else {
|
||
USER.themeAuto = false;
|
||
}
|
||
$('body').removeClass('dark light')
|
||
.addClass(USER.theme);
|
||
$('html').attr('data-bs-theme', USER.theme);
|
||
}
|
||
if (updateLanguage) {
|
||
if (USER.language === 'auto') {
|
||
switch (navigator.language) {
|
||
case 'zh-CN':
|
||
USER.language = 'zh-hans';
|
||
break;
|
||
case 'zh-HK':
|
||
case 'zh-SG':
|
||
case 'zh-TW':
|
||
USER.language = 'zh-hant';
|
||
break;
|
||
default:
|
||
USER.language = 'en';
|
||
}
|
||
USER.languageAuto = true;
|
||
} else {
|
||
USER.languageAuto = false;
|
||
}
|
||
Msg.nowLang = USER.language ?? 'zh-hans';
|
||
}
|
||
if (updateTheme || updateLanguage) {
|
||
BoardManager.screenWidthLevel = -1;
|
||
BoardManager.screenHeightLevel = -1;
|
||
BoardManager.updateBoardsCard();
|
||
}
|
||
Storage.user('/', USER);
|
||
layer.closeAll(() => {
|
||
XML.renderAllTemplete();
|
||
layer.msg(Msg.getLang('CONFIG_UPDATE_SUCC'), { time: 1000 });
|
||
});
|
||
break;
|
||
case 'reset':
|
||
Setting.configMenuReset(obj);
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
|
||
Setting.addOnchangeOptionListener = () => {
|
||
element.on('tab(setting-menu-filter)', function(data) {
|
||
const { index } = data;
|
||
const type = $(data.elem.prevObject).data('type');
|
||
if (type === 'import-board') {
|
||
if (data.index !== Setting.nowIndex) {
|
||
goog.isElectron && BoardManager.onclickImportBoards();
|
||
} else {
|
||
layui.table.resize('cloud-boards-table');
|
||
}
|
||
} else if (type === 'ws-update') {
|
||
if (data.index !== Setting.nowIndex) {
|
||
$('#setting-menu-update').loading({
|
||
background: USER.theme === 'dark' ? '#807b7b' : '#fff',
|
||
opacity: 1,
|
||
animateTime: 0,
|
||
imgSrc: 1
|
||
});
|
||
const { Socket } = Mixly.WebSocket;
|
||
Socket.updating = true;
|
||
Socket.sendCommand({
|
||
obj: 'Socket',
|
||
func: 'getConfigByUrl',
|
||
args: [ SOFTWARE.configUrl ]
|
||
});
|
||
}
|
||
} else if (type === 'nw-update') {
|
||
fetch('/api/check-update', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
const {
|
||
localVersion,
|
||
cloudVersion,
|
||
needsUpdate,
|
||
cloudFile
|
||
} = result;
|
||
Setting.refreshUpdateMenuStatus(localVersion, cloudVersion, needsUpdate, cloudFile);
|
||
})
|
||
.catch((error) => {
|
||
console.log(error)
|
||
});
|
||
}
|
||
Setting.nowIndex = index;
|
||
});
|
||
}
|
||
|
||
Setting.configMenuReset = (obj) => {
|
||
for (let i = 0; i < obj.length; i++) {
|
||
let $item = $(obj[i]);
|
||
let newValue = $item.children('option').first().val();
|
||
$item.val(newValue).trigger("change");
|
||
}
|
||
}
|
||
|
||
Setting.configMenuSetValue = (obj, value) => {
|
||
let newValue = { ...value };
|
||
if (value.themeAuto) {
|
||
newValue.theme = 'auto';
|
||
}
|
||
if (value.languageAuto) {
|
||
newValue.language = 'auto';
|
||
}
|
||
for (let i = 0; i < obj.length; i++) {
|
||
let $item = $(obj[i]);
|
||
let type = $item.attr('value');
|
||
if (!newValue[type]) {
|
||
continue;
|
||
}
|
||
$item.val(newValue[type]).trigger("change");
|
||
}
|
||
}
|
||
|
||
Setting.configMenuGetValue = (obj) => {
|
||
let config = {};
|
||
for (let i = 0; i < obj.length; i++) {
|
||
let $item = $(obj[i]);
|
||
config[$item.attr('value')] = $item.val();
|
||
}
|
||
return config;
|
||
}
|
||
|
||
Setting.refreshUpdateMenuStatus = (localVersion, cloudVersion, needsUpdate, url) => {
|
||
const $serverDiv = $('#setting-menu-update-server');
|
||
const $btnDiv = $('#setting-menu-update > div:nth-child(2)');
|
||
const $mixlyProgress = $serverDiv.find('.mixly-progress');
|
||
$serverDiv.find('span').css('display', 'none');
|
||
$mixlyProgress.hide();
|
||
$mixlyProgress.find('.progress').show();
|
||
$mixlyProgress.removeClass('swinging indeterminate');
|
||
if (needsUpdate) {
|
||
$serverDiv.find('span.obsolete').css('display', 'inline-block');
|
||
$serverDiv.find('text').text(`${localVersion} → ${cloudVersion}`);
|
||
|
||
} else {
|
||
$serverDiv.find('span.latest').css('display', 'inline-block');
|
||
$serverDiv.find('text').text(localVersion);
|
||
}
|
||
if (needsUpdate) {
|
||
$btnDiv.css('display', 'flex');
|
||
$btnDiv.children('button').off().one('click', (event) => {
|
||
const eventSource = new EventSource(`/api/download?url=${encodeURIComponent(url)}&cloudVersion=${cloudVersion}`);
|
||
$mixlyProgress.show();
|
||
eventSource.onmessage = function(event) {
|
||
const data = JSON.parse(event.data);
|
||
if (data.type === 'progress') {
|
||
$mixlyProgress.progress({
|
||
percent: data.progress
|
||
});
|
||
} else if (data.type === 'unzip') {
|
||
$mixlyProgress.addClass('swinging indeterminate');
|
||
$mixlyProgress.progress({
|
||
percent: 100
|
||
});
|
||
$mixlyProgress.find('.progress').hide();
|
||
layer.msg('解压中...', { time: 1000 });
|
||
} else if (data.type === 'complete') {
|
||
$mixlyProgress.removeClass('swinging indeterminate');
|
||
layer.msg('更新完成！5秒后自动刷新...', { time: 1000 });
|
||
eventSource.close();
|
||
setTimeout(function(){
|
||
window.location.reload();
|
||
}, 5000);
|
||
}
|
||
};
|
||
eventSource.onerror = function(error) {
|
||
layer.msg('下载失败！5秒后自动刷新...', { time: 1000 });
|
||
setTimeout(function(){
|
||
window.location.reload();
|
||
}, 5000);
|
||
eventSource.close();
|
||
};
|
||
});
|
||
} else {
|
||
$btnDiv.css('display', 'none');
|
||
}
|
||
}
|
||
|
||
Setting.showUpdateMessage = (data) => {
|
||
Setting.ace.updateSelectionMarkers();
|
||
const { selection, session } = Setting.ace;
|
||
const initCursor = selection.getCursor();
|
||
Setting.ace.gotoLine(session.getLength());
|
||
selection.moveCursorLineEnd();
|
||
Setting.ace.insert(data);
|
||
Setting.ace.gotoLine(session.getLength());
|
||
selection.moveCursorLineEnd();
|
||
}
|
||
|
||
Setting.createAceEditor = (container, language = 'txt', tabSize = 4) => {
|
||
let codeEditor = ace.edit(container);
|
||
if (USER.theme === 'dark') {
|
||
codeEditor.setTheme('ace/theme/dracula');
|
||
} else {
|
||
codeEditor.setTheme('ace/theme/xcode');
|
||
}
|
||
codeEditor.getSession().setMode(`ace/mode/${language}`);
|
||
codeEditor.getSession().setTabSize(tabSize);
|
||
codeEditor.setFontSize(15);
|
||
codeEditor.setShowPrintMargin(false);
|
||
codeEditor.setReadOnly(true);
|
||
codeEditor.setScrollSpeed(0.8);
|
||
codeEditor.setShowPrintMargin(false);
|
||
codeEditor.renderer.setShowGutter(false);
|
||
codeEditor.setValue('', -1);
|
||
return codeEditor;
|
||
}
|
||
|
||
})(); |