Fossil SCM
When activating one of the new "in reply to" links, tag the newly-focused post with CSS class forumSelReplyTo so that it can be visually marked. Added default forumSelReplyTo CSS class which uses the same border as forumTime but with a dotted style.
Commit
1bf7985d109f3b3cee67bf55bd46c21aa82fcbf6b260b631b8ee0c3b8e96ca1b
Parent
69364ba515eb2bf…
2 files changed
+5
+30
-1
+5
| --- src/default_css.txt | ||
| +++ src/default_css.txt | ||
| @@ -741,10 +741,15 @@ | ||
| 741 | 741 | margin-top: 1ex; |
| 742 | 742 | } |
| 743 | 743 | div.forumSel { |
| 744 | 744 | background-color: #cef; |
| 745 | 745 | } |
| 746 | +div.forumSelReplyTo { | |
| 747 | +// This class gets set on DIV.forumPost entries when | |
| 748 | +// a "in reply to" link for that DIV gets clicked. | |
| 749 | + border: 1px dotted black; | |
| 750 | +} | |
| 746 | 751 | div.forumObs { |
| 747 | 752 | color: #bbb; |
| 748 | 753 | } |
| 749 | 754 | #capabilitySummary { |
| 750 | 755 | text-align: center; |
| 751 | 756 |
| --- src/default_css.txt | |
| +++ src/default_css.txt | |
| @@ -741,10 +741,15 @@ | |
| 741 | margin-top: 1ex; |
| 742 | } |
| 743 | div.forumSel { |
| 744 | background-color: #cef; |
| 745 | } |
| 746 | div.forumObs { |
| 747 | color: #bbb; |
| 748 | } |
| 749 | #capabilitySummary { |
| 750 | text-align: center; |
| 751 |
| --- src/default_css.txt | |
| +++ src/default_css.txt | |
| @@ -741,10 +741,15 @@ | |
| 741 | margin-top: 1ex; |
| 742 | } |
| 743 | div.forumSel { |
| 744 | background-color: #cef; |
| 745 | } |
| 746 | div.forumSelReplyTo { |
| 747 | // This class gets set on DIV.forumPost entries when |
| 748 | // a "in reply to" link for that DIV gets clicked. |
| 749 | border: 1px dotted black; |
| 750 | } |
| 751 | div.forumObs { |
| 752 | color: #bbb; |
| 753 | } |
| 754 | #capabilitySummary { |
| 755 | text-align: center; |
| 756 |
+30
-1
| --- src/forum.js | ||
| +++ src/forum.js | ||
| @@ -1,6 +1,7 @@ | ||
| 1 | 1 | (function(){ |
| 2 | + "use strict"; | |
| 2 | 3 | function absoluteY(obj){ |
| 3 | 4 | var top = 0; |
| 4 | 5 | if( obj.offsetParent ){ |
| 5 | 6 | do{ |
| 6 | 7 | top += obj.offsetTop; |
| @@ -14,6 +15,34 @@ | ||
| 14 | 15 | var h = x[0].scrollHeight; |
| 15 | 16 | var y = absoluteY(x[0]); |
| 16 | 17 | if( w>h ) y = y + (h-w)/2; |
| 17 | 18 | if( y>0 ) window.scrollTo(0, y); |
| 18 | 19 | } |
| 19 | -})() | |
| 20 | + | |
| 21 | + // Set up click handlers for "in reply to" links... | |
| 22 | + var respondeeSelectClass = 'forumSelReplyTo' | |
| 23 | + /* CSS class to apply to selected "in reply to" post. */; | |
| 24 | + var responseLinkClick = function(){ | |
| 25 | + /** This <A> tag has an href in the form /something#post-{UID}, | |
| 26 | + and post-{UID} is the ID of a forum post DIV on this | |
| 27 | + page. Here we fish that ID out of this anchor, | |
| 28 | + unmark any currently-selected DIV, and mark this anchor's | |
| 29 | + corresponding DIV. | |
| 30 | + */ | |
| 31 | + var m = /#post-\w+/.exec(this.href); | |
| 32 | + if(!m || !m.length) return /*unexpected*/; | |
| 33 | + // Remove respondeeSelectClass from all entries... | |
| 34 | + document.querySelectorAll('.forumPost.'+respondeeSelectClass) | |
| 35 | + .forEach(function(e){ | |
| 36 | + e.classList.remove(respondeeSelectClass); | |
| 37 | + }); | |
| 38 | + // Add respondeeSelectClass to the matching entry... | |
| 39 | + document.querySelectorAll(m[0]) | |
| 40 | + .forEach(function(e){ | |
| 41 | + e.classList.add(respondeeSelectClass); | |
| 42 | + }); | |
| 43 | + }; | |
| 44 | + document.querySelectorAll('a[href*="#post-"]') | |
| 45 | + .forEach(function(e){ | |
| 46 | + e.addEventListener( "click", responseLinkClick, false ); | |
| 47 | + }); | |
| 48 | +})(); | |
| 20 | 49 |
| --- src/forum.js | |
| +++ src/forum.js | |
| @@ -1,6 +1,7 @@ | |
| 1 | (function(){ |
| 2 | function absoluteY(obj){ |
| 3 | var top = 0; |
| 4 | if( obj.offsetParent ){ |
| 5 | do{ |
| 6 | top += obj.offsetTop; |
| @@ -14,6 +15,34 @@ | |
| 14 | var h = x[0].scrollHeight; |
| 15 | var y = absoluteY(x[0]); |
| 16 | if( w>h ) y = y + (h-w)/2; |
| 17 | if( y>0 ) window.scrollTo(0, y); |
| 18 | } |
| 19 | })() |
| 20 |
| --- src/forum.js | |
| +++ src/forum.js | |
| @@ -1,6 +1,7 @@ | |
| 1 | (function(){ |
| 2 | "use strict"; |
| 3 | function absoluteY(obj){ |
| 4 | var top = 0; |
| 5 | if( obj.offsetParent ){ |
| 6 | do{ |
| 7 | top += obj.offsetTop; |
| @@ -14,6 +15,34 @@ | |
| 15 | var h = x[0].scrollHeight; |
| 16 | var y = absoluteY(x[0]); |
| 17 | if( w>h ) y = y + (h-w)/2; |
| 18 | if( y>0 ) window.scrollTo(0, y); |
| 19 | } |
| 20 | |
| 21 | // Set up click handlers for "in reply to" links... |
| 22 | var respondeeSelectClass = 'forumSelReplyTo' |
| 23 | /* CSS class to apply to selected "in reply to" post. */; |
| 24 | var responseLinkClick = function(){ |
| 25 | /** This <A> tag has an href in the form /something#post-{UID}, |
| 26 | and post-{UID} is the ID of a forum post DIV on this |
| 27 | page. Here we fish that ID out of this anchor, |
| 28 | unmark any currently-selected DIV, and mark this anchor's |
| 29 | corresponding DIV. |
| 30 | */ |
| 31 | var m = /#post-\w+/.exec(this.href); |
| 32 | if(!m || !m.length) return /*unexpected*/; |
| 33 | // Remove respondeeSelectClass from all entries... |
| 34 | document.querySelectorAll('.forumPost.'+respondeeSelectClass) |
| 35 | .forEach(function(e){ |
| 36 | e.classList.remove(respondeeSelectClass); |
| 37 | }); |
| 38 | // Add respondeeSelectClass to the matching entry... |
| 39 | document.querySelectorAll(m[0]) |
| 40 | .forEach(function(e){ |
| 41 | e.classList.add(respondeeSelectClass); |
| 42 | }); |
| 43 | }; |
| 44 | document.querySelectorAll('a[href*="#post-"]') |
| 45 | .forEach(function(e){ |
| 46 | e.addEventListener( "click", responseLinkClick, false ); |
| 47 | }); |
| 48 | })(); |
| 49 |