Resizable tiles



  • For those of you who want to resize tiles to make the most out of it. B) [i]Note: It only works for horizontal and vertical tiling. Grid is not supported yet. I may add it on request.[/i] CSS: [code] .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; } [/code] JS: [code] (function init_tile_resizing(){ var webpageviews = document.querySelector("#webpage-stack"); if (webpageviews === null) { window.setTimeout(init_tile_resizing, 200); return; } var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type !== "childList") return; if (mutation.addedNodes.length === 0) return; mutation.addedNodes[0].addEventListener("mousedown", dragStart, false); }); }); // observe webpageview's children: observer.observe(webpageviews, { childList: true }); })(); function dragStart(e) { if (!e.target.classList.contains("webpageview")) return; draggedTile = e.target; if (draggedTile.style.top !== "" && draggedTile.style.left !== "") tilingMode = "grid"; else if (draggedTile.style.top !== "") tilingMode = "vertical"; else if (draggedTile.style.left !== "") tilingMode = "horizontal"; document.addEventListener("mouseup", dragEnd, false); document.addEventListener("mousemove", drag, false); } function dragEnd() { document.removeEventListener("mousemove", drag, false); document.removeEventListener("mouseup", dragEnd, false); draggedTile = null; tilingMode = null; } function drag(e) { if (draggedTile === null) return; if (tilingMode === "horizontal") { ratio = 100 * e.clientX / e.view.innerWidth; var leftEdgeOfPreviousTab = parseInt(draggedTile.previousElementSibling.style.left); var leftEdgeOfNextTab = draggedTile.nextElementSibling.classList.contains("webpageview") ? parseInt(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 = (100-ratio) + "%"; } else if (tilingMode === "vertical") { ratio = 100 * e.clientY / e.view.innerHeight; var topEdgeOfPreviousTab = parseInt(draggedTile.previousElementSibling.style.top); var topEdgeOfNextTab = draggedTile.nextElementSibling.classList.contains("webpageview") ? parseInt(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 = (100-ratio) + "%"; } } [/code]



  • @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 =]




Log in to reply
 

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