Skip to content

Instantly share code, notes, and snippets.

@Wizmann

Wizmann/README.md

Last active June 15, 2018 09:52
Show Gist options
  • Save Wizmann/908e87c7e79beae838ee5bf45c28f631 to your computer and use it in GitHub Desktop.
Save Wizmann/908e87c7e79beae838ee5bf45c28f631 to your computer and use it in GitHub Desktop.
Download ZIP
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:

  1. BING_TODAY
    using today's bing wallpaper as workflowy background
  2. BING_RAND
    using random bing wallpaper as the background. double click the background image, you can randomly get a new one
  3. 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 :)

Raw
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;
}
Raw
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();
});
@frankman777
Copy link

Thanks a ton @Wizmann!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment