mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 12:31:47 +02:00
[feature] display date in words or numbers and control month date order
This commit is contained in:
Kombie
GitHub
parent
ad5922d302
commit
e57d0f8335
@ -96,37 +96,6 @@ button [class*=" icon-"],
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin: 0 0 1em 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.button-group button,
|
||||
.button-group .button {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.button-group>button:first-child,
|
||||
.button-group>.button:first-child {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.button-group>button:last-child,
|
||||
.button-group>.button:last-child {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
.button-group.nested-button *:first-child .button {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.button-group.nested-button *:last-child .button {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
button [class^="button-"],
|
||||
button [class*=" button-"],
|
||||
.button [class^="button-"],
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.clock-separator,
|
||||
@ -22,11 +22,12 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clock-separator {
|
||||
justify-content: center;
|
||||
min-width: 0.5em;
|
||||
/* min-width: 0.5em; */
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
|
||||
@ -55,5 +56,5 @@
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
color: rgb(var(--gray-19));
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-separator,
|
||||
@ -22,11 +22,12 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
justify-content: center;
|
||||
min-width: 0.5em;
|
||||
/* min-width: 0.5em; */
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
|
||||
@ -54,5 +55,5 @@
|
||||
.date-date,
|
||||
.date-month,
|
||||
.date-year {
|
||||
color: rgb(var(--gray-19));
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
126
css/form.css
126
css/form.css
@ -22,6 +22,16 @@ input[type="text"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="email"]:hover,
|
||||
input[type="number"]:hover,
|
||||
input[type="password"]:hover,
|
||||
@ -84,7 +94,8 @@ input[type="number"][disabled]~.input-helper,
|
||||
input[type="password"][disabled]~.input-helper,
|
||||
input[type="search"][disabled]~.input-helper,
|
||||
input[type="tel"][disabled]~.input-helper,
|
||||
input[type="text"][disabled]~.input-helper {
|
||||
input[type="text"][disabled]~.input-helper,
|
||||
input[type="range"][disabled]~.input-helper {
|
||||
color: rgb(var(--form-input-text-disabled-helper-text));
|
||||
}
|
||||
|
||||
@ -197,22 +208,13 @@ input[type="color"]+.input-label-button:before {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-indent-1,
|
||||
.form-indent-1,
|
||||
.form-indent-1 {
|
||||
.form-indent {
|
||||
margin-left: 2.25em;
|
||||
}
|
||||
|
||||
.form-indent-2,
|
||||
.form-indent-2,
|
||||
.form-indent-2 {
|
||||
margin-left: 4.5em;
|
||||
}
|
||||
|
||||
.form-indent-3,
|
||||
.form-indent-3,
|
||||
.form-indent-3 {
|
||||
margin-left: 6.75em;
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
@ -460,7 +462,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
width: 1em;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
/* z-index: 2; */
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
@ -524,7 +526,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
width: 1em;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
/* z-index: 2; */
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
@ -574,3 +576,95 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
|
||||
input[type="range"][disabled]::-moz-range-progress {
|
||||
background-color: rgb(var(--gray-08));
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 0 0 1em 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group button,
|
||||
.form-group .button,
|
||||
.form-group>input[type="email"],
|
||||
.form-group>input[type="number"],
|
||||
.form-group>input[type="password"],
|
||||
.form-group>input[type="search"],
|
||||
.form-group>input[type="tel"],
|
||||
.form-group>input[type="text"] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-group>input[type="email"],
|
||||
.form-group>input[type="number"],
|
||||
.form-group>input[type="password"],
|
||||
.form-group>input[type="search"],
|
||||
.form-group>input[type="tel"],
|
||||
.form-group>input[type="text"] {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.form-group>input[type="email"],
|
||||
.form-group>input[type="number"],
|
||||
.form-group>input[type="password"],
|
||||
.form-group>input[type="search"],
|
||||
.form-group>input[type="tel"],
|
||||
.form-group>input[type="text"] {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-group>input[type="email"]:hover,
|
||||
.form-group>input[type="number"]:hover,
|
||||
.form-group>input[type="password"]:hover,
|
||||
.form-group>input[type="search"]:hover,
|
||||
.form-group>input[type="tel"]:hover,
|
||||
.form-group>input[type="text"]:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-group>input[type="email"]:active,
|
||||
.form-group>input[type="email"]:focus,
|
||||
.form-group>input[type="number"]:active,
|
||||
.form-group>input[type="number"]:focus,
|
||||
.form-group>input[type="password"]:active,
|
||||
.form-group>input[type="password"]:focus,
|
||||
.form-group>input[type="search"]:active,
|
||||
.form-group>input[type="search"]:focus,
|
||||
.form-group>input[type="tel"]:active,
|
||||
.form-group>input[type="tel"]:focus,
|
||||
.form-group>input[type="text"]:active,
|
||||
.form-group>input[type="text"]:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.form-group>button:first-child,
|
||||
.form-group>.button:first-child,
|
||||
.form-group>input[type="email"]:first-child,
|
||||
.form-group>input[type="number"]:first-child,
|
||||
.form-group>input[type="password"]:first-child,
|
||||
.form-group>input[type="search"]:first-child,
|
||||
.form-group>input[type="tel"]:first-child,
|
||||
.form-group>input[type="text"]:first-child {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.form-group>button:last-child,
|
||||
.form-group>.button:last-child,
|
||||
.form-group>input[type="email"]:last-child,
|
||||
.form-group>input[type="number"]:last-child,
|
||||
.form-group>input[type="password"]:last-child,
|
||||
.form-group>input[type="search"]:last-child,
|
||||
.form-group>input[type="tel"]:last-child,
|
||||
.form-group>input[type="text"]:last-child {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
.form-group.nested-button *:first-child .button {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.form-group.nested-button *:last-child .button {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
@ -124,6 +124,7 @@
|
||||
.header-edit-add,
|
||||
.header-accent,
|
||||
.header-greeting,
|
||||
.header-transitional,
|
||||
.header-menu {
|
||||
display: none;
|
||||
}
|
||||
@ -134,6 +135,7 @@
|
||||
.is-header-edit-add .header-edit-add,
|
||||
.is-header-accent .header-accent,
|
||||
.is-header-greeting .header-greeting,
|
||||
.is-header-transitional .header-transitional,
|
||||
.is-menu .header-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
94
css/menu.css
94
css/menu.css
@ -51,24 +51,22 @@
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: 2em 2em 20vh 2em;
|
||||
padding-bottom: 40vh;
|
||||
}
|
||||
|
||||
.menu-content-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding-bottom: 2em;
|
||||
border-bottom: var(--line-width) solid rgb(var(--gray-04));
|
||||
padding: 2em;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menu-item:last-child,
|
||||
.menu-item:nth-last-child(2):nth-child(odd) {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
.menu-item:not(:last-child) {
|
||||
border-bottom: var(--line-width) solid rgb(var(--gray-02));
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
@ -86,7 +84,7 @@
|
||||
padding-bottom: 1em;
|
||||
border-radius: 0;
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
flex-basis: 33%;
|
||||
}
|
||||
|
||||
.menu-nav-button:first-child {
|
||||
@ -101,8 +99,14 @@
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.menu-nav-button {
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.menu {
|
||||
width: 80vw;
|
||||
width: 90vw;
|
||||
height: 100%;
|
||||
overflow-y: inherit;
|
||||
max-height: inherit;
|
||||
@ -125,21 +129,83 @@
|
||||
|
||||
.menu-content-area {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 4em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.menu-nav-button {
|
||||
flex-basis: 0;
|
||||
.menu-item:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-item:nth-child(odd):after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-2em - calc(var(--line-width) / 2));
|
||||
border-radius: 1em;
|
||||
border-right: var(--line-width) solid rgb(var(--gray-03));
|
||||
}
|
||||
|
||||
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(-2em - calc(var(--line-width) / 2));
|
||||
border-radius: 1em;
|
||||
border-bottom: var(--line-width) solid rgb(var(--gray-03));
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.menu {
|
||||
width: 70vw;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.menu {
|
||||
width: 50vw;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.menu-content-area {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.menu-item:nth-child(odd):after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.menu-item:not(:nth-child(3n+3)):after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-2em - calc(var(--line-width) / 2));
|
||||
border-radius: 1em;
|
||||
border-right: var(--line-width) solid rgb(var(--gray-03));
|
||||
}
|
||||
|
||||
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.menu-item:not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)):before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(-2em - calc(var(--line-width) / 2));
|
||||
border-radius: 1em;
|
||||
border-bottom: var(--line-width) solid rgb(var(--gray-03));
|
||||
}
|
||||
}
|
||||
|
||||
28
css/transitional.css
Normal file
28
css/transitional.css
Normal file
@ -0,0 +1,28 @@
|
||||
.transitional {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--gray-14));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.transitional-item {
|
||||
font-size: 1.5em;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.transitional-item-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -52,7 +52,7 @@ p {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgb(var(--gray-04));
|
||||
border-top: 1px solid rgb(var(--gray-02));
|
||||
border-radius: var(--radius);
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
|
||||
478
index.html
478
index.html
@ -26,6 +26,7 @@
|
||||
<link rel="stylesheet" href="css/date.css">
|
||||
<link rel="stylesheet" href="css/clock.css">
|
||||
<link rel="stylesheet" href="css/greeting.css">
|
||||
<link rel="stylesheet" href="css/transitional.css">
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/link.css">
|
||||
@ -46,6 +47,9 @@
|
||||
<div class="header-item header-greeting">
|
||||
<p class="greeting"></p>
|
||||
</div>
|
||||
<div class="header-item header-transitional">
|
||||
<p class="transitional"></p>
|
||||
</div>
|
||||
<div class="header-item header-clock">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
@ -62,7 +66,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="header-item header-edit-add">
|
||||
<div class="button-group nested-button mb-0">
|
||||
<div class="form-group nested-button mb-0">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-edit" class="button input-label-button">
|
||||
@ -117,159 +121,338 @@
|
||||
|
||||
<div class="menu-content-area menu-content-area-header">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header"></h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Greeting</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
|
||||
<label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
|
||||
<label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
|
||||
<label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-greeting-name">Name</label>
|
||||
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Clock</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-show-hours" class="control-header-clock-show-hours" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-hours"><span class="label-icon"></span>Hours</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-show-minutes" class="control-header-clock-show-minutes" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-minutes"><span class="label-icon"></span>Minutes</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-show-seconds" class="control-header-clock-show-seconds" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-seconds"><span class="label-icon"></span>Seconds</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-show-separator" class="control-header-clock-show-separator" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-separator"><span class="label-icon"></span>Separators</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-24" class="control-header-clock-24" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-24"><span class="label-icon"></span>24 Hours</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-show-meridiem" class="control-header-clock-show-meridiem" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-meridiem"><span class="label-icon"></span>AM/PM</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Date</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-day" class="control-header-date-show-day" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-day"><span class="label-icon"></span>Day</label>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Transitional words</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-date"><span class="label-icon"></span>Date</label>
|
||||
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-transitional-show"><span class="label-icon"></span>Show</label>
|
||||
<p class="input-helper small muted">Available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-month" class="control-header-date-show-month" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-month"><span class="label-icon"></span>Month</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-year" class="control-header-date-show-year" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-year"><span class="label-icon"></span>Year</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-separator" class="control-header-date-show-separator" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
|
||||
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span>"The time and date is"</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" name="control-header-date-character-length" value="short" tabindex="1">
|
||||
<label for="control-header-date-character-length-short"><span class="label-icon"></span>Short text</label>
|
||||
<input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="1">
|
||||
<label for="control-header-transitional-type-its"><span class="label-icon"></span>"It's"</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" name="control-header-date-character-length" value="long" tabindex="1">
|
||||
<label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Search</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clock</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-hours-show"><span class="label-icon"></span>Hours</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-hours-number" class="control-header-clock-hours-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
|
||||
<label for="control-header-clock-hours-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-hours-word" class="control-header-clock-hours-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
|
||||
<label for="control-header-clock-hours-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-minutes-show"><span class="label-icon"></span>Minutes</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-minutes-number" class="control-header-clock-minutes-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
|
||||
<label for="control-header-clock-minutes-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-minutes-word" class="control-header-clock-minutes-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
|
||||
<label for="control-header-clock-minutes-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-seconds-show"><span class="label-icon"></span>Seconds</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-seconds-number" class="control-header-clock-seconds-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
|
||||
<label for="control-header-clock-seconds-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-clock-seconds-word" class="control-header-clock-seconds-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
|
||||
<label for="control-header-clock-seconds-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<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>
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-hour24-show"><span class="label-icon"></span>24 Hours</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-meridiem-show"><span class="label-icon"></span>AM/PM</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Date</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-day-show"><span class="label-icon"></span>Day</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="1">
|
||||
<label for="control-header-date-day-display-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<label class="control-header-date-day-week-start-label">Start of the week</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="1">
|
||||
<label for="control-header-date-day-week-start-monday"><span class="label-icon"></span>Monday</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="1">
|
||||
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span>Sunday</label>
|
||||
<p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="1">
|
||||
<label for="control-header-date-day-display-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<label class="control-header-date-day-length-label">Word length</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="1">
|
||||
<label for="control-header-date-day-length-long"><span class="label-icon"></span>Long</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="1">
|
||||
<label for="control-header-date-day-length-short"><span class="label-icon"></span>Short</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-date-show"><span class="label-icon"></span>Date</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="1">
|
||||
<label for="control-header-date-date-display-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="1">
|
||||
<label for="control-header-date-date-display-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-date-ordinal"><span class="label-icon"></span>Ordinal numbers</label>
|
||||
<p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-month-show"><span class="label-icon"></span>Month</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="1">
|
||||
<label for="control-header-date-month-display-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-month-ordinal"><span class="label-icon"></span>Ordinal numbers</label>
|
||||
<p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="1">
|
||||
<label for="control-header-date-month-display-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<label class="control-header-date-month-length-label">Word length</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="1">
|
||||
<label for="control-header-date-month-length-long"><span class="label-icon"></span>Long</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="1">
|
||||
<label for="control-header-date-month-length-short"><span class="label-icon"></span>Short</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-year-show"><span class="label-icon"></span>Year</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="1">
|
||||
<label for="control-header-date-year-display-number"><span class="label-icon"></span>As number</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="1">
|
||||
<label for="control-header-date-year-display-word"><span class="label-icon"></span>As word</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<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>
|
||||
<hr>
|
||||
<label class="control-header-date-format-label">Format</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="1">
|
||||
<label for="control-header-date-format-datemonth"><span class="label-icon"></span>Date / Month</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="1">
|
||||
<label for="control-header-date-format-monthdate"><span class="label-icon"></span>Month / Date</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Search</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-search-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<label class="control-header-search-width-label form-indent-1">Search box size</label>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<label class="control-header-search-width-style-label">Search box size</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
|
||||
<label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
|
||||
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
|
||||
<label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-width-custom">Percentage of header space</label>
|
||||
<input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
|
||||
<p class="input-helper small muted">Header space can be changed by the Layout Content Container Width. Minimum width is 10%.</p>
|
||||
<p class="input-helper small muted">Header space can be changed by the Layout Content Container Width.</p>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
|
||||
<label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label>
|
||||
<p class="input-helper small muted">May not work in Chrome.</p>
|
||||
</div>
|
||||
<label class="control-header-search-engine-label form-indent-1">Engine</label>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<hr>
|
||||
<label class="control-header-search-engine-label">Engine</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="1">
|
||||
<label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="1">
|
||||
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="1">
|
||||
<label for="control-header-search-engine-youtube"><span class="label-icon"></span>YouTube</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="1">
|
||||
<label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
|
||||
<label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-engine-custom-name">Name</label>
|
||||
<input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
|
||||
<p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="input-helper small muted">nightTab would add the search term entered into the Search input at the end of the above URL</p>
|
||||
<p class="input-helper small muted mb-0">nightTab would add the search term entered into the Search input at the end of the above URL</p>
|
||||
</div>
|
||||
<label class="control-header-search-text-align-label form-indent-1">Text align</label>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-search-text-align-label">Text align</label>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
|
||||
<label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
|
||||
<label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
|
||||
<label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Buttons</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Buttons</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
|
||||
@ -279,8 +462,12 @@
|
||||
<label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Horizontal Alignment</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Horizontal Alignment</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
|
||||
@ -295,8 +482,12 @@
|
||||
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Vertical Alignment</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Vertical Alignment</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
|
||||
<label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
|
||||
@ -311,85 +502,115 @@
|
||||
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Background Shade</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background Shade</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-shade-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
|
||||
<label for="control-header-shade-style-always"><span class="label-icon"></span>Always visible</label>
|
||||
<p class="input-helper small muted">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="1">
|
||||
<label for="control-header-shade-style-scroll"><span class="label-icon"></span>Visible on scroll</label>
|
||||
<p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-top">Top padding</label>
|
||||
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom" type="range" min="1" max="50" value="0" tabindex="1">
|
||||
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="1" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-top-width">Border width</label>
|
||||
<input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
<input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-bottom-width">Border width</label>
|
||||
<input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Bookmarks</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Bookmarks</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-2">
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
|
||||
<label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-2">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
|
||||
<label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Open</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Open</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Style</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
|
||||
<label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
|
||||
@ -399,8 +620,12 @@
|
||||
<label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Sort</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Sort</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
|
||||
<label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
|
||||
@ -415,10 +640,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-theme is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Style</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="1">
|
||||
<label for="control-theme-style-dark"><span class="label-icon"></span>Dark</label>
|
||||
@ -429,67 +658,88 @@
|
||||
<p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Accent</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
|
||||
<label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1 mb-3">
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
|
||||
</div>
|
||||
<div class="button-wrap form-indent-1">
|
||||
<hr>
|
||||
<div class="button-wrap">
|
||||
<button class="control-theme-accent-randomise" type="button">Randomise now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-layout is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Content container</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Content container</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-layout-width">Width</label>
|
||||
<input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Page</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Page</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
|
||||
<label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-layout-title">Title</label>
|
||||
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-background is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Image</h1>
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Image</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1">
|
||||
<label for="control-background-image-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-url">URL or path</label>
|
||||
<input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">
|
||||
<p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p>
|
||||
@ -497,24 +747,27 @@
|
||||
<p class="input-helper small muted">../background/abstract.jpg</p>
|
||||
<p class="input-helper small muted">../background/gray-steps.jpg</p>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-opacity">Opacity</label>
|
||||
<input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-grayscale">Grayscale</label>
|
||||
<input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-blur">Blur</label>
|
||||
<input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-accent">Accent overlay</label>
|
||||
<input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -538,6 +791,7 @@
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/date.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
<script src="js/transitional.js"></script>
|
||||
<script src="js/clock.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
<script src="js/link.js"></script>
|
||||
|
||||
81
js/clock.js
81
js/clock.js
@ -17,7 +17,7 @@ var clock = (function() {
|
||||
var _makeTimeObject = function() {
|
||||
var time = helper.getDateTime();
|
||||
time.meridiem = "AM";
|
||||
if (state.get().header.clock.hour24) {
|
||||
if (state.get().header.clock.hour24.show) {
|
||||
if (time.hours < 10) {
|
||||
time.hours = "0" + time.hours;
|
||||
};
|
||||
@ -42,60 +42,97 @@ var clock = (function() {
|
||||
var render = function() {
|
||||
var _clock = function() {
|
||||
var clock = helper.e(".clock");
|
||||
var time = _makeTimeObject();
|
||||
var sepCha = ":";
|
||||
var hours = helper.makeNode({
|
||||
var timeObject = _makeTimeObject();
|
||||
var action = {
|
||||
hours: {
|
||||
word: function(value) {
|
||||
if (state.get().header.clock.hour24.show && value < 10) {
|
||||
return "Zero " + helper.toWords(value);
|
||||
} else {
|
||||
return helper.toWords(value);
|
||||
};
|
||||
},
|
||||
number: function(value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
minutes: {
|
||||
word: function(value) {
|
||||
if (value < 10) {
|
||||
return "Zero " + helper.toWords(value);
|
||||
} else {
|
||||
return helper.toWords(value);
|
||||
};
|
||||
},
|
||||
number: function(value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
seconds: {
|
||||
word: function(value) {
|
||||
return helper.toWords(value);
|
||||
},
|
||||
number: function(value) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
timeObject.hours = action.hours[state.get().header.clock.hours.display](timeObject.hours);
|
||||
timeObject.minutes = action.minutes[state.get().header.clock.minutes.display](timeObject.minutes);
|
||||
timeObject.seconds = action.seconds[state.get().header.clock.seconds.display](timeObject.seconds);
|
||||
var elementHours = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.hours,
|
||||
text: timeObject.hours,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-hours"
|
||||
}]
|
||||
});
|
||||
var minutes = helper.makeNode({
|
||||
var elementMinutes = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.minutes,
|
||||
text: timeObject.minutes,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-minutes"
|
||||
}]
|
||||
});
|
||||
var seconds = helper.makeNode({
|
||||
var elementSeconds = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.seconds,
|
||||
text: timeObject.seconds,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-seconds"
|
||||
}]
|
||||
});
|
||||
var meridiem = helper.makeNode({
|
||||
var elementMeridiem = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.meridiem,
|
||||
text: timeObject.meridiem,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-meridiem"
|
||||
}]
|
||||
});
|
||||
if (state.get().header.clock.show.hours) {
|
||||
clock.appendChild(hours);
|
||||
if (state.get().header.clock.hours.show) {
|
||||
clock.appendChild(elementHours);
|
||||
};
|
||||
if (state.get().header.clock.show.minutes) {
|
||||
clock.appendChild(minutes);
|
||||
if (state.get().header.clock.minutes.show) {
|
||||
clock.appendChild(elementMinutes);
|
||||
};
|
||||
if (state.get().header.clock.show.seconds) {
|
||||
clock.appendChild(seconds);
|
||||
if (state.get().header.clock.seconds.show) {
|
||||
clock.appendChild(elementSeconds);
|
||||
};
|
||||
if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
|
||||
clock.appendChild(meridiem);
|
||||
if (!state.get().header.clock.hour24.show && state.get().header.clock.meridiem.show) {
|
||||
clock.appendChild(elementMeridiem);
|
||||
};
|
||||
if (state.get().header.clock.show.separator) {
|
||||
if (state.get().header.clock.separator.show) {
|
||||
var separatorCharacter = ":";
|
||||
var parts = clock.querySelectorAll("span");
|
||||
if (parts.length > 1) {
|
||||
parts.forEach(function(arrayItem, index) {
|
||||
if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) {
|
||||
var separator = helper.makeNode({
|
||||
tag: "span",
|
||||
text: sepCha,
|
||||
text: separatorCharacter,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-separator"
|
||||
@ -107,7 +144,7 @@ var clock = (function() {
|
||||
};
|
||||
};
|
||||
};
|
||||
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
_clock();
|
||||
};
|
||||
};
|
||||
|
||||
649
js/control.js
649
js/control.js
@ -27,140 +27,518 @@ var control = (function() {
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-hours"),
|
||||
path: "header.clock.show.hours",
|
||||
element: helper.e(".control-header-clock-hours-show"),
|
||||
path: "header.clock.hours.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-minutes"),
|
||||
path: "header.clock.show.minutes",
|
||||
element: helper.e(".control-header-clock-hours-number"),
|
||||
path: "header.clock.hours.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-hours-word"),
|
||||
path: "header.clock.hours.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-minutes-show"),
|
||||
path: "header.clock.minutes.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-seconds"),
|
||||
path: "header.clock.show.seconds",
|
||||
element: helper.e(".control-header-clock-minutes-number"),
|
||||
path: "header.clock.minutes.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-minutes-word"),
|
||||
path: "header.clock.minutes.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-seconds-show"),
|
||||
path: "header.clock.seconds.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-separator"),
|
||||
path: "header.clock.show.separator",
|
||||
element: helper.e(".control-header-clock-seconds-number"),
|
||||
path: "header.clock.seconds.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-seconds-word"),
|
||||
path: "header.clock.seconds.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-separator-show"),
|
||||
path: "header.clock.separator.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-24"),
|
||||
path: "header.clock.hour24",
|
||||
element: helper.e(".control-header-clock-hour24-show"),
|
||||
path: "header.clock.hour24.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-meridiem"),
|
||||
path: "header.clock.show.meridiem",
|
||||
element: helper.e(".control-header-clock-meridiem-show"),
|
||||
path: "header.clock.meridiem.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-show-day"),
|
||||
path: "header.date.show.day",
|
||||
element: helper.e(".control-header-date-day-show"),
|
||||
path: "header.date.day.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-show-date"),
|
||||
path: "header.date.show.date",
|
||||
type: "checkbox",
|
||||
element: helper.e(".control-header-date-day-display-number"),
|
||||
path: "header.date.day.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-show-month"),
|
||||
path: "header.date.show.month",
|
||||
type: "checkbox",
|
||||
element: helper.e(".control-header-date-day-display-word"),
|
||||
path: "header.date.day.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-show-year"),
|
||||
path: "header.date.show.year",
|
||||
type: "checkbox",
|
||||
element: helper.e(".control-header-date-day-week-start-monday"),
|
||||
path: "header.date.day.weekStart",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-show-separator"),
|
||||
path: "header.date.show.separator",
|
||||
type: "checkbox",
|
||||
element: helper.e(".control-header-date-day-week-start-sunday"),
|
||||
path: "header.date.day.weekStart",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-character-length-short"),
|
||||
path: "header.date.character.length",
|
||||
element: helper.e(".control-header-date-day-length-long"),
|
||||
path: "header.date.day.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-character-length-long"),
|
||||
path: "header.date.character.length",
|
||||
element: helper.e(".control-header-date-day-length-short"),
|
||||
path: "header.date.day.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-date-show"),
|
||||
path: "header.date.date.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-date-display-number"),
|
||||
path: "header.date.date.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-date-display-word"),
|
||||
path: "header.date.date.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-date-ordinal"),
|
||||
path: "header.date.date.ordinal",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-show"),
|
||||
path: "header.date.month.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-display-number"),
|
||||
path: "header.date.month.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-ordinal"),
|
||||
path: "header.date.month.ordinal",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-display-word"),
|
||||
path: "header.date.month.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-length-long"),
|
||||
path: "header.date.month.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-month-length-short"),
|
||||
path: "header.date.month.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-year-show"),
|
||||
path: "header.date.year.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-year-display-number"),
|
||||
path: "header.date.year.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-year-display-word"),
|
||||
path: "header.date.year.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-format-datemonth"),
|
||||
path: "header.date.format",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-format-monthdate"),
|
||||
path: "header.date.format",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-separator-show"),
|
||||
path: "header.date.separator.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
@ -517,6 +895,39 @@ var control = (function() {
|
||||
greeting.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-transitional-show"),
|
||||
path: "header.transitional.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-transitional-type-timeanddate"),
|
||||
path: "header.transitional.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-transitional-type-its"),
|
||||
path: "header.transitional.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-url-show"),
|
||||
path: "bookmarks.url.show",
|
||||
@ -741,6 +1152,7 @@ var control = (function() {
|
||||
checkbox: "change",
|
||||
radio: "change",
|
||||
text: "input",
|
||||
number: "input",
|
||||
range: "input",
|
||||
color: "change"
|
||||
};
|
||||
@ -754,6 +1166,9 @@ var control = (function() {
|
||||
text: function(object) {
|
||||
return object.element.value;
|
||||
},
|
||||
number: function(object) {
|
||||
return parseInt(object.element.value, 10);
|
||||
},
|
||||
range: function(object) {
|
||||
return parseInt(object.element.value, 10);
|
||||
},
|
||||
@ -782,10 +1197,10 @@ var control = (function() {
|
||||
path: object.path,
|
||||
newValue: newValue
|
||||
});
|
||||
// console.log(object.path, helper.getObject({
|
||||
// object: state.get(),
|
||||
// path: object.path
|
||||
// }));
|
||||
console.log(object.path, helper.getObject({
|
||||
object: state.get(),
|
||||
path: object.path
|
||||
}));
|
||||
};
|
||||
};
|
||||
var bindControl = function(object) {
|
||||
@ -834,14 +1249,14 @@ var control = (function() {
|
||||
};
|
||||
};
|
||||
var _date = function() {
|
||||
if (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year) {
|
||||
if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show) {
|
||||
helper.addClass(html, "is-header-date-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-date-show");
|
||||
};
|
||||
};
|
||||
var _clock = function() {
|
||||
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.addClass(html, "is-header-clock-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-clock-show");
|
||||
@ -945,6 +1360,13 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-header-greeting");
|
||||
};
|
||||
};
|
||||
var _transitional = function() {
|
||||
if (state.get().header.transitional.show && (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
|
||||
helper.addClass(html, "is-header-transitional");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-transitional");
|
||||
};
|
||||
};
|
||||
var _background = function() {
|
||||
if (state.get().background.image.show) {
|
||||
helper.addClass(html, "is-background-image-show");
|
||||
@ -978,6 +1400,7 @@ var control = (function() {
|
||||
_alignment();
|
||||
_edit();
|
||||
_greeting();
|
||||
_transitional();
|
||||
_date();
|
||||
_clock();
|
||||
_search();
|
||||
@ -1001,23 +1424,87 @@ var control = (function() {
|
||||
};
|
||||
var _date = function() {
|
||||
var activeCount = 0;
|
||||
var toCheck = [state.get().header.date.show.date, state.get().header.date.show.day, state.get().header.date.show.month, state.get().header.date.show.year];
|
||||
var toCheck = [state.get().header.date.day.show, state.get().header.date.date.show, state.get().header.date.month.show, state.get().header.date.year.show];
|
||||
toCheck.forEach(function(arrayItem, index) {
|
||||
if (arrayItem == true) {
|
||||
activeCount++;
|
||||
};
|
||||
});
|
||||
if (activeCount >= 2 && (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year)) {
|
||||
helper.e(".control-header-date-show-separator").disabled = false;
|
||||
if (activeCount >= 2 && (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show)) {
|
||||
helper.e(".control-header-date-separator-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-show-separator").disabled = true;
|
||||
helper.e(".control-header-date-separator-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.show.day || state.get().header.date.show.month) {
|
||||
helper.e(".control-header-date-character-length-short").disabled = false;
|
||||
helper.e(".control-header-date-character-length-long").disabled = false;
|
||||
if (state.get().header.date.date.show && state.get().header.date.month.show) {
|
||||
helper.e(".control-header-date-format-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-date-format-datemonth").disabled = false;
|
||||
helper.e(".control-header-date-format-monthdate").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-character-length-short").disabled = true;
|
||||
helper.e(".control-header-date-character-length-long").disabled = true;
|
||||
helper.e(".control-header-date-format-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-date-format-datemonth").disabled = true;
|
||||
helper.e(".control-header-date-format-monthdate").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.day.show) {
|
||||
helper.e(".control-header-date-day-display-number").disabled = false;
|
||||
helper.e(".control-header-date-day-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-day-display-number").disabled = true;
|
||||
helper.e(".control-header-date-day-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.date.show) {
|
||||
helper.e(".control-header-date-date-display-number").disabled = false;
|
||||
helper.e(".control-header-date-date-display-word").disabled = false;
|
||||
helper.e(".control-header-date-date-ordinal").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-date-display-number").disabled = true;
|
||||
helper.e(".control-header-date-date-display-word").disabled = true;
|
||||
helper.e(".control-header-date-date-ordinal").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.month.show) {
|
||||
helper.e(".control-header-date-month-display-number").disabled = false;
|
||||
helper.e(".control-header-date-month-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-month-display-number").disabled = true;
|
||||
helper.e(".control-header-date-month-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.year.show) {
|
||||
helper.e(".control-header-date-year-display-number").disabled = false;
|
||||
helper.e(".control-header-date-year-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-year-display-number").disabled = true;
|
||||
helper.e(".control-header-date-year-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.day.show && state.get().header.date.day.display == "number") {
|
||||
helper.e(".control-header-date-day-week-start-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-date-day-week-start-monday").disabled = false;
|
||||
helper.e(".control-header-date-day-week-start-sunday").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-day-week-start-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-date-day-week-start-monday").disabled = true;
|
||||
helper.e(".control-header-date-day-week-start-sunday").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.day.show && state.get().header.date.day.display == "word") {
|
||||
helper.e(".control-header-date-day-length-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-date-day-length-long").disabled = false;
|
||||
helper.e(".control-header-date-day-length-short").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-day-length-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-date-day-length-long").disabled = true;
|
||||
helper.e(".control-header-date-day-length-short").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.month.show && state.get().header.date.month.display == "word") {
|
||||
helper.e(".control-header-date-month-length-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-date-month-length-long").disabled = false;
|
||||
helper.e(".control-header-date-month-length-short").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-month-length-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-date-month-length-long").disabled = true;
|
||||
helper.e(".control-header-date-month-length-short").disabled = true;
|
||||
};
|
||||
if (state.get().header.date.month.show && state.get().header.date.month.display == "number") {
|
||||
helper.e(".control-header-date-month-ordinal").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-date-month-ordinal").disabled = true;
|
||||
};
|
||||
};
|
||||
var _greeting = function() {
|
||||
@ -1035,35 +1522,70 @@ var control = (function() {
|
||||
helper.e(".control-header-greeting-type-hi").disabled = true;
|
||||
};
|
||||
};
|
||||
var _transitional = function() {
|
||||
if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-transitional-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = false;
|
||||
helper.e(".control-header-transitional-type-its").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = true;
|
||||
helper.e(".control-header-transitional-type-its").disabled = true;
|
||||
};
|
||||
};
|
||||
var _clock = function() {
|
||||
var activeCount = 0;
|
||||
var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours];
|
||||
var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
|
||||
toCheck.forEach(function(arrayItem, index) {
|
||||
if (arrayItem == true) {
|
||||
activeCount++;
|
||||
};
|
||||
});
|
||||
if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) {
|
||||
helper.e(".control-header-clock-show-separator").disabled = false;
|
||||
if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
|
||||
helper.e(".control-header-clock-separator-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-show-separator").disabled = true;
|
||||
helper.e(".control-header-clock-separator-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
|
||||
helper.e(".control-header-clock-24").disabled = false;
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = false;
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hour24-show").disabled = false;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-24").disabled = true;
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = true;
|
||||
helper.e(".control-header-clock-hour24-show").disabled = true;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if ((state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) && !state.get().header.clock.hour24) {
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = false;
|
||||
if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = true;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hours-number").disabled = false;
|
||||
helper.e(".control-header-clock-hours-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-hours-number").disabled = true;
|
||||
helper.e(".control-header-clock-hours-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.minutes.show) {
|
||||
helper.e(".control-header-clock-minutes-number").disabled = false;
|
||||
helper.e(".control-header-clock-minutes-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-minutes-number").disabled = true;
|
||||
helper.e(".control-header-clock-minutes-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.seconds.show) {
|
||||
helper.e(".control-header-clock-seconds-number").disabled = false;
|
||||
helper.e(".control-header-clock-seconds-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-seconds-number").disabled = true;
|
||||
helper.e(".control-header-clock-seconds-word").disabled = true;
|
||||
};
|
||||
};
|
||||
var _search = function() {
|
||||
if (state.get().header.search.show) {
|
||||
helper.e(".control-header-search-width-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-width-style-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-width-style-auto").disabled = false;
|
||||
helper.e(".control-header-search-width-style-custom").disabled = false;
|
||||
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
|
||||
@ -1080,7 +1602,7 @@ var control = (function() {
|
||||
helper.e(".control-header-search-text-align-center").disabled = false;
|
||||
helper.e(".control-header-search-text-align-right").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-search-width-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-width-style-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-width-style-auto").disabled = true;
|
||||
helper.e(".control-header-search-width-style-custom").disabled = true;
|
||||
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
|
||||
@ -1236,9 +1758,10 @@ var control = (function() {
|
||||
};
|
||||
};
|
||||
_edit();
|
||||
_greeting();
|
||||
_date();
|
||||
_clock();
|
||||
_greeting();
|
||||
_transitional();
|
||||
_search();
|
||||
_theme();
|
||||
_link();
|
||||
@ -1274,6 +1797,12 @@ var control = (function() {
|
||||
path: object.path
|
||||
});
|
||||
},
|
||||
number: function(object) {
|
||||
object.element.value = helper.getObject({
|
||||
object: state.get(),
|
||||
path: object.path
|
||||
});
|
||||
},
|
||||
range: function(object) {
|
||||
var newValue = helper.getObject({
|
||||
object: state.get(),
|
||||
|
||||
162
js/date.js
162
js/date.js
@ -1,10 +1,10 @@
|
||||
var date = (function() {
|
||||
|
||||
var bind = function() {
|
||||
window.setInterval(function() {
|
||||
clear();
|
||||
render();
|
||||
}, 1000);
|
||||
// window.setInterval(function() {
|
||||
// clear();
|
||||
// render();
|
||||
// }, 1000);
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
@ -15,73 +15,159 @@ var date = (function() {
|
||||
};
|
||||
|
||||
var _makeTimeObject = function() {
|
||||
var time = helper.getDateTime();
|
||||
return time;
|
||||
var date = helper.getDateTime();
|
||||
return date;
|
||||
};
|
||||
|
||||
var _month = function(index) {
|
||||
var all = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
return all[index];
|
||||
};
|
||||
|
||||
var _day = function(index) {
|
||||
var all = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
return all[index];
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var _date = function() {
|
||||
var date = helper.e(".date");
|
||||
var time = _makeTimeObject();
|
||||
time.day = helper.day(time.day);
|
||||
time.month = helper.month(time.month);
|
||||
if (state.get().header.date.character.length == "short") {
|
||||
time.day = time.day.substring(0, 3);
|
||||
time.month = time.month.substring(0, 3);
|
||||
var dateObject = _makeTimeObject();
|
||||
var action = {
|
||||
day: {
|
||||
word: function(value) {
|
||||
return _day(value);
|
||||
},
|
||||
number: function(value) {
|
||||
if (state.get().header.date.day.weekStart == "monday") {
|
||||
if (value == 0) {
|
||||
value = 7;
|
||||
};
|
||||
var sepCha = "/";
|
||||
var dateNumber = helper.makeNode({
|
||||
} else if (state.get().header.date.day.weekStart == "sunday") {
|
||||
value = value + 1;
|
||||
};
|
||||
return value;
|
||||
}
|
||||
},
|
||||
date: {
|
||||
word: function(value) {
|
||||
if (state.get().header.date.date.ordinal) {
|
||||
return helper.ordinalWords(helper.toWords(value));
|
||||
} else {
|
||||
return helper.toWords(value);
|
||||
};
|
||||
},
|
||||
number: function(value) {
|
||||
if (state.get().header.date.date.ordinal) {
|
||||
return helper.ordinalNumber(value);
|
||||
} else {
|
||||
return value;
|
||||
};
|
||||
}
|
||||
},
|
||||
month: {
|
||||
word: function(value) {
|
||||
return _month(value);
|
||||
},
|
||||
number: function(value) {
|
||||
if (state.get().header.date.month.ordinal) {
|
||||
return helper.ordinalNumber(value + 1);
|
||||
return value + 1;
|
||||
} else {
|
||||
return value + 1;
|
||||
};
|
||||
}
|
||||
},
|
||||
year: {
|
||||
word: function(value) {
|
||||
return helper.toWords(value);
|
||||
},
|
||||
number: function(value) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
dateObject.day = action.day[state.get().header.date.day.display](dateObject.day);
|
||||
dateObject.date = action.date[state.get().header.date.date.display](dateObject.date);
|
||||
dateObject.month = action.month[state.get().header.date.month.display](dateObject.month);
|
||||
dateObject.year = action.year[state.get().header.date.year.display](dateObject.year);
|
||||
if (state.get().header.date.day.display == "word" && state.get().header.date.day.length == "short") {
|
||||
dateObject.day = dateObject.day.substring(0, 3);
|
||||
};
|
||||
if (state.get().header.date.month.display == "word" && state.get().header.date.month.length == "short") {
|
||||
dateObject.month = dateObject.month.substring(0, 3);
|
||||
};
|
||||
var elementDay = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.date,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-item date-date"
|
||||
}]
|
||||
});
|
||||
var day = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.day,
|
||||
text: dateObject.day,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-item date-day"
|
||||
}]
|
||||
});
|
||||
var month = helper.makeNode({
|
||||
var elementDate = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.month,
|
||||
text: dateObject.date,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-item date-date"
|
||||
}]
|
||||
});
|
||||
var elementMonth = helper.makeNode({
|
||||
tag: "span",
|
||||
text: dateObject.month,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-item date-month"
|
||||
}]
|
||||
});
|
||||
var year = helper.makeNode({
|
||||
var elementyear = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.year,
|
||||
text: dateObject.year,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-item date-year"
|
||||
}]
|
||||
});
|
||||
if (state.get().header.date.show.day) {
|
||||
date.appendChild(day);
|
||||
if (state.get().header.date.day.show) {
|
||||
date.appendChild(elementDay);
|
||||
};
|
||||
if (state.get().header.date.show.date) {
|
||||
date.appendChild(dateNumber);
|
||||
if (state.get().header.date.date.show && state.get().header.date.month.show) {
|
||||
if (state.get().header.date.format == "datemonth") {
|
||||
if (state.get().header.date.date.show) {
|
||||
date.appendChild(elementDate);
|
||||
};
|
||||
if (state.get().header.date.show.month) {
|
||||
date.appendChild(month);
|
||||
if (state.get().header.date.month.show) {
|
||||
date.appendChild(elementMonth);
|
||||
};
|
||||
if (state.get().header.date.show.year) {
|
||||
date.appendChild(year);
|
||||
} else if (state.get().header.date.format == "monthdate") {
|
||||
if (state.get().header.date.month.show) {
|
||||
date.appendChild(elementMonth);
|
||||
};
|
||||
if (state.get().header.date.show.separator) {
|
||||
if (state.get().header.date.date.show) {
|
||||
date.appendChild(elementDate);
|
||||
};
|
||||
};
|
||||
} else {
|
||||
if (state.get().header.date.date.show) {
|
||||
date.appendChild(elementDate);
|
||||
};
|
||||
if (state.get().header.date.month.show) {
|
||||
date.appendChild(elementMonth);
|
||||
};
|
||||
};
|
||||
if (state.get().header.date.year.show) {
|
||||
date.appendChild(elementyear);
|
||||
};
|
||||
if (state.get().header.date.separator.show) {
|
||||
var separatorCharacter = "/";
|
||||
var parts = date.querySelectorAll("span");
|
||||
if (parts.length > 1) {
|
||||
parts.forEach(function(arrayItem, index) {
|
||||
if (index > 0) {
|
||||
var separator = helper.makeNode({
|
||||
tag: "span",
|
||||
text: sepCha,
|
||||
text: separatorCharacter,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "date-separator"
|
||||
@ -93,7 +179,7 @@ var date = (function() {
|
||||
};
|
||||
};
|
||||
};
|
||||
if (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year) {
|
||||
if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show) {
|
||||
_date();
|
||||
};
|
||||
};
|
||||
|
||||
@ -18,21 +18,21 @@ var greeting = (function() {
|
||||
var _greeting = function() {
|
||||
var greeting = helper.e(".greeting");
|
||||
var message = {
|
||||
hi: function() {
|
||||
return "Hi";
|
||||
},
|
||||
hello: function() {
|
||||
return "Hello";
|
||||
},
|
||||
good: function() {
|
||||
var time = helper.getDateTime();
|
||||
var message = ["Good night", "Good morning", "Good afternoon", "Good evening"];
|
||||
return message[Math.floor(time.hours / 6)];
|
||||
},
|
||||
hello: function() {
|
||||
return "Hello";
|
||||
},
|
||||
hi: function() {
|
||||
return "Hi";
|
||||
}
|
||||
};
|
||||
var greetingMessage = message[state.get().header.greeting.type]();
|
||||
var string = message[state.get().header.greeting.type]();
|
||||
if (state.get().header.greeting.name != "" && state.get().header.greeting.name != undefined) {
|
||||
greetingMessage = greetingMessage + ", " + state.get().header.greeting.name;
|
||||
string = string + ", " + state.get().header.greeting.name;
|
||||
};
|
||||
var greetingItem = helper.makeNode({
|
||||
tag: "span",
|
||||
@ -43,7 +43,7 @@ var greeting = (function() {
|
||||
});
|
||||
var greetingItemText = helper.makeNode({
|
||||
tag: "span",
|
||||
text: greetingMessage,
|
||||
text: string,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "greeting-item-text"
|
||||
|
||||
132
js/helper.js
132
js/helper.js
@ -37,16 +37,6 @@ var helper = (function() {
|
||||
return object;
|
||||
};
|
||||
|
||||
var month = function(index) {
|
||||
var all = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
return all[index];
|
||||
};
|
||||
|
||||
var day = function(index) {
|
||||
var all = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
return all[index];
|
||||
};
|
||||
|
||||
var sortObject = function(object, key) {
|
||||
object.sort(function(a, b) {
|
||||
var textA = a[key];
|
||||
@ -354,6 +344,121 @@ var helper = (function() {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
};
|
||||
|
||||
var toWords = function(number) {
|
||||
var ten = 10;
|
||||
var oneHundred = 100;
|
||||
var oneThousand = 1000;
|
||||
var oneMillion = 1000000;
|
||||
var oneBillion = 1000000000; // 1,000,000,000 (9)
|
||||
var oneTrillion = 1000000000000; // 1,000,000,000,000 (12)
|
||||
var oneQuadrillion = 1000000000000000; // 1,000,000,000,000,000 (15)
|
||||
var max = 9007199254740992; // 9,007,199,254,740,992 (15)
|
||||
var lessThanTwenty = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
|
||||
var tenthsLessThanHundred = ["Zero", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
|
||||
var _generateWords = function(number) {
|
||||
var remainder, word,
|
||||
words = arguments[1];
|
||||
// We’re done
|
||||
if (number === 0) {
|
||||
return !words ? "Zero" : words.join(" ").replace(/,$/, "");
|
||||
};
|
||||
// First run
|
||||
if (!words) {
|
||||
words = [];
|
||||
};
|
||||
// If negative, prepend “minus”
|
||||
if (number < 0) {
|
||||
words.push("minus");
|
||||
number = Math.abs(number);
|
||||
};
|
||||
if (number < 20) {
|
||||
remainder = 0;
|
||||
word = lessThanTwenty[number];
|
||||
} else if (number < oneHundred) {
|
||||
remainder = number % ten;
|
||||
word = tenthsLessThanHundred[Math.floor(number / ten)];
|
||||
// In case of remainder, we need to handle it here to be able to add the “-”
|
||||
if (remainder) {
|
||||
word += "-" + lessThanTwenty[remainder];
|
||||
remainder = 0;
|
||||
};
|
||||
} else if (number < oneThousand) {
|
||||
remainder = number % oneHundred;
|
||||
word = _generateWords(Math.floor(number / oneHundred)) + " Hundred";
|
||||
} else if (number < oneMillion) {
|
||||
remainder = number % oneThousand;
|
||||
word = _generateWords(Math.floor(number / oneThousand)) + " Thousand,";
|
||||
} else if (number < oneBillion) {
|
||||
remainder = number % oneMillion;
|
||||
word = _generateWords(Math.floor(number / oneMillion)) + " Million,";
|
||||
} else if (number < oneTrillion) {
|
||||
remainder = number % oneBillion;
|
||||
word = _generateWords(Math.floor(number / oneBillion)) + " Billion,";
|
||||
} else if (number < oneQuadrillion) {
|
||||
remainder = number % oneTrillion;
|
||||
word = _generateWords(Math.floor(number / oneTrillion)) + " Trillion,";
|
||||
} else if (number <= max) {
|
||||
remainder = number % oneQuadrillion;
|
||||
word = _generateWords(Math.floor(number / oneQuadrillion)) + " Quadrillion,";
|
||||
};
|
||||
words.push(word);
|
||||
return _generateWords(remainder, words);
|
||||
};
|
||||
var num = parseInt(number, 10);
|
||||
return _generateWords(num);
|
||||
};
|
||||
|
||||
var ordinalWords = function(words) {
|
||||
var endsWithDoubleZeroPattern = /(hundred|thousand|(m|b|tr|quadr)illion)$/;
|
||||
var endsWithTeenPattern = /teen$/;
|
||||
var endsWithYPattern = /y$/;
|
||||
var endsWithZeroThroughTwelvePattern = /(Zero|One|Two|Three|Four|Five|Six|Seven|Eight|Nine|Ten|Eleven|Twelve)$/;
|
||||
var ordinalLessThanThirteen = {
|
||||
Zero: "Zeroth",
|
||||
One: "First",
|
||||
Two: "Second",
|
||||
Three: "Third",
|
||||
Four: "Fourth",
|
||||
Five: "Fifth",
|
||||
Six: "Sixth",
|
||||
Seven: "Seventh",
|
||||
Eight: "Eighth",
|
||||
Nine: "Ninth",
|
||||
Ten: "Tenth",
|
||||
Eleven: "Eleventh",
|
||||
Twelve: "Twelfth"
|
||||
};
|
||||
var replaceWithOrdinalVariant = function(match, numberWord) {
|
||||
return ordinalLessThanThirteen[numberWord];
|
||||
};
|
||||
// Ends with *00 (100, 1000, etc.) or *teen (13, 14, 15, 16, 17, 18, 19)
|
||||
if (endsWithDoubleZeroPattern.test(words) || endsWithTeenPattern.test(words)) {
|
||||
return words + "th";
|
||||
// Ends with *y (20, 30, 40, 50, 60, 70, 80, 90)
|
||||
} else if (endsWithYPattern.test(words)) {
|
||||
return words.replace(endsWithYPattern, "ieth");
|
||||
// Ends with one through twelve
|
||||
} else if (endsWithZeroThroughTwelvePattern.test(words)) {
|
||||
return words.replace(endsWithZeroThroughTwelvePattern, replaceWithOrdinalVariant);
|
||||
};
|
||||
return words;
|
||||
};
|
||||
|
||||
var ordinalNumber = function(number) {
|
||||
var j = number % 10;
|
||||
var k = number % 100;
|
||||
if (j == 1 && k != 11) {
|
||||
return number + "st";
|
||||
};
|
||||
if (j == 2 && k != 12) {
|
||||
return number + "nd";
|
||||
};
|
||||
if (j == 3 && k != 13) {
|
||||
return number + "rd";
|
||||
};
|
||||
return number + "th";
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
e: e,
|
||||
@ -363,8 +468,6 @@ var helper = (function() {
|
||||
removeClass: removeClass,
|
||||
allEqual: allEqual,
|
||||
getDateTime: getDateTime,
|
||||
month: month,
|
||||
day: day,
|
||||
sortObject: sortObject,
|
||||
applyOptions: applyOptions,
|
||||
hexToRgb: hexToRgb,
|
||||
@ -374,7 +477,10 @@ var helper = (function() {
|
||||
setObject: setObject,
|
||||
getObject: getObject,
|
||||
makeObject: makeObject,
|
||||
randomNumber: randomNumber
|
||||
randomNumber: randomNumber,
|
||||
toWords: toWords,
|
||||
ordinalWords: ordinalWords,
|
||||
ordinalNumber: ordinalNumber
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@ -26,10 +26,13 @@ link.init();
|
||||
// render states
|
||||
control.init();
|
||||
|
||||
// render date
|
||||
// bind date update
|
||||
// render greeting
|
||||
// bind greeting update
|
||||
greeting.init();
|
||||
|
||||
// render transitional
|
||||
transitional.init();
|
||||
|
||||
// render date
|
||||
// bind date update
|
||||
date.init();
|
||||
|
||||
66
js/state.js
66
js/state.js
@ -3,26 +3,54 @@ var state = (function() {
|
||||
var current = {
|
||||
header: {
|
||||
clock: {
|
||||
hour24: true,
|
||||
show: {
|
||||
hours: true,
|
||||
minutes: true,
|
||||
seconds: true,
|
||||
separator: true,
|
||||
meridiem: true
|
||||
}
|
||||
hours: {
|
||||
show: true,
|
||||
display: "number"
|
||||
},
|
||||
minutes: {
|
||||
show: true,
|
||||
display: "number"
|
||||
},
|
||||
seconds: {
|
||||
show: true,
|
||||
display: "number"
|
||||
},
|
||||
separator: {
|
||||
show: true
|
||||
},
|
||||
meridiem: {
|
||||
show: true
|
||||
},
|
||||
hour24: {
|
||||
show: true
|
||||
},
|
||||
},
|
||||
date: {
|
||||
show: {
|
||||
day: false,
|
||||
date: true,
|
||||
month: true,
|
||||
year: false,
|
||||
separator: true
|
||||
day: {
|
||||
show: true,
|
||||
display: "word",
|
||||
weekStart: "monday",
|
||||
length: "long"
|
||||
},
|
||||
character: {
|
||||
length: "short"
|
||||
}
|
||||
date: {
|
||||
show: true,
|
||||
display: "number",
|
||||
ordinal: true
|
||||
},
|
||||
month: {
|
||||
show: true,
|
||||
display: "word",
|
||||
length: "long",
|
||||
ordinal: true
|
||||
},
|
||||
year: {
|
||||
show: true,
|
||||
display: "number"
|
||||
},
|
||||
separator: {
|
||||
show: true
|
||||
},
|
||||
format: "datemonth"
|
||||
},
|
||||
search: {
|
||||
show: true,
|
||||
@ -91,6 +119,10 @@ var state = (function() {
|
||||
show: false,
|
||||
type: "good",
|
||||
name: ""
|
||||
},
|
||||
transitional: {
|
||||
show: false,
|
||||
type: "timeanddate"
|
||||
}
|
||||
},
|
||||
bookmarks: {
|
||||
|
||||
84
js/transitional.js
Normal file
84
js/transitional.js
Normal file
@ -0,0 +1,84 @@
|
||||
var transitional = (function() {
|
||||
|
||||
var bind = function() {
|
||||
window.setInterval(function() {
|
||||
clear();
|
||||
render();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
var transitional = helper.e(".transitional");
|
||||
while (transitional.lastChild) {
|
||||
transitional.removeChild(transitional.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var _transitional = function() {
|
||||
var transitional = helper.e(".transitional");
|
||||
var message = {
|
||||
timeanddate: function() {
|
||||
if ((state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
|
||||
if (state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
|
||||
return "The time and day is";
|
||||
} else {
|
||||
return "The time and date is";
|
||||
};
|
||||
} else if (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) {
|
||||
if (state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
|
||||
return "Today is";
|
||||
} else if (!state.get().header.date.day.show && state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
|
||||
return "The date is";
|
||||
} else if (!state.get().header.date.day.show && !state.get().header.date.date.show && state.get().header.date.month.show && !state.get().header.date.year.show) {
|
||||
return "The month is";
|
||||
} else if (!state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && state.get().header.date.year.show) {
|
||||
return "The year is";
|
||||
} else {
|
||||
return "The date is";
|
||||
};
|
||||
} else if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
return "The time is";
|
||||
};
|
||||
},
|
||||
its: function() {
|
||||
return "It's";
|
||||
}
|
||||
};
|
||||
var string = message[state.get().header.transitional.type]();
|
||||
var transitionalItem = helper.makeNode({
|
||||
tag: "span",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "transitional-item"
|
||||
}]
|
||||
});
|
||||
var transitionalItemText = helper.makeNode({
|
||||
tag: "span",
|
||||
text: string,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "transitional-item-text"
|
||||
}]
|
||||
});
|
||||
transitionalItem.appendChild(transitionalItemText);
|
||||
transitional.appendChild(transitionalItem);
|
||||
};
|
||||
if (state.get().header.transitional.show) {
|
||||
_transitional();
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
render: render,
|
||||
clear: clear
|
||||
};
|
||||
|
||||
})();
|
||||
63
js/update.js
63
js/update.js
@ -245,6 +245,65 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_2210 = function(data) {
|
||||
data.version = "2.21.0";
|
||||
data.state.header.clock = {
|
||||
hours: {
|
||||
show: data.state.header.clock.show.hours,
|
||||
display: "number"
|
||||
},
|
||||
minutes: {
|
||||
show: data.state.header.clock.show.minutes,
|
||||
display: "number"
|
||||
},
|
||||
seconds: {
|
||||
show: data.state.header.clock.show.seconds,
|
||||
display: "number"
|
||||
},
|
||||
separator: {
|
||||
show: data.state.header.clock.show.separator
|
||||
},
|
||||
meridiem: {
|
||||
show: data.state.header.clock.show.meridiem
|
||||
},
|
||||
hour24: {
|
||||
show: data.state.header.clock.hour24
|
||||
}
|
||||
};
|
||||
data.state.header.date = {
|
||||
day: {
|
||||
show: data.state.header.date.show.day,
|
||||
display: "word",
|
||||
weekStart: "monday",
|
||||
length: data.state.header.date.character.length
|
||||
},
|
||||
date: {
|
||||
show: data.state.header.date.show.date,
|
||||
display: "number",
|
||||
ordinal: true
|
||||
},
|
||||
month: {
|
||||
show: data.state.header.date.show.month,
|
||||
display: "word",
|
||||
length: data.state.header.date.character.length,
|
||||
ordinal: true
|
||||
},
|
||||
year: {
|
||||
show: data.state.header.date.show.year,
|
||||
display: "number"
|
||||
},
|
||||
separator: {
|
||||
show: data.state.header.date.show.separator
|
||||
},
|
||||
format: "datemonth"
|
||||
};
|
||||
data.state.header.transitional = {
|
||||
show: false,
|
||||
type: "timeanddate"
|
||||
};
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -327,6 +386,10 @@ var update = (function() {
|
||||
console.log("\t= running update 2.20.0");
|
||||
data = _update_2200(data);
|
||||
};
|
||||
if (version.compare(data.version, "2.21.0") == -1) {
|
||||
console.log("\t= running update 2.21.0");
|
||||
data = _update_2210(data);
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "2.20.0";
|
||||
var current = "2.21.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user