[feature] add clock and date separator text controls

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">

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>

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) {

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"
             ];
           }
         }, {

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) {

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: {

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;
     }
   };