MediaWiki:Gadget-campaignEventPages.js
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.
( function () {
function getDialog() {
var style = '.ced-step-buttons { width: 100%; text-align: right }' +
'.ced-intro-text { font-size: 80%; margin-bottom: 3em; }' +
'.ced-errors { color: red; margin: 1em; }';
mw.util.addCSS( style );
function CreateEventDialog( config ) {
CreateEventDialog.parent.call( this, config );
}
OO.inheritClass( CreateEventDialog, OO.ui.ProcessDialog );
CreateEventDialog.static.name = 'createEventDialog';
CreateEventDialog.static.title = 'Start creating your event page!';
CreateEventDialog.prototype.initialize = function () {
var self = this;
CreateEventDialog.parent.prototype.initialize.call( this );
var $introText = $( '<div />', { class: 'ced-intro-text' } )
.append( $( '<p/>' ).append( 'Please login first before continuing :)' ) )
.append( $( '<p/>' ).append( 'Don\'t worry about getting all you answers perfect in this form. You can add and make changes to your page after creating your first draft!' ) );
var $errorsField = $( '<div />', { class: 'ced-errors' } );
const clearError = function () {
$errorsField.text( '' );
self.updateSize();
};
this.curStepID = 'create-event-step-1';
var eventTypeWidget = new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'editathon',
label: 'Edit-a-thon'
} ),
new OO.ui.RadioOptionWidget( {
data: 'contest',
label: 'Contest / challenge'
} ),
new OO.ui.RadioOptionWidget( {
data: 'meetup',
label: 'Meet-up'
} ),
new OO.ui.RadioOptionWidget( {
data: 'other',
label: 'Other, specify:'
} )
]
} );
var eventTypeField = new OO.ui.FieldLayout(
eventTypeWidget,
{
label: 'Select the type of event page you wish to create',
align: 'top'
}
);
var eventTypeOther = new OO.ui.TextInputWidget( { align: 'top', required: true, validate: 'non-empty' } );
//Event Type Option
var step1Buttons = new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
const selItem = eventTypeWidget.findSelectedItem();
const otherSpecify = eventTypeOther.getValue();
if ( !selItem ) {
$errorsField.text ('Select an option to continue') ;
return;
}
if ( selItem.getData() == 'other' && !otherSpecify) {
$errorsField.text ('Specify the type of event to continue');
return;
}
clearError();
self.switchToStep( 'create-event-step-2-' + selItem.getData() );
} )
],
classes: [ 'ced-step-buttons' ]
} );
var step1Form = new OO.ui.FieldsetLayout( {
items: [
eventTypeField,
eventTypeOther,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ step1Buttons ] } ), { align: 'top' } )
]
} );
//Event Form to Activities Form / Guidelines Form(Contest)
const getStep2Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
clearError();
self.switchToStep( 'create-event-step-1' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
const selItem = eventTypeWidget.findSelectedItem();
if ( selItem.getData() == 'editathon' ) {
const nameOfEvent = nameEventEdit.getValue();
if ( !nameOfEvent ) {
$errorsField.text( 'Enter a name to continue' );
}
else{
clearError();
self.switchToStep( 'create-event-step-3-activities');
}
return;
}
else if ( selItem.getData() == 'meetup' ) {
const nameOfEvent = nameEventMeetup.getValue();
if ( !nameOfEvent ) {
$errorsField.text( 'Enter a name to continue' );
}
else{
clearError();
self.switchToStep( 'create-event-step-3-activities');
}
return;
}
else if ( selItem.getData() == 'contest' ) {
const nameOfEvent = nameEventContest.getValue();
if ( !nameOfEvent ) {
$errorsField.text( 'Enter a name to continue' );
}
else{
clearError();
self.switchToStep( 'create-event-step-3-contest-gl');
}
return;
}
else if ( selItem.getData() == 'other' ) {
const nameOfEvent = nameEventOther.getValue();
if ( !nameOfEvent ) {
$errorsField.text( 'Enter a name to continue' );
}
else{
clearError();
self.switchToStep( 'create-event-step-3-activitiesOther');
}
return;
}
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//Activities / Event Meeting Type Form
const getStep3Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
const selItem = eventTypeWidget.findSelectedItem();
self.switchToStep( 'create-event-step-2-' + selItem.getData() );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
const selItem = eventTypeWidget.findSelectedItem();
if ( selItem.getData() == 'other' ) {
self.switchToStep( 'create-event-step-5-how-to-join');
}
else{
const selEventMeetingType = eventMeetingTypeWidget.findSelectedItem();
if ( !selEventMeetingType ) {
$errorsField.text( 'Select an Event Meeting Type to continue' );
return;
}
clearError();
self.switchToStep( 'create-event-step-4-activities-' + selEventMeetingType.getData() );
return;
}
} )
],
classes: [ 'ced-step-buttons' ]
});
}
//Event Meeting Type Form(Online/Add Venue)
const getStep4Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
self.switchToStep( 'create-event-step-3-activities' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-5-how-to-join' );
} )
],
classes: [ 'ced-step-buttons' ]
});
}
//Guidelines Form to Metrics
const getStep3ButtonsContestGL = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
self.switchToStep( 'create-event-step-2-contest' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-4-contest-metrics');
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//Metrics Form to How to Join
const getStep4ButtonsContestMetrics = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
self.switchToStep( 'create-event-step-3-contest-gl' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-5-how-to-join');
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//Contest - How to Join Form
const getStep5Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
const selItem = eventTypeWidget.findSelectedItem();
const selEventMeetingType = eventMeetingTypeWidget.findSelectedItem();
if (selItem.getData()=='contest'){
self.switchToStep( 'create-event-step-4-contest-metrics' );
return;
}
if (selItem.getData()=='editathon'){
self.switchToStep( 'create-event-step-4-activities-' + selEventMeetingType.getData() );
return;
}
if (selItem.getData()=='meetup'){
self.switchToStep( 'create-event-step-4-activities-' + selEventMeetingType.getData() );
return;
}
if (selItem.getData()=='other'){
self.switchToStep( 'create-event-step-3-activitiesOther' );
return;
}
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-6-upload-photos');
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//How to Join Form to Upload
const getStep6Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
self.switchToStep( 'create-event-step-5-how-to-join' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-7-organizer-tools');
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//Upload Form to Organizer Tools
const getStep7Buttons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
self.switchToStep( 'create-event-step-6-upload-photos' );
} ),
new OO.ui.ButtonWidget( { label: 'Next' } ).on( 'click', function () {
self.switchToStep( 'create-event-step-8-add-resources');
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
const getSteplastButtons = function () {
return new OO.ui.HorizontalLayout( {
items: [
new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
self.close();
location.reload();
} ),
new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
//self.switchToStep( 'create-event-step-7-organizer-tools' );
const selItem = eventTypeWidget.findSelectedItem();
const selEventMeetingType = eventMeetingTypeWidget.findSelectedItem();
if (selItem.getData()=='contest'){
self.switchToStep( 'create-event-step-4-contest-metrics' );
return;
}
if (selItem.getData()=='editathon'){
self.switchToStep( 'create-event-step-4-activities-' + selEventMeetingType.getData() );
return;
}
if (selItem.getData()=='meetup'){
self.switchToStep( 'create-event-step-4-activities-' + selEventMeetingType.getData() );
return;
}
if (selItem.getData()=='other'){
self.switchToStep( 'create-event-step-3-activitiesOther' );
return;
}
} ),
new OO.ui.ButtonWidget( { label: 'Create page', flags: [ 'primary', 'progressive' ] } ).on( 'click', function () {
const selItem = eventTypeWidget.findSelectedItem();
var newPageHeader='',
newPageCat = '',
newPageText='',
newPageTextFull= '',
nameOfEvent,
introEvent,
howToJoinEvent,
addBannerFile='',
howToJoinPageTextFull = '',
//howToJoinInstructions;
howToJoinInstructions = //'\'\'\'For Edit-a-thons:\'\'\' \n' +
'#Sign in if you already have a Wikimedia account. If you don\'t have an account yet, you may [https://meta.wikimedia.org/w/index.php?title=Special:CreateAccount&returnto=Main+Page create one]. The account may be used to both the target Wiki projects for this project.' + '<br>\n' +
//'#Register your name on the list of participants by typing <nowiki>~~~</nowiki>.' +
'<br>\n' +
'#Be bold and always have fun!';
const selEventMeetingType = eventMeetingTypeWidget.findSelectedItem()
if ( selItem.getData() == 'editathon' ) {
nameOfEvent = nameEventEdit.getValue();
newPageCat = '[[' + 'Category:Events/Editathon]]';
newPageText+= '\n==About the Event==\n' +
'===Background===\n' + introEdit.getValue() +
'\n===Objectives===\n' + '# ' + objectivesEdit1.getValue() + '\n# ' + objectivesEdit2.getValue() + '\n# ' + objectivesEdit3.getValue() +
'\n===Activities===\n' + activitiesField.getValue();
if ( selEventMeetingType.getData() == 'online' ) {
newPageText+= '\n===Online ===\n' +
'\'\'\'Date:\'\'\' ' + onlineDate1.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime1.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + onlineLink1.getValue();
const oDate2 = onlineDate2.getValue();
const oDate3 = onlineDate3.getValue();
if ( !oDate2 ){
newPageText+= '';
}
else {
newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + onlineDate2.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime2.getValue(); // + '<br>\n\'\'\'Link:\'\'\' ' + onlineLink2.getValue();
if ( !oDate3 ){
newPageText+= '';
}
else{
newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + onlineDate3.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime3.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + onlineLink3.getValue();
}
}
}
else if ( selEventMeetingType.getData() == 'Offline' ) {
newPageText+= '\n===Venue ===\n' + addVenue.getValue();
}
else if ( selEventMeetingType.getData() == 'hybrid' ) {
newPageText+= '\n===Online ===\n' +
'\'\'\'Date:\'\'\' ' + hybridOnlineDate.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + hybridOnlineTime.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + hybridOnlineLink.getValue();
newPageText+= '\n===In-Person Venue ===\n' + hybridVenue.getValue();
}
else { return;
}
introEvent = introEdit.getValue();
} else if ( selItem.getData() == 'contest' ) {
nameOfEvent = nameEventContest.getValue();
newPageCat = '[[' + 'Category:Events/Contest]]';
newPageText+= '\n==About the Event==\n' +
'===Background===\n' + introContest.getValue() +
'\n===Goals===\n' + '#' + goalsContest1.getValue() + '\n#' + goalsContest2.getValue() + '\n#' + goalsContest3.getValue() +
'\n===General Guidelines===\n' + generalGuidelinesField.getValue() + '<br>' +
'\n===Criteria===\n' + '#' + criteria1.getValue() + '\n#' + criteria2.getValue() + '\n#' + criteria3.getValue() +
'\n===Metrics===\n' + metricsField.getValue() +
'\n===Prize===\n' + '#' + prize1.getValue() + '\n#' + prize2.getValue() + '\n#' + prize3.getValue();
introEvent = introContest.getValue();
} else if ( selItem.getData() == 'meetup' ) {
nameOfEvent = nameEventMeetup.getValue();
newPageCat = '[[' + 'Category:Events/Meetup]]';
newPageText+= '\n==About the Event==\n' +
'===Background===\n' + introMeetup.getValue() +
'\n===Objectives===\n' + '#' + goalsMeetup1.getValue() + '\n#' + goalsMeetup2.getValue() + '\n#' + goalsMeetup3.getValue() +
'\n===Activities===\n' + activitiesField.getValue();
introEvent = introMeetup.getValue();
if ( selEventMeetingType.getData() == 'online' ) {
newPageText+= '\n===Online ===\n' +
'\'\'\'Date:\'\'\' ' + onlineDate1.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime1.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + onlineLink1.getValue();
const oDate2 = onlineDate2.getValue();
const oDate3 = onlineDate3.getValue();
if ( !oDate2 ){
newPageText+= '';
}
else {
newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + onlineDate2.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime2.getValue(); // + '<br>\n\'\'\'Link:\'\'\' ' + onlineLink2.getValue();
if ( !oDate3 ){
newPageText+= '';
}
else{
newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + onlineDate3.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + onlineTime3.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + onlineLink3.getValue();
}
}
}
else if ( selEventMeetingType.getData() == 'Offline' ) {
newPageText+= '\n===Venue ===\n' + addVenue.getValue();
}
else if ( selEventMeetingType.getData() == 'hybrid' ) {
newPageText+= '\n===Online ===\n' +
'\'\'\'Date:\'\'\' ' + hybridOnlineDate.getValue() +
'<br>\n\'\'\'Time:\'\'\' ' + hybridOnlineTime.getValue(); //+ '<br>\n\'\'\'Link:\'\'\' ' + hybridOnlineLink.getValue();
newPageText+= '\n===In-Person Venue ===\n' + hybridVenue.getValue();
}
}
else if ( selItem.getData() == 'other' ) {
nameOfEvent = nameEventOther.getValue();
newPageCat = '[[' + 'Category:Events/Other]]' +
'[[' + 'Category:Events/Other/' + eventTypeOther.getValue() + ']]';
newPageText+= '\n==About the Event==\n' +
'===Background===\n' + introOther.getValue() +
'\n===Objectives===\n' + '#' + objectivesOther1.getValue() + '\n#' + objectivesOther2.getValue() + '\n#' + objectivesOther3.getValue() +
'\n===Activities===\n' + activitiesOtherField.getValue();
introEvent = introOther.getValue();
} else {
return;
}
howToJoinEvent = howToJoin.getValue();
addBannerFile = addBanner.getValue();
if ( !addBannerFile ){
addBannerFile += 'Placeholder_Banner-800.jpg';
}
else{
addBannerFile = addBanner.getValue();
}
newPageHeader += '__NOTOC__\n{{Probox/Event' +
'|status = upcoming' +
'|project= ' + nameOfEvent +
'|summary=' + introEvent +
'|organizer1= ' + mw.config.get ( 'wgUserName' ) +
'|organizer2= ' +
'|member= ' + organizer.getValue() +
'|url=' +
'|image = ' +
'|start_date=' + startDate.getValue() +
'|end_date=' + endDate.getValue() +
'|creator= ' + mw.config.get ( 'wgUserName' ) +
'|timestamp={{<includeonly>subst:</includeonly>CURRENTTIME}}, {{<includeonly>subst:</includeonly>CURRENTDAY}} {{<includeonly>subst:</includeonly>CURRENTMONTHNAME}} {{<includeonly>subst:</includeonly>CURRENTYEAR}} (UTC)' +
'{{Template:IBrazal-CE-Tracking}}\n' //+ '{{Template:IBrazal-CE-AddGallery}}'
+ '}}';
newPageTextFull+= '[[' + 'Category:Events]]\n' + newPageCat + '\n[[File:'+ addBannerFile +'|800px|center]]\n' +'\n{{Template:IBrazal-CE-Header}}\n' + newPageHeader + newPageText;
newPageTextFull+= '\n===Special Instructions===\n' + howToJoinEvent;
newPageTextFull+= '\n==Gallery==\n' +'\n[[File:Placeholder_Photo.jpg|200px]][[File:Placeholder_Photo.jpg|200px]][[File:Placeholder_Photo.jpg|200px]]\n'+
'\n==Worklist==\n' + '{{#invoke:Wikidata helper|wdmatrix|objects=Q52|langs=en,fr,sw}}';
newPageTextFull+= '\n==About the Organizers==\n' + '{{IBrazal-CE-Organizers |username=' + mw.config.get ( 'wgUserName' ) +'}}' + '<br>' + '\n{{IBrazal-CE-AddOrganizer}}';
newPageTextFull+= '\n==Resources==\n';
howToJoinPageTextFull+= '\n{{Template:IBrazal-CE-Header-Tab}}\n' + newPageHeader +
'\n==How to Join==\n' + howToJoinInstructions +
'\n===Special Instructions===\n*' + howToJoinEvent;
//new mw.Api().postWithEditToken( {
//action: 'edit',
//title: 'User:IBrazal_(WMF)/sandbox/Campaign_Event_Pages/' + nameOfEvent + '/How_to_Join',
//summary: 'How to Join Page',
//text: howToJoinPageTextFull
//} )
new mw.Api().postWithEditToken( {
action: 'edit',
//title: 'User:IBrazal_(WMF)/sandbox/Campaign_Event_Pages/' + nameOfEvent,
title: 'Event:' + nameOfEvent,
summary: 'Creating event page with the wizard',
text: newPageTextFull
} )
.done( function () {
window.location.href = 'https://meta.wikimedia.org/wiki/' +
//'User:IBrazal_(WMF)/sandbox/Campaign_Event_Pages/' + encodeURIComponent( nameOfEvent ) +
'Event:' + encodeURIComponent( nameOfEvent ) +
'?veaction=editsource';
self.close();
} )
.fail( function ( e ) {
$errorsField.text( 'Cannot create the event page: ' + e );
} );
} )
],
classes: [ 'ced-step-buttons' ]
} );
};
//Editathon Form
var nameEventEdit = new OO.ui.TextInputWidget( {
placeholder: 'example: #1Librarian1Reference 2022',
required: true,
validate: 'non-empty',
//data: nameEvent.getValue()
} )
$( document.body ).append( nameEventEdit.$element );
var introEdit = new OO.ui.MultilineTextInputWidget( {
rows: 10,
autosize: true,
} ),
objectivesEdit1 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
objectivesEdit2 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
objectivesEdit3 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
fieldset = new OO.ui.FieldsetLayout( {
label: 'What is the event?'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( nameEventEdit, {
label: 'Name of the event',
align: 'top',
help: 'This will become the title of your event page',
helpInline: true
} ),
new OO.ui.FieldLayout( introEdit, {
label: 'Background',
align: 'top',
help: 'Briefly provide a background about your event in general',
helpInline: true
} ),
new OO.ui.FieldLayout( objectivesEdit1, {
label: 'Objectives',
align: 'top'
} ),
new OO.ui.FieldLayout( objectivesEdit2, {
align: 'top'
} ),
new OO.ui.FieldLayout( objectivesEdit3, {
align: 'top'
} )
] );
var step2EditathonForm = new OO.ui.FormLayout( {
items: [ fieldset,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep2Buttons() ] }),{ align: 'top'} ) ]
//action: '/api/formhandler',
//method: 'get'
} )
$( document.body ).append( step2EditathonForm.$element );
//Contest Form
var nameEventContest = new OO.ui.TextInputWidget( {
placeholder: 'example: Africa Wiki Challenge',
required: true,
validate: 'non-empty',
//data: nameEvent.getValue()
} )
$( document.body ).append( nameEventContest.$element );
var introContest = new OO.ui.MultilineTextInputWidget( {
rows: 10,
autosize: true,
} ),
goalsContest1 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
goalsContest2 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
goalsContest3 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
fieldset = new OO.ui.FieldsetLayout( {
label: 'What is the name of the challenge?'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( nameEventContest, {
label: 'Name of the contest or challenge',
align: 'top',
help: 'This will become the title of your event page',
helpInline: true
} ),
new OO.ui.FieldLayout( introContest, {
label: 'Background',
align: 'top',
help: 'Briefly provide a background about your event in general',
helpInline: true
} ),
new OO.ui.FieldLayout( goalsContest1, {
label: 'Goals',
align: 'top'
} ),
new OO.ui.FieldLayout( goalsContest2, {
align: 'top'
} ),
new OO.ui.FieldLayout( goalsContest3, {
align: 'top'
} )
] );
var step2ContestForm = new OO.ui.FormLayout( {
items: [ fieldset,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep2Buttons() ] }),{ align: 'top'} ) ],
//action: '/api/formhandler',
//method: 'get'
} )
$( document.body ).append( step2ContestForm.$element );
//Meetup Form
var nameEventMeetup = new OO.ui.TextInputWidget( {
placeholder: 'example: ESEAP Regional Educational Meet-up',
required: true,
validate: 'non-empty',
//data: nameEvent.getValue()
} )
$( document.body ).append( nameEventMeetup.$element );
var introMeetup = new OO.ui.MultilineTextInputWidget( {
rows: 10,
autosize: true,
} ),
goalsMeetup1 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
goalsMeetup2 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
goalsMeetup3 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
fieldset = new OO.ui.FieldsetLayout( {
label: 'What is the name of your event?'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( nameEventMeetup, {
label: 'Name of the meet-up or Conferences',
align: 'top',
help: 'This will become the title of your event page',
helpInline: true
} ),
new OO.ui.FieldLayout( introMeetup, {
label: 'Background',
align: 'top',
help: 'Briefly provide a background about your event in general',
helpInline: true
} ),
new OO.ui.FieldLayout( goalsMeetup1, {
label: 'Goals',
align: 'top'
} ),
new OO.ui.FieldLayout( goalsMeetup2, {
align: 'top'
} ),
new OO.ui.FieldLayout( goalsMeetup3, {
align: 'top'
} )
] );
var step2MeetupForm = new OO.ui.FormLayout( {
items: [ fieldset,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep2Buttons() ] }),{ align: 'top'} ) ]
//action: '/api/formhandler',
//method: 'get'
} )
$( document.body ).append( step2MeetupForm.$element );
//Other type Form
var nameEventOther = new OO.ui.TextInputWidget( {
placeholder: 'example: #1Librarian1Reference 2022',
required: true,
validate: 'non-empty',
//data: nameEvent.getValue()
} )
$( document.body ).append( nameEventOther.$element );
var introOther = new OO.ui.MultilineTextInputWidget( {
rows: 10,
autosize: true,
} ),
objectivesOther1 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
objectivesOther2 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
objectivesOther3 = new OO.ui.TextInputWidget( {
align: 'top'
} ),
fieldset = new OO.ui.FieldsetLayout( {
label: 'What is the event?'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( nameEventOther, {
label: 'Name of the event',
align: 'top',
help: 'This will become the title of your event page',
helpInline: true
} ),
new OO.ui.FieldLayout( introOther, {
label: 'Background',
align: 'top',
help: 'Briefly provide a background about your event in general',
helpInline: true
} ),
new OO.ui.FieldLayout( objectivesOther1, {
label: 'Objectives',
align: 'top'
} ),
new OO.ui.FieldLayout( objectivesOther2, {
align: 'top'
} ),
new OO.ui.FieldLayout( objectivesOther3, {
align: 'top'
} )
] );
var step2otherForm = new OO.ui.FormLayout( {
items: [ fieldset,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep2Buttons() ] }),{ align: 'top'} ) ]
} )
$( document.body ).append( step2otherForm.$element );
var eventMeetingTypeWidget = new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
data: 'online',
label: 'Online event'
} ),
new OO.ui.RadioOptionWidget( {
data: 'Offline',
label: 'In-person event'
} ),
new OO.ui.RadioOptionWidget( {
data: 'hybrid',
label: 'Online and in-person event'
} )
]
} );
var activitiesForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout(
activitiesField = new OO.ui.MultilineTextInputWidget( { rows: 15 } ),
{
align: 'top',
label: new OO.ui.HtmlSnippet('<b>Activities</b>'),
}
),
new OO.ui.FieldLayout(
eventMeetingTypeWidget,
{
align: 'top',
label: new OO.ui.HtmlSnippet('<b>Event Meeting Type</b>'),
}
),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep3Buttons() ] } ), { align: 'top' } )
]
} );
var activitiesOtherField = new OO.ui.MultilineTextInputWidget( { rows: 15 } )
var activitiesOtherForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout( activitiesOtherField, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Activities</b>')} ),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep3Buttons() ] } ), { align: 'top' } )
]
} );
var onlineDate1 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlineTime1 = new OO.ui.TextInputWidget( { align: 'top' } ),
//onlineLink1 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlineDate2 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlineTime2 = new OO.ui.TextInputWidget( { align: 'top' } ),
//onlineLink2 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlineDate3 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlineTime3 = new OO.ui.TextInputWidget( { align: 'top' } ),
//onlineLink3 = new OO.ui.TextInputWidget( { align: 'top' } ),
onlinefieldset = new OO.ui.FieldsetLayout( {
label: 'Online'
} );
onlinefieldset.addItems( [
new OO.ui.FieldLayout( onlineDate1,
{ align: 'right', label: 'Date' } ),
new OO.ui.FieldLayout( onlineTime1,
{ align: 'right', label: 'Time' } ),
//new OO.ui.FieldLayout( onlineLink1,
// { align: 'right', label: 'Link'} ),
new OO.ui.FieldLayout( onlineDate2,
{ align: 'right', label: 'Date' } ),
new OO.ui.FieldLayout( onlineTime2,
{ align: 'right', label: 'Time' } ),
//new OO.ui.FieldLayout( onlineLink2,
// { align: 'right', label: 'Link'} ),
new OO.ui.FieldLayout(onlineDate3,
{ align: 'right', label: 'Date' } ),
new OO.ui.FieldLayout( onlineTime3,
{ align: 'right', label: 'Time' } ),
//new OO.ui.FieldLayout( onlineLink3,
// { align: 'right', label: 'Link'} ),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4Buttons() ] } ), { align: 'top' } )
] )
//EventMeetingType>Online>Schedule
var activitiesLocOnlineForm = new OO.ui.FormLayout( {
items: [
onlinefieldset
]
} );
$( document.body ).append( activitiesLocOnlineForm.$element );
var addVenue = new OO.ui.MultilineTextInputWidget( { rows: 15 } );
//EventMeetingType>Offline>Add Venue
var activitiesLocOfflineForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout( addVenue, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Add Venue</b>') }),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4Buttons() ] } ), { align: 'top' } )
]
} );
//EventMeetingType>Hybrid>Online+Add Venue
var hybridVenue = new OO.ui.MultilineTextInputWidget( { rows: 10 } );
var hybridOnlineDate = new OO.ui.TextInputWidget( { align: 'top' } ),
hybridOnlineTime = new OO.ui.TextInputWidget( { align: 'top' } ),
// hybridOnlineLink = new OO.ui.TextInputWidget( { align: 'top' } ),
hybridOnlinefieldset = new OO.ui.FieldsetLayout( {
label: 'Online'
} ),
hybridInPersonfieldset = new OO.ui.FieldsetLayout( {
label: 'In-person'
} );
hybridOnlinefieldset.addItems( [
new OO.ui.FieldLayout( hybridOnlineDate,
{ align: 'right', label: 'Date' } ),
new OO.ui.FieldLayout( hybridOnlineTime,
{ align: 'right', label: 'Time' } ),
// new OO.ui.FieldLayout( hybridOnlineLink,
// { align: 'right', label: 'Link'} ),
//new OO.ui.FieldLayout( hybridVenue, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Add Venue</b>\nIn-Person') }),
//new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4Buttons() ] } ), { align: 'top' } )
] )
hybridInPersonfieldset.addItems( [
new OO.ui.FieldLayout( hybridVenue,
{ align: 'right', label: 'Add Venue' } ),
//new OO.ui.FieldLayout( hybridVenue, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Add Venue</b>\nIn-Person') }),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4Buttons() ] } ), { align: 'top' } )
] )
//EventMeetingType>Hybrid
var activitiesLocHybridForm = new OO.ui.FormLayout( {
items: [
hybridOnlinefieldset,
hybridInPersonfieldset
]
} );
$( document.body ).append( activitiesLocHybridForm.$element );
//Criteria
var generalGuidelinesField= new OO.ui.MultilineTextInputWidget( { rows: 15 , placeholder: 'Let your participants know how to join your event!' } ),
criteria1 = new OO.ui.TextInputWidget({ align: 'top' }),
criteria2 = new OO.ui.TextInputWidget({ align: 'top' }),
criteria3 = new OO.ui.TextInputWidget({ align: 'top' })
;
//Guidelines Form
var contestGuidelinesForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout( generalGuidelinesField, { align: 'top', label: new OO.ui.HtmlSnippet('<b>General Guidelines</b>')} ),
new OO.ui.FieldLayout( criteria1, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Criteria</b>') }),
new OO.ui.FieldLayout( criteria2, { align: 'top'}),
new OO.ui.FieldLayout( criteria3, { align: 'top',}),
//new OO.ui.ButtonWidget( { label: 'Add more', framed: false } ).on( 'click', function() {
// } ),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep3ButtonsContestGL() ] } ), { align: 'top' } )
]
} );
//Metrics Form
var metricsField= new OO.ui.MultilineTextInputWidget( { rows: 15 , placeholder: 'Let your participants know how to join your event!' } ),
prize1 = new OO.ui.TextInputWidget({ align: 'top' }),
prize2 = new OO.ui.TextInputWidget({ align: 'top' }),
prize3 = new OO.ui.TextInputWidget({ align: 'top' });
var contestMetricsForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout( metricsField, {
align: 'top', label: new OO.ui.HtmlSnippet('<b>Metrics</b>')
} ),
new OO.ui.FieldLayout( prize1, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Prizes / Rewards</b>') }),
new OO.ui.FieldLayout( prize2, { align: 'top' }),
new OO.ui.FieldLayout( prize3, { align: 'top' }),
//new OO.ui.ButtonWidget( { label: 'Add more', framed: false } ).on( 'click', function() {
// } ),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4ButtonsContestMetrics() ] } ), { align: 'top' } )
]
} );
//How to Join Form
var addBanner= new OO.ui.TextInputWidget( { placeholder: 'Example: Eastern_Inner_Mongolia_banner_Arxan.jpg' } ),
howToJoin = new OO.ui.MultilineTextInputWidget( { rows: 5, placeholder: 'Provide other special instructions in joining your event.' } ),
//eventComm= new OO.ui.TextInputWidget( { placeholder: 'Add links to your event communication channels' } ),
organizer = new OO.ui.TextInputWidget( { placeholder: 'example: IBrazal(do not add User: prefix)' } ),
organizer2 = new OO.ui.TextInputWidget( { align: 'top' } ),
//organizer3 = new OO.ui.TextInputWidget( { align: 'top' } ),
//facilitator = new OO.ui.TextInputWidget( { placeholder: 'example: ibrazal-ctr@wikimedia.org' } ),
startDate = new OO.ui.TextInputWidget( { align: 'top' } ),
endDate = new OO.ui.TextInputWidget( { align: 'top' } ),
howToJoinForm = new OO.ui.FieldsetLayout( {
items: [
new OO.ui.FieldLayout( addBanner, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Add a Banner</b>'), help: 'Add file name from Wikimedia Commons (Recommended size: 800x90px)',
helpInline: true } ),
new OO.ui.FieldLayout( howToJoin, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Special Instructions</b>') } ),
//new OO.ui.FieldLayout( eventComm, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Event Communication Channel</b>') } ),
new OO.ui.FieldLayout( organizer, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Organizer</b>') } ),
new OO.ui.FieldLayout( organizer2,{ align: 'top' } ),
// new OO.ui.FieldLayout( organizer3,{ align: 'top' } ),
//new OO.ui.ButtonWidget( { label: 'Add more', framed: false } ).on( 'click', function() {} ),
//new OO.ui.FieldLayout( facilitator, { align: 'top', label: new OO.ui.HtmlSnippet('<b>Facilitator</b>') } ),
new OO.ui.FieldLayout( startDate, { align: 'left', label: new OO.ui.HtmlSnippet('<b>Event Start Date:</b>') } ),
new OO.ui.FieldLayout( endDate, { align: 'left', label: new OO.ui.HtmlSnippet('<b>Event End Date:</b>') } ),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getSteplastButtons() ] } ), { align: 'top' } )
]
} );
var selectFileAddBanner = new OO.ui.SelectFileInputWidget({
placeholder: 'Add link to your banner photo',
align: 'top'
});
$( document.body ).append( selectFileAddBanner.$element );
var selectFileAddLogo = new OO.ui.SelectFileInputWidget({
placeholder: 'Add link to your logo',
align: 'top'
});
$( document.body ).append( selectFileAddLogo.$element );
var selectFileCreateEventGallery = new OO.ui.SelectFileInputWidget({
placeholder: 'Add link to your photos',
align: 'top'
});
$( document.body ).append( selectFileCreateEventGallery.$element );
var selectFileCreateEventGallery2 = new OO.ui.SelectFileInputWidget({
placeholder: '',
align: 'top'
});
$( document.body ).append( selectFileCreateEventGallery2.$element );
var fieldset = new OO.ui.FieldsetLayout( {
//label: 'What is the event?'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( selectFileAddBanner , {
align: 'top', label: new OO.ui.HtmlSnippet('<b>Add Banner</b>')
} ),
new OO.ui.FieldLayout( selectFileAddLogo, {
align: 'top', label: new OO.ui.HtmlSnippet('<b>Add Logo</b>')
} ),
new OO.ui.FieldLayout( selectFileCreateEventGallery, {
align: 'top', label: new OO.ui.HtmlSnippet('<b>Create Event Gallery</b>')
} ),
new OO.ui.FieldLayout( selectFileCreateEventGallery2, {
align: 'top'
} ),
] );
var uploadPhotosForm = new OO.ui.FormLayout( {
items: [ fieldset,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep6Buttons() ] }),{ align: 'top'} ) ],
action: '/api/formhandler',
method: 'get'
} )
$( document.body ).append( uploadPhotosForm.$element );
var eventRegistration = new OO.ui.ActionFieldLayout(
new OO.ui.TextInputWidget({ placeholder: 'Add link to your event registration' }),
new OO.ui.ButtonWidget( { label: 'Create' } ),
{
align: 'top',
label: 'Event Registration'
} )
$( document.body ).append( eventRegistration.$element );
var eventTracking = new OO.ui.ActionFieldLayout(
new OO.ui.TextInputWidget({ placeholder: 'Add link to your tracking tool' }),
new OO.ui.ButtonWidget( { label: 'Create' } ),
{
align: 'top',
label: 'Event Tracking'
} )
$( document.body ).append( eventTracking.$element );
var topicList = new OO.ui.ActionFieldLayout(
new OO.ui.TextInputWidget({ placeholder: 'Add link to your Wikidata Query' }),
new OO.ui.ButtonWidget( { label: 'Create' } ),
{
align: 'top',
label: 'Topic List'
} )
$( document.body ).append( topicList.$element );
var organizerToolsForm = new OO.ui.FieldsetLayout( {
label: 'Organizer Tools',
align: 'top',
items: [
eventRegistration, eventTracking, topicList,
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep7Buttons() ] } ), { align: 'top' } )
]
} );
var checkboxEventTools = new OO.ui.CheckboxInputWidget( {
value: 'b'
} );
fieldset = new OO.ui.FieldsetLayout( {
label: 'Add Resources'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( checkboxEventTools, { label: 'Event Tools', align: 'inline' } ),
] );
$( document.body ).append( fieldset.$element );
var addResourcesForm = new OO.ui.FieldsetLayout( {
align: 'top',
items: [
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ fieldset ] } )),
new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getSteplastButtons() ] } ), { align: 'top' } )
]
} );
this.panelLayout = new OO.ui.PanelLayout( { padded: true, expanded: false } );
this.panelLayout.$element.append(
$introText,
$errorsField,
$( '<div />', { id: 'create-event-step-1' } ).append( step1Form.$element ),
$( '<div />', { id: 'create-event-step-2-editathon', style: 'display:none' } ).append( step2EditathonForm.$element ),
$( '<div />', { id: 'create-event-step-2-contest', style: 'display:none' } ).append( step2ContestForm.$element ),
$( '<div />', { id: 'create-event-step-2-meetup', style: 'display:none' } ).append( step2MeetupForm.$element ),
$( '<div />', { id: 'create-event-step-2-other', style: 'display:none' } ).append( step2otherForm.$element ),
$( '<div />', { id: 'create-event-step-3-activities', style: 'display:none' } ).append( activitiesForm.$element ),
$( '<div />', { id: 'create-event-step-3-activitiesOther', style: 'display:none' } ).append( activitiesOtherForm.$element ),
$( '<div />', { id: 'create-event-step-4-activities-Offline', style: 'display:none' } ).append( activitiesLocOfflineForm.$element ),
$( '<div />', { id: 'create-event-step-4-activities-online', style: 'display:none' } ).append( activitiesLocOnlineForm.$element ),
$( '<div />', { id: 'create-event-step-4-activities-hybrid', style: 'display:none' } ).append( activitiesLocHybridForm.$element ),
$( '<div />', { id: 'create-event-step-3-contest-gl', style: 'display:none' } ).append( contestGuidelinesForm.$element ),
$( '<div />', { id: 'create-event-step-4-contest-metrics', style: 'display:none' } ).append( contestMetricsForm.$element ),
$( '<div />', { id: 'create-event-step-5-how-to-join', style: 'display:none' } ).append( howToJoinForm.$element ),
$( '<div />', { id: 'create-event-step-6-upload-photos', style: 'display:none' } ).append( uploadPhotosForm.$element ),
$( '<div />', { id: 'create-event-step-7-organizer-tools', style: 'display:none' } ).append( organizerToolsForm.$element ),
$( '<div />', { id: 'create-event-step-8-add-resources', style: 'display:none' } ).append( addResourcesForm.$element )
);
this.$body.append( this.panelLayout.$element );
};
CreateEventDialog.prototype.getBodyHeight = function () {
return this.panelLayout.$element.outerHeight( true );
};
CreateEventDialog.prototype.switchToStep = function ( nextStepID ) {
// XXX Use getActionProcess()
$( '#' + this.curStepID ).hide();
this.curStepID = nextStepID;
$( '#' + nextStepID ).show();
this.updateSize();
};
return new CreateEventDialog( {
size: 'medium'
} );
}
var dialog, windowManager;
function openDialog() {
if ( !dialog ) {
dialog = getDialog();
windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );
windowManager.addWindows( [ dialog ] );
}
windowManager.openWindow( dialog );
}
//function addButton() {
// var btn = new OO.ui.ButtonInputWidget( {
// label: 'Create event page',
// flags: [
// 'primary',
// 'progressive'
// ]
// } )
// .on( 'click', openDialog );
// $( '#firstHeading' ).append( btn.$element );
//}
$( '.createEventPage' ).on( 'click', openDialog );
//$( function () {
mw.loader.using( [ 'mediawiki.util', 'oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows' ] );
// .done( addButton );
// } );
} )();