Admin: Created page with "/* Any JavaScript here will be loaded for all users on every page load. */ /*** * This script enables users to easily change order of values in any statement. * It adds a rearrange button to all statements with multiple values. * After clicking the button, up/down arrows are added near each value, which * can be used to move values up or down in the list. * Alternatively, the statements can be dragged into the desired positions. * Once the statements are in the ri..."

2025-03-06T06:31:57Z

Created page with "Any JavaScript here will be loaded for all users on every page load.: /*** * This script enables users to easily change order of values in any statement. * It adds a rearrange button to all statements with multiple values. * After clicking the button, up/down arrows are added near each value, which * can be used to move values up or down in the list. * Alternatively, the statements can be dragged into the desired positions. * Once the statements are in the ri..."

New page

/* Any JavaScript here will be loaded for all users on every page load. */

/***
* This script enables users to easily change order of values in any statement.
* It adds a rearrange button to all statements with multiple values.
* After clicking the button, up/down arrows are added near each value, which
* can be used to move values up or down in the list.
* Alternatively, the statements can be dragged into the desired positions.
* Once the statements are in the right order, clicking save submits an edit
* for the changes.
*/

( function ( $, mw ) {
// This should work only in the main and property namespaces
if ( mw.config.get( 'wgNamespaceNumber' ) !== 0 && mw.config.get( 'wgNamespaceNumber' ) !== 120 ) {
return;
}

var translations = require( './RearrangeValues-i18n.json' );
$.i18n().load( translations );

var commons_upload = 'https://upload.wikimedia.org/wikipedia/commons/';
var merge_icon = commons_upload + 'b/b0/Symbol_merge_vote.svg';
var up_icon = commons_upload + 'c/ca/OOjs_UI_icon_upTriangle.svg';
var down_icon = commons_upload + '0/0c/OOjs_UI_icon_downTriangle.svg';

// Original order of values to return to when "cancel" is pressed
var statement_original_orders = {};

// Generate the rearrange button
function ra_img( element_id ) {
var img = $( '<img>' )
.attr( 'src', merge_icon )
.attr( 'alt', $.i18n( 'gadget-rearrangevalues-button' ) )
.attr( 'title', $.i18n( 'gadget-rearrangevalues-button' ) );
return $( '<a>' )
.attr( 'href', '#' )
.attr( 'tabindex', 0 )
.append( img )
.on( 'click', function () {
statement_selected( element_id );
return false;
} );
}

// Add rearrange buttons to all statements with multiple values
$( '.wikibase-statementgrouplistview' ).children().children().each( function () {
var values_elements = $( this ).find( ':nth-child(2) .wikibase-statementview' );
if ( values_elements.length >= 2 ) {
var element_id = this.id;
var img_div = $( '<div>' )
.attr( 'id', 'button' + element_id )
.addClass( 'rearrange-values' )
.append( ra_img( element_id ) );
$( this ).children().first().children().first().append( '<br>', img_div );
}
} );

// If one of the rearrange buttons is pressed, add save/cancel buttons
// and up/down arrow buttons for each value
function statement_selected( statement_p ) {
// Save/cancel buttons
var button_save = new OO.ui.ButtonWidget( {
label: mw.msg( 'wikibase-save' ),
icon: 'check',
flags: [ 'primary', 'progressive' ]
} ).on( 'click', function () {
save( statement_p );
} );

var button_cancel = new OO.ui.ButtonWidget( {
label: mw.msg( 'wikibase-cancel' ),
icon: 'close',
flags: [ 'primary', 'destructive' ]
} ).on( 'click', function () {
cancel( statement_p );
} );

$( '#button' + statement_p ).empty().append( button_save.$element, button_cancel.$element );

// List to store original order of values to return to if "cancel" is pressed
var original_order = [];

// Variables needed for drag and drop
var element_height;
var dragged_node_id;
var node_new_position;
var prev_node;
var next_node;
var first_node;
var last_node;
var dragover_counter = 0;
var index_of_dragged_node;

// Iterate over each value
$( '#' + statement_p + ' :nth-child(2) .wikibase-statementview' ).each( function () {
// Remove dollar sign from IDs because it's a special character in jquery
var value_id = this.id.replace( '$', '' );
$( this ).attr( 'id', value_id );

// Add the current ID to the list of original values
original_order.push( value_id );

// Add up/down buttons to the current value
var img_up = $( '<img>' )
.attr( 'src', up_icon )
.attr( 'alt', $.i18n( 'gadget-rearrangevalues-move-up' ) )
.attr( 'title', $.i18n( 'gadget-rearrangevalues-move-up' ) );
var arrow_up = $( '<a>' )
.attr( 'href', '#' )
.attr( 'tabindex', 0 )
.append( img_up )
.on( 'click', function () {
move_value_up( value_id );
return false;
} );
var img_down = $( '<img>' )
.attr( 'src', down_icon )
.attr( 'alt', $.i18n( 'gadget-rearrangevalues-move-down' ) )
.attr( 'title', $.i18n( 'gadget-rearrangevalues-move-down' ) );
var arrow_down = $( '<a>' )
.attr( 'href', '#' )
.attr( 'tabindex', 0 )
.append( img_down )
.on( 'click', function () {
move_value_down( value_id );
return false;
} );
var div_arrows = $( '<div>' )
.append( arrow_up, arrow_down )
.addClass( 'move_arrows_block' );
$( this ).find( '.wikibase-edittoolbar-container' ).append( div_arrows );

// Make values draggable
$( this ).attr( 'draggable', 'true' ).addClass( 'draggable' );
$( this ).on( 'dragstart', function ( event ) {
dragged_node_id = event.target.id;
if ( !dragged_node_id ) {
return;
}
element_height = document.getElementById( dragged_node_id ).offsetHeight;
setTimeout( function () {
$( '#' + dragged_node_id ).css( 'display', 'none' );
}, 0 );
} );
} );

// Add the original order of this statement to the list of original orders of all statements
statement_original_orders[ statement_p ] = original_order;

// What to do when an element is being dragged
$( 'body' ).on( 'dragover', function ( event ) {
event.preventDefault();

// Get the positions of all nodes
var nodes_positions = [];
$( '#' + statement_p + ' :nth-child(2) .wikibase-statementview' ).each( function ( index ) {
if ( this.id === dragged_node_id ) {
index_of_dragged_node = index;
return;
}
var element_id = this.id;
var element = document.getElementById( element_id );
if ( !element ) {
return;
}
var node_position = element.getBoundingClientRect();
nodes_positions.push( {
id: element_id,
y: ( node_position.top + node_position.bottom ) / 2
} );
if ( dragover_counter === 0 && index > index_of_dragged_node ) {
nodes_positions[ nodes_positions.length - 1 ].y += element_height;
}
$( this ).css( 'marginTop', '' );
$( this ).css( 'marginBottom', '' );
} );

// Get the position of the node currently being dragged
node_new_position = 0;
first_node = nodes_positions[ 0 ].id;
last_node = nodes_positions[ nodes_positions.length - 1 ].id;
for ( var i = 0; i < nodes_positions.length; i++ ) {
if ( nodes_positions[ i ].y < event.clientY ) {
node_new_position = i + 1;
prev_node = nodes_positions[ i ].id;
next_node = ( i + 1 < nodes_positions.length ) ? nodes_positions[ i + 1 ].id : '';
} else {
break;
}
}

// Create space for the node currently being dragged
if ( node_new_position === 0 ) {
$( '#' + first_node ).css( 'marginTop', element_height + 'px' );
} else if ( node_new_position === nodes_positions.length ) {
$( '#' + last_node ).css( 'marginBottom', element_height + 'px' );
} else {
$( '#' + prev_node ).css( 'marginBottom', element_height / 2 + 'px' );
$( '#' + next_node ).css( 'marginTop', element_height / 2 + 'px' );
}
dragover_counter++;
} );

// What to do when element is dropped
$( 'body' ).on( 'drop', function ( event ) {
event.preventDefault();

if ( node_new_position === 0 ) {
$( '#' + first_node ).before( $( '#' + dragged_node_id ) );
} else {
$( '#' + prev_node ).after( $( '#' + dragged_node_id ) );
}
} );

// What to do when drag ends (whether by drop or by failing the drag)
$( 'body' ).on( 'dragend', function ( event ) {
$( '#' + statement_p + ' :nth-child(2) .wikibase-statementview' ).each( function () {
$( this ).css( 'marginTop', '' );
$( this ).css( 'marginBottom', '' );
} );

$( '#' + dragged_node_id ).css( 'display', '' );
dragover_counter = 0;
} );
}

// Move value one position up
function move_value_up( value_id ) {
var previous_id = $( '#' + value_id ).prev().attr( 'id' );
if ( !previous_id ) {
return;
}
$( '#' + previous_id ).before( $( '#' + value_id ) );
}

// Move value one position down
function move_value_down( value_id ) {
var previous_id = $( '#' + value_id ).next().attr( 'id' );
if ( !previous_id ) {
return;
}
$( '#' + previous_id ).after( $( '#' + value_id ) );
}

// Run after saving or cancelling
function statement_exited( statement_p ) {
// Remove save/cancel buttons, re-add the rearrange button
$( '#button' + statement_p ).empty().append( ra_img( statement_p ) );

// Remove up/down buttons
$( '#' + statement_p + ' .move_arrows_block' ).remove();

// Make values no longer draggable
$( '#' + statement_p + ' :nth-child(2) .wikibase-statementview' ).each( function () {
$( this ).attr( 'draggable', 'false' ).removeClass( 'draggable' );
} );
}

// Run when the cancel button is pressed
function cancel( statement_p ) {
// If any value was deleted, it should be removed from the original order
for ( var i = 0; i < statement_original_orders[ statement_p ].length; i++ ) {
if ( $( '#' + statement_original_orders[ statement_p ][ i ] ).length === 0 ) {
statement_original_orders[ statement_p ].splice( i, 1 );
}
}
// Put values in the order they were before clicking rearrange-buttons
for ( var j = 0; j < statement_original_orders[ statement_p ].length - 1; j++ ) {
$( '#' + $( '#' + statement_p ).children().eq( 1 ).find( '.wikibase-statementview' ).eq( j ).attr( 'id' ) )
.before( $( '#' + statement_original_orders[ statement_p ][ j ] ) );
}
// Replace "save" and "cancel" buttons with rearrange-button, remove arrow buttons
statement_exited( statement_p );
}

// Run when the save button is pressed
function save( statement_p ) {
// Get JSON for values (claims)
var claims;
var api = new mw.Api();
api.post( {
action: 'wbgetentities',
ids: mw.config.get( 'wgTitle' ),
} ).done( function ( data ) {
claims = data.entities[ mw.config.get( 'wgTitle' ) ].claims[ statement_p ];
var i;

// Check if the order changed at all
// For this, first get a list of values as they are now
var actual_claims = [];
var id;
$( '#' + statement_p + ' :nth-child(2) .wikibase-statementview' ).each( function () {
id = this.id;
// If it is a value which was just added
if ( id === 'new' ) {
id = $( this ).attr( 'class' );
try {
id = id.match( /wikibase-statement-([QPq].+)$/ )[ 1 ].replace( '$', '' );
} catch ( e ) {
// No match
return;
}
}
actual_claims.push( id );
} );
// Then compare this list with the list of values in original order
var same = true;
for ( i = 0; i < claims.length; i++ ) {
if ( claims[ i ].id.replace( '$', '' ) !== actual_claims[ i ] ) {
same = false;
break;
}
}
// If the order did not change, no need to make an edit
if ( same ) {
mw.notify( $.i18n( 'gadget-rearrangevalues-notify-no-changes' ), { type: 'info' } );
statement_exited( statement_p );
return;
}

// Remove values in the old order
var remove_claims = [];
for ( i = 0; i < claims.length; i++ ) {
remove_claims.push( '{"id":"' + claims[ i ].id + '","remove":""}' );
}
remove_claims = remove_claims.join( ',' );

// Put values in the new order
var indexed_claims = {};
for ( i = 0; i < claims.length; i++ ) {
indexed_claims[ ( claims[ i ].id ).replace( '$', '' ) ] = claims[ i ];
}
var add_claims = [];
for ( i = 0; i < actual_claims.length; i++ ) {
add_claims.push( JSON.stringify( indexed_claims[ actual_claims[ i ] ] ) );
}
add_claims = add_claims.join( ',' );

// Save the edit
api.postWithEditToken( {
action: 'wbeditentity',
assertuser: mw.config.get( 'wgUserName' ),
id: mw.config.get( 'wgTitle' ),
summary: 'Changing order of values for [[Property:' +
statement_p + '|' + statement_p + ']]',
tags: 'gadget-rearrangevalues',
data: '{"claims":[' + remove_claims + ',' + add_claims + ']}'
} ).done( function (data) {
if ( data.success === 1 ) {
mw.notify( $.i18n( 'gadget-rearrangevalues-notify-success', statement_p ), { type: 'success' } );
statement_exited( statement_p );
} else {
mw.notify( $.i18n( 'gadget-rearrangevalues-notify-failed' ), { type: 'error' } );
}
} ).fail( function () {
mw.notify( $.i18n( 'gadget-rearrangevalues-notify-failed' ), { type: 'error' } );
} );
} );
}
}( jQuery, mediaWiki ) );

MediaWiki:Common.js - Revision history