MediaWiki talk:DRN-wizard.js

//User statements
        var currentUser = mw.config.get( 'wgUserName' );
        for (var userIndex = 0; userIndex < userArray.length; userIndex++)
                {
        if ( userArray[userIndex] != currentUser) {
               report += "==== Summary of dispute by " + userArray[userIndex]+" ====\n<div style=\"font-size:smaller\">Please keep it brief - less than 2000 characters if possible, it helps us help you quicker.</div>\n\n";
            }
                }
</nowiki></code>

The entire code is:

<code><nowiki>/**
 * 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;
 
    //Title of Article
    this.article_title = '';
 
    //Description of dispute
    this.dispute_description = '';
    
    //Involved users
    this.involved_users = mw.config.get( 'wgUserName' ) + ', ';
    
    //Previous forums
    this.previous_forums = '';
 
    //Desired Outcome
    this.desired_outcome = '';

    //Page where the report will be posted
    this.post_link = '';
 
    // Draw text box
    this.drawTitleInput = function() {
        //Appends to $("#drwContent1")

        $("#drwContent1").append("<h3>Location of dispute</h3>");
         $("#drwContent1").append("<p>What is the location of this dispute? If there are multiple forums, list the main one and describe the others in the dispute description.</p>");

        var inputbox = $( document.createElement('input') );
        inputbox.attr({
            type: "text",
            name: "article_title",
            value: this.article_title
        });

        inputbox.change( function() {  gDRW.article_title = this.value.replace("https://", "http://").replace("http://en.wikipedia.org/wiki/", "").replace("_", " ").replace("[[", '').replace("]]", ''); } )

        $("#drwContent1").append( inputbox );
    }
 
    // Draw description textarea
    this.drawDescriptionInput = function() {
        //Appends to $("#drwContent1")
 
        $("#drwContent1").append("<h3>Dispute overview</h3>");
        $("#drwContent1").append("<p>Can you give us a quick explanation of what is going on? What is the issue you are bringing to dispute resolution?</p>");
 
        var desc = $( document.createElement('textarea') );
        desc.attr({
            rows: 6,
            cols: 60,
            maxlength: 2000
        });
        desc.text( this.dispute_description );
 
        desc.change( function() { gDRW.dispute_description = this.value; } );
        desc.bind('keyup', function() { $("#taCount").text(""+this.value.length+" / 2000"); } );

        $("#drwContent1").append( desc );
 
        $("#drwContent1").append( $("<p id='taCount'>"+this.dispute_description.length+"/2000</p>") );
    }

    // Involved users
    this.drawUserInput = function() {
        //Appends to $("#drwContent1")

        $("#drwContent1").append("<h3>Users involved</h3>");
        $("#drwContent1").append("<p>Who else is involved in the dispute? Enter them into the below box, without the User:, separated by commas: e.g. Example, Example2. (Please remember to notify them of this discussion)</p>");

        var inputbox = $( document.createElement('input') );
        inputbox.attr({
            type: "text",
            name: "involved_users",
            value: this.involved_users
        });

        inputbox.change( function() { gDRW.involved_users = this.value; } );

        $("#drwContent1").append( inputbox );
    }

    // Draw previous forums
    this.drawPreviousInput = function() {
        //Appends to $("#drwContent1")

        $("#drwContent1").append("<h3>Resolving the dispute </h3>");
        $("#drwContent1").append("<p>What other steps, if any, have you tried to resolve this dispute?</p>");

        var desc = $( document.createElement('textarea') );
        desc.attr({
            rows: 3,
            cols: 60,
            maxlength: 500
        });
        desc.text( this.previous_forums );

        desc.change( function() { gDRW.previous_forums = this.value; } );
        desc.bind('keyup', function() { $("#pcCount").text(""+this.value.length+" / 500"); });
 
        $("#drwContent1").append( desc );
 
        $("#drwContent1").append( $("<p id='pcCount'>"+this.previous_forums.length+"/500</p>") );
    }
 
     // Draw outcome textarea
    this.drawOutcomeInput = function() {
        //Appends to $("#drwContent1")

        $("#drwContent1").append("<p>How do you think we can help resolve the dispute?</p>");

        var desc = $( document.createElement('textarea') );
        desc.attr({
            rows: 5,
            cols: 60,
            maxlength: 500
        });
        desc.text( this.desired_outcome );

        desc.change( function() { gDRW.desired_outcome = this.value; } );
        desc.bind('keyup', function() { $("#ocCount").text(""+this.value.length+" / 500"); });

        $("#drwContent1").append( desc );
        $("#drwContent1").append( $("<p id='ocCount'>"+this.desired_outcome.length+"/500</p>") );
    }
 
    // Draw the summary content
    this.drawDRWSummary = function() {
        //Appends to $("#drwContent1")
 
        //$("#drwContent1").append(list);
 
        //Article Title
        $("#drwContent1").append("<h3>Location of dispute</h3>");
        $("#drwContent1").append( $("<p></p>").text(this.article_title) );
 
        //Dispute Description
        $("#drwContent1").append("<h3>Dispute overview</h3>");
        $("#drwContent1").append( $("<p></p>").text(this.dispute_description) );
        
        //Users involved
        $("#drwContent1").append("<h3>Users involved</h3>");
        $("#drwContent1").append( $("<p></p>").text(this.involved_users) );
        
        //Previous forums
        $("#drwContent1").append("<h3>Resolving the dispute</h3>");
        $("#drwContent1").append("<h4>Other steps if any, you have tried to resolve this dispute</h4>");
        $("#drwContent1").append( $("<p></p>").text(this.previous_forums) );
        
        //Desired Outcome
        $("#drwContent1").append("<h4>How you think we can help resolve the dispute?</h4>");
        $("#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 = "{{DR case status}}\n{{drn filing editor|{{subst:" + "REVISIONUSER}}|~~" + "~~" + "~}}\n{{subst:" + "DNAU|14}}<!-- PLEASE REMOVE THE PREVIOUS COMMENT WHEN CLOSING THIS THREAD. (Otherwise the thread won't be archived until the date shown.) -->\n\n";
        
        //On Talk Page
        report += "<span style=\"font-size:110%\">'''Have you discussed this on a talk page?'''</span>\n";
        report += "\n"+( (this.talkpage)?'Yes, I have discussed this issue on a talk page already.':'no' )+"\n\n";
 
        //Article Title
        report += "<span style=\"font-size:110%\">'''Location of dispute'''</span>\n";
        var articleArray = this.article_title.split(',');
        for (var articleIndex = 0; articleIndex < articleArray.length; articleIndex++)
        {
            report += "* {{pagelinks|" + articleArray[articleIndex]+"}}\n";
        }
        
        //Involved users
        report += "<span style=\"font-size:110%\">'''Users involved'''</span>\n";
        var userArray = this.involved_users.split(',');
        for (var userIndex = 0; userIndex < userArray.length; userIndex++)
        {
            report += "* {{User|" + userArray[userIndex]+"}}\n";
        }
        
        //Dispute Description
        report += "<span style=\"font-size:110%\">'''Dispute overview'''</span>\n";
        report += "\n"+ this.dispute_description+"\n\n";
        
        //Previous forums
        report += "<span style=\"font-size:110%\">'''Have you tried to resolve this previously?'''</span>\n";
        report += "\n"+ this.previous_forums+"\n\n";
 
        //Desired Outcome
        report += "<span style=\"font-size:110%\">'''How do you think we can help?'''</span>\n";
        report += "\n" + this.desired_outcome+"\n\n";
  
  //User statements
        var currentUser = mw.config.get( 'wgUserName' );
        for (var userIndex = 0; userIndex < userArray.length; userIndex++)
                {
        if ( userArray[userIndex] != currentUser) {
               report += "==== Summary of dispute by " + userArray[userIndex]+" ====\n<div style=\"font-size:smaller\">Please keep it brief - less than 2000 characters if possible, it helps us help you quicker.</div>\n\n";
            }
                }
        
        //Discussion
        report += "=== " + this.article_title + " discussion ===\n<div style=\"font-size:smaller\">Please keep discussion to a minimum before being opened by a volunteer. Continue on article talk page if necessary.</div>";
        
        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 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>Description</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>Summary</span></li>';
        signupbox += '<li class="pr-spacer'+s3_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>Request dispute resolution</h2> <p> Hi there. This form can be used to file a request at the Dispute Resolution Noticeboard. - a process for resolving a dispute over article content between two or more editors. It is unable to address disputes primarily concerning user conduct - they should be discussed with the users involved first, and failing that directed <a href="http://en.wikipedia.org/wiki/WP:ANI">here.</a> If you have any questions please ask one of our <a href="http://en.wikipedia.org/wiki/WP:DRVOLUNTEERS">volunteers</a> for guidance.\
\
\
<h3>In brief: dispute resolution should be used when you:</h3>\
\
<ul>\
<li>Have a dispute with another editor and need help resolving it</li>\
<li>Are willing to discuss the issues in a calm and civil manner</li>\
<li>Are open to the idea of compromising with the other editors to resolve the dispute</li>\
</ul>\
\
<h3>This process can:</h3>\
<ul>\
<li>Help provide suggestions on content</li>\
<li>Frame discussions and offer support for parties that want to work towards a compromise</li>\
</ul>\
\
<h3>This process cannot:</h3>\
<ul>\
<li>Block other users from editing (either everywhere or specific pages)</li>\
<li>Remove content that you don\'t like from articles</li>\
<li>Force another editor to do something</li>\
<li>Address disputes that are currently under discussion somewhere else (such as <a href="http://enwp.org/WP:RFC">Requests for Comment</a>, <a href="http://enwp.org/WP:M">Mediation</a> or <a href="http://enwp.org/WP:RFAR">Arbitration</a>).</li>\
</p>\
 <br>Has this issue been discussed extensively on the article talk page? (If you don\'t know what an article talk page is, answer "Not yet". </p>');
 
    var buttons = '<a href="javascript:yesClick()" class="button1">Yes, it has.</a>';
    buttons += ' <a href="javascript:showCancel()" class="button1">Not yet.</a>';
    $("#drwButtons").html(buttons);
}
 
 
function showStep2( errorMsg ) {

    gDRW.wizard_step = 2;
    $("#drwProgressBar").html( gDRW.getProgressBar() );

    var intro = '';

    if ( typeof errorMsg !== 'undefined' ) {
        intro = '<p class="warning">' + errorMsg + '</p>';
    }

    intro += '<p>Here, briefly describe the current situation - where the dispute is happening, what is the dispute and what are you hoping to get out of dispute resolution. (Basically, how can we help resolve the issue?)<br><br>Take note of the character limits as they are there to help focus the discussion.</p>';

    $("#drwContent1").html( intro );
 
    gDRW.drawTitleInput();
 
    gDRW.drawDescriptionInput();
    
    gDRW.drawUserInput();
    
    gDRW.drawPreviousInput();
    
    gDRW.drawOutcomeInput();
 
    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() {
 
    var inputErrors = [];

    //Check that vars were filled
    if (gDRW.article_title == '') {
        inputErrors.push("Location of dispute");
    }
    if (gDRW.dispute_description == '') {
        inputErrors.push("Dispute overview");
    }
    if (gDRW.previous_forums == '') {
        inputErrors.push("Previous steps");
    }
    if (gDRW.desired_outcome == '') {
        inputErrors.push("Desired outcome");
    }
    if ( inputErrors.length > 0 ) {
        return showStep2( 'All fields are required. Missing values for: '+inputErrors.join(', ') );
    }

    gDRW.wizard_step = 3;
    $("#drwProgressBar").html( gDRW.getProgressBar() );
 
    $("#drwContent1").html('<p>Here\'s a summary of what you\'ve told us. Quickly check that it\'s all correct before you submit your request, and we will file the dispute for you and give you a link to the discussion.</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('<h3>Success!</h3><p>Thank you for filing a request for dispute resolution</p>');
        $("#drwContent1").append( $("<a>Click here to go view your request.</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 request. Maybe try it again?</p>');
        $("#drwButtons").html('<a href="javascript:showStep3()" 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>It\'s best to discuss your concerns with the other users on the talk page of the article before seeking dispute resolution. You can find instructions on how to do this at <a href="http://en.wikipedia.org/wiki/WP:DISCUSSIT">this page,</a>\ or you can place <code><nowiki>{{helpme}}</nowiki></code> on <a href="http://enwp.org/Special:MyTalk">your own talk page</a>, and a volunteer will come by your page to help.<br><br> If you have already tried to discuss this issue already and have received <b>no</b> response from others, you may go back to the previous page and file a request - but this must only be done if you have attempted to discuss the issue first.</a>\</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 = 'Wikipedia:Dispute_resolution_noticeboard'; //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
     */
 
 
    //Set the post-page on the DRW object
    gDRW.post_link = DRPage + "#" + gDRW.article_title.replace(' ', '_');

    //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 = gDRW.article_title;
 
    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 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:Steven Zhang/DRW.css'); //CSS Styles for the DRW
 
               //Setup the App's workspace
                $("#myDRW").html('');
        $("#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() );
// JavaScript Document
// JavaScript Document