This PR uses JavaScript to collapse hashes, outpoints, satpoints, addresses, and inscription IDs.
Any node which has exactly one child node which is a text mode that matches a regex matching the above is eligible to be collapsed. A data-original attribute is added with the original text, and on resize, the size of the element is measured, and if smaller than the size of the text content, the text content is abridged in the middle with ….
Since the text content is now changed, we need to fix clipboard copying, so that users can copy the original unabridged text. This is accomplished by intersecting clipboard copy events, and, if they target a collapsible node, replacing the copied text with the original text. One failing of this approach is that if you copy multiple nodes, the target of the copy command will not be a collapsible node, but it may contain collapsible nodes, so the copied text will may contain abridged text. We could fix that by traversing the nodes which are copied and replacing any copied text with original text, but I think this PR is still an improvement, and we should merge it and fix that issue in a future PR.
Another thing which we should fix, I think also in a future PR, is not using heuristics to find collapsible nodes, and instead relying on the presence of a CSS class to determine if a node is collapsible. Since all collapsible items already have the CSS monospace class, we can simply replace monospace on collapsible classes with collapsible. (Or maybe collapse, since it's shorter and I can never spell "collapsible" on the first try.)
One thing which I'm not sure we can fully fix, but we should try, is visible resizing of the page after elements are collapsed. Text is collapsed after the page first renders, so element movement after collapsing is visible.
Edit: Okay, I actually fixed visible resizing. I changed our JS from running as a defer script to running after the DOMContentLoaded event. This runs our JS after the DOM is loaded, but earlier than defer scripts, which wait for images, other scripts, stylesheets, etc. Apparently DOMContentLoaded runs before first render, so our JS can modify the HTML without the original HTML being visible.
before and after
casey
commented
2 weeks ago
This PR uses JavaScript to collapse hashes, outpoints, satpoints, addresses, and inscription IDs.
Any node which has exactly one child node which is a text mode that matches a regex matching the above is eligible to be collapsed. A
data-originalattribute is added with the original text, and on resize, the size of the element is measured, and if smaller than the size of the text content, the text content is abridged in the middle with….Since the text content is now changed, we need to fix clipboard copying, so that users can copy the original unabridged text. This is accomplished by intersecting clipboard copy events, and, if they target a collapsible node, replacing the copied text with the original text. One failing of this approach is that if you copy multiple nodes, the target of the copy command will not be a collapsible node, but it may contain collapsible nodes, so the copied text will may contain abridged text. We could fix that by traversing the nodes which are copied and replacing any copied text with original text, but I think this PR is still an improvement, and we should merge it and fix that issue in a future PR.
Another thing which we should fix, I think also in a future PR, is not using heuristics to find collapsible nodes, and instead relying on the presence of a CSS class to determine if a node is collapsible. Since all collapsible items already have the CSS monospace class, we can simply replace
monospaceon collapsible classes withcollapsible. (Or maybecollapse, since it's shorter and I can never spell "collapsible" on the first try.)One thing which I'm not sure we can fully fix, but we should try, is visible resizing of the page after elements are collapsed. Text is collapsed after the page first renders, so element movement after collapsing is visible.
Edit: Okay, I actually fixed visible resizing. I changed our JS from running as a
deferscript to running after the DOMContentLoaded event. This runs our JS after the DOM is loaded, but earlier than defer scripts, which wait for images, other scripts, stylesheets, etc. Apparently DOMContentLoaded runs before first render, so our JS can modify the HTML without the original HTML being visible.before and after
 