User:CSteipp (WMF)/DRW.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/**
 * This is the main object that holds the state for everything
 */
function drw() {
 
	//Keep track of what step we are on
	this.wizard_step = 0;
 
	//Has the admin attempted to resolve this on the talk page
	this.talkpage = false;
 
	/**
	 * Dispute Type - Radio button choice.
	 * These are the choices the user will see. The index of the selected type
	 * will be saved in this.dispute_type.
	 *
	 * The array indexes ('unknown', 'content', 'guide', etc) are used in the page selection
	 * logic, so you will probably want them to be descriptive of the labels, which users see.
	 */
	this.dispute_types={
		unknown: "I don't know",
		content:"We have a few versions of text for an article, and can't agree on the content",
		guide:"We keep talking past each other and need someone to help guide the discussion",
		source:"We can't agree on the use of a source in an article",
		four:"Type 4 desc",
		five:"Type 5 desc",
		six:"Type 6 desc",
		seven:"Type 7 desc",
		eight:"Type 8 desc",
		nine:"Type 9 desc",
		ten:"Type 10 desc"
	};
 
	/**
 	 * Variable to hold the dispute type, selected by the user. Can set to a default if desired.
	 */
	this.dispute_type = 'unknown'; //Default is set here. Set to 0 or null for no default
 
	/**
	 * Steps Taken - Choice of checkboxes. 
	 * These are the labels the users will see. Each one that is
	 * selected will be saved in this.previous_forums array
	 */
	this.forum_labels = {
		DRN: "<a href='http://en.wikipedia.org/wiki/WP:DRN'>Wikipedia:Dispute resolution noticeboard</a>",
		THIRD: "Wikipedia:Third opinion",
		BIOG: "Wikipedia:Biographies of living persons/Noticeboard",
		FRING: "Wikipedia:Fringe theories/Noticeboard",
		NEUTRAL: "Wikipedia:Neutral point of view/Noticeboard",
		ORIGINAL: "Wikipedia:No original research/Noticeboard",
		RELIABLE: "Wikipedia:Reliable sources/Noticeboard",
		WIKIQUETTE: "Wikipedia:Wikiquette assistance",
		RFC: "Wikipedia:Requests for comment",
		MED_CABAL: "Wikipedia:Mediation Cabal",
		RFM: "Wikipedia:Requests for Mediation",
		RFA: "Wikipedia:Requests for arbitration"
	}
 
	/**
	 * Array of checkboxes ticked by user
	 * 
	 * Indexes (DRN, THIRD, etc.) need to match the labels in the forum_labels array
	 */
	this.previous_forums = {
		DRN: false,
		THIRD: false,
		BIOG: false,
		FRING: false,
		NEUTRAL: false,
		ORIGINAL: false,
		RELIABLE: false,
		WIKIQUETTE: false,
		RFC: false,
		MED_CABAL: false,
		RFM: false,
		RFA: false
	}

	//Array of links for the actions taken
        this.forum_links = { }
 
	//Title of Article
	this.article_title = '';
 
	//Description of dispute
	this.dispute_description = '';
 
	//Desired Outcome
	this.desired_outcome = '';

	//Page where the report will be posted
	this.post_link = '';
 
	// Draw radio buttons to select Dispute Type
	this.drawDisputeTypeForm = function() {
		//Appends to $("#drwContent1")

		var dispute_types = this.dispute_types; //array of choices
 
		var list = $("<ul></ul>", {
			id: 'radio_types'
		});
 
		for (drwtype in dispute_types) {
 
			var inputbox = $("<input></input>", {
				type: "radio",
				id: "for"+drwtype,
				name: "drwTypes",
				value: drwtype,
				checked: (this.dispute_type == drwtype),
				onClick: "setDisputeType(this)",
			});
 
			var label = $("<label></label>", {
				for: "for"+drwtype,
				text: dispute_types[drwtype]
			});


			var item = $("<li></li>");
 
			item.append(inputbox);
			item.append(label);
			list.append(item);
		}
 
		$("#drwContent1").append(list);
	}
 
	// Draw checkboxes to indicate actions
	this.drawResolveStepsForm = function() {
		//Appends for to $("#drwContent1")
 
		var labels = this.forum_labels;
		var forums = this.previous_forums;
 
		var list = $("<ul></ul>", {
			id: "forums"
		});
 
		for (place in labels) {
			var inputbox = $("<input></input>", {
				type: "checkbox",
				id: "forForum"+place,
				name: "drwForum"+place,
				value: place,
				checked: forums[place],
				onClick: "setDisputeForum(this)",
			});
 
			var label = $("<label></label>", {
				for: "forForum"+place,
				html: labels[place]
			});
 
                   	var linkbox = $("<input></input>", {
                                type: "text",
                                size: 45,
                                name: place,
                                onchange: "updateLink(this)",
                        });

                        var linkdiv = $("<div></div>", {
                                id: "link_"+place,
                                style: "display: none"
                        });

			linkdiv.html("<label>link:</label>");
                        linkdiv.append(linkbox);

			var item = $("<li></li>");
 
			item.append(inputbox);
			item.append(label);
                        item.append(linkdiv);
			list.append(item);
		}
 
		$("#drwContent1").append(list);
	}
 
	// Draw text box
	this.drawTitleInput = function() {
		//Appends to $("#drwContent1")
 
		$("#drwContent1").append("<h2>Article Title</h2>");
 
		var inputbox = $( document.createElement('input') );
		inputbox.attr({
			type: "text",
			name: "article_title",
			onChange: "updateTitle(this)",
			value: this.article_title
		});
 
		$("#drwContent1").append( inputbox );
	}
 
	// Draw description textarea
	this.drawDescriptionInput = function() {
		//Appends to $("#drwContent1")
 
		$("#drwContent1").append("<h2>Dispute Description</h2>");
		$("#drwContent1").append("<p>(Instructions) Lorem ipsum dolor sit amet, vitae dolor. Diam mauris nec, malesuada vestibulum neque. Nec lectus at est nonummy ornare, suscipit turpis purus pellentesque tellus, nunc tortor mauris scelerisque massa montes.</p>");
 
		var desc = $( document.createElement('textarea') );
		desc.attr({
			rows: 20,
			cols: 60,
			maxlength: 2000,
			onChange: "updateDescription(this)",
			onkeyup: "updateDescriptionCount(this)"
		});
		desc.text( this.dispute_description );
 
		$("#drwContent1").append( desc );
 
		$("#drwContent1").append( $("<p id='taCount'>"+this.dispute_description.length+"/2000</p>") );
	}
 
	// Draw desired outcome textarea
	this.drawOutcomeInput = function() {
		//Appends to $("#drwContent1")
 
		$("#drwContent1").append("<h2>Desired Outcome</h2>");
		$("#drwContent1").append("<p>(Instructions) Lorem ipsum dolor sit amet, vitae dolor. Diam mauris nec, malesuada vestibulum neque. Nec lectus at est nonummy ornare, suscipit turpis purus pellentesque tellus, nunc tortor mauris scelerisque massa montes.</p>");
 
		var outcome = $( document.createElement('textarea') );
		outcome.attr({
			rows: 8,
			cols: 60,
			maxlength: 1000,
			onChange: "updateOutcome(this)",
			//onkeyup: "updateDescriptionCount(this)"
		});
		outcome.text( this.desired_outcome );
 
		$("#drwContent1").append( outcome );
 
		//$("#drwContent1").append( $("<p id='taCount'>"+this.dispute_description.length+"/2000</p>") );
	}
 
	// Draw the summary content
	this.drawDRWSummary = function() {
		//Appends to $("#drwContent1")
 
		//On Talk Page
		$("#drwContent1").append("<h2>Discussed on Talk Page</h2>");
		$("#drwContent1").append("<p>"+( (this.talkpage)?'yes':'no' )+"</p>");
 
		//Dispute Type
		$("#drwContent1").append("<h2>Dispute Type</h2>");
		$("#drwContent1").append( $("<p></p>").text( ""+this.dispute_types[this.dispute_type]+" ("+this.dispute_type+")" ) );
 
		//Resultion Step
		$("#drwContent1").append("<h2>Previous Forums</h2>");
 
		var labels = this.forum_labels;
		var forums = this.previous_forums;
		var links = this.forum_links;

		var list = $("<ul></ul>", {
			id: "forums"
		});
 
		for (place in labels) {
			if ( forums[place] ) {
				var item = $("<li></li>");
				item.text(labels[place]+" : "+links[place]);
				list.append(item);
			}
		}
 
		$("#drwContent1").append(list);
 
		//Article Title
		$("#drwContent1").append("<h2>Article Title</h2>");
		$("#drwContent1").append( $("<p></p>").text(this.article_title) );
 
		//Dispute Description
		$("#drwContent1").append("<h2>Description of Dispute</h2>");
		$("#drwContent1").append( $("<p></p>").text(this.dispute_description) );
 
		//Desired Outcome
		$("#drwContent1").append("<h2>Desired Outcome</h2>");
		$("#drwContent1").append( $("<p></p>").text(this.desired_outcome) );
 
	}
 
	// Generate a WikiText string, representing the report.
	// Returns a string of wikitext
	this.getWikitextReport = function() {
		//Returns string of wikitext for submission to DR page
		var report = '';
 
		//On Talk Page
		report += "=== Discussed on Talk Page ===\n";
		report += ": "+( (this.talkpage)?'yes':'no' )+"\n";
 
		//Dispute Type
		report += "=== Dispute Type ===\n";
		report += ": "+this.dispute_types[this.dispute_type]+" ("+this.dispute_type+")\n";
 
		//Resultion Step
		report += "=== Previous Forums ===\n";
 
		var labels = this.forum_labels;
		var steps = this.previous_forums;
		var links = this.forum_links;
		for (step in labels) {
			if ( steps[step] ) {
				report += "* "+labels[step]+" : "+links[step]+"\n";
			}
		}
 
		//Article Title
		report += "=== Article Title ===\n";
		report += ": "+this.article_title+"\n";
 
		//Dispute Description
		report += "=== Description of Dispute ===\n";
		report += this.dispute_description+"\n";
 
		//Desired Outcome
		report += "=== Desired Outcome ===\n";
		report += this.desired_outcome+"\n";
 
		return report;
	}
 
	// Returns an html string, representing the progress bar, based on the
	// objects state.
	this.getProgressBar = function() {
		var s1_active =( this.wizard_step==1 )?' pr-active':'';
		var s2_active =( this.wizard_step==2 )?' pr-active':'';
		var s3_active =( this.wizard_step==3 )?' pr-active':'';
		var s4_active =( this.wizard_step==4 )?' pr-active':'';
 
 
		var signupbox = '<ul id="signuptopbox">';
		signupbox += '<li class="s1'+s1_active+'"><span class="pr-number">1</span><span>Preliminary</span></li>';
		signupbox += '<li class="pr-spacer'+s1_active+'"><div></div></li>';
 
		signupbox += '<li class="s2'+s2_active+'"><span class="pr-number">2</span><span>Dispute Type</span></li>';
		signupbox += '<li class="pr-spacer'+s2_active+'"><div></div></li>';
 
		signupbox += '<li class="s3'+s3_active+'"><span class="pr-number">3</span><span>Description</span></li>';
		signupbox += '<li class="pr-spacer'+s3_active+'"><div></div></li>';
 
		signupbox += '<li class="s4'+s4_active+'"><span class="pr-number">4</span><span>Summary</span></li>';
		signupbox += '<li class="pr-spacer'+s4_active+'"><div></div></li>';
 
		signupbox += '</ul>';
 
		return signupbox;
	}
 
	this.getArticleTitle = function() {
		return this.article_title;
	}
 
	this.getDisputeDescription = function() {
		return this.dispute_description;
	}
 
}
 
/**
 * The various "show...()" functions display each of the 'screens' in the wizard
 */
 
function showStep1() {
 
	gDRW.wizard_step = 1;
 
	$("#drwProgressBar").html( gDRW.getProgressBar() );
 
	$("#drwContent1").html('<h2>DR test</h2> <p> blah blah blaht ewjtlk;jsglkrw. <br><br>Have you attempted to resolve this dispute on an article or talk page yet? </p>');
 
	var buttons = '<a href="javascript:yesClick()" class="button1">Yes (Next)</a>';
	buttons += ' <a href="javascript:showCancel()" class="button1">No (Cancel)</a>';
	$("#drwButtons").html(buttons);
}
 
function showStep2() {
 
	gDRW.wizard_step = 2;
	$("#drwProgressBar").html( gDRW.getProgressBar() );
 
	$("#drwContent1").html('<h2>Dispute Type</h2><p>Which of these best describes your dispute? Lorem ipsum dolor sit amet, vitae dolor.</p>');
 
	gDRW.drawDisputeTypeForm();
 
	$("#drwContent1").append('<h2>Previous Forums</h2><p>Have you tried any other ways to resolve this? Lorem ipsum dolor sit amet, vitae dolor.</p>');
 
	gDRW.drawResolveStepsForm();
 
	var buttons = '<a href="javascript:showStep1()" class="button1">Back</a>';
	buttons += ' <a href="javascript:showCancel()" class="button1">Cancel</a>';
	buttons += ' <a href="javascript:showStep3()" class="button1">Next</a>';
 
	$("#drwButtons").html(buttons);
}
 
function showStep3() {
 
	gDRW.wizard_step = 3;
	$("#drwProgressBar").html( gDRW.getProgressBar() );
 
	$("#drwContent1").html('<p>(instructions) Lorem ipsum dolor sit amet, vitae dolor. Diam mauris nec, malesuada vestibulum neque. Nec lectus at est nonummy ornare, suscipit turpis purus pellentesque tellus, nunc tortor mauris scelerisque massa montes.</p>');
 
	gDRW.drawTitleInput();
 
	gDRW.drawDescriptionInput();
 
	gDRW.drawOutcomeInput();
 
	var buttons = '<a href="javascript:showStep2()" class="button1">Back</a>';
	buttons += ' <a href="javascript:showCancel()" class="button1">Cancel</a>';
	buttons += ' <a href="javascript:showStep4()" class="button1">Next</a>';
 
	$("#drwButtons").html(buttons);
}
 
function showStep4() {
 
	gDRW.wizard_step = 4;
	$("#drwProgressBar").html( gDRW.getProgressBar() );
 
	$("#drwContent1").html('<p>(instructions) Lorem ipsum dolor sit amet, vitae dolor. Diam mauris nec, malesuada vestibulum neque. Nec lectus at est nonummy ornare, suscipit turpis purus pellentesque tellus, nunc tortor mauris scelerisque massa montes.</p>');
 
	gDRW.drawDRWSummary();
 
 
	var buttons = '<a href="javascript:showStep2()" class="button1">Edit</a>';
	buttons += ' <a href="javascript:showCancel()" class="button1">Cancel</a>';
	buttons += ' <a href="javascript:doSubmit()" class="button1">Save</a>';
 
	$("#drwButtons").html(buttons);
}
 
function showResult( status ) {
 
	$("#drwProgressBar").text('');
 
	if ( status == 'ok' ) {
		//Show thankyou
		$("#drwContent1").html('<h2>Success!</h2><p>Thank you for the report.</p>');
		$("#drwContent1").append( $("<a>Go to the report page</a>").attr({ href: wgArticlePath.replace('$1', gDRW.post_link) }) );
		$("#drwButtons").html('');
	} else if ( status == 'error' ) {
		//Show error
		$("#drwContent1").html('<h2>Error</h2><p>Sorry, there was an error attaching your report. Maybe try it again?</p>');
		$("#drwButtons").html('<a href="javascript:showStep4()" class="button1">Back to Summary</a>');
	} else {
		$("#drwContent1").html('<h2>Error</p><p>Something went wrong!</p>');
		$("#drwButtons").html('');
	}
}
 
 
function showCancel() {
 
	gDRW.wizard_step = 0;
	$("#drwProgressBar").html( gDRW.getProgressBar() );
 
	$("#drwContent1").html('<p>Lorem ipsum dolor sit amet, vitae dolor.</p>');
	$("#drwButtons").html('<a href="javascript:showStep1()" class="button1">Start Over</a>');
}
 
 
/**
 * Do the final step of the DRW and post the report to the appropriate page
 */
function doSubmit() {
 
	//Notify user that we are doing the update
	$("#drwProgressBar").html( '<div style="text-align: center"><img alt="saving report" src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif"></img></div>' );
	$("#drwContent1").html('<p>Posting Report....</p>');
 
	//Decide on the page to update
	var DRPage = 'User:CSteipp/DRW/Reports'; //The default page to post this
 
	/**
	 * Decide where to post this dispute resolution report. In the end, DRPage needs to hold
	 * the title of the page where we post the report.
	 * 
	 * gDRW.dispute_type is set the short name (index) of the user-selected dispute type
	 * gDRW.previous_forums['xxx'] will be true if the use ticked the 'xxx' checkbox in the previous forums
	 */
	if ( gDRW.dispute_type == 'content' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/One';

		if ( gDRW.previous_forums['DRN'] ) {
			DRPage = 'User:CSteipp/DRW/Reports/Two';
		} else if ( gDRW.previous_forums['THIRD'] ) {
			DRPage = 'User:CSteipp/DRW/Reports/Three';
		}
 
	} else if ( gDRW.dispute_type == 'guide' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Two';
 
	} else if ( gDRW.dispute_type == 'source' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'three' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'four' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'five' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'six' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'seven' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	} else if ( gDRW.dispute_type == 'eight' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	}  else if ( gDRW.dispute_type == 'nine' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	}  else if ( gDRW.dispute_type == 'ten' ) {
 
		DRPage = 'User:CSteipp/DRW/Reports/Three';
 
	}  else if ( gDRW.dispute_type == 'unknown' ) {

		DRPage = 'User:CSteipp/DRW/Reports';
 
		if ( gDRW.previous_forums['BIOG'] ) {
			DRPage = 'User:CSteipp/DRW/Reports/Two';
		} else if ( gDRW.previous_forums['RELIABLE'] ) {
			DRPage = 'User:CSteipp/DRW/Reports/Three';
		}
 
	}
 
	//Set the post-page on the DRW object
	gDRW.post_link = DRPage;

	//Compose Report
	var report = gDRW.getWikitextReport();
 
	//Add new section to designated page
	var edittoken = mw.user.tokens.get( 'editToken' );
 
	var date=new Date();
	var dateString=date.toLocaleDateString();
	var summary = 'DRW Report - ' + dateString;
 
	addNewSection( DRPage, summary, report, edittoken );
}
 
 
/**
 * Event handler functions
 */
function setDisputeForum( box ) {
	//alert("Setting "+gDRW.forum_labels[box.value]+" to true");
	gDRW.previous_forums[box.value] = box.checked;
	
	var linkboxid = "link_"+box.value;

	if ( box.checked ) {
		$("#"+linkboxid).show();
	} else {
		$("#"+linkboxid).hide();
	}
}
 
function setDisputeType( radio ) {
	gDRW.dispute_type = radio.value;
}
 
function updateTitle( textbox ) {
	gDRW.article_title = textbox.value;
}
 
function updateDescription( textbox ) {
	gDRW.dispute_description = textbox.value;
}
 
function updateOutcome( textbox ) {
	gDRW.desired_outcome = textbox.value;
}
 
function updateDescriptionCount( textbox ) {
	$("#taCount").text(""+textbox.value.length+" / 2000");
}

function updateLink( box ) {
        gDRW.forum_links[box.name] = box.value;
}
 
function yesClick() {
	gDRW.talkpage = true;
	showStep2();
}
 
/**
 * Taken almost verbatim from http://www.mediawiki.org/wiki/API:Edit
 */
function addNewSection( pagetitle, summary, content, editToken ) {
    $.ajax({
        url: mw.util.wikiScript( 'api' ),
        data: {
            format: 'json',
            action: 'edit',
            title: pagetitle,
            section: 'new',
            summary: summary,
            text: content,
            token: editToken
        },
        dataType: 'json',
        type: 'POST',
        success: function( data ) {
            if ( data && data.edit && data.edit.result == 'Success' ) {
                //window.location.reload(); // reload page if edit was successful
		showResult( 'ok' );
            } else if ( data && data.error ) {
                alert( 'Error: API returned error code "' + data.error.code + '": ' + data.error.info );
		showResult( 'error' );
            } else {
                alert( 'Error: Unknown result from API.' );
		showResult( 'error2' );
            }
        },
        error: function( xhr ) {
            alert( 'Error: Request failed.' );
        }
    });
}
 
 
/**
 * Initialization function. Test if we should place the DRW on the current page.
 * Looks for a <div id="myDRW"></div> on the page.
 */
 
function runDRW() {
 
	if ($('#myDRW').length){
 
                importStylesheet('User:CSteipp/DRW.css'); //CSS Styles for the DRW
 
       		//Setup the App's workspace
		$("#myDRW").append($('<div id=drw_main style="height: 600px; width: 800px; border : 2px black solid;"></div>'));
		$("#drw_main").css('height', '1000px');
		$("#drw_main").append('<div style="width: 750px; padding: 20px 25px; height: 30px; text-align: center" id="drwProgressBar"></div>');
		$("#drw_main").append('<div style="width: 700px; padding: 25px 50px" id="drwContent1"></div>');
		$("#drw_main").append('<div style="width: 700px; padding: 10px 50px; text-align: center" id="drwButtons"></div>');
 
		showStep1(); //Show the first page
	}
};
 
 
var gDRW = new drw();
 
$( document ).ready( runDRW() );