Insurer Brain

MediaWiki:Gadget-copyTable.js: Difference between revisions

Browse history interactively
Content deleted Content added
Created page with "→* * Gadget: CopyTable * Adds a "Copy" button above every wikitable. * Copies content as TSV (tab-separated values) for pasting into Excel / Sheets.: mw.hook( 'wikipage.content' ).add( function ( $content ) { $content.find( 'table.wikitable' ).not( '.copy-table-added' ).each( function () { var $table = $( this ).addClass( 'copy-table-added' ); var $btn = $( '<button>' ) .addClass( 'copy-table-btn' ) .text( '\uD83D\uDCCB..."
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1:
/**
* Gadget: CopyTable
* AddsDiscreet acopy "Copy"icon buttonat abovethe bottom-right of every wikitable.
* Copies content as TSV (tab-separated values) for pasting into Excel / Sheets.
*/
function tableToTSV( tablefunction () {▼
'use strict';
 
// Standard two-rectangle "copy" icon
var COPY_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" '
+ 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" '
+ 'stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>'
+ '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'
}+ )'</svg>';▼
 
// Checkmark shown after copy
var CHECK_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" '
+ 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" '
+ 'stroke-linecap="round" stroke-linejoin="round">'
+ '<polyline points="20 6 9 17 4 12"/>'
var+ cells = []'</svg>';▼
 
function tableToTSV( table ) {
var lines = [];▼
$( table ).find( 'tr' ).each( function () {▼
var cells = [];
$( this ).find( 'th, td' ).each( function () {▼
cells.push( $( this ).text().trim().replace( /[\t\n\r]+/g, ' ' ) );▼
} );▼
lines.push( cells.join( '\t' ) );▼
} );
return lines.join( '\n' );▼
}
 
mw.hook( 'wikipage.content' ).add( function ( $content ) {
$content.find( 'table.wikitable' ).not( '.copy-table-added' ).each( function () {
Line 10 ⟶ 40:
var $btn = $( '<button>' )
.addClass( 'copy-table-btn' )
.textattr( '\uD83D\uDCCBtitle', 'Copy table' ) // 📋 emoji
.attrhtml( 'title', 'Copy as tab-separated values'COPY_ICON )
.on( 'click', function () {
var tsv = tableToTSV( $table[ 0 ] );
navigator.clipboard.writeText( tsv ).then( function () {
$btn.texthtml( '\u2713CHECK_ICON ).addClass( Copied!'copy-table-btn--ok' ); // ✓
setTimeout( function () {
$btn.texthtml( '\uD83D\uDCCBCOPY_ICON Copy).removeClass( 'copy-table-btn--ok' );
}, 2000 );
} );
} );
 
// If the table sits in a horizontal-scroll box (the house style wraps it
$table.before( $btn );▼
// in <div style="overflow-x:auto">), wrap THAT box so the button lives
▲ } );
// OUTSIDE the scrolling area and stays pinned. Otherwise wrap the table.
} );▼
▲ var $parent = $table.beforeparent( $btn );
var $target = /auto|scroll/.test( $parent.css( 'overflow-x' ) ) ? $parent : $table;
 
$target.wrap( '<div class="copy-table-wrapper">' );
▲function tableToTSV( table ) {
$target.parent().append( $btn ); // button is now a sibling of the scroller
▲ var lines = [];
▲ $( table ).find( 'tr' ).each( function () {
▲ var cells = [];
▲ $( this ).find( 'th, td' ).each( function () {
▲ cells.push( $( this ).text().trim().replace( /[\t\n\r]+/g, ' ' ) );
▲ } );
▲ lines.push( cells.join( '\t' ) );
} );
▲} );
▲ return lines.join( '\n' );
}() );
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Gadget-copyTable.js"