svgedit/src/editor/extensions/ext-imagelib/openclipart.js

Powerful SVG-Editor for your browser

/* 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);'; // eslint-disable-line no-script-url

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