diff --git a/assets/options.css b/assets/options.css index 13374ae7..f7f67329 100644 --- a/assets/options.css +++ b/assets/options.css @@ -1,12 +1,12 @@ #options { display: none; font-size: 15px; - color: #595959 + color: #595959; + font-family: consolas, monaco,"微软雅黑"; + padding-bottom: 30px } #options *{ - margin: 0; - padding: 0; box-sizing: border-box; } @@ -127,7 +127,7 @@ #options table td { border-collapse: collapse; - padding: 12px 9px; + padding: 6px; word-break: break-all; } @@ -152,6 +152,120 @@ margin-right: 5px } -#options img{ +#options .logo{ width: 32px; +} + +#options .addBtn{ + position: absolute; + right: 5px; + bottom: 2px; + border-radius: 4px; + background: #00af2c; + color: white; + padding: 2px; + cursor: pointer; +} + +#options .addBtn:hover{ + background: #068506; + transition: 0.5s; +} + +#options .foot{ + position: fixed; + height: 30px; + right: 0px; + bottom: 0px; + left: 0px; + background: #f3f3f3; + box-shadow: 0px 0px 9px 0px #00000030; + padding: 5px; +} + +#options span{ + margin-right: 10px; +} + +#options span.editBtn{ + font-size: 16px; + cursor: pointer; + color: #00af2c; +} +#options span.delBtn{ + font-size: 16px; + cursor: pointer; + color: #ed5b49 +} + +#options span.editBtn:hover{ + color: #057205; +} + +#options span.delBtn:hover{ + color: #bd3523; +} + +#options #customize{ + position: fixed; + right: -370px; + top: 0; + bottom: 0; + padding: 30px; + box-shadow: 0px 0px 9px 0px #00000030; + color: black; + background: white; +} + +#options #customize p{ + line-height: 2.5rem; +} + +#options #customize input{ + width: 300px; + height: 25px; + border-bottom: 1px solid #dbdbdb; + border-top:0px; + border-left:0px; + border-right:0px; + font-size: 15px +} + +#options #customize input:hover { + border-bottom-color: #9e9e9ec7; + transition: 0.25s; +} + +#options #customize input:focus { + outline: none; + border-bottom-color: #0277BD; + transition: 0.5s; +} + +#options #customize button{ + width: 150px; + height: 30px; + border-width: 0px; + border-radius: 3px; + cursor: pointer; + outline: none; + color: white; +} + +#options #customize button.cancelBtn{ + background: #808080c9; +} + +#options #customize button.saveBtn{ + background: #1E90FF; +} + +#options #customize button.saveBtn:hover{ + background: #5599FF; + transition: 0.5s; +} + +#options #customize button.cancelBtn:hover{ + background: #a5a2a2c9; + transition: 0.5s; } \ No newline at end of file diff --git a/assets/options.js b/assets/options.js index e405ad99..70877e44 100644 --- a/assets/options.js +++ b/assets/options.js @@ -1,117 +1,174 @@ -// 默认手册 -getDefaultFeatures = () => { - return { +// 默认和自定义手册 +getAllFeatures = () => { + var defaultFts = { "linux": { - "code": "linux", - "explain": "linux命令大全", - "cmds": ["linux命令"], - "icon": "logo/linux.png" + features: { + "code": "linux", + "explain": "linux命令大全", + "cmds": ["linux命令"], + "icon": "logo/linux.png" + }, + type: "default" }, "php": { - "code": "php", - "explain": "官方php函数文档", - "cmds": ["php函数"], - "icon": "logo/php.png" + features: { + "code": "php", + "explain": "官方php函数文档", + "cmds": ["php函数"], + "icon": "logo/php.png" + }, + type: "default" }, "python": { - "code": "python", - "explain": "官方python标准库及常用第三方库文档", - "cmds": ["python库"], - "icon": "logo/python.png" + features: { + "code": "python", + "explain": "官方python标准库及常用第三方库文档", + "cmds": ["python库"], + "icon": "logo/python.png" + }, + type: "default" }, "c": { - "code": "c", - "explain": "C语言函数速查", - "cmds": ["C函数"], - "icon": "logo/c.png" + features: { + "code": "c", + "explain": "C语言函数速查", + "cmds": ["C函数"], + "icon": "logo/c.png" + }, + type: "default" }, "vim": { - "code": "vim", - "explain": "vim命令大全", - "cmds": ["vim命令"], - "icon": "logo/vim.png" + features: { + "code": "vim", + "explain": "vim命令大全", + "cmds": ["vim命令"], + "icon": "logo/vim.png" + }, + type: "default" }, "git": { - "code": "git", - "explain": "git命令概览", - "cmds": ["git命令"], - "icon": "logo/git.png" + features: { + "code": "git", + "explain": "git命令概览", + "cmds": ["git命令"], + "icon": "logo/git.png" + }, + type: "default" }, "docker": { - "code": "docker", - "explain": "docker常用命令", - "cmds": ["docker命令"], - "icon": "logo/docker.png" + features: { + "code": "docker", + "explain": "docker常用命令", + "cmds": ["docker命令"], + "icon": "logo/docker.png" + }, + type: "default" }, "sql": { - "code": "sql", - "explain": "sql操作手册", - "cmds": ["sql手册"], - "icon": "logo/sql.png" + features: { + "code": "sql", + "explain": "sql操作手册", + "cmds": ["sql手册"], + "icon": "logo/sql.png" + }, + type: "default" }, "utools": { - "code": "utools", - "explain": "uTools的API文档", - "cmds": ["uToolsAPI"], - "icon": "logo/utools.png" + features: { + "code": "utools", + "explain": "uTools的API文档", + "cmds": ["uToolsAPI"], + "icon": "logo/utools.png" + }, + type: "default" } }; + var db = utools.db.get("customFts"); + var customFts = db ? db.data : {} + var allFts = Object.assign(defaultFts, customFts); + return allFts; } + // 配置页面 showOptions = () => { $("#options").show(); - const dFeatures = getDefaultFeatures(); - var cFeatures = utools.getFeatures(); + var currentFts = utools.getFeatures(); + var allFts = getAllFeatures(); let featureList = '
关键字 | 说明 | 启用 | 主输入框搜索 | |
![]() |
- ${cmds} | ${dFeatures[f].explain} | + var editBtn = "" + var logoDir = "" + if (allFts[fts].type == "custom") { + editBtn = `✎ + ✘`; + logoDir = allFts[fts].path + '/'; + } + featureList += ` | |
![]() |
+ ${cmds} | ${features.explain} | ` + ${editBtn}` }; - featureList += ' |
名称:
+ +关键字:
+ +说明:
+ +路径:
+ ++
` + $("#options").append(customWindow) + $("#customize").animate({ right: '0px'}); +} + // 监听开关 $("#options").on('change', 'input[type=checkbox]', function () { - const dFeatures = getDefaultFeatures(); + var allFts = getAllFeatures(); var id = $(this).attr('id').split('_'); var code = id[0] if (id[1] == '1') { if (!utools.removeFeature(code)) { - utools.setFeature(dFeatures[code]); + utools.setFeature(allFts[code].features); $(`#${code}_2`).prop('disabled', false); } else { $(`#${code}_2`).prop('checked', false); $(`#${code}_2`).prop('disabled', true); } } else { - var featureConf = dFeatures[code]; + var featureConf = allFts[code].features; if($(this).prop('checked')){ featureConf.cmds.push({ "type": "over", @@ -121,4 +178,68 @@ $("#options").on('change', 'input[type=checkbox]', function () { } utools.setFeature(featureConf); } -}); \ No newline at end of file +}); + +$("#options").on('click', '.addBtn', function () { + showCustomize(); +}) + +$("#options").on('click', '.cancelBtn', function () { + $("#customize").animate({ right: '-370px'}); +}) + +$("#options").on('click', '.editBtn', function () { + var code = $(this).attr('code'); + var data = utools.db.get("customFts").data[code]; + showCustomize(); + $("#code").attr('disabled', true); + $('#code').val(data.features.code); + $('#kw').val(data.features.cmds.toString()); + $('#desc').val(data.features.explain); + $('#path').val(data.path); +}) + +$("#options").on('click', '.delBtn', function () { + var code = $(this).attr('code'); + var db = utools.db.get("customFts") + var data = db.data; + delete data[code]; + utools.removeFeature(code); + utools.db.put({ _id: "customFts", data: data, _rev: db._rev }); + showOptions(); +}) + +$("#options").on('click', '.saveBtn', function () { + var code = $('#code').val() + var allFts = getAllFeatures(); + if (code in allFts && $("#code").prop('disabled') == false) { + $('#code').css({ 'border-bottom-color': '#ec1212' }) + utools.showNotification('名称与现有的手册重复!') + } else { + var kw = $('#kw').val().split(','); + var desc = $('#desc').val(); + var p = $('#path').val(); + $("#customize").animate({ right: '-370px' }); + var pushData = {}; + pushData[code] = { + features: { + "code": code, + "explain": desc, + "cmds": kw, + "icon": `${p}/logo/${code}.png` + }, + path: p, + type: "custom" + } + var db = utools.db.get("customFts"); + if (db) { + var rev = db._rev + var data = db.data + data[code] = pushData[code]; + utools.db.put({ _id: "customFts", data: data, _rev: rev }); + } else { + utools.db.put({ _id: "customFts", data: pushData }); + } + showOptions(); + } +})