Page MenuHomeWickedGov Phorge
Files F4103828

tables.js
No OneTemporary
Actions

Size
9 KB
Referenced Files
None
Subscribers
None

tables.js
View Options

const InvestigateMenuSelectWidget = require( './InvestigateMenuSelectWidget.js' );
/**
* Add highlight pinning capability and tool links to tables.
*/
module.exports = function setupTables() {
// Attributes used for pinnable highlighting
const highlightData = mw.storage.session.get( 'checkuser-investigate-highlight' ),
toggleButtons = {};
// The message 'checkuser-toollinks' was parsed in PHP, since translations
// may contain wikitext that is too complex for the JS parser:
// https://www.mediawiki.org/wiki/Manual:Messages_API#Feature_support_in_JavaScript
mw.messages.set( require( './message.json' ) );
function logEvent( data ) {
mw.track( 'event.SpecialInvestigate', data );
}
function getDataKey( $element ) {
return JSON.stringify( [
$element.data( 'field' ),
$element.data( 'value' )
] );
}
function updateMatchingElements( $target, value, classSuffix ) {
const dataField = $target.data( 'field' ),
dataValue = $target.data( 'value' ),
cellClass = 'ext-checkuser-investigate-table-cell-' + classSuffix,
rowClass = 'ext-checkuser-investigate-table-row-' + classSuffix;
const $matches = $( 'td[data-field="' + dataField + '"][data-value="' + dataValue + '"]' );
// The following messages can be passed here:
// * ext-checkuser-investigate-table-cell-hover-data-match
// * ext-checkuser-investigate-table-cell-pinned-data-match
$matches.toggleClass( cellClass, value );
// Rows should be highlighted iff they contain highlighted cells
$matches.closest( 'tr' ).each( function () {
// The following messages can be passed here:
// * ext-checkuser-investigate-table-row-hover-data-match
// * ext-checkuser-investigate-table-row-pinned-data-match
$( this ).toggleClass(
rowClass,
value
);
} );
}
function onPinnableCellHover( event ) {
// Toggle on for mouseover, off for mouseout
updateMatchingElements( $( this ), event.type === 'mouseover', 'hover-data-match' );
}
function onToggleButtonChange( $tableCell, value ) {
$( '.ext-checkuser-investigate-table' ).toggleClass( 'ext-checkuser-investigate-table-pinned', value );
$tableCell.toggleClass( 'ext-checkuser-investigate-table-cell-pinned', value );
toggleButtons[ getDataKey( $tableCell ) ].forEach( ( button ) => {
button.setValue( value );
button.setFlags( { progressive: value } );
} );
updateMatchingElements( $tableCell, value, 'pinned-data-match' );
if ( value ) {
mw.storage.session.set( 'checkuser-investigate-highlight', getDataKey( $tableCell ) );
} else {
mw.storage.session.remove( 'checkuser-investigate-highlight' );
}
}
function filterValue( $tableCell ) {
$( 'textarea[name=exclude-targets]' ).val( function () {
return this.value + '\n' + $tableCell.data( 'value' );
} );
$( '.mw-htmlform' ).trigger( 'submit' );
}
function addTargets( $tableCell ) {
let target = $tableCell.data( 'value' );
if ( mw.util.isIPv6Address( target ) ) {
target += '/64';
}
$( 'input[name=targets]' ).val( target );
$( '.mw-htmlform' ).trigger( 'submit' );
}
function appendButtons( $tableCell, buttonTypes ) {
// eslint-disable-next-line no-jquery/no-class-state
const isTarget = $tableCell.hasClass( 'ext-checkuser-compare-table-cell-target' ),
$optionsContainer = $( '<div>' ).addClass( 'ext-checkuser-investigate-table-options-container' ),
key = getDataKey( $tableCell ),
options = [];
let selectWidget,
contribsOptionWidget,
checksOptionWidget,
toggleButton,
message,
$links;
/**
* Hack for setting an icon as the indicator. Call setIndicator with
* a dummy indicator type, to do everything that is needed to set an
* indicator, then swap in the class for the newWindow icon.
*
* @param {OO.ui.MenuOptionWidget} optionWidget
*/
function setNewWindowIndicator( optionWidget ) {
optionWidget.setIndicator( 'placeholder' );
optionWidget.$indicator.removeClass( 'oo-ui-indicator-placeholder' );
optionWidget.$indicator.addClass( 'oo-ui-icon-newWindow' );
}
$tableCell.prepend( $optionsContainer );
if ( buttonTypes.filter ) {
options.push( new OO.ui.MenuOptionWidget( {
icon: 'funnel',
classes: [
'ext-checkuser-investigate-button-filter-ip'
],
label: mw.msg( 'checkuser-investigate-compare-table-button-filter-label' ),
data: { type: 'filter' }
} ) );
}
if ( buttonTypes.addUsers ) {
options.push( new OO.ui.MenuOptionWidget( {
disabled: isTarget,
icon: 'add',
classes: [
'ext-checkuser-investigate-button-add-user-targets'
],
label: $tableCell.data( 'actions' ) === $tableCell.data( 'all-actions' ) ?
mw.msg( 'checkuser-investigate-compare-table-button-add-user-targets-log-label' ) :
mw.msg( 'checkuser-investigate-compare-table-button-add-user-targets-label' ),
data: { type: 'addUsers' }
} ) );
}
if ( buttonTypes.addIps ) {
options.push( new OO.ui.MenuOptionWidget( {
disabled: isTarget,
icon: 'add',
label: mw.msg( 'checkuser-investigate-compare-table-button-add-ip-targets-label' ),
data: { type: 'addIps' }
} ) );
}
if ( buttonTypes.contribs ) {
contribsOptionWidget = new OO.ui.MenuOptionWidget( {
icon: 'userContributions',
label: mw.msg( 'checkuser-investigate-compare-table-button-contribs-label' ),
data: {
type: 'toolLinks',
href: new mw.Title( 'Special:Contributions' ).getUrl( {
target: $tableCell.data( 'value' )
} ),
tool: 'Special:Contributions'
}
} );
setNewWindowIndicator( contribsOptionWidget );
options.push( contribsOptionWidget );
}
if ( buttonTypes.checks ) {
checksOptionWidget = new OO.ui.MenuOptionWidget( {
icon: 'check',
label: mw.msg( 'checkuser-investigate-compare-table-button-checks-label' ),
data: {
type: 'toolLinks',
href: new mw.Title( 'Special:CheckUserLog' ).getUrl( {
cuSearch: $tableCell.data( 'value' )
} ),
tool: 'Special:InvestigateLog'
}
} );
setNewWindowIndicator( checksOptionWidget );
options.push( checksOptionWidget );
}
if ( buttonTypes.toolLinks ) {
message = mw.msg( 'checkuser-investigate-compare-toollinks', $tableCell.data( 'value' ) );
$links = $( '<div>' ).html( message ).find( 'a' );
$links.each( ( i, $link ) => {
const label = $link.text,
href = $link.getAttribute( 'href' );
const optionWidget = new OO.ui.MenuOptionWidget( {
icon: 'globe',
label: label,
data: {
type: 'toolLinks',
href: href,
tool: new URL( href, location.href ).host
}
} );
setNewWindowIndicator( optionWidget );
options.push( optionWidget );
} );
}
if ( options.length > 0 ) {
selectWidget = new OO.ui.ButtonMenuSelectWidget( {
icon: 'ellipsis',
framed: false,
classes: [ 'ext-checkuser-investigate-table-select' ],
menu: {
horizontalPosition: 'end',
items: options
},
menuClass: InvestigateMenuSelectWidget
} );
selectWidget.getMenu().on( 'investigate', ( item ) => {
const data = item.getData();
switch ( data.type ) {
case 'filter':
filterValue( $tableCell );
break;
case 'addIps':
addTargets( $tableCell );
break;
case 'addUsers':
addTargets( $tableCell );
break;
case 'toolLinks':
logEvent( {
action: 'tool',
tool: data.tool
} );
window.open( data.href, '_blank' );
break;
}
} );
$optionsContainer.append( selectWidget.$element );
}
if ( buttonTypes.toggle ) {
toggleButton = new OO.ui.ToggleButtonWidget( {
icon: 'pushPin',
framed: false,
classes: [ 'ext-checkuser-investigate-table-button-pin' ]
} );
toggleButtons[ key ] = toggleButtons[ key ] || [];
toggleButtons[ key ].push( toggleButton );
toggleButton.on( 'change', onToggleButtonChange.bind( null, $tableCell ) );
// Log the click not the change, since clicking on one button
// can lead to several other buttons changing
toggleButton.on( 'click', () => {
if ( toggleButton.getValue() ) {
logEvent( { action: 'pin' } );
}
} );
$optionsContainer.append( toggleButton.$element );
}
}
$( 'td.ext-checkuser-investigate-table-cell-pinnable' ).on( 'mouseover mouseout focusin focusout', onPinnableCellHover );
$( '.ext-checkuser-investigate-table-preliminary-check td.ext-checkuser-investigate-table-cell-pinnable' )
.each( function () {
appendButtons( $( this ), {
toggle: true
} );
} );
$( '.ext-checkuser-investigate-table-compare .ext-checkuser-compare-table-cell-user-agent' )
.each( function () {
appendButtons( $( this ), {
toggle: true
} );
} );
$( '.ext-checkuser-investigate-table-compare .ext-checkuser-compare-table-cell-ip-target' )
.each( function () {
appendButtons( $( this ), {
toggle: true,
filter: true,
addUsers: true,
contribs: true,
checks: true,
toolLinks: true
} );
} );
$( 'td.ext-checkuser-compare-table-cell-user-target' )
.each( function () {
appendButtons( $( this ), {
filter: true,
addIps: true,
contribs: true,
checks: true
} );
} );
// Persist highlights across paginated tabs
if (
highlightData !== null &&
toggleButtons[ highlightData ] &&
toggleButtons[ highlightData ].length > 0
) {
toggleButtons[ highlightData ][ 0 ].setValue( true );
}
};

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 18:11 (3 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
52/12/35658a6173578d0c9c16dcd390f1
Default Alt Text
tables.js (9 KB)

Event Timeline