- Further work on openclipart (now just need to pass to )

editor/extensions/imagelib/openclipart.js

@@ -1,40 +1,33 @@
-import {jml, body} from '../../external/jamilih/jml-es.js';
+import {jml, body, nbsp} from '../../external/jamilih/jml-es.js';
 
 import $ from '../../../node_modules/query-result/esm/index.js';
 import {manipulation} from '../../../node_modules/qr-manipulation/dist/index-es.js';
 manipulation($, jml);
 
-jml('div', [
+const baseAPIURL = 'https://openclipart.org/search/json/';
-  ['style', [
+
-    `.control {
+async function processResults (url) {
-      padding-top: 10px;
+  function queryLink (query) {
-    }`
+    return ['a', {
-  ]],
+      href: 'javascript: void(0);',
-  ['form', {
+      dataset: {value: query},
-    $on: {
+      $on: {click (e) {
-      async submit (e) {
         e.preventDefault();
-        await this.$submit();
+        const {value} = this.dataset;
+        $('#query')[0].$set(value);
+        $('#openclipart')[0].$submit();
+      }}
+    }, [query]];
   }
-    },
+
-    $custom: {
-      async $submit () {
-        console.log('submit2');
-        const url = new URL('https://openclipart.org/search/json/');
-        [
-          'query', 'sort', 'amount', 'page'
-        ].forEach((prop) => {
-          const {value} = $('#' + prop)[0];
-          url.searchParams.set(prop, value);
-        });
   const r = await fetch(url);
   const json = await r.json();
+  console.log('json', json);
 
   if (!json || json.msg !== 'success') {
     alert('There was a problem downloading the results');
     return;
   }
-        console.log('json', json);
   const {payload, info: {
     results: numResults,
     pages,
@@ -44,18 +37,6 @@ jml('div', [
   // $('#page')[0].value = currentPage;
   // $('#page')[0].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: {
@@ -64,15 +45,17 @@ jml('div', [
   //    }` object of relevance?
   // - No need for `tags` with `tags_array`
   // - `svg`'s: `png_thumb`, `png_full_lossy`, `png_2400px`
-        $('#results').htmlJML([
+  const semiColonSep = '; ' + nbsp;
+  $('#results').jml('div', [
     ['span', [
       'Number of results: ',
       numResults
     ]],
+    semiColonSep,
     ['span', [
-            'Page ',
+      'page ',
       currentPage,
-            'out of: ',
+      ' out of ',
       pages
     ]],
     ...payload.map(({
@@ -84,21 +67,14 @@ jml('div', [
       downloaded_by: downloadedBy,
       total_favorites: totalFavorites
     }) => {
+      const imgHW = '100px';
+      const colonSep = ': ' + nbsp;
       return ['div', [
-              ['b', [title]],
+        ['button', {style: 'margin-right: 8px; border: 2px solid black;', dataset: {id, value: svgURL}, $on: {
-              ['br'],
+          async click (e) {
-              ['i', [description]],
+            e.preventDefault();
-              ['span', [
+            const {value: svgURL, id} = this.dataset;
-                ['a', {
+            console.log('this', id, svgURL);
-                  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();
@@ -106,60 +82,202 @@ jml('div', [
             */
             // Todo: Pass to our API
           }
-                },
+        }}, [
-                dataset: {value: svgURL}
+          ['img', {src: svgURL, style: `width: ${imgHW}; height: ${imgHW};`}]
-              }, [
-                'Use SVG'
         ]],
+        ['b', [title]],
+        ' ',
+        ['i', [description]],
+        ' ',
         ['span', [
           '(ID: ',
           ['a', {
-                  href: '#',
+            href: 'javascript: void(0);',
             dataset: {value: id},
-                  $on: {click (e) {
+            $on: {
+              click (e) {
                 e.preventDefault();
                 const {value} = this.dataset;
-                    // Todo: byids for searching by id/comma-separated ids
+                $('#byids')[0].$set(value);
-                    console.log('v', value);
+                $('#openclipart')[0].$submit();
-                  }}
+              }
+            }
           }, [id]],
           ')'
         ]],
-              ['span', [
+        ' ',
-                'Uploaded by: ',
+        ['i', [
-                queryLink(uploader)
+          ['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)
           ]];
-              }),
-              ['span', [
-                'Created date: ',
-                created
-              ]],
-              ['span', [
-                'Download count: ',
-                downloadedBy
-              ]],
-              ['span', [
-                'Times used as favorite: ',
-                totalFavorites
-              ]]
-            ]];
         })
+      ]];
+    }),
+    ['br'], ['br'],
+    (currentPage === 1 || pages <= 2
+      ? ''
+      : ['span', [
+        ['a', {
+          href: 'javascript: void(0);',
+          $on: {
+            click (e) {
+              e.preventDefault();
+              $('#page')[0].value = 1;
+              $('#openclipart')[0].$submit();
+            }
+          }
+        }, ['First']],
+        ' '
+      ]]
+    ),
+    (currentPage === 1
+      ? ''
+      : ['span', [
+        ['a', {
+          href: 'javascript: void(0);',
+          $on: {
+            click (e) {
+              e.preventDefault();
+              $('#page')[0].value = currentPage - 1;
+              $('#openclipart')[0].$submit();
+            }
+          }
+        }, ['Prev']],
+        ' '
+      ]]
+    ),
+    (currentPage === pages
+      ? ''
+      : ['span', [
+        ['a', {
+          href: 'javascript: void(0);',
+          $on: {
+            click (e) {
+              e.preventDefault();
+              $('#page')[0].value = currentPage + 1;
+              $('#openclipart')[0].$submit();
+            }
+          }
+        }, ['Next']],
+        ' '
+      ]]
+    ),
+    (currentPage === pages || pages <= 2
+      ? ''
+      : ['span', [
+        ['a', {
+          href: 'javascript: void(0);',
+          $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'}]
+          ['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: ',
@@ -190,6 +308,7 @@ jml('div', [
             type: 'number', min: 1, step: 1, pattern: '\\d+'
           }]
         ]]
+      ]]
     ]],
     ['div', {class: 'control'}, [
       ['input', {type: 'submit'}]

package-lock.json

@@ -5587,9 +5587,9 @@
       "dev": true
     },
     "qr-manipulation": {
-      "version": "0.6.1",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/qr-manipulation/-/qr-manipulation-0.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/qr-manipulation/-/qr-manipulation-0.7.0.tgz",
-      "integrity": "sha512-H6xACEWInMrv7AiKSH5xqCEO7opn9WGBe14jAreHu3vqjJpgEcBOYfsR2H45sFlXuWcPMz1gphaHhax/6yMAVQ==",
+      "integrity": "sha512-eSRJ38xLbdcHAEWLKX91OaUVzUuqPGCdnyPu2AjNMRr6OEpxVrvVpCEmaOQN2QZ0zhgA77NxMWLS51W2P+7DxQ==",
       "dev": true
     },
     "qs": {

package.json

@@ -73,7 +73,7 @@
     "node-static": "^0.7.11",
     "opn-cli": "^3.1.0",
     "promise-fs": "^1.3.0",
-    "qr-manipulation": "^0.6.1",
+    "qr-manipulation": "^0.7.0",
     "query-result": "^0.2.0",
     "qunit": "^2.6.2",
     "rollup": "0.66.2",