Resizable tiles


  • Moderator

    For those of you who want to resize tiles to make the most out of it. B)
    Note: It only works for horizontal and vertical tiling. Grid is not supported yet. I may add it on request.

    CSS:

    .webpageview.tiled {
    	border: 1px solid transparent;
    }
    .webpageview.tiled.active {
    	border: 1px solid var(--colorAccentBg);
    	outline: 1px solid var(--colorAccentBg);
    }
    .webpageview.tiled.active::after {
    	outline: none !important;
    	box-shadow: none !important;
    }
    
    .webpageview.tiled:not([style~="left: 0%;"]):not([style~="top: 0%;"])::before {
    	z-index: 1;
    	display: inline-block;
    	position: absolute;
    	content: '';
    	color: transparent;
    	outline-offset: -3px;
    	pointer-events: auto;
    }
    
    /* horizontal tiling */
    .webpageview.tiled[style~="left:"]:not([style~="left: 0%;"]):not([style~="top:"])::before {
    	height: 100%;
    	width: 5px;
    	top: 0;
    	bottom: 0;
    	left: -2px;
    	cursor: ew-resize;
    }
    
    /* vertical tiling */
    .webpageview.tiled[style~="top:"]:not([style~="top: 0%;"]):not([style~="left:"])::before {
    	width: 100%;
    	height: 5px;
    	left: 0;
    	right: 0;
    	top: -2px;
    	cursor: ns-resize;
    }
    
    /* grid tiling */
    .webpageview.tiled[style~="top:"][style~="left:"]:not([style~="top: 0%;"]):not([style~="left: 0%;"])::before {
    	height: 100%;
    	width: 5px;
    	top: 0;
    	bottom: 0;
    	left: -2px;
    	/*cursor: ew-resize;*/
    }
    .webpageview.tiled[style~="top:"][style~="left:"]::after {
    	position: relative;
        content: "";
    	width: 100%;
    	height: 5px;
    	left: 0;
    	right: 0;
    	top: -2px;
    	/*cursor: ns-resize;*/
    }
    

    JS:

    (function init_tile_resizing(){
    	let webpageViewStack = document.querySelector("#webpage-stack");
    	if (webpageViewStack === null) {
    		window.setTimeout(init_tile_resizing, 200);
    		return;
    	}
    
    	// initialize current tabs
    	webpageViewStack.childNodes.forEach(function(webpageview){
    		handleTiling(webpageview);
    	});
    
    	// setup initialization of future tabs
    	let tabCountObserver = new MutationObserver(function(mutations) {
    		mutations.forEach(function(webpageview) {
    		    if (webpageview.type !== "childList")		return;
    		    if (webpageview.addedNodes.length === 0)	return;
    			if (webpageview.addedNodes.length > 1)		console.log("There are more tabs than what's handled!");
    
    			handleTiling(webpageview.addedNodes[0]);
    		});
    	});
    	
    	// observe webpageview's children:
    	tabCountObserver.observe(webpageViewStack, { childList: true });
    
    	console.log("Tile resizing initialized. All systems go! :)");
    })();
    
    var tilingObserver = new MutationObserver(function(mutations) {
    	mutations.forEach(function(mutation) {
    		handleTiling(mutation.target);
    	});
    });
    
    function handleTiling(tab){
    
    	if (tab.classList.contains("tiled")) {
    		//console.log("Handling tile resize for ", tab);
    		tab.addEventListener("mousedown", dragStart, false);
    	}
    	else {
    		//console.log("No tiling to handle for ", tab);
    		tab.removeEventListener("mousedown", dragStart, false);
    	}
    	tilingObserver.observe(tab, { attributes: true, attributeFilter: ["class"] });
    }
    
    function dragStart(e) {
    	if (!e.target.classList.contains("tiled")) return;
    
    	draggedTile = e.target;
    	
    	if		(draggedTile.style.top !== "" && draggedTile.style.left !== "")	return; //tilingMode = "grid";
    	else if (draggedTile.style.top !== "") 									tilingMode = "vertical";
    	else if (draggedTile.style.left !== "")									tilingMode = "horizontal";
    	
    	//console.log("drag start");
        
        document.addEventListener("mouseup", dragEnd, false);
        document.addEventListener("mousemove", drag, false);
    }
    
    function dragEnd() {
    	document.removeEventListener("mousemove", drag, false);
    	document.removeEventListener("mouseup", dragEnd, false);
    	
    	//console.log("drag end");
    
    	draggedTile = null;
    	tilingMode = null;
    }
    
    function drag(e) {
    
    	if (draggedTile === null) return;
    
    	if (tilingMode === "horizontal")
    	{
    		ratio = 100 * e.clientX / e.view.innerWidth;
    
    	    let leftEdgeOfPreviousTab = parseFloat(draggedTile.previousElementSibling.style.left);
    	    let leftEdgeOfNextTab = draggedTile.nextElementSibling.classList.contains("webpageview") && draggedTile.nextElementSibling.classList.contains("tiled") ?
    	    						parseFloat(draggedTile.nextElementSibling.style.left) : 100;
    
    	    if 		(ratio > 98)							ratio = 98;
    	    else if (ratio < leftEdgeOfPreviousTab + 2)		ratio = leftEdgeOfPreviousTab + 2;
    	    else if (ratio > leftEdgeOfNextTab - 2)			ratio = leftEdgeOfNextTab - 2;
    
    	    draggedTile.previousElementSibling.style.width = ratio - leftEdgeOfPreviousTab + "%";
    	    draggedTile.style.left = ratio + "%";
    	    draggedTile.style.width = (leftEdgeOfNextTab-ratio) + "%";
    	}
        else if (tilingMode === "vertical")
        {
        	ratio = 100 * e.clientY / e.view.innerHeight;
    
    	    let topEdgeOfPreviousTab = parseFloat(draggedTile.previousElementSibling.style.top);
    	    let topEdgeOfNextTab = draggedTile.nextElementSibling.classList.contains("webpageview") && draggedTile.nextElementSibling.classList.contains("tiled") ?
    	    					   parseFloat(draggedTile.nextElementSibling.style.top) : 100;
    
    	    if 		(ratio > 98)							ratio = 98;
    	    else if (ratio < topEdgeOfPreviousTab + 2)		ratio = topEdgeOfPreviousTab + 2;
    	    else if (ratio > topEdgeOfNextTab - 2)			ratio = topEdgeOfNextTab - 2;
    
    	    draggedTile.previousElementSibling.style.height = ratio - topEdgeOfPreviousTab + "%";
    	    draggedTile.style.top = ratio + "%";
    	    draggedTile.style.height = (topEdgeOfNextTab-ratio) + "%";
        }
    	else if (tilingMode === "grid")
    	{
    		// TODO
    		//let tiledViews = document.querySelectorAll(".webpageview.tiled.visible");
     	}
    }
    


  • @Christoph142:

    Note: (…) I may add it on request.

    Request!
    ::)



  • @QuHno

    I request also.

    :)



  • Thanks for the tips, i just can't find out where to apply the custom styles and JS

    Cheers



  • Is there a resource for where I could learn to implement the CSS and JS needed for this? Also do I need to use both? Sorry if these are addressed elsewhere =]


  • Moderator



  • Unfortunately, It does not work well in latest version.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.