- Incomplete enhancement: Add Openclipart query page (using Jamilih); need to better format results and tie into Imagelib
This commit is contained in:
Brett Zamir
13
editor/extensions/imagelib/openclipart-es.html
Normal file
13
editor/extensions/imagelib/openclipart-es.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.png"/>
|
||||
<script src="../../external/babel-polyfill/polyfill.min.js"></script>
|
||||
<script type="module" src="openclipart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
193
editor/extensions/imagelib/openclipart.js
Normal file
193
editor/extensions/imagelib/openclipart.js
Normal file
@@ -0,0 +1,193 @@
|
||||
import {jml, $, body} from '../../external/jamilih/jml-es.js';
|
||||
|
||||
jml('div', [
|
||||
['style', [
|
||||
`.control {
|
||||
padding-top: 10px;
|
||||
}`
|
||||
]],
|
||||
['form', {
|
||||
$on: {
|
||||
async submit (e) {
|
||||
e.preventDefault();
|
||||
await this.$submit();
|
||||
}
|
||||
},
|
||||
$custom: {
|
||||
async $submit () {
|
||||
console.log('submit2');
|
||||
const results = $('#results');
|
||||
while (results.hasChildNodes()) {
|
||||
results.firstChild.remove();
|
||||
}
|
||||
const url = new URL('https://openclipart.org/search/json/');
|
||||
[
|
||||
'query', 'sort', 'amount', 'page'
|
||||
].forEach((prop) => {
|
||||
const {value} = $('#' + prop);
|
||||
url.searchParams.set(prop, value);
|
||||
});
|
||||
const r = await fetch(url);
|
||||
const json = await r.json();
|
||||
|
||||
if (!json || json.msg !== 'success') {
|
||||
alert('There was a problem downloading the results');
|
||||
}
|
||||
console.log('json', json);
|
||||
const {payload, info: {
|
||||
results: numResults,
|
||||
pages,
|
||||
current_page: currentPage
|
||||
}} = json;
|
||||
|
||||
// $('#page').value = currentPage;
|
||||
// $('#page').max = pages;
|
||||
|
||||
function queryLink (uploader) {
|
||||
return ['a', {
|
||||
href: '#',
|
||||
dataset: {value: uploader},
|
||||
$on: {click (e) {
|
||||
e.preventDefault();
|
||||
const {value} = this.dataset;
|
||||
console.log('v0', value);
|
||||
}}
|
||||
}, [uploader]];
|
||||
}
|
||||
|
||||
// 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`
|
||||
jml(results, [
|
||||
['span', [
|
||||
'Number of results: ',
|
||||
numResults
|
||||
]],
|
||||
['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
|
||||
}) => {
|
||||
return ['div', [
|
||||
['b', [title]],
|
||||
['br'],
|
||||
['i', [description]],
|
||||
['span', [
|
||||
['a', {
|
||||
href: detailLink,
|
||||
target: '_blank'
|
||||
}, ['Details']]
|
||||
]],
|
||||
['button', {
|
||||
$on: {
|
||||
async click () {
|
||||
const svgURL = this.dataset.value;
|
||||
console.log('this', svgURL);
|
||||
/*
|
||||
const result = await fetch(svgURL);
|
||||
const svg = await result.text();
|
||||
console.log('svg', svg);
|
||||
*/
|
||||
// Todo: Pass to our API
|
||||
}
|
||||
},
|
||||
dataset: {value: svgURL}
|
||||
}, [
|
||||
'Use SVG'
|
||||
]],
|
||||
['span', [
|
||||
'(ID: ',
|
||||
['a', {
|
||||
href: '#',
|
||||
dataset: {value: id},
|
||||
$on: {click (e) {
|
||||
e.preventDefault();
|
||||
const {value} = this.dataset;
|
||||
// Todo: byids for searching by id/comma-separated ids
|
||||
console.log('v', value);
|
||||
}}
|
||||
}, [id]],
|
||||
')'
|
||||
]],
|
||||
['span', [
|
||||
'Uploaded by: ',
|
||||
queryLink(uploader)
|
||||
]],
|
||||
...tagsArray.map((tag) => {
|
||||
return ['span', [
|
||||
' ',
|
||||
queryLink(tag)
|
||||
]];
|
||||
}),
|
||||
['span', [
|
||||
'Created date: ',
|
||||
created
|
||||
]],
|
||||
['span', [
|
||||
'Download count: ',
|
||||
downloadedBy
|
||||
]],
|
||||
['span', [
|
||||
'Times used as favorite: ',
|
||||
totalFavorites
|
||||
]]
|
||||
]];
|
||||
})
|
||||
]);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
// Todo: i18nize
|
||||
['div', {class: 'control'}, [
|
||||
['label', [
|
||||
'Query (Title, description, uploader, or tag): ',
|
||||
['input', {id: 'query', name: 'query'}]
|
||||
]]
|
||||
]],
|
||||
['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);
|
||||
1623
editor/external/jamilih/jml-es.js
vendored
Normal file
1623
editor/external/jamilih/jml-es.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user