This script inserts custom CSS for mturk.com
当前为
// ==UserScript==
// @name mTurkThemes
// @namespace http://ericfraze.com
// @version 0.4
// @description This script inserts custom CSS for mturk.com
// @match https://www.mturk.com/*
// @resource cssfile https://dl.dropboxusercontent.com/u/8371875/mTurk%20Theme/Output/style.css?version=345678
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_setClipboard
// @grant GM_getValue
// @grant GM_setValue
// @copyright 2014+, Eric Fraze
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==
// Add CSS
if (GM_getValue('mturk-theme-css', -1) === -1){
GM_addStyle(GM_getResourceText("cssfile"));
}else{
GM_addStyle(loadCSS());
}
// Wait for DOM to load
$(document).ready(function() {
//Add the HTML elements
$("#user_name_field").after(' | <span id="mturkthemeoptions" class="header_links">Theme Options</span>');
$("body").append('<div id="mturktheme" class=""></div>');
resetVariables();
//if (localStorage.getItem('mturk-theme-data') === null){
if (GM_getValue('mturk-theme-data', -1) === -1){
initThemeFromCSS();
} else {
loadTheme();
initThemeFromVariable();
}
console.log(colorGroups);
refreshList();
});
$("#mturkthemeoptions").live('click', function () {
$("#mturktheme").toggleClass("active");
});
$("#mturktheme .variable-group .expand").live('click', function () {
$(this).parents(".variable-group-wrapper").toggleClass("active");
});
$("#mturktheme .variable-group-wrapper .color").live('click', function () {
var variableName;
var oldColor;
var newColor = prompt("What do you want the new color to be?");
if (newColor != null) {
if ($(this).parent('.variable-color').length) {
variableName = $(this).attr('name');
oldColor = getProperty(variableName);
setProperty(variableName, oldColor, newColor);
//$(this).css('background-color', newColor);
}else{
oldColor = $(this).attr('name');
setGroupProperty(oldColor, newColor);
//$('#mturktheme .color[style="background-color: ' + color + ';"]').css('background-color', newColor);
//$(this).parent().children(".header").text(newColor);
}
refreshList();
saveTheme();
}
});
$("#mturktheme .toolbar .import").live('click', function () {
var newTheme = prompt("Paste in the theme!");
if (newTheme != null) {
resetVariables();
variables = JSON.parse(newTheme);
initThemeFromVariable();
refreshList();
saveTheme();
}
});
$("#mturktheme .toolbar .export").live('click', function () {
GM_setClipboard(JSON.stringify(variables));
alert("Theme copied to clipboard. Pastebin and share!");
});
$("#mturktheme .toolbar .revert").live('click', function () {
setCSS( loadCSS() );
initThemeFromCSS();
refreshList();
saveTheme();
});
$("#mturktheme .toolbar .save").live('click', function () {
saveCSS();
});
var variables;
var colorGroups;
function resetVariables() {
console.log("reseting");
// 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", ""],
["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", ""],
];
colorGroups = [];
}
function getStyle() {
// Find the correct style element by looking for my comment
return $( "style:contains('/* mTurk Theme */')" );
}
function getCSS() {
// Send the CSS text over
return getStyle().text();
}
function setCSS(css) {
// Replace the text of the style element
getStyle().text(css);
}
function findProperty(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);
}
function replaceProperty(regex, str, value) {
return str.replace(regex, "$1" + value + "$3$4");
}
function getPropertyIndex (variableName) {
for (var i = 0; i < variables.length; i++) {
if (variableName == variables[i][0]) {
return i;
}
}
return -1;
}
function getProperty(variableName) {
// Get the CSS text
var css = getCSS();
// Get the CSS property regex
regex = findProperty(variableName, '');
// Get the groups
groups = regex.exec(css);
// Return the value
return groups[2];
}
function setProperty(variableName, oldColor, newColor) {
// Get the CSS text
var css = getCSS();
// Get the CSS property regex
regex = findProperty(variableName);
// Replace the color with the one we want.
css = replaceProperty(regex, css, newColor);
// Apply the new CSS
setCSS(css);
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];
}
}
function setGroupProperty (oldColor, newColor) {
for (var i in colorGroups[oldColor]) {
index = colorGroups[oldColor][i];
console.log(index);
variableName = variables[index][0];
setProperty(variableName, oldColor, newColor);
}
delete colorGroups[oldColor];
}
function refreshList () {
$("#mturktheme").empty();
$("#mturktheme").append('<div class="toolbar"></div>');
$("#mturktheme .toolbar").append('<div title="New theme" class="icon add"></div>');
$("#mturktheme .toolbar").append('<select class="theme-select"><option value="default">Default</option><option value="night">Night</option></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="Save theme (cannot be reverted!)" class="icon save"></div>');
$("#mturktheme .toolbar").append('<div title="Revert to last save" class="icon revert"></div>');
//$("#mturktheme .toolbar").append('<span>Text goes here!</span>');
for (var color in colorGroups) {
var colorGroup = colorGroups[color];
var appenndString = '<div class = "variable-group-wrapper"><div class="variable-group"><div class="content">' + color + '</div><div name = "' + color + '" class="color" style="background-color: ' + color + ';"></div><div class="expand"></div></div>';
for (var ii in colorGroup) {
var index = colorGroup[ii];
var variableName = variables[index][0];
appenndString += '<div class="variable-color"><div class="content">' + variableName + '</div>'
appenndString += '<div name = "' + variableName + '" class="color" style="background-color: ' + color + ';"></div></div>';
}
appenndString += '</div>';
$("#mturktheme").append(appenndString);
}
}
function saveTheme() {
//localStorage.setItem('mturk-theme-data', JSON.stringify(variables));
GM_setValue('mturk-theme-data', JSON.stringify(variables));
}
function loadTheme() {
//variables = JSON.parse(localStorage.getItem('mturk-theme-data'));
variables = JSON.parse(GM_getValue('mturk-theme-data'));
}
function initThemeFromCSS() {
resetVariables();
// Load all the color values.
var variableName;
var color;
for (var i = 0; i < variables.length; i++) {
variableName = variables[i][0];
color = getProperty(variableName);
variables[i][1] = color;
if (color in colorGroups) {
colorGroups[color].push(i);
}else{
colorGroups[color] = [];
colorGroups[color][0] = i;
}
}
}
function initThemeFromVariable() {
var variableName;
var color;
for (var i = 0; i < variables.length; i++) {
variableName = variables[i][0];
var oldColor = getProperty(variableName);
color = variables[i][1];
setProperty(variableName, null, color);
if (color in colorGroups) {
colorGroups[color].push(i);
}else{
colorGroups[color] = [];
colorGroups[color][0] = i;
}
}
}
function saveCSS() {
//localStorage.setItem('mturk-theme-data', JSON.stringify(variables));
GM_setValue('mturk-theme-css', JSON.stringify( getCSS() ));
}
function loadCSS() {
//variables = JSON.parse(localStorage.getItem('mturk-theme-data'));
return JSON.parse(GM_getValue('mturk-theme-css'));
}