js/main.js
// And dragging cards over collapsed lists (TODO - Separate into own method too)
And dragging cards over collapsed lists (TODO - Separate into own method too)
And dragging cards over collapsed lists ( TODO - Separate into own method too )
function hideLists() {
	if (!document.querySelector('.collapse-icon', '#board')) {
		let	afterFirstDelimiter = document.URL.indexOf('/b/') + 3,
			beforeLastDelimiter = document.URL.lastIndexOf('/'),
			boardID = document.URL.substring(afterFirstDelimiter, beforeLastDelimiter);
		let listIndex = 0;
		chrome.storage.sync.get('trellox', function (listClosed) {
			let closedListData = listClosed.trellox ?? {};
			document.querySelectorAll('.list-header-name', '#board').forEach(function (thisList) {
				listIndex++;
				let listName = boardID + '-' + listIndex;
				if (closedListData[listName]) {
					thisList.parentNode.parentNode.parentNode.classList.add('collapsed');
				}
				let collapseIcon = document.createElement('div');
				collapseIcon.className = 'collapse-icon'; 
				collapseIcon.addEventListener('click', function (event) {
					if (Object.keys(closedListData).length === 0) {
						closedListData[listName] = true;
					}
					else {
						closedListData[listName] = (typeof closedListData[listName] === 'undefined') ? true : !closedListData[listName];
					}
					chrome.storage.sync.set({'trellox': closedListData}, function () {
						if (chrome.runtime.error || chrome.runtime.lastError) {
						}
						else {
							event.target.parentNode.parentNode.parentNode.classList.toggle('collapsed');
						}
					});
				});
				thisList.parentNode.parentNode.parentNode.setAttribute('draggable', true);
				thisList.parentNode.insertBefore(collapseIcon, thisList);
			});
		});
		let listClosed, openList;
		$('.list-card', '#board').draggable({revert: true, revertDuration: 0 });
		$('.list-wrapper', '#board').droppable({
			tolerance: 'pointer',
			over: (event) => {
				if (event.target.classList.contains('collapsed')) {
					openList = setTimeout(() => {
						event.target.classList.remove('collapsed');
						listClosed = true;
					}, 200);
				}
				else {
					listClosed = false;
				}
			},
			out: (event) => {
				clearTimeout(openList);
				if (listClosed) {
					event.target.classList.add('collapsed');
				}
			},
			drop: (event) => {
				clearTimeout(openList);
				if (listClosed) {
					event.target.classList.add('collapsed');
				}
			}
		});
	}
}
function hideLists ( ) { if ( ! document . querySelector ( '.collapse-icon' , '#board' ) ) { let afterFirstDelimiter = document . URL . indexOf ( '/b/' ) + 3 , beforeLastDelimiter = document . URL . lastIndexOf ( '/' ) , boardID = document . URL . substring ( afterFirstDelimiter , beforeLastDelimiter ) ; let listIndex = 0 ; chrome . storage . sync . get ( 'trellox' , function ( listClosed ) { let closedListData = listClosed . trellox ?? { } ; document . querySelectorAll ( '.list-header-name' , '#board' ) . forEach ( function ( thisList ) { listIndex ++ ; let listName = boardID + '-' + listIndex ; if ( closedListData [ listName ] ) { thisList . parentNode . parentNode . parentNode . classList . add ( 'collapsed' ) ; } let collapseIcon = document . createElement ( 'div' ) ; collapseIcon . className = 'collapse-icon' ; collapseIcon . addEventListener ( 'click' , function ( event ) { if ( Object . keys ( closedListData ) . length === 0 ) { closedListData [ listName ] = true ; } else { closedListData [ listName ] = ( typeof closedListData [ listName ] === 'undefined' ) ? true : ! closedListData [ listName ] ; } chrome . storage . sync . set ( { 'trellox' : closedListData } , function ( ) { if ( chrome . runtime . error || chrome . runtime . lastError ) { } else { event . target . parentNode . parentNode . parentNode . classList . toggle ( 'collapsed' ) ; } } ) ; } ) ; thisList . parentNode . parentNode . parentNode . setAttribute ( 'draggable' , true ) ; thisList . parentNode . insertBefore ( collapseIcon , thisList ) ; } ) ; } ) ; let listClosed , openList ; $ ( '.list-card' , '#board' ) . draggable ( { revert : true , revertDuration : 0 } ) ; $ ( '.list-wrapper' , '#board' ) . droppable ( { tolerance : 'pointer' , over : ( event ) => { if ( event . target . classList . contains ( 'collapsed' ) ) { openList = setTimeout ( ( ) => { event . target . classList . remove ( 'collapsed' ) ; listClosed = true ; } , 200 ) ; } else { listClosed = false ; } } , out : ( event ) => { clearTimeout ( openList ) ; if ( listClosed ) { event . target . classList . add ( 'collapsed' ) ; } } , drop : ( event ) => { clearTimeout ( openList ) ; if ( listClosed ) { event . target . classList . add ( 'collapsed' ) ; } } } ) ; } }
And dragging cards over collapsed lists (TODO - Separate into own method too)
And dragging cards over collapsed lists ( TODO - Separate into own method too )
// If there are no collapsed Lists... // Use URL to find the boardID //willClose = false; // First get our chrome data // For each list in board // Increment our naming index // Create a unique listID from boardID + List Name // If this List is closed, collapse it // Lol // Create a collapse icon // Add a css class // Add a click handler for the icon // if we have an empty object, it means the list hasn't been handled before // If no value, set to true, else get inverse of current value // Set storage data // Toggle the 'collapsed' class on successful save // Insert collapse icon // Open List after a short delay when a Card dragged over it // Create a new event since a Content Script can't access JS on the parent page. // Make all Cards draggable. Put Cards back immediately on unsuccessful drop // Make all Lists droppable // Watch the area below the pointer // When dragging over a closed List, open it after a short period // When leaving a previously closed List, clear the timeout and re-close it // When dropping the Card on that List, clear the timeout and re-close it