/* 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)