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 https://phabricator.wikimedia.org/T167869 and phab:T169866 https://phabricator.wikimedia.org/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 https://www.wikidata.org/wiki/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:
- checkConstraints https://www.wikidata.org/wiki/MediaWiki:Gadget-checkConstraints.js - EasyQuery https://www.wikidata.org/wiki/MediaWiki:Gadget-EasyQuery.js - User:Aude/mapview.js https://www.wikidata.org/wiki/User:Aude/mapview.js - User:Lucas Werkmeister (WMDE)/colorIndicator.js https://www.wikidata.org/wiki/User:Lucas_Werkmeister_(WMDE)/colorIndicator.js (mentioned above)
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 . Do you see any problems with this new HTML layout, or do you want to suggest any improvements? (You can reply to this email, or on the Project chat https://www.wikidata.org/wiki/Wikidata:Project_chat#Gadget_.2F_userscript_editor_feedback_wanted, or comment on phab:T95403 https://phabricator.wikimedia.org/T95403.)
Cheers, Lucas
wikidata-tech@lists.wikimedia.org