Wizmann/README.md

## README.md

      
    Raw
  

              README.md
            
          
    README


How to use

Paste the js code to Tampermonkey(Chrome) or Greasemonkey(Firefox). Paste the css code to Stylish, and set the matching url pattern as "https://workflowy.com/".
Open a new workflowy page, it works!

There are three different types of configuration:

BING_TODAY

using today's bing wallpaper as workflowy background
BING_RAND

using random bing wallpaper as the background. double click the background image, you can randomly get a new one
CUSTOM

using user defined image as the background. you can use one or more images, and swap in/out by double click on the image

you can change the settings by modify the js code, and if you have a good idea, feel free to update the code.
How it works

using image as background is an easy task, simply adding a "background-image" property to <body> will do the trick.
but change the background image smoothly is a hard one. when user double click on the image, the js code will load a new background image in the background. At the very moment the loading process has done, the background image will change with a fade in/out special effects.
the problem is loading a new image will take some time, from 1s to 10s, depends on the quality of the internet connection. so a "loading icon" is added to the top left corner of the page. when the loading process begins, the icon shows; when it ends, it disappears. As a result, users will know that the "double click" has really triggered the changing of wallpaper.
So if the changing procedure is slow, please don't blame the code. :)
Custom image url list

You can add your own image to the list CUSTOM_URL_LIST, and when you double click on the background, the js code will randomly pick a new image for you.

p.s. sometimes the random new one is the same as the previous one, that is, your changing request doesn't work. please kindly blame the random number generator, not me :)

but remember, if you add an image from a website, please add the domain name as a @connect property of our code. otherwise, our request to the image will be blocked as a "cross-domain attack".

p.s. there is no gurantee that the injected userscript code is safe from the xss attack, so please use the image from a trusty source as far as possible (e.g. your own dropbox, your own google drive, etc.)

Any problems?

if there's any problems or advices, feel free to contact me on Twitter (@Wizmann) or send me an email(mail.kuuy#gmail.com).
happy workflowy :)

  
## workflowy-bgimg.css
body {
  	transition: background-image 1s ease-in-out;
    background-image: url("http://wizmann-pic.qiniudn.com/16-5-10/50970924.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

div.page {
    background: rgba(255, 255, 255, 0.95) !important;
}

## workflowy-bgimg.js
// ==UserScript==
// @name         New Userscript
// @namespace    http://wizmann.tk
// @version      0.1
// @description  try to take over the world!
// @author       Wizmann
// @match        https://workflowy.com/
// @grant        GM_xmlhttpRequest
// @connect      api.ioliu.cn
// @connect      windows.microsoft.com
// ==/UserScript==

// There are three types of the background image
// 1. BING_TODAY (Default) - Today's Bing wallpaper
// 2. BING_RAND - Random Bing wallpaper
// 3. CUSTOM - Custom background img list

var TYPE = "CUSTOM";

// special thanks to Microsoft :)
var CUSTOM_URL_LIST = [
    'http://res2.windows.microsoft.com/resbox/en/windows/main/fc35f5b1-8013-413c-b99e-ed5d45ca53b3_4.jpg',
    'http://res1.windows.microsoft.com/resbox/en/windows/main/0d3c7cef-fd76-4e51-ba6c-d8a072d2319d_4.jpg',
    'http://res2.windows.microsoft.com/resbox/en/windows/main/fdbe38f2-e035-43be-85e8-5fd346fb9032_4.jpg',
    'http://res2.windows.microsoft.com/resbox/en/windows/main/681cfc55-cf11-42dd-9178-ae0e2932b573_4.jpg',
];

// and thanks for ioliu.cn for the bing wallpaper api
var BING_TODAY_API = "https://api.ioliu.cn/bing/";
var BING_RANDOM_API = "https://api.ioliu.cn/bing/rand/";


$(window).load(function() {
    $("div#getMoreSpaceButtonTopLeft").html("<img id=\"bgprocessing\" src=\"https://workflowy.com/media/i/ajax-loader.gif\" style=\"display:none; height:20px\" />");
    $("div#pageContainer").dblclick(function(e) {
        if (e.target != this) {
            e.target.dblclick();
            return;
        }

        var next_url = BING_TODAY_API;
        if (TYPE == "CUSTOM") {
            next_url = CUSTOM_URL_LIST[Math.floor(Math.random() * CUSTOM_URL_LIST.length)];
        } else if (TYPE == "BING_RAND") {
            next_url = BING_RANDOM_API + '?_=' + new Date().getTime();
        }

        console.log("dbclick");
        console.log(next_url);

        var image = new Image();
        $("img#bgprocessing").css("display", "inline");
        image.onload = function () {
            $("img#bgprocessing").css("display", "none");
            $("body").css('background-image', 'url(' + next_url + ')');
        };
        image.src = next_url;
    });

    $("div#pageContainer").dblclick();
});
	body {
	transition: background-image 1s ease-in-out;
	background-image: url("http://wizmann-pic.qiniudn.com/16-5-10/50970924.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	}

	div.page {
	background: rgba(255, 255, 255, 0.95) !important;
	}
	// ==UserScript==
	// @name New Userscript
	// @namespace http://wizmann.tk
	// @version 0.1
	// @description try to take over the world!
	// @author Wizmann
	// @match https://workflowy.com/
	// @grant GM_xmlhttpRequest
	// @connect api.ioliu.cn
	// @connect windows.microsoft.com
	// ==/UserScript==

	// There are three types of the background image
	// 1. BING_TODAY (Default) - Today's Bing wallpaper
	// 2. BING_RAND - Random Bing wallpaper
	// 3. CUSTOM - Custom background img list

	var TYPE = "CUSTOM";

	// special thanks to Microsoft :)
	var CUSTOM_URL_LIST = [
	'http://res2.windows.microsoft.com/resbox/en/windows/main/fc35f5b1-8013-413c-b99e-ed5d45ca53b3_4.jpg',
	'http://res1.windows.microsoft.com/resbox/en/windows/main/0d3c7cef-fd76-4e51-ba6c-d8a072d2319d_4.jpg',
	'http://res2.windows.microsoft.com/resbox/en/windows/main/fdbe38f2-e035-43be-85e8-5fd346fb9032_4.jpg',
	'http://res2.windows.microsoft.com/resbox/en/windows/main/681cfc55-cf11-42dd-9178-ae0e2932b573_4.jpg',
	];

	// and thanks for ioliu.cn for the bing wallpaper api
	var BING_TODAY_API = "https://api.ioliu.cn/bing/";
	var BING_RANDOM_API = "https://api.ioliu.cn/bing/rand/";



	$(window).load(function() {
	$("div#getMoreSpaceButtonTopLeft").html("<img id=\"bgprocessing\" src=\"https://workflowy.com/media/i/ajax-loader.gif\" style=\"display:none; height:20px\" />");
	$("div#pageContainer").dblclick(function(e) {
	if (e.target != this) {
	e.target.dblclick();
	return;
	}

	var next_url = BING_TODAY_API;
	if (TYPE == "CUSTOM") {
	next_url = CUSTOM_URL_LIST[Math.floor(Math.random() * CUSTOM_URL_LIST.length)];
	} else if (TYPE == "BING_RAND") {
	next_url = BING_RANDOM_API + '?_=' + new Date().getTime();
	}

	console.log("dbclick");
	console.log(next_url);

	var image = new Image();
	$("img#bgprocessing").css("display", "inline");
	image.onload = function () {
	$("img#bgprocessing").css("display", "none");
	$("body").css('background-image', 'url(' + next_url + ')');
	};
	image.src = next_url;
	});

	$("div#pageContainer").dblclick();
	});