MediaWiki:Gadget-campaignEventPages.js

Hali sa Wiksyunaryo

Patanid: Pakatapos ipublikar, baad kaipuhanon mong i-bypass an cache kan saimong browser para mahiling an mga pagbabago.

  • Sa Firefox / Safari: Pinduton an Shift mantang pinipindot an Reload, o pinduton an Ctrl-F5 o Ctrl-R (⌘-R sa Mac)
  • Sa Google Chrome: Pinduton an Ctrl-Shift-R (⌘-Shift-R sa Mac)
  • Sa Internet Explorer / Edge: Pinduton Ctrl mantang pinipindot an Refresh, o pinduton an Ctrl-F5
  • Sa Opera: Pinduton an 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();
            } ),
          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();
            } ),
            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 / Location Form
      const getStep3Buttons = function () {
        return new OO.ui.HorizontalLayout( {
        items: [
          new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
              self.close();
            } ),
          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 selLocation = locationWidget.findSelectedItem();
            if ( !selLocation ) {
              $errorsField.text( 'Select a location to continue' );
              return;
            }
            clearError();
            self.switchToStep( 'create-event-step-4-activities-' + selLocation.getData() );
              return;
            }
          } )
        ],
        classes: [ 'ced-step-buttons' ]
        });
      }
      //Location Form(Virtual Meetings/Add Venue)
      const getStep4Buttons = function () {
        return new OO.ui.HorizontalLayout( {
        items: [
          new OO.ui.ButtonWidget( { label: 'Cancel', framed: false } ).on( 'click', function() {
              self.close();
            } ),
          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();
            } ),
            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();
            } ),
            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();
            } ),
            new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
              const selItem = eventTypeWidget.findSelectedItem();
              const selLocation = locationWidget.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-' + selLocation.getData() );
                return;
              }
              if (selItem.getData()=='meetup'){
                self.switchToStep( 'create-event-step-4-activities-' + selLocation.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();
            } ),
            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();
            } ),
            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();
            } ),
            new OO.ui.ButtonWidget( { label: 'Back', framed: false } ).on( 'click', function() {
              //self.switchToStep( 'create-event-step-7-organizer-tools' );
              const selItem = eventTypeWidget.findSelectedItem();
              const selLocation = locationWidget.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-' + selLocation.getData() );
                return;
              }
              if (selItem.getData()=='meetup'){
                self.switchToStep( 'create-event-step-4-activities-' + selLocation.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,
                    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 selLocation = locationWidget.findSelectedItem()
            	if ( selItem.getData() == 'editathon' ) {
            		nameOfEvent = nameEventEdit.getValue();
                newPageCat = '[[' + 'Category:User:IBrazal (WMF)/sandbox/Campaign 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 ( selLocation.getData() == 'online' ) {
                    newPageText+= '\n===Virtual Meetings ===\n' +
                    '\'\'\'Date:\'\'\' ' + virtualMeetingDate1.getValue() +
                    '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime1.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink1.getValue();
                    const vMDate2 = virtualMeetingDate2.getValue();
                    const vMDate3 = virtualMeetingDate3.getValue();
                   if ( !vMDate2 ){
                     newPageText+= '';
                   }
                   else {
                     newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + virtualMeetingDate2.getValue() +
                     '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime2.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink2.getValue();
                     if ( !vMDate3 ){
                       newPageText+= '';
                     }
                     else{
                       newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + virtualMeetingDate3.getValue() +
                       '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime3.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink3.getValue();
                     }
                   }
                  }
                  else if ( selLocation.getData() == 'Offline' ) {
                     newPageText+= '\n===Venue ===\n' + addVenue.getValue();
                  }
                  else { return;
            	    }
                introEvent = introEdit.getValue();
            	} else if ( selItem.getData() == 'contest' ) {
            		nameOfEvent = nameEventContest.getValue();
                newPageCat = '[[' + 'Category:User:IBrazal (WMF)/sandbox/Campaign 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:User:IBrazal (WMF)/sandbox/Campaign Events/Conference]]';
                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 ( selLocation.getData() == 'online' ) {
                    newPageText+= '\n===Virtual Meetings ===\n' +
                    '\'\'\'Date:\'\'\' ' + virtualMeetingDate1.getValue() +
                    '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime1.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink1.getValue();
                    const vMDate2 = virtualMeetingDate2.getValue();
                    const vMDate3 = virtualMeetingDate3.getValue();
                   if ( !vMDate2 ){
                     newPageText+= '';
                   }
                   else {
                     newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + virtualMeetingDate2.getValue() +
                     '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime2.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink2.getValue();
                     if ( !vMDate3 ){
                       newPageText+= '';
                     }
                     else{
                       newPageText+= '<br><br>\n\'\'\'Date:\'\'\' ' + virtualMeetingDate3.getValue() +
                       '<br>\n\'\'\'Time:\'\'\' ' + virtualMeetingTime3.getValue() +  '<br>\n\'\'\'Link:\'\'\' ' + virtualMeetingLink3.getValue();
                     }
                   }
                  }
                  else if ( selLocation.getData() == 'Offline' ) {
                     newPageText+= '\n===Venue ===\n' + addVenue.getValue();
                  }
            	} 
              else if ( selItem.getData() == 'other' ) {
            		nameOfEvent = nameEventOther.getValue();
                newPageCat = '[[' + 'Category:User:IBrazal (WMF)/sandbox/Campaign Events/Other]]' +
                              '[[' + 'Category:User:IBrazal (WMF)/sandbox/Campaign 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();
              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+= newPageCat + '\n{{Template:IBrazal-CE-Header}}\n' + newPageHeader + newPageText;
              newPageTextFull+= '\n==About the Organizers==\n' + '{{IBrazal-CE-Organizers |username=' + mw.config.get ( 'wgUserName' ) +'}}' + '{{IBrazal-CE-AddOrganizer}}';

              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,
					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 ) +
							'?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 locationWidget = new OO.ui.RadioSelectWidget( {
        items: [
          new OO.ui.RadioOptionWidget( {
            data: 'online',
            label: 'Online'
          } ),
          new OO.ui.RadioOptionWidget( {
            data: 'Offline',
            label: 'Offline'
          } )
        ]
      } );
      
      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(
            locationWidget,
            {
              align: 'top',
              label: new OO.ui.HtmlSnippet('<b>Location</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 virtualMeetingDate1 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingTime1 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingLink1 = new OO.ui.TextInputWidget( { align: 'top' } ),

          virtualMeetingDate2 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingTime2 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingLink2 = new OO.ui.TextInputWidget( { align: 'top' } ),

          virtualMeetingDate3 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingTime3 = new OO.ui.TextInputWidget( { align: 'top' } ),
          virtualMeetingLink3 = new OO.ui.TextInputWidget( { align: 'top' } ),
        
        virtualMeetingfieldset = new OO.ui.FieldsetLayout( {
          label: 'Virtual Meetings'
       } );

       virtualMeetingfieldset.addItems( [
          new OO.ui.FieldLayout( virtualMeetingDate1,
            { align: 'right', label: 'Date' } ),
          new OO.ui.FieldLayout( virtualMeetingTime1,
            { align: 'right', label: 'Time' } ),
          new OO.ui.FieldLayout( virtualMeetingLink1,
            { align: 'right', label: 'Link'} ),

          new OO.ui.FieldLayout( virtualMeetingDate2,
            { align: 'right', label: 'Date' } ),
          new OO.ui.FieldLayout( virtualMeetingTime2,
            { align: 'right', label: 'Time' } ),
          new OO.ui.FieldLayout( virtualMeetingLink2,
            { align: 'right', label: 'Link'} ),

          new OO.ui.FieldLayout( virtualMeetingDate3,
            { align: 'right', label: 'Date' } ),
          new OO.ui.FieldLayout( virtualMeetingTime3,
            { align: 'right', label: 'Time' } ),
          new OO.ui.FieldLayout( virtualMeetingLink3,
            { align: 'right', label: 'Link'} ),
          new OO.ui.FieldLayout( new OO.ui.Widget( { content: [ getStep4Buttons() ] } ), { align: 'top' } )
       ] )

      //Location>Online>Virtual Meetings
      var activitiesLocOnlineForm = new OO.ui.FormLayout( {
        items: [
          virtualMeetingfieldset
        ]
      } );
      $( document.body ).append( activitiesLocOnlineForm.$element );

      var addVenue = new OO.ui.MultilineTextInputWidget( { rows: 15 } );

      //Location>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' } )
        ]
      } );

      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 howToJoin = new OO.ui.MultilineTextInputWidget( { rows: 5, placeholder: 'Let your participants know how to join 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( howToJoin, { align: 'top', label: new OO.ui.HtmlSnippet('<b>How to Join</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>Start Date:</b>') } ),
          new OO.ui.FieldLayout( endDate, { align: 'left', label: new OO.ui.HtmlSnippet('<b>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-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 );
 // } );
} )();