Fossil SCM

Reworked /chat input options for better cross-browser portability. Made /chat config friendlier for right-handed and mobile use.

stephan 2021-10-10 06:33 trunk merge

Commit db54f4b7066c564301f18af876dd12b66cc7fc0c28588115155ab13f3fb5263b

Parent c3177ea9c48cac2…

5 files changed +11 -3 +168 -65 +74 -43 +4 +4

~ src/chat.c ~ src/fossil.page.chat.js ~ src/style.chat.css ~ www/changes.wiki ~ www/changes.wiki

M src/chat.c

+11 -3

		--- src/chat.c
		+++ src/chat.c
		@@ -174,15 +174,23 @@
174	174	zInputPlaceholder0 =
175	175	mprintf("Type markdown-formatted message for %h.", zProjectName);
176	176	style_set_current_feature("chat");
177	177	style_header("Chat");
178	178	@ <div id='chat-input-area'>
179		- @ <div id='chat-input-line' class='single-line'>
180		- @ <div contenteditable id="chat-input-field" \
	179	+ @ <div id='chat-input-line-wrapper' class='compact'>
	180	+ @ <input type="text" id="chat-input-field-single" \
	181	+ @ data-placeholder0="%h(zInputPlaceholder0)" \
	182	+ @ data-placeholder="%h(zInputPlaceholder0)" \
	183	+ @ class="chat-input-field"></input>
	184	+ @ <textarea id="chat-input-field-multi" \
	185	+ @ data-placeholder0="%h(zInputPlaceholder0)" \
	186	+ @ data-placeholder="%h(zInputPlaceholder0)" \
	187	+ @ class="chat-input-field hidden"></textarea>
	188	+ @ <div contenteditable id="chat-input-field-x" \
181	189	@ data-placeholder0="%h(zInputPlaceholder0)" \
182	190	@ data-placeholder="%h(zInputPlaceholder0)" \
183		- @ class=""></div>
	191	+ @ class="chat-input-field hidden"></div>
184	192	@ <div id='chat-buttons-wrapper'>
185	193	@ <span class='cbutton' id="chat-button-preview" \
186	194	@ title="Preview message (Shift-Enter)">👁</span>
187	195	@ <span class='cbutton' id="chat-button-attach" \
188	196	@ title="Attach file to message">%s(zPaperclip)</span>
189	197

	--- src/chat.c
	+++ src/chat.c
	@@ -174,15 +174,23 @@
174	zInputPlaceholder0 =
175	mprintf("Type markdown-formatted message for %h.", zProjectName);
176	style_set_current_feature("chat");
177	style_header("Chat");
178	@ <div id='chat-input-area'>
179	@ <div id='chat-input-line' class='single-line'>
180	@ <div contenteditable id="chat-input-field" \








181	@ data-placeholder0="%h(zInputPlaceholder0)" \
182	@ data-placeholder="%h(zInputPlaceholder0)" \
183	@ class=""></div>
184	@ <div id='chat-buttons-wrapper'>
185	@ <span class='cbutton' id="chat-button-preview" \
186	@ title="Preview message (Shift-Enter)">👁</span>
187	@ <span class='cbutton' id="chat-button-attach" \
188	@ title="Attach file to message">%s(zPaperclip)</span>
189

	--- src/chat.c
	+++ src/chat.c
	@@ -174,15 +174,23 @@
174	zInputPlaceholder0 =
175	mprintf("Type markdown-formatted message for %h.", zProjectName);
176	style_set_current_feature("chat");
177	style_header("Chat");
178	@ <div id='chat-input-area'>
179	@ <div id='chat-input-line-wrapper' class='compact'>
180	@ <input type="text" id="chat-input-field-single" \
181	@ data-placeholder0="%h(zInputPlaceholder0)" \
182	@ data-placeholder="%h(zInputPlaceholder0)" \
183	@ class="chat-input-field"></input>
184	@ <textarea id="chat-input-field-multi" \
185	@ data-placeholder0="%h(zInputPlaceholder0)" \
186	@ data-placeholder="%h(zInputPlaceholder0)" \
187	@ class="chat-input-field hidden"></textarea>
188	@ <div contenteditable id="chat-input-field-x" \
189	@ data-placeholder0="%h(zInputPlaceholder0)" \
190	@ data-placeholder="%h(zInputPlaceholder0)" \
191	@ class="chat-input-field hidden"></div>
192	@ <div id='chat-buttons-wrapper'>
193	@ <span class='cbutton' id="chat-button-preview" \
194	@ title="Preview message (Shift-Enter)">👁</span>
195	@ <span class='cbutton' id="chat-button-attach" \
196	@ title="Attach file to message">%s(zPaperclip)</span>
197

M src/fossil.page.chat.js

+168 -65

		--- src/fossil.page.chat.js
		+++ src/fossil.page.chat.js
		@@ -94,11 +94,11 @@
94	94	ht = wh;
95	95	}else{
96	96	elemsToCount.forEach((e)=>e ? extra += D.effectiveHeight(e) : false);
97	97	ht = wh - extra;
98	98	}
99		- f.chat.e.inputField.style.maxHeight = (ht/2)+"px";
	99	+ f.chat.e.inputX.style.maxHeight = (ht/2)+"px";
100	100	/* ^^^^ this is a middle ground between having no size cap
101	101	on the input field and having a fixed arbitrary cap. */;
102	102	contentArea.style.height =
103	103	contentArea.style.maxHeight = [
104	104	"calc(", (ht>=100 ? ht : 100), "px",
		@@ -110,11 +110,11 @@
110	110	if(false){
111	111	console.debug("resized.",wh, extra, ht,
112	112	window.getComputedStyle(contentArea).maxHeight,
113	113	contentArea);
114	114	console.debug("Set input max height to: ",
115		- f.chat.e.inputField.style.maxHeight);
	115	+ f.chat.e.inputX.style.maxHeight);
116	116	}
117	117	};
118	118	var doit;
119	119	window.addEventListener('resize',function(ev){
120	120	clearTimeout(doit);
		@@ -131,16 +131,18 @@
131	131	e:{/map of certain DOM elements./
132	132	messageInjectPoint: E1('#message-inject-point'),
133	133	pageTitle: E1('head title'),
134	134	loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
135	135	inputWrapper: E1("#chat-input-area"),
136		- inputLine: E1('#chat-input-line'),
	136	+ inputElementWrapper: E1('#chat-input-line-wrapper'),
137	137	fileSelectWrapper: E1('#chat-input-file-area'),
138	138	viewMessages: E1('#chat-messages-wrapper'),
139	139	btnSubmit: E1('#chat-button-submit'),
140	140	btnAttach: E1('#chat-button-attach'),
141		- inputField: E1('#chat-input-field'),
	141	+ inputX: E1('#chat-input-field-x'),
	142	+ input1: E1('#chat-input-field-single'),
	143	+ inputM: E1('#chat-input-field-multi'),
142	144	inputFile: E1('#chat-input-file'),
143	145	contentDiv: E1('div.content'),
144	146	viewConfig: E1('#chat-config'),
145	147	viewPreview: E1('#chat-preview'),
146	148	previewContent: E1('#chat-preview-content'),
		@@ -176,23 +178,24 @@
176	178	taking into account single- vs multi-line input. The getter returns
177	179	a string and the setter returns this object. */
178	180	inputValue: function(){
179	181	const e = this.inputElement();
180	182	if(arguments.length){
181		- e.innerText = arguments[0];
	183	+ if(e.isContentEditable) e.innerText = arguments[0];
	184	+ else e.value = arguments[0];
182	185	return this;
183	186	}
184		- return e.innerText;
	187	+ return e.isContentEditable ? e.innerText : e.value;
185	188	},
186	189	/** Asks the current user input field to take focus. Returns this. */
187	190	inputFocus: function(){
188	191	this.inputElement().focus();
189	192	return this;
190	193	},
191	194	/** Returns the current message input element. */
192	195	inputElement: function(){
193		- return this.e.inputField;
	196	+ return this.e.inputFields[this.e.inputFields.$currentIndex];
194	197	},
195	198	/** Enables (if yes is truthy) or disables all elements in
196	199	* this.disableDuringAjax. */
197	200	enableAjaxComponents: function(yes){
198	201	D[yes ? 'enable' : 'disable'](this.disableDuringAjax);
		@@ -417,11 +420,17 @@
417	420	timestamp of each user's most recent message. */
418	421	"active-user-list-timestamps": false,
419	422	/* When on, the [audible-alert] is played for one's own
420	423	messages, else it is only played for other users'
421	424	messages. */
422		- "alert-own-messages": false
	425	+ "alert-own-messages": false,
	426	+ /* "Experimental mode" input: use a contenteditable field
	427	+ for input. This is generally more comfortable to use,
	428	+ and more modern, than plain text input fields, but
	429	+ the list of browser-specific quirks and bugs is...
	430	+ not short. */
	431	+ "edit-widget-x": false
423	432	}
424	433	},
425	434	/** Plays a new-message notification sound IF the audible-alert
426	435	setting is true, else this is a no-op. Returns this.
427	436	*/
		@@ -579,16 +588,22 @@
579	588	D.addClassBriefly(e, a, 0, cb);
580	589	}
581	590	return this;
582	591	}
583	592	};
584		- if(D.attr(cs.e.inputField,'contenteditable','plaintext-only').isContentEditable){
	593	+ cs.e.inputFields = [ cs.e.input1, cs.e.inputM, cs.e.inputX ];
	594	+ cs.e.inputFields.$currentIndex = 0;
	595	+ cs.e.inputFields.forEach(function(e,ndx){
	596	+ if(ndx===cs.e.inputFields.$currentIndex) D.removeClass(e,'hidden');
	597	+ else D.addClass(e,'hidden');
	598	+ });
	599	+ if(D.attr(cs.e.inputX,'contenteditable','plaintext-only').isContentEditable){
585	600	cs.$browserHasPlaintextOnly = true;
586	601	}else{
587	602	/* Only the Chrome family supports contenteditable=plaintext-only */
588	603	cs.$browserHasPlaintextOnly = false;
589		- D.attr(cs.e.inputField,'contenteditable','true');
	604	+ D.attr(cs.e.inputX,'contenteditable','true');
590	605	}
591	606	cs.animate.$disabled = true;
592	607	F.fetch.beforesend = ()=>cs.ajaxStart();
593	608	F.fetch.aftersend = ()=>cs.ajaxEnd();
594	609	cs.pageTitleOrig = cs.e.pageTitle.innerText;
		@@ -1161,11 +1176,11 @@
1161	1176	/* Acrobatics to keep some installations of Firefox
1162	1177	from pasting formatting into contenteditable fields.
1163	1178	This also works on Chrome, but chrome has the
1164	1179	contenteditable=plaintext-only property which does this
1165	1180	for us. */
1166		- Chat.inputElement().addEventListener(
	1181	+ Chat.e.inputX.addEventListener(
1167	1182	'paste',
1168	1183	function(ev){
1169	1184	if (ev.clipboardData && ev.clipboardData.getData) {
1170	1185	const pastedText = ev.clipboardData.getData('text/plain');
1171	1186	const selection = window.getSelection();
		@@ -1185,15 +1200,12 @@
1185	1200	ev.dataTransfer.dropEffect = 'none';
1186	1201	ev.preventDefault();
1187	1202	ev.stopPropagation();
1188	1203	return false;
1189	1204	};
1190		-
1191	1205	['drop','dragenter','dragleave','dragend'].forEach(
1192		- (k)=>{
1193		- Chat.inputElement().addEventListener(k, noDragDropEvents, false);
1194		- }
	1206	+ (k)=>Chat.e.inputX.addEventListener(k, noDragDropEvents, false)
1195	1207	);
1196	1208	return bxs;
1197	1209	})()/drag/drop/paste/;
1198	1210
1199	1211	const tzOffsetToString = function(off){
		@@ -1323,11 +1335,13 @@
1323	1335	ev.stopPropagation();
1324	1336	Chat.submitMessage();
1325	1337	return false;
1326	1338	}
1327	1339	};
1328		- Chat.e.inputField.addEventListener('keydown', inputWidgetKeydown, false);
	1340	+ Chat.e.inputFields.forEach(
	1341	+ (e)=>e.addEventListener('keydown', inputWidgetKeydown, false)
	1342	+ );
1329	1343	Chat.e.btnSubmit.addEventListener('click',(e)=>{
1330	1344	e.preventDefault();
1331	1345	Chat.submitMessage();
1332	1346	return false;
1333	1347	});
		@@ -1383,70 +1397,98 @@
1383	1397	/**
1384	1398	Settings ops structure:
1385	1399
1386	1400	label: string for the UI
1387	1401
1388		- boolValue: string (name of Chat.settings setting) or a
1389		- function which returns true or false.
	1402	+ boolValue: string (name of Chat.settings setting) or a function
	1403	+ which returns true or false. If it is a string, it gets
	1404	+ replaced by a function which returns
	1405	+ Chat.settings.getBool(thatString) and the string gets assigned
	1406	+ to the persistentSetting property of this object.
1390	1407
1391	1408	select: SELECT element (instead of boolValue)
1392	1409
1393	1410	callback: optional handler to call after setting is modified.
	1411	+ Its "this" is the options object. If this object has a
	1412	+ boolValue string or a persistentSetting property, the argument
	1413	+ passed to the callback is a settings object in the form {key:K,
	1414	+ value:V}. If this object does not have boolValue string or
	1415	+ persistentSetting then the callback is passed an event object
	1416	+ in response to the config option's UI widget being activated,
	1417	+ normally a 'change' event.
	1418	+
	1419	+ children: [array of settings objects]. These get listed under
	1420	+ this element and indented slightly for visual grouping. Only
	1421	+ one level of indention is supported.
	1422	+
	1423	+ Elements which only have a label and maybe a hint and
	1424	+ children can be used as headings.
1394	1425
1395		- If a setting has a boolValue set, that gets transformed into a
	1426	+ If a setting has a boolValue set, that gets rendered as a
1396	1427	checkbox which toggles the given persistent setting (if
1397	1428	boolValue is a string) AND listens for changes to that setting
1398	1429	fired via Chat.settings.set() so that the checkbox can stay in
1399	1430	sync with external changes to that setting. Various Chat UI
1400	1431	elements stay in sync with the config UI via those settings
1401		- events.
1402		- */
	1432	+ events. The checkbox element gets added to the options object
	1433	+ so that the callback() can reference it via this.checkbox.
	1434	+ */
1403	1435	const settingsOps = [{
	1436	+ label: "Chat Configuration Options",
	1437	+ hint: "Most of these settings are persistent via window.localStorage."
	1438	+ },{
	1439	+ label: "Chat-only mode",
	1440	+ hint: "Toggle the page between normal fossil view and chat-only view.",
	1441	+ boolValue: 'chat-only-mode'
	1442	+ },{
1404	1443	label: "Ctrl-enter to Send",
1405		- hint: "When on, only Ctrl-Enter will send messages and Enter adds "+
1406		- "blank lines. "+
1407		- "When off, both Enter and Ctrl-Enter send. "+
1408		- "When the input field has focus, is empty, and preview "+
1409		- "mode is NOT active then Ctrl-Enter toggles this setting.",
	1444	+ hint: [
	1445	+ "When on, only Ctrl-Enter will send messages and Enter adds ",
	1446	+ "blank lines. When off, both Enter and Ctrl-Enter send. ",
	1447	+ "When the input field has focus, is empty, and preview ",
	1448	+ "mode is NOT active then Ctrl-Enter toggles this setting."
	1449	+ ].join(''),
1410	1450	boolValue: 'edit-ctrl-send'
1411	1451	},{
1412	1452	label: "Compact mode",
1413		- hint: "Toggle between a space-saving or more spacious writing area. "+
1414		- "When the input field has focus, is empty, and preview mode "+
1415		- "is NOT active then Shift-Enter toggles this setting.",
	1453	+ hint: [
	1454	+ "Toggle between a space-saving or more spacious writing area. ",
	1455	+ "When the input field has focus, is empty, and preview mode ",
	1456	+ "is NOT active then Shift-Enter toggles this setting."].join(''),
1416	1457	boolValue: 'edit-compact-mode'
1417	1458	},{
1418	1459	label: "Left-align my posts",
1419	1460	hint: "Default alignment of your own messages is selected "
1420		- +"based window width/height relationship.",
	1461	+ + "based window width/height relationship.",
1421	1462	boolValue: ()=>!document.body.classList.contains('my-messages-right'),
1422	1463	callback: function f(){
1423	1464	document.body.classList[
1424	1465	this.checkbox.checked ? 'remove' : 'add'
1425	1466	]('my-messages-right');
1426	1467	}
1427	1468	},{
1428	1469	label: "Monospace message font",
1429		- hint: "Use monospace font for message text?",
	1470	+ hint: "Use monospace font for message and input text.",
1430	1471	boolValue: 'monospace-messages',
1431	1472	callback: function(setting){
1432	1473	document.body.classList[
1433	1474	setting.value ? 'add' : 'remove'
1434	1475	]('monospace-messages');
1435	1476	}
1436	1477	},{
1437		- label: "Chat-only mode",
1438		- hint: "Toggle the page between normal fossil view and chat-only view.",
1439		- boolValue: 'chat-only-mode'
	1478	+ label: "Show images inline",
	1479	+ hint: "Show attached images inline or as a download link.",
	1480	+ boolValue: 'images-inline'
1440	1481	},{
1441		- label: "Show images inline",
1442		- hint: "Whether to show images inline or as a hyperlink.",
1443		- boolValue: 'images-inline'
1444		- },namedOptions.activeUsers,{
1445		- label: "Timestamps in active users list",
1446		- hint: "Whether to show last-message timestamps.",
1447		- boolValue: 'active-user-list-timestamps'
	1482	+ label: "Use 'contenteditable' editing mode.",
	1483	+ boolValue: 'edit-widget-x',
	1484	+ hint: [
	1485	+ "When enabled, chat input uses a so-called 'contenteditable' ",
	1486	+ "field. Though generally more comfortable and modern than ",
	1487	+ "plain-text input fields, browser-specific quirks and bugs ",
	1488	+ "may lead to frustration."
	1489	+ ].join('')
1448	1490	}];
1449	1491
1450	1492	/** Set up selection list of notification sounds. */
1451	1493	if(1){
1452	1494	const selectSound = D.select();
		@@ -1465,45 +1507,64 @@
1465	1507	selectSound.selectedIndex = firstSoundIndex;
1466	1508	}
1467	1509	}
1468	1510	Chat.setNewMessageSound(selectSound.value);
1469	1511	settingsOps.push({
1470		- hint: "Audio alert. How to enable audio playback is browser-specific!",
1471		- select: selectSound,
1472		- callback: function(ev){
1473		- const v = ev.target.value;
1474		- Chat.setNewMessageSound(v);
1475		- F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
1476		- if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
1477		- }
	1512	+ label: "Sound Options...",
	1513	+ hint: "How to enable audio playback is browser-specific!",
	1514	+ children:[{
	1515	+ hint: "Audio alert",
	1516	+ select: selectSound,
	1517	+ callback: function(ev){
	1518	+ const v = ev.target.value;
	1519	+ Chat.setNewMessageSound(v);
	1520	+ F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
	1521	+ if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
	1522	+ }
	1523	+ },{
	1524	+ label: "Play notification for your own messages.",
	1525	+ hint: "When enabled, the audio notification will be played for all messages, "+
	1526	+ "including your own. When disabled only messages from other users "+
	1527	+ "will trigger a notification.",
	1528	+ boolValue: 'alert-own-messages'
	1529	+ }]
1478	1530	});
1479	1531	}/audio notification config/
1480	1532	settingsOps.push({
1481		- label: "Play notification for your own messages.",
1482		- hint: "When enabled, the audio notification will be played for all messages, "+
1483		- "including your own. When disabled only messages from other users "+
1484		- "will trigger a notification.",
1485		- boolValue: 'alert-own-messages'
	1533	+ label: "Active User List",
	1534	+ hint: [
	1535	+ "/chat cannot track active connections, but it can tell ",
	1536	+ "you who has posted recently..."].join(''),
	1537	+ children:[
	1538	+ namedOptions.activeUsers,{
	1539	+ label: "Timestamps in active users list",
	1540	+ indent: true,
	1541	+ hint: "Show most recent message timestamps in the active user list.",
	1542	+ boolValue: 'active-user-list-timestamps'
	1543	+ }
	1544	+ ]
1486	1545	});
1487	1546	/**
1488	1547	Build UI for config options...
1489	1548	*/
1490		- settingsOps.forEach(function f(op){
	1549	+ settingsOps.forEach(function f(op,indentOrIndex){
1491	1550	const line = D.addClass(D.div(), 'menu-entry');
	1551	+ if(true===indentOrIndex) D.addClass(line, 'indent');
1492	1552	const label = op.label
1493	1553	? D.append(D.label(),op.label) : undefined;
1494	1554	const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1495	1555	var hint;
1496		- const col0 = D.span();
1497	1556	if(op.hint){
1498	1557	hint = D.append(D.addClass(D.span(),'hint'),op.hint);
1499	1558	}
1500	1559	if(op.hasOwnProperty('select')){
1501		- D.append(line, col0, labelWrapper);
	1560	+ const col0 = D.addClass(D.span(/empty, but for spacing/),
	1561	+ 'toggle-wrapper');
	1562	+ D.append(line, labelWrapper, col0);
1502	1563	D.append(labelWrapper, op.select);
1503	1564	if(hint) D.append(labelWrapper, hint);
1504		- if(label) D.append(col0, label);
	1565	+ if(label) D.append(label);
1505	1566	if(op.callback){
1506	1567	op.select.addEventListener('change', (ev)=>op.callback(ev), false);
1507	1568	}
1508	1569	}else if(op.hasOwnProperty('boolValue')){
1509	1570	if(undefined === f.$id) f.$id = 0;
		@@ -1515,23 +1576,26 @@
1515	1576	}
1516	1577	const check = op.checkbox
1517	1578	= D.attr(D.checkbox(1, op.boolValue()),
1518	1579	'aria-label', op.label);
1519	1580	const id = 'cfgopt'+f.$id;
	1581	+ const col0 = D.addClass(D.span(), 'toggle-wrapper');
1520	1582	check.checked = op.boolValue();
1521	1583	op.checkbox = check;
1522	1584	D.attr(check, 'id', id);
1523		- D.append(line, col0, labelWrapper);
	1585	+ D.append(line, labelWrapper, col0);
1524	1586	D.append(col0, check);
1525	1587	if(label){
1526	1588	D.attr(label, 'for', id);
1527	1589	D.append(labelWrapper, label);
1528	1590	}
1529	1591	if(hint) D.append(labelWrapper, hint);
1530	1592	}else{
1531		- line.addEventListener('click', callback);
1532		- D.append(line, col0, labelWrapper);
	1593	+ if(op.callback){
	1594	+ line.addEventListener('click', (ev)=>op.callback(ev));
	1595	+ }
	1596	+ D.append(line, labelWrapper);
1533	1597	if(label) D.append(labelWrapper, label);
1534	1598	if(hint) D.append(labelWrapper, hint);
1535	1599	}
1536	1600	D.append(optionsMenu, line);
1537	1601	if(op.persistentSetting){
		@@ -1550,10 +1614,11 @@
1550	1614	}, false);
1551	1615	}
1552	1616	}else if(op.callback && op.checkbox){
1553	1617	op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1554	1618	}
	1619	+ if(op.children) op.children.forEach((x)=>f(x,true));
1555	1620	});
1556	1621	})()/#chat-button-settings setup/;
1557	1622
1558	1623	(function(){
1559	1624	/* Install default settings... must come after
		@@ -1569,20 +1634,58 @@
1569	1634	Chat.settings.addListener('active-user-list-timestamps',function(s){
1570	1635	Chat.showActiveUserTimestamps(s.value);
1571	1636	});
1572	1637	Chat.settings.addListener('chat-only-mode',function(s){
1573	1638	Chat.chatOnlyMode(s.value);
	1639	+ });
	1640	+ Chat.settings.addListener('edit-widget-x',function(s){
	1641	+ let eSelected;
	1642	+ if(s.value){
	1643	+ if(Chat.e.inputX===Chat.inputElement()) return;
	1644	+ eSelected = Chat.e.inputX;
	1645	+ }else{
	1646	+ eSelected = Chat.settings.getBool('edit-compact-mode')
	1647	+ ? Chat.e.input1 : Chat.e.inputM;
	1648	+ }
	1649	+ const v = Chat.inputValue();
	1650	+ Chat.inputValue('');
	1651	+ Chat.e.inputFields.forEach(function(e,ndx){
	1652	+ if(eSelected===e){
	1653	+ Chat.e.inputFields.$currentIndex = ndx;
	1654	+ D.removeClass(e, 'hidden');
	1655	+ }
	1656	+ else D.addClass(e,'hidden');
	1657	+ });
	1658	+ Chat.inputValue(v);
	1659	+ eSelected.focus();
1574	1660	});
1575	1661	Chat.settings.addListener('edit-compact-mode',function(s){
1576		- Chat.e.inputLine.classList[
	1662	+ if(Chat.e.inputX!==Chat.inputElement()){
	1663	+ /* Text field/textarea mode: swap them if needed.
	1664	+ Compact mode of inputX is toggled via CSS. */
	1665	+ const a = s.value
	1666	+ ? [Chat.e.input1, Chat.e.inputM, 0]
	1667	+ : [Chat.e.inputM, Chat.e.input1, 1];
	1668	+ const v = Chat.inputValue();
	1669	+ Chat.inputValue('');
	1670	+ Chat.e.inputFields.$currentIndex = a[2];
	1671	+ Chat.inputValue(v);
	1672	+ D.removeClass(a[0], 'hidden');
	1673	+ D.addClass(a[1], 'hidden');
	1674	+ }
	1675	+ Chat.e.inputElementWrapper.classList[
1577	1676	s.value ? 'add' : 'remove'
1578	1677	]('compact');
	1678	+ Chat.e.inputFields[Chat.e.inputFields.$currentIndex].focus();
1579	1679	});
1580	1680	Chat.settings.addListener('edit-ctrl-send',function(s){
1581	1681	const label = (s.value ? "Ctrl-" : "")+"Enter submits messages.";
1582		- const eInput = Chat.inputElement();
1583		- eInput.dataset.placeholder = eInput.dataset.placeholder0 + " " +label;
	1682	+ Chat.e.inputFields.forEach((e)=>{
	1683	+ const v = e.dataset.placeholder0 + " " +label;
	1684	+ if(e.isContentEditable) e.dataset.placeholder = v;
	1685	+ else D.attr(e,'placeholder',v);
	1686	+ });
1584	1687	Chat.e.btnSubmit.title = label;
1585	1688	});
1586	1689	const valueKludges = {
1587	1690	/* Convert certain string-format values to other types... */
1588	1691	"false": false,
		@@ -1607,11 +1710,11 @@
1607	1710	this.inputFocus();
1608	1711	};
1609	1712	Chat.e.viewPreview.querySelector('#chat-preview-close').
1610	1713	addEventListener('click', ()=>Chat.setCurrentView(Chat.e.viewMessages), false);
1611	1714	let previewPending = false;
1612		- const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputField];
	1715	+ const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputFields];
1613	1716	const submit = function(ev){
1614	1717	ev.preventDefault();
1615	1718	ev.stopPropagation();
1616	1719	if(previewPending) return false;
1617	1720	const txt = Chat.inputValue();
1618	1721

	--- src/fossil.page.chat.js
	+++ src/fossil.page.chat.js
	@@ -94,11 +94,11 @@
94	ht = wh;
95	}else{
96	elemsToCount.forEach((e)=>e ? extra += D.effectiveHeight(e) : false);
97	ht = wh - extra;
98	}
99	f.chat.e.inputField.style.maxHeight = (ht/2)+"px";
100	/* ^^^^ this is a middle ground between having no size cap
101	on the input field and having a fixed arbitrary cap. */;
102	contentArea.style.height =
103	contentArea.style.maxHeight = [
104	"calc(", (ht>=100 ? ht : 100), "px",
	@@ -110,11 +110,11 @@
110	if(false){
111	console.debug("resized.",wh, extra, ht,
112	window.getComputedStyle(contentArea).maxHeight,
113	contentArea);
114	console.debug("Set input max height to: ",
115	f.chat.e.inputField.style.maxHeight);
116	}
117	};
118	var doit;
119	window.addEventListener('resize',function(ev){
120	clearTimeout(doit);
	@@ -131,16 +131,18 @@
131	e:{/map of certain DOM elements./
132	messageInjectPoint: E1('#message-inject-point'),
133	pageTitle: E1('head title'),
134	loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
135	inputWrapper: E1("#chat-input-area"),
136	inputLine: E1('#chat-input-line'),
137	fileSelectWrapper: E1('#chat-input-file-area'),
138	viewMessages: E1('#chat-messages-wrapper'),
139	btnSubmit: E1('#chat-button-submit'),
140	btnAttach: E1('#chat-button-attach'),
141	inputField: E1('#chat-input-field'),


142	inputFile: E1('#chat-input-file'),
143	contentDiv: E1('div.content'),
144	viewConfig: E1('#chat-config'),
145	viewPreview: E1('#chat-preview'),
146	previewContent: E1('#chat-preview-content'),
	@@ -176,23 +178,24 @@
176	taking into account single- vs multi-line input. The getter returns
177	a string and the setter returns this object. */
178	inputValue: function(){
179	const e = this.inputElement();
180	if(arguments.length){
181	e.innerText = arguments[0];

182	return this;
183	}
184	return e.innerText;
185	},
186	/** Asks the current user input field to take focus. Returns this. */
187	inputFocus: function(){
188	this.inputElement().focus();
189	return this;
190	},
191	/** Returns the current message input element. */
192	inputElement: function(){
193	return this.e.inputField;
194	},
195	/** Enables (if yes is truthy) or disables all elements in
196	* this.disableDuringAjax. */
197	enableAjaxComponents: function(yes){
198	D[yes ? 'enable' : 'disable'](this.disableDuringAjax);
	@@ -417,11 +420,17 @@
417	timestamp of each user's most recent message. */
418	"active-user-list-timestamps": false,
419	/* When on, the [audible-alert] is played for one's own
420	messages, else it is only played for other users'
421	messages. */
422	"alert-own-messages": false






423	}
424	},
425	/** Plays a new-message notification sound IF the audible-alert
426	setting is true, else this is a no-op. Returns this.
427	*/
	@@ -579,16 +588,22 @@
579	D.addClassBriefly(e, a, 0, cb);
580	}
581	return this;
582	}
583	};
584	if(D.attr(cs.e.inputField,'contenteditable','plaintext-only').isContentEditable){






585	cs.$browserHasPlaintextOnly = true;
586	}else{
587	/* Only the Chrome family supports contenteditable=plaintext-only */
588	cs.$browserHasPlaintextOnly = false;
589	D.attr(cs.e.inputField,'contenteditable','true');
590	}
591	cs.animate.$disabled = true;
592	F.fetch.beforesend = ()=>cs.ajaxStart();
593	F.fetch.aftersend = ()=>cs.ajaxEnd();
594	cs.pageTitleOrig = cs.e.pageTitle.innerText;
	@@ -1161,11 +1176,11 @@
1161	/* Acrobatics to keep some installations of Firefox
1162	from pasting formatting into contenteditable fields.
1163	This also works on Chrome, but chrome has the
1164	contenteditable=plaintext-only property which does this
1165	for us. */
1166	Chat.inputElement().addEventListener(
1167	'paste',
1168	function(ev){
1169	if (ev.clipboardData && ev.clipboardData.getData) {
1170	const pastedText = ev.clipboardData.getData('text/plain');
1171	const selection = window.getSelection();
	@@ -1185,15 +1200,12 @@
1185	ev.dataTransfer.dropEffect = 'none';
1186	ev.preventDefault();
1187	ev.stopPropagation();
1188	return false;
1189	};
1190
1191	['drop','dragenter','dragleave','dragend'].forEach(
1192	(k)=>{
1193	Chat.inputElement().addEventListener(k, noDragDropEvents, false);
1194	}
1195	);
1196	return bxs;
1197	})()/drag/drop/paste/;
1198
1199	const tzOffsetToString = function(off){
	@@ -1323,11 +1335,13 @@
1323	ev.stopPropagation();
1324	Chat.submitMessage();
1325	return false;
1326	}
1327	};
1328	Chat.e.inputField.addEventListener('keydown', inputWidgetKeydown, false);


1329	Chat.e.btnSubmit.addEventListener('click',(e)=>{
1330	e.preventDefault();
1331	Chat.submitMessage();
1332	return false;
1333	});
	@@ -1383,70 +1397,98 @@
1383	/**
1384	Settings ops structure:
1385
1386	label: string for the UI
1387
1388	boolValue: string (name of Chat.settings setting) or a
1389	function which returns true or false.



1390
1391	select: SELECT element (instead of boolValue)
1392
1393	callback: optional handler to call after setting is modified.














1394
1395	If a setting has a boolValue set, that gets transformed into a
1396	checkbox which toggles the given persistent setting (if
1397	boolValue is a string) AND listens for changes to that setting
1398	fired via Chat.settings.set() so that the checkbox can stay in
1399	sync with external changes to that setting. Various Chat UI
1400	elements stay in sync with the config UI via those settings
1401	events.
1402	*/

1403	const settingsOps = [{







1404	label: "Ctrl-enter to Send",
1405	hint: "When on, only Ctrl-Enter will send messages and Enter adds "+
1406	"blank lines. "+
1407	"When off, both Enter and Ctrl-Enter send. "+
1408	"When the input field has focus, is empty, and preview "+
1409	"mode is NOT active then Ctrl-Enter toggles this setting.",

1410	boolValue: 'edit-ctrl-send'
1411	},{
1412	label: "Compact mode",
1413	hint: "Toggle between a space-saving or more spacious writing area. "+
1414	"When the input field has focus, is empty, and preview mode "+
1415	"is NOT active then Shift-Enter toggles this setting.",

1416	boolValue: 'edit-compact-mode'
1417	},{
1418	label: "Left-align my posts",
1419	hint: "Default alignment of your own messages is selected "
1420	+"based window width/height relationship.",
1421	boolValue: ()=>!document.body.classList.contains('my-messages-right'),
1422	callback: function f(){
1423	document.body.classList[
1424	this.checkbox.checked ? 'remove' : 'add'
1425	]('my-messages-right');
1426	}
1427	},{
1428	label: "Monospace message font",
1429	hint: "Use monospace font for message text?",
1430	boolValue: 'monospace-messages',
1431	callback: function(setting){
1432	document.body.classList[
1433	setting.value ? 'add' : 'remove'
1434	]('monospace-messages');
1435	}
1436	},{
1437	label: "Chat-only mode",
1438	hint: "Toggle the page between normal fossil view and chat-only view.",
1439	boolValue: 'chat-only-mode'
1440	},{
1441	label: "Show images inline",
1442	hint: "Whether to show images inline or as a hyperlink.",
1443	boolValue: 'images-inline'
1444	},namedOptions.activeUsers,{
1445	label: "Timestamps in active users list",
1446	hint: "Whether to show last-message timestamps.",
1447	boolValue: 'active-user-list-timestamps'

1448	}];
1449
1450	/** Set up selection list of notification sounds. */
1451	if(1){
1452	const selectSound = D.select();
	@@ -1465,45 +1507,64 @@
1465	selectSound.selectedIndex = firstSoundIndex;
1466	}
1467	}
1468	Chat.setNewMessageSound(selectSound.value);
1469	settingsOps.push({
1470	hint: "Audio alert. How to enable audio playback is browser-specific!",
1471	select: selectSound,
1472	callback: function(ev){
1473	const v = ev.target.value;
1474	Chat.setNewMessageSound(v);
1475	F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
1476	if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
1477	}










1478	});
1479	}/audio notification config/
1480	settingsOps.push({
1481	label: "Play notification for your own messages.",
1482	hint: "When enabled, the audio notification will be played for all messages, "+
1483	"including your own. When disabled only messages from other users "+
1484	"will trigger a notification.",
1485	boolValue: 'alert-own-messages'







1486	});
1487	/**
1488	Build UI for config options...
1489	*/
1490	settingsOps.forEach(function f(op){
1491	const line = D.addClass(D.div(), 'menu-entry');

1492	const label = op.label
1493	? D.append(D.label(),op.label) : undefined;
1494	const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1495	var hint;
1496	const col0 = D.span();
1497	if(op.hint){
1498	hint = D.append(D.addClass(D.span(),'hint'),op.hint);
1499	}
1500	if(op.hasOwnProperty('select')){
1501	D.append(line, col0, labelWrapper);


1502	D.append(labelWrapper, op.select);
1503	if(hint) D.append(labelWrapper, hint);
1504	if(label) D.append(col0, label);
1505	if(op.callback){
1506	op.select.addEventListener('change', (ev)=>op.callback(ev), false);
1507	}
1508	}else if(op.hasOwnProperty('boolValue')){
1509	if(undefined === f.$id) f.$id = 0;
	@@ -1515,23 +1576,26 @@
1515	}
1516	const check = op.checkbox
1517	= D.attr(D.checkbox(1, op.boolValue()),
1518	'aria-label', op.label);
1519	const id = 'cfgopt'+f.$id;

1520	check.checked = op.boolValue();
1521	op.checkbox = check;
1522	D.attr(check, 'id', id);
1523	D.append(line, col0, labelWrapper);
1524	D.append(col0, check);
1525	if(label){
1526	D.attr(label, 'for', id);
1527	D.append(labelWrapper, label);
1528	}
1529	if(hint) D.append(labelWrapper, hint);
1530	}else{
1531	line.addEventListener('click', callback);
1532	D.append(line, col0, labelWrapper);


1533	if(label) D.append(labelWrapper, label);
1534	if(hint) D.append(labelWrapper, hint);
1535	}
1536	D.append(optionsMenu, line);
1537	if(op.persistentSetting){
	@@ -1550,10 +1614,11 @@
1550	}, false);
1551	}
1552	}else if(op.callback && op.checkbox){
1553	op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1554	}

1555	});
1556	})()/#chat-button-settings setup/;
1557
1558	(function(){
1559	/* Install default settings... must come after
	@@ -1569,20 +1634,58 @@
1569	Chat.settings.addListener('active-user-list-timestamps',function(s){
1570	Chat.showActiveUserTimestamps(s.value);
1571	});
1572	Chat.settings.addListener('chat-only-mode',function(s){
1573	Chat.chatOnlyMode(s.value);





















1574	});
1575	Chat.settings.addListener('edit-compact-mode',function(s){
1576	Chat.e.inputLine.classList[













1577	s.value ? 'add' : 'remove'
1578	]('compact');

1579	});
1580	Chat.settings.addListener('edit-ctrl-send',function(s){
1581	const label = (s.value ? "Ctrl-" : "")+"Enter submits messages.";
1582	const eInput = Chat.inputElement();
1583	eInput.dataset.placeholder = eInput.dataset.placeholder0 + " " +label;



1584	Chat.e.btnSubmit.title = label;
1585	});
1586	const valueKludges = {
1587	/* Convert certain string-format values to other types... */
1588	"false": false,
	@@ -1607,11 +1710,11 @@
1607	this.inputFocus();
1608	};
1609	Chat.e.viewPreview.querySelector('#chat-preview-close').
1610	addEventListener('click', ()=>Chat.setCurrentView(Chat.e.viewMessages), false);
1611	let previewPending = false;
1612	const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputField];
1613	const submit = function(ev){
1614	ev.preventDefault();
1615	ev.stopPropagation();
1616	if(previewPending) return false;
1617	const txt = Chat.inputValue();
1618

	--- src/fossil.page.chat.js
	+++ src/fossil.page.chat.js
	@@ -94,11 +94,11 @@
94	ht = wh;
95	}else{
96	elemsToCount.forEach((e)=>e ? extra += D.effectiveHeight(e) : false);
97	ht = wh - extra;
98	}
99	f.chat.e.inputX.style.maxHeight = (ht/2)+"px";
100	/* ^^^^ this is a middle ground between having no size cap
101	on the input field and having a fixed arbitrary cap. */;
102	contentArea.style.height =
103	contentArea.style.maxHeight = [
104	"calc(", (ht>=100 ? ht : 100), "px",
	@@ -110,11 +110,11 @@
110	if(false){
111	console.debug("resized.",wh, extra, ht,
112	window.getComputedStyle(contentArea).maxHeight,
113	contentArea);
114	console.debug("Set input max height to: ",
115	f.chat.e.inputX.style.maxHeight);
116	}
117	};
118	var doit;
119	window.addEventListener('resize',function(ev){
120	clearTimeout(doit);
	@@ -131,16 +131,18 @@
131	e:{/map of certain DOM elements./
132	messageInjectPoint: E1('#message-inject-point'),
133	pageTitle: E1('head title'),
134	loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
135	inputWrapper: E1("#chat-input-area"),
136	inputElementWrapper: E1('#chat-input-line-wrapper'),
137	fileSelectWrapper: E1('#chat-input-file-area'),
138	viewMessages: E1('#chat-messages-wrapper'),
139	btnSubmit: E1('#chat-button-submit'),
140	btnAttach: E1('#chat-button-attach'),
141	inputX: E1('#chat-input-field-x'),
142	input1: E1('#chat-input-field-single'),
143	inputM: E1('#chat-input-field-multi'),
144	inputFile: E1('#chat-input-file'),
145	contentDiv: E1('div.content'),
146	viewConfig: E1('#chat-config'),
147	viewPreview: E1('#chat-preview'),
148	previewContent: E1('#chat-preview-content'),
	@@ -176,23 +178,24 @@
178	taking into account single- vs multi-line input. The getter returns
179	a string and the setter returns this object. */
180	inputValue: function(){
181	const e = this.inputElement();
182	if(arguments.length){
183	if(e.isContentEditable) e.innerText = arguments[0];
184	else e.value = arguments[0];
185	return this;
186	}
187	return e.isContentEditable ? e.innerText : e.value;
188	},
189	/** Asks the current user input field to take focus. Returns this. */
190	inputFocus: function(){
191	this.inputElement().focus();
192	return this;
193	},
194	/** Returns the current message input element. */
195	inputElement: function(){
196	return this.e.inputFields[this.e.inputFields.$currentIndex];
197	},
198	/** Enables (if yes is truthy) or disables all elements in
199	* this.disableDuringAjax. */
200	enableAjaxComponents: function(yes){
201	D[yes ? 'enable' : 'disable'](this.disableDuringAjax);
	@@ -417,11 +420,17 @@
420	timestamp of each user's most recent message. */
421	"active-user-list-timestamps": false,
422	/* When on, the [audible-alert] is played for one's own
423	messages, else it is only played for other users'
424	messages. */
425	"alert-own-messages": false,
426	/* "Experimental mode" input: use a contenteditable field
427	for input. This is generally more comfortable to use,
428	and more modern, than plain text input fields, but
429	the list of browser-specific quirks and bugs is...
430	not short. */
431	"edit-widget-x": false
432	}
433	},
434	/** Plays a new-message notification sound IF the audible-alert
435	setting is true, else this is a no-op. Returns this.
436	*/
	@@ -579,16 +588,22 @@
588	D.addClassBriefly(e, a, 0, cb);
589	}
590	return this;
591	}
592	};
593	cs.e.inputFields = [ cs.e.input1, cs.e.inputM, cs.e.inputX ];
594	cs.e.inputFields.$currentIndex = 0;
595	cs.e.inputFields.forEach(function(e,ndx){
596	if(ndx===cs.e.inputFields.$currentIndex) D.removeClass(e,'hidden');
597	else D.addClass(e,'hidden');
598	});
599	if(D.attr(cs.e.inputX,'contenteditable','plaintext-only').isContentEditable){
600	cs.$browserHasPlaintextOnly = true;
601	}else{
602	/* Only the Chrome family supports contenteditable=plaintext-only */
603	cs.$browserHasPlaintextOnly = false;
604	D.attr(cs.e.inputX,'contenteditable','true');
605	}
606	cs.animate.$disabled = true;
607	F.fetch.beforesend = ()=>cs.ajaxStart();
608	F.fetch.aftersend = ()=>cs.ajaxEnd();
609	cs.pageTitleOrig = cs.e.pageTitle.innerText;
	@@ -1161,11 +1176,11 @@
1176	/* Acrobatics to keep some installations of Firefox
1177	from pasting formatting into contenteditable fields.
1178	This also works on Chrome, but chrome has the
1179	contenteditable=plaintext-only property which does this
1180	for us. */
1181	Chat.e.inputX.addEventListener(
1182	'paste',
1183	function(ev){
1184	if (ev.clipboardData && ev.clipboardData.getData) {
1185	const pastedText = ev.clipboardData.getData('text/plain');
1186	const selection = window.getSelection();
	@@ -1185,15 +1200,12 @@
1200	ev.dataTransfer.dropEffect = 'none';
1201	ev.preventDefault();
1202	ev.stopPropagation();
1203	return false;
1204	};

1205	['drop','dragenter','dragleave','dragend'].forEach(
1206	(k)=>Chat.e.inputX.addEventListener(k, noDragDropEvents, false)


1207	);
1208	return bxs;
1209	})()/drag/drop/paste/;
1210
1211	const tzOffsetToString = function(off){
	@@ -1323,11 +1335,13 @@
1335	ev.stopPropagation();
1336	Chat.submitMessage();
1337	return false;
1338	}
1339	};
1340	Chat.e.inputFields.forEach(
1341	(e)=>e.addEventListener('keydown', inputWidgetKeydown, false)
1342	);
1343	Chat.e.btnSubmit.addEventListener('click',(e)=>{
1344	e.preventDefault();
1345	Chat.submitMessage();
1346	return false;
1347	});
	@@ -1383,70 +1397,98 @@
1397	/**
1398	Settings ops structure:
1399
1400	label: string for the UI
1401
1402	boolValue: string (name of Chat.settings setting) or a function
1403	which returns true or false. If it is a string, it gets
1404	replaced by a function which returns
1405	Chat.settings.getBool(thatString) and the string gets assigned
1406	to the persistentSetting property of this object.
1407
1408	select: SELECT element (instead of boolValue)
1409
1410	callback: optional handler to call after setting is modified.
1411	Its "this" is the options object. If this object has a
1412	boolValue string or a persistentSetting property, the argument
1413	passed to the callback is a settings object in the form {key:K,
1414	value:V}. If this object does not have boolValue string or
1415	persistentSetting then the callback is passed an event object
1416	in response to the config option's UI widget being activated,
1417	normally a 'change' event.
1418
1419	children: [array of settings objects]. These get listed under
1420	this element and indented slightly for visual grouping. Only
1421	one level of indention is supported.
1422
1423	Elements which only have a label and maybe a hint and
1424	children can be used as headings.
1425
1426	If a setting has a boolValue set, that gets rendered as a
1427	checkbox which toggles the given persistent setting (if
1428	boolValue is a string) AND listens for changes to that setting
1429	fired via Chat.settings.set() so that the checkbox can stay in
1430	sync with external changes to that setting. Various Chat UI
1431	elements stay in sync with the config UI via those settings
1432	events. The checkbox element gets added to the options object
1433	so that the callback() can reference it via this.checkbox.
1434	*/
1435	const settingsOps = [{
1436	label: "Chat Configuration Options",
1437	hint: "Most of these settings are persistent via window.localStorage."
1438	},{
1439	label: "Chat-only mode",
1440	hint: "Toggle the page between normal fossil view and chat-only view.",
1441	boolValue: 'chat-only-mode'
1442	},{
1443	label: "Ctrl-enter to Send",
1444	hint: [
1445	"When on, only Ctrl-Enter will send messages and Enter adds ",
1446	"blank lines. When off, both Enter and Ctrl-Enter send. ",
1447	"When the input field has focus, is empty, and preview ",
1448	"mode is NOT active then Ctrl-Enter toggles this setting."
1449	].join(''),
1450	boolValue: 'edit-ctrl-send'
1451	},{
1452	label: "Compact mode",
1453	hint: [
1454	"Toggle between a space-saving or more spacious writing area. ",
1455	"When the input field has focus, is empty, and preview mode ",
1456	"is NOT active then Shift-Enter toggles this setting."].join(''),
1457	boolValue: 'edit-compact-mode'
1458	},{
1459	label: "Left-align my posts",
1460	hint: "Default alignment of your own messages is selected "
1461	+ "based window width/height relationship.",
1462	boolValue: ()=>!document.body.classList.contains('my-messages-right'),
1463	callback: function f(){
1464	document.body.classList[
1465	this.checkbox.checked ? 'remove' : 'add'
1466	]('my-messages-right');
1467	}
1468	},{
1469	label: "Monospace message font",
1470	hint: "Use monospace font for message and input text.",
1471	boolValue: 'monospace-messages',
1472	callback: function(setting){
1473	document.body.classList[
1474	setting.value ? 'add' : 'remove'
1475	]('monospace-messages');
1476	}
1477	},{
1478	label: "Show images inline",
1479	hint: "Show attached images inline or as a download link.",
1480	boolValue: 'images-inline'
1481	},{
1482	label: "Use 'contenteditable' editing mode.",
1483	boolValue: 'edit-widget-x',
1484	hint: [
1485	"When enabled, chat input uses a so-called 'contenteditable' ",
1486	"field. Though generally more comfortable and modern than ",
1487	"plain-text input fields, browser-specific quirks and bugs ",
1488	"may lead to frustration."
1489	].join('')
1490	}];
1491
1492	/** Set up selection list of notification sounds. */
1493	if(1){
1494	const selectSound = D.select();
	@@ -1465,45 +1507,64 @@
1507	selectSound.selectedIndex = firstSoundIndex;
1508	}
1509	}
1510	Chat.setNewMessageSound(selectSound.value);
1511	settingsOps.push({
1512	label: "Sound Options...",
1513	hint: "How to enable audio playback is browser-specific!",
1514	children:[{
1515	hint: "Audio alert",
1516	select: selectSound,
1517	callback: function(ev){
1518	const v = ev.target.value;
1519	Chat.setNewMessageSound(v);
1520	F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
1521	if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
1522	}
1523	},{
1524	label: "Play notification for your own messages.",
1525	hint: "When enabled, the audio notification will be played for all messages, "+
1526	"including your own. When disabled only messages from other users "+
1527	"will trigger a notification.",
1528	boolValue: 'alert-own-messages'
1529	}]
1530	});
1531	}/audio notification config/
1532	settingsOps.push({
1533	label: "Active User List",
1534	hint: [
1535	"/chat cannot track active connections, but it can tell ",
1536	"you who has posted recently..."].join(''),
1537	children:[
1538	namedOptions.activeUsers,{
1539	label: "Timestamps in active users list",
1540	indent: true,
1541	hint: "Show most recent message timestamps in the active user list.",
1542	boolValue: 'active-user-list-timestamps'
1543	}
1544	]
1545	});
1546	/**
1547	Build UI for config options...
1548	*/
1549	settingsOps.forEach(function f(op,indentOrIndex){
1550	const line = D.addClass(D.div(), 'menu-entry');
1551	if(true===indentOrIndex) D.addClass(line, 'indent');
1552	const label = op.label
1553	? D.append(D.label(),op.label) : undefined;
1554	const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1555	var hint;

1556	if(op.hint){
1557	hint = D.append(D.addClass(D.span(),'hint'),op.hint);
1558	}
1559	if(op.hasOwnProperty('select')){
1560	const col0 = D.addClass(D.span(/empty, but for spacing/),
1561	'toggle-wrapper');
1562	D.append(line, labelWrapper, col0);
1563	D.append(labelWrapper, op.select);
1564	if(hint) D.append(labelWrapper, hint);
1565	if(label) D.append(label);
1566	if(op.callback){
1567	op.select.addEventListener('change', (ev)=>op.callback(ev), false);
1568	}
1569	}else if(op.hasOwnProperty('boolValue')){
1570	if(undefined === f.$id) f.$id = 0;
	@@ -1515,23 +1576,26 @@
1576	}
1577	const check = op.checkbox
1578	= D.attr(D.checkbox(1, op.boolValue()),
1579	'aria-label', op.label);
1580	const id = 'cfgopt'+f.$id;
1581	const col0 = D.addClass(D.span(), 'toggle-wrapper');
1582	check.checked = op.boolValue();
1583	op.checkbox = check;
1584	D.attr(check, 'id', id);
1585	D.append(line, labelWrapper, col0);
1586	D.append(col0, check);
1587	if(label){
1588	D.attr(label, 'for', id);
1589	D.append(labelWrapper, label);
1590	}
1591	if(hint) D.append(labelWrapper, hint);
1592	}else{
1593	if(op.callback){
1594	line.addEventListener('click', (ev)=>op.callback(ev));
1595	}
1596	D.append(line, labelWrapper);
1597	if(label) D.append(labelWrapper, label);
1598	if(hint) D.append(labelWrapper, hint);
1599	}
1600	D.append(optionsMenu, line);
1601	if(op.persistentSetting){
	@@ -1550,10 +1614,11 @@
1614	}, false);
1615	}
1616	}else if(op.callback && op.checkbox){
1617	op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1618	}
1619	if(op.children) op.children.forEach((x)=>f(x,true));
1620	});
1621	})()/#chat-button-settings setup/;
1622
1623	(function(){
1624	/* Install default settings... must come after
	@@ -1569,20 +1634,58 @@
1634	Chat.settings.addListener('active-user-list-timestamps',function(s){
1635	Chat.showActiveUserTimestamps(s.value);
1636	});
1637	Chat.settings.addListener('chat-only-mode',function(s){
1638	Chat.chatOnlyMode(s.value);
1639	});
1640	Chat.settings.addListener('edit-widget-x',function(s){
1641	let eSelected;
1642	if(s.value){
1643	if(Chat.e.inputX===Chat.inputElement()) return;
1644	eSelected = Chat.e.inputX;
1645	}else{
1646	eSelected = Chat.settings.getBool('edit-compact-mode')
1647	? Chat.e.input1 : Chat.e.inputM;
1648	}
1649	const v = Chat.inputValue();
1650	Chat.inputValue('');
1651	Chat.e.inputFields.forEach(function(e,ndx){
1652	if(eSelected===e){
1653	Chat.e.inputFields.$currentIndex = ndx;
1654	D.removeClass(e, 'hidden');
1655	}
1656	else D.addClass(e,'hidden');
1657	});
1658	Chat.inputValue(v);
1659	eSelected.focus();
1660	});
1661	Chat.settings.addListener('edit-compact-mode',function(s){
1662	if(Chat.e.inputX!==Chat.inputElement()){
1663	/* Text field/textarea mode: swap them if needed.
1664	Compact mode of inputX is toggled via CSS. */
1665	const a = s.value
1666	? [Chat.e.input1, Chat.e.inputM, 0]
1667	: [Chat.e.inputM, Chat.e.input1, 1];
1668	const v = Chat.inputValue();
1669	Chat.inputValue('');
1670	Chat.e.inputFields.$currentIndex = a[2];
1671	Chat.inputValue(v);
1672	D.removeClass(a[0], 'hidden');
1673	D.addClass(a[1], 'hidden');
1674	}
1675	Chat.e.inputElementWrapper.classList[
1676	s.value ? 'add' : 'remove'
1677	]('compact');
1678	Chat.e.inputFields[Chat.e.inputFields.$currentIndex].focus();
1679	});
1680	Chat.settings.addListener('edit-ctrl-send',function(s){
1681	const label = (s.value ? "Ctrl-" : "")+"Enter submits messages.";
1682	Chat.e.inputFields.forEach((e)=>{
1683	const v = e.dataset.placeholder0 + " " +label;
1684	if(e.isContentEditable) e.dataset.placeholder = v;
1685	else D.attr(e,'placeholder',v);
1686	});
1687	Chat.e.btnSubmit.title = label;
1688	});
1689	const valueKludges = {
1690	/* Convert certain string-format values to other types... */
1691	"false": false,
	@@ -1607,11 +1710,11 @@
1710	this.inputFocus();
1711	};
1712	Chat.e.viewPreview.querySelector('#chat-preview-close').
1713	addEventListener('click', ()=>Chat.setCurrentView(Chat.e.viewMessages), false);
1714	let previewPending = false;
1715	const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputFields];
1716	const submit = function(ev){
1717	ev.preventDefault();
1718	ev.stopPropagation();
1719	if(previewPending) return false;
1720	const txt = Chat.inputValue();
1721

M src/style.chat.css

+74 -43

		--- src/style.chat.css
		+++ src/style.chat.css
		@@ -40,13 +40,11 @@
40	40	min-width: 9em /*avoid unsightly "underlap" with the neighboring
41	41	.message-widget-tab element*/;
42	42	white-space: normal;
43	43	}
44	44	body.chat.monospace-messages .message-widget-content,
45		-/body.chat.monospace-messages textarea,/
46		-/body.chat.monospace-messages input[type=text],/
47		-body.chat.monospace-messages #chat-input-field{
	45	+body.chat.monospace-messages .chat-input-field{
48	46	font-family: monospace;
49	47	}
50	48	body.chat .message-widget-content > * {
51	49	margin: 0;
52	50	padding: 0;
		@@ -181,34 +179,40 @@
181	179	/* Safari user reports that 2em is necessary to keep the file selection
182	180	widget from overlapping the page footer, whereas a margin of 0 is fine
183	181	for FF/Chrome (and 2em is a huge waste of space for those). */
184	182	margin-bottom: 0;
185	183	}
186		-#chat-input-field {
187		- display: inline-block/supposed workaround for Chrome weirdness/;
188		- padding: 0.2em;
	184	+.chat-input-field {
189	185	flex: 10 1 auto;
190		- background-color: rgba(156,156,156,0.3);
	186	+ margin: 0;
	187	+}
	188	+#chat-input-field-x,
	189	+#chat-input-field-multi {
191	190	overflow: auto;
192	191	resize: vertical;
	192	+}
	193	+#chat-input-field-x {
	194	+ display: inline-block/supposed workaround for Chrome weirdness/;
	195	+ padding: 0.2em;
	196	+ background-color: rgba(156,156,156,0.3);
193	197	white-space: pre-wrap;
194	198	/* ^^^ Firefox, when pasting plain text into a contenteditable field,
195	199	loses all newlines unless we explicitly set this. Chrome does not. */
196	200	cursor: text;
197	201	/* ^^^ In some browsers the cursor may not change for a contenteditable
198	202	element until it has focus, causing potential confusion. */
199	203	}
200		-#chat-input-field:empty::before {
	204	+#chat-input-field-x:empty::before {
201	205	content: attr(data-placeholder);
202	206	opacity: 0.6;
203	207	}
204		-#chat-input-field:not(:focus){
	208	+.chat-input-field:not(:focus){
205	209	border-width: 1px;
206	210	border-style: solid;
207	211	border-radius: 0.25em;
208	212	}
209		-#chat-input-field:focus{
	213	+.chat-input-field:focus{
210	214	/* This transparent border helps avoid the text shifting around
211	215	when the contenteditable attribute causes a border (which we
212	216	apparently cannot style) to be added. */
213	217	border-width: 1px;
214	218	border-style: solid;
		@@ -215,20 +219,20 @@
215	219	border-color: transparent;
216	220	border-radius: 0.25em;
217	221	}
218	222	/* Widget holding the chat message input field, send button, and
219	223	settings button. */
220		-body.chat #chat-input-line {
	224	+body.chat #chat-input-line-wrapper {
221	225	display: flex;
222	226	flex-direction: row;
223	227	align-items: stretch;
224	228	flex-wrap: nowrap;
225	229	}
226		-/*body.chat #chat-input-line:not(.compact) {
	230	+/*body.chat #chat-input-line-wrapper:not(.compact) {
227	231	flex-wrap: nowrap;
228	232	}*/
229		-body.chat #chat-input-line.compact {
	233	+body.chat #chat-input-line-wrapper.compact {
230	234	/* "The problem" with wrapping, together with a contenteditable input
231	235	field, is that the latter grows as the user types, so causes
232	236	wrapping to happen while they type, then to unwrap as soon as the
233	237	input field is cleared (when the message is sent). When we stay
234	238	wrapped in compact mode, the wrapped buttons simply take up too
		@@ -241,11 +245,11 @@
241	245	only way to eliminate the possibility that (A) the buttons
242	246	get truncated in very narrow windows and (B) that they keep
243	247	stable positions.
244	248	*/
245	249	}
246		-body.chat #chat-input-line.compact #chat-input-field {
	250	+body.chat #chat-input-line-wrapper.compact #chat-input-field-x {
247	251	}
248	252
249	253	body.chat #chat-buttons-wrapper {
250	254	flex: 0 1 auto;
251	255	display: flex;
		@@ -255,11 +259,11 @@
255	259	min-height: 1.5em;
256	260	align-self: flex-end
257	261	/*keep buttons stable at bottom/right even when input field
258	262	resizes */;
259	263	}
260		-body.chat #chat-input-line.compact #chat-buttons-wrapper {
	264	+body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper {
261	265	flex-direction: row;
262	266	flex: 1 1 auto;
263	267	align-self: stretch;
264	268	justify-content: flex-end;
265	269	/flex-wrap: wrap;/
		@@ -285,28 +289,27 @@
285	289	font-size: 130%;
286	290	}
287	291	body.chat #chat-buttons-wrapper > .cbutton:hover {
288	292	background-color: rgba(200,200,200,0.3);
289	293	}
290		-body.chat #chat-input-line.compact #chat-buttons-wrapper > .cbutton {
	294	+body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
291	295	margin: 2px 0.125em 0 0.125em;
292	296	min-width: 6ex;
293	297	max-width: 6ex;
294	298	min-height: 2.3ex;
295	299	max-height: 2.3ex;
296	300	font-size: 120%;
297	301	}
298		-body.chat #chat-input-line.compact #chat-buttons-wrapper #chat-button-submit {
	302	+body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
299	303	min-width: 12ex;
300	304	}
301		-body.chat #chat-input-line:not(.compact) #chat-input-field {
302		- /*border-left-style: double;
303		- border-left-width: 3px;
304		- border-right-style: double;
305		- border-right-width: 3px;*/
	305	+.chat-input-field {
	306	+ font-family: inherit
	307	+}
	308	+body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
	309	+body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
306	310	min-height: 4rem;
307		- /max-height: 50rem;/
308	311	/*
309	312	Problems related to max-height:
310	313
311	314	- If we do NOT set a max-height then pasting/typing a large amount
312	315	of text can cause this element to grow without bounds, larger than
		@@ -317,25 +320,25 @@
317	320
318	321	- If we DO set a max-height then its growth is bounded but it also
319	322	cannot manually expanded by the user.
320	323
321	324	The lesser of the two evils seems to be to rely on the browser
322		- feature that a manual resize of the element will pin its sits.
	325	+ feature that a manual resize of the element will pin its size.
323	326	*/
324	327	}
325	328
326		-body.chat #chat-input-line > #chat-button-settings{
	329	+body.chat #chat-input-line-wrapper > #chat-button-settings{
327	330	margin: 0 0 0 0.25em;
328	331	max-width: 2em;
329	332	}
330		-body.chat #chat-input-line > input[type=text],
331		-body.chat #chat-input-line > textarea {
	333	+body.chat #chat-input-line-wrapper > input[type=text],
	334	+body.chat #chat-input-line-wrapper > textarea {
332	335	flex: 20 1 auto;
333	336	max-width: revert;
334	337	min-width: 20em;
335	338	}
336		-body.chat #chat-input-line.compact > input[type=text] {
	339	+body.chat #chat-input-line-wrapper.compact > input[type=text] {
337	340	margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
338	341	}
339	342	/* Widget holding the file selection control and preview */
340	343	body.chat #chat-input-file-area {
341	344	display: flex;
		@@ -367,11 +370,14 @@
367	370	white-space: pre;
368	371	font-family: monospace;
369	372	margin: auto;
370	373	flex: 0;
371	374	}
372		-
	375	+body.chat #chat-drop-details:empty {
	376	+ padding: 0;
	377	+ margin: 0;
	378	+}
373	379	body.chat #chat-drop-details img {
374	380	max-width: 45%;
375	381	max-height: 45%;
376	382	}
377	383	body.chat .chat-view {
		@@ -395,37 +401,62 @@
395	401	/* /chat config options go here */
396	402	flex: 1 1 auto;
397	403	display: flex;
398	404	flex-direction: column;
399	405	overflow: auto;
	406	+ align-items: stretch;
400	407	}
401	408	body.chat #chat-config #chat-config-options .menu-entry {
402	409	display: flex;
403		- align-items: baseline;
	410	+ align-items: center;
404	411	flex-direction: row;
405	412	flex-wrap: nowrap;
406	413	padding: 1em;
	414	+ flex: 1 1 auto;
	415	+ align-self: stretch;
	416	+}
	417	+body.chat #chat-config #chat-config-options .menu-entry.indent {
	418	+ padding-left: 2.5em;
	419	+}
	420	+body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
	421	+ background-color: rgba(175,175,175,0.1);
	422	+}
	423	+body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
	424	+ background-color: rgba(175,175,175,0.25);
	425	+}
	426	+body.chat #chat-config #chat-config-options .menu-entry:first-child {
	427	+ /* Config list header */
	428	+}
	429	+body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper {
	430	+ align-items: start;
	431	+}
	432	+body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper {
	433	+ /* Holder for a checkbox, if any */
	434	+ min-width: 1.5rem;
	435	+ margin-left: 1rem;
	436	+}
	437	+body.chat #chat-config #chat-config-options .menu-entry .label-wrapper {
	438	+ /* Wrapper for a LABEL and a .hint element. */
	439	+ display: flex;
	440	+ flex-direction: column;
	441	+ align-self: baseline;
	442	+ flex: 1 1 auto;
	443	+}
	444	+body.chat #chat-config #chat-config-options .menu-entry label {
	445	+ /* Config option label. */
	446	+ font-weight: bold;
	447	+ white-space: initial;
407	448	}
408	449	body.chat #chat-config #chat-config-options .menu-entry label[for] {
409	450	cursor: pointer;
410	451	}
411		-body.chat #chat-config #chat-config-options .menu-entry > *:first-child {
412		- min-width: 1.5rem;
413		-}
414		-body.chat #chat-config #chat-config-options .menu-entry span.hint {
	452	+body.chat #chat-config #chat-config-options .menu-entry .hint {
415	453	/* Config menu hint text */
416		- font-size: 80%;
	454	+ font-size: 85%;
417	455	white-space: pre-wrap;
418	456	display: inline-block;
419		-}
420		-body.chat #chat-config #chat-config-options .menu-entry:first-child {
421		-}
422		-body.chat #chat-config #chat-config-options .menu-entry div.label-wrapper {
423		- display: flex;
424		- flex-direction: column;
425		- align-self: baseline;
426		- margin-left: 1em;
	457	+ opacity: 0.85;
427	458	}
428	459	body.chat #chat-config #chat-config-options .menu-entry select {
429	460	}
430	461	body.chat #chat-preview #chat-preview-content {
431	462	overflow: auto;
432	463

	--- src/style.chat.css
	+++ src/style.chat.css
	@@ -40,13 +40,11 @@
40	min-width: 9em /*avoid unsightly "underlap" with the neighboring
41	.message-widget-tab element*/;
42	white-space: normal;
43	}
44	body.chat.monospace-messages .message-widget-content,
45	/body.chat.monospace-messages textarea,/
46	/body.chat.monospace-messages input[type=text],/
47	body.chat.monospace-messages #chat-input-field{
48	font-family: monospace;
49	}
50	body.chat .message-widget-content > * {
51	margin: 0;
52	padding: 0;
	@@ -181,34 +179,40 @@
181	/* Safari user reports that 2em is necessary to keep the file selection
182	widget from overlapping the page footer, whereas a margin of 0 is fine
183	for FF/Chrome (and 2em is a huge waste of space for those). */
184	margin-bottom: 0;
185	}
186	#chat-input-field {
187	display: inline-block/supposed workaround for Chrome weirdness/;
188	padding: 0.2em;
189	flex: 10 1 auto;
190	background-color: rgba(156,156,156,0.3);



191	overflow: auto;
192	resize: vertical;





193	white-space: pre-wrap;
194	/* ^^^ Firefox, when pasting plain text into a contenteditable field,
195	loses all newlines unless we explicitly set this. Chrome does not. */
196	cursor: text;
197	/* ^^^ In some browsers the cursor may not change for a contenteditable
198	element until it has focus, causing potential confusion. */
199	}
200	#chat-input-field:empty::before {
201	content: attr(data-placeholder);
202	opacity: 0.6;
203	}
204	#chat-input-field:not(:focus){
205	border-width: 1px;
206	border-style: solid;
207	border-radius: 0.25em;
208	}
209	#chat-input-field:focus{
210	/* This transparent border helps avoid the text shifting around
211	when the contenteditable attribute causes a border (which we
212	apparently cannot style) to be added. */
213	border-width: 1px;
214	border-style: solid;
	@@ -215,20 +219,20 @@
215	border-color: transparent;
216	border-radius: 0.25em;
217	}
218	/* Widget holding the chat message input field, send button, and
219	settings button. */
220	body.chat #chat-input-line {
221	display: flex;
222	flex-direction: row;
223	align-items: stretch;
224	flex-wrap: nowrap;
225	}
226	/*body.chat #chat-input-line:not(.compact) {
227	flex-wrap: nowrap;
228	}*/
229	body.chat #chat-input-line.compact {
230	/* "The problem" with wrapping, together with a contenteditable input
231	field, is that the latter grows as the user types, so causes
232	wrapping to happen while they type, then to unwrap as soon as the
233	input field is cleared (when the message is sent). When we stay
234	wrapped in compact mode, the wrapped buttons simply take up too
	@@ -241,11 +245,11 @@
241	only way to eliminate the possibility that (A) the buttons
242	get truncated in very narrow windows and (B) that they keep
243	stable positions.
244	*/
245	}
246	body.chat #chat-input-line.compact #chat-input-field {
247	}
248
249	body.chat #chat-buttons-wrapper {
250	flex: 0 1 auto;
251	display: flex;
	@@ -255,11 +259,11 @@
255	min-height: 1.5em;
256	align-self: flex-end
257	/*keep buttons stable at bottom/right even when input field
258	resizes */;
259	}
260	body.chat #chat-input-line.compact #chat-buttons-wrapper {
261	flex-direction: row;
262	flex: 1 1 auto;
263	align-self: stretch;
264	justify-content: flex-end;
265	/flex-wrap: wrap;/
	@@ -285,28 +289,27 @@
285	font-size: 130%;
286	}
287	body.chat #chat-buttons-wrapper > .cbutton:hover {
288	background-color: rgba(200,200,200,0.3);
289	}
290	body.chat #chat-input-line.compact #chat-buttons-wrapper > .cbutton {
291	margin: 2px 0.125em 0 0.125em;
292	min-width: 6ex;
293	max-width: 6ex;
294	min-height: 2.3ex;
295	max-height: 2.3ex;
296	font-size: 120%;
297	}
298	body.chat #chat-input-line.compact #chat-buttons-wrapper #chat-button-submit {
299	min-width: 12ex;
300	}
301	body.chat #chat-input-line:not(.compact) #chat-input-field {
302	/*border-left-style: double;
303	border-left-width: 3px;
304	border-right-style: double;
305	border-right-width: 3px;*/
306	min-height: 4rem;
307	/max-height: 50rem;/
308	/*
309	Problems related to max-height:
310
311	- If we do NOT set a max-height then pasting/typing a large amount
312	of text can cause this element to grow without bounds, larger than
	@@ -317,25 +320,25 @@
317
318	- If we DO set a max-height then its growth is bounded but it also
319	cannot manually expanded by the user.
320
321	The lesser of the two evils seems to be to rely on the browser
322	feature that a manual resize of the element will pin its sits.
323	*/
324	}
325
326	body.chat #chat-input-line > #chat-button-settings{
327	margin: 0 0 0 0.25em;
328	max-width: 2em;
329	}
330	body.chat #chat-input-line > input[type=text],
331	body.chat #chat-input-line > textarea {
332	flex: 20 1 auto;
333	max-width: revert;
334	min-width: 20em;
335	}
336	body.chat #chat-input-line.compact > input[type=text] {
337	margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
338	}
339	/* Widget holding the file selection control and preview */
340	body.chat #chat-input-file-area {
341	display: flex;
	@@ -367,11 +370,14 @@
367	white-space: pre;
368	font-family: monospace;
369	margin: auto;
370	flex: 0;
371	}
372



373	body.chat #chat-drop-details img {
374	max-width: 45%;
375	max-height: 45%;
376	}
377	body.chat .chat-view {
	@@ -395,37 +401,62 @@
395	/* /chat config options go here */
396	flex: 1 1 auto;
397	display: flex;
398	flex-direction: column;
399	overflow: auto;

400	}
401	body.chat #chat-config #chat-config-options .menu-entry {
402	display: flex;
403	align-items: baseline;
404	flex-direction: row;
405	flex-wrap: nowrap;
406	padding: 1em;


































407	}
408	body.chat #chat-config #chat-config-options .menu-entry label[for] {
409	cursor: pointer;
410	}
411	body.chat #chat-config #chat-config-options .menu-entry > *:first-child {
412	min-width: 1.5rem;
413	}
414	body.chat #chat-config #chat-config-options .menu-entry span.hint {
415	/* Config menu hint text */
416	font-size: 80%;
417	white-space: pre-wrap;
418	display: inline-block;
419	}
420	body.chat #chat-config #chat-config-options .menu-entry:first-child {
421	}
422	body.chat #chat-config #chat-config-options .menu-entry div.label-wrapper {
423	display: flex;
424	flex-direction: column;
425	align-self: baseline;
426	margin-left: 1em;
427	}
428	body.chat #chat-config #chat-config-options .menu-entry select {
429	}
430	body.chat #chat-preview #chat-preview-content {
431	overflow: auto;
432

	--- src/style.chat.css
	+++ src/style.chat.css
	@@ -40,13 +40,11 @@
40	min-width: 9em /*avoid unsightly "underlap" with the neighboring
41	.message-widget-tab element*/;
42	white-space: normal;
43	}
44	body.chat.monospace-messages .message-widget-content,
45	body.chat.monospace-messages .chat-input-field{


46	font-family: monospace;
47	}
48	body.chat .message-widget-content > * {
49	margin: 0;
50	padding: 0;
	@@ -181,34 +179,40 @@
179	/* Safari user reports that 2em is necessary to keep the file selection
180	widget from overlapping the page footer, whereas a margin of 0 is fine
181	for FF/Chrome (and 2em is a huge waste of space for those). */
182	margin-bottom: 0;
183	}
184	.chat-input-field {


185	flex: 10 1 auto;
186	margin: 0;
187	}
188	#chat-input-field-x,
189	#chat-input-field-multi {
190	overflow: auto;
191	resize: vertical;
192	}
193	#chat-input-field-x {
194	display: inline-block/supposed workaround for Chrome weirdness/;
195	padding: 0.2em;
196	background-color: rgba(156,156,156,0.3);
197	white-space: pre-wrap;
198	/* ^^^ Firefox, when pasting plain text into a contenteditable field,
199	loses all newlines unless we explicitly set this. Chrome does not. */
200	cursor: text;
201	/* ^^^ In some browsers the cursor may not change for a contenteditable
202	element until it has focus, causing potential confusion. */
203	}
204	#chat-input-field-x:empty::before {
205	content: attr(data-placeholder);
206	opacity: 0.6;
207	}
208	.chat-input-field:not(:focus){
209	border-width: 1px;
210	border-style: solid;
211	border-radius: 0.25em;
212	}
213	.chat-input-field:focus{
214	/* This transparent border helps avoid the text shifting around
215	when the contenteditable attribute causes a border (which we
216	apparently cannot style) to be added. */
217	border-width: 1px;
218	border-style: solid;
	@@ -215,20 +219,20 @@
219	border-color: transparent;
220	border-radius: 0.25em;
221	}
222	/* Widget holding the chat message input field, send button, and
223	settings button. */
224	body.chat #chat-input-line-wrapper {
225	display: flex;
226	flex-direction: row;
227	align-items: stretch;
228	flex-wrap: nowrap;
229	}
230	/*body.chat #chat-input-line-wrapper:not(.compact) {
231	flex-wrap: nowrap;
232	}*/
233	body.chat #chat-input-line-wrapper.compact {
234	/* "The problem" with wrapping, together with a contenteditable input
235	field, is that the latter grows as the user types, so causes
236	wrapping to happen while they type, then to unwrap as soon as the
237	input field is cleared (when the message is sent). When we stay
238	wrapped in compact mode, the wrapped buttons simply take up too
	@@ -241,11 +245,11 @@
245	only way to eliminate the possibility that (A) the buttons
246	get truncated in very narrow windows and (B) that they keep
247	stable positions.
248	*/
249	}
250	body.chat #chat-input-line-wrapper.compact #chat-input-field-x {
251	}
252
253	body.chat #chat-buttons-wrapper {
254	flex: 0 1 auto;
255	display: flex;
	@@ -255,11 +259,11 @@
259	min-height: 1.5em;
260	align-self: flex-end
261	/*keep buttons stable at bottom/right even when input field
262	resizes */;
263	}
264	body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper {
265	flex-direction: row;
266	flex: 1 1 auto;
267	align-self: stretch;
268	justify-content: flex-end;
269	/flex-wrap: wrap;/
	@@ -285,28 +289,27 @@
289	font-size: 130%;
290	}
291	body.chat #chat-buttons-wrapper > .cbutton:hover {
292	background-color: rgba(200,200,200,0.3);
293	}
294	body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
295	margin: 2px 0.125em 0 0.125em;
296	min-width: 6ex;
297	max-width: 6ex;
298	min-height: 2.3ex;
299	max-height: 2.3ex;
300	font-size: 120%;
301	}
302	body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
303	min-width: 12ex;
304	}
305	.chat-input-field {
306	font-family: inherit
307	}
308	body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
309	body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
310	min-height: 4rem;

311	/*
312	Problems related to max-height:
313
314	- If we do NOT set a max-height then pasting/typing a large amount
315	of text can cause this element to grow without bounds, larger than
	@@ -317,25 +320,25 @@
320
321	- If we DO set a max-height then its growth is bounded but it also
322	cannot manually expanded by the user.
323
324	The lesser of the two evils seems to be to rely on the browser
325	feature that a manual resize of the element will pin its size.
326	*/
327	}
328
329	body.chat #chat-input-line-wrapper > #chat-button-settings{
330	margin: 0 0 0 0.25em;
331	max-width: 2em;
332	}
333	body.chat #chat-input-line-wrapper > input[type=text],
334	body.chat #chat-input-line-wrapper > textarea {
335	flex: 20 1 auto;
336	max-width: revert;
337	min-width: 20em;
338	}
339	body.chat #chat-input-line-wrapper.compact > input[type=text] {
340	margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
341	}
342	/* Widget holding the file selection control and preview */
343	body.chat #chat-input-file-area {
344	display: flex;
	@@ -367,11 +370,14 @@
370	white-space: pre;
371	font-family: monospace;
372	margin: auto;
373	flex: 0;
374	}
375	body.chat #chat-drop-details:empty {
376	padding: 0;
377	margin: 0;
378	}
379	body.chat #chat-drop-details img {
380	max-width: 45%;
381	max-height: 45%;
382	}
383	body.chat .chat-view {
	@@ -395,37 +401,62 @@
401	/* /chat config options go here */
402	flex: 1 1 auto;
403	display: flex;
404	flex-direction: column;
405	overflow: auto;
406	align-items: stretch;
407	}
408	body.chat #chat-config #chat-config-options .menu-entry {
409	display: flex;
410	align-items: center;
411	flex-direction: row;
412	flex-wrap: nowrap;
413	padding: 1em;
414	flex: 1 1 auto;
415	align-self: stretch;
416	}
417	body.chat #chat-config #chat-config-options .menu-entry.indent {
418	padding-left: 2.5em;
419	}
420	body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
421	background-color: rgba(175,175,175,0.1);
422	}
423	body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
424	background-color: rgba(175,175,175,0.25);
425	}
426	body.chat #chat-config #chat-config-options .menu-entry:first-child {
427	/* Config list header */
428	}
429	body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper {
430	align-items: start;
431	}
432	body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper {
433	/* Holder for a checkbox, if any */
434	min-width: 1.5rem;
435	margin-left: 1rem;
436	}
437	body.chat #chat-config #chat-config-options .menu-entry .label-wrapper {
438	/* Wrapper for a LABEL and a .hint element. */
439	display: flex;
440	flex-direction: column;
441	align-self: baseline;
442	flex: 1 1 auto;
443	}
444	body.chat #chat-config #chat-config-options .menu-entry label {
445	/* Config option label. */
446	font-weight: bold;
447	white-space: initial;
448	}
449	body.chat #chat-config #chat-config-options .menu-entry label[for] {
450	cursor: pointer;
451	}
452	body.chat #chat-config #chat-config-options .menu-entry .hint {



453	/* Config menu hint text */
454	font-size: 85%;
455	white-space: pre-wrap;
456	display: inline-block;
457	opacity: 0.85;







458	}
459	body.chat #chat-config #chat-config-options .menu-entry select {
460	}
461	body.chat #chat-preview #chat-preview-content {
462	overflow: auto;
463

M www/changes.wiki

		--- www/changes.wiki
		+++ www/changes.wiki
		@@ -1,6 +1,10 @@
1	1	<title>Change Log</title>
	2	+
	3	+<h2 id='v2_18'>Changes for version 2.18 (pending)</h2>
	4	+ * [/help?cmd=/chat\|The /chat page] input options have been reworked
	5	+ again for better cross-browser portability.
2	6
3	7	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
4	8
5	9	* Major improvements to the "diff" subsystem, including: <ul>
6	10	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
7	11

	--- www/changes.wiki
	+++ www/changes.wiki
	@@ -1,6 +1,10 @@
1	<title>Change Log</title>




2
3	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
4
5	* Major improvements to the "diff" subsystem, including: <ul>
6	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
7

	--- www/changes.wiki
	+++ www/changes.wiki
	@@ -1,6 +1,10 @@
1	<title>Change Log</title>
2
3	<h2 id='v2_18'>Changes for version 2.18 (pending)</h2>
4	* [/help?cmd=/chat\|The /chat page] input options have been reworked
5	again for better cross-browser portability.
6
7	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
8
9	* Major improvements to the "diff" subsystem, including: <ul>
10	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
11

M www/changes.wiki

		--- www/changes.wiki
		+++ www/changes.wiki
		@@ -1,6 +1,10 @@
1	1	<title>Change Log</title>
	2	+
	3	+<h2 id='v2_18'>Changes for version 2.18 (pending)</h2>
	4	+ * [/help?cmd=/chat\|The /chat page] input options have been reworked
	5	+ again for better cross-browser portability.
2	6
3	7	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
4	8
5	9	* Major improvements to the "diff" subsystem, including: <ul>
6	10	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
7	11

	--- www/changes.wiki
	+++ www/changes.wiki
	@@ -1,6 +1,10 @@
1	<title>Change Log</title>




2
3	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
4
5	* Major improvements to the "diff" subsystem, including: <ul>
6	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
7

	--- www/changes.wiki
	+++ www/changes.wiki
	@@ -1,6 +1,10 @@
1	<title>Change Log</title>
2
3	<h2 id='v2_18'>Changes for version 2.18 (pending)</h2>
4	* [/help?cmd=/chat\|The /chat page] input options have been reworked
5	again for better cross-browser portability.
6
7	<h2 id='v2_17'>Changes for version 2.17 (2021-10-09)</h2>
8
9	* Major improvements to the "diff" subsystem, including: <ul>
10	<li> Added new [/help?cmd=diff\|formatting options]: --by, -b, --webpage, --json, --tcl.
11

Fossil SCM

Keyboard Shortcuts