common.js

$( document ).ready( function (){

	function init() {
		// Remove the default content
		$('#mw-content-text > p').remove();
    	$('#firstHeading').text('Create Fellow Page');
		
		// Create widget
		var bio = new OO.ui.MultilineTextInputWidget( {
            	placeholder: 'Bio',
            	autosize: true, 
            	rows: 10
        	} ),
        	achievements = new OO.ui.MultilineTextInputWidget( {
            	placeholder: 'Achievements',
            	autosize: true, 
            	rows: 10
        	} ),
        	social = new OO.ui.MultilineTextInputWidget( {
            	placeholder: 'Social media profiles',
            	autosize: true, 
            	rows: 10
        	} ),
	        name = new OO.ui.TextInputWidget( { 
	            placeholder: 'Name'
	        } ),
	        cohort = new OO.ui.TextInputWidget( { 
	            placeholder: 'Cohort'
	        } ),
	        school = new OO.ui.TextInputWidget( { 
	            placeholder: 'School'
	        } ),
	        major = new OO.ui.TextInputWidget( { 
	            placeholder: 'Majoring in'
	        } ),
	        country = new OO.ui.TextInputWidget( { 
	            placeholder: 'Country'
	        } ),
			createBtn = new OO.ui.ButtonWidget( { 
			    label: 'Create Page', 
			    flags: [ 'progressive', 'primary' ]
			} ),
			cancelBtn = new OO.ui.ButtonWidget( {
			    label: 'Cancel',
			    flags: [ 'primary', 'destructive' ],
			    href:  mw.config.get( 'wgServer' )
			} ),
			label1 = $('<p>').text('Name:').css('font-weight','bold' ),
			label2 = $('<p>').text('Cohort:').css('font-weight','bold' ),
			label3 = $('<p>').text('School:').css('font-weight','bold' ),
			label4 = $('<p>').text('Majoring in:').css('font-weight','bold' ),
			label5 = $('<p>').text('Country:').css('font-weight','bold' ),
			label6 = $('<p>').text('Bio:').css('font-weight','bold' ),
			label7 = $('<p>').text('Achievements:').css('font-weight','bold' ),
			label8 = $('<p>').text('Social media profiles:').css('font-weight','bold' ),
			divMainBox = $('<div />').css( {
				'box-shadow': '0 .5rem 1rem rgba(0, 0, 0, .15)',
				'border': '1px solid',
				'padding': '1rem',
				'margin-bottom': '3rem',
				'border-radius': '.5rem'
			});
			
		divMainBox.append( 
            label1, name.$element, 
            label2, cohort.$element,
            label3, school.$element,
            label4, major.$element,
            label5, country.$element, 
            label6, bio.$element,
            label7, achievements.$element,
            label8, social.$element,
            '<br/>',
            createBtn.$element,
            cancelBtn.$element
		);
    	
		$( '#mw-content-text' ).append( divMainBox );

		// Create button click event handler
		createBtn.on( 'click', function() {
			nameResp = name.getValue().trim(),
			cohortResp = cohort.getValue().trim();
			schoolResp = school.getValue().trim(),
			majorResp = major.getValue().trim();
			countryResp = country.getValue().trim(),
			bioResp = bio.getValue().trim();
			achievementsResp = achievements.getValue().trim(),
			socialResp = social.getValue().trim();

			// Check whether the all fields are enough to run the function
			if( nameResp !== "" && cohortResp !== "" 
				&& schoolResp !== "" && majorResp !== "" && countryResp !== "" ) {
				
				api = new mw.Api();

				wikiContent = "==Intro==\n";
				wikiContent += ";Name: " + nameResp + "\n";
				wikiContent += ";Cohort: " + cohortResp + "\n";
				wikiContent += ";School: " + schoolResp + "\n";
				wikiContent += ";Majoring in: " + majorResp + "\n";
				wikiContent += ";Country: " + countryResp + "\n";
				wikiContent += "==Bio==\n" + bioResp + "\n";
				wikiContent += "==Achievements==\n" + achievementsResp + "\n";
				wikiContent += "==Social media profiles==\n" + socialResp + "\n";

				pageTitle = "Fellow:" + nameResp;
				
				api.get( {
					formatversion: 2,
					action: 'query',
					titles: pageTitle,
					redirects: true
				}, { async: false } ).then( function ( response ) {
					var page = response.query.pages[ 0 ];
					if ( page.missing || page.invalid ) {
						doEdit( pageTitle, wikiContent );
					} else {
						api.get( {
							formatversion: 2,
							action: 'query',
							titles: pageTitle + " (" + cohortResp + ")",
							redirects: true
						}, { async: false } ).then( function ( response ) {
							var page = response.query.pages[ 0 ];
							if ( page.missing || page.invalid ) {
								 doEdit( pageTitle + " (" + cohortResp + ")", wikiContent );
							} else {
								 doEdit( pageTitle + " (" + schoolResp + ", " + cohortResp + ")", wikiContent );
							}
						});
					}
				} );
			} else {
				mw.notify( "Some fields have no text :( Please fill them." );
				return;
			}

    	});
    	
    	function doEdit(title, wikiContent){
    		// Edit the page
			var editParams = {
				action: 'edit',
				title: title,
				text: wikiContent,
				summary: "Created Fellow Page",
				format: 'json'
			};
	
			api.postWithToken( 'csrf', editParams, { async: false } ).done( function ( res ) {
				if( res.edit.result === "Success"){
					mw.notify( title + " page has created :)");
					window.location.replace( mw.config.get( 'wgServer' ) + "/wiki/" + title );
				} else{
					mw.notify( "Something went worng :(" );
				}
			} );
    	}
	}
		
	// On every page
	$.when(mw.loader.using('mediawiki.util'), $.ready).then(function () {
	    mw.util.addPortletLink(
	    'p-tb',
	    mw.util.getUrl('Special:BlankPage/CreateFellowPage'),
	    'Create Fellow Page'
	    );
	});
	
	if ( mw.config.get('wgCanonicalSpecialPageName') === 'Blankpage' && mw.config.get('wgTitle').split('/', 2)[1] === 'CreateFellowPage' ) {
		mw.loader.using( ['oojs-ui-core', 'mediawiki.api', 'mediawiki.notify', 'mediawiki.Title'], init );
	}
});