Fossil SCM

More /chat config cosmetics. Started 2.18 change notes.

stephan 2021-10-10 06:31 chat-input-revisited
Commit 891d79de18801d2d10326b6a3c19163061b94ce51e4df8e313021048e7af2b5a
Parent 5d7c98ef92046b0…
3 files changed +39 -22 +3 +4
~ src/fossil.page.chat.js ~ src/style.chat.css ~ www/changes.wiki
M src/fossil.page.chat.js
+39 -22
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1413,10 +1413,17 @@
14131413
 passed to the callback is a settings object in the form {key:K,
14141414
 value:V}. If this object does not have boolValue string or
14151415
 persistentSetting then the callback is passed an event object
14161416
 in response to the config option's UI widget being activated,
14171417
 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.
14181425
14191426
 If a setting has a boolValue set, that gets rendered as a
14201427
 checkbox which toggles the given persistent setting (if
14211428
 boolValue is a string) AND listens for changes to that setting
14221429
 fired via Chat.settings.set() so that the checkbox can stay in
@@ -1469,16 +1476,10 @@
14691476
 }
14701477
 },{
14711478
 label: "Show images inline",
14721479
 hint: "Show attached images inline or as a download link.",
14731480
 boolValue: 'images-inline'
1474
- },
1475
- namedOptions.activeUsers,
1476
- {
1477
- label: "Timestamps in active users list",
1478
- hint: "Show most recent message timestamps in the active user list.",
1479
- boolValue: 'active-user-list-timestamps'
14801481
 },{
14811482
 label: "Use 'contenteditable' editing mode.",
14821483
 boolValue: 'edit-widget-x',
14831484
 hint: [
14841485
 "When enabled, chat input uses a so-called 'contenteditable' ",
@@ -1507,34 +1508,49 @@
15071508
 }
15081509
 }
15091510
 Chat.setNewMessageSound(selectSound.value);
15101511
 settingsOps.push({
15111512
 label: "Sound Options...",
1512
- hint: "How to enable audio playback is browser-specific!"
1513
- },{
1514
- hint: "Audio alert",
1515
- select: selectSound,
1516
- callback: function(ev){
1517
- const v = ev.target.value;
1518
- Chat.setNewMessageSound(v);
1519
- F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
1520
- if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
1521
- }
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
+ }]
15221530
 });
15231531
 }/*audio notification config*/
15241532
 settingsOps.push({
1525
- label: "Play notification for your own messages.",
1526
- hint: "When enabled, the audio notification will be played for all messages, "+
1527
- "including your own. When disabled only messages from other users "+
1528
- "will trigger a notification.",
1529
- 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
+ ]
15301545
 });
15311546
 /**
15321547
 Build UI for config options...
15331548
 */
1534
- settingsOps.forEach(function f(op){
1549
+ settingsOps.forEach(function f(op,indentOrIndex){
15351550
 const line = D.addClass(D.div(), 'menu-entry');
1551
+ if(true===indentOrIndex) D.addClass(line, 'indent');
15361552
 const label = op.label
15371553
 ? D.append(D.label(),op.label) : undefined;
15381554
 const labelWrapper = D.addClass(D.div(), 'label-wrapper');
15391555
 var hint;
15401556
 if(op.hint){
@@ -1598,10 +1614,11 @@
15981614
 }, false);
15991615
 }
16001616
 }else if(op.callback && op.checkbox){
16011617
 op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
16021618
 }
1619
+ if(op.children) op.children.forEach((x)=>f(x,true));
16031620
 });
16041621
 })()/*#chat-button-settings setup*/;
16051622
16061623
 (function(){
16071624
 /* Install default settings... must come after
16081625
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1413,10 +1413,17 @@
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 If a setting has a boolValue set, that gets rendered as a
1420 checkbox which toggles the given persistent setting (if
1421 boolValue is a string) AND listens for changes to that setting
1422 fired via Chat.settings.set() so that the checkbox can stay in
@@ -1469,16 +1476,10 @@
1469 }
1470 },{
1471 label: "Show images inline",
1472 hint: "Show attached images inline or as a download link.",
1473 boolValue: 'images-inline'
1474 },
1475 namedOptions.activeUsers,
1476 {
1477 label: "Timestamps in active users list",
1478 hint: "Show most recent message timestamps in the active user list.",
1479 boolValue: 'active-user-list-timestamps'
1480 },{
1481 label: "Use 'contenteditable' editing mode.",
1482 boolValue: 'edit-widget-x',
1483 hint: [
1484 "When enabled, chat input uses a so-called 'contenteditable' ",
@@ -1507,34 +1508,49 @@
1507 }
1508 }
1509 Chat.setNewMessageSound(selectSound.value);
1510 settingsOps.push({
1511 label: "Sound Options...",
1512 hint: "How to enable audio playback is browser-specific!"
1513 },{
1514 hint: "Audio alert",
1515 select: selectSound,
1516 callback: function(ev){
1517 const v = ev.target.value;
1518 Chat.setNewMessageSound(v);
1519 F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
1520 if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
1521 }
 
 
 
 
 
 
 
1522 });
1523 }/*audio notification config*/
1524 settingsOps.push({
1525 label: "Play notification for your own messages.",
1526 hint: "When enabled, the audio notification will be played for all messages, "+
1527 "including your own. When disabled only messages from other users "+
1528 "will trigger a notification.",
1529 boolValue: 'alert-own-messages'
 
 
 
 
 
 
 
1530 });
1531 /**
1532 Build UI for config options...
1533 */
1534 settingsOps.forEach(function f(op){
1535 const line = D.addClass(D.div(), 'menu-entry');
 
1536 const label = op.label
1537 ? D.append(D.label(),op.label) : undefined;
1538 const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1539 var hint;
1540 if(op.hint){
@@ -1598,10 +1614,11 @@
1598 }, false);
1599 }
1600 }else if(op.callback && op.checkbox){
1601 op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1602 }
 
1603 });
1604 })()/*#chat-button-settings setup*/;
1605
1606 (function(){
1607 /* Install default settings... must come after
1608
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1413,10 +1413,17 @@
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
@@ -1469,16 +1476,10 @@
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' ",
@@ -1507,34 +1508,49 @@
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){
@@ -1598,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
1625
M src/style.chat.css
+3
--- src/style.chat.css
+++ src/style.chat.css
@@ -411,10 +411,13 @@
411411
 flex-direction: row;
412412
 flex-wrap: nowrap;
413413
 padding: 1em;
414414
 flex: 1 1 auto;
415415
 align-self: stretch;
416
+}
417
+body.chat #chat-config #chat-config-options .menu-entry.indent {
418
+ padding-left: 2.5em;
416419
 }
417420
 body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
418421
 background-color: rgba(175,175,175,0.1);
419422
 }
420423
 body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
421424
--- src/style.chat.css
+++ src/style.chat.css
@@ -411,10 +411,13 @@
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:nth-of-type(even){
418 background-color: rgba(175,175,175,0.1);
419 }
420 body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
421
--- src/style.chat.css
+++ src/style.chat.css
@@ -411,10 +411,13 @@
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
M www/changes.wiki
+4
--- www/changes.wiki
+++ www/changes.wiki
@@ -1,6 +1,10 @@
11
 <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.
26
37
 <h2 id='v2_17'>Changes for version 2.17 (pending)</h2>
48
 * Major improvements to the "diff" subsystem, including: <ul>
59
 <li> Added new [/help?cmd=diff|formatting options]: --by, -b, --webpage, --json, --tcl.
610
 <li> Partial-line matching for unified diffs
711
--- 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 (pending)</h2>
4 * Major improvements to the "diff" subsystem, including: <ul>
5 <li> Added new [/help?cmd=diff|formatting options]: --by, -b, --webpage, --json, --tcl.
6 <li> Partial-line matching for unified diffs
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 (pending)</h2>
8 * Major improvements to the "diff" subsystem, including: <ul>
9 <li> Added new [/help?cmd=diff|formatting options]: --by, -b, --webpage, --json, --tcl.
10 <li> Partial-line matching for unified diffs
11

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button