Hi everyone! I’m considering to make a change to the HTML output for statements, and I’d like to gather some feedback from people who work on gadgets and user scripts :)
The problem is that any gadget that appends to the value of a statement (e. g. checkConstraints) changes the HTML in a way that Wikibase’s own JavaScript doesn’t expect, and sometimes the appended elements bleed into Wikibase’s own elements, causing e. g. phab:T167869 and phab:T169866. (To clarify: the tasks mention checkConstraints specifically, but at least the first task also affects other gadgets.)
My proposed solution is to change the layout of the HTML slightly, from the current
<div class="wikibase-snakview-value-container" dir="auto">
<div class="wikibase-snakview-typeselector">...</div>
<div class="wikibase-snakview-value">...</div>
</div>
into the following:
<div class="wikibase-snakview-value-container" dir="auto">
<div class="wikibase-snakview-typeselector">...</div>
<div class="wikibase-snakview-body">
<span class="wikibase-snakview-value">...</span>
<span class="wikibase-snakview-indicators"></span>
</div>
</div>
There is a new element for “indicators” on a snak, and the value itself is now a span inside of a new div wrapper. The indicators are hidden while the statement is edited, and cleared on save. Gadgets can subscribe to the wikibase.statement.saved
hook to populate the indicators again after a statement has been saved,
using the new value. A simple example gadget using this technique is at
User:Lucas Werkmeister (WMDE)/colorIndicator.js.
Here’s a list of some gadgets and user scripts I’m aware of that could use this “indicators” area:
Existing gadgets that use something like $( '.wikibase-snakview-value' ).append( … )
will continue to work, though they could be changed to append to the
indicators instead. However, gadgets that select something like div.wikibase-snakview-value will break, since the element is no longer a div.