Gebruiker:Sumurai8/columnManager.js
Uiterlijk
Opmerking: na het publiceren is het wellicht nodig uw browsercache te legen om de veranderingen te zien.
- Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
- Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
- Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.
/**
* '''Description'''
* This script is used to find consecutive lists, sort them in a variety of ways and put
* them in various column templates. Can also be used to balance existing column templates.
*
* '''Author'''
* [[user talk:Sumurai8|Sumurai8]] on nl.wikipedia.org
*
* '''License'''
* Code is available under cc-by-sa. In other words: ALWAYS PROVIDE A LINK
**/
var ColumnManager = function() {
//Private constants
var replaceToken = "a0e8bb19af1ef0ca";
var templateRegex = new RegExp( "\{\{[\s]*(?:Sjabloon:)?([^|]+)([^\{\}]*)\}\}" );
var listRegex = new RegExp( "(?:([\*#])[^\n]+\n)(\1[^\n]+\n)*" );
var columnParseRegex = new RegExp( "^(?:\|[\s]*Kolom1[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom2[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom3[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom4[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom5[\s]*=[\s]*([\s\S]*?)[\s]*)?$" );
var maxTemplates = 1000;
var maxLists = 100;
var columnTemplates = ["Kolommen","Kolommen2","Kolommen3","Kolommen4","Kolommen5"];
var columnParamPrefix = "Kolom";
var buttons = {
"Sorteer alfabetisch" : this.clickSortAlfabetic,
"Sorteer op zichtbaar" : this.clickSortVisible,
"Sorteer tweede zichtbaar" : this.clickSortSecondVisible,
"Balanceer" : this.clickBalance,
"Maak 1 kolom" : this.clickMakeColumn,
"Maak 2 kolommen" : this.clickMakeTwoColumns,
"Maak 3 kolommen" : this.clickMakeThreeColumns,
"Maak 4 kolommen" : this.clickMakeFourColumns,
"Maak 5 kolommen" : this.clickMakeFiveColumns
};
//Private variables
var templates = [];
var columnPos = [];
var lists = [];
var content = "";
var overlayBackground;
var overlayTop;
this.init = function () {
this.reset();
overlayBackground = $( "<div></div>" ).css( {
"position" : "fixed",
"width" : "100%",
"height" : "100%",
"background-color" : "black",
"opacity" : "0.5"
} ).attr( "id", "columnManagerBackground" ).hide();
overlayTop = $( "<div></div>" ).css( {
"position" : "fixed",
"width" : "80%",
"height" : "80%",
"left" : "10%",
"top" : "10%",
"border" : "black 1px solid",
"background-color" : "white",
"padding" : "1em"
} ).attr( "id", "columnManagerTop" ).hide();
$("body").append( overlayBackground ).append( overlayTop );
}
this.parseText = function () {
var matches, i;
for( i = 0; i < maxTemplates; i++ ) {
if( matches = content.match( templateRegex ) ) {
templates.push( matches );
content.replace( templateRegex, replacetoken + "_t" + i + "_" );
if( columnTemplates.indexOf( matches[1] ) > -1 ) {
columnPos.push( i );
}
} else {
//Out of templates to replace
break;
}
}
if( i == maxTemplates ) {
console.error( "ColumnManager :: This page contains too many templates" );
return false;
}
for( i = 0; i < maxLists; i++ ) {
if( matches = content.match( listRegex ) ) {
lists.push( matches );
content.replace( listRegex, replacetoken + "_l" + i + "_" );
} else {
//Out of lists to replace
break;
}
}
if( i == maxLists ) {
console.error( "ColumnManager :: This page contains too many lists" );
return false;
}
return true;
}
this.reset = function () {
templates = [];
columnPos = [];
lists = [];
content = "";
!overlayBackground || overlayBackground.remove();
!overlayTop || overlayTop.remove();
}
/**
* Parses a match of templateRegex into a list of some amount of columns
* The template variable is in the form [entire match, template name, variables]
**/
this.parseColumnTemplate = function( template ) {
var output = template[2].match( columnParseRegex ).slice( 1 ).map( function( oldval ) {
for( var i = 0; i < templates.length; i++ ) {
oldval = oldval.replace( replacetoken + "_t" + i + "_", templates[i] );
}
} );
}
this.renderOptions = function ( columns, id ) {
var width = 100 / columns.length;
var container = $( "<div></div>" ).data( "link", id ).attr( "class", "columnManagerGroup" );
for( var i = 0; i < columns.length; i++ ) {
var textbox = $( "<textarea></textarea>" ).css( {
"width" : width + "%",
"height": "200px",
"float" : "left"
} ).val( columns[i] );
container.append( textbox );
}
container.append( this.renderButtons() );
overlayTop.append( container );
}
this.renderButtons = function () {
var container = $( "<span></span>" );
for( button in buttons ) {
var input = $( "<input>" ).attr( {
"type" : "button",
"value" : button
} ).on( "click", buttons[button] );
container.append( input );
}
return container;
}
this.saveChanges = function () {
for( var i = 0; i < templates.length; i++ ) {
if( columnPos.indexOf( i ) == -1 ) {
content = content.replace( replacetoken + "_t" + i + "_", templates[i] );
} else {
var group = $( ".columnManagerGroup[data-link=\"t" + i + "\"]" );
var columns = group.children( "textarea" );
var replaceText = "";
if( columns.length == 1 ) {
//We turned it into a list
replaceText = columns[0].val();
} else {
//2 or more columns
replaceText = "{{" + columnTemplates[0] + "\n" +
columns.reduce( function( prev, elem, j ) {
return prev + "|" + columnParamPrefix + (j + 1) + "=" + $(elem).val();
}, "" ) +
"\n}}";
}
content.replace( replacetoken + "_t" + i + "_", replaceText );
}
}
}
this.cancelChanges = function () {
this.reset();
}
this.importText = function () {
content = $( "#wpTextbox1" ).val();
if( content.match( new RegExp( replaceToken ) ) !== null ) {
//Possible security vulnerability
content = "";
}
}
this.showInterface = function () {
this.importText();
if( !this.parseText() ) {
return;
}
for( var i = 0; i < columnPos.length; i++ ) {
this.renderOptions( this.parseColumnTemplate( templates[columnPos[i]] ), "t" + columnPos[i] );
}
for( var i = 0; i < lists; i++ ) {
this.renderOptions( lists[i], "l" + i );
}
var saveButton = $( "<input>" ).attr( {
"type" : "button",
"value" : "Opslaan"
} ).on( "click", this.saveChanges );
overlayTop.append( saveButton );
var cancelButton = $( "<a></a>" ).attr( {
"href" : "#"
} ).text( "Annuleer" ).on( "click", this.cancelChanges );
overlayBackground.show();
overlayTop.show();
}
this.clickSortAlfabetic = function ( e ) {
}
this.clickSortVisible = function ( e ) {
}
this.clickSortSecondVisible = function ( e ) {
}
this.clickBalance = function ( e ) {
}
this.clickMakeColumn = function ( e ) {
}
this.clickMakeTwoColumns = function ( e ) {
}
this.clickMakeThreeColumns = function ( e ) {
}
this.clickMakeFourColumns = function ( e ) {
}
this.clickMakeFiveColumns = function ( e ) {
}
}