Created
September 5, 2022 12:13
-
-
Save lgedeon/4bd98959f24f28b84524a40eb3389434 to your computer and use it in GitHub Desktop.
Split page content into columns. Reset columns at the (approximate) end of each page. Scroll to top of each page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wp-site-blocks { | |
| column-width: 12em; | |
| column-gap: 2em; | |
| line-height: 1.1em; | |
| } | |
| .horizontal-break { | |
| column-span: all; | |
| height: 100px; | |
| } | |
| .horizontal-break.break-1 { | |
| column-span: all; | |
| height: 10px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function insertBreaks() { | |
| var insertAt = 0; // Insert once at top of document. | |
| var count = 0; | |
| var doc = document.createElement('div'); | |
| var html = document.getElementsByClassName("wp-site-blocks")[0] | |
| var node; | |
| // Remove old elements. | |
| document.querySelectorAll('.horizontal-break').forEach(element => { | |
| element.remove(); | |
| }); | |
| doc.innerHTML = html.innerHTML; | |
| var nodes = document.createTreeWalker(doc, NodeFilter.SHOW_TEXT, null, null); | |
| while (node = nodes.nextNode()) { | |
| if (insertAt <= node.nodeValue.length) { | |
| var insert = document.createElement('div'); | |
| insert.classList = "horizontal-break break-"+ ++count; | |
| insertAt = node.nodeValue.indexOf(" ",insertAt); | |
| // Found where to insert the element. Split the text node | |
| var before = document.createTextNode(node.nodeValue.substr(0, insertAt)); | |
| node.parentNode.insertBefore(insert, node); | |
| node.parentNode.insertBefore(before, insert); | |
| node.nodeValue = node.nodeValue.substr(insertAt); | |
| // Reset insert counter. | |
| insertAt = ( window.innerHeight + window.innerWidth * 2 ) - node.nodeValue.length; | |
| } else { | |
| insertAt -= node.nodeValue.length; | |
| } | |
| } | |
| // Restore HTML tags as they get stripped | |
| html.innerHTML = '<html>' + doc.innerHTML + '</html>'; | |
| } | |
| insertBreaks(); | |
| var timeout = false, // holder for timeout id | |
| delay = 250, // delay after event is "complete" to run callback | |
| calls = 0; | |
| // window.resize event listener | |
| window.addEventListener('resize', function() { | |
| // clear the timeout | |
| clearTimeout(timeout); | |
| // start timing for event "completion" | |
| timeout = setTimeout(insertBreaks, delay); | |
| }); | |
| (function($) { | |
| $('body').keydown(function(e){ | |
| if(e.keyCode == 38){ | |
| e.preventDefault(); | |
| // user has up arrow | |
| var links = document.getElementsByClassName('horizontal-break'); | |
| link = findPrevious(links); | |
| animate(link); | |
| } | |
| if(e.keyCode == 32 || e.keyCode == 40){ | |
| e.preventDefault(); | |
| // user has pressed space or down-arrow | |
| var links = document.getElementsByClassName('horizontal-break'); | |
| link = findNext(links); | |
| animate(link); | |
| } | |
| }); | |
| function findNext(links) { | |
| for(var i = 0 ; i < links.length ; i++) { | |
| var t = links[i].getClientRects()[0].top; | |
| if(t >= 40) return links[i]; | |
| } | |
| } | |
| function findPrevious(links) { | |
| for(var i = links.length-1 ; i >= 0 ; i--) { | |
| var t = links[i].getClientRects()[0].top; | |
| if(t < -20) return links[i]; | |
| } | |
| } | |
| function animate(link) { | |
| if( link ) { | |
| $('html,body').animate({ | |
| scrollTop: link.offsetTop | |
| }); | |
| } | |
| } | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment