Trello bookmarklet to (re-)calculate sums of "points" from cards.

1-trello-sum-bookmarklet.md

Trello bookmarklet to (re-)calculate sums of "points" from cards.

"Points" can be anything numeric (no units). Just prefix each card you want to count with the points in parentheses. E.g. (3) Investigate options.

It's okay for cards to not have points. They just won't be included in the sums.

The sum of points for each list will get added to the list title in the same way as cards. E.g. (17) To Do. Any existing sum will get updated.

The list's actual title (e.g. if you refresh) will not be updated; only the "display" title at that moment will be.

Example: I'm planning my wedding's seating arrangement, so I have a list for each table and a card for each party. I prefix each card with the size of the party, and hit this bookmarklet to calculate each table's total.

To add this bookmarklet to your browser, instructions for Chrome:

1. Right-click your Bookmarks Bar.
2. Click "Add Page..."
3. For "Name", type something like Trello sum.
4. For "URL", copy-paste the below:

javascript:!function(){var t=/^[(](\d+)[)].*/;$("#board .list").each(function(){var a=$(this),e=0;a.find(".list-card").each(function(){var a=$(this),i=a.find(".list-card-title").text(),r=a.find(".list-card-title .card-short-id").text();0===i.indexOf(r)&&(i=i.replace(r,""));var d=i.match(t);if(d){var n=parseInt(d[1],10);e+=n}});var i=a.find("h2.list-header-name-assist"),r=a.find("textarea.list-header-name"),d=i.text(),n=d.match(t);if(n){var c="("+n[1]+") ";d=d.replace(c,"")}d="("+e+") "+d,i.text(d),r.text(d)})}();

NOTE: This bookmarklet may break at any time, e.g. if Trello changes their code (on which this bookmarklet relies).

No updates or fixes guaranteed, but check back on this gist if anything breaks, and feel free to tweet me at @aseemk.

Enjoy!

2-trello-sum-bookmarklet.js

/**
 * MIT license. (c) Aseem Kishore <aseemk.com>.
 */
(function () {
  
  // Points must be the very first thing in the card title,
  // wrapped in parentheses. E.g. "(3) Foo bar".
  var REGEX = /^[(](\d+)[)].*/;

  // For each list on the board...
  $('#board .list').each(function () {
    var $list = $(this);
    
    // Iterate over each card and sum up the points:
    var total = 0;
    
    $list.find('.list-card').each(function () {
      var $card = $(this);
      
      // Find the card's title:
      var title = $card.find('.list-card-title').text();
      
      // Unfortunately, at the time of this bookmarklet's creation,
      // there's also a hidden "card ID" in the text; remove it:
      var id = $card.find('.list-card-title .card-short-id').text();
      if (title.indexOf(id) === 0) {
        title = title.replace(id, '');
      }
      
      // Now extract and add the number of points from the title:
      var match = title.match(REGEX);
      if (match) {
        var points = parseInt(match[1], 10);
        total += points;
      }
      
    }); // end iteration over cards in list
    
    // Now update the list's title with this total,
    // overwriting any existing total in the title.
    // We'll use the same pattern, so same regex.
    //
    // TODO: At the time of this bookmarklet's creation,
    // there are actually two DOM elements with the title!
    // An `h2` and a `textarea`. The `h2` seems to be hidden
    // (with a class name of "assist"), while the `textarea`
    // inexplicably sometimes has an incomplete title.
    // I'm definitely seeing inconsistent behavior, so...???
    var $titleH2 = $list.find('h2.list-header-name-assist');
    var $titleTA = $list.find('textarea.list-header-name');
    var title = $titleH2.text();
    var match = title.match(REGEX);
    if (match) {
      var existing = '(' + match[1] + ') ';
      title = title.replace(existing, '');
    }
    title = '(' + total + ') ' + title;
    $titleH2.text(title);
    $titleTA.text(title);
    
  }); // end iteration over lists in board

})();