Begin moving a few DOM manipulations to cash-do

Better support for more than two users.
2023-03-27 21:40:43 +02:00 · 2023-03-27 21:36:33 +02:00
8 changed files with 85 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,4 @@
 .parcel-cache/
 dist/
 node_modules/
-
+yarn-error.log
--- a/package.json
+++ b/package.json
@ -19,7 +19,9 @@
    "@types/bootstrap": "^5.2.3",
    "bootstrap": "^5.2",
    "bootstrap-icons": "^1.10.3",
+    "cash-dom": "^8.1.4",
    "dexie": "^3.2.2",
-    "jsx-dom": "^8.0.3"
+    "jsx-dom": "^8.0.3",
+    "string-to-color": "^2.2.2"
  }
 }
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@ -8,6 +8,10 @@ table {
 th, td {
 }

+tr.session-stripe {
+    background-color: #f4f4f4;
+}
+
 .message-from-user {
    max-width: 400px;
    white-space: nowrap;
@ -58,10 +62,8 @@ th, td {
 }

@include media-breakpoint-down(lg) {
-    /*
-      Remove padding from container, but keep it on stuff that isn't
-      navbar or chat messages.
-   */
+    //Remove padding from container, but keep it on stuff that isn't
+    //navbar or chat messages.
    .container-lg {
 	padding-left: 0px;
 	padding-right: 0px;
--- a/src/ts/db.ts
+++ b/src/ts/db.ts
@ -1,8 +1,7 @@
 import Dexie from 'dexie';

 export class MsnDatabase extends Dexie {
-    entries!: Dexie.Table<BackupEntry, string>; // number = type of the primkey
-    //...other tables goes here...
+    entries!: Dexie.Table<BackupEntry, string>;

    constructor() {
        super("MsnDatabase");
--- a/src/ts/index.tsx
+++ b/src/ts/index.tsx
@ -1,5 +1,7 @@
 import * as bootstrap from 'bootstrap';
+import stc from 'string-to-color';

+import $ from 'cash-dom';
 import xslContent from 'bundle-text:../xsl/MessageLog.xsl';
 import * as ui from './ui';
 import { db } from './db';
@ -94,15 +96,26 @@ function checkOverflow(elem: HTMLElement) {
 }

 function processFragment() {
-    document
-        .querySelectorAll('[data-bs-toggle="popover"]')
-        .forEach(popover => new bootstrap.Popover(popover, { trigger: 'focus' }));
+    // add username popover
+    $('[data-bs-toggle="popover"]')
+        .each((_, popover) => new bootstrap.Popover(popover, { trigger: 'focus' }));

-    document.querySelectorAll('.message-content div').forEach(div => {
-        if (checkOverflow(div as HTMLElement)) {
+    // indicate overflow on mobile
+    $('.message-content div').each((_, div) => {
+        if (checkOverflow(div)) {
            div.parentElement?.classList.add('overflow-icon');
        }
    });
+
+    // uniquely color usernames
+    const colorMap = new Map(
+        Array.from($('.message-from-user'))
+            .map(el => el?.textContent || '')
+            .map((username) => [username, stc(username)])
+    );
+
+    $('.message-from-user')
+        .each((_, el) => el.style.color = colorMap.get(el.textContent!)!)
 }

 async function saveToDatabase(filename: string, xml: string) {
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@ -1,6 +1,7 @@
 {
  "compilerOptions": {
    "strict": true,
+    "noImplicitAny": false,
    "experimentalDecorators": true,
    "target": "es6",
    "module": "es6",
--- a/src/xsl/MessageLog.xsl
+++ b/src/xsl/MessageLog.xsl
@ -21,11 +21,11 @@ https://github.com/jerecui/MSNChatHistoryCombiner

  <!-- variables -->
  <xsl:variable name='UseZebraStripe'>1</xsl:variable>
-  <xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
+  <xsl:variable name='ZebraStripeClass'>session-stripe</xsl:variable>
  <xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>

  <xsl:template match="Log">
-    <table id='BodyTable' class="table">
+    <table id='BodyTable' class="table border">
      <thead>
        <tr>
 	  <th class="d-lg-none message-mobile-date-time">
@ -34,10 +34,10 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 	  <th class="d-none d-lg-table-cell">
            <xsl:value-of select="$ColumnHeader_Date"/>
          </th>
-	  <th class="d-none d-lg-table-cell">
+	  <th class="d-none d-lg-table-cell border-end">
            <xsl:value-of select="$ColumnHeader_Time"/>
          </th>
-	  <th class="message-from-user">
+	  <th>
            <xsl:value-of select="$ColumnHeader_From"/>
          </th>
 	  <th>
@ -73,7 +73,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
    <tr>
      <xsl:call-template name="CommonMessageProcessing" />

-      <td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
+      <td class="message-from-user" ><xsl:apply-templates select="From/User"/> </td>
      <td class="message-content">
        <div class="overflow-auto">
          <xsl:value-of select="Text"/>
@ -111,8 +111,8 @@ https://github.com/jerecui/MSNChatHistoryCombiner
    <!-- zebra-stripe the sessions -->
    <xsl:if test="$UseZebraStripe = 1">
      <xsl:if test="(@SessionID mod 2) = 1">
-        <xsl:attribute name="style">
-          <xsl:value-of select="$ZebraStripeStyle"/>
+        <xsl:attribute name="class">
+          <xsl:value-of select="$ZebraStripeClass"/>
        </xsl:attribute>
      </xsl:if>
    </xsl:if>
@ -130,7 +130,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
      </a>
    </td>
    <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
-    <td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
+    <td class="d-none d-lg-table-cell message-time border-end"> <xsl:value-of select="@Time"/> </td>
  </xsl:template>


--- a/yarn.lock
+++ b/yarn.lock
@ -866,6 +866,11 @@ caniuse-lite@^1.0.30001400:
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
  integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==

+cash-dom@^8.1.4:
+  version "8.1.4"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-8.1.4.tgz#445c2a509cffa8b1c99094634418b4b439d57718"
+  integrity sha512-bFLMk+r3lv+sDwxlAFfRlMxpRls7zMnSQePVpNouwnpm9G4MbLYZZtIUG2urUgfmIaKlc/hqG8o7yZg3+nFKRA==
+
 chalk@^2.0.0:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@ -932,6 +937,11 @@ color-name@~1.1.4:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

+colornames@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
+  integrity sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==
+
 commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@ -1112,6 +1122,11 @@ has-flag@^4.0.0:
  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==

+hex-rgb@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.3.0.tgz#af5e974e83bb2fefe44d55182b004ec818c07776"
+  integrity sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==
+
 htmlnano@^2.0.0:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-2.0.3.tgz#50ee639ed63357d4a6c01309f52a35892e4edc2e"
@ -1279,6 +1294,21 @@ lmdb@2.5.2:
    "@lmdb/lmdb-linux-x64" "2.5.2"
    "@lmdb/lmdb-win32-x64" "2.5.2"

+lodash.padend@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.padend/-/lodash.padend-4.6.1.tgz#53ccba047d06e158d311f45da625f4e49e6f166e"
+  integrity sha512-sOQs2aqGpbl27tmCS1QNZA09Uqp01ZzWfDUoD+xzTii0E7dSQfRKcRetFwa+uXaxaqL+TKm7CgD2JdKP7aZBSw==
+
+lodash.trimstart@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/lodash.trimstart/-/lodash.trimstart-4.5.1.tgz#8ff4dec532d82486af59573c39445914e944a7f1"
+  integrity sha512-b/+D6La8tU76L/61/aN0jULWHkT0EeJCmVstPBn/K9MtD2qBW83AsBNrr63dKuWYwVMO7ucv13QNO/Ek/2RKaQ==
+
+lodash.words@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-4.2.0.tgz#5ecfeaf8ecf8acaa8e0c8386295f1993c9cf4036"
+  integrity sha512-mXxqd8Yx9BGPij3lZKFSdOsjOTbL4krbCCp9slEozaN4EMppA2dFmK/f8HeohodprY6W0vOdiQ5WFgPaTI75xQ==
+
 mdn-data@2.0.14:
  version "2.0.14"
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@ -1465,6 +1495,11 @@ resolve-from@^4.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

+rgb-hex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-3.0.0.tgz#eab0168cc1279563b18a14605315389142e2e487"
+  integrity sha512-8h7ZcwxCBDKvchSWbWngJuSCqJGQ6nDuLLg+QcRyQDbX9jMWt+PpPeXAhSla0GOooEomk3lCprUpGkMdsLjKyg==
+
 safe-buffer@^5.0.1:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@ -1507,6 +1542,18 @@ stable@^0.1.8:
  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==

+string-to-color@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/string-to-color/-/string-to-color-2.2.2.tgz#46210bf7777dc9198dcdf997bd18ae6749cc9a73"
+  integrity sha512-XeA2goP7PNsSlz8RRn6KhYswnMf5Tl+38ajfy8n4oZJyMGC4qqKgHNHsZ/3qwvr42NRIjf9eSr721SyetDeMkA==
+  dependencies:
+    colornames "^1.1.1"
+    hex-rgb "^4.1.0"
+    lodash.padend "^4.6.1"
+    lodash.trimstart "^4.5.1"
+    lodash.words "^4.2.0"
+    rgb-hex "^3.0.0"
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
Author	SHA1	Message	Date
projectmoon	2a5415bc70	Begin moving a few DOM manipulations to cash-do	2023-03-27 21:40:43 +02:00
projectmoon	6c399bc669	Better support for more than two users.	2023-03-27 21:36:33 +02:00