extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 20:41:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] display date in words or numbers and control month date order

Browse Source
This commit is contained in:
Kombie 2019-04-26 13:48:37 +01:00 committed by GitHub
parent ad5922d302
commit e57d0f8335
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1906 additions and 551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/button.css
View File

@ -96,37 +96,6 @@ button [class*=" icon-"],
width: 100%; 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-"], button [class*=" button-"],
.button [class^="button-"], .button [class^="button-"],

9
css/clock.css
View File

@ -9,8 +9,8 @@
min-height: 2.5em; min-height: 2.5em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: wrap;
} }
.clock-separator, .clock-separator,
@ -22,11 +22,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
white-space: nowrap;
} }
.clock-separator { .clock-separator {
justify-content: center; justify-content: center;
min-width: 0.5em; /* min-width: 0.5em; */
color: rgb(var(--accent)); color: rgb(var(--accent));
} }
@ -55,5 +56,5 @@
.clock-minutes, .clock-minutes,
.clock-seconds, .clock-seconds,
.clock-meridiem { .clock-meridiem {
color: rgb(var(--gray-19)); color: rgb(var(--gray-16));
} }

7
css/date.css
View File

@ -10,7 +10,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: wrap;
} }
.date-separator, .date-separator,
@ -22,11 +22,12 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
white-space: nowrap;
} }
.date-separator { .date-separator {
justify-content: center; justify-content: center;
min-width: 0.5em; /* min-width: 0.5em; */
color: rgb(var(--accent)); color: rgb(var(--accent));
} }
@ -54,5 +55,5 @@
.date-date, .date-date,
.date-month, .date-month,
.date-year { .date-year {
color: rgb(var(--gray-19)); color: rgb(var(--gray-16));
} }

126
css/form.css
View File

@ -22,6 +22,16 @@ input[type="text"] {
-moz-appearance: textfield; -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="email"]:hover,
input[type="number"]:hover, input[type="number"]:hover,
input[type="password"]:hover, input[type="password"]:hover,
@ -84,7 +94,8 @@ input[type="number"][disabled]~.input-helper,
input[type="password"][disabled]~.input-helper, input[type="password"][disabled]~.input-helper,
input[type="search"][disabled]~.input-helper, input[type="search"][disabled]~.input-helper,
input[type="tel"][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)); color: rgb(var(--form-input-text-disabled-helper-text));
} }
@ -197,22 +208,13 @@ input[type="color"]+.input-label-button:before {
position: relative; position: relative;
} }
.form-indent-1, .form-indent {
.form-indent-1,
.form-indent-1 {
margin-left: 2.25em; margin-left: 2.25em;
} }
.form-indent-2, .form-inline {
.form-indent-2, display: inline-block;
.form-indent-2 { margin-right: 1.5em;
margin-left: 4.5em;
}
.form-indent-3,
.form-indent-3,
.form-indent-3 {
margin-left: 6.75em;
} }
input[type="checkbox"], input[type="checkbox"],
@ -460,7 +462,7 @@ input[type="range"]::-webkit-slider-thumb {
width: 1em; width: 1em;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
z-index: 2; /* z-index: 2; */
transform: scale(1); transform: scale(1);
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
@ -524,7 +526,7 @@ input[type="range"]::-moz-range-thumb {
width: 1em; width: 1em;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
z-index: 2; /* z-index: 2; */
transform: scale(1); transform: scale(1);
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
@ -574,3 +576,95 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
input[type="range"][disabled]::-moz-range-progress { input[type="range"][disabled]::-moz-range-progress {
background-color: rgb(var(--gray-08)); 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;
}

2
css/header.css
View File

@ -124,6 +124,7 @@
.header-edit-add, .header-edit-add,
.header-accent, .header-accent,
.header-greeting, .header-greeting,
.header-transitional,
.header-menu { .header-menu {
display: none; display: none;
} }
@ -134,6 +135,7 @@
.is-header-edit-add .header-edit-add, .is-header-edit-add .header-edit-add,
.is-header-accent .header-accent, .is-header-accent .header-accent,
.is-header-greeting .header-greeting, .is-header-greeting .header-greeting,
.is-header-transitional .header-transitional,
.is-menu .header-menu { .is-menu .header-menu {
display: flex; display: flex;
} }

94
css/menu.css
View File

@ -51,24 +51,22 @@
} }
.menu-content { .menu-content {
padding: 2em 2em 20vh 2em; padding-bottom: 40vh;
} }
.menu-content-area { .menu-content-area {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 2em;
} }
.menu-item { .menu-item {
padding-bottom: 2em; padding: 2em;
border-bottom: var(--line-width) solid rgb(var(--gray-04)); position: relative;
z-index: 1;
} }
.menu-item:last-child, .menu-item:not(:last-child) {
.menu-item:nth-last-child(2):nth-child(odd) { border-bottom: var(--line-width) solid rgb(var(--gray-02));
padding-bottom: 0;
border-bottom: 0;
} }
.menu-close { .menu-close {
@ -86,7 +84,7 @@
padding-bottom: 1em; padding-bottom: 1em;
border-radius: 0; border-radius: 0;
flex-grow: 1; flex-grow: 1;
flex-basis: 50%; flex-basis: 33%;
} }
.menu-nav-button:first-child { .menu-nav-button:first-child {
@ -101,8 +99,14 @@
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.menu-nav-button {
flex-basis: 0;
}
}
@media (min-width: 700px) {
.menu { .menu {
width: 80vw; width: 90vw;
height: 100%; height: 100%;
overflow-y: inherit; overflow-y: inherit;
max-height: inherit; max-height: inherit;
@ -125,21 +129,83 @@
.menu-content-area { .menu-content-area {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-gap: 4em;
padding: 2em;
} }
.menu-nav-button { .menu-item:not(:last-child) {
flex-basis: 0; 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) { @media (min-width: 900px) {
.menu { .menu {
width: 70vw; width: 80vw;
} }
} }
@media (min-width: 1600px) { @media (min-width: 1600px) {
.menu { .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
View 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;
}

2
css/typography.css
View File

@ -52,7 +52,7 @@ p {
hr { hr {
border: 0; border: 0;
border-top: 1px solid rgb(var(--gray-04)); border-top: 1px solid rgb(var(--gray-02));
border-radius: var(--radius); border-radius: var(--radius);
margin: 1em 0; margin: 1em 0;
clear: both; clear: both;

478
index.html
View File

@ -26,6 +26,7 @@
<link rel="stylesheet" href="css/date.css"> <link rel="stylesheet" href="css/date.css">
<link rel="stylesheet" href="css/clock.css"> <link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/greeting.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/search.css">
<link rel="stylesheet" href="css/background.css"> <link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/link.css"> <link rel="stylesheet" href="css/link.css">
@ -46,6 +47,9 @@
<div class="header-item header-greeting"> <div class="header-item header-greeting">
<p class="greeting"></p> <p class="greeting"></p>
</div> </div>
<div class="header-item header-transitional">
<p class="transitional"></p>
</div>
<div class="header-item header-clock"> <div class="header-item header-clock">
<p class="clock"></p> <p class="clock"></p>
</div> </div>
@ -62,7 +66,7 @@
</button> </button>
</div> </div>
<div class="header-item header-edit-add"> <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"> <div class="checkbox-wrap">
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1"> <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
<label for="control-edit" class="button input-label-button"> <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-content-area menu-content-area-header">
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1"> <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> <label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
</div> </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"> <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> <label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
</div> </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"> <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> <label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
</div> </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"> <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> <label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
</div> </div>
<div class="input-wrap form-indent-1"> <hr>
<div class="input-wrap">
<label for="control-header-greeting-name">Name</label> <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"> <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> </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> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Date</h1> <div class="menu-item-header">
<div class="checkbox-wrap"> <h1 class="menu-item-header-text">Transitional words</h1>
<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> </div>
<div class="menu-item-form">
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1"> <input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="1">
<label for="control-header-date-show-date"><span class="label-icon"></span>Date</label> <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>
<div class="checkbox-wrap"> <div class="form-indent">
<input id="control-header-date-show-month" class="control-header-date-show-month" type="checkbox" tabindex="1"> <div class="radio-wrap">
<label for="control-header-date-show-month"><span class="label-icon"></span>Month</label> <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
</div> <label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span>"The time and date is"</label>
<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> </div>
<div class="radio-wrap"> <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"> <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-date-character-length-short"><span class="label-icon"></span>Short text</label> <label for="control-header-transitional-type-its"><span class="label-icon"></span>"It's"</label>
</div>
</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> </div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1"> <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> <label for="control-header-search-show"><span class="label-icon"></span>Show</label>
</div> </div>
<label class="control-header-search-width-label form-indent-1">Search box size</label> <div class="form-indent">
<div class="radio-wrap form-indent-1"> <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"> <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> <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> <p class="input-helper small muted">Search box will grow to best fit available space.</p>
</div> </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"> <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> <label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
</div> </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> <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"> <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>
<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"> <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> <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> <p class="input-helper small muted">May not work in Chrome.</p>
</div> </div>
<label class="control-header-search-engine-label form-indent-1">Engine</label> <hr>
<div class="radio-wrap form-indent-1"> <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"> <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> <label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
</div> </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"> <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> <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
</div> </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"> <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> <label for="control-header-search-engine-youtube"><span class="label-icon"></span>YouTube</label>
</div> </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"> <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> <label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
</div> </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"> <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> <label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
</div> </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> <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"> <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>
<div class="input-wrap form-indent-2"> <div class="input-wrap">
<label for="control-header-search-engine-custom-url">URL</label> <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"> <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">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> </div>
<label class="control-header-search-text-align-label form-indent-1">Text align</label> </div>
<div class="radio-wrap form-indent-1"> <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"> <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> <label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
</div> </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"> <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> <label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
</div> </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"> <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> <label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
</div> </div>
</div> </div>
</div>
</div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1"> <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> <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> <label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <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"> <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> <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> <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>
</div>
<div class="menu-item"> <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"> <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"> <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> <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> <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="1"> <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> <label for="control-header-shade-show"><span class="label-icon"></span>Show</label>
</div> </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"> <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> <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> <p class="input-helper small muted">Useful for when a Background Image is shown.</p>
</div> </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"> <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> <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> <p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
</div> </div>
<div class="input-wrap form-indent-1"> <hr>
<div class="input-wrap">
<label for="control-header-shade-opacity">Opacity</label> <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"> <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap">
<label for="control-header-shade-padding-top">Top padding</label> <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"> <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>
<div class="input-wrap form-indent-1"> <div class="input-wrap">
<label for="control-header-shade-padding-bottom">Bottom padding</label> <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>
<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"> <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> <label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
</div> </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> <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>
<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"> <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> <label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
</div> </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> <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"> <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>
</div>
</div>
<div class="menu-content-area menu-content-area-bookmarks is-hidden"> <div class="menu-content-area menu-content-area-bookmarks is-hidden">
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1"> <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> <label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
</div> </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"> <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> <label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
</div> </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"> <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> <label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
</div> </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"> <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> <label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
</div> </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"> <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> <label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1"> <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> <label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <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"> <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> <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> <label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <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"> <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> <label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
@ -415,10 +640,14 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="menu-content-area menu-content-area-theme is-hidden"> <div class="menu-content-area menu-content-area-theme is-hidden">
<div class="menu-item"> <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"> <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"> <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> <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> <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1"> <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> <label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
</div> </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"> <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> <label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
</div> </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"> <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> <label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
</div> </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"> <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> <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
</div> </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"> <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> <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
</div> </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"> <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> <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
</div> </div>
<div class="button-wrap form-indent-1"> <hr>
<div class="button-wrap">
<button class="control-theme-accent-randomise" type="button">Randomise now</button> <button class="control-theme-accent-randomise" type="button">Randomise now</button>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="menu-content-area menu-content-area-layout is-hidden"> <div class="menu-content-area menu-content-area-layout is-hidden">
<div class="menu-item"> <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"> <div class="input-wrap">
<label for="control-layout-width">Width</label> <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"> <input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
</div> </div>
</div> </div>
</div>
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1"> <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> <label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
</div> </div>
<hr>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-layout-title">Title</label> <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"> <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> </div>
</div>
<div class="menu-content-area menu-content-area-background is-hidden"> <div class="menu-content-area menu-content-area-background is-hidden">
<div class="menu-item"> <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"> <div class="checkbox-wrap">
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1"> <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> <label for="control-background-image-show"><span class="label-icon"></span>Show</label>
</div> </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> <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"> <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> <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/abstract.jpg</p>
<p class="input-helper small muted">../background/gray-steps.jpg</p> <p class="input-helper small muted">../background/gray-steps.jpg</p>
</div> </div>
<div class="input-wrap form-indent-1"> <hr>
<div class="input-wrap">
<label for="control-background-image-opacity">Opacity</label> <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"> <input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap">
<label for="control-background-image-grayscale">Grayscale</label> <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"> <input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap">
<label for="control-background-image-blur">Blur</label> <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"> <input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap">
<label for="control-background-image-accent">Accent overlay</label> <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"> <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>
</div>
</div>
</div> </div>
@ -538,6 +791,7 @@
<script src="js/theme.js"></script> <script src="js/theme.js"></script>
<script src="js/date.js"></script> <script src="js/date.js"></script>
<script src="js/greeting.js"></script> <script src="js/greeting.js"></script>
<script src="js/transitional.js"></script>
<script src="js/clock.js"></script> <script src="js/clock.js"></script>
<script src="js/search.js"></script> <script src="js/search.js"></script>
<script src="js/link.js"></script> <script src="js/link.js"></script>

81
js/clock.js
View File

@ -17,7 +17,7 @@ var clock = (function() {
var _makeTimeObject = function() { var _makeTimeObject = function() {
var time = helper.getDateTime(); var time = helper.getDateTime();
time.meridiem = "AM"; time.meridiem = "AM";
if (state.get().header.clock.hour24) { if (state.get().header.clock.hour24.show) {
if (time.hours < 10) { if (time.hours < 10) {
time.hours = "0" + time.hours; time.hours = "0" + time.hours;
}; };
@ -42,60 +42,97 @@ var clock = (function() {
var render = function() { var render = function() {
var _clock = function() { var _clock = function() {
var clock = helper.e(".clock"); var clock = helper.e(".clock");
var time = _makeTimeObject(); var timeObject = _makeTimeObject();
var sepCha = ":"; var action = {
var hours = helper.makeNode({ 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", tag: "span",
text: time.hours, text: timeObject.hours,
attr: [{ attr: [{
key: "class", key: "class",
value: "clock-item clock-hours" value: "clock-item clock-hours"
}] }]
}); });
var minutes = helper.makeNode({ var elementMinutes = helper.makeNode({
tag: "span", tag: "span",
text: time.minutes, text: timeObject.minutes,
attr: [{ attr: [{
key: "class", key: "class",
value: "clock-item clock-minutes" value: "clock-item clock-minutes"
}] }]
}); });
var seconds = helper.makeNode({ var elementSeconds = helper.makeNode({
tag: "span", tag: "span",
text: time.seconds, text: timeObject.seconds,
attr: [{ attr: [{
key: "class", key: "class",
value: "clock-item clock-seconds" value: "clock-item clock-seconds"
}] }]
}); });
var meridiem = helper.makeNode({ var elementMeridiem = helper.makeNode({
tag: "span", tag: "span",
text: time.meridiem, text: timeObject.meridiem,
attr: [{ attr: [{
key: "class", key: "class",
value: "clock-item clock-meridiem" value: "clock-item clock-meridiem"
}] }]
}); });
if (state.get().header.clock.show.hours) { if (state.get().header.clock.hours.show) {
clock.appendChild(hours); clock.appendChild(elementHours);
}; };
if (state.get().header.clock.show.minutes) { if (state.get().header.clock.minutes.show) {
clock.appendChild(minutes); clock.appendChild(elementMinutes);
}; };
if (state.get().header.clock.show.seconds) { if (state.get().header.clock.seconds.show) {
clock.appendChild(seconds); clock.appendChild(elementSeconds);
}; };
if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) { if (!state.get().header.clock.hour24.show && state.get().header.clock.meridiem.show) {
clock.appendChild(meridiem); clock.appendChild(elementMeridiem);
}; };
if (state.get().header.clock.show.separator) { if (state.get().header.clock.separator.show) {
var separatorCharacter = ":";
var parts = clock.querySelectorAll("span"); var parts = clock.querySelectorAll("span");
if (parts.length > 1) { if (parts.length > 1) {
parts.forEach(function(arrayItem, index) { parts.forEach(function(arrayItem, index) {
if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) { if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) {
var separator = helper.makeNode({ var separator = helper.makeNode({
tag: "span", tag: "span",
text: sepCha, text: separatorCharacter,
attr: [{ attr: [{
key: "class", key: "class",
value: "clock-separator" 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(); _clock();
}; };
}; };

649
js/control.js
View File

@ -27,140 +27,518 @@ var control = (function() {
accent.render(); accent.render();
} }
}, { }, {
element: helper.e(".control-header-clock-show-hours"), element: helper.e(".control-header-clock-hours-show"),
path: "header.clock.show.hours", path: "header.clock.hours.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents(); dependents();
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-clock-show-minutes"), element: helper.e(".control-header-clock-hours-number"),
path: "header.clock.show.minutes", 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", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents(); dependents();
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-clock-show-seconds"), element: helper.e(".control-header-clock-minutes-number"),
path: "header.clock.show.seconds", 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", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents(); dependents();
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-clock-show-separator"), element: helper.e(".control-header-clock-seconds-number"),
path: "header.clock.show.separator", 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", type: "checkbox",
func: function() { func: function() {
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-clock-24"), element: helper.e(".control-header-clock-hour24-show"),
path: "header.clock.hour24", path: "header.clock.hour24.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
dependents(); dependents();
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-clock-show-meridiem"), element: helper.e(".control-header-clock-meridiem-show"),
path: "header.clock.show.meridiem", path: "header.clock.meridiem.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
dependents(); dependents();
clock.clear(); clock.clear();
clock.render(); clock.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-show-day"), element: helper.e(".control-header-date-day-show"),
path: "header.date.show.day", path: "header.date.day.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents(); dependents();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-show-date"), element: helper.e(".control-header-date-day-display-number"),
path: "header.date.show.date", path: "header.date.day.display",
type: "checkbox", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-show-month"), element: helper.e(".control-header-date-day-display-word"),
path: "header.date.show.month", path: "header.date.day.display",
type: "checkbox", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-show-year"), element: helper.e(".control-header-date-day-week-start-monday"),
path: "header.date.show.year", path: "header.date.day.weekStart",
type: "checkbox", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-show-separator"), element: helper.e(".control-header-date-day-week-start-sunday"),
path: "header.date.show.separator", path: "header.date.day.weekStart",
type: "checkbox", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-character-length-short"), element: helper.e(".control-header-date-day-length-long"),
path: "header.date.character.length", path: "header.date.day.length",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
date.clear(); date.clear();
date.render(); date.render();
greeting.clear();
greeting.render();
transitional.clear();
transitional.render();
header.render(); header.render();
} }
}, { }, {
element: helper.e(".control-header-date-character-length-long"), element: helper.e(".control-header-date-day-length-short"),
path: "header.date.character.length", path: "header.date.day.length",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
date.clear(); date.clear();
date.render(); 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(); header.render();
} }
}, { }, {
@ -517,6 +895,39 @@ var control = (function() {
greeting.render(); greeting.render();
header.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"), element: helper.e(".control-bookmarks-url-show"),
path: "bookmarks.url.show", path: "bookmarks.url.show",
@ -741,6 +1152,7 @@ var control = (function() {
checkbox: "change", checkbox: "change",
radio: "change", radio: "change",
text: "input", text: "input",
number: "input",
range: "input", range: "input",
color: "change" color: "change"
}; };
@ -754,6 +1166,9 @@ var control = (function() {
text: function(object) { text: function(object) {
return object.element.value; return object.element.value;
}, },
number: function(object) {
return parseInt(object.element.value, 10);
},
range: function(object) { range: function(object) {
return parseInt(object.element.value, 10); return parseInt(object.element.value, 10);
}, },
@ -782,10 +1197,10 @@ var control = (function() {
path: object.path, path: object.path,
newValue: newValue newValue: newValue
}); });
// console.log(object.path, helper.getObject({ console.log(object.path, helper.getObject({
// object: state.get(), object: state.get(),
// path: object.path path: object.path
// })); }));
}; };
}; };
var bindControl = function(object) { var bindControl = function(object) {
@ -834,14 +1249,14 @@ var control = (function() {
}; };
}; };
var _date = 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"); helper.addClass(html, "is-header-date-show");
} else { } else {
helper.removeClass(html, "is-header-date-show"); helper.removeClass(html, "is-header-date-show");
}; };
}; };
var _clock = function() { 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"); helper.addClass(html, "is-header-clock-show");
} else { } else {
helper.removeClass(html, "is-header-clock-show"); helper.removeClass(html, "is-header-clock-show");
@ -945,6 +1360,13 @@ var control = (function() {
helper.removeClass(html, "is-header-greeting"); 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() { var _background = function() {
if (state.get().background.image.show) { if (state.get().background.image.show) {
helper.addClass(html, "is-background-image-show"); helper.addClass(html, "is-background-image-show");
@ -978,6 +1400,7 @@ var control = (function() {
_alignment(); _alignment();
_edit(); _edit();
_greeting(); _greeting();
_transitional();
_date(); _date();
_clock(); _clock();
_search(); _search();
@ -1001,23 +1424,87 @@ var control = (function() {
}; };
var _date = function() { var _date = function() {
var activeCount = 0; 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) { toCheck.forEach(function(arrayItem, index) {
if (arrayItem == true) { if (arrayItem == true) {
activeCount++; 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)) { 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-show-separator").disabled = false; helper.e(".control-header-date-separator-show").disabled = false;
} else { } 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) { if (state.get().header.date.date.show && state.get().header.date.month.show) {
helper.e(".control-header-date-character-length-short").disabled = false; helper.e(".control-header-date-format-label").removeAttribute("disabled");
helper.e(".control-header-date-character-length-long").disabled = false; helper.e(".control-header-date-format-datemonth").disabled = false;
helper.e(".control-header-date-format-monthdate").disabled = false;
} else { } else {
helper.e(".control-header-date-character-length-short").disabled = true; helper.e(".control-header-date-format-label").setAttribute("disabled", "");
helper.e(".control-header-date-character-length-long").disabled = true; 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() { var _greeting = function() {
@ -1035,35 +1522,70 @@ var control = (function() {
helper.e(".control-header-greeting-type-hi").disabled = true; 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 _clock = function() {
var activeCount = 0; 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) { toCheck.forEach(function(arrayItem, index) {
if (arrayItem == true) { if (arrayItem == true) {
activeCount++; activeCount++;
}; };
}); });
if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) { 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-show-separator").disabled = false; helper.e(".control-header-clock-separator-show").disabled = false;
} else { } 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) { if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
helper.e(".control-header-clock-24").disabled = false; helper.e(".control-header-clock-hour24-show").disabled = false;
helper.e(".control-header-clock-show-meridiem").disabled = false; helper.e(".control-header-clock-meridiem-show").disabled = false;
} else { } else {
helper.e(".control-header-clock-24").disabled = true; helper.e(".control-header-clock-hour24-show").disabled = true;
helper.e(".control-header-clock-show-meridiem").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) { 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-show-meridiem").disabled = false; helper.e(".control-header-clock-meridiem-show").disabled = false;
} else { } 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() { var _search = function() {
if (state.get().header.search.show) { 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-auto").disabled = false;
helper.e(".control-header-search-width-style-custom").disabled = false; helper.e(".control-header-search-width-style-custom").disabled = false;
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled"); 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-center").disabled = false;
helper.e(".control-header-search-text-align-right").disabled = false; helper.e(".control-header-search-text-align-right").disabled = false;
} else { } 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-auto").disabled = true;
helper.e(".control-header-search-width-style-custom").disabled = true; helper.e(".control-header-search-width-style-custom").disabled = true;
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", ""); helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
@ -1236,9 +1758,10 @@ var control = (function() {
}; };
}; };
_edit(); _edit();
_greeting();
_date(); _date();
_clock(); _clock();
_greeting();
_transitional();
_search(); _search();
_theme(); _theme();
_link(); _link();
@ -1274,6 +1797,12 @@ var control = (function() {
path: object.path path: object.path
}); });
}, },
number: function(object) {
object.element.value = helper.getObject({
object: state.get(),
path: object.path
});
},
range: function(object) { range: function(object) {
var newValue = helper.getObject({ var newValue = helper.getObject({
object: state.get(), object: state.get(),

162
js/date.js
View File

@ -1,10 +1,10 @@
var date = (function() { var date = (function() {
var bind = function() { var bind = function() {
window.setInterval(function() { // window.setInterval(function() {
clear(); // clear();
render(); // render();
}, 1000); // }, 1000);
}; };
var clear = function() { var clear = function() {
@ -15,73 +15,159 @@ var date = (function() {
}; };
var _makeTimeObject = function() { var _makeTimeObject = function() {
var time = helper.getDateTime(); var date = helper.getDateTime();
return time; 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 render = function() {
var _date = function() { var _date = function() {
var date = helper.e(".date"); var date = helper.e(".date");
var time = _makeTimeObject(); var dateObject = _makeTimeObject();
time.day = helper.day(time.day); var action = {
time.month = helper.month(time.month); day: {
if (state.get().header.date.character.length == "short") { word: function(value) {
time.day = time.day.substring(0, 3); return _day(value);
time.month = time.month.substring(0, 3); },
number: function(value) {
if (state.get().header.date.day.weekStart == "monday") {
if (value == 0) {
value = 7;
}; };
var sepCha = "/"; } else if (state.get().header.date.day.weekStart == "sunday") {
var dateNumber = helper.makeNode({ 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", tag: "span",
text: time.date, text: dateObject.day,
attr: [{
key: "class",
value: "date-item date-date"
}]
});
var day = helper.makeNode({
tag: "span",
text: time.day,
attr: [{ attr: [{
key: "class", key: "class",
value: "date-item date-day" value: "date-item date-day"
}] }]
}); });
var month = helper.makeNode({ var elementDate = helper.makeNode({
tag: "span", 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: [{ attr: [{
key: "class", key: "class",
value: "date-item date-month" value: "date-item date-month"
}] }]
}); });
var year = helper.makeNode({ var elementyear = helper.makeNode({
tag: "span", tag: "span",
text: time.year, text: dateObject.year,
attr: [{ attr: [{
key: "class", key: "class",
value: "date-item date-year" value: "date-item date-year"
}] }]
}); });
if (state.get().header.date.show.day) { if (state.get().header.date.day.show) {
date.appendChild(day); date.appendChild(elementDay);
}; };
if (state.get().header.date.show.date) { if (state.get().header.date.date.show && state.get().header.date.month.show) {
date.appendChild(dateNumber); if (state.get().header.date.format == "datemonth") {
if (state.get().header.date.date.show) {
date.appendChild(elementDate);
}; };
if (state.get().header.date.show.month) { if (state.get().header.date.month.show) {
date.appendChild(month); date.appendChild(elementMonth);
}; };
if (state.get().header.date.show.year) { } else if (state.get().header.date.format == "monthdate") {
date.appendChild(year); 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"); var parts = date.querySelectorAll("span");
if (parts.length > 1) { if (parts.length > 1) {
parts.forEach(function(arrayItem, index) { parts.forEach(function(arrayItem, index) {
if (index > 0) { if (index > 0) {
var separator = helper.makeNode({ var separator = helper.makeNode({
tag: "span", tag: "span",
text: sepCha, text: separatorCharacter,
attr: [{ attr: [{
key: "class", key: "class",
value: "date-separator" 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(); _date();
}; };
}; };

18
js/greeting.js
View File

@ -18,21 +18,21 @@ var greeting = (function() {
var _greeting = function() { var _greeting = function() {
var greeting = helper.e(".greeting"); var greeting = helper.e(".greeting");
var message = { var message = {
hi: function() {
return "Hi";
},
hello: function() {
return "Hello";
},
good: function() { good: function() {
var time = helper.getDateTime(); var time = helper.getDateTime();
var message = ["Good night", "Good morning", "Good afternoon", "Good evening"]; var message = ["Good night", "Good morning", "Good afternoon", "Good evening"];
return message[Math.floor(time.hours / 6)]; 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) { 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({ var greetingItem = helper.makeNode({
tag: "span", tag: "span",
@ -43,7 +43,7 @@ var greeting = (function() {
}); });
var greetingItemText = helper.makeNode({ var greetingItemText = helper.makeNode({
tag: "span", tag: "span",
text: greetingMessage, text: string,
attr: [{ attr: [{
key: "class", key: "class",
value: "greeting-item-text" value: "greeting-item-text"

132
js/helper.js
View File

@ -37,16 +37,6 @@ var helper = (function() {
return object; 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) { var sortObject = function(object, key) {
object.sort(function(a, b) { object.sort(function(a, b) {
var textA = a[key]; var textA = a[key];
@ -354,6 +344,121 @@ var helper = (function() {
return Math.floor(Math.random() * (max - min + 1) + min); 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 // exposed methods
return { return {
e: e, e: e,
@ -363,8 +468,6 @@ var helper = (function() {
removeClass: removeClass, removeClass: removeClass,
allEqual: allEqual, allEqual: allEqual,
getDateTime: getDateTime, getDateTime: getDateTime,
month: month,
day: day,
sortObject: sortObject, sortObject: sortObject,
applyOptions: applyOptions, applyOptions: applyOptions,
hexToRgb: hexToRgb, hexToRgb: hexToRgb,
@ -374,7 +477,10 @@ var helper = (function() {
setObject: setObject, setObject: setObject,
getObject: getObject, getObject: getObject,
makeObject: makeObject, makeObject: makeObject,
randomNumber: randomNumber randomNumber: randomNumber,
toWords: toWords,
ordinalWords: ordinalWords,
ordinalNumber: ordinalNumber
}; };
})(); })();

7
js/init.js
View File

@ -26,10 +26,13 @@ link.init();
// render states // render states
control.init(); control.init();
// render date // render greeting
// bind date update // bind greeting update
greeting.init(); greeting.init();
// render transitional
transitional.init();
// render date // render date
// bind date update // bind date update
date.init(); date.init();

66
js/state.js
View File

@ -3,26 +3,54 @@ var state = (function() {
var current = { var current = {
header: { header: {
clock: { clock: {
hour24: true, hours: {
show: { show: true,
hours: true, display: "number"
minutes: true, },
seconds: true, minutes: {
separator: true, show: true,
meridiem: true display: "number"
} },
seconds: {
show: true,
display: "number"
},
separator: {
show: true
},
meridiem: {
show: true
},
hour24: {
show: true
},
}, },
date: { date: {
show: { day: {
day: false, show: true,
date: true, display: "word",
month: true, weekStart: "monday",
year: false, length: "long"
separator: true
}, },
character: { date: {
length: "short" 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: { search: {
show: true, show: true,
@ -91,6 +119,10 @@ var state = (function() {
show: false, show: false,
type: "good", type: "good",
name: "" name: ""
},
transitional: {
show: false,
type: "timeanddate"
} }
}, },
bookmarks: { bookmarks: {

84
js/transitional.js Normal file
View 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
View File

@ -245,6 +245,65 @@ var update = (function() {
return data; 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) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -327,6 +386,10 @@ var update = (function() {
console.log("\t= running update 2.20.0"); console.log("\t= running update 2.20.0");
data = _update_2200(data); 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 // if no update is needed
// version bump // version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added // 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 compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");