Meta:AddMe

AddMe is a page gadget that allows a user to join a proposal, project, or idea.

Overview

• Endorse a grant with a comment.
• Join a grant by taking a job offered from the creator.

Development

Note: this gadget is currently configured to work only in the Grants and User namespace on Meta.wikimedia.org.

• Gadget-addMe - Gadget definition page
• Gadget-addMe.js – The gadget code
• Gadget-addMe.css – The styling/CSS of the gadget
• Configuration file for all current deployments.
• Gadget interface text for all current deployments.
• Addme, The code on GitHub.

Status

Deployed (beta). Incorporated into Probox on Grantmaking portals.

Participants

• User:Jeph paul
• User:Jmorgan (WMF)
• User:Heather (WMF)
• User:Sbouterse (WMF)

Deployments

• IdeaLab
• Project and Event Grants program
• Individual Engagement Grants program
• Learning Pattern Library
• Travel and Participation Support Grants program

Origin

This tool was developed as part of IdeaLab April August 2014 sprint

Use

Addme & Probox

The gadget is triggered when the buttons 'Join' or 'Endorse' in Probox (the grants infobox) is clicked. The gadget looks for button classes 'wp-join-button','wp-endorse-button' to show the join & endorse screen respectively. These button classes are baked into Probox's code.

Endorse project

AddMe endorse screen

A user can endorse a grant and add a comment. The "endorse" button is present in the infobox, on clicking it, a popup opens, and the comment can be entered. The comment is saved in a section defined in Meta:AddMe/Config on clicking the save/endorse button in the popup. The pages refresh and the comment is scrolled into view. The strings in the gadget can be configured at Meta:AddMe/InterfaceText.

Join project

AddMe join screen

A grant creator can add open roles in the infobox. Others can then join the grant in one of those roles. On clicking the "join" button in the infobox a popup opens. The popup has a dropdown where a role can be selected. There is also a textbox where a comment has to be entered. On clicking the join button in the popup, the user is added to the selected role in the infobox & the comment shows up in the section defined in Meta:AddMe/Config. The roles need to be added in the roles section in Meta:AddMe/Config to appear in the dropdown. The strings in the gadget can be configured at Meta:AddMe/InterfaceText

Configuration

There are two configuration files, Meta:AddMe/InterfaceText, which has the interface messages and Meta:AddMe/Config, which has the config for the tool.

In the example below if we changed the string that says 'Endorse this idea' with 'Support this idea' the gadget's title in the endorse version would reflect the change.

{
    "endorse": {
        "IEG": {
            "title": "Endorse this idea",
            "description": "Why do you support this idea?",
            "placeholder": "Click here to add your comment",
            "button-submit": "Endorse",
            "button-cancel": "Cancel",
            "feedback": "Thank you for adding your endorsement!",
            "message-1": "Your signature will be automatically added to your comment.",
            "error": "There was an error, please try again"
        }
    }
}

Custom interface messages for other grant types can be enabled by copying the above dictionary in full and editing the values to be changed. The key has to be the name of the set of pages in the namespace Grants: Eg: https://meta.wikimedia.org/wiki/Grants:IdeaLab/Build/Tools, here it would be just 'Idealab' or in the case of meta.wikimedia.org/wiki/Grants:IEG, it would be 'IEG'

Let's say the dict looks like

{
    "endorse": {
        "IEG": {
            "title": "Endorse this project", 
            "message-description": "Why do you support this project?", 
            "placeholder-comment": "Click here to add your comment", 
            "button-submit": "Endorse",
            "button-cancel": "Cancel", 
            "message-feedback": "Thank you for adding your endorsement!", 
            "section-header": "Endorsements", 
            "message-signature": "Your signature will be automatically added to your comment.", 
            "error-save": "There was an error, please try again", 
            "error-login":"You are not logged in"
        }
    }
}

So on adding Idealab it would look like

{
    "endorse": {
        "IEG": {
            "title": "Endorse this project", 
            "message-description": "Why do you support this project?", 
            "placeholder-comment": "Click here to add your comment", 
            "button-submit": "Endorse",
            "button-cancel": "Cancel", 
            "message-feedback": "Thank you for adding your endorsement!", 
            "section-header": "Endorsements", 
            "message-signature": "Your signature will be automatically added to your comment.", 
            "error-save": "There was an error, please try again", 
            "error-login": "You are not logged in"
        },
        "IdeaLab": {
            "title": "Endorse this idea", 
            "message-description": "Why do you support this idea?", 
            "placeholder-comment": "Click here to add your comment", 
            "button-submit": "Endorse",
            "button-cancel": "Cancel", 
            "message-feedback": "Thank you for endorsing!", 
            "section-header": "Endorsements", 
            "message-signature": "Your signature will be automatically added to your comment.", 
            "error-save": "Oops there was an error", 
            "error-login": "You are not logged in"
        }
    }
}

Similarly, the interface messages for the join gadget are stored in var joinInterfaceMessages in the same file. To add new roles to the dropdown, the roles have to be added to the infobox and to the joinInterfaceMessages as well. E.g., let's say it looks like this

 
{
    "join": { 
        "default": { 
            "title": " Join this project", 
            "placeholder-role": " Please select a role", 
            "placeholder-comment": " Click here to add your comment about how you'd like to participate", 
            "button-join": " Join", 
            "button-cancel": " Cancel", 
            "error-save": " There was an error, please try again", 
            "error-login": "You are not logged in", 
            "message-signature": " Your signature will be automatically added to your comment.", 
            "message-feedback": " Thank you for joining this project!", 
            "message-description": "How would you like to help this project?"
        "roles": { 
            "researcher": " Researcher", 
            "developer": " Developer", 
            "volunteer": " Volunteer", 
            "designer": " Designer", 
            "advisor": " Advisor", 
            "project_manager": " Project Manager", 
            "community_organizer": " Community Organizer"
        }
    }
}

To add a new role called statistician, we would add a new entry under "roles" with statistician as the key and Statistician as the value. The key has to match the open entry in the infobox.

 
        "default": { 
            "title" :" Join this project", 
            "placeholder-role": " Please select a role", 
            "placeholder-comment": " Click here to add your comment about how you'd like to participate", 
            "button-join": " Join", 
            "button-cancel": " Cancel", 
            "error-save": " There was an error, please try again", 
            "error-login": "You are not logged in", 
            "message-signature": " Your signature will be automatically added to your comment.", 
            "message-feedback": " Thank you for joining this project!", 
            "message-description": "How would you like to help this project?", 
            "roles": {
                "researcher": " Researcher", 
                "developer": " Developer", 
                "volunteer": " Volunteer", 
                "designer": " Designer", 
                "advisor": " Advisor", 
                "project_manager": " Project Manager", 
                "community_organizer": " Community Organizer", 
                "statistician": "Statistician"
            }
        }