User:Lucas Werkmeister (WMDE)/colorIndicator.js
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
// NOTE: this user script cannot be used yet! See https://www.wikidata.org/wiki/Special:PermanentLink/588239932#Gadget_.2F_userscript_editor_feedback_wanted
/*
* User script to add a small indicator to “sRGB color hex triplet” statements,
* showing the color specified in the statement.
*/
// TODO it would be nice to support qualifiers and references as well
/**
* @type {string} the property ID of the “sRGB color hex triplet” property
*/
var RGB_PROPERTY_ID = 'P465';
/**
* Add the indicator to the statement with the given ID.
* @param {string} statementId the statement ID
*/
function addColorIndicator( statementId ) {
var $statement = $( '.wikibase-statement-' + $.escapeSelector( statementId ) );
if ( $statement.parents( '#' + $.escapeSelector( RGB_PROPERTY_ID ) ).length === 0 ) {
// not an “sRGB color hex triplet” statement, skip
return;
}
var $mainsnak = $statement.find( '.wikibase-statementview-mainsnak .wikibase-snakview' ),
// $value is either the inner .valueview-instaticmode element (which appears after editing a statement),
// or, if that doesn’t exist, the outer .wikibase-snakview-value element
$value = $mainsnak.find( '.wikibase-snakview-value' ).find( '.valueview-instaticmode' ).addBack().first(),
// statement value (without #)
rgb = $value.text(),
// list of indicators on the main snak
$indicators = $mainsnak.find( '.wikibase-snakview-indicators' ),
// new indicator (the .wikibase-snakview-indicator class adds some default styling)
$indicator = $( '<span>' )
.addClass( 'wikibase-snakview-indicator gadget-colorIndicator-indicator' )
.text( '●' ) // U+25CF BLACK CIRCLE
.css( { color: '#' + rgb } );
$indicators.append( $indicator );
}
// add initial indicators when the page is loaded
mw.hook( 'wikibase.entityPage.entityLoaded' ).add( function( entityData ) {
if ( RGB_PROPERTY_ID in entityData.claims ) {
var colorStatements = entityData.claims[ RGB_PROPERTY_ID ];
colorStatements.forEach( function( colorStatement ) {
addColorIndicator( colorStatement.id );
} );
}
} );
// re-add indicators each time a statement is saved
mw.hook( 'wikibase.statement.saved' ).add( function( entityId, statementId ) {
addColorIndicator( statementId );
} );