From 811e6205ed563fc2060d2649701cb9f167cb1026 Mon Sep 17 00:00:00 2001
From: Rebonack <rebonackssb@gmail.com>
Date: Thu, 1 Oct 2020 11:11:25 +1000
Subject: [PATCH] [#390] Typography Symbols are not mapped to universal
 keyboard standards.

Replaces specific typography characters with universal standards.
This is available to the user by a default checked checkbox.

The option is given to the user rather than always automatically applied because:
a) I'm not 100% sure other languages or keyboard layouts do not use these typography symbols as standard inputs.
b) There may be some who enjoy the challenge of entering Shift+Option+[ just to get a fancy quote mark.
---
 public/css/style.scss | 31 +++++++++++++++++++++++++++++++
 public/index.html     |  8 ++++++++
 public/js/script.js   | 16 ++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/public/css/style.scss b/public/css/style.scss
index a39efc58a..27ae4472c 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -418,6 +418,37 @@ a:hover {
         }
       }
     }
+    .typographyCheck {
+      span {
+        display: block;
+        font-size: 0.76rem;
+        color: var(--sub-color);
+        margin-left: 1.5rem;
+      }
+
+      input {
+        margin: 0 !important;
+        cursor: pointer;
+        width: 0;
+        height: 0;
+        display: none;
+
+        & ~ .customTextTypographyCheckbox {
+          width: 12px;
+          height: 12px;
+          background: rgba(0, 0, 0, 0.1);
+          border-radius: 2px;
+          box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
+          display: inline-block;
+          margin: 0 0.5rem 0 0.25rem;
+          transition: 0.25s;
+        }
+
+        &:checked ~ .customTextTypographyCheckbox {
+          background: var(--main-color);
+        }
+      }
+    }
   }
 }
 
diff --git a/public/index.html b/public/index.html
index 9534c8b98..eb2528962 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,6 +80,14 @@
             Word count
             <input type="number" value="1" min="1" max="10000" />
           </label>
+          <label class="typographyCheck">
+            <input type="checkbox" checked />
+            <div class="customTextTypographyCheckbox"></div>
+            Remove Fancy Typography
+            <span>
+              Standardises Typography Symbols: “ and ” become " for exmaple.
+            </span>
+          </label>
         </div>
         <div class="button">ok</div>
       </div>
diff --git a/public/js/script.js b/public/js/script.js
index a3991ea36..3167c6b8a 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -2741,6 +2741,19 @@ function changeCustomText() {
   // initWords();
 }
 
+function cleanTypographySymbols(textToClean) {
+  var specials = {
+    '“': '"', // &ldquo;	&#8220;
+    '”': '"', // &rdquo;	&#8221;
+    '’': "'", // &lsquo;	&#8216;
+    '‘': "'", // &rsquo;	&#8217;
+    ',': ",", // &sbquo;	&#8218;
+    '—': "-", // &mdash;  &#8212;
+    '…': "..."// &hellip; &#8230; 
+  }
+  return textToClean.replace(/[“”’‘—,…]/g, (char) => specials[char] || '');
+}
+
 function changePage(page) {
   if (pageTransition) {
     return;
@@ -3516,6 +3529,9 @@ $("#customTextPopup .button").click((e) => {
   text = text.trim();
   text = text.replace(/[\n\r\t ]/gm, " ");
   text = text.replace(/ +/gm, " ");
+  if($("#customTextPopup .typographyCheck input").prop("checked")) {
+    text = cleanTypographySymbols(text)
+  }
   text = text.split(" ");
   // if (text.length >= 10000) {
   //   showNotification("Custom text cannot be longer than 10000 words.", 4000);