trello-wrap-n-stack-to-fit.user.js

// ==UserScript==
// @name Trello Wrap-n-Stack-To-Fit
// @namespace http://tampermonkey.net/
// @version 0.73
// @description Trello: Auto-wrap, stack and resize your Trello lists so they don't go offscreen. And kill that horizontal scroll-bar.
// @author chrisfcarroll
// @match https://trello.com/*
// @grant none
// ==/UserScript==
// jshint -W097 
'use strict';
;(function(){
  if(window.location.search.indexOf("nowrap=")>0){ $( window ).load( function(){$("#board").css('overflow-x','hidden');}) ; return;}
  //
  // --- parameters you can adjust. Do greasemonkey scripts do parameters? ----------
  var allowHideBottomButShowAtLeastTopNCardsPerList= 1; // Don't wrap if it will result lists so short you can't see even 1 card
  var allowHideBottomFractionOfLongList= 0.95; //Above 90% this rule will rarely override the TopNCardsPerList rule
  var allowHideRightmostFractionOfList= 0.3;
  var marginwanted= 4 /*pixels*/ ;
  // ----------------------------------------
  //
  var lists, addlist, board, listwidth, allowOffRightEdgePixels;
  var minCardHeight= 35 /*pixels*/ ;

  function firstRun(){
    //-------------------------
    // definitions which must track trello changes
    board= $("#board");
    lists= $("#board .js-list");
    addlist= $(".js-add-list");
    //--------------------------
    
    listwidth= lists.width() + 2 * marginwanted;
    allowOffRightEdgePixels= listwidth * allowHideRightmostFractionOfList;
    //console.log("Wrap-n-Stack : lists.length= ", lists.length);
    
    board
        .css('overflow-x','hidden')
        .css('overflow-y','hidden')
        ; // .css('margin-left', -allowOffRightEdgePixels +'px');
    lists
        .css('margin', marginwanted + 'px')
    ; // lists.last()
    //     .css('margin-right', '-' + allowOffRightEdgePixels + 'px')
    //     .css('margin-left',  (2* marginwanted + allowOffRightEdgePixels) + 'px');
    addlist
        .css('margin-top', marginwanted + 'px')
        ; // .css('margin-left', (2* marginwanted + allowOffRightEdgePixels) + 'px');
  }

  function wrapListsToFit(){
    if(!lists || !lists.length){firstRun();}
      
    var boardwidth= board.width();
    var fittableColumns= Math.trunc( boardwidth / listwidth);
    var rowwidth= listwidth * lists.length;
    var rowspredicted=1;
    if ( rowwidth > boardwidth + allowOffRightEdgePixels ){
        rowspredicted= 1 + Math.trunc( (lists.length-1) / fittableColumns );
    }
    /*
    console.log("----------------------------------------");
    console.log("boardHeight: ", board.height());
    console.log("boardwidth: ", boardwidth);
    console.log("listwidth: ", listwidth);
    console.log("fittableColumns: ", fittableColumns);
    console.log("rowwidth: ", rowwidth);
    */
    var fittableRows= fittableRowsGivenListHeight();
    var heightpredicted= board.height() / fittableRows - marginwanted;

    //console.log("fittableRows: ", fittableRows);
    //console.log("heightpredicted: ", heightpredicted);

    lists
        .css('float', fittableRows>1 ? 'left' : 'initial')
        .css('max-height', heightpredicted );
    //

    function fittableRowsGivenListHeight()
    {
        if(rowspredicted==1){return 1;}
        //
        var showAtLeastListHeightFraction= Math.max(0.001, 1 - allowHideBottomFractionOfLongList);
        var visibleColumns= lists.slice(0,fittableColumns);
        var heightOfTallestVisibleList= minCardHeight * Math.max(showAtLeastListHeightFraction, allowHideBottomButShowAtLeastTopNCardsPerList);
        visibleColumns.each(function(i,l){
            heightOfTallestVisibleList= Math.max(heightOfTallestVisibleList, listHeight(l))
        });
        var rowsPossible= Math.trunc(board.height()/ (heightOfTallestVisibleList*showAtLeastListHeightFraction + marginwanted ));
        rowsPossible= Math.max(1, rowsPossible);
        /*console.log("heightOfTallestVisibleList: ", heightOfTallestVisibleList);
        console.log("rowspredicted: ", rowspredicted);
        console.log("rowsPossible: ", rowsPossible);
        */
        return Math.min(rowsPossible, rowspredicted);

        function listHeight(list){
            var cardsheight= 0 ;
            $(".list-card",list).each(function(i,card){
                cardsheight += $(card).height();
            });
            return cardsheight + $(".list-header",list).height() + $(".open-card-composer",list).height();
        }
    }

  }
  
  $( window ).load( wrapListsToFit ).resize(wrapListsToFit);
}());

GreaseMonkey / Tampermonkey script to stack Trello lists two-or-more-high when there are more columns than fit on the screen. And to kill the scroll-bar.