[feature] add clock and date separator text controls

This commit is contained in:
zombieFox 2020-03-21 17:36:22 +00:00
parent a360b8a1c1
commit 7c261b3971
7 changed files with 90 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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