Reimplement “add new depicted” form in Codex
The old WikibaseMediaInfo-based version was super hacky and evil
(pulling in ResourceLoader and then trying to patch it to load modules
from commons.wikimedia.org instead of the current domain), and had also
apparently been broken for I don’t know how long. (It must’ve still been
working on 2022-05-20 per the screenshot on Commons [1]; if I had to
guess, the ResourceLoader changes for dropping ES5 support in T178356
seem like the most likely cause.) Good riddance, you will not be missed.
The reimplementation uses the lovely Codex design system [2], which is
available on Toolforge CDNjs now (T338834). (Although I also want to use
m3api, which isn’t eligible for CDNjs yet, so I still have to install
*some* libraries via npm and symlink node_modules/ into static/; in
other words, Codex being available in CDNjs didn’t block this work, it’s
just nice as a convenience and motivation.) Everything is stuffed into
one big Vue component at the moment, because it was easier that way; I
might extract some separate components later, e.g. a Wikidata item
lookup. (I might also move this whole part into a separate file, so that
the other parts of image.js don’t have to wait for all the dependencies
to load.)
The visual layout isn’t particularly great, but it’ll do for now. (It’s
not like the old version was ideal either, frankly – look at the total
lack of spacing above “Add more statements:” in the old screenshot.)
I’m sure this raises the minimum required browser version somewhat
(previously we weren’t even using async/await yet; import maps are a
more recent feature still), but I don’t particularly care. It’s a
Toolforge tool, I’m happy to require modern browsers here.
[1]: https://commons.wikimedia.org/wiki/File:Wikidata_Image_Positions_%2B_Structured_Data_on_Commons.png
[2]: https://doc.wikimedia.org/codex/latest/