refactor: iconpicker 调整

This commit is contained in:
fofolee 2021-02-01 17:22:30 +08:00
parent 0ce4414a50
commit a7aecb4eef

View File

@ -1,7 +1,6 @@
import qctemplates from "./qctemplates.js"
// 从 icons8 选择图标 // 从 icons8 选择图标
let getIcons8Icon = () => { let getIcons8Icon = (selector, callback) => {
if (!$(selector).is('select')) return
let showIcon = icon => { let showIcon = icon => {
return $(`<img class="networkImg" src="https://img.icons8.com/color/1x/${icon.commonName}.png"> <span>${icon.name}</span>`) return $(`<img class="networkImg" src="https://img.icons8.com/color/1x/${icon.commonName}.png"> <span>${icon.name}</span>`)
} }
@ -11,12 +10,14 @@ let getIcons8Icon = () => {
} }
let showSelection = selection => { let showSelection = selection => {
if (!selection.commonName) return selection.text 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) return showIcon(selection)
} }
$('#networkImg').select2({ $(selector).select2({
dataType: 'json', dataType: 'json',
width: '80%',
delay: 250, delay: 250,
ajax: { ajax: {
url: 'https://search.icons8.com/api/iconsets/v5/search', url: 'https://search.icons8.com/api/iconsets/v5/search',
@ -47,45 +48,43 @@ let getIcons8Icon = () => {
}) })
} }
let getRemoteImg = async imgUrl => { let getLocalIcon = (selector, callback) => {
try { $(selector).click(async () => {
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 options = { buttonLabel: '选择', properties: ['openFile'] }
var file = window.getFileInfo({ type: 'dialog', argvs: options, readfile: false }) var file = window.getFileInfo({ type: 'dialog', argvs: options, readfile: false })
if (file) { if (file) {
$("#iconame").val(file.name); window.getBase64Ico(file.path).then(src => {
let src = await window.getBase64Ico(file.path); callback(src)
$("#icon").attr('src', src); })
Swal.close()
} }
}) })
}, }
html: qctemplates.command.setIcon,
showCancelButton: true, let getRemoteIcon = (selector, callback) => {
preConfirm: async () => { if (!$(selector).is('input')) return
let imgUrl = $('#networkImgUrl').val() $(selector).blur(async () => {
if (imgUrl) await getRemoteImg(imgUrl) let imgUrl = $(selector).val()
else quickcommand.showMessageBox('没有输入图标地址', 'warning') 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 { export default {
showChangeIconWindow getIcons8Icon,
getLocalIcon,
getRemoteIcon
} }