This script provides a UI that allows you to make and share themes for mTurk.com
// ==UserScript==
// @name mTurkThemes
// @namespace http://ericfraze.com
// @version 1.2
// @description This script provides a UI that allows you to make and share themes for mTurk.com
// @match https://www.mturk.com/*
// @resource cssfile https://magnilucent.github.io/mTurk-Themes/css/style.css?version=71234123
// @resource colpickcssfile https://magnilucent.github.io/mTurk-Themes/css/colpick.css?version=17
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_setClipboard
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @copyright 2014+, Eric Fraze
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @require https://greasyfork.org/scripts/1562-colpick-color-picker/code/colpick%20Color%20Picker.js?version=3858
// ==/UserScript==
// Add color picker CSS
GM_addStyle(GM_getResourceText("colpickcssfile"));
// The CSS used to apply the themes
var CSSText;
// Holds all the current color states
var variables;
// Groups the variables by color value
var colorGroups;
// Name of current theme
var currentTheme;
// Hiddden "theme" that holds the unsaved changes of a theme
// TODO: Make sure no one can name a name 'unsavedTheme'.
var unsavedTheme = "unsavedTheme";
// The version of the script on last save
var savedVariableVersion;
// The version of the script on last save
var currentVariableVersion = 5;
// List of all themes installed
var themeNames;
// Get last save script version
savedVariableVersion = GM_getValue('savedVariableVersion', -1);
// Check to see if there is a current theme. If not, this is probably the first run.
if (GM_getValue('mturk-current-theme', -1) === -1){
// Set to default theme if there is no current theme.
currentTheme = "Default";
}else{
// Get the current theme name.
currentTheme = GM_getValue('mturk-current-theme');
}
// Load theme names
if (GM_getValue('mturk-theme-names', -1) === -1){
themeNames = ['Default'];
}else{
themeNames = JSON.parse(GM_getValue("mturk-theme-names"));
}
/*****************************************
* Load current theme
******************************************/
// Set variables to defaults
resetVariables();
// Apply the theme
applyTheme(currentTheme);
// Wait for DOM to load
$(document).ready(function() {
// Add the text used to open the panel
$("#user_name_field").after(' | <span id="mturkthemeoptions" class="header_links">Theme Options</span>');
// Add the mTurkTheme panel
$("body").append('<div id="mturktheme" class=""></div>');
// Add the toolbar (import/save/undo buttons, ect)
addToolbar();
// Add the wrapper for the color list
$("#mturktheme").append('<div class="color-list-wrapper"></div>');
// Make the color picker plugin apply on "DOMNodeInserted"
bindColorPicker();
// Refresh the color list
refreshList();
});
// Toolbar has the buttons and theme select
function addToolbar(){
$("#mturktheme").append('<div class="toolbar"></div>');
$("#mturktheme .toolbar").append('<div title="New theme" class="icon add"></div>');
$("#mturktheme .toolbar").append('<select class="theme-select"></select>');
$("#mturktheme .toolbar").append('<div title="Import theme" class="icon import"></div>');
$("#mturktheme .toolbar").append('<div title="Export theme" class="icon export"></div>');
$("#mturktheme .toolbar").append('<div title="Hide" class="icon close"></div>');
$("#mturktheme .toolbar").append('<div title="Save theme" class="icon save"></div>');
$("#mturktheme .toolbar").append('<div title="Revert to last save" class="icon revert"></div>');
updateThemeList();
}
// Update the theme list in the toolbar
function updateThemeList() {
var unsavedFlag = "";
$("#mturktheme .toolbar .theme-select").empty();
for (var i in themeNames){
if ( (themeNames[i] == currentTheme) && (GM_getValue('mturk-theme-data-' + unsavedTheme, -1) !== -1) )
unsavedFlag = "*";
else
unsavedFlag = "";
$("#mturktheme .toolbar .theme-select").append('<option value="' + themeNames[i] + '">' + unsavedFlag + themeNames[i] + unsavedFlag +'</option>');
}
$("#mturktheme .toolbar .theme-select").val(currentTheme);
}
// Binds the color picker to each new color list element
function bindColorPicker() {
// Dynamically binds the color picker to each new color list item
$("#mturktheme .color-list-wrapper").bind('DOMNodeInserted', function() {
// Binds the colorpicker to a list item
$("#mturktheme .variable-group-wrapper .color").colpick({
// Sets the color of the color picker to the list item's color
onBeforeShow:function() {
var oldColor;
// Returns an RBG version of the background
oldColor = $(this).css('background-color');
// Single out the three colors
oldColor = oldColor.replace("rgb(", "").replace(")","");
// Make an array of the colors
oldColor = oldColor.split(", ");
// This function requires an object to be passed, so send one over.
$(this).colpickSetColor( { 'r':oldColor[0], 'g':oldColor[1], 'b':oldColor[2] } );
},
// Changes the color in the CSS and applies the changes
onSubmit:function(hsb,hex,rgb,el) {
var oldColor, variableName;
// Hides the color picker
$(el).colpickHide();
// Using the browser to make the old and new colors the same text value, then comparing them
$("#mturkthemeoptions").css("border-color", "#" + hex);
if ( $(el).css('background-color') != $("#mturkthemeoptions").css("border-color") ) {
// Check if the list item is a single item or a group item
if ($(el).parent('.variable-color').length) {
// Single items have the variable name as their name
variableName = $(el).attr('name');
// Need to get the color dynamically
oldColor = variables[getPropertyIndex(variableName)][1];
// Change the CSS
setProperty(variableName, oldColor, "#" + hex);
// Old code that updated the list item. May use this again when RefreshList is updated.
//$(this).css('background-color', newColor);
}else{
// Group items have the color value as their name
oldColor = $(el).attr('name');
// Changes the CSS of the entire group
setGroupProperty(oldColor, "#" + hex);
// Old code that updated the list item. May use this again when RefreshList is updated.
//$('#mturktheme .color[style="background-color: ' + color + ';"]').css('background-color', newColor);
//$(this).parent().children(".header").text(newColor);
}
// Adds the CSS to the page
applyCSS();
// Refreshes the color list
refreshList();
// Saves unsaved changes
// Seems ironic but they need to be saved so they persist through page loads.
saveTheme(unsavedTheme);
// Update the theme list to add the unsaved marker
updateThemeList();
}
}
});
});
}
$("#mturktheme .variable-color").live('mouseenter', function () {
var color = $(this).find(".color");
// Single items have the variable name as their name
variableName = $(color).attr('name');
// Need to get the color dynamically
oldColor = variables[getPropertyIndex(variableName)][1];
// Change the CSS
setProperty(variableName, null, "red");
// Adds the CSS to the page
applyCSS();
});
$("#mturktheme .variable-color").live('mouseleave', function () {
var color = $(this).find(".color");
// Single items have the variable name as their name
variableName = $(color).attr('name');
// Need to get the color dynamically
oldColor = variables[getPropertyIndex(variableName)][1];
// Change the CSS
setProperty(variableName, null, oldColor);
// Adds the CSS to the page
applyCSS();
});
// Clicking the text makes mTurkTheme slide
$("#mturkthemeoptions").live('click', function () {
$("#mturktheme").addClass("active");
});
// Expand group list items
$("#mturktheme .variable-group .expand").live('click', function () {
$(this).parents(".variable-group-wrapper").toggleClass("active");
});
// Add a theme
$("#mturktheme .toolbar .add").live('click', function () {
var themeName = prompt("Enter the theme name:");
addTheme(themeName);
});
// Import a theme
$("#mturktheme .toolbar .import").live('click', function () {
// Get the stringified variables
var newTheme = prompt("Paste in the theme!");
// Make sure the user didn't cancel.
if (newTheme != null) {
// Reset variables to defaults
resetVariables();
// Load variables from stringified variables
variables = JSON.parse(newTheme);
// Load changes in unsaved theme so they can be reverted
saveTheme(unsavedTheme);
// Apply the changes
// applyTheme will detect the unsaved changes and load theme
applyTheme(currentTheme);
// Refresh the color list
refreshList();
// Update the theme list to add the unsaved marker
updateThemeList();
}
});
// Switch themes when they are selected in the dropdown box
$("#mturktheme .toolbar .theme-select").live('change', function () {
// Delete unsaved changes
deleteTheme(unsavedTheme);
// Get the theme name
currentTheme = $("#mturktheme .toolbar .theme-select :selected").attr('value');
// Set the current theme
GM_setValue('mturk-current-theme', currentTheme);
// Apply the theme
applyTheme(currentTheme);
// Refresh color list
refreshList();
// Update the theme list to add the unsaved marker
updateThemeList();
});
// Export a theme
$("#mturktheme .toolbar .export").live('click', function () {
// Set the stringified variables to the clipboard
GM_setClipboard(JSON.stringify(variables));
alert("Theme copied to clipboard. Pastebin and share!");
});
// Revert to last save
$("#mturktheme .toolbar .revert").live('click', function () {
// Delete unsaved changes
deleteTheme(unsavedTheme);
// Apply last save
applyTheme(currentTheme)
// Refresh color list
refreshList();
// Update the theme list to add the unsaved marker
updateThemeList();
});
// Save theme
$("#mturktheme .toolbar .save").live('click', function () {
saveTheme(currentTheme);
deleteTheme(unsavedTheme);
// Update the theme list to add the unsaved marker
updateThemeList();
});
// Close the panel
$("#mturktheme .toolbar .close").live('click', function () {
$("#mturktheme").removeClass("active");
});
function resetVariables() {
// All of the color variables
variables = [
["hit-capsule-title-color", ""],
["hit-capsule-title-hover-color", ""],
["hit-capsule-title-visited-color", ""],
["hit-capsule-link-right-color", ""],
["hit-capsule-link-right-hover-color", ""],
["hit-capsule-link-right-visited-color", ""],
["hit-capsule-field-title-color", ""],
["hit-capsule-field-text-color", ""],
["header-link-color", ""],
["subtab-text-color", ""],
["separator-text-color", ""],
["searchbar-text-color", ""],
["whatis-link-color", ""],
["dashboard-and-workerID-text-color", ""],
["if-you-re-not-text-color", ""],
["link-default-color", ""],
["link-default-hover-color", ""],
["link-default-visited-color", ""],
["show-earnings-details-text-color", ""],
["button-background-color", ""],
["button-border-color", ""],
["button-text-color", ""],
["tab-text-color", ""],
["tab-background-color-inactive", ""],
["tab-border-color-inactive", ""],
["tab-background-color-active", ""],
["tab-border-color-active", ""],
["page-background-color", ""],
["tab-text-color-active", ""],
["page-header-background-color", ""],
["page-header-border-color", ""],
["default-text-color", ""],
["search-go-button-background-color", ""],
["search-go-button-border-color", ""],
["search-go-button-text-color", ""],
["table-body-background-color", ""],
["table-header-background-color", ""],
["table-header-text-color", ""],
["table-body-border-color", ""],
["table-list-text-color", ""],
["table-list-header-background-color", ""],
["table-list-header-text-color", ""],
["table-list-row-even-background-color", ""],
["table-list-row-border-color", ""],
["table-list-row-odd-background-color", ""],
["table-link-color", ""],
["sort-button-text-color", ""],
["hit-border-color", ""],
["hit-header-unqualified-background-color", ""],
["hit-body-unqualified-background-color", ""],
["hit-header-qualified-background-color", ""],
["hit-body-qualified-background-color", ""],
["page-footer-background-color", ""],
["footer-text-color", ""],
["footer-link-text-color", ""],
["details-link-text-color", ""],
];
// Used to dynamically group the list items
colorGroups = [];
}
// Returns the style element that holds the theme
function getStyle() {
// Find the correct style element by looking for my comment
return $( "style:contains('/* mTurk Theme */')" );
}
// Applies CSSText to the style element
function applyCSS() {
// Replace the text of the style element
getStyle().text(CSSText);
}
// Makes the regex string used to find and change properties in the CSS
function findPropertyRegex(variableName, flags) {
// Fancy thing lets flags be optiional.
flags = typeof flags !== 'undefined' ? flags : 'g';
// Ugh. Regex. I need to escape the escapes here. Crazy.
// Select the CSS property by the comment in the line above it.
// NOTE: This relies on the property you want to change being the FIRST value
// "border: 1px blue solid ;" will change "1px", not "blue"
// "border: blue 1px solid;" will change "blue"
// Group 1: comment & property
// Group 2: property you want to change (I hope!)
// Group 3: values after the property
// Group 4: the semicolon
var regstring = "(.*\\/\\*\\s" + variableName + "\\s\\*\\/\\s+.*:\\s+)(#*[A-Za-z0-9]+)(.*)(;.*)";
// Create the RegEx object
return new RegExp(regstring, flags);
}
// Edits the CSS to set a property
function replaceProperty(regex, str, value) {
return str.replace(regex, "$1" + value + "$3$4");
}
// Finds the index of a property in variables
function getPropertyIndex (variableName) {
for (var i in variables) {
if (variables[i] != null) {
if (variableName == variables[i][0]) {
return i;
}
}
}
return -1;
}
// Gets a property from the CSS
// TODO: I think this function may be pretty unnessary and is slowing down the script
// The "variables" variable has the values too as long as its been applied
function getProperty(variableName) {
// Get the CSS property regex
regex = findPropertyRegex(variableName, '');
// Get the groups
groups = regex.exec(CSSText);
if (groups != null) {
// Return the value
return groups[2];
}else{
console.log("Couldn't find " + variableName);
var i = getPropertyIndex(variableName);
delete variables[i];
return -1;
}
}
// Set an individual property to a color
function setProperty(variableName, oldColor, newColor) {
// Get the CSS property regex
regex = findPropertyRegex(variableName);
// Replace the color with the one we want.
CSSText = replaceProperty(regex, CSSText, newColor);
// Update the color grouping if needed
if (oldColor !== null) {
var index = getPropertyIndex(variableName);
variables[index][1] = newColor;
if (newColor in colorGroups) {
colorGroups[newColor].push(index);
}else{
colorGroups[newColor] = [];
colorGroups[newColor][0] = index;
}
var groupIndex = colorGroups[oldColor].indexOf(index);
delete colorGroups[oldColor][groupIndex];
}
}
// Set a group of colors to another color
function setGroupProperty (oldColor, newColor) {
// Update the color grouping
for (var i in colorGroups[oldColor]) {
index = colorGroups[oldColor][i];
variableName = variables[index][0];
setProperty(variableName, oldColor, newColor);
}
delete colorGroups[oldColor];
}
// Refreshes the color lust
// TODO: Make this only update what is needed instead of closing all color groups.
function refreshList () {
var savedVariables = getSavedVariables(currentTheme);
// Remove the old color pickers
$(".colpick").remove();
// Empty the list
$("#mturktheme .color-list-wrapper").empty();
// Refill the list
for (var color in colorGroups) {
var colorGroup = colorGroups[color];
var appendString = "";
var appendColorString = "";
var unsavedChanges = false;
for (var ii in colorGroup) {
var index = colorGroup[ii];
var variableName = variables[index][0];
var unsavedText = "";
if (savedVariables != -1) {
if (color != savedVariables[index][1]){
unsavedChanges = true;
unsavedText = " *";
console.log("Unsaved color");
}else{
unsavedText = "";
}
}
appendColorString += '<div class="variable-color"><div class="content">' + variableName + unsavedText + '</div>'
appendColorString += '<div name = "' + variableName + '" class="color" style="background-color: ' + color + ';"></div></div>';
}
if (unsavedChanges) {
unsavedText = " *";
}else{
unsavedText = "";
}
appendString = '<div class = "variable-group-wrapper"><div class="variable-group">';
appendString += '<div class="content">' + color + unsavedText + '</div><div name = "' + color + '" class="color" style="background-color: ' + color + ';"></div>';
appendString += '<div class="expand"></div></div>';
appendString += appendColorString;
appendString += '</div>';
$("#mturktheme .color-list-wrapper").append(appendString);
}
}
// Add a theme
// TODO: Make sure the theme doesn't exist.
// TODO: Set the current theme to the new theme
function addTheme(themeName){
// Add the theme name to the array
themeNames.push(themeName);
// Update the theme list to show the added theme
updateThemeList();
// Save the name names in local storage
GM_setValue('mturk-theme-names', JSON.stringify( themeNames ));
// Save the theme (uses current variables)
saveTheme(themeName);
}
function deleteTheme(themeName) {
GM_deleteValue('mturk-theme-data-' + themeName);
}
function saveTheme(themeName) {
GM_setValue('savedVariableVersion', currentVariableVersion);
GM_setValue('mturk-theme-data-' + themeName, JSON.stringify(variables));
}
function loadTheme(themeName, overrideUnsaved) {
if (overrideUnsaved == null)
overrideUnsaved = false;
// Check for an unsaved theme
if ( ( getSavedVariables(unsavedTheme) !== -1 ) && !overrideUnsaved ) {
console.log("Loading unsaved theme changes");
variables = getSavedVariables(unsavedTheme);
}else{
// Check for an existing theme
if (getSavedVariables(themeName) !== -1){
console.log("Loading saved theme");
variables = getSavedVariables(themeName);
}else{
// Load the default CSS if all else fails.
console.log("Loading default CSS");
CSSToVariables();
}
}
}
function getSavedVariables(themeName) {
return JSON.parse(GM_getValue('mturk-theme-data-' + themeName, -1));
}
// Apply a theme
function applyTheme(themeName) {
resetVariables();
currentTheme = themeName;
// Get original CSS text
CSSText = GM_getResourceText("cssfile");
if (savedVariableVersion != currentVariableVersion){
console.log("New version!");
if (getSavedVariables(themeName) !== -1){
loadTheme(currentTheme, true);
VariablesToCSS();
CSSToVariables();
saveTheme(themeName);
}
if (getSavedVariables(unsavedTheme) !== -1){
loadTheme(currentTheme);
VariablesToCSS();
CSSToVariables();
saveTheme(unsavedTheme);
}
}else{
// Load theme's variables
loadTheme(currentTheme);
// Applies the variables to the CSS
VariablesToCSS();
}
// Add the CSS to the page
if (getStyle().length){
applyCSS();
}else{
GM_addStyle(CSSText);
}
}
// Applies the variables to the CSS
function VariablesToCSS() {
var variableName;
var color;
for (var i in variables) {
if (variables[i]) {
variableName = variables[i][0];
color = variables[i][1];
if (color == "") {
color = getProperty(variableName);
}
setProperty(variableName, null, color);
if (color in colorGroups) {
colorGroups[color].push(i);
}else{
colorGroups[color] = [];
colorGroups[color][0] = i;
}
}
}
}
// Converts a CSS string to a variable list.
function CSSToVariables() {
resetVariables();
// Load all the color values.
var variableName;
var color;
for (var i in variables) {
variableName = variables[i][0];
color = getProperty(variableName);
console.log(variableName + " | " + color);
if (color != -1){
variables[i][1] = color;
if (color in colorGroups) {
colorGroups[color].push(i);
}else{
colorGroups[color] = [];
colorGroups[color][0] = i;
}
}
}
}