mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-07-01 05:23:54 +08:00
添加select2
This commit is contained in:
fofolee
parent
608943480c
commit
bd5930e3da
@ -239,6 +239,11 @@ let showCustomize = () => {
|
||||
$("#customize").remove();
|
||||
// $("#featureList").fadeOut()
|
||||
let options = `<option>${Object.keys(programs).join('</option><option>')}</option>`
|
||||
let allTags = []
|
||||
$('.sidebar li').each(function () {
|
||||
let val = $(this).text()
|
||||
if (val != "默认" && val != "未分类") allTags.push(`<option value=${val}>${val}</option>`)
|
||||
})
|
||||
let customWindow = `<div id="customize">
|
||||
<p><input type="text" id="code" style="display: none">
|
||||
<span class="word">模　式</span>
|
||||
@ -248,8 +253,8 @@ let showCustomize = () => {
|
||||
<option value="window">窗口匹配</option>
|
||||
<option value="files">文件匹配</option>
|
||||
</select>
|
||||
<span class="word" id="ruleWord">关键字</span><input type="text" id="rule" placeholder="多个关键字用逗号隔开"></p>
|
||||
<p><span class="word">说　明</span><input type="text" id="desc" placeholder="命令功能的描述">
|
||||
<span class="word" id="ruleWord">关键字</span><input class="customize" type="text" id="rule" placeholder="多个关键字用逗号隔开"></p>
|
||||
<p><span class="word">说　明</span><input class="customize" type="text" id="desc" placeholder="命令功能的描述">
|
||||
<img id="icon" src="">
|
||||
</p>
|
||||
<p>
|
||||
@ -258,23 +263,26 @@ let showCustomize = () => {
|
||||
<option value="simulation">内置环境</option>
|
||||
${options}
|
||||
</select>
|
||||
<span class="word">标　签</span><input type="text" id="tags" placeholder="添加标签，多个标签逗号隔开">
|
||||
<span class="word">标　签</span>
|
||||
<select id="tags" multiple="multiple">
|
||||
${allTags.join("")}
|
||||
</select>
|
||||
<input type="text" readonly id="iconame" placeholder="更改图标">
|
||||
</p>
|
||||
<p class="varoutput">
|
||||
<span class="word">变　量</span>
|
||||
<select id="vars">
|
||||
<option value="" style="display:none">插入特殊变量</option>
|
||||
<option value="" style="display:none"></option>
|
||||
<option value="{{isWin}}">是否Window系统, 返回1或0</option>
|
||||
<option value="{{LocalId}}">本机唯一ID</option>
|
||||
<option value="{{input}}" class="var regex">主输入框的文本</option>
|
||||
<option value="{{subinput}}">子输入框的文本</option>
|
||||
<option value="{{pwd}}" class="var window">文件管理器当前目录</option>
|
||||
<option value="{{WindowInfo}}" class="var window">当前窗口信息，返回JSON格式字符串</option>
|
||||
<option value="{{BrowserUrl}}">浏览器当前链接</option>
|
||||
<option value="{{ClipText}}">剪切板的文本</option>
|
||||
<option value="{{MatchedFiles}}" class="var files">匹配的文件，返回JSON格式字符串</option>
|
||||
<option value="{{subinput}}">子输入框的文本</option>
|
||||
<option value="{{input}}" class="var regex">主输入框的文本</option>
|
||||
<option value="{{pwd}}" class="var window">文件管理器当前目录</option>
|
||||
<option value="{{WindowInfo}}" class="var window">当前窗口信息，返回JSON格式字符串</option>
|
||||
<option value="{{SelectFile}}" class="var window">文件管理器选中的文件，不支持Linux</option>
|
||||
<option value="{{MatchedFiles}}" class="var files">匹配的文件，返回JSON格式字符串</option>
|
||||
</select>
|
||||
<span class="word">输　出</span>
|
||||
<select id="output">
|
||||
@ -307,14 +315,31 @@ let showCustomize = () => {
|
||||
<img id="win32" class="platform" src="./img/windows.svg">
|
||||
<img id="darwin" class="platform" src="./img/macos.svg">
|
||||
<img id="linux" class="platform" src="./img/linux.svg">
|
||||
<button class="cmdBtn save">保存</button>
|
||||
<button class="cmdBtn run">运行</button>
|
||||
<button class="cmdBtn cancel">取消</button>
|
||||
<button class="button cmdBtn save">保存</button>
|
||||
<button class="button cmdBtn run">运行</button>
|
||||
<button class="button cmdBtn cancel">取消</button>
|
||||
</p>`
|
||||
$("#options").append(customWindow)
|
||||
$("#icon").attr('src', 'logo/simulation.png');
|
||||
getSpecialVars()
|
||||
createEditor()
|
||||
$('#program, #type, #output').select2({
|
||||
width: '40%',
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
$('#vars').select2({
|
||||
width: '40%',
|
||||
placeholder: "插入特殊变量",
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
$('#tags').select2({
|
||||
width: '40%',
|
||||
placeholder: "选择或添加标签, 最多3个",
|
||||
tags: true,
|
||||
allowClear: true,
|
||||
tokenSeparators: [',', ' '],
|
||||
maximumSelectionLength: 3
|
||||
});
|
||||
$("#customize").animate({ top: '0px' });
|
||||
}
|
||||
|
||||
@ -389,20 +414,20 @@ let getSpecialVars = () => {
|
||||
}
|
||||
|
||||
// 重置变量下拉框
|
||||
let resetVars = () => {
|
||||
$('#vars').val("");
|
||||
$("#vars").css({ 'color': '#999' });
|
||||
}
|
||||
// let resetVars = () => {
|
||||
// $('#vars').val("");
|
||||
// $("#vars").css({ 'color': '#999' });
|
||||
// }
|
||||
|
||||
// 检查输出选项
|
||||
let outputCheck = () => {
|
||||
var output = $("#output").val()
|
||||
if (output == 'text' || output == 'html') {
|
||||
$(".selectText").hide()
|
||||
} else {
|
||||
$(".selectText").show()
|
||||
}
|
||||
}
|
||||
// let outputCheck = () => {
|
||||
// var output = $("#output").val()
|
||||
// if (output == 'text' || output == 'html') {
|
||||
// $(".selectText").hide()
|
||||
// } else {
|
||||
// $(".selectText").show()
|
||||
// }
|
||||
// }
|
||||
|
||||
// 检查模式选项
|
||||
let typeCheck = () => {
|
||||
@ -414,25 +439,25 @@ let typeCheck = () => {
|
||||
switch (type) {
|
||||
case 'key':
|
||||
$("#ruleWord").html("关键字");
|
||||
$(".var.regex, .var.window, .var.files").hide()
|
||||
$(".var.regex, .var.window, .var.files").prop("disabled", true)
|
||||
$("#rule").prop("placeholder", '多个关键字用逗号隔开');
|
||||
break;
|
||||
case 'regex':
|
||||
$("#ruleWord").html("正　则");
|
||||
$(".var.window, .var.files").hide()
|
||||
$(".var.regex").show()
|
||||
$(".var.window, .var.files").prop("disabled", true)
|
||||
$(".var.regex").prop("disabled", false)
|
||||
$("#rule").prop("placeholder", '匹配文本的正则，如 /.*?\\.exe$/i');
|
||||
break;
|
||||
case 'files':
|
||||
$("#ruleWord").html("正　则");
|
||||
$(".var.regex, .var.window").hide()
|
||||
$(".var.files").show()
|
||||
$(".var.regex, .var.window").prop("disabled", true)
|
||||
$(".var.files").prop("disabled", false)
|
||||
$("#rule").prop("placeholder", '匹配文件的正则，如 /.*?\\.exe$/i');
|
||||
break;
|
||||
case 'window':
|
||||
$("#ruleWord").html("进　程");
|
||||
$(".var.regex, .var.files").hide()
|
||||
$(".var.window").show()
|
||||
$(".var.regex, .var.files").prop("disabled", true)
|
||||
$(".var.window").prop("disabled", false)
|
||||
$("#rule").prop("placeholder", '窗口的进程名，多个用逗号隔开');
|
||||
break;
|
||||
default:
|
||||
@ -511,22 +536,22 @@ $("#options").on('click', '.editBtn', function () {
|
||||
var code = $(this).attr('code');
|
||||
var data = utools.db.get("customFts").data[code];
|
||||
showCustomize();
|
||||
data.tags && $('#tags').val(data.tags.join(","))
|
||||
data.tags && $('#tags').val(data.tags).trigger('change')
|
||||
var cmds = data.features.cmds[0]
|
||||
var platform = data.features.platform
|
||||
if (platform) ["win32", "darwin", "linux"].map(x => (!platform.includes(x) && $(`#${x}`).addClass('disabled')))
|
||||
$('#type').val(cmds.type)
|
||||
$('#type').val(cmds.type).trigger("change")
|
||||
if (cmds.type == 'regex' || cmds.type == 'files') {
|
||||
$('#rule').val(cmds.match);
|
||||
} else if (cmds.type == 'window') {
|
||||
$('#rule').val(cmds.match.app);
|
||||
} else {
|
||||
$('#type').val('key')
|
||||
$('#type').val('key').trigger("change")
|
||||
$('#rule').val(data.features.cmds.toString());
|
||||
}
|
||||
$('#code').val(code);
|
||||
$('#program').val(data.program);
|
||||
$('#output').val(data.output);
|
||||
$('#program').val(data.program).trigger("change");
|
||||
$('#output').val(data.output).trigger("change");
|
||||
$('#desc').val(data.features.explain);
|
||||
$("#icon").attr('src', data.features.icon);
|
||||
let mode = data.program;
|
||||
@ -537,10 +562,10 @@ $("#options").on('click', '.editBtn', function () {
|
||||
$('#customcodec').show().val(data.customOptions.codec);
|
||||
}
|
||||
window.editor.setValue(data.cmd);
|
||||
resetVars();
|
||||
// resetVars();
|
||||
typeCheck();
|
||||
programCheck();
|
||||
outputCheck();
|
||||
// outputCheck();
|
||||
})
|
||||
|
||||
// 添加模拟按键
|
||||
@ -674,8 +699,8 @@ let SaveCurrentCommand = async () => {
|
||||
Swal.fire('窗口模式无法使用{{input}}、{{MatchedFiles}}!')
|
||||
} else if (type == 'files' && cmd.includes('{{input}}', '{{MatchedFiles}}')) {
|
||||
Swal.fire('窗口模式无法使用{{input}}、{{MatchedFiles}}!')
|
||||
} else if (['text', 'html'].includes($('#output').val()) && cmd.includes('{{SelectText}}')) {
|
||||
Swal.fire('显示文本或html输出时无法使用{{SelectText}}!')
|
||||
// } else if (['text', 'html'].includes($('#output').val()) && cmd.includes('{{SelectText}}')) {
|
||||
// Swal.fire('显示文本或html输出时无法使用{{SelectText}}!')
|
||||
} else if (type == 'regex' && /^(|\/)\.[*+](|\/)$/.test($('#rule').val())) {
|
||||
Swal.fire('正则匹配 .* 和 .+ 已被uTools禁用！')
|
||||
}
|
||||
@ -758,7 +783,7 @@ let SaveCurrentCommand = async () => {
|
||||
output: output,
|
||||
hasSubInput: hasSubInput
|
||||
}
|
||||
if (tags) pushData.tags = tags.split(",").map(x => x.trim())
|
||||
if (tags) pushData.tags = tags
|
||||
if (program == 'custom') {
|
||||
pushData.customOptions = {
|
||||
"bin": $('#custombin').val(),
|
||||
@ -930,7 +955,6 @@ showCodeEditor = () => {
|
||||
createEditor()
|
||||
$(".CodeMirror").css({ height: '41rem' })
|
||||
$("#customize").css({ top: '0px', padding: '0px' });
|
||||
$("#program").css({ width: '90px', "margin-bottom": "5px", "height": "30px"})
|
||||
$("span.customscript > input").css({"height": "30px"})
|
||||
var db = getDB('codeHistory')
|
||||
window.editor.setOption("theme", "ambiance")
|
||||
@ -939,6 +963,10 @@ showCodeEditor = () => {
|
||||
window.editor.setValue(db.history.cmd)
|
||||
}
|
||||
programCheck()
|
||||
$('#program').select2({
|
||||
width: 140,
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
$("#options").show()
|
||||
}
|
||||
|
||||
@ -983,14 +1011,14 @@ $("#options").on('change', '#action', function () {
|
||||
})
|
||||
|
||||
// 输出选项改变时
|
||||
$("#options").on('change', '#output', function () {
|
||||
resetVars();
|
||||
outputCheck();
|
||||
})
|
||||
// $("#options").on('change', '#output', function () {
|
||||
// resetVars();
|
||||
// outputCheck();
|
||||
// })
|
||||
|
||||
// 方式选项改变时
|
||||
$("#options").on('change', '#type', function () {
|
||||
resetVars();
|
||||
// resetVars();
|
||||
typeCheck();
|
||||
})
|
||||
|
||||
|
||||
1
src/assets/plugins/select2/select2.min.css
vendored
Normal file
1
src/assets/plugins/select2/select2.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
src/assets/plugins/select2/select2.min.js
vendored
Normal file
2
src/assets/plugins/select2/select2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -329,7 +329,7 @@
|
||||
|
||||
#options #customize span.customscript > input {
|
||||
margin-left: 5px;
|
||||
width: 16%;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
#options #featureList {
|
||||
@ -351,6 +351,7 @@
|
||||
|
||||
#options #customize p {
|
||||
line-height: 1.25rem;
|
||||
margin: 13px 0;
|
||||
}
|
||||
|
||||
#options #customize .word {
|
||||
@ -365,28 +366,30 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#options #customize input {
|
||||
#options #customize input.customize,
|
||||
#options #customize .customscript input {
|
||||
width: 84%;
|
||||
height: 25px;
|
||||
height: 28px;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
font-size: 15px;
|
||||
margin-left: 13px
|
||||
margin-left: 10px;
|
||||
padding-left: 8px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#options #customize input#rule,
|
||||
#options #customize input#tags {
|
||||
#options #customize input#rule{
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#options #customize input:hover {
|
||||
#options #customize input.customize:hover{
|
||||
border-bottom-color: #9e9e9ec7;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#options #customize input:focus {
|
||||
#options #customize input.customize:focus {
|
||||
outline: none;
|
||||
border-bottom-color: #0277BD;
|
||||
transition: 0.5s;
|
||||
@ -423,25 +426,62 @@ input::-webkit-input-placeholder {
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#options #customize select {
|
||||
/* #options #customize select {
|
||||
width: 40%;
|
||||
height: 25px;
|
||||
margin-left: 3px;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-bottom: 1px solid #dbdbdb !important;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJAgMAAAB71iXHAAAADFBMVEUAAAAqPz8rN0csOEgGlpD7AAAAA3RSTlMABvwYJ91vAAAAGklEQVQI12OAgQNAaMDMwMAjw8DAVAAWgAEAPFADDsXseo4AAAAASUVORK5CYII=") no-repeat scroll right center transparent;
|
||||
-webkit-appearance: none;
|
||||
user-select: none;
|
||||
} */
|
||||
|
||||
/* select2 fix */
|
||||
#options #customize .select2-container .select2-selection--single,
|
||||
#options #customize .select2-container .select2-selection--multiple {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-radius: 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#options #customize select:hover {
|
||||
#options #customize .select2-container .select2-selection--multiple {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
#options #customize .select2-container--default .select2-selection--multiple {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
#options #customize .select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #3085d6;
|
||||
border: 1px solid #f1f1f1;
|
||||
color: white;
|
||||
margin-top: 0;
|
||||
text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
#options #customize .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#options #customize .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
|
||||
#options #customize .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
|
||||
background-color: #5da6eb;
|
||||
}
|
||||
/* select2 fix */
|
||||
|
||||
/* #options #customize select:hover {
|
||||
border-bottom-color: #9e9e9ec7;
|
||||
transition: 0.25s;
|
||||
}
|
||||
@ -462,7 +502,7 @@ input::-webkit-input-placeholder {
|
||||
#options #customize select option.var {
|
||||
display: none;
|
||||
color: rgb(129, 76, 226);
|
||||
}
|
||||
} */
|
||||
|
||||
#options #customize input#iconame {
|
||||
width: 35%;
|
||||
@ -512,7 +552,7 @@ input::-webkit-input-placeholder {
|
||||
filter: grayscale();
|
||||
}
|
||||
|
||||
#options #customize button {
|
||||
#options #customize .button {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
border-width: 0px;
|
||||
@ -523,35 +563,35 @@ input::-webkit-input-placeholder {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#options #customize button.cmdBtn {
|
||||
#options #customize .button.cmdBtn {
|
||||
float: right;
|
||||
margin: 0px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#options #customize button.cancel {
|
||||
#options #customize .button.cancel {
|
||||
background: #808080c9;
|
||||
}
|
||||
|
||||
#options #customize button.cancel:hover {
|
||||
#options #customize .button.cancel:hover {
|
||||
background: #a5a2a2c9;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#options #customize button.save {
|
||||
#options #customize .button.save {
|
||||
background: #1E90FF;
|
||||
}
|
||||
|
||||
#options #customize button.save:hover {
|
||||
#options #customize .button.save:hover {
|
||||
background: #5599FF;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#options #customize button.run {
|
||||
#options #customize .button.run {
|
||||
background: #15a86bc9;
|
||||
}
|
||||
|
||||
#options #customize button.run:hover {
|
||||
#options #customize .button.run:hover {
|
||||
background: #27c583c9;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@ -6,12 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="assets/style/options.css">
|
||||
<link rel="stylesheet" href="assets/plugins/select2/select2.min.css">
|
||||
<script src="assets/plugins/jquery-3.3.1.min.js"></script>
|
||||
<script src="assets/plugins/sweetalert2.all.min.js"></script>
|
||||
<script src="assets/plugins/beautify.min.js"></script>
|
||||
<script src="assets/plugins/mousetrap/mousetrap.min.js"></script>
|
||||
<script src="assets/plugins/mousetrap/mousetrap-record.min.js"></script>
|
||||
<script src="assets/plugins/codemirrorloader.js"></script>
|
||||
<script src="assets/plugins/select2/select2.min.js"></script>
|
||||
<title>快捷命令</title>
|
||||
</head>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user