+ raw => <<'EOT',
+<style>
+dl {
+ display: inline-grid;
+ grid: auto-flow / min-content repeat(10, auto);
+}
+
+form > ul {
+ display: table;
+ border-spacing: 0 2px;
+}
+form > ul li {
+ display: table-row;
+}
+form > ul li > * {
+ display: table-cell;
+ padding-right: .5em;
+}
+form > ul li > label {
+ /* th */
+ text-align: right;
+}
+form > ul li > label + * {
+ /* td */
+ width: 32em;
+}
+
+form > ul li > p input {
+ box-sizing: border-box;
+ width: 100%;
+ padding: .4rem;
+ font-family: monospace;
+}
+form > ul li img {
+ max-width: 300px;
+}
+
+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;
+}
+
+h1 {
+ margin-bottom: 1ex;
+}
+.inline {
+ display: inline-flex;
+ align-items: start;
+ margin: 0 -1ex; /* inner gap */
+}
+.inline > * {
+ margin: 0 1ex;
+}
+.inline .inline {
+ display: flex;
+}
+
+#nav {
+ -margin-left: 1em; /* flex gap */
+}
+#nav > ul,
+#nav > ul strong,
+#nav form {
+ margin: 1ex 0;
+ display: inline-block;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+ var wpinput = document.getElementById('wptitle');
+ var wpbutton = wpinput.parentNode.appendChild(document.createElement('button'));
+ wpbutton.type = 'button';
+ wpbutton.append('Copy');
+ wpbutton.onclick = () => {
+ let wptitle = wpinput.value || document.getElementById('form').value;
+ let wplang = document.getElementById('lang').value.substr(0, 2); // crude iso-639-3→2
+ let wpapi = `https://${wplang}.wikipedia.org/w/api.php`;
+ let wppage = wpapi+'?action=parse&format=json&origin=*&prop=text&page='+wptitle;
+ fetch(wppage).then(res => res.json()).then(json => {
+ if (json.error) throw `error returned: ${json.error.info}`;
+ wpinput.value = json.parse.title;
+ let imginput = document.getElementById('source');
+ if (imginput.value) return;
+ 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;
+ };
+});
+</script>
+EOT