From c21fb57031ac2f05681a92754e4c876dbc71d2d3 Mon Sep 17 00:00:00 2001 From: fofolee Date: Sun, 12 Jul 2020 12:50:05 +0800 Subject: [PATCH] =?UTF-8?q?quickselect=E6=96=B0=E5=A2=9Ejson=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=EF=BC=8Cbugfix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/options.css | 26 +++++++++++- src/preload.js | 81 +++++++++++++++++++++++++----------- 2 files changed, 81 insertions(+), 26 deletions(-) diff --git a/src/assets/style/options.css b/src/assets/style/options.css index 20257d7..63eb002 100644 --- a/src/assets/style/options.css +++ b/src/assets/style/options.css @@ -774,13 +774,37 @@ li.CodeMirror-hint { #quickselect .select2-results__option { padding: 5px 10px; - max-height: 50px; + height: 40px; /* line-height: 50px; */ white-space: pre; text-overflow: ellipsis; overflow: hidden; } +#quickselect .select2-results__option .title { + font-size: 14px; + line-height: 20px; +} + +#quickselect .select2-results__option .description { + color: rgba(0, 0, 0, 0.5); + line-height: 20px; + font-size: 12px; +} + +#quickselect .select2-results__option .icon { + width: 40px; + height: 40px; + line-height: 40px; + text-align: center; + float: left; + margin-right: 10px; +} + +#quickselect .select2-results__option .icon>img { + max-width: 40px; +} + #quickselect .select2-results__option--highlighted { background-color: #ebebeb; color: unset; diff --git a/src/preload.js b/src/preload.js index 3d5f7ce..203608a 100644 --- a/src/preload.js +++ b/src/preload.js @@ -172,33 +172,47 @@ quickcommand = { var index = choise.index var text = choise.text //do something... - }, [option1, option2...], { placeholder, enableHTML, closeOnSelect })` + }, [option1, option2...], { placeholder, optionType, enableSearch, closeOnSelect })` if (!(callback instanceof Function)) throw helps if (!(selects instanceof Array)) throw helps - opt.placeholder || (opt.placeholder = "搜索,支持拼音") - opt.enableHTML || (opt.enableHTML = false) + opt.optionType || (opt.optionType = 'plaintext') + typeof opt.placeholder == 'undefined' && (opt.placeholder = "搜索,支持拼音") + typeof opt.enableSearch == 'undefined' && (opt.enableSearch = true) typeof opt.closeOnSelect == 'undefined' && (opt.closeOnSelect = true) if ($('#quickselect').length) $('#quickselect').remove() $("body").append(`
`) - var selectBoxNumbers = selects.length - var data = [] - for (let i = 0; i < selectBoxNumbers; i++) { - data.push({ id: i, text: selects[i] }) - } + let item, data = [] + selects.forEach((s, i) => { + item = {id: i} + if (opt.optionType == 'json') { + item.text = '' + Object.keys(s).forEach(k => item[k] = s[k]) + s.icon && (item.text += `
`) + s.title && (item.text += `
${s.title}
`) + s.description && (item.text += `
${s.description}
`) + } else { + item.text = s + } + data.push(item) + }) + $('#selectBox').data('options', data) + $('#selectBox').data('type', opt.optionType) var prefer = { - data: data, + // data: data, width: "100%", dropdownParent: $("#quickselect"), closeOnSelect: opt.closeOnSelect, // 支持无限滚动 ajax: { transport: (params, success, failure) => { - let pageSize = 50 + let cont, pageSize = 50 let term = (params.data.term || '').toLowerCase() let page = (params.data.page || 1) - let items = $('#selectBox > option').length ? Array.from($('#selectBox > option').map(function (x) { return { id: x, text: $(this).html() } })) : data + let items = $('#selectBox').data('options') let results = items.filter(x => { - cont = opt.enableHTML ? x.text.replace(/<[^<>]+>/g, '') : x.text + if (opt.optionType == 'json') cont = x.title + else if (opt.optionType == 'html') cont = x.text.replace(/<[^<>]+>/g, '') + else cont = x.text return cont.toLowerCase().includes(term) || PinyinMatch.match(cont, term) }) let paged = results.slice((page - 1) * pageSize, page * pageSize) @@ -208,19 +222,22 @@ quickcommand = { }, } // 显示html时不转义标签 - if (opt.enableHTML) prefer.escapeMarkup = markup => markup + if (opt.optionType != 'plaintext') prefer.escapeMarkup = markup => markup $('#selectBox').select2(prefer) $('#selectBox').val(null).trigger('change') $('#selectBox').select2('open') + $("#quickselect .select2-search__field").focus() $('#quickselect .select2').hide() - opt.enableHTML || $('.select2-results').css({'line-height': '50px'}) - modWindowHeight($('.select2-results').height()) - utools.setSubInput(({text})=>{ + opt.optionType == 'plaintext' && $('.select2-results').css({'line-height': '40px'}) + modWindowHeight($('.select2-results').outerHeight()) + opt.enableSearch && utools.setSubInput(({text})=>{ $("#quickselect .select2-search__field").val(text).trigger('input') - modWindowHeight($('.select2-results').height()) + modWindowHeight($('.select2-results').outerHeight()) }, opt.placeholder) $('#selectBox').on('select2:select', function (e) { - callback({ index: $(this).val(), text: $(`option[value="${$(this).val()}"]`).text() }) + let result = $('#selectBox').data('options')[$(this).val()] + delete result.selected + callback(result) if (opt.closeOnSelect) { $('#selectBox').off('select2:select') utools.removeSubInput() @@ -230,15 +247,29 @@ quickcommand = { }, // 更新选项列表 - updateSelectList: function (opt) { + updateSelectList: function (selects) { if(!$('#selectBox').length) throw '当前没有选择列表, 请结合 quickcommand.showSelectList 使用' - var num = $('#quickselect > #selectBox > option').length - var newOption - if (opt instanceof Array) newOption = opt.map(o => new Option(o, num++, false, false).outerHTML).join('') - else newOption = new Option(opt, num, false, false) - $('#selectBox').append(newOption).val(null).trigger('change') + let data = $('#selectBox').data('options') + let num = data.length + let optionType = $('#selectBox').data('type') + selects instanceof Array || (selects = [selects]) + let item + selects.forEach(s => { + item = {id: num++} + if (optionType == 'json') { + item.text = '' + Object.keys(s).forEach(k => item[k] = s[k]) + s.icon && (item.text += `
`) + s.title && (item.text += `
${s.title}
`) + s.description && (item.text += `
${s.description}
`) + } else { + item.text = s + } + data.push(item) + }) + $('#selectBox').data('options', data).val(null).trigger('change') $("#quickselect .select2-search__field").trigger('input') - modWindowHeight($('.select2-results').height()) + modWindowHeight($('.select2-results').outerHeight()) }, // 显示文本输入框