[feature] add clock and date separator text controls

Author: zombieFox

src/html/menu/content/header/clock.html

@@ -58,6 +58,11 @@ <h1 class="menu-item-header-text">Clock</h1>
 <inputid="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
 <labelfor="control-header-clock-separator-show"><spanclass="label-icon"></span> Separators</label>
 </div>
+<divclass="form-indent">
+<divclass="form-wrap">
+<inputid="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>
 <divclass="form-wrap">
 <inputid="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 @@ <h1 class="menu-item-header-text">Date</h1>
 <inputid="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
 <labelfor="control-header-date-separator-show"><spanclass="label-icon"></span> Separators</label>
 </div>
+<divclass="form-indent">
+<divclass="form-wrap">
+<inputid="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>
 <divclass="form-wrap">
 <labelclass="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){
-varseparatorCharacter=":";
+if(state.get.current().header.clock.separator.text.trim().replace(/\s\s+/g," ")!=""){
+varseparatorCharacter=state.get.current().header.clock.separator.text.trim().replace(/\s\s+/g," ");
+}else{
+varseparatorCharacter=state.get.default().header.clock.separator.text;
+};
 varparts=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(){
+varactiveCount=0;
+vartoCheck=[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(){
+varactiveCount=0;
+vartoCheck=[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){
-varseparatorCharacter="/";
+if(state.get.current().header.date.separator.text.trim().replace(/\s\s+/g," ")!=""){
+varseparatorCharacter=state.get.current().header.date.separator.text.trim().replace(/\s\s+/g," ");
+}else{
+varseparatorCharacter=state.get.default().header.date.separator.text;
+};
 varparts=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="/";
 returndata;
 }
 };