Namek Dev
a developer's log
NamekDev

Different Trello every day

November 4, 2015

Trello. Tasks. I was tired of seeing this blue-ish default color every single day. I know, there’s palette to change a background but I needed something more fancy - since I work with it everyday, it could also look different everyday!

So I made a simple script using Tampermonkey extension under Chrome web browser. On Firefox you could go similiar way with Greasemonkey.

Basic stuff

Create new script, change @match  http://*/*   to: @include /^https?://trello.com/b/.+$/

Let’s start coding with function that creates new style dynamically:

function createStyle(css) {
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  return style;
}

That’s pretty basic. New element is created, later we’re going to add it to the page.

Here we have colors that were picked up from Material Design:

var colors = ["673ab7","3f51b5","2196f3","03a9f4","0288d1","01579b","006064","26c6da","0091ea","4caf50","2e7d32","00695c","64ffda","00c853","8bc34a","ffc107","ffb300","ff9800","f4511e","bf360c","795548","9e9e9e","fafafa","9e9e9e","757575","6d4c41","607d8b","b0bec5","78909c","455a64","212121"];

Let’s now randomize a color for current day:

var oneDayInMs = 1000*60*60*24;
var currentTimeInMs = new Date().getTime(); // UTC time
var timeInDays = Math.floor(currentTimeInMs / oneDayInMs);
var numberForToday = timeInDays % 9999;
var index = numberForToday % colors.length;
var color = '#' + colors[index];

Finally, setup color on the page:

var style = createStyle('body{background-color:' + color + ' !important;}');
document.body.appendChild(style);

Today my Trello is full of gold!

But let’s Fix it

But there’s an issue - Trello is SPA. When you first go to main page and then choose your Board, background won’t be randomized. URL is being changed but the page is not really refreshed. Hit F5 and it will work. But click on the Trello logo and board list will be colorized, which doesn’t look always well.

New approach will be installing script for just whole Trello - no matter if it’s board list or a board - and reacting to how the site changes.

So, let’s first change @include   /^https?://trello\.com/b/.+$/  to just @include   /^https?://trello\.com/?.*$/

Next, we’re gonna need waitForKeyElements() that can be found here. Instead of just adding the style to the body, we’re do this on events:

var style = createStyle('body{background-color:' + color + ' !important;}');
var alreadyAdded = false;

// add style when on board page
waitForKeyElements(".board-wrapper", function() {
  if (!alreadyAdded) {
    document.body.appendChild(style);
    alreadyAdded = true;
  }
});

// remove style when on board list page
waitForKeyElements('.member-boards-view', function() {
  if (style.parentNode) {
    style.parentNode.removeChild(style);
  }
  alreadyAdded = false;
});

Resources

web
comments powered by Disqus