Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
if (mw.config.get('wgArticleId') === 6851) {
mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets', 'mediawiki.api', 'mediawiki.widgets.DateInputWidget', 'jquery.tablesorter'] ).done( function () {
function QueryOptions() {
this.queryParams = {
units: {
'VIRTUAL SINGER': false,
'Leo/need': false,
'MORE MORE JUMP!': false,
'Vivid BAD SQUAD': false,
'Wonderlands×Showtime': false,
'25-ji, Nightcord de.': false,
'Other': false
},
mvs: {
'3D': undefined,
'2D': undefined,
'Original': undefined
},
commissioned: undefined,
minDate: '',
maxDate: '',
easyDiffs: {},
normalDiffs: {},
hardDiffs: {},
expertDiffs: {},
masterDiffs: {}
};
var qParams = this.queryParams;
// Units
var unitOptionButtons = Object.keys( qParams.units ).map( function(unitName) {
var btn = new OO.ui.ToggleButtonWidget( {
label: unitName,
value: qParams.units[unitName]
} );
btn.on( 'change', function(newVal) {
qParams.units[unitName] = newVal;
} );
return btn;
} );
var unitOptions = new OO.ui.ButtonGroupWidget( {
items: unitOptionButtons,
align: 'left'
} );
// 3D MV
this._3d_mv = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
],
align: 'left'
} );
this._3d_mv.selectItemByLabel('Any');
// 2D MV
this._2d_mv = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
],
align: 'left'
} );
this._2d_mv.selectItemByLabel('Any');
// Original MV
this._og_mv = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
],
align: 'left'
} );
this._og_mv.selectItemByLabel('Any');
// Commissioneed
this.commissioned = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
],
align: 'left'
} );
this.commissioned.selectItemByLabel('Any');
this.afterDateInput = new mw.widgets.DateInputWidget( {
type: 'date'
} );
this.beforeDateInput = new mw.widgets.DateInputWidget( {
type: 'date'
} );
function createDiffButtons(min, max, obj) {
var diffs = [];
for (var i = min; i <= max; i++) {
diffs.push(i);
}
var diffButtons = diffs.map( function(diff) {
var btn = new OO.ui.ToggleButtonWidget( {
label: diff.toString(),
value: false
} );
btn.on( 'change', function(newVal) {
obj[diff] = newVal;
} );
return btn;
} );
return new OO.ui.ButtonGroupWidget( {
items: diffButtons,
align: 'left'
} );
}
var easyOptions = createDiffButtons(5, 9, qParams.easyDiffs);
var normalOptions = createDiffButtons(10, 15, qParams.normalDiffs);
var hardOptions = createDiffButtons(15, 21, qParams.hardDiffs);
var expertOptions = createDiffButtons(22, 30, qParams.expertDiffs);
var masterOptions = createDiffButtons(26, 33, qParams.masterDiffs);
this.fieldset = new OO.ui.FieldsetLayout( {
label: 'Query options',
items: [
new OO.ui.FieldLayout( unitOptions, {
label: 'Unit',
align: 'top'
} ),
new OO.ui.FieldLayout( this._3d_mv, {
label: '3D MV?',
align: 'top'
} ),
new OO.ui.FieldLayout( this._2d_mv, {
label: '2D MV?',
align: 'top'
} ),
new OO.ui.FieldLayout( this._og_mv, {
label: 'Original MV?',
align: 'top'
} ),
new OO.ui.FieldLayout( this.commissioned, {
label: 'Commissioned?',
align: 'top'
} ),
new OO.ui.FieldLayout( this.afterDateInput, {
label: 'Released after',
align: 'top'
} ),
new OO.ui.FieldLayout( this.beforeDateInput, {
label: 'Released before',
align: 'top'
} ),
new OO.ui.FieldLayout( easyOptions, {
label: 'Easy difficulties',
align: 'top'
} ),
new OO.ui.FieldLayout( normalOptions, {
label: 'Normal difficulties',
align: 'top'
} ),
new OO.ui.FieldLayout( hardOptions, {
label: 'Hard difficulties',
align: 'top'
} ),
new OO.ui.FieldLayout( expertOptions, {
label: 'Expert difficulties',
align: 'top'
} ),
new OO.ui.FieldLayout( masterOptions, {
label: 'Master difficulties',
align: 'top'
} )
]
} );
}
QueryOptions.prototype.getOptions = function() {
var resQuery = {};
// Unit
var units = [];
for (var unit in this.queryParams.units) {
if (this.queryParams.units[unit]) {
units.push(unit);
}
}
resQuery.unit = units.join(';');
// 3D MV
var _3d_mv_val = this._3d_mv.findSelectedItem();
if (_3d_mv_val !== null) {
var data = _3d_mv_val.getData();
if (typeof data !== 'undefined') {
resQuery['3d mv'] = data;
}
}
// 2D MV
var _2d_mv_val = this._2d_mv.findSelectedItem();
if (_2d_mv_val !== null) {
var data = _2d_mv_val.getData();
if (typeof data !== 'undefined') {
resQuery['2d mv'] = data;
}
}
// Original MV
var _og_mv_val = this._og_mv.findSelectedItem();
if (_og_mv_val !== null) {
var data = _og_mv_val.getData();
if (typeof data !== 'undefined') {
resQuery['original mv'] = data;
}
}
// Commissioned
var commVal = this.commissioned.findSelectedItem();
if (commVal !== null) {
var data = commVal.getData();
if (typeof data !== 'undefined') {
resQuery.commissioned = data;
}
}
// Release date
resQuery['min date'] = this.afterDateInput.getValue();
resQuery['max date'] = this.beforeDateInput.getValue();
function getDiffs(diffObj) {
var diffs = [];
for (var key in diffObj) {
if (diffObj[key]) {
diffs.push(key);
}
}
return diffs.join(',');
}
resQuery['easy diff'] = getDiffs(this.queryParams.easyDiffs);
resQuery['normal diff'] = getDiffs(this.queryParams.normalDiffs);
resQuery['hard diff'] = getDiffs(this.queryParams.hardDiffs);
resQuery['expert diff'] = getDiffs(this.queryParams.expertDiffs);
resQuery['master diff'] = getDiffs(this.queryParams.masterDiffs);
return resQuery;
};
function DisplayOptions() {
var displayOptions = new OO.ui.CheckboxMultiselectWidget({
items: [
new OO.ui.CheckboxMultioptionWidget( {
selected: false,
label: 'Display jacket art',
disabled: true
} ),
],
align: 'left'
});
this.fieldset = new OO.ui.FieldsetLayout( {
label: 'Display options',
items: [
displayOptions
]
} );
}
DisplayOptions.prototype.getOptions = function() {
};
$( function () {
console.log('loading query interface');
var api = new mw.Api();
var queryOptions = new QueryOptions();
var displayOptions = new DisplayOptions();
var submitButton = new OO.ui.ButtonInputWidget( {
label: 'Search',
flags: [ 'primary', 'progressive' ],
align: 'left',
icon: 'search'
} );
submitButton.on('click', function() {
go(api, queryOptions, displayOptions);
});
var fieldset = new OO.ui.FieldsetLayout();
fieldset.addItems( [
queryOptions.fieldset,
displayOptions.fieldset,
new OO.ui.FieldLayout( submitButton )
] );
$( '#song-query' ).append( fieldset.$element );
function go(api, queryOptions, displayOptions) {
const params = [];
const query = queryOptions.getOptions();
for (var key in query) {
params.push('|' + key + ' = ' + query[key]);
}
var z = '{' + '{Song datatable\n' + params.join('\n') + '\n}}';
console.log(z);
api.get({
action: 'parse',
title: mw.config.get('wgPageName'),
prop: 'text',
text: z,
maxage: 3600,
smaxage: 3600
}).done(function(results) {
$('#song-results').empty().append($(results.parse.text['*']));
$('#song-results table').tablesorter();
});
}
});
});
}