Fossil SCM
Internal cleanups and docs to the open-in-pikchrshow link bits. No functional or visible changes.
Commit
d81c80651a00ae360c67901713086a704aaf72fe8832902c67cc5b59965302c7
Parent
c0f192102af8cc4…
1 file changed
+37
-14
+37
-14
| --- src/fossil.pikchr.js | ||
| +++ src/fossil.pikchr.js | ||
| @@ -68,16 +68,38 @@ | ||
| 68 | 68 | source code for the link's pikchr in |
| 69 | 69 | window.sessionStorage['pikchr-xfer'] then open |
| 70 | 70 | /pikchrshow?fromSession to trigger loading of that pikchr. |
| 71 | 71 | */ |
| 72 | 72 | f.clickPikchrShow = function(ev){ |
| 73 | - const pId = this.dataset['pikchrid']; | |
| 73 | + const pId = this.dataset['pikchrid'] /* ID of the associated pikchr source code element */; | |
| 74 | 74 | if(!pId) return; |
| 75 | 75 | const ePikchr = this.parentNode.parentNode.querySelector('#'+pId); |
| 76 | 76 | if(!ePikchr) return; |
| 77 | - window.sessionStorage.setItem('pikchr-xfer', ePikchr.innerText); | |
| 78 | 77 | ev.stopPropagation() /* keep pikchr source view from toggling */; |
| 78 | + window.sessionStorage.setItem('pikchr-xfer', ePikchr.innerText); | |
| 79 | + /* | |
| 80 | + After returning from this function the link element will | |
| 81 | + open [/pikchrshow?fromSession], and pikchrshow will extract | |
| 82 | + the pikchr source code from sessionStorage['pikchr-xfer']. | |
| 83 | + | |
| 84 | + Quirks of this ^^^ design: | |
| 85 | + | |
| 86 | + We use only a single slot in sessionStorage. We could | |
| 87 | + alternately use a key like pikchr-$pId and pass that key on | |
| 88 | + to /pikchrshow via fromSession=pikchr-$pId, but that would | |
| 89 | + eventually lead to stale session entries if loading of | |
| 90 | + pikchrshow were interrupted at an untimely point. The | |
| 91 | + down-side of _not_ doing that is that some user (or | |
| 92 | + automation) options multiple "open in pikchrshow" links | |
| 93 | + rapidly enough, the will open the same pikchr (the one which | |
| 94 | + was stored in the session's slot most recently). The | |
| 95 | + current approach should be fine for normal human interaction | |
| 96 | + speeds, but if it proves to be a problem we can instead use | |
| 97 | + the above-described approach of storing each pikchr in its | |
| 98 | + own session slot and simply accept that there may be stale | |
| 99 | + entries at some point. | |
| 100 | + */ | |
| 79 | 101 | }; |
| 80 | 102 | }; |
| 81 | 103 | if(!svg) svg = 'svg.pikchr'; |
| 82 | 104 | if('string' === typeof svg){ |
| 83 | 105 | document.querySelectorAll(svg).forEach((e)=>f.call(this, e)); |
| @@ -88,23 +110,24 @@ | ||
| 88 | 110 | } |
| 89 | 111 | if(svg.dataset.pikchrProcessed){ |
| 90 | 112 | return this; |
| 91 | 113 | } |
| 92 | 114 | svg.dataset.pikchrProcessed = 1; |
| 93 | - const parent = svg.parentNode.parentNode /* outermost div.pikchr-wrapper */; | |
| 94 | - const srcView = parent ? svg.parentNode.nextElementSibling : undefined; | |
| 95 | - if(!srcView || !srcView.classList.contains('pikchr-src')){ | |
| 115 | + const parent = svg.parentNode.parentNode /* outermost DIV.pikchr-wrapper */; | |
| 116 | + const srcView = parent ? svg.parentNode.nextElementSibling /* DIV.pikchr-src */ : undefined; | |
| 117 | + if(srcView && srcView.classList.contains('pikchr-src')){ | |
| 96 | 118 | /* Without this element, there's nothing for us to do here. */ |
| 97 | - return this; | |
| 98 | - } | |
| 99 | - parent.addEventListener('click', f.parentClick, false); | |
| 100 | - const eSpan = srcView.querySelector('span'); | |
| 101 | - if(window.sessionStorage && eSpan){ | |
| 102 | - const openLink = eSpan.querySelector('a'); | |
| 103 | - if( openLink ){ | |
| 104 | - D.removeClass(eSpan, 'hidden'); | |
| 105 | - openLink.addEventListener('click', f.clickPikchrShow, false); | |
| 119 | + parent.addEventListener('click', f.parentClick, false); | |
| 120 | + const eSpan = window.sessionStorage | |
| 121 | + ? srcView.querySelector('span') /* "open in..." link wrapper */ | |
| 122 | + : undefined; | |
| 123 | + if(eSpan){ | |
| 124 | + const openLink = eSpan.querySelector('a'); | |
| 125 | + if(openLink){ | |
| 126 | + openLink.addEventListener('click', f.clickPikchrShow, false); | |
| 127 | + eSpan.classList.remove('hidden'); | |
| 128 | + } | |
| 106 | 129 | } |
| 107 | 130 | } |
| 108 | 131 | return this; |
| 109 | 132 | }; |
| 110 | 133 | })(window.fossil); |
| 111 | 134 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -68,16 +68,38 @@ | |
| 68 | source code for the link's pikchr in |
| 69 | window.sessionStorage['pikchr-xfer'] then open |
| 70 | /pikchrshow?fromSession to trigger loading of that pikchr. |
| 71 | */ |
| 72 | f.clickPikchrShow = function(ev){ |
| 73 | const pId = this.dataset['pikchrid']; |
| 74 | if(!pId) return; |
| 75 | const ePikchr = this.parentNode.parentNode.querySelector('#'+pId); |
| 76 | if(!ePikchr) return; |
| 77 | window.sessionStorage.setItem('pikchr-xfer', ePikchr.innerText); |
| 78 | ev.stopPropagation() /* keep pikchr source view from toggling */; |
| 79 | }; |
| 80 | }; |
| 81 | if(!svg) svg = 'svg.pikchr'; |
| 82 | if('string' === typeof svg){ |
| 83 | document.querySelectorAll(svg).forEach((e)=>f.call(this, e)); |
| @@ -88,23 +110,24 @@ | |
| 88 | } |
| 89 | if(svg.dataset.pikchrProcessed){ |
| 90 | return this; |
| 91 | } |
| 92 | svg.dataset.pikchrProcessed = 1; |
| 93 | const parent = svg.parentNode.parentNode /* outermost div.pikchr-wrapper */; |
| 94 | const srcView = parent ? svg.parentNode.nextElementSibling : undefined; |
| 95 | if(!srcView || !srcView.classList.contains('pikchr-src')){ |
| 96 | /* Without this element, there's nothing for us to do here. */ |
| 97 | return this; |
| 98 | } |
| 99 | parent.addEventListener('click', f.parentClick, false); |
| 100 | const eSpan = srcView.querySelector('span'); |
| 101 | if(window.sessionStorage && eSpan){ |
| 102 | const openLink = eSpan.querySelector('a'); |
| 103 | if( openLink ){ |
| 104 | D.removeClass(eSpan, 'hidden'); |
| 105 | openLink.addEventListener('click', f.clickPikchrShow, false); |
| 106 | } |
| 107 | } |
| 108 | return this; |
| 109 | }; |
| 110 | })(window.fossil); |
| 111 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -68,16 +68,38 @@ | |
| 68 | source code for the link's pikchr in |
| 69 | window.sessionStorage['pikchr-xfer'] then open |
| 70 | /pikchrshow?fromSession to trigger loading of that pikchr. |
| 71 | */ |
| 72 | f.clickPikchrShow = function(ev){ |
| 73 | const pId = this.dataset['pikchrid'] /* ID of the associated pikchr source code element */; |
| 74 | if(!pId) return; |
| 75 | const ePikchr = this.parentNode.parentNode.querySelector('#'+pId); |
| 76 | if(!ePikchr) return; |
| 77 | ev.stopPropagation() /* keep pikchr source view from toggling */; |
| 78 | window.sessionStorage.setItem('pikchr-xfer', ePikchr.innerText); |
| 79 | /* |
| 80 | After returning from this function the link element will |
| 81 | open [/pikchrshow?fromSession], and pikchrshow will extract |
| 82 | the pikchr source code from sessionStorage['pikchr-xfer']. |
| 83 | |
| 84 | Quirks of this ^^^ design: |
| 85 | |
| 86 | We use only a single slot in sessionStorage. We could |
| 87 | alternately use a key like pikchr-$pId and pass that key on |
| 88 | to /pikchrshow via fromSession=pikchr-$pId, but that would |
| 89 | eventually lead to stale session entries if loading of |
| 90 | pikchrshow were interrupted at an untimely point. The |
| 91 | down-side of _not_ doing that is that some user (or |
| 92 | automation) options multiple "open in pikchrshow" links |
| 93 | rapidly enough, the will open the same pikchr (the one which |
| 94 | was stored in the session's slot most recently). The |
| 95 | current approach should be fine for normal human interaction |
| 96 | speeds, but if it proves to be a problem we can instead use |
| 97 | the above-described approach of storing each pikchr in its |
| 98 | own session slot and simply accept that there may be stale |
| 99 | entries at some point. |
| 100 | */ |
| 101 | }; |
| 102 | }; |
| 103 | if(!svg) svg = 'svg.pikchr'; |
| 104 | if('string' === typeof svg){ |
| 105 | document.querySelectorAll(svg).forEach((e)=>f.call(this, e)); |
| @@ -88,23 +110,24 @@ | |
| 110 | } |
| 111 | if(svg.dataset.pikchrProcessed){ |
| 112 | return this; |
| 113 | } |
| 114 | svg.dataset.pikchrProcessed = 1; |
| 115 | const parent = svg.parentNode.parentNode /* outermost DIV.pikchr-wrapper */; |
| 116 | const srcView = parent ? svg.parentNode.nextElementSibling /* DIV.pikchr-src */ : undefined; |
| 117 | if(srcView && srcView.classList.contains('pikchr-src')){ |
| 118 | /* Without this element, there's nothing for us to do here. */ |
| 119 | parent.addEventListener('click', f.parentClick, false); |
| 120 | const eSpan = window.sessionStorage |
| 121 | ? srcView.querySelector('span') /* "open in..." link wrapper */ |
| 122 | : undefined; |
| 123 | if(eSpan){ |
| 124 | const openLink = eSpan.querySelector('a'); |
| 125 | if(openLink){ |
| 126 | openLink.addEventListener('click', f.clickPikchrShow, false); |
| 127 | eSpan.classList.remove('hidden'); |
| 128 | } |
| 129 | } |
| 130 | } |
| 131 | return this; |
| 132 | }; |
| 133 | })(window.fossil); |
| 134 |