From a7aecb4eefe1e6fe88be7b4667c6dedf52867603 Mon Sep 17 00:00:00 2001 From: fofolee Date: Mon, 1 Feb 2021 17:22:30 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20iconpicker=20=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/js/iconpicker.js | 83 ++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 42 deletions(-) diff --git a/src/assets/js/iconpicker.js b/src/assets/js/iconpicker.js index 5594ffc..5354ebe 100644 --- a/src/assets/js/iconpicker.js +++ b/src/assets/js/iconpicker.js @@ -1,7 +1,6 @@ -import qctemplates from "./qctemplates.js" - // 从 icons8 选择图标 -let getIcons8Icon = () => { +let getIcons8Icon = (selector, callback) => { + if (!$(selector).is('select')) return let showIcon = icon => { return $(` ${icon.name}`) } @@ -11,12 +10,14 @@ let getIcons8Icon = () => { } let showSelection = selection => { if (!selection.commonName) return selection.text - $('#networkImgUrl').val(`https://img.icons8.com/color/1x/${selection.commonName}.png`) + let imgUrl = `https://img.icons8.com/color/1x/${selection.commonName}.png` + getImg(imgUrl, src => { + src && callback(src) + }) return showIcon(selection) } - $('#networkImg').select2({ + $(selector).select2({ dataType: 'json', - width: '80%', delay: 250, ajax: { url: 'https://search.icons8.com/api/iconsets/v5/search', @@ -47,45 +48,43 @@ let getIcons8Icon = () => { }) } -let getRemoteImg = async imgUrl => { - try { - let imgInfo = window.getFileInfo({ type: 'file', argvs: imgUrl, readfile: false }) - let imgPath = window.getQuickCommandScriptFile(imgInfo.ext) - await quickcommand.downloadFile(imgUrl, imgPath) - $("#iconame").val(imgInfo.name); - let src = await window.getBase64Ico(imgPath); - $("#icon").attr('src', src); - } catch (error) { - quickcommand.showMessageBox('图片地址有误!', 'error') - } -} - -let showChangeIconWindow = () => { - Swal.fire({ - title: "设置图标", - onBeforeOpen: () => { - getIcons8Icon() - $('#localImg').click(async () => { - var options = { buttonLabel: '选择', properties: ['openFile'] } - var file = window.getFileInfo({ type: 'dialog', argvs: options, readfile: false }) - if (file) { - $("#iconame").val(file.name); - let src = await window.getBase64Ico(file.path); - $("#icon").attr('src', src); - Swal.close() - } +let getLocalIcon = (selector, callback) => { + $(selector).click(async () => { + var options = { buttonLabel: '选择', properties: ['openFile'] } + var file = window.getFileInfo({ type: 'dialog', argvs: options, readfile: false }) + if (file) { + window.getBase64Ico(file.path).then(src => { + callback(src) }) - }, - html: qctemplates.command.setIcon, - showCancelButton: true, - preConfirm: async () => { - let imgUrl = $('#networkImgUrl').val() - if (imgUrl) await getRemoteImg(imgUrl) - else quickcommand.showMessageBox('没有输入图标地址', 'warning') } }) } -export default { - showChangeIconWindow +let getRemoteIcon = (selector, callback) => { + if (!$(selector).is('input')) return + $(selector).blur(async () => { + let imgUrl = $(selector).val() + if (!imgUrl) return + getImg(imgUrl, src => { + src && callback(src) + }) + }) +} + +let getImg = (imgUrl, callback) => { + let imgInfo = window.getFileInfo({ type: 'file', argvs: imgUrl, readfile: false }) + let imgPath = window.getQuickCommandScriptFile(imgInfo.ext) + quickcommand.downloadFile(imgUrl, imgPath).then(() => { + window.getBase64Ico(imgPath).then(src => { + callback(src) + }) + }).catch(e => { + utools.showNotification('图片地址有误!') + }) +} + +export default { + getIcons8Icon, + getLocalIcon, + getRemoteIcon }