☰

Basecamp - Coloured to-dos based on due dates

Changes the Colour of To-Dos based on Dates

  1. // Basecamp - Colour Due Dates in To-Do Lists
  2. // Copyright (c) 2009,  Alex Burkhardt
  3. // http://www.alex3d.de
  4. // 10 January 2009
  5. //
  6. // Original script created by Alex Burkhardt
  7. //
  8. // 28 February 2011 - Modified by sonar_m to handle new Bascamp format
  9. // 06 February 2012 - Modified by Markp to give different colour scheme
  10. // 07 February 2012 - Modified by Markp to exclude colours on the "Today" view page, as they are all the same (all green)
  11. // 08 February 2012 - Modified by Markp to exclude colours on "Messages" and "Calendar" pages, where they are not appropriate
  12. // 17 February 2012 - Modified by Markp to exclude colours on "Account" page, where they are not appropriate
  13. // 30 March 2012 - Modified by Markp to put back colours on the "Today" page; in retrospect it seems better that way!
  14. // 19 April 2012 - Modified by Markp to experiment with revised colour scheme to highlight tasks due yesterday in yellow and next week's tasks in light green
  15. // 20 April 2012 - Modified by Markp to tweak the light green and grey colors (future tasks) to make them lighter and less obtrusive
  16. // 14 May 2012 - Modified by Markp to exclude colours on "Files" page, where they are not appropriate
  17. //
  18. // ==UserScript==
  19. // @name        Basecamp - Coloured to-dos based on due dates
  20. // @version     1.0.10
  21. // @description Changes the Colour of To-Dos based on Dates
  22. // @namespace   https://www.posen.net/
  23. // @include     https://*.updatelog.*/*
  24. // @include     https://*.clientsection.*/*
  25. // @include     https://*.seework.*/*
  26. // @include     https://*.grouphub.*/*
  27. // @include     https://*.projectpath.*/*
  28. // @include     https://*.basecamphq.*/*
  29. // @include     http://*.updatelog.*/*
  30. // @include     http://*.clientsection.*/*
  31. // @include     http://*.seework.*/*
  32. // @include     http://*.grouphub.*/*
  33. // @include     http://*.projectpath.*/*
  34. // @include     http://*.basecamphq.*/*
  35. // @exclude     https://*.basecamphq.*/*/posts/*
  36. // @exclude     https://*.basecamphq.*/*/posts
  37. // @exclude     https://*.basecamphq.*/*/milestones/*
  38. // @exclude     https://*.basecamphq.*/account
  39. // @exclude     https://*.basecamphq.*/projects/*/files
  40. //
  41. // ==/UserScript==
  42. //
  43. // How to use:
  44. // When you have a to-do with a deadline, just set the date in Basecamp
  45. // The script will then colour-code the to-do-item dates as follows:
  46. // More than 1 week Old - > red
  47. // Within the past 7 days -> orange
  48. // Yesterday -> yellow
  49. // Today -> green
  50. // In the next 7 days -> light green
  51. // In the future by more than 7 days -> grey
  52.  
  53. var today = new Date();
  54.  
  55. textnodes = document.evaluate( "//body//text()", document, null,
  56. XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  57.  
  58. for (var u = 0; u < textnodes.snapshotLength; u++) {
  59.      node = textnodes.snapshotItem(u);
  60.      s = node.data;
  61.     
  62.    var datum = s.match(/\[[\d]{2}\/[\d]{2}\/[\d]{2}\]/g);
  63.    var datum = s.match(/[\d]{1,2} [\w]{3} [\d]{4}/);
  64.    if(datum) {
  65.       
  66.        var datum1;
  67.        var dateDisplayed;
  68.        var future;
  69.         node.parentNode.setAttribute("style", "color: black;background-color: #d8d8d8"); //Default format is black on grey
  70.        for (i=0;i<datum.length;i++) {
  71.                 datum1 =  datum[i].split(' ');
  72.                
  73.                 dateDisplayed = new Date();
  74.                 dateDisplayed.setYear(datum1[2]);
  75.                var month = datum1[1];
  76.                var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  77.                for(j=0;j<12;j++)
  78.                {
  79.                     if(month == m_names[j])
  80.                     {
  81.                          dateDisplayed.setMonth(j);
  82.                          break;
  83.                     }
  84.                }
  85.                 dateDisplayed.setDate(datum1[0]);
  86.                 future = new Date();
  87.                 future.setYear(today.getFullYear());           
  88.                 future.setMonth(today.getMonth());
  89.                 future.setDate(today.getDate() +1);
  90.  
  91.                 LastWeek = new Date();
  92.                 LastWeek.setYear(today.getFullYear());           
  93.                 LastWeek.setMonth(today.getMonth());
  94.                 LastWeek.setDate(today.getDate() -7);
  95.  
  96.                 NextWeek = new Date();
  97.                 NextWeek.setYear(today.getFullYear());           
  98.                 NextWeek.setMonth(today.getMonth());
  99.                 NextWeek.setDate(today.getDate() +7);
  100.  
  101.                 Yesterday = new Date();
  102.                 Yesterday.setYear(today.getFullYear());           
  103.                 Yesterday.setMonth(today.getMonth());
  104.                 Yesterday.setDate(today.getDate() -1);
  105.  
  106.            
  107.  
  108.           toDostyle = getComputedStyle(node.parentNode, '');
  109.          
  110.           if (toDostyle.textDecoration == "line-through");
  111.          
  112.           else {
  113.  
  114.                  if(dateDisplayed.toString().substring(0,15) == today.toString().substring(0,15)) node.parentNode.setAttribute("style", "color: white;background-color: #0EA93A"); //today (in green)
  115.              else if(dateDisplayed < today && dateDisplayed >= Yesterday) node.parentNode.setAttribute("style", "color: black;background-color: #FFFF00"); //yesterday (in yellow)
  116.              else if(dateDisplayed < Yesterday && dateDisplayed >= LastWeek) node.parentNode.setAttribute("style", "color: white;background-color: #FF8D1C"); //within the past 7 days (in orange)
  117.             else if(dateDisplayed < LastWeek) node.parentNode.setAttribute("style", "color: white;background-color: #f00"); //more than a week old (in red)
  118.              else if(dateDisplayed > today && dateDisplayed < NextWeek) node.parentNode.setAttribute("style", "color: black;background-color: #BCF5A9"); //Next week (in pale green)
  119.  
  120. // Orange: #FF8D1C - Grey: #d8d8d8 - Green: #0EA93A - Red: #f00 - Yellow: #FFFF00 - Blue: #0000ff - Pale Green: #BCF5A9
  121.                }
  122.         }
  123.      }
  124. }