word edit: select wikipedia images from overlay

diff --git a/writer.plp b/writer.plp
index 24c5599635e0a19ca13cbe6dde820368cae7a9ee..66dd2beb4038f3b0c3fb0ce8597ef42338b4bad6 100644 (file)
--- a/writer.plp
+++ b/writer.plp
@@ -28,6 +28,21 @@ dd > img {
 dd input ~ button {
        margin-left: -5em;
 }
+
+ul.popup {
+       display: flex;
+       flex-wrap: wrap;
+       align-items: end;
+       position: fixed;
+       left: 0;
+       top: 0;
+       margin: auto;
+       max-height: 90%;
+       max-width: 90%;
+       overflow: auto;
+       background: rgba(0, 0, 0, .8);
+       border: 1px solid #CCC;
+}
 </style>
 
 <script>
@@ -44,10 +59,21 @@ document.addEventListener('DOMContentLoaded', () => {
                        wpinput.value = json.parse.title;
                        let imginput = document.getElementById('source');
                        if (imginput.value) return;
-                       let wpimages = json.parse.text['*'].match(/<img\s[^>]+/g);
-                       imginput.value = wpimages[0].match(/\ssrc="([^"]+)"/)[1]
-                               .replace(/^(?=\/\/)/, 'https:')
-                               .replace(/\/thumb(\/.+)\/[^\/]+$/, '$1');
+                       let wpimages = json.parse.text['*'].match(/<img\s[^>]+>/g);
+                       let wpselect = wpinput.parentNode.appendChild(document.createElement('ul'));
+                       wpselect.className = 'popup';
+                       wpimages.forEach(img => {
+                               let selectitem = wpselect.appendChild(document.createElement('li'));
+                               selectitem.insertAdjacentHTML('beforeend', img);
+                               selectitem.onclick = e => {
+                                       let imgsrc = e.target.src
+                                               .replace(/^(?=\/\/)/, 'https:')
+                                               .replace(/\/thumb(\/.+)\/[^\/]+$/, '$1');
+                                       imginput.value = imgsrc;
+                                       wpselect.remove();
+                                       return false;
+                               };
+                       });
                }).catch(error => alert(error));
                return false;
        };
@@ -109,11 +135,15 @@ elsif ($ENV{REQUEST_METHOD} eq 'POST') {
        my $thumbpath = "data/word/eng/$row->{form}.jpg";
        if (-e $imgpath) {
                my @cmds = @{ $row->{thumb} // [] };
-               unshift @cmds, -gravity => @cmds ? 'northwest' : 'center';
-               unshift @cmds, 'convert';
-               push @cmds, -resize => '300x200^', -extent => '300x200';
-               push @cmds, '-strip', -quality => '60%', -interlace => 'plane';
-               push @cmds, $imgpath, $thumbpath;
+               @cmds = (
+                       'convert',
+                       -delete => '1--1', -background => 'white',
+                       -gravity => @cmds ? 'northwest' : 'center',
+                       @cmds,
+                       -resize => '300x200^', -extent => '300x200',
+                       '-strip', -quality => '60%', -interlace => 'plane',
+                       $imgpath => $thumbpath
+               );
                my $status = system @cmds;
                $status == 0 or Alert([
                        "Thumbnail image not generated",