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>
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;
};
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",