For some reason, Javascript brace and parenthesis matching are not highlighting
in the inserted file below.
I can't figure out that is going on.
The filename is: 153158.user.js
Code: Select all
/*
Change standalone image background and show its transparency on Firefox.
Copyright (C) 2012 LouCypher
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
// ==UserScript==
// @name Standalone Image Background and Transparency
// @namespace http://userscripts.org/users/12
// @description Change standalone image background and show its transparency on Firefox. Use context menu to configure.
// @version 9.0
// @author LouCypher
// @license GPL
// @screenshot http://loucypher.github.io/userscripts/image-background/images/screenshot-after.png
// @icon http://loucypher.github.io/userscripts/image-background/images/miku-icon48.png
// @icon64URL http://loucypher.github.io/userscripts/image-background/images/miku-icon64.png
// @contributionURL http://loucypher.github.io/userscripts/donate.html?Standalone+Image+Background
// @homepageURL https://greasyfork.org/scripts/63
// @supportURL https://github.com/LouCypher/userscripts/issues
// @downloadURL https://greasyfork.org/scripts/63/code.user.js
// @updateURL https://greasyfork.org/scripts/63/code.user.js
// @require https://greasyfork.org/libraries/jscolor/1.4.2/jscolor.js
// @resource hs.png https://raw.github.com/LouCypher/userscripts/master/image-background/jscolor/hs.png
// @resource hv.png https://raw.github.com/LouCypher/userscripts/master/image-background/jscolor/hv.png
// @resource arrow.gif https://raw.github.com/LouCypher/userscripts/master/image-background/jscolor/arrow.gif
// @resource cross.gif https://raw.github.com/LouCypher/userscripts/master/image-background/jscolor/cross.gif
// @resource CSS https://raw.github.com/LouCypher/userscripts/master/image-background/image-background.css
// @resource HTML https://raw.github.com/LouCypher/userscripts/master/image-background/image-background.html
// @resource LICENSE https://raw.github.com/LouCypher/userscripts/master/licenses/GPL/LICENSE.txt
// @resource CHANGELOG https://raw.github.com/LouCypher/userscripts/master/image-background/changelog.txt
// @resource thanks https://raw.github.com/LouCypher/userscripts/master/image-background/thanks.html
// @run-at document-start
// @include *
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_getResourceURL
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_openInTab
// @grant GM_registerMenuCommand
// @grant GM_log
// ==/UserScript==
function $(aId) document.getElementById(aId);
function getThanksURL() {
var url = GM_getResourceURL("thanks");
if (/^data\:/.test(url)) // If old GM_resourceURL
url = url.replace(/text\/plain/, "text/html");
return url;
}
// Show 'thank you' page
function showThanks(aEvent) {
if (aEvent)
aEvent.preventDefault();
GM_openInTab(getThanksURL()); // Open 'thank you' page
}
// Executed on right click
function popupShowing(aEvent) {
var node = aEvent.target; // The web element you right click on
while (node && node.id != "color-config")
node = node.parentNode;
if (node) // Color config dialog
gDocElm.removeAttribute("contextmenu"); // Hide context menu items
else
gDocElm.setAttribute("contextmenu", "context-menu"); // Show context menu items
// Check/uncheck menu items based on prefs
$("toggle-background-image").checked = GM_getValue("bgImage");
$("toggle-image-transparency").checked = GM_getValue("imgTrans");
$("toggle-image-placeholder").checked = GM_getValue("placeholder");
$("toggle-image-placeholder").hidden = !$("toggle-image-transparency").checked;
}
// Check validity of color value
function validateColor(aColor, aCallback) {
// Set dummy element color
$("dummy").style.color = (aColor == "") ? "#222" : aColor;
var save = false;
var computedColor = getComputedStyle($("dummy"), null).color;
if (computedColor == "transparent") // If dummy element's color is not set because invalid color value
alert("Invalid color value: " + aColor);
else {
aCallback(aColor); // Run callback function
save = true;
}
$("dummy").style.color = ""; // Reset dummy element's color
return save;
}
// Set background color
function setBgColor(aColorValue) {
if (aColorValue == "")
gDocElm.style.backgroundColor = ""; // Use default color from CSS resource
else
setStyleProperty(gDocElm, "background-color", aColorValue);
}
// Save color setting to preferences
function saveBgColor() {
var color = $("color-picker").value;
if (validateColor(color, setBgColor)) { // If color value is valid
GM_setValue("bgColor", color); // Save color value to pref
saveComputedColor();
hideColorConfig();
}
}
// Reset background color to previous setting
function resetBgColor() {
setStyleProperty(gDocElm, "background-color", GM_getValue("bgColor", ""));
hideColorConfig();
}
// Use default background color
function defaultBgColor() {
$("color-picker").value = "";
gDocElm.style.backgroundColor = "";
}
// Show color configuration dialog
function showColorConfig() {
$("change-background-color").disabled = true; // Disable menu item
$("color-config").className = "";
$("color-picker").value = GM_getValue("bgColor", "");
$("color-picker").focus();
}
// Hide color configuration dialog
function hideColorConfig() {
("color" in $("color-picker")) && $("color-picker").color.hidePicker();
$("color-config").className = "hide"; // Hide dialog
$("change-background-color").disabled = false; // Enable menu item
}
// Preview background color when chosing color in color picker
function previewBgColor(aEvent) {
setBgColor(aEvent.target.value);
}
// Show color picker
function showPicker(aEvent) {
("color" in $("color-picker")) && $("color-picker").color.showPicker();
}
// Hide color picker
function hidePicker(aEvent) {
var node = aEvent.target;
if ((node.localName != "div") && !node.id && ("color" in $("color-picker")))
$("color-picker").color.hidePicker();
}
function showAlert() {
var scheme = location.protocol;
var site = (scheme == "file:") ? "file://" : (scheme + "//" + location.hostname);
alert("Color picker requires JavaScript to be enabled. However,\n" +
"you can still change the background color by entering any\n" +
"valid color value.\n\nIf you have NoScript extension, color " +
"picker will work\nif you select 'Allow [ " + site +
" ]'\nfrom NoScript menu.");
}
// Enable/disable checkerboard background
function setBgImage(aEnable) {
if (aEnable) // Enable checkerboard background
gDocElm.style.backgroundImage = ""; // Use checkerboard bg in CSS resource
else // Disable checkerboard background
setStyleProperty(gDocElm, "background-image", "none");
GM_setValue("bgImage", aEnable); // Save background option to pref
}
// Toggle checkerboard background on/off
function toggleBgImage(aEvent) {
try {
var node = aEvent.target;
if (node instanceof HTMLMenuItemElement)
setBgImage(node.checked);
else
setBgImage(!GM_getValue("bgImage"));
} catch (ex) {
setBgImage(!GM_getValue("bgImage"));
}
}
// Enable/disable image transparency
function showTransparency(aEnable) {
var image = document.querySelector("img");
if (aEnable) // Enable image transparency
image.classList.add("transparent");
else // Disable image transparency
image.classList.remove("transparent");
GM_setValue("imgTrans", aEnable); // Save image transparency option to pref
}
// Toggle image transparency on/off
function toggleTransparency(aEvent) {
try {
var node = aEvent.target;
if (node instanceof HTMLMenuItemElement)
showTransparency(node.checked);
else
showTransparency(!GM_getValue("imgTrans"));
} catch (ex) {
showTransparency(!GM_getValue("imgTrans"));
}
}
// Enable/disable image placeholder
function showPlaceholder(aEnable) {
var image = document.querySelector("img");
if (aEnable)
image.classList.add("placeholder");
else
image.classList.remove("placeholder");
GM_setValue("placeholder", aEnable); // Save image placeholder option to pref
}
// Toggle image placeholder on/off
function togglePlaceholder(aEvent) {
try {
var node = aEvent.target;
if (node instanceof HTMLMenuItemElement)
showPlaceholder(node.checked);
else
showPlaceholder(!GM_getValue("placeholder"));
} catch (ex) {
showPlaceholder(!GM_getValue("placeholder"));
}
}
function setStyleProperty(aNode, aPropertyName, aValue) {
aNode.style.setProperty(aPropertyName, aValue, "important");
}
function saveComputedColor() {
GM_setValue("computedColor", getComputedStyle(gDocElm, null).backgroundColor);
}
function init() {
gDocElm= document.documentElement
if (!/^image\//.test(document.contentType)) {
jscolor.binding = false; // Turn off JSColor on non-image page
return;
}
/***** Start checking preferences *****/
var bgColor = GM_getValue("bgColor", ""); // Get color value pref (def = empty)
var bgImage = GM_getValue("bgImage", true); // Get background pref (def = true)
var imgTrans = GM_getValue("imgTrans", true); // Get transparency pref (def = true)
var placeholder = GM_getValue("placeholder", true); // Get image placeholder pref (def = true)
var enableSVG = GM_getValue("enableSVG", true);
var computedColor = GM_getValue("computedColor", "");
/***** End checking preferences *****/
if (document.contentType === "image/svg+xml") { // If SVG image
if (enableSVG) {
if (typeof GM_notification === "function") { // Scriptish
window.addEventListener("load", function() {
initSVG(computedColor, bgImage);
});
}
else // Greasemonkey
initSVG(computedColor, bgImage);
}
GM_registerMenuCommand("Toggle SVG", function() {
GM_setValue("enableSVG", !enableSVG);
location.reload();
}, "S");
return;
}
/* removed on 2021/02/03 for Pale Moon version 29.0.0 (32 bit) --- (?)
if (!("contextMenu" in gDocElm && "HTMLMenuItemElement" in window)) {
alert("This userscript requires Firefox 15 or newer.");
return;
}
*/
setBgColor(bgColor); // Set background color from pref
setBgImage(bgImage); // Set background patters from pref
showTransparency(imgTrans); // Set image transparency from pref
showPlaceholder(placeholder); // Set image placeholder from pref
saveComputedColor();
GM_addStyle(GM_getResourceText("CSS")); // Inject style from @resource
// Append elements
var div = document.body.appendChild(document.createElement("div"));
div.innerHTML = GM_getResourceText("HTML");
// Check if JavaScript is enabled for JSColor to work
if (getComputedStyle($("noscript"), null).display == "none") { // If JavaScript is enabled
if (typeof GM_info === "object") // Greasemonkey, use @resource images for offline use
jscolor.dir = GM_getResourceURL("LICENSE").match(/[^\/]+/).toString() + "/";
else // Scriptish
jscolor.dir = "https://raw.github.com/LouCypher/userscripts/master/image-background/jscolor/";
$("color-picker").value = bgColor;
}
else { // JavaScript is disabled
jscolor.binding = false; // Disable color picker
$("error").className = "";
var p = $("color-config").querySelector("div");
p.replaceChild(document.createTextNode("Enter valid "), p.firstChild);
}
// Monkey Menu
GM_registerMenuCommand("Change Background Color", showColorConfig);
GM_registerMenuCommand("Toggle Checkerboard Background", toggleBgImage);
GM_registerMenuCommand("Toggle Image Transparency", toggleTransparency);
GM_registerMenuCommand("Toggle Image Placeholder", togglePlaceholder);
/***** Start context menu initialization *****/
// Add event listeners to menuitems
$("change-background-color").addEventListener("click", showColorConfig);
$("toggle-background-image").addEventListener("click", toggleBgImage);
$("toggle-image-transparency").addEventListener("click", toggleTransparency);
$("toggle-image-placeholder").addEventListener("click", togglePlaceholder);
// Set context menu to html element
gDocElm.setAttribute("contextmenu", "context-menu");
gDocElm.addEventListener("contextmenu", popupShowing);
/***** End context menu initialization *****/
// Color dialog initialization
gDocElm.addEventListener("click", hidePicker);
$("color-picker").addEventListener("mouseenter", showPicker);
$("color-picker").addEventListener("input", previewBgColor);
$("color-picker").addEventListener("change", previewBgColor);
$("color-config").addEventListener("keypress", function(e) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
return;
switch (e.keyCode) {
case 13: // 'Enter' key is pressed
saveBgColor();
break;
case 27: // 'Escape' key is pressed
$("color-picker").value = GM_getValue("bgColor", "");
resetBgColor();
default: return;
}
});
$("ok").addEventListener("click", saveBgColor);
$("cancel").addEventListener("click", resetBgColor);
$("default").addEventListener("click", defaultBgColor);
$("error").addEventListener("click", showAlert);
$("about").href = getThanksURL();
}
function initSVG(aColorValue, aBgImage) {
gDocElm = document.documentElement;
if ((getComputedStyle(gDocElm, null).backgroundColor != "transparent") ||
(getComputedStyle(gDocElm, null).backgroundImage != "none"))
return; // Don't override if SVG has background color or background image
// Append <style> element (because GM_addStyle doesn't work on SVG)
var style = document.createElementNS("http://www.w3.org/2000/svg", "style");
style.type = "text/css";
style.textContent = 'svg { background: #222 url("data:image/png;base64,'
+ 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hA'
+ 'AAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAC'
+ '5JREFUOMtjZGBgsGfAA/7//38QnzwTA4Vg1IDBYADj///'
+ '/8StgZLQfDcRhbwAAfyQHW028hvoAAAAASUVORK5CYII=")'
+ ' 0 0 repeat fixed !important;'
+ ' margin: auto !important; position: absolute;'
+ ' top: 0; right: 0; bottom: 0; left: 0;\n'
+ ' pointer-events: auto;'
+ '\n}';
gDocElm.appendChild(style);
setBgColor(aColorValue); // Set background color from pref
setBgImage(aBgImage); // Set background patters from pref
gDocElm.addEventListener("contextmenu", function() {
getSelection().removeAllRanges();
});
}
/***** Main script *****/
try {
GM_setValue("firstRun", GM_getValue("firstTime")); // Copy from old pref
GM_deleteValue("firstTime"); // Remove old pref
} catch (ex) {};
var firstRun = GM_getValue("firstRun", true);
if (firstRun && window.top === window.self) { // If first time use and not in frame
showThanks(); // Open 'thank you' page
GM_setValue("firstRun", false); // Don't open 'thank you' page again
}
//GM_log(GM_getResourceURL("LICENSE")); //.match(/[^\/]+/));
var gDocElm = null;
init();
