From 7c261b3971fc1989ef202da824b27e2ba6a39a37 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Sat, 21 Mar 2020 17:36:22 +0000
Subject: [PATCH] [feature] add clock and date separator text controls

---
 src/html/menu/content/header/clock.html |  5 +++
 src/html/menu/content/header/date.html  |  5 +++
 src/js/clock.js                         |  6 ++-
 src/js/control.js                       | 60 ++++++++++++++++++++++++-
 src/js/date.js                          |  6 ++-
 src/js/state.js                         | 12 ++++-
 src/js/update.js                        |  2 +
 7 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/src/html/menu/content/header/clock.html b/src/html/menu/content/header/clock.html
index 644c537c..3710ffe3 100644
--- a/src/html/menu/content/header/clock.html
+++ b/src/html/menu/content/header/clock.html
@@ -58,6 +58,11 @@
       <input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
       <label for="control-header-clock-separator-show"><span class="label-icon"></span> Separators</label>
     </div>
+    <div class="form-indent">
+      <div class="form-wrap">
+        <input id="control-header-clock-separator-text" class="control-header-clock-separator-text" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder=":" tabindex="-1">
+      </div>
+    </div>
     <hr>
     <div class="form-wrap">
       <input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="-1">
diff --git a/src/html/menu/content/header/date.html b/src/html/menu/content/header/date.html
index a8b2c3e8..60358e80 100644
--- a/src/html/menu/content/header/date.html
+++ b/src/html/menu/content/header/date.html
@@ -141,6 +141,11 @@
       <input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
       <label for="control-header-date-separator-show"><span class="label-icon"></span> Separators</label>
     </div>
+    <div class="form-indent">
+      <div class="form-wrap">
+        <input id="control-header-date-separator-text" class="control-header-date-separator-text" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="/" tabindex="-1">
+      </div>
+    </div>
     <hr>
     <div class="form-wrap">
       <label class="control-header-date-format-label">Format</label>
diff --git a/src/js/clock.js b/src/js/clock.js
index 5ead10c4..e937439d 100644
--- a/src/js/clock.js
+++ b/src/js/clock.js
@@ -111,7 +111,11 @@ var clock = (function() {
         clock.appendChild(elementMeridiem);
       };
       if (state.get.current().header.clock.separator.show) {
-        var separatorCharacter = ":";
+        if (state.get.current().header.clock.separator.text.trim().replace(/\s\s+/g, " ") != "") {
+          var separatorCharacter = state.get.current().header.clock.separator.text.trim().replace(/\s\s+/g, " ");
+        } else {
+          var separatorCharacter = state.get.default().header.clock.separator.text;
+        };
         var parts = clock.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
diff --git a/src/js/control.js b/src/js/control.js
index 6155fa6a..5bda45fa 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -1315,6 +1315,15 @@ var control = (function() {
           element: ".control-header-clock-separator-show",
           path: "header.clock.separator.show",
           type: "checkbox",
+          func: function() {
+            clock.render.clear();
+            clock.render.all();
+            render.dependents();
+          }
+        }, {
+          element: ".control-header-clock-separator-text",
+          path: "header.clock.separator.text",
+          type: "text",
           func: function() {
             clock.render.clear();
             clock.render.all();
@@ -1732,6 +1741,19 @@ var control = (function() {
           element: ".control-header-date-separator-show",
           path: "header.date.separator.show",
           type: "checkbox",
+          func: function() {
+            date.render.clear();
+            date.render.all();
+            greeting.render.clear();
+            greeting.render.all();
+            transitional.render.clear();
+            transitional.render.all();
+            render.dependents();
+          }
+        }, {
+          element: ".control-header-date-separator-text",
+          path: "header.date.separator.text",
+          type: "text",
           func: function() {
             date.render.clear();
             date.render.all();
@@ -6876,7 +6898,24 @@ var control = (function() {
           },
           dependents: function() {
             return [
-              ".control-header-clock-separator-show"
+              ".control-header-clock-separator-show",
+              ".control-header-clock-separator-text"
+            ];
+          }
+        }, {
+          condition: function() {
+            var activeCount = 0;
+            var toCheck = [state.get.current().header.clock.seconds.show, state.get.current().header.clock.minutes.show, state.get.current().header.clock.hours.show];
+            toCheck.forEach(function(arrayItem, index) {
+              if (arrayItem == true) {
+                activeCount++;
+              };
+            });
+            return (state.get.current().header.clock.separator.show && activeCount >= 2 && (state.get.current().header.clock.seconds.show || state.get.current().header.clock.minutes.show || state.get.current().header.clock.hours.show));
+          },
+          dependents: function() {
+            return [
+              ".control-header-clock-separator-text"
             ];
           }
         }, {
@@ -6984,7 +7023,24 @@ var control = (function() {
           },
           dependents: function() {
             return [
-              ".control-header-date-separator-show"
+              ".control-header-date-separator-show",
+              ".control-header-date-separator-text"
+            ];
+          }
+        }, {
+          condition: function() {
+            var activeCount = 0;
+            var toCheck = [state.get.current().header.date.day.show, state.get.current().header.date.date.show, state.get.current().header.date.month.show, state.get.current().header.date.year.show];
+            toCheck.forEach(function(arrayItem, index) {
+              if (arrayItem == true) {
+                activeCount++;
+              };
+            });
+            return (state.get.current().header.date.separator.show && activeCount >= 2 && (state.get.current().header.date.day.show || state.get.current().header.date.date.show || state.get.current().header.date.month.show || state.get.current().header.date.year.show));
+          },
+          dependents: function() {
+            return [
+              ".control-header-date-separator-text"
             ];
           }
         }, {
diff --git a/src/js/date.js b/src/js/date.js
index f04d290b..eabf5289 100644
--- a/src/js/date.js
+++ b/src/js/date.js
@@ -128,7 +128,11 @@ var date = (function() {
         date.appendChild(elementYear);
       };
       if (state.get.current().header.date.separator.show) {
-        var separatorCharacter = "/";
+        if (state.get.current().header.date.separator.text.trim().replace(/\s\s+/g, " ") != "") {
+          var separatorCharacter = state.get.current().header.date.separator.text.trim().replace(/\s\s+/g, " ");
+        } else {
+          var separatorCharacter = state.get.default().header.date.separator.text;
+        };
         var parts = date.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
diff --git a/src/js/state.js b/src/js/state.js
index e951b556..9d843e95 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -33,7 +33,8 @@ var state = (function() {
           display: "number"
         },
         separator: {
-          show: true
+          show: true,
+          text: ":"
         },
         meridiem: {
           show: true
@@ -73,7 +74,8 @@ var state = (function() {
           display: "number"
         },
         separator: {
-          show: true
+          show: true,
+          text: "/"
         },
         format: "datemonth",
         size: 1,
@@ -351,9 +353,15 @@ var state = (function() {
         width: 100
       },
       clock: {
+        separator: {
+          text: ":"
+        },
         size: 1
       },
       date: {
+        separator: {
+          text: "/"
+        },
         size: 1
       },
       search: {
diff --git a/src/js/update.js b/src/js/update.js
index 3ffa47d1..959fb7fc 100644
--- a/src/js/update.js
+++ b/src/js/update.js
@@ -900,6 +900,8 @@ var update = (function() {
         speed: 200,
         step: 10
       };
+      data.state.header.clock.separator.text = ":";
+      data.state.header.date.separator.text = "/";
       return data;
     }
   };