Fixes (#200)

* lint fixes. * lint improvements. * lint fixes. * transition toggles. * magic number fixes. * conflict fix. * package update. * stored font size is now an option. * trimmed the readme to remove clutter. * fix broken bbs text render due to typos. * Reworked layout of Display Option tab. Moved wrap features to Text. * wrap text behaves correctly. * Fixed Blinking cursor and text off option not applying to the cursor * Simplified the welcome opening. * swapped the config and extension buttons. * adjust popup layout. * css mouse pointer fix.
bengarrett · May 26, 2024 · 50dfcd8 · 50dfcd8
1 parent 41985fb
commit 50dfcd8
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 205 deletions.
diff --git a/docs/changes.md b/docs/changes.md
@@ -12,8 +12,14 @@ hide:
 ## June 2024
 
 - New Text Size slider in the Options to adjust the font size and removed the Font size adjustment on the information header.
-- Updated the Bulma CSS framework to v1.0. The Options themes look different due to this update, as the framework was rewritten from scratch.
+- Updated the Bulma CSS framework to v1.0. The Options themes look different due to this update, as the framework was rewritten from scratch. The fonts, tag elements and some buttons used in the Options are larger.
 - Updated Cascadia Mono and Code fonts to v2024.4 to use its new _Symbols for Legacy Computing_ support, "the Cascadia family now supports a whopping 1140 new glyphs covering sextants, octants, large type pieces, eights, sedecimants, quadrants (separated), segmented digits, circles and checkerboards... In addition, the existing block elements have been aligned to fit the same grid as the new characters to make for seamless ANSI art."
+- Reworked the Display Options tab.
+- - The _80 column wrap_ toggle is renamed to _Narrow wrap_ and works with both ANSI and plain text documents.
+- - Created a new _Style_ panel and moved a number of _Text_ toggles to it.
+- - _Colors_ panel has been split into _Text color_ and _ANSI color_.
+- - _Text pairs_ is now _Foreground and background pair_, and it now uses the current selected font for the color labels.
+- Fixed _Blinking cursor and text_ off option not applying to the cursor.
 
 ## 5.4
 

diff --git a/ext/css/layout.css b/ext/css/layout.css
@@ -111,10 +111,10 @@
   font-size: 400%;
 }
 
-/* for ascii text that lack line breaks, wrap text to the browser tab */
-.has-text-plain {
+.has-text-plain-with-container {
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  max-width: 60em;
 }
 
 /*
@@ -152,7 +152,7 @@ header hr {
   width: 98%;
 }
 
-header strong{
+header strong {
   cursor: pointer;
   user-select: none;
 }

diff --git a/ext/css/text_animation-off.css b/ext/css/text_animation-off.css
@@ -10,6 +10,11 @@
   --blink-fast-timer: 0ms;
 }
 
+/* DOS cursor blinking */
+.dos-cursor {
+  animation: none;
+}
+
 /* PCBoard blinking */
 i.PB8,
 i.PB9,

diff --git a/ext/css/text_pagewrap.css b/ext/css/text_pagewrap.css
@@ -24,3 +24,9 @@ article > pre {
   */
   min-width: auto;
 }
+
+/* for ascii text that lack line breaks, wrap text to the browser tab */
+.has-text-plain {
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
diff --git a/ext/html/options.html b/ext/html/options.html
diff --git a/ext/html/popup.html b/ext/html/popup.html
@@ -11,7 +11,8 @@
       width: 33em;
     }
 
-    div#allowAccess {
+    div#allowAccess,
+    div#unlockLocalfiles {
       cursor: pointer;
     }
 
@@ -57,14 +58,14 @@
             <use xlink:href="../assets/svg/material-icons.svg#display"></use>
           </svg>
         </span>
-        <span class="icon" id="extension">
+        <span class="icon" id="settings">
           <svg role="img" class="material-icons">
-            <use xlink:href="../assets/svg/material-icons.svg#extension"></use>
+            <use xlink:href="../assets/svg/material-icons.svg#settings"></use>
           </svg>
         </span>
-        <span class="icon" id="settings">
+        <span class="icon" id="extension">
           <svg role="img" class="material-icons">
-            <use xlink:href="../assets/svg/material-icons.svg#settings"></use>
+            <use xlink:href="../assets/svg/material-icons.svg#extension"></use>
           </svg>
         </span>
       </div>
@@ -75,16 +76,16 @@ <h1 class="title is-5">RetroTxt
         RetroTxt runs in the background and will attempt to format text files hosted on these websites:
       </div>
       <div class="block is-family-monospace" id="websites"></div>
-      <div class="block" id="localfiles">
+      <div class="block has-text-link-dark" id="localfiles">
         RetroTxt also formats local text files using drag and drop.
       </div>
-      <div class="block is-hidden" id="unlockLocalfiles">
-        When <a id="linkUnlock">Allow access to file URLs is toggled</a>, RetroTxt can format local
-        text files using drag and drop.
-      </div>
-      <div class="notification is-link" id="allowAccess">
+      <div class="notification is-link is-light" id="allowAccess" title="Open the Settings Option tab">
         To include a new website, click here to open settings and add the URL to the
-        <strong>Run RetroTxt on files hosted on these domains</strong> list.
+        <strong>Autorun for webistes</strong> list.
+      </div>
+      <div class="notification is-info is-light is-hidden" id="unlockLocalfiles" title="Open the Extension options">
+        When <strong>Allow access to file URLs</strong> is toggled, RetroTxt
+        can format local text files using drag and drop.
       </div>
     </div>
   </div>

diff --git a/ext/manifest.json b/ext/manifest.json
@@ -76,7 +76,7 @@
     "storage"
   ],
   "short_name": "RetroTxt",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "web_accessible_resources": [
     {
       "resources": [

diff --git a/ext/scripts/helpers.js b/ext/scripts/helpers.js
@@ -142,6 +142,7 @@ function LinkDetails() {
 async function ToggleTextEffect(effect = `normal`, dom = {}, colorClass = ``) {
   if (typeof effect !== `string`) CheckArguments(`effect`, `string`, effect)
   if (typeof dom !== `object`) CheckArguments(`dom`, `object`, dom)
+  if (typeof dom.classList === `undefined`) return // error
   if (dom.classList === null) return // error
   // this removes any pre-existing text effect class names from the element
   for (const item of dom.classList) {

diff --git a/ext/scripts/options.js b/ext/scripts/options.js
@@ -1378,9 +1378,7 @@ class TextSize {
           )
         this.status.textContent = `Saved text size selection ${this.value}`
         this.storageSave()
-        document.getElementById(`textSizeOutput`).value = this.m.get(
-          this.value,
-        )
+        document.getElementById(`textSizeOutput`).value = this.m.get(this.value)
       },
       { passive: true },
     )
@@ -1915,7 +1913,7 @@ class Hosts {
       default:
         anchor.href = `https://${hostname}`
     }
-    if (!suggestion) anchor.classList.add(`is-light`)
+    if (!suggestion) anchor.classList.remove(`is-light`)
     this.input.value = ``
     this.submit.disabled = true
     tag.style.display = `inline`

diff --git a/ext/scripts/parse_dos.js b/ext/scripts/parse_dos.js
@@ -1022,7 +1022,7 @@ class BBS {
           USE_PROFILES: { html: true },
         })
         const bold = clean.replace(RegExp(/([◘░▒▓█▄▐▌▀■]+)/, `g`), `<b>$1</b>`)
-        element.innerHTML(bold)
+        element.innerHTML = bold
       } else element.textContent = appendText
       pre.append(element)
     }
@@ -1093,7 +1093,7 @@ class BBS {
           USE_PROFILES: { html: true },
         })
         const bold = clean.replace(RegExp(/([◘░▒▓█▄▐▌▀■]+)/, `g`), `<b>$1</b>`)
-        element.innerHTML(bold)
+        element.innerHTML = bold
       } else element.textContent = appendText
       pre.append(element)
     }
@@ -1131,7 +1131,7 @@ class BBS {
           USE_PROFILES: { html: true },
         })
         const bold = clean.replace(RegExp(/([◘░▒▓█▄▐▌▀■]+)/, `g`), `<b>$1</b>`)
-        element.innerHTML(bold)
+        element.innerHTML = bold
       } else element.textContent = appendText
       pre.append(element)
     }

diff --git a/ext/scripts/popup.js b/ext/scripts/popup.js
@@ -46,8 +46,7 @@ async function LinkTos() {
       div1.classList.add(`is-hidden`)
       const div2 = document.getElementById(`unlockLocalfiles`)
       div2.classList.remove(`is-hidden`)
-      const a = document.getElementById(`linkUnlock`)
-      a.addEventListener(`click`, () => {
+      div2.addEventListener(`click`, () => {
         chrome.tabs.create({
           url: LinkDetails(),
         })

diff --git a/ext/scripts/retrotxt.js b/ext/scripts/retrotxt.js
@@ -408,7 +408,7 @@ class DOM {
    * Toggles 'Center align text' alignment.
    */
   async clickCenterAlign(center = false) {
-    if (this.article === null)
+    if (typeof this.article === `undefined`)
       return console.error(`this.article element does not exist`)
     this.article.classList.remove(`has-left`, `has-center`)
     if (center) this.article.classList.add(`has-center`)
@@ -461,7 +461,7 @@ class DOM {
       return console.error(`the classList for the body element is null`)
     this.body.classList.add(`${colorName}-bg`)
     // foreground to article
-    if (this.article === null)
+    if (typeof this.article === `undefined`)
       return console.error(`article element is missing`)
     if (this.article.classList === null)
       return console.error(`the classList for the article element is null`)
@@ -588,9 +588,7 @@ class DOM {
    * @param [size=`1`] Text size value
    */
   async clickTextSize(size = `1`) {
-    console.log(`clickTextSize`, size)
-    if (typeof size !== `string`)
-      CheckArguments(`textFontSize`, `string`, size)
+    if (typeof size !== `string`) CheckArguments(`textFontSize`, `string`, size)
     if (typeof this.rawText === `undefined`)
       return console.error(`this.rawText element is missing`)
     this.rawText.classList.remove(
@@ -749,7 +747,6 @@ class DOM {
     this._restoreErr(`fontFamilyName`)
   }
   async _restoreTextSize() {
-    console.log(this.results)
     const ts = this.results.textFontSize
     if (typeof ts === `string`) return this.clickTextSize(ts)
     this._restoreErr(`textFontSize`)
@@ -1767,16 +1764,14 @@ class Information extends Output {
         this._sep(),
         this._label(`iCE colors`),
         this._setIceColors(),
-        this._sep(),
-        this._label(`page wrap`),
-        this._setPageWrap(),
       )
       // append any ecma-48 errors
       const sum = this.ecma48.otherCodesCount + this.ecma48.unknownCount,
         errorTrigger = 10
       if (sum > errorTrigger) return this.append(this._setErrorBBS())
       if (sum > 0) return this.append(this._setWarningBBS())
     }
+    div2.append(this._sep(), this._label(`page wrap`), this._setPageWrap())
   }
   append(element) {
     this.show.append(element)
@@ -2190,10 +2185,8 @@ function handleChanges(change) {
         return dom.clickHeader(2)
     }
   }
-  if (changes.textFontSize) {
-    console.log(changes.textFontSize.newValue, `textFontSize change`)
+  if (changes.textFontSize)
     return dom.clickTextSize(changes.textFontSize.newValue)
-  }
   if (changes.lineHeight)
     return dom.clickLineHeight(changes.lineHeight.newValue)
   if (changes.pageWrap) {
@@ -2453,7 +2446,11 @@ function Execute(tabId = 0, pageEncode = `unknown`) {
     const bbs = new BBS(`${output.data.html}`, PlainText)
     output.data.html = ``
     output.pre = bbs.normalize()
-    output.pre.classList.add(`has-text-plain`)
+    const wrapCol = sessionStorage.getItem(`ansiColumnWrap`)
+    const wrapPage = sessionStorage.getItem(`ansiPageWrap`)
+    if (wrapCol === `true`)
+      output.pre.classList.add(`has-text-plain-with-container`)
+    if (wrapPage === `true`) output.pre.classList.add(`has-text-plain`)
   }
   // apply a blinking cursor
   output.cursor()

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml