More actions
Content deleted Content added
Created page with "mw.loader.load( ['ext.gadget.polyfill-set', 'oojs-ui-core', 'oojs-ui-widgets'] ).done( function() { function QueryOptions() { this.queryParams = {}; this.fieldset = new OO.ui.FieldsetLayout( { label: 'Query options', items: [] } ); } QueryOptions.prototype.addMultioption = function(param, options, fieldOptions) { this.queryParams[param] = new PrimitiveSet(); var toggleButtons = Object.keys( options ).map( function( optionName ) { var b..." |
added more button input options |
||
(52 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
( function ( $, mw, psw ) { |
|||
mw.loader.load( ['ext.gadget.polyfill-set', 'oojs-ui-core', 'oojs-ui-widgets'] ).done( function() { |
|||
'use strict'; |
|||
function QueryOptions() { |
|||
/* |
|||
* QueryOptions |
|||
*/ |
|||
function QueryOptions () { |
|||
this.queryParams = {}; |
this.queryParams = {}; |
||
this.getters = {}; |
|||
this.fieldset = new OO.ui.FieldsetLayout( { |
this.fieldset = new OO.ui.FieldsetLayout( { |
||
Line 9: | Line 15: | ||
} |
} |
||
QueryOptions.prototype. |
QueryOptions.prototype.addButtonMultiInput = function ( param, fieldOptions, widgetOptions ) { |
||
var toggleButtons = widgetOptions.items.map( function ( item ) { |
|||
this.queryParams[param] = new PrimitiveSet(); |
|||
var btn = new OO.ui.ButtonOptionWidget( { |
|||
data: item.data || item.label, |
|||
var toggleButtons = Object.keys( options ).map( function( optionName ) { |
|||
label: item.label |
|||
var btn = new OO.ui.ToggleButtonWidget( { |
|||
label: optionName, |
|||
value: options[optionName] |
|||
} ); |
|||
btn.on( 'change', function( selected ) { |
|||
if ( selected ) { |
|||
this.queryParams.add(param); |
|||
} else { |
|||
this.queryParams.delete(param); |
|||
} |
|||
} ); |
} ); |
||
return btn; |
return btn; |
||
} ); |
} ); |
||
var widget = new OO.ui.ButtonSelectWidget( { |
|||
items: toggleButtons, |
|||
align: widgetOptions.align || 'left', |
|||
multiselect: widgetOptions.multiselect || false |
|||
} ); |
|||
if ( Array.isArray( widgetOptions.selected ) ) { |
|||
widgetOptions.selected.forEach( function ( label ) { |
|||
widget.selectItemByLabel( label ); |
|||
} ); |
|||
} else if ( typeof widgetOptions.selected === 'string' ) { |
|||
widget.selectItemByLabel( widgetOptions.selected ); |
|||
} |
|||
this.fieldset.addItems( [ |
this.fieldset.addItems( [ |
||
new OO.ui.FieldLayout( |
new OO.ui.FieldLayout( widget, { |
||
label: fieldOptions.label, |
label: fieldOptions.label, |
||
align: fieldOptions.align |
align: fieldOptions.align || 'top' |
||
} ) |
} ) |
||
] ); |
] ); |
||
this.getters[ param ] = function () { |
|||
var selected = widget.findSelectedItems(); |
|||
if ( Array.isArray( selected ) ) { |
|||
return selected |
|||
.map( function ( item ) { |
|||
return item.getData(); |
|||
} ) |
|||
.join(widgetOptions.delimiter || ','); |
|||
} else if ( selected !== null ) { |
|||
return selected.getData(); |
|||
} |
|||
return ''; |
|||
}; |
|||
}; |
}; |
||
QueryOptions.prototype. |
QueryOptions.prototype.addCheckboxInput = function ( param, fieldOptions, widgetOptions ) { |
||
var widget = new OO.ui.CheckboxInputWidget( { |
|||
return this.fieldset; |
|||
selected: widgetOptions.selected || false |
|||
} ); |
|||
this.fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( widget, { |
|||
label: fieldOptions.label, |
|||
align: fieldOptions.align || 'inline' |
|||
} ) |
|||
] ); |
|||
this.getters[ param ] = function () { |
|||
var selected = widget.isSelected(); |
|||
if ( selected ) { |
|||
return widgetOptions.dataTrue; |
|||
} |
|||
return widgetOptions.dataFalse; |
|||
}; |
|||
}; |
}; |
||
QueryOptions.prototype. |
QueryOptions.prototype.addCheckboxMultiInput = function ( param, fieldOptions, widgetOptions ) { |
||
}; |
}; |
||
QueryOptions.prototype.addDateInput = function ( param, fieldOptions, widgetOptions ) { |
|||
var widget = new mw.widgets.DateInputWidget( { |
|||
type: 'date' |
|||
} ); |
|||
this.fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( widget, { |
|||
label: fieldOptions.label, |
|||
align: fieldOptions.align || 'top' |
|||
} ) |
|||
] ); |
|||
this.getters[ param ] = function () { |
|||
return widget.getValue(); |
|||
}; |
|||
}; |
|||
QueryOptions.prototype.addNumberInput = function ( param, fieldOptions, widgetOptions ) { |
|||
var widget = new OO.ui.NumberInputWidget( { |
|||
min: widgetOptions.min, |
|||
max: widgetOptions.max, |
|||
buttonStep: widgetOptions.buttonStep, |
|||
pageStep: widgetOptions.pageStep, |
|||
showButtons: widgetOptions.showButtons |
|||
} ); |
|||
this.fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( widget, { |
|||
label: fieldOptions.label, |
|||
align: fieldOptions.align || 'top' |
|||
} ) |
|||
] ); |
|||
this.getters[ param ] = function () { |
|||
return widget.getValue(); |
|||
}; |
|||
}; |
|||
QueryOptions.prototype.getOptions = function () { |
|||
var opts = {}; |
|||
for ( var key in this.getters ) { |
|||
opts[ key ] = this.getters[ key ](); |
|||
} |
|||
return opts; |
|||
}; |
|||
/* |
|||
function DisplayOptions() { |
|||
* DisplayOptions |
|||
*/ |
|||
function DisplayOptions () { |
|||
this.displayOptions = {}; |
this.displayOptions = {}; |
||
this.getters = {}; |
|||
this.fieldset = new OO.ui.FieldsetLayout( { |
|||
label: 'Display options', |
|||
items: [] |
|||
} ); |
|||
} |
} |
||
DisplayOptions.prototype. |
DisplayOptions.prototype.addColumnSelector = function ( columns, fieldOptions ) { |
||
var items = columns.map( function (column) { |
|||
return new OO.ui.CheckboxMultioptionWidget( { |
|||
data: column.name, |
|||
selected: column.selected, |
|||
label: column.label |
|||
} ); |
|||
} ); |
|||
var widget = new OO.ui.CheckboxMultiselectWidget( { |
|||
items: items |
|||
} ); |
|||
this.fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( widget, { |
|||
label: 'Visible columns', |
|||
align: fieldOptions.align || 'top' |
|||
} ) |
|||
] ); |
|||
this.getters[ 'columns' ] = function () { |
|||
return widget.findSelectedItemsData(); |
|||
}; |
|||
}; |
}; |
||
DisplayOptions.prototype.getOptions = function () { |
|||
Object.preventExtensions(QueryOptions); |
|||
var opts = {}; |
|||
} ); |
|||
for ( var key in this.getters ) { |
|||
opts[ key ] = this.getters[ key ](); |
|||
} |
|||
return opts; |
|||
}; |
|||
function SearchWidget ( optionConfig, searchConfig ) { |
|||
this.api = new mw.Api(); |
|||
this.fieldset = new OO.ui.FieldsetLayout(); |
|||
this.submitButton = new OO.ui.ButtonInputWidget( { |
|||
label: 'Search', |
|||
flags: [ 'primary', 'progressive' ], |
|||
align: 'left', |
|||
icon: 'search' |
|||
} ); |
|||
this.submitButton.on( 'click', this.search.bind( this ) ); |
|||
if ( optionConfig.queryOptions ) { |
|||
this.queryOptions = optionConfig.queryOptions; |
|||
this.fieldset.addItems( [ |
|||
optionConfig.queryOptions.fieldset |
|||
] ); |
|||
} |
|||
if ( optionConfig.displayOptions ) { |
|||
this.displayOptions = optionConfig.displayOptions; |
|||
this.fieldset.addItems( [ |
|||
optionConfig.displayOptions.fieldset |
|||
] ); |
|||
} |
|||
this.fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( this.submitButton ) |
|||
] ); |
|||
this.tableSelector = searchConfig.selector; |
|||
this.template = searchConfig.template; |
|||
} |
|||
SearchWidget.prototype.search = function () { |
|||
const params = []; |
|||
if ( this.queryOptions ) { |
|||
const options = this.queryOptions.getOptions(); |
|||
for ( var key in options ) { |
|||
params.push( '|' + key + ' = ' + options[ key ] ); |
|||
} |
|||
} |
|||
if ( this.displayOptions ) { |
|||
const options = this.displayOptions.getOptions(); |
|||
for ( var key in options ) { |
|||
params.push( '|' + key + ' = ' + options[ key ] ); |
|||
} |
|||
} |
|||
var text = '{' + '{' + |
|||
this.template + '\n' + |
|||
params.join('\n') + |
|||
'\n}}'; |
|||
console.log( text ); |
|||
var selector = this.tableSelector; |
|||
$( selector ).html( 'Searching...' ); |
|||
this.api.get( { |
|||
action: 'parse', |
|||
title: mw.config.get( 'wgPageName' ), |
|||
prop: 'text', |
|||
text: text, |
|||
maxage: 3600, |
|||
smaxage: 3600 |
|||
} ).done( function( results ) { |
|||
$( selector ).empty() |
|||
.append( $( results.parse.text[ '*' ] ) ); |
|||
$( selector + ' table' ).tablesorter(); |
|||
} ); |
|||
}; |
|||
Object.preventExtensions( QueryOptions ); |
|||
Object.preventExtensions( DisplayOptions ); |
|||
Object.preventExtensions( SearchWidget ); |
|||
psw.db = { |
|||
QueryOptions: QueryOptions, |
|||
DisplayOptions: DisplayOptions, |
|||
SearchWidget: SearchWidget |
|||
}; |
|||
} )( jQuery, mediaWiki, pswiki ); |
Latest revision as of 03:54, 14 April 2023
( function ( $, mw, psw ) {
'use strict';
/*
* QueryOptions
*/
function QueryOptions () {
this.queryParams = {};
this.getters = {};
this.fieldset = new OO.ui.FieldsetLayout( {
label: 'Query options',
items: []
} );
}
QueryOptions.prototype.addButtonMultiInput = function ( param, fieldOptions, widgetOptions ) {
var toggleButtons = widgetOptions.items.map( function ( item ) {
var btn = new OO.ui.ButtonOptionWidget( {
data: item.data || item.label,
label: item.label
} );
return btn;
} );
var widget = new OO.ui.ButtonSelectWidget( {
items: toggleButtons,
align: widgetOptions.align || 'left',
multiselect: widgetOptions.multiselect || false
} );
if ( Array.isArray( widgetOptions.selected ) ) {
widgetOptions.selected.forEach( function ( label ) {
widget.selectItemByLabel( label );
} );
} else if ( typeof widgetOptions.selected === 'string' ) {
widget.selectItemByLabel( widgetOptions.selected );
}
this.fieldset.addItems( [
new OO.ui.FieldLayout( widget, {
label: fieldOptions.label,
align: fieldOptions.align || 'top'
} )
] );
this.getters[ param ] = function () {
var selected = widget.findSelectedItems();
if ( Array.isArray( selected ) ) {
return selected
.map( function ( item ) {
return item.getData();
} )
.join(widgetOptions.delimiter || ',');
} else if ( selected !== null ) {
return selected.getData();
}
return '';
};
};
QueryOptions.prototype.addCheckboxInput = function ( param, fieldOptions, widgetOptions ) {
var widget = new OO.ui.CheckboxInputWidget( {
selected: widgetOptions.selected || false
} );
this.fieldset.addItems( [
new OO.ui.FieldLayout( widget, {
label: fieldOptions.label,
align: fieldOptions.align || 'inline'
} )
] );
this.getters[ param ] = function () {
var selected = widget.isSelected();
if ( selected ) {
return widgetOptions.dataTrue;
}
return widgetOptions.dataFalse;
};
};
QueryOptions.prototype.addCheckboxMultiInput = function ( param, fieldOptions, widgetOptions ) {
};
QueryOptions.prototype.addDateInput = function ( param, fieldOptions, widgetOptions ) {
var widget = new mw.widgets.DateInputWidget( {
type: 'date'
} );
this.fieldset.addItems( [
new OO.ui.FieldLayout( widget, {
label: fieldOptions.label,
align: fieldOptions.align || 'top'
} )
] );
this.getters[ param ] = function () {
return widget.getValue();
};
};
QueryOptions.prototype.addNumberInput = function ( param, fieldOptions, widgetOptions ) {
var widget = new OO.ui.NumberInputWidget( {
min: widgetOptions.min,
max: widgetOptions.max,
buttonStep: widgetOptions.buttonStep,
pageStep: widgetOptions.pageStep,
showButtons: widgetOptions.showButtons
} );
this.fieldset.addItems( [
new OO.ui.FieldLayout( widget, {
label: fieldOptions.label,
align: fieldOptions.align || 'top'
} )
] );
this.getters[ param ] = function () {
return widget.getValue();
};
};
QueryOptions.prototype.getOptions = function () {
var opts = {};
for ( var key in this.getters ) {
opts[ key ] = this.getters[ key ]();
}
return opts;
};
/*
* DisplayOptions
*/
function DisplayOptions () {
this.displayOptions = {};
this.getters = {};
this.fieldset = new OO.ui.FieldsetLayout( {
label: 'Display options',
items: []
} );
}
DisplayOptions.prototype.addColumnSelector = function ( columns, fieldOptions ) {
var items = columns.map( function (column) {
return new OO.ui.CheckboxMultioptionWidget( {
data: column.name,
selected: column.selected,
label: column.label
} );
} );
var widget = new OO.ui.CheckboxMultiselectWidget( {
items: items
} );
this.fieldset.addItems( [
new OO.ui.FieldLayout( widget, {
label: 'Visible columns',
align: fieldOptions.align || 'top'
} )
] );
this.getters[ 'columns' ] = function () {
return widget.findSelectedItemsData();
};
};
DisplayOptions.prototype.getOptions = function () {
var opts = {};
for ( var key in this.getters ) {
opts[ key ] = this.getters[ key ]();
}
return opts;
};
function SearchWidget ( optionConfig, searchConfig ) {
this.api = new mw.Api();
this.fieldset = new OO.ui.FieldsetLayout();
this.submitButton = new OO.ui.ButtonInputWidget( {
label: 'Search',
flags: [ 'primary', 'progressive' ],
align: 'left',
icon: 'search'
} );
this.submitButton.on( 'click', this.search.bind( this ) );
if ( optionConfig.queryOptions ) {
this.queryOptions = optionConfig.queryOptions;
this.fieldset.addItems( [
optionConfig.queryOptions.fieldset
] );
}
if ( optionConfig.displayOptions ) {
this.displayOptions = optionConfig.displayOptions;
this.fieldset.addItems( [
optionConfig.displayOptions.fieldset
] );
}
this.fieldset.addItems( [
new OO.ui.FieldLayout( this.submitButton )
] );
this.tableSelector = searchConfig.selector;
this.template = searchConfig.template;
}
SearchWidget.prototype.search = function () {
const params = [];
if ( this.queryOptions ) {
const options = this.queryOptions.getOptions();
for ( var key in options ) {
params.push( '|' + key + ' = ' + options[ key ] );
}
}
if ( this.displayOptions ) {
const options = this.displayOptions.getOptions();
for ( var key in options ) {
params.push( '|' + key + ' = ' + options[ key ] );
}
}
var text = '{' + '{' +
this.template + '\n' +
params.join('\n') +
'\n}}';
console.log( text );
var selector = this.tableSelector;
$( selector ).html( 'Searching...' );
this.api.get( {
action: 'parse',
title: mw.config.get( 'wgPageName' ),
prop: 'text',
text: text,
maxage: 3600,
smaxage: 3600
} ).done( function( results ) {
$( selector ).empty()
.append( $( results.parse.text[ '*' ] ) );
$( selector + ' table' ).tablesorter();
} );
};
Object.preventExtensions( QueryOptions );
Object.preventExtensions( DisplayOptions );
Object.preventExtensions( SearchWidget );
psw.db = {
QueryOptions: QueryOptions,
DisplayOptions: DisplayOptions,
SearchWidget: SearchWidget
};
} )( jQuery, mediaWiki, pswiki );