Trello Mood Board bookmarklet

trello-mood-board-bookmarklet.js

if ($('.mood-board').length > 0) {
  // off
  $('.mood-board').remove();
} else {
  // on
  var
    $attachment = $('.attachment-thumbnail'),
    $this,
    board = '<style class="mood-board">' +
        '.body-board-view {' +
          'overflow-y: scroll;' +
        '}' +

        'ul.mood-board {' +
          'position: absolute;' +
          'z-index: 50;' +
          'top: 0;' +
          'right: 0;' +
          'bottom: 0;' +
          'left: 0;' +
          'overflow-y: scroll;' +
          'padding: 2px;' +
          'background: #000;' +
        '}' +

        'ul.mood-board img {' +
          'padding: 2px;' +
          'max-width: 500px;' +
          'background: #000;' +
        '}' +
      '</style>',
    imageName,
    imageSrc;

  $attachment.each(function () {
    $this = $(this);
    imageName = $this.find('.attachment-thumbnail-name').text();
    imageSrc = $this.find('.attachment-thumbnail-preview').attr('href');

    if (imageName.toLowerCase() !== 'skip') {
      board += '<li>' +
          '<a href="' + imageSrc + '">' +
            '<img src="' + imageSrc + '" />' +
          '</a>' +
        '</li>';
    } else {
      console.log('skipped: ' + imageSrc);
    }
  });

  $('body').append('<ul class="mood-board">' + board + '</ol>');

  $.ajax({
    url: 'https://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js',
    dataType: 'script',
    success: function () {
      $('ul.mood-board').masonry({
        columnWidth: 20,
        containerStyle: null,
        itemSelector: 'li'
      });
    }
  });
}

A bookmarklet to view all of the attached images in an open Trello card in a grid layout (using masonry.js):

javascript:(function(){if($('.mood-board').length>0){$('.mood-board').remove();}else{var%20$attachment=$('.attachment-thumbnail'),$this,board='<style%20class="mood-board">'+'.body-board-view%20{'+'overflow-y:%20scroll;'+'}'+'ul.mood-board%20{'+'position:%20absolute;'+'z-index:%2050;'+'top:%200;'+'right:%200;'+'bottom:%200;'+'left:%200;'+'overflow-y:%20scroll;'+'padding:%202px;'+'background:%20#000;'+'}'+'ul.mood-board%20img%20{'+'padding:%202px;'+'max-width:%20500px;'+'background:%20#000;'+'}'+'</style>',imageName,imageSrc;$attachment.each(function(){$this=$(this);imageName=$this.find('.attachment-thumbnail-name').text();imageSrc=$this.find('.attachment-thumbnail-preview').attr('href');if(imageName.toLowerCase()!=='skip'){board+='<li>'+'<a%20href="'+imageSrc+'">'+'<img%20src="'+imageSrc+'"%20/>'+'</a>'+'</li>';}else{console.log('skipped:%20'+imageSrc);}});$('body').append('<ul%20class="mood-board">'+board+'</ol>');$.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js',dataType:'script',success:function(){$('ul.mood-board').masonry({columnWidth:20,containerStyle:null,itemSelector:'li'});}});}})();