* #475 IAN as they changed the API, so removed IAN option in svg edit * move imagelib to untested extensions This feature is causing security warning and needs to be entirely rewritten Co-authored-by: JFH <20402845+jfhenon@users.noreply.github.com>
This commit is contained in:
Agriya Dev5
@@ -173,7 +173,7 @@ export default class ConfigObj {
|
||||
// 'ext-connector',
|
||||
'ext-eyedropper',
|
||||
'ext-grid',
|
||||
'ext-imagelib',
|
||||
// 'ext-imagelib',
|
||||
// 'ext-arrows',
|
||||
'ext-markers',
|
||||
// 'ext-overview_window', disabled until we fix performance issue
|
||||
|
||||
@@ -1,583 +0,0 @@
|
||||
/* globals seConfirm */
|
||||
/**
|
||||
* @file ext-imagelib.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
const name = 'imagelib'
|
||||
|
||||
const loadExtensionTranslation = async function (svgEditor) {
|
||||
let translationModule
|
||||
const lang = svgEditor.configObj.pref('lang')
|
||||
try {
|
||||
translationModule = await import(`./locale/${lang}.js`)
|
||||
} catch (_error) {
|
||||
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`)
|
||||
translationModule = await import('./locale/en.js')
|
||||
}
|
||||
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default)
|
||||
}
|
||||
|
||||
export default {
|
||||
name,
|
||||
async init ({ decode64, dropXMLInternalSubset }) {
|
||||
const svgEditor = this
|
||||
const { $id, $click } = svgEditor.svgCanvas
|
||||
const { $svgEditor } = svgEditor
|
||||
const { imgPath } = svgEditor.configObj.curConfig
|
||||
|
||||
await loadExtensionTranslation(svgEditor)
|
||||
|
||||
const { svgCanvas } = svgEditor
|
||||
|
||||
const imgLibs = [
|
||||
{
|
||||
name: svgEditor.i18next.t(`${name}:imgLibs_0_name`),
|
||||
url: 'extensions/ext-imagelib/index.html',
|
||||
description: svgEditor.i18next.t(`${name}:imgLibs_0_description`)
|
||||
},
|
||||
{
|
||||
name: svgEditor.i18next.t(`${name}:imgLibs_1_name`),
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: svgEditor.i18next.t(`${name}:imgLibs_1_description`)
|
||||
}
|
||||
]
|
||||
|
||||
const allowedImageLibOrigins = imgLibs.map(({ url }) => {
|
||||
try {
|
||||
return new URL(url).origin
|
||||
} catch (err) {
|
||||
return location.origin
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
const closeBrowser = () => {
|
||||
$id('imgbrowse_holder').style.display = 'none'
|
||||
document.activeElement.blur() // make sure focus is the body to correct issue #417
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {void}
|
||||
*/
|
||||
const importImage = (url) => {
|
||||
const newImage = svgCanvas.addSVGElementsFromJson({
|
||||
element: 'image',
|
||||
attr: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
id: svgCanvas.getNextId(),
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
})
|
||||
svgCanvas.clearSelection()
|
||||
svgCanvas.addToSelection([newImage])
|
||||
svgCanvas.setImageURL(url)
|
||||
}
|
||||
|
||||
const pending = {}
|
||||
|
||||
let mode = 's'
|
||||
let multiArr = []
|
||||
let transferStopped = false
|
||||
let preview; let submit
|
||||
|
||||
/**
|
||||
* Contains the SVG to insert.
|
||||
* @typedef {PlainObject} ImageLibMessage
|
||||
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
||||
* @property {string} href Set to same value as previous `ImageLibMetaMessage` `id`.
|
||||
* @property {string} data The response (as an SVG string or URL)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Used for setting meta-data before images are retrieved.
|
||||
* @typedef {PlainObject} ImageLibMetaMessage
|
||||
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
||||
* @property {string} name If the subsequent response is an SVG string or if `preview_url`
|
||||
* is present, will be used as the title for the preview image. When an
|
||||
* SVG string is present, will default to the first `<title>`'s contents or
|
||||
* "(SVG #<Length of response>)" if none is present. Otherwise, if `preview_url`
|
||||
* is present, will default to the empty string. Though `name` may be falsy,
|
||||
* it is always expected to be present for meta messages.
|
||||
* @property {string} id Identifier (the expected `href` for a subsequent response message);
|
||||
* used for ensuring the subsequent response can be tied to this `ImageLibMetaMessage` object.
|
||||
* @property {string} [preview_url] When import mode is multiple, used to set an image
|
||||
* source along with the name/title. If the subsequent response is an SVG string
|
||||
* and there is no `preview_url`, the default will just be to show the
|
||||
* name/title. If the response is not an SVG string, the default will be to
|
||||
* show that response (i.e., the URL).
|
||||
* @property {string} entry Set automatically with div holding retrieving
|
||||
* message (until ready to delete)
|
||||
* @todo Should use a separate Map instead of `entry`
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {PlainObject} cfg
|
||||
* @param {string} cfg.origin
|
||||
* @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
|
||||
* @returns {void}
|
||||
*/
|
||||
async function onMessage ({ origin, data }) {
|
||||
let response = data
|
||||
if (!response || !['string', 'object'].includes(typeof response)) {
|
||||
// Do nothing
|
||||
return
|
||||
}
|
||||
let id
|
||||
let type
|
||||
try {
|
||||
// Todo: This block can be removed (and the above check changed to
|
||||
// insist on an object) if embedAPI moves away from a string to
|
||||
// an object (if IE9 support not needed)
|
||||
response = typeof response === 'object' ? response : JSON.parse(response)
|
||||
if (response.namespace !== 'imagelib') {
|
||||
return
|
||||
}
|
||||
if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
|
||||
// Todo: Surface this error to user?
|
||||
console.error(`Origin ${origin} not whitelisted for posting to ${window.origin}`)
|
||||
return
|
||||
}
|
||||
const hasName = 'name' in response
|
||||
const hasHref = 'href' in response
|
||||
|
||||
if (!hasName && transferStopped) {
|
||||
transferStopped = false
|
||||
return
|
||||
}
|
||||
|
||||
if (hasHref) {
|
||||
id = response.href
|
||||
response = response.data
|
||||
}
|
||||
|
||||
// Hide possible transfer dialog box
|
||||
if (document.querySelector('se-elix-alert-dialog')) {
|
||||
document.querySelector('se-elix-alert-dialog').remove()
|
||||
}
|
||||
type = hasName
|
||||
? 'meta'
|
||||
: response.charAt(0)
|
||||
} catch (e) {
|
||||
// This block is for backward compatibility (for IAN and Openclipart);
|
||||
// should otherwise return
|
||||
if (typeof response === 'string') {
|
||||
const char1 = response.charAt(0)
|
||||
|
||||
if (char1 !== '{' && transferStopped) {
|
||||
transferStopped = false
|
||||
return
|
||||
}
|
||||
|
||||
if (char1 === '|') {
|
||||
const secondpos = response.indexOf('|', 1)
|
||||
id = response.substr(1, secondpos - 1)
|
||||
response = response.substr(secondpos + 1)
|
||||
type = response.charAt(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let entry; let curMeta; let svgStr; let imgStr
|
||||
switch (type) {
|
||||
case 'meta': {
|
||||
// Metadata
|
||||
transferStopped = false
|
||||
curMeta = response
|
||||
|
||||
// Should be safe to add dynamic property as passed metadata
|
||||
pending[curMeta.id] = curMeta // lgtm [js/remote-property-injection]
|
||||
|
||||
const name = (curMeta.name || 'file')
|
||||
|
||||
const message = svgEditor.i18next.t('notification.retrieving').replace('%s', name)
|
||||
|
||||
if (mode !== 'm') {
|
||||
await seConfirm(message)
|
||||
transferStopped = true
|
||||
} else {
|
||||
entry = document.createElement('div')
|
||||
entry.textContent = message
|
||||
entry.dataset.id = curMeta.id
|
||||
preview.appendChild(entry)
|
||||
curMeta.entry = entry
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
case '<':
|
||||
svgStr = true
|
||||
break
|
||||
case 'd': {
|
||||
if (response.startsWith('data:image/svg+xml')) {
|
||||
const pre = 'data:image/svg+xml;base64,'
|
||||
const src = response.substring(pre.length)
|
||||
response = decode64(src)
|
||||
svgStr = true
|
||||
break
|
||||
} else if (response.startsWith('data:image/')) {
|
||||
imgStr = true
|
||||
break
|
||||
}
|
||||
}
|
||||
// Else fall through
|
||||
default:
|
||||
// TODO: See if there's a way to base64 encode the binary data stream
|
||||
// Assume it's raw image data
|
||||
// importImage(str);
|
||||
|
||||
// Don't give warning as postMessage may have been used by something else
|
||||
if (mode !== 'm') {
|
||||
closeBrowser()
|
||||
} else {
|
||||
pending[id].entry.remove()
|
||||
}
|
||||
// await alert('Unexpected data was returned: ' + response, function() {
|
||||
// if (mode !== 'm') {
|
||||
// closeBrowser();
|
||||
// } else {
|
||||
// pending[id].entry.remove();
|
||||
// }
|
||||
// });
|
||||
return
|
||||
}
|
||||
|
||||
switch (mode) {
|
||||
case 's':
|
||||
// Import one
|
||||
if (svgStr) {
|
||||
svgEditor.svgCanvas.importSvgString(response)
|
||||
} else if (imgStr) {
|
||||
importImage(response)
|
||||
}
|
||||
closeBrowser()
|
||||
break
|
||||
case 'm': {
|
||||
// Import multiple
|
||||
multiArr.push([(svgStr ? 'svg' : 'img'), response])
|
||||
curMeta = pending[id]
|
||||
let title
|
||||
if (svgStr) {
|
||||
if (curMeta?.name) {
|
||||
title = curMeta.name
|
||||
} else {
|
||||
// Try to find a title
|
||||
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
|
||||
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement // lgtm [js/xml-bomb]
|
||||
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')'
|
||||
}
|
||||
if (curMeta) {
|
||||
Array.from(preview.children).forEach(function (element) {
|
||||
if (element.dataset.id === id) {
|
||||
if (curMeta.preview_url) {
|
||||
const img = document.createElement('img')
|
||||
img.src = curMeta.preview_url
|
||||
const span = document.createElement('span')
|
||||
span.appendChild(img)
|
||||
element.append(span)
|
||||
} else {
|
||||
element.textContent = title
|
||||
}
|
||||
submit.removeAttribute('disabled')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = title
|
||||
preview.appendChild(div)
|
||||
submit.removeAttribute('disabled')
|
||||
}
|
||||
} else {
|
||||
if (curMeta?.preview_url) {
|
||||
title = curMeta.name || ''
|
||||
entry = document.createElement('span')
|
||||
const img = document.createElement('img')
|
||||
img.src = curMeta.preview_url
|
||||
entry.appendChild(img)
|
||||
entry.appendChild(document.createTextNode(title))
|
||||
} else {
|
||||
entry = document.createElement('img')
|
||||
entry.src = response
|
||||
}
|
||||
|
||||
if (curMeta) {
|
||||
Array.from(preview.children).forEach(function (element) {
|
||||
if (element.dataset.id === id) {
|
||||
element.appendChild(entry)
|
||||
submit.removeAttribute('disabled')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const div = document.createElement('div')
|
||||
div.appendChild(entry)
|
||||
preview.appendChild(div)
|
||||
submit.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
break
|
||||
} case 'o': {
|
||||
// Open
|
||||
if (!svgStr) { break }
|
||||
closeBrowser()
|
||||
const ok = await svgEditor.openPrep()
|
||||
if (!ok) { return }
|
||||
svgCanvas.clear()
|
||||
svgCanvas.setSvgString(response)
|
||||
// updateCanvas();
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Receive `postMessage` data
|
||||
window.addEventListener('message', onMessage, true)
|
||||
|
||||
const insertAfter = (referenceNode, newNode) => {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
|
||||
}
|
||||
|
||||
const toggleMultiLoop = () => {
|
||||
multiArr.forEach(function (item, i) {
|
||||
const type = item[0]
|
||||
const data = item[1]
|
||||
if (type === 'svg') {
|
||||
svgCanvas.importSvgString(data)
|
||||
} else {
|
||||
importImage(data)
|
||||
}
|
||||
svgCanvas.moveSelectedElements(i * 20, i * 20, false)
|
||||
})
|
||||
while (preview.firstChild) { preview.removeChild(preview.firstChild) }
|
||||
multiArr = []
|
||||
$id('imgbrowse_holder').style.display = 'none'
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} show
|
||||
* @returns {void}
|
||||
*/
|
||||
const toggleMulti = (show) => {
|
||||
$id('lib_framewrap').style.right = (show ? 200 : 10)
|
||||
$id('imglib_opts').style.right = (show ? 200 : 10)
|
||||
if (!preview) {
|
||||
preview = document.createElement('div')
|
||||
preview.setAttribute('id', 'imglib_preview')
|
||||
preview.setAttribute('style', 'position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;')
|
||||
insertAfter($id('lib_framewrap'), preview)
|
||||
|
||||
submit = document.createElement('button')
|
||||
submit.setAttribute('content', 'Import selected')
|
||||
submit.setAttribute('disabled', true)
|
||||
submit.textContent = 'Import selected'
|
||||
submit.setAttribute('style', 'position: absolute;bottom: 10px;right: -10px;')
|
||||
$id('imgbrowse').appendChild(submit)
|
||||
$click(submit, toggleMultiLoop)
|
||||
}
|
||||
submit.style.display = (show) ? 'block' : 'none'
|
||||
preview.style.display = (show) ? 'block' : 'none'
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
const showBrowser = () => {
|
||||
let browser = $id('imgbrowse')
|
||||
if (!browser) {
|
||||
const div = document.createElement('div')
|
||||
div.id = 'imgbrowse_holder'
|
||||
div.innerHTML = '<div id=imgbrowse class=toolbar_button></div>'
|
||||
insertAfter($svgEditor, div)
|
||||
browser = $id('imgbrowse')
|
||||
|
||||
const allLibs = svgEditor.i18next.t(`${name}:select_lib`)
|
||||
|
||||
const divFrameWrap = document.createElement('div')
|
||||
divFrameWrap.id = 'lib_framewrap'
|
||||
|
||||
const libOpts = document.createElement('ul')
|
||||
libOpts.id = 'imglib_opts'
|
||||
browser.append(libOpts)
|
||||
const frame = document.createElement('iframe')
|
||||
frame.src = 'javascript:0'
|
||||
frame.style.display = 'none'
|
||||
divFrameWrap.append(frame)
|
||||
browser.prepend(divFrameWrap)
|
||||
|
||||
const header = document.createElement('h1')
|
||||
browser.prepend(header)
|
||||
header.textContent = allLibs
|
||||
header.setAttribute('style', 'position: absolute;top: 0px;left: 0px;width: 100%;')
|
||||
|
||||
const button = document.createElement('button')
|
||||
button.innerHTML = svgEditor.i18next.t('common.cancel')
|
||||
browser.appendChild(button)
|
||||
$click(button, function () {
|
||||
$id('imgbrowse_holder').style.display = 'none'
|
||||
})
|
||||
button.setAttribute('style', 'position: absolute;top: 5px;right: 10px;')
|
||||
|
||||
const leftBlock = document.createElement('span')
|
||||
leftBlock.setAttribute('style', 'position: absolute;top: 5px;left: 10px;display: inline-flex;')
|
||||
browser.appendChild(leftBlock)
|
||||
|
||||
const back = document.createElement('button')
|
||||
back.style.visibility = 'hidden'
|
||||
back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`)
|
||||
leftBlock.appendChild(back)
|
||||
$click(back, function () {
|
||||
frame.setAttribute('src', 'about:blank')
|
||||
frame.style.display = 'none'
|
||||
libOpts.style.display = 'block'
|
||||
header.textContent = allLibs
|
||||
back.style.display = 'none'
|
||||
})
|
||||
back.setAttribute('style', 'margin-right: 5px;')
|
||||
back.style.display = 'none'
|
||||
|
||||
const select = document.createElement('select')
|
||||
select.innerHTML = '<select><option value=s>' +
|
||||
svgEditor.i18next.t(`${name}:import_single`) + '</option><option value=m>' +
|
||||
svgEditor.i18next.t(`${name}:import_multi`) + '</option><option value=o>' +
|
||||
svgEditor.i18next.t(`${name}:open`) + '</option>'
|
||||
leftBlock.appendChild(select)
|
||||
select.addEventListener('change', function () {
|
||||
mode = this.value
|
||||
switch (mode) {
|
||||
case 's':
|
||||
case 'o':
|
||||
toggleMulti(false)
|
||||
break
|
||||
|
||||
case 'm':
|
||||
// Import multiple
|
||||
toggleMulti(true)
|
||||
break
|
||||
}
|
||||
})
|
||||
select.setAttribute('style', 'margin-top: 10px;')
|
||||
|
||||
imgLibs.forEach(function ({ name, url, description }) {
|
||||
const li = document.createElement('li')
|
||||
libOpts.appendChild(li)
|
||||
li.textContent = name
|
||||
$click(li, function () {
|
||||
frame.setAttribute('src', url)
|
||||
frame.style.display = 'block'
|
||||
header.textContent = name
|
||||
libOpts.style.display = 'none'
|
||||
back.style.display = 'block'
|
||||
})
|
||||
const span = document.createElement('span')
|
||||
span.textContent = description
|
||||
li.appendChild(span)
|
||||
})
|
||||
} else {
|
||||
$id('imgbrowse_holder').style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
svgicons: 'ext-imagelib.xml',
|
||||
callback () {
|
||||
// Add the button and its handler(s)
|
||||
const buttonTemplate = document.createElement('template')
|
||||
const key = name + ':buttons.0.title'
|
||||
buttonTemplate.innerHTML = `
|
||||
<se-menu-item id="tool_imagelib" label="${key}" src="library.svg"></se-menu-item>
|
||||
`
|
||||
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true))
|
||||
$click($id('tool_imagelib'), () => {
|
||||
showBrowser()
|
||||
})
|
||||
|
||||
const style = document.createElement('style')
|
||||
style.textContent = '#imgbrowse_holder {' +
|
||||
'position: absolute;' +
|
||||
'top: 0;' +
|
||||
'left: 0;' +
|
||||
'width: 100%;' +
|
||||
'height: 100%;' +
|
||||
'background-color: rgba(0, 0, 0, .5);' +
|
||||
'z-index: 5;' +
|
||||
'}' +
|
||||
'#imgbrowse {' +
|
||||
'position: absolute;' +
|
||||
'top: 25px;' +
|
||||
'left: 25px;' +
|
||||
'right: 25px;' +
|
||||
'bottom: 25px;' +
|
||||
'min-width: 300px;' +
|
||||
'min-height: 200px;' +
|
||||
'background: #5a6162;' +
|
||||
'border: 1px outset #777;' +
|
||||
'}' +
|
||||
'#imgbrowse h1 {' +
|
||||
'font-size: 20px;' +
|
||||
'margin: .4em;' +
|
||||
'text-align: center;' +
|
||||
'}' +
|
||||
'#lib_framewrap,' +
|
||||
'#imgbrowse > ul {' +
|
||||
'position: absolute;' +
|
||||
'top: 45px;' +
|
||||
'left: 10px;' +
|
||||
'right: 10px;' +
|
||||
'bottom: 10px;' +
|
||||
'background: white;' +
|
||||
'margin: 0;' +
|
||||
'padding: 0;' +
|
||||
'}' +
|
||||
'#imgbrowse > ul {' +
|
||||
'overflow: auto;' +
|
||||
'}' +
|
||||
'#imgbrowse > div {' +
|
||||
'border: 1px solid #666;' +
|
||||
'}' +
|
||||
'#imglib_preview > div {' +
|
||||
'padding: 5px;' +
|
||||
'font-size: 12px;' +
|
||||
'}' +
|
||||
'#imglib_preview img {' +
|
||||
'display: block;' +
|
||||
'margin: 0 auto;' +
|
||||
'max-height: 100px;' +
|
||||
'}' +
|
||||
'#imgbrowse li {' +
|
||||
'list-style: none;' +
|
||||
'padding: .5em;' +
|
||||
'background: #E8E8E8;' +
|
||||
'border-bottom: 1px solid #5a6162;' +
|
||||
'line-height: 1.2em;' +
|
||||
'font-style: sans-serif;' +
|
||||
'}' +
|
||||
'#imgbrowse li > span {' +
|
||||
'color: #666;' +
|
||||
'font-size: 15px;' +
|
||||
'display: block;' +
|
||||
'}' +
|
||||
'#imgbrowse li:hover {' +
|
||||
'background: #FFC;' +
|
||||
'cursor: pointer;' +
|
||||
'}' +
|
||||
'#imgbrowse iframe {' +
|
||||
'width: 100%;' +
|
||||
'height: 100%;' +
|
||||
'border: 0;' +
|
||||
'}'
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.svg" />
|
||||
<script type="module" src="index.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Select an image:</h1>
|
||||
<a href="smiley.svg">
|
||||
<img src="smiley.svg" width="48" height="48" alt="smiley.svg" />
|
||||
</a>
|
||||
<br />
|
||||
<a href="../../images/logo.svg">
|
||||
<img src="../../images/logo.svg" width="48" height="48" alt="logo.svg" />
|
||||
</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
/* globals svgEditor */
|
||||
|
||||
const atags = document.querySelectorAll('a')
|
||||
Array.prototype.forEach.call(atags, function (aEle) {
|
||||
svgEditor.$click(aEle, function (event) {
|
||||
event.preventDefault()
|
||||
const { href } = event.currentTarget
|
||||
const target = window.parent
|
||||
const post = (message) => {
|
||||
// Todo: Make origin customizable as set by opening window
|
||||
// Todo: If dropping IE9, avoid stringifying
|
||||
target.postMessage(JSON.stringify({
|
||||
namespace: 'imagelib',
|
||||
...message
|
||||
}), '*')
|
||||
}
|
||||
// Convert Non-SVG images to data URL first
|
||||
// (this could also have been done server-side by the library)
|
||||
// Send metadata (also indicates file is about to be sent)
|
||||
post({
|
||||
name: event.currentTarget.textContent,
|
||||
id: href
|
||||
})
|
||||
if (!href.includes('.svg')) {
|
||||
const img = new Image()
|
||||
img.addEventListener('load', function () {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = this.width
|
||||
canvas.height = this.height
|
||||
// load the raster image into the canvas
|
||||
canvas.getContext('2d').drawImage(this, 0, 0)
|
||||
// retrieve the data: URL
|
||||
let data
|
||||
try {
|
||||
data = canvas.toDataURL()
|
||||
} catch (err) {
|
||||
// This fails in Firefox with `file:///` URLs :(
|
||||
// Todo: This could use a generic alert library instead
|
||||
alert('Data URL conversion failed: ' + err)
|
||||
data = ''
|
||||
}
|
||||
post({ href, data })
|
||||
})
|
||||
img.src = href
|
||||
} else {
|
||||
fetch(href)
|
||||
.then((r) => r.text())
|
||||
.then((data) => {
|
||||
post({ href, data })
|
||||
return data
|
||||
})
|
||||
.catch((error) => console.error(error))
|
||||
}
|
||||
return false
|
||||
})
|
||||
})
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Bilder-Bibliothek'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Image library'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: "Choisir une bibliothèque d'images",
|
||||
show_list: 'show_list',
|
||||
import_single: 'import_single',
|
||||
import_multi: 'import_multi',
|
||||
open: 'open',
|
||||
buttons: [
|
||||
{
|
||||
title: "Bibliothèque d'images"
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Biblioteka obrazów'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Biblioteca de Imagens'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Bibliotecă de Imagini'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Knižnica obrázkov'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Knjižnica slik'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: '图像库'
|
||||
}
|
||||
],
|
||||
imgLibs_0_name: 'Demo library (local)',
|
||||
imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
|
||||
imgLibs_1_name: 'IAN Symbol Libraries',
|
||||
imgLibs_1_description: 'Free library of illustrations'
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/svg" href="../../images/logo.svg" />
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="../../redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="../../redirect-on-lacking-support.js"></script>
|
||||
|
||||
<script type="module" src="openclipart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,377 +0,0 @@
|
||||
/* eslint-disable node/no-unpublished-import */
|
||||
import { jml, body, nbsp } from 'jamilih'
|
||||
import $ from 'query-result'
|
||||
import { manipulation } from 'qr-manipulation'
|
||||
|
||||
manipulation($, jml)
|
||||
|
||||
const baseAPIURL = 'https://openclipart.org/search/json/'
|
||||
|
||||
const jsVoid = 'javascript: void(0);'
|
||||
|
||||
/**
|
||||
* Shows results after query submission.
|
||||
* @param {string} url
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function processResults (url) {
|
||||
/**
|
||||
* @param {string} query
|
||||
* @returns {external:JamilihArray}
|
||||
*/
|
||||
function queryLink (query) {
|
||||
return ['a', {
|
||||
href: jsVoid,
|
||||
dataset: { value: query },
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
const { value } = this.dataset
|
||||
$('#query')[0].$set(value)
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, [query]]
|
||||
}
|
||||
|
||||
const r = await fetch(url)
|
||||
const json = await r.json()
|
||||
|
||||
if (!json || json.msg !== 'success') {
|
||||
// Todo: This could use a generic alert library instead
|
||||
alert('There was a problem downloading the results')
|
||||
return
|
||||
}
|
||||
const {
|
||||
payload, info: {
|
||||
results: numResults,
|
||||
pages,
|
||||
current_page: currentPage
|
||||
}
|
||||
} = json
|
||||
|
||||
// $('#page')[0].value = currentPage;
|
||||
// $('#page')[0].max = pages;
|
||||
|
||||
// Unused properties:
|
||||
// - `svg_filesize` always 0?
|
||||
// - `dimensions: {
|
||||
// png_thumb: {width, height},
|
||||
// png_full_lossy: {width, height}
|
||||
// }` object of relevance?
|
||||
// - No need for `tags` with `tags_array`
|
||||
// - `svg`'s: `png_thumb`, `png_full_lossy`, `png_2400px`
|
||||
const semiColonSep = '; ' + nbsp
|
||||
$('#results').jml('div', [
|
||||
['span', [
|
||||
'Number of results: ',
|
||||
numResults
|
||||
]],
|
||||
semiColonSep,
|
||||
['span', [
|
||||
'page ',
|
||||
currentPage,
|
||||
' out of ',
|
||||
pages
|
||||
]],
|
||||
...payload.map(({
|
||||
title, description, id,
|
||||
uploader, created,
|
||||
svg: { url: svgURL },
|
||||
detail_link: detailLink,
|
||||
tags_array: tagsArray,
|
||||
downloaded_by: downloadedBy,
|
||||
total_favorites: totalFavorites
|
||||
}) => {
|
||||
const imgHW = '100px'
|
||||
const colonSep = ': ' + nbsp
|
||||
return ['div', [
|
||||
['button', {
|
||||
style: 'margin-right: 8px; border: 2px solid black;',
|
||||
dataset: { id, value: svgURL },
|
||||
$on: {
|
||||
async click (e) {
|
||||
e.preventDefault()
|
||||
const { value: svgurl } = this.dataset
|
||||
const post = (message) => {
|
||||
// Todo: Make origin customizable as set by opening window
|
||||
// Todo: If dropping IE9, avoid stringifying
|
||||
window.parent.postMessage(JSON.stringify({
|
||||
namespace: 'imagelib',
|
||||
...message
|
||||
}), '*')
|
||||
}
|
||||
// Send metadata (also indicates file is about to be sent)
|
||||
post({
|
||||
name: title,
|
||||
id: svgurl
|
||||
})
|
||||
const result = await fetch(svgurl)
|
||||
const svg = await result.text()
|
||||
post({
|
||||
href: svgurl,
|
||||
data: svg
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [
|
||||
// If we wanted interactive versions despite security risk:
|
||||
// ['object', {data: svgURL, type: 'image/svg+xml'}]
|
||||
['img', { src: svgURL, style: `width: ${imgHW}; height: ${imgHW};` }]
|
||||
]],
|
||||
['b', [title]],
|
||||
' ',
|
||||
['i', [description]],
|
||||
' ',
|
||||
['span', [
|
||||
'(ID: ',
|
||||
['a', {
|
||||
href: jsVoid,
|
||||
dataset: { value: id },
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
const { value } = this.dataset
|
||||
$('#byids')[0].$set(value)
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, [id]],
|
||||
')'
|
||||
]],
|
||||
' ',
|
||||
['i', [
|
||||
['a', {
|
||||
href: detailLink,
|
||||
target: '_blank'
|
||||
}, ['Details']]
|
||||
]],
|
||||
['br'],
|
||||
['span', [
|
||||
['u', ['Uploaded by']], colonSep,
|
||||
queryLink(uploader),
|
||||
semiColonSep
|
||||
]],
|
||||
['span', [
|
||||
['u', ['Download count']], colonSep,
|
||||
downloadedBy,
|
||||
semiColonSep
|
||||
]],
|
||||
['span', [
|
||||
['u', ['Times used as favorite']], colonSep,
|
||||
totalFavorites,
|
||||
semiColonSep
|
||||
]],
|
||||
['span', [
|
||||
['u', ['Created date']], colonSep,
|
||||
created
|
||||
]],
|
||||
['br'],
|
||||
['u', ['Tags']], colonSep,
|
||||
...tagsArray.map((tag) => {
|
||||
return ['span', [
|
||||
' ',
|
||||
queryLink(tag)
|
||||
]]
|
||||
})
|
||||
]]
|
||||
}),
|
||||
['br'], ['br'],
|
||||
(currentPage === 1 || pages <= 2
|
||||
? ''
|
||||
: ['span', [
|
||||
['a', {
|
||||
href: jsVoid,
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
$('#page')[0].value = 1
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, ['First']],
|
||||
' '
|
||||
]]
|
||||
),
|
||||
(currentPage === 1
|
||||
? ''
|
||||
: ['span', [
|
||||
['a', {
|
||||
href: jsVoid,
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
$('#page')[0].value = currentPage - 1
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, ['Prev']],
|
||||
' '
|
||||
]]
|
||||
),
|
||||
(currentPage === pages
|
||||
? ''
|
||||
: ['span', [
|
||||
['a', {
|
||||
href: jsVoid,
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
$('#page')[0].value = currentPage + 1
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, ['Next']],
|
||||
' '
|
||||
]]
|
||||
),
|
||||
(currentPage === pages || pages <= 2
|
||||
? ''
|
||||
: ['span', [
|
||||
['a', {
|
||||
href: jsVoid,
|
||||
$on: {
|
||||
click (e) {
|
||||
e.preventDefault()
|
||||
$('#page')[0].value = pages
|
||||
$('#openclipart')[0].$submit()
|
||||
}
|
||||
}
|
||||
}, ['Last']],
|
||||
' '
|
||||
]]
|
||||
)
|
||||
])
|
||||
}
|
||||
|
||||
jml('div', [
|
||||
['style', [
|
||||
`.control {
|
||||
padding-top: 10px;
|
||||
}`
|
||||
]],
|
||||
['form', {
|
||||
id: 'openclipart',
|
||||
$custom: {
|
||||
async $submit () {
|
||||
const url = new URL(baseAPIURL);
|
||||
[
|
||||
'query', 'sort', 'amount', 'page', 'byids'
|
||||
].forEach((prop) => {
|
||||
const { value } = $('#' + prop)[0]
|
||||
if (value) {
|
||||
url.searchParams.set(prop, value)
|
||||
}
|
||||
})
|
||||
await processResults(url)
|
||||
}
|
||||
},
|
||||
$on: {
|
||||
submit (e) {
|
||||
e.preventDefault()
|
||||
this.$submit()
|
||||
}
|
||||
}
|
||||
}, [
|
||||
// Todo: i18nize
|
||||
['fieldset', [
|
||||
['legend', ['Search terms']],
|
||||
['div', { class: 'control' }, [
|
||||
['label', [
|
||||
'Query (Title, description, uploader, or tag): ',
|
||||
['input', {
|
||||
id: 'query',
|
||||
name: 'query',
|
||||
placeholder: 'cat',
|
||||
$custom: {
|
||||
$set (value) {
|
||||
$('#byids')[0].value = ''
|
||||
this.value = value
|
||||
}
|
||||
},
|
||||
$on: {
|
||||
change () {
|
||||
$('#byids')[0].value = ''
|
||||
}
|
||||
}
|
||||
}]
|
||||
]]
|
||||
]],
|
||||
['br'],
|
||||
' OR ',
|
||||
['br'],
|
||||
['div', { class: 'control' }, [
|
||||
['label', [
|
||||
'IDs (single or comma-separated): ',
|
||||
['input', {
|
||||
id: 'byids',
|
||||
name: 'ids',
|
||||
placeholder: '271380, 265741',
|
||||
$custom: {
|
||||
$set (value) {
|
||||
$('#query')[0].value = ''
|
||||
this.value = value
|
||||
}
|
||||
},
|
||||
$on: {
|
||||
change () {
|
||||
$('#query')[0].value = ''
|
||||
}
|
||||
}
|
||||
}]
|
||||
]]
|
||||
]]
|
||||
]],
|
||||
['fieldset', [
|
||||
['legend', ['Configuring results']],
|
||||
['div', { class: 'control' }, [
|
||||
['label', [
|
||||
'Sort by: ',
|
||||
['select', { id: 'sort' }, [
|
||||
// Todo: i18nize first values
|
||||
['Date', 'date'],
|
||||
['Downloads', 'downloads'],
|
||||
['Favorited', 'favorites']
|
||||
].map(([text, value = text]) => {
|
||||
return ['option', { value }, [text]]
|
||||
})]
|
||||
]]
|
||||
]],
|
||||
['div', { class: 'control' }, [
|
||||
['label', [
|
||||
'Results per page: ',
|
||||
['input', {
|
||||
id: 'amount',
|
||||
name: 'amount',
|
||||
value: 10,
|
||||
type: 'number',
|
||||
min: 1,
|
||||
max: 200,
|
||||
step: 1,
|
||||
pattern: '\\d+'
|
||||
}]
|
||||
]]
|
||||
]],
|
||||
['div', { class: 'control' }, [
|
||||
['label', [
|
||||
'Page number: ',
|
||||
['input', {
|
||||
// max: 1, // We'll change this based on available results
|
||||
id: 'page',
|
||||
name: 'page',
|
||||
value: 1,
|
||||
style: 'width: 40px;',
|
||||
type: 'number',
|
||||
min: 1,
|
||||
step: 1,
|
||||
pattern: '\\d+'
|
||||
}]
|
||||
]]
|
||||
]]
|
||||
]],
|
||||
['div', { class: 'control' }, [
|
||||
['input', { type: 'submit' }]
|
||||
]]
|
||||
]],
|
||||
['div', { id: 'results' }]
|
||||
], body)
|
||||
@@ -1,12 +0,0 @@
|
||||
<svg width="137" height="137" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Cool smiley</title>
|
||||
<path fill="url(#svg_4)" stroke="#000000" stroke-width="3" d="m32.18682,97.71674q36.3159,24.94076 72.54585,0m-64.67542,-49.25576c0,-3.8554 3.12526,-6.98079 6.98068,-6.98079c3.85449,0 6.97872,3.12539 6.97872,6.98079c0,3.85346 -3.12423,6.97867 -6.97872,6.97867c-3.85542,0 -6.98068,-3.12521 -6.98068,-6.97867m42.93047,0c0,-3.8554 3.12529,-6.98079 6.97963,-6.98079c3.8544,0 6.97971,3.12539 6.97971,6.98079c0,3.85346 -3.12531,6.97867 -6.97971,6.97867c-3.85434,0 -6.97963,-3.12521 -6.97963,-6.97867m-81.48596,20.036l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101zm0,0l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101z" id="svg_1"/>
|
||||
<path id="svg_5" d="m23.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21488,12.16242l5.42982,19.67939l-14.21495,-12.16281l-14.21489,12.16281l5.42991,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
|
||||
<path id="svg_6" d="m65.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21487,12.16242l5.42982,19.67939l-14.21496,-12.1628l-14.2149,12.1628l5.42992,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
|
||||
<defs>
|
||||
<linearGradient y2="0.25391" x2="0.46484" y1="0.94922" x1="0.44531" id="svg_4">
|
||||
<stop stop-color="#ff0000" offset="0"/>
|
||||
<stop stop-color="#ffff00" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -10,11 +10,6 @@
|
||||
|
||||
import i18next from 'i18next'
|
||||
|
||||
/**
|
||||
* Used, for example, in the ImageLibs extension, to present libraries
|
||||
* (with name/URL/description) in order.
|
||||
* @typedef {GenericArray<module:locale.LocaleStrings>} module:locale.LocaleArray
|
||||
*/
|
||||
/**
|
||||
* The string keys of the object are two-letter language codes.
|
||||
* @tutorial LocaleDocs
|
||||
|
||||
Reference in New Issue
Block a user