diff --git a/src/sidebar/base.css b/src/sidebar/base.css index 1ec8d75..3eb3ac9 100644 --- a/src/sidebar/base.css +++ b/src/sidebar/base.css @@ -1,5 +1,6 @@ :root { - --paper: #F8FAFB; + --bg: #f8fafb; + --paper: white; --ink: #222222; --link: #3366cc; --mark: #eaf3ff; @@ -15,12 +16,13 @@ @media (prefers-color-scheme: dark) { :root { - --paper: #27292D; - --ink: #F7F8F9; - --link: #7198F7; - --mark: #27292D; - --code: #55595D; - --shadow: #F7F8F911; + --bg: #27292d; + --paper: #2e3136; + --ink: #f7f8f9; + --link: #7198f7; + --mark: #27292d; + --code: #55595d; + --shadow: #f7f8f911; } } @@ -29,21 +31,22 @@ html { } @font-face { - font-family: 'base-icons'; + font-family: "base-icons"; src: url("res/icons.woff2"); - unicode-range: U+2B9C,U+1F5D9; + unicode-range: U+2B9C, U+1F5D9; } @font-face { - font-family: 'pIqaD'; - src: url("data:font/woff;charset=utf-8;base64,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"); - unicode-range: U+F8D0-F8E9,U+F8F0-F8F9,U+F8FD-F8FF; + font-family: "pIqaD"; + src: url("data:font/woff;charset=utf-8;base64,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"); + unicode-range: U+F8D0-F8E9, U+F8F0-F8F9, U+F8FD-F8FF; } body { - background: var(--paper); + background: var(--bg); color: var(--ink); - font-family: 'base-icons',-apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Lato','Helvetica','Arial', 'pIqaD',sans-serif; + font-family: "base-icons", -apple-system, "BlinkMacSystemFont", "Segoe UI", + "Roboto", "Lato", "Helvetica", "Arial", "pIqaD", sans-serif; font-size: 14px; line-height: 1.2; margin: 0; @@ -51,12 +54,11 @@ body { } mark { - background: #7198F7; + background: #7198f7; display: inline-block; - padding: 0 .25em; + padding: 0 0.25em; } - a:hover { text-decoration: underline; } @@ -83,7 +85,7 @@ video { .placeholder { color: #eaecf0; white-space: break-word; - font-size: .6em; + font-size: 0.6em; } .url { @@ -92,7 +94,7 @@ video { h2 { font-size: 1.7em; - font-family: "Linux Libertine", "Georgia", "Times", 'pIqaD', serif; + font-family: "Linux Libertine", "Georgia", "Times", "pIqaD", serif; font-weight: normal; } @@ -113,18 +115,18 @@ figure { } figcaption { - font-size: .35em; + font-size: 0.35em; line-height: 1; } code { - font-family: 'Menlo','Consolas','Liberation Mono','Courier New',monospace; + font-family: "Menlo", "Consolas", "Liberation Mono", "Courier New", monospace; border: solid 1px var(--code); white-space: nowrap; - padding: .05em .5em; + padding: 0.05em 0.5em; display: inline-block; max-width: calc(100% - 1em); - font-size: .8em; + font-size: 0.8em; overflow: auto; scrollbar-width: thin; vertical-align: bottom; @@ -163,7 +165,7 @@ form button, } button[disabled] { - opacity: .5; + opacity: 0.5; } form input { @@ -186,35 +188,29 @@ form input { @media (prefers-color-scheme: dark) { .footer { - background: #2F3136; - border-top-color: #27292D; + background: #2f3136; + border-top-color: #27292d; } } #content { min-height: 100vh; - background: white; + background: var(--paper); padding: 1em; } -@media (prefers-color-scheme: dark) { - #content { - background: #2E3136; - } -} - #footer:empty { display: none; } #footer { - border-top: 1px solid #CCD0D4; + border-top: 1px solid #ccd0d4; padding: 1em 0; } @media (prefers-color-scheme: dark) { #footer { - border-top-color: #44464A; + border-top-color: #44464a; } } @@ -225,11 +221,11 @@ summary { blockquote { border-left: 3px solid #c8ccd1; - font-family: 'Linux Libertine','Georgia','Times','pIqaD',serif; - font-size: 1.1em; - overflow: hidden; - margin: 1em 0; - padding: 0 1em; + font-family: "Linux Libertine", "Georgia", "Times", "pIqaD", serif; + font-size: 1.1em; + overflow: hidden; + margin: 1em 0; + padding: 0 1em; } h2 { @@ -238,4 +234,4 @@ h2 { section { margin: 1em 0; -} \ No newline at end of file +} diff --git a/src/sidebar/components/actions/actions.tpl.js b/src/sidebar/components/actions/actions.tpl.js index 1090ef9..04b63c3 100644 --- a/src/sidebar/components/actions/actions.tpl.js +++ b/src/sidebar/components/actions/actions.tpl.js @@ -1,39 +1,39 @@ const actions = (title, items) => { - let wrapper = document.createElement('nav'); - wrapper.classList.add('actions'); + let wrapper = document.createElement("nav"); + wrapper.classList.add("actions"); - let headline = document.createElement('h2'); - headline.classList.add('actions__headline') + let headline = document.createElement("h2"); + headline.classList.add("actions__headline"); headline.innerText = title; - let list = document.createElement('ul'); - list.classList.add('actions__actions') + let list = document.createElement("ul"); + list.classList.add("actions__actions"); for (let item of items) { - let listItem = document.createElement('li'); - let link = document.createElement('a'); - - let moji = document.createElement('img'); - moji.classList.add('actions__moji'); + let listItem = document.createElement("li"); + let link = document.createElement("a"); + + let moji = document.createElement("img"); + moji.classList.add("actions__moji"); moji.src = item.moji; link.appendChild(moji); - let itemTitle = document.createElement('span'); - itemTitle.classList.add('actions__title'); - itemTitle.innerText = ' ' + item.title; + let itemTitle = document.createElement("span"); + itemTitle.classList.add("actions__title"); + itemTitle.innerText = " " + item.title; link.appendChild(itemTitle); - let desc = document.createElement('span'); - desc.classList.add('actions__desc'); - desc.innerText = ' ' + item.desc; + let desc = document.createElement("span"); + desc.classList.add("actions__desc"); + desc.innerText = " " + item.desc; link.appendChild(desc); - link.setAttribute('href', item.link); + link.setAttribute("href", item.link); listItem.appendChild(link); if (item.callback) { - link.addEventListener('click', item.callback); + link.addEventListener("click", item.callback); } - link.classList.add('actions__action'); + link.classList.add("actions__action"); list.appendChild(listItem); } @@ -41,6 +41,6 @@ const actions = (title, items) => { wrapper.appendChild(list); return wrapper; -} +}; -export { actions } +export { actions }; diff --git a/src/sidebar/components/annote/annote.tpl.js b/src/sidebar/components/annote/annote.tpl.js index 8892567..fa9304e 100644 --- a/src/sidebar/components/annote/annote.tpl.js +++ b/src/sidebar/components/annote/annote.tpl.js @@ -1,28 +1,25 @@ -const annote = (qualifiers) => { - let dl = document.createElement('dl'); - dl.classList.add('annote'); +import "./annote.css"; + +const annote = (qualifiers) => { + let dl = document.createElement("dl"); + dl.classList.add("annote"); for (let group of qualifiers) { - let dt = document.createElement('dt'); - dt.classList.add('annote__verb'); + let dt = document.createElement("dt"); + dt.classList.add("annote__verb"); dt.appendChild(group.prop); dl.appendChild(dt); - + for (let item of group.vals) { - let dd = document.createElement('dd'); - dd.classList.add('annote__object'); + let dd = document.createElement("dd"); + dd.classList.add("annote__object"); dd.appendChild(item); dl.appendChild(dd); } } - let style = document.createElement('link'); - style.setAttribute('rel', "stylesheet"); - style.setAttribute('href', "components/annote/annote.css"); - - dl.appendChild(style); return dl; -} +}; -export { annote } \ No newline at end of file +export { annote }; diff --git a/src/sidebar/components/bouncer/bouncer.css b/src/sidebar/components/bouncer/bouncer.css index 145f87d..00913c7 100644 --- a/src/sidebar/components/bouncer/bouncer.css +++ b/src/sidebar/components/bouncer/bouncer.css @@ -1,66 +1,50 @@ .bouncer { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: white; + background: var(--paper); + position: relative; } -@media (prefers-color-scheme: dark) { - .bouncer { - background: #27292D; - } -} - - .bouncer__mover { - position: fixed; - left: 50%; - top: 50%; white-space: nowrap; - transform: translate(-50%,-50%); - color: #72777d; + color: #72777d; + text-align: center; + padding: 2em 1em 1em; } .bouncer__mover > .bouncer__bounce, .bouncer__mover:before, .bouncer__mover:after { - content: ''; + content: ""; background-color: currentColor; display: block; - display: inline-block; + display: inline-block; width: 12px; height: 12px; border-radius: 100%; - animation: bounce 1600ms ease-in-out -160ms infinite both + animation: bounce 1600ms ease-in-out -160ms infinite both; } .bouncer__mover:before { margin-right: 4px; - animation-delay: -330ms + animation-delay: -330ms; } .bouncer__mover:after { margin-left: 4px; - animation-delay: 0s + animation-delay: 0s; } @keyframes bounce { 0%, 50%, 100% { - transform: scale(.625) + transform: scale(0.625); } 20% { - opacity: .87; - transform: scale(1) + opacity: 0.87; + transform: scale(1); } } .bouncer__status { - margin-top: 1em; - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 90vw; - white-space: normal; - text-align: center; -} \ No newline at end of file + white-space: normal; + text-align: center; + min-height: 6em; + padding: 1em; +} diff --git a/src/sidebar/components/bouncer/bouncer.tpl.js b/src/sidebar/components/bouncer/bouncer.tpl.js index 09e571f..ab716e5 100644 --- a/src/sidebar/components/bouncer/bouncer.tpl.js +++ b/src/sidebar/components/bouncer/bouncer.tpl.js @@ -1,11 +1,12 @@ -import { templates } from '../templates.tpl.js'; +import { templates } from "../templates.tpl.js"; +import "./bouncer.css"; function statusMessage(parts) { let output = document.createDocumentFragment(); for (let part of parts) { - if (typeof part === 'string') { - output.appendChild(document.createTextNode(part)) - } else if (typeof part === 'object') { + if (typeof part === "string") { + output.appendChild(document.createTextNode(part)); + } else if (typeof part === "object") { let templateName = Object.keys(part)[0]; let parameters = Object.values(part)[0]; if (templates.hasOwnProperty(templateName)) { @@ -17,39 +18,38 @@ function statusMessage(parts) { } const bouncer = () => { - let style = document.createElement('link'); - style.setAttribute('rel', "stylesheet"); - style.setAttribute('href', "components/bouncer/bouncer.css"); + let bg = document.createElement("div"); + bg.classList.add("bouncer"); - let bg = document.createElement('div'); - bg.classList.add('bouncer'); - - let div = document.createElement('div'); - div.classList.add('bouncer__mover'); + let div = document.createElement("div"); + div.classList.add("bouncer__mover"); bg.appendChild(div); - let bounce = document.createElement('div'); - bounce.classList.add('bouncer__bounce'); + let bounce = document.createElement("div"); + bounce.classList.add("bouncer__bounce"); + let status = document.createElement("div"); + status.classList.add("bouncer__status"); div.appendChild(bounce); - div.appendChild(style); - let status = document.createElement('div') - status.classList.add('bouncer__status'); - div.appendChild(status); - status.innerText = 'One moment please…'; + bg.appendChild(status); + status.innerText = "One moment please…"; browser.runtime.onMessage.addListener((data, sender) => { - if (data.type === 'status') { - status.innerText = ''; + if (data.type === "status") { + status.innerText = ""; status.appendChild(statusMessage(data.message)); } }); - window.addEventListener("message", (event) => { - if (event.data.type === 'status') { - status.innerText = ''; - status.appendChild(statusMessage(event.data.message)); - } - }, false); + window.addEventListener( + "message", + (event) => { + if (event.data.type === "status") { + status.innerText = ""; + status.appendChild(statusMessage(event.data.message)); + } + }, + false + ); return bg; -} +}; -export { bouncer } +export { bouncer }; diff --git a/src/sidebar/components/picture/picture.tpl.js b/src/sidebar/components/picture/picture.tpl.js index ac841d4..b449a26 100644 --- a/src/sidebar/components/picture/picture.tpl.js +++ b/src/sidebar/components/picture/picture.tpl.js @@ -1,33 +1,28 @@ +import "./picture.css"; + const picture = (vars) => { - let tag = document.createElement('img'); + let tag = document.createElement("img"); let srcset = []; for (let key in vars.srcSet) { - srcset.push(`${ vars.srcSet[key] } ${ key }w`); + srcset.push(`${vars.srcSet[key]} ${key}w`); } - tag.setAttribute('srcset', srcset.join(',')); - tag.setAttribute('loading', 'lazy'); + tag.setAttribute("srcset", srcset.join(",")); + tag.setAttribute("loading", "lazy"); - tag.setAttribute('src', vars.srcSet[0]); + tag.setAttribute("src", vars.srcSet[0]); - let wrapper = document.createElement('figure'); - wrapper.classList.add('picture'); + let wrapper = document.createElement("figure"); + wrapper.classList.add("picture"); wrapper.appendChild(tag); - - let style = document.createElement('link'); - style.setAttribute('rel', "stylesheet"); - style.setAttribute('href', "components/picture/picture.css"); - - wrapper.appendChild(style); - if (vars.tag) { - let tagWrapper = document.createElement('div'); - tagWrapper.classList.add('picture__tag'); + let tagWrapper = document.createElement("div"); + tagWrapper.classList.add("picture__tag"); tagWrapper.appendChild(vars.tag); wrapper.appendChild(tagWrapper); } - + return wrapper; -} +}; -export { picture } +export { picture }; diff --git a/src/sidebar/components/proof/proof.tpl.js b/src/sidebar/components/proof/proof.tpl.js index 79a427a..4a746aa 100644 --- a/src/sidebar/components/proof/proof.tpl.js +++ b/src/sidebar/components/proof/proof.tpl.js @@ -1,26 +1,23 @@ -const proof = (vars) => { - let dl = document.createElement('dl'); - dl.classList.add('proof'); +import "./proof.css"; - let dt = document.createElement('dt'); - dt.classList.add('proof__verb'); +const proof = (vars) => { + let dl = document.createElement("dl"); + dl.classList.add("proof"); + + let dt = document.createElement("dt"); + dt.classList.add("proof__verb"); dt.appendChild(vars.prop); dl.appendChild(dt); - dl.appendChild(document.createTextNode(' ')); - + dl.appendChild(document.createTextNode(" ")); + for (let item of vars.vals) { - let dd = document.createElement('dd'); - dd.classList.add('proof__object'); + let dd = document.createElement("dd"); + dd.classList.add("proof__object"); dd.appendChild(item); dl.appendChild(dd); } - let style = document.createElement('link'); - style.setAttribute('rel', "stylesheet"); - style.setAttribute('href', "components/proof/proof.css"); - - dl.appendChild(style); return dl; -} +}; export { proof }; diff --git a/src/sidebar/components/title/title.tpl.js b/src/sidebar/components/title/title.tpl.js index 4fa0103..0453a47 100644 --- a/src/sidebar/components/title/title.tpl.js +++ b/src/sidebar/components/title/title.tpl.js @@ -1,17 +1,13 @@ -const title = (vars) => { - let style = document.createElement('link'); - style.setAttribute('rel', "stylesheet"); - style.setAttribute('href', "components/title/title.css"); - - let tag = document.createElement('i'); +import "./title.css"; + +const title = (vars) => { + let tag = document.createElement("i"); tag.innerText = vars.text; - tag.classList.add('title') + tag.classList.add("title"); if (vars.lang) { - tag.setAttribute('lang', vars.lang); - } - tag.appendChild(style) + tag.setAttribute("lang", vars.lang); + } return tag; - -} +}; export { title }; diff --git a/src/sidebar/improve.html b/src/sidebar/improve.html index d2a5801..696e87e 100644 --- a/src/sidebar/improve.html +++ b/src/sidebar/improve.html @@ -1,24 +1,26 @@ - + - - - + + + Wikidata - + - -
- + + +
+ - - - \ No newline at end of file + + + diff --git a/src/sidebar/improve.js b/src/sidebar/improve.js index 136f2c0..2addcd9 100644 --- a/src/sidebar/improve.js +++ b/src/sidebar/improve.js @@ -1,36 +1,40 @@ -import { wikidataGetEntity } from '../wd-get-entity.js'; -import { constraintsToStatements } from './constraintsToStatements.js'; -import { getFormatterUrls } from './get-formatter-urls.js'; -import { getCurrentTab } from '../get-current-tab.js'; -import { findLinkedData, enrichLinkedData } from '../content/content__collect-ld.js'; -import { ldToStatements } from './ldToStatements.js'; -import { getElementLanguage } from '../content/content__collect-strings.js'; -import { makeLanguageValid } from '../get-valid-string-languages.js'; -import { sparqlQuery } from "../sqarql-query.js" -import { templates } from "./components/templates.tpl.js" -import { updateStatusInternal } from "../update-status.js" -import { findMediaWikiData } from "./mw-data.js" -import { findMetaData, enrichMetaData } from '../content/content__collect-meta.js'; -import { metaToStatements } from './metaToStatements.js'; -import { wdGetOSMElements, OSMToSatements } from './osm.js'; +import { wikidataGetEntity } from "../wd-get-entity.js"; +import { constraintsToStatements } from "./constraintsToStatements.js"; +import { getFormatterUrls } from "./get-formatter-urls.js"; +import { getCurrentTab } from "../get-current-tab.js"; +import { + findLinkedData, + enrichLinkedData, +} from "../content/content__collect-ld.js"; +import { ldToStatements } from "./ldToStatements.js"; +import { getElementLanguage } from "../content/content__collect-strings.js"; +import { makeLanguageValid } from "../get-valid-string-languages.js"; +import { sparqlQuery } from "../sqarql-query.js"; +import { templates } from "./components/templates.tpl.js"; +import { updateStatusInternal } from "../update-status.js"; +import { findMediaWikiData } from "./mw-data.js"; +import { + findMetaData, + enrichMetaData, +} from "../content/content__collect-meta.js"; +import { metaToStatements } from "./metaToStatements.js"; +import { wdGetOSMElements, OSMToSatements } from "./osm.js"; import { URL_match_pattern } from "../content/resolver__url-match-pattern.js"; -import { PrependNav } from './prepend-nav.js'; +import { PrependNav } from "./prepend-nav.js"; PrependNav(); async function checkRedirectForIds(url, propform, originalUrl, claims) { let comment = templates.smallBlock( - templates.text( - [ - document.createTextNode('Found behind redirect of '), - templates.urlLink(originalUrl), - document.createTextNode(' to '), - templates.urlLink(url), - ] - ) + templates.text([ + document.createTextNode("Found behind redirect of "), + templates.urlLink(originalUrl), + document.createTextNode(" to "), + templates.urlLink(url), + ]) ); const location = { - href: url + href: url, }; let isApplicable = await URL_match_pattern.applicable(location); if (isApplicable) { @@ -44,14 +48,17 @@ async function checkRedirectForIds(url, propform, originalUrl, claims) { return false; } - let check = document.createElement('input'); - check.setAttribute('type', 'checkbox'); - check.setAttribute('name', isApplicable[0].value); - check.setAttribute('value', JSON.stringify({ - type: 'set_claim', - verb: isApplicable[0].prop, - object: isApplicable[0].value, - })); + let check = document.createElement("input"); + check.setAttribute("type", "checkbox"); + check.setAttribute("name", isApplicable[0].value); + check.setAttribute( + "value", + JSON.stringify({ + type: "set_claim", + verb: isApplicable[0].prop, + object: isApplicable[0].value, + }) + ); // these need to be checked check.checked = false; @@ -60,31 +67,35 @@ async function checkRedirectForIds(url, propform, originalUrl, claims) { check: check, prop: label, vals: [ - templates.text([ - templates.code(isApplicable[0].value), - comment, - ]), + templates.text([templates.code(isApplicable[0].value), comment]), ], }); - propform.appendChild(preview); + propform.appendChild(preview); } } } -let content = document.getElementById('content'); -let propform = document.createElement('form'); +let content = document.getElementById("content"); +let intro = document.getElementById("intro"); +let propform = document.createElement("form"); +let saveButton = document.createElement("button"); content.appendChild(propform); let numberOfProposals = 0; const observer = new MutationObserver((change) => { + if (propform.children.length > 0) { + saveButton.removeAttribute("hidden"); + } if (numberOfProposals < propform.children.length) { [...propform.children] - .sort((a,b) => a.getAttribute('data-sortkey') > b.getAttribute('data-sortkey') ? 1 : -1) - .forEach(node => propform.appendChild(node)); - numberOfProposals = propform.children.length; + .sort((a, b) => + a.getAttribute("data-sortkey") > b.getAttribute("data-sortkey") ? 1 : -1 + ) + .forEach((node) => propform.appendChild(node)); + numberOfProposals = propform.children.length; } }); -observer.observe(propform, {childList: true}); +observer.observe(propform, { childList: true }); const parser = new DOMParser(); @@ -101,10 +112,10 @@ async function getAllClasses(instance) { } BIND (replace(str(?class), 'http://www.wikidata.org/entity/', '') AS ?c) } - ` + `; let classes = await sparqlQuery(query); let output = []; - for(let cl of classes) { + for (let cl of classes) { output.push(cl.c.value); } return output; @@ -113,30 +124,27 @@ async function getAllClasses(instance) { let bouncer = templates.bouncer(); let message = templates.intertitle({ icon: { - src: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/OpenMoji-color_1F44C.svg', - alt: '👌', + src: "https://upload.wikimedia.org/wikipedia/commons/a/a5/OpenMoji-color_1F44C.svg", + alt: "👌", }, - text: 'Could not find possible improvements. Add external identifers and try again.', + text: "Could not find possible improvements. Add external identifers and try again.", }); if (window.location.search) { - let currentEntity = window.location.search.match(/^\?(\w\d+)/, '')[1]; + let currentEntity = window.location.search.match(/^\?(\w\d+)/, "")[1]; if (currentEntity.match(/[QMPL]\d+/)) { - ( async()=> { - - document.body.appendChild(bouncer); + (async () => { + intro.appendChild(bouncer); browser.runtime.sendMessage({ - type: 'lock_sidebar', + type: "lock_sidebar", }); const entities = await wikidataGetEntity(currentEntity, false); - - updateStatusInternal([ - 'Searching OpenStreetMap for relevant data…', - ]); + + updateStatusInternal(["Searching OpenStreetMap for relevant data…"]); let osmElements = await wdGetOSMElements(currentEntity); - + if (osmElements.length > 0) { for (let element of osmElements) { OSMToSatements(element, propform, { @@ -149,20 +157,30 @@ if (window.location.search) { for (let id of Object.keys(entities)) { let entity = entities[id]; let classes = await getAllClasses(id); - for(let claim in entity.claims) { - if (['url', 'external-id'].includes(entity.claims[claim][0].mainsnak?.datatype) && entity?.claims[claim][0].mainsnak?.datavalue?.value) { - let urls = []; + for (let claim in entity.claims) { + if ( + ["url", "external-id"].includes( + entity.claims[claim][0].mainsnak?.datatype + ) && + entity?.claims[claim][0].mainsnak?.datavalue?.value + ) { + let urls = []; switch (entity.claims[claim][0].mainsnak.datatype) { - case 'external-id': - for (let key in entity.claims[claim]) { - let moreUrls = await getFormatterUrls(claim, entity.claims[claim][key].mainsnak.datavalue.value); + case "external-id": + for (let key in entity.claims[claim]) { + let moreUrls = await getFormatterUrls( + claim, + entity.claims[claim][key].mainsnak.datavalue.value + ); urls = [...urls, ...moreUrls]; - } - break; - case 'url': + } + break; + case "url": for (let key in entity.claims[claim]) { - if(entity.claims[claim][key].mainsnak?.datavalue?.value) { - urls.push(entity.claims[claim][key].mainsnak.datavalue.value); + if (entity.claims[claim][key].mainsnak?.datavalue?.value) { + urls.push( + entity.claims[claim][key].mainsnak.datavalue.value + ); } } break; @@ -170,9 +188,9 @@ if (window.location.search) { for (let url of urls) { updateStatusInternal([ - 'Searching ', - {urlLink: url}, - ' for metadata…', + "Searching ", + { urlLink: url }, + " for metadata…", ]); try { let result = await fetch(url); @@ -180,37 +198,50 @@ if (window.location.search) { let text = await result.text(); if (result.redirected) { - await checkRedirectForIds(result.url, propform, url, entity.claims); + await checkRedirectForIds( + result.url, + propform, + url, + entity.claims + ); } if (text) { const doc = parser.parseFromString(text, "text/html"); - let canonical = doc.querySelector('link[rel="canonical"][href]'); + let canonical = doc.querySelector( + 'link[rel="canonical"][href]' + ); if (canonical) { - sourceUrl = canonical.getAttribute('href'); + sourceUrl = canonical.getAttribute("href"); updateStatusInternal([ - 'Searching ', - {urlLink: sourceUrl}, - ' for metadata…', + "Searching ", + { urlLink: sourceUrl }, + " for metadata…", ]); } if (!visitedUrls.includes(sourceUrl)) { visitedUrls.push(sourceUrl); - let title = doc.querySelector('title'); - let root = doc.querySelector('html'); - let rootLang = root.hasAttribute('lang') ? root.getAttribute('lang') : ''; + let title = doc.querySelector("title"); + let root = doc.querySelector("html"); + let rootLang = root.hasAttribute("lang") + ? root.getAttribute("lang") + : ""; let validRootLang = await makeLanguageValid(rootLang); const meta = findMetaData(doc); if (meta) { updateStatusInternal([ - 'Found metadata in ', - {urlLink: url}, - '!', + "Found metadata in ", + { urlLink: url }, + "!", ]); - let enrichedMeta = await enrichMetaData(meta, rootLang, url); + let enrichedMeta = await enrichMetaData( + meta, + rootLang, + url + ); await metaToStatements(enrichedMeta, propform, { url: sourceUrl, title: title ? title.innerText.trim() : null, @@ -218,13 +249,12 @@ if (window.location.search) { }); } - const ld = findLinkedData(doc); if (ld) { updateStatusInternal([ - 'Found structured data in ', - {urlLink: url}, - '!', + "Found structured data in ", + { urlLink: url }, + "!", ]); let enriched = await enrichLinkedData(ld, claim, url); await ldToStatements(enriched, propform, { @@ -233,8 +263,11 @@ if (window.location.search) { lang: validRootLang, }); } - const mwData = await findMediaWikiData(doc, propform, sourceUrl ?? url); - + const mwData = await findMediaWikiData( + doc, + propform, + sourceUrl ?? url + ); } } } catch (error) { @@ -245,57 +278,62 @@ if (window.location.search) { const property = await wikidataGetEntity(claim, false); if (property[claim].claims?.P2302) { updateStatusInternal([ - 'Checking constraints for ', - {placeholder: {entity: claim}}, + "Checking constraints for ", + { placeholder: { entity: claim } }, ]); - constraintsToStatements(claim, property[claim].claims.P2302, propform, classes); + constraintsToStatements( + claim, + property[claim].claims.P2302, + propform, + classes + ); } } - document.body.removeChild(bouncer); + intro.removeChild(bouncer); if (propform.children.length < 1) { - document.body.innerText = ''; + document.body.innerText = ""; document.body.appendChild(message); } } - })() + })(); } - let form = document.createElement('div'); - form.classList.add('submit-actions'); + let form = document.createElement("div"); + form.classList.add("submit-actions"); content.appendChild(form); - let saveButton = document.createElement('button'); form.appendChild(saveButton); - saveButton.innerText = 'Send to Wikidata'; - - saveButton.addEventListener('click', async function() { + saveButton.setAttribute("hidden", true); + saveButton.innerText = "Send to Wikidata"; + + saveButton.addEventListener("click", async function () { let currentTab = await getCurrentTab(); let jobs = []; - const formData = new FormData(propform) + const formData = new FormData(propform); for (let pair of formData.entries()) { - if (pair[1] != '') { - let job = JSON.parse(pair[1]); - if (!job.subject) { - job.subject = currentEntity; - job.fromTab = currentTab; - } - jobs.push(job); + if (pair[1] != "") { + let job = JSON.parse(pair[1]); + if (!job.subject) { + job.subject = currentEntity; + job.fromTab = currentTab; + } + jobs.push(job); } } Promise.all([ browser.runtime.sendMessage({ - type: 'send_to_wikidata', + type: "send_to_wikidata", data: jobs, - }), + }), browser.runtime.sendMessage({ - type: 'unlock_sidebar', + type: "unlock_sidebar", }), ]).then((values) => { browser.runtime.sendMessage({ - type: 'wait', + type: "wait", tid: currentTab, }); }); }); -} \ No newline at end of file +}