Fossil SCM

Added a tiny margin above the forum expand/collapse button. Docs and minor cleanups to the new forum JS code. Added a disabled, but potentially interesting, long-press handler in the forum code to toggle expand/collapse.

stephan 2020-07-09 20:39 trunk

Commit 8de6b9084a733e3539d13ea3ad8629fc65546ba91bc7136b2b223b54bba9523b

Parent cd9cb4d24ad6cfc…

2 files changed +1 +48 -15

~ src/default.css ~ src/fossil.page.forumpost.js

M src/default.css

		--- src/default.css
		+++ src/default.css
		@@ -775,10 +775,11 @@
775	775	div.forumHierRoot > div > form {
776	776	margin: 0.5em 0;
777	777	}
778	778	button.forum-post-collapser {
779	779	align-self: flex-start;
	780	+ margin-top: 0.1em;
780	781	}
781	782	div.forumPostBody{
782	783	max-height: 50em;
783	784	overflow: auto;
784	785	}
785	786

	--- src/default.css
	+++ src/default.css
	@@ -775,10 +775,11 @@
775	div.forumHierRoot > div > form {
776	margin: 0.5em 0;
777	}
778	button.forum-post-collapser {
779	align-self: flex-start;

780	}
781	div.forumPostBody{
782	max-height: 50em;
783	overflow: auto;
784	}
785

	--- src/default.css
	+++ src/default.css
	@@ -775,10 +775,11 @@
775	div.forumHierRoot > div > form {
776	margin: 0.5em 0;
777	}
778	button.forum-post-collapser {
779	align-self: flex-start;
780	margin-top: 0.1em;
781	}
782	div.forumPostBody{
783	max-height: 50em;
784	overflow: auto;
785	}
786

M src/fossil.page.forumpost.js

+48 -15

		--- src/fossil.page.forumpost.js
		+++ src/fossil.page.forumpost.js
		@@ -1,29 +1,62 @@
1	1	(function(F/the fossil object/){
2	2	"use strict";
3	3	/* JS code for /forumpage and friends. Requires fossil.dom. */
4	4	const P = fossil.page, D = fossil.dom;
5		-
	5	+
6	6	F.onPageLoad(function(){
7	7	const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8		- const getButtonHandler = function(contentElem){
	8	+ const getButtonHandler = function(btn, contentElem){
9	9	return function(ev){
10		- const btn = ev.target;
	10	+ if(ev) ev.preventDefault();
11	11	const isExpanded = D.hasClass(contentElem,'expanded');
12	12	btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
13	13	contentElem.classList.toggle('expanded');
14		- };
15		- };
16		- const doCollapser = function(forumPostWrapper){
17		- const content = forumPostWrapper.querySelector('div.forumPostBody');
18		- if(!scrollbarIsVisible(content)) return;
19		- const button = D.button('Expand...');
20		- button.classList.add('forum-post-collapser');
21		- button.addEventListener('click', getButtonHandler(content), false);
22		- forumPostWrapper.insertBefore(button, content.nextSibling);
23		- };
	14	+ return false;
	15	+ };
	16	+ };
	17	+ /** Install an event handler on element e which calls the given
	18	+ callback if the user presses the element for a brief period
	19	+ (time is defined a few lines down from here). */
	20	+ const addLongpressHandler = function(e, callback){
	21	+ const longPressTime = 650 /ms/;
	22	+ var timer;
	23	+ const clearTimer = function(){
	24	+ if(timer){
	25	+ clearTimeout(timer);
	26	+ timer = undefined;
	27	+ }
	28	+ };
	29	+ e.addEventListener('mousedown', function(ev){
	30	+ timer = setTimeout(function(){
	31	+ clearTimer();
	32	+ callback();
	33	+ }, longPressTime);
	34	+ }, false);
	35	+ e.addEventListener('mouseup', clearTimer, false);
	36	+ e.addEventListener('mouseout', clearTimer, false);
	37	+ };
	38	+ /* Adds an Expand/Collapse toggle to all div.forumPostBody
	39	+ elements which are deemed "too large" (those for which
	40	+ scrolling is currently activated because they are taller than
	41	+ their max-height). */
24	42	document.querySelectorAll(
25	43	'div.forumHier, div.forumTime, div.forumHierRoot'
26		- ).forEach(doCollapser)
27		- });
	44	+ ).forEach(function(forumPostWrapper){
	45	+ const content = forumPostWrapper.querySelector('div.forumPostBody');
	46	+ if(!content \|\| !scrollbarIsVisible(content)) return;
	47	+ const button = D.button('Expand...'),
	48	+ btnEventHandler = getButtonHandler(button, content);
	49	+ button.classList.add('forum-post-collapser');
	50	+ button.addEventListener('click', btnEventHandler, false);
	51	+ if(content.nextSibling){
	52	+ forumPostWrapper.insertBefore(button, content.nextSibling);
	53	+ }else{
	54	+ forumPostWrapper.appendChild(button);
	55	+ }
	56	+ // uncomment to enable long-press expand/collapse toggle:
	57	+ // addLongpressHandler(content, btnEventHandler);
	58	+ // It may interfere with default actions on mobile platforms, though.
	59	+ });
	60	+ })/onload callback/;
28	61
29	62	})(window.fossil);
30	63

	--- src/fossil.page.forumpost.js
	+++ src/fossil.page.forumpost.js
	@@ -1,29 +1,62 @@
1	(function(F/the fossil object/){
2	"use strict";
3	/* JS code for /forumpage and friends. Requires fossil.dom. */
4	const P = fossil.page, D = fossil.dom;
5
6	F.onPageLoad(function(){
7	const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8	const getButtonHandler = function(contentElem){
9	return function(ev){
10	const btn = ev.target;
11	const isExpanded = D.hasClass(contentElem,'expanded');
12	btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
13	contentElem.classList.toggle('expanded');
14	};
15	};
16	const doCollapser = function(forumPostWrapper){
17	const content = forumPostWrapper.querySelector('div.forumPostBody');
18	if(!scrollbarIsVisible(content)) return;
19	const button = D.button('Expand...');
20	button.classList.add('forum-post-collapser');
21	button.addEventListener('click', getButtonHandler(content), false);
22	forumPostWrapper.insertBefore(button, content.nextSibling);
23	};


















24	document.querySelectorAll(
25	'div.forumHier, div.forumTime, div.forumHierRoot'
26	).forEach(doCollapser)
27	});















28
29	})(window.fossil);
30

	--- src/fossil.page.forumpost.js
	+++ src/fossil.page.forumpost.js
	@@ -1,29 +1,62 @@
1	(function(F/the fossil object/){
2	"use strict";
3	/* JS code for /forumpage and friends. Requires fossil.dom. */
4	const P = fossil.page, D = fossil.dom;
5
6	F.onPageLoad(function(){
7	const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8	const getButtonHandler = function(btn, contentElem){
9	return function(ev){
10	if(ev) ev.preventDefault();
11	const isExpanded = D.hasClass(contentElem,'expanded');
12	btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
13	contentElem.classList.toggle('expanded');
14	return false;
15	};
16	};
17	/** Install an event handler on element e which calls the given
18	callback if the user presses the element for a brief period
19	(time is defined a few lines down from here). */
20	const addLongpressHandler = function(e, callback){
21	const longPressTime = 650 /ms/;
22	var timer;
23	const clearTimer = function(){
24	if(timer){
25	clearTimeout(timer);
26	timer = undefined;
27	}
28	};
29	e.addEventListener('mousedown', function(ev){
30	timer = setTimeout(function(){
31	clearTimer();
32	callback();
33	}, longPressTime);
34	}, false);
35	e.addEventListener('mouseup', clearTimer, false);
36	e.addEventListener('mouseout', clearTimer, false);
37	};
38	/* Adds an Expand/Collapse toggle to all div.forumPostBody
39	elements which are deemed "too large" (those for which
40	scrolling is currently activated because they are taller than
41	their max-height). */
42	document.querySelectorAll(
43	'div.forumHier, div.forumTime, div.forumHierRoot'
44	).forEach(function(forumPostWrapper){
45	const content = forumPostWrapper.querySelector('div.forumPostBody');
46	if(!content \|\| !scrollbarIsVisible(content)) return;
47	const button = D.button('Expand...'),
48	btnEventHandler = getButtonHandler(button, content);
49	button.classList.add('forum-post-collapser');
50	button.addEventListener('click', btnEventHandler, false);
51	if(content.nextSibling){
52	forumPostWrapper.insertBefore(button, content.nextSibling);
53	}else{
54	forumPostWrapper.appendChild(button);
55	}
56	// uncomment to enable long-press expand/collapse toggle:
57	// addLongpressHandler(content, btnEventHandler);
58	// It may interfere with default actions on mobile platforms, though.
59	});
60	})/onload callback/;
61
62	})(window.fossil);
63

Fossil SCM

Keyboard Shortcuts