extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-16 07:38:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding date to header

Browse Source
This commit is contained in:
Kombie 2019-01-05 20:57:21 +00:00 committed by GitHub
parent 3412915524
commit d21b1d6f2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 484 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/base.css
View File

@ -40,6 +40,12 @@
--breakpoint-md: 700px;
--breakpoint-lg: 900px;
--breakpoint-xl: 1100px;
--breakpoint-xxl: 1600px;
--z-index-link: 1000;
--z-index-header: 2000;
--z-index-shade: 3000;
--z-index-modal: 4000;
--z-index-menu: 5000;
}
:root.is-link-block {

2
css/container.css
View File

@ -21,7 +21,7 @@
@media (min-width: 900px) {}
@media (min-width: 1000px) {
@media (min-width: 1100px) {
.is-layout-wide .container {
width: 75vw;
}

63
css/date.css Normal file
View File

@ -0,0 +1,63 @@
.date {
margin: 0;
padding: 0;
border-radius: var(--radius);
font-size: 1em;
font-family: var(--font-fjalla);
color: var(--white);
width: 100%;
min-height: 2.5em;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
}
.date-seperator,
.date-date,
.date-day,
.date-month,
.date-year {
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
}
.date-seperator {
min-width: 0.5em;
color: rgb(var(--accent));
}
.date-date,
.date-day,
.date-month,
.date-year {
min-width: 1.25em;
}
.date [class^="date-"]:not(:first-child),
.date [class*=" date-"]:not(:first-child) {
margin-left: 0.125em;
}
.date [class^="date-"]:not(:last-child),
.date [class*=" date-"]:not(:last-child) {
margin-right: 0.125em;
}
.date-date {
color: var(--white);
}
.date-day {
color: var(--gray-16);
}
.date-month {
color: var(--gray-12);
}
.date-year {
color: var(--gray-10);
}

26
css/form.css
View File

@ -179,22 +179,22 @@ input[type="color"]+.label-button-color:before {
position: relative;
}
.form-input-indent-1.input-wrap,
.form-input-indent-1.checkbox-wrap,
.form-input-indent-1.radio-wrap {
margin-left: 1em;
.form-indent-1,
.form-indent-1,
.form-indent-1 {
margin-left: 2.25em;
}
.form-input-indent-2.input-wrap,
.form-input-indent-2.checkbox-wrap,
.form-input-indent-2.radio-wrap {
margin-left: 2em;
.form-indent-2,
.form-indent-2,
.form-indent-2 {
margin-left: 4.5em;
}
.form-input-indent-3.input-wrap,
.form-input-indent-3.checkbox-wrap,
.form-input-indent-3.radio-wrap {
margin-left: 3em;
.form-indent-3,
.form-indent-3,
.form-indent-3 {
margin-left: 6.75em;
}
input[type="checkbox"],
@ -234,6 +234,8 @@ input[type="radio"]+label .label-icon {
display: block;
width: 1em;
height: 1em;
transform: scale(1);
transition: transform 0.05s ease-in-out;
}
input[type="checkbox"]:focus+label,

15
css/head.css → css/header.css
View File

@ -4,7 +4,7 @@
top: 0;
left: 0;
width: 100%;
z-index: 2;
z-index: var(--z-index-header);
}
.header-area {
@ -43,13 +43,21 @@
.is-search-grow .header-search {
flex-grow: 1;
flex-basis: 100%;
}
@media (min-width: 550px) {
.is-search-grow .header-search {
flex-basis: initial;
}
}
.header-search {
width: 20vw;
min-width: 20em;
width: 15vw;
min-width: 15em;
}
.header-date,
.header-clock,
.header-search,
.header-edit-add,
@ -58,6 +66,7 @@
}
.is-search .header-search,
.is-date .header-date,
.is-clock .header-clock,
.is-search-edit-add .header-edit-add,
.is-search-accent .header-accent {

3
css/link.css
View File

@ -1,7 +1,8 @@
.link {
margin-bottom: 2em;
width: 100vw;
z-index: 1;
position: relative;
z-index: var(--z-index-link);
}
.is-scroll-past-end .link {

26
css/menu.css
View File

@ -7,9 +7,9 @@
width: calc(100vw - 2em);
max-height: calc(80vh - 2em);
overflow-y: scroll;
z-index: 3000;
transform: translateY(calc(-100% - 2em));
transition: transform var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-menu);
}
.is-menu-open .menu {
@ -29,9 +29,11 @@
.menu-nav:not(:last-child) {
margin: 0;
}
.menu-nav-item {
flex-grow: 1;
}
.menu-nav-item:not(:last-child) {
margin: 0;
}
@ -46,14 +48,21 @@
grid-gap: 2em;
}
.menu-header {
padding-top: 1em;
border-top: var(--line-width) solid var(--gray-04);
.menu-item {
padding-bottom: 2em;
border-bottom: var(--line-width) solid var(--gray-04);
}
.menu-item:last-child,
.menu-item:nth-last-child(2):nth-child(odd) {
padding-bottom: 0;
border-bottom: 0;
}
.menu-nav-button {
margin: 0;
padding: 1.5em 2em;
padding-top: 1.5em;
padding-bottom: 1.5em;
border-radius: 0;
}
@ -67,13 +76,6 @@
max-height: calc(90vh - 2em);
}
.menu-header {
padding-top: 0;
padding-bottom: 1em;
border-top: 0;
border-bottom: var(--line-width) solid var(--gray-04);
}
.menu-nav {
flex-direction: row;
}

2
css/modal.css
View File

@ -3,7 +3,6 @@
top: 50%;
left: 50%;
font-size: 1em;
z-index: 2000;
width: 45em;
max-width: calc(100% - 6em);
min-width: 10em;
@ -11,6 +10,7 @@
opacity: 0;
perspective: 1000px;
transition: opacity var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-modal);
}
.modal-large {

2
css/shade.css
View File

@ -6,6 +6,6 @@
width: calc(100% + 2em);
height: calc(100% + 2em);
opacity: 0;
z-index: 1000;
transition: opacity var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-shade);
}

71
index.html
View File

@ -20,7 +20,8 @@
<link rel="stylesheet" href="css/shade.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/head.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/date.css">
<link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/link.css">
@ -35,6 +36,9 @@
<div class="header-item header-clock">
<p class="clock"></p>
</div>
<div class="header-item header-date">
<p class="date"></p>
</div>
<div class="header-item header-search">
<form class="search" action="" method="get">
<input class="search-input mb-0" type="text" placeholder="Find or Search" tabindex="1" name="q" autocomplete="off" tabindex="1">
@ -99,57 +103,89 @@
<div class="menu-item">
<h1 class="menu-header">Clock</h1>
<div class="checkbox-wrap">
<input id="control-header-clock-active" class="control-header-clock-active" type="checkbox" tabindex="1">
<label for="control-header-clock-active"><span class="label-icon"></span>Show</label>
<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 form-input-indent-1">
<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 form-input-indent-1">
<div class="checkbox-wrap">
<input id="control-header-clock-show-seperator" class="control-header-clock-show-seperator" type="checkbox" tabindex="1">
<label for="control-header-clock-show-seperator"><span class="label-icon"></span>Seperators</label>
</div>
<div class="checkbox-wrap form-input-indent-1">
<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 form-input-indent-2">
<input id="control-header-clock-show-leading-zero" class="control-header-clock-show-leading-zero" type="checkbox" tabindex="1">
<label for="control-header-clock-show-leading-zero"><span class="label-icon"></span>Leading Zero</label>
</div>
<div class="checkbox-wrap form-input-indent-1">
<div class="checkbox-wrap">
<input id="control-header-clock-show-meridiem" class="control-header-clock-show-meridiem" type="checkbox" tabindex="1">
<label for="control-header-clock-show-meridiem"><span class="label-icon"></span>AM/PM</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Date</h1>
<div class="checkbox-wrap">
<input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1">
<label for="control-header-date-show-date"><span class="label-icon"></span>Date</label>
</div>
<div class="checkbox-wrap">
<input id="control-header-date-show-day" class="control-header-date-show-day" type="checkbox" tabindex="1">
<label for="control-header-date-show-day"><span class="label-icon"></span>Day</label>
</div>
<div class="checkbox-wrap">
<input id="control-header-date-show-month" class="control-header-date-show-month" type="checkbox" tabindex="1">
<label for="control-header-date-show-month"><span class="label-icon"></span>Month</label>
</div>
<div class="checkbox-wrap">
<input id="control-header-date-show-year" class="control-header-date-show-year" type="checkbox" tabindex="1">
<label for="control-header-date-show-year"><span class="label-icon"></span>Year</label>
</div>
<div class="checkbox-wrap">
<input id="control-header-date-show-seperator" class="control-header-date-show-seperator" type="checkbox" tabindex="1">
<label for="control-header-date-show-seperator"><span class="label-icon"></span>Seperators</label>
</div>
<div class="radio-wrap">
<input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" tabindex="1" name="control-header-date-character-length" value="short">
<label for="control-header-date-character-length-short"><span class="label-icon"></span>Short text</label>
</div>
<div class="radio-wrap">
<input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" tabindex="1" name="control-header-date-character-length" value="long">
<label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Search</h1>
<div class="checkbox-wrap">
<input id="control-header-search-active" class="control-header-search-active" type="checkbox" tabindex="1">
<label for="control-header-search-active"><span class="label-icon"></span>Show</label>
</div>
<div class="checkbox-wrap form-input-indent-1">
<div class="checkbox-wrap form-indent-1">
<input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
<label for="control-header-search-grow"><span class="label-icon"></span>Fill</label>
</div>
<div class="radio-wrap">
<label class="control-header-search-engine-label form-indent-1 mb-1">Engine</label>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" tabindex="1" name="control-header-search-engine" value="google">
<label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
</div>
<div class="radio-wrap">
<div class="radio-wrap form-indent-1">
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" tabindex="1" name="control-header-search-engine" value="duckduckgo">
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
</div>
<div class="radio-wrap">
<div class="radio-wrap form-indent-1">
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" tabindex="1" name="control-header-search-engine" value="giphy">
<label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
</div>
<div class="radio-wrap">
<div class="radio-wrap form-indent-1">
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" tabindex="1" name="control-header-search-engine" value="custom">
<label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
</div>
<div class="input-wrap">
<div class="input-wrap form-indent-2">
<label for="control-header-search-engine-custom-url">URL</label>
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off">
</div>
@ -257,6 +293,7 @@
<script src="js/modal.js"></script>
<script src="js/shade.js"></script>
<script src="js/theme.js"></script>
<script src="js/date.js"></script>
<script src="js/clock.js"></script>
<script src="js/search.js"></script>
<script src="js/link.js"></script>

62
js/clock.js
View File

@ -18,7 +18,7 @@ var clock = (function() {
var time = helper.getDateTime();
time.meridiem = "AM";
if (state.get().header.clock.hour24) {
if (time.hours < 10 && state.get().header.clock.show.leadingZero) {
if (time.hours < 10) {
time.hours = "0" + time.hours;
};
} else {
@ -43,6 +43,7 @@ var clock = (function() {
var _clock = function() {
var clock = helper.e(".clock");
var time = _makeTimeObject();
var sepCha = ":";
var hours = helper.makeNode({
tag: "span",
text: time.hours,
@ -75,49 +76,38 @@ var clock = (function() {
value: "clock-item clock-meridiem"
}]
});
var seperator1 = helper.makeNode({
tag: "span",
text: ":",
attr: [{
key: "class",
value: "clock-seperator"
}]
});
var seperator2 = helper.makeNode({
tag: "span",
text: ":",
attr: [{
key: "class",
value: "clock-seperator"
}]
});
var seperator3 = helper.makeNode({
tag: "span",
text: ":",
attr: [{
key: "class",
value: "clock-seperator"
}]
});
clock.appendChild(hours);
if (state.get().header.clock.show.seperator) {
clock.appendChild(seperator1);
if (state.get().header.clock.show.hours) {
clock.appendChild(hours);
};
if (state.get().header.clock.show.minutes) {
clock.appendChild(minutes);
};
clock.appendChild(minutes);
if (state.get().header.clock.show.seconds) {
if (state.get().header.clock.show.seperator) {
clock.appendChild(seperator2);
};
clock.appendChild(seconds);
};
if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
if (state.get().header.clock.show.seperator) {
clock.appendChild(seperator3);
};
clock.appendChild(meridiem);
};
if (state.get().header.clock.show.seperator) {
var parts = clock.querySelectorAll("span");
if (parts.length > 1) {
parts.forEach(function(arrayItem, index) {
if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) {
var seperator = helper.makeNode({
tag: "span",
text: sepCha,
attr: [{
key: "class",
value: "clock-seperator"
}]
});
clock.insertBefore(seperator, arrayItem);
};
});
};
};
};
if (state.get().header.clock.active) {
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
_clock();
};
};

181
js/control.js
View File

@ -14,7 +14,6 @@ var control = (function() {
object: state.get(),
newValue: options.value
});
console.log(state.get());
};
};
@ -27,8 +26,15 @@ var control = (function() {
helper.removeClass(html, "is-edit");
};
};
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) {
helper.addClass(html, "is-date");
} else {
helper.removeClass(html, "is-date");
};
};
var _clock = function() {
if (state.get().header.clock.active) {
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
helper.addClass(html, "is-clock");
} else {
helper.removeClass(html, "is-clock");
@ -93,6 +99,7 @@ var control = (function() {
};
_alignment();
_edit();
_date();
_clock();
_search();
_editAdd();
@ -102,22 +109,48 @@ var control = (function() {
};
var _dependents = function(options) {
var _date = function() {
var activeCount = 0;
var toCheck = [state.get().header.date.show.date, state.get().header.date.show.day, state.get().header.date.show.month, state.get().header.date.show.year];
toCheck.forEach(function(arrayItem, index) {
if (arrayItem == true) {
activeCount++;
};
});
if (activeCount >= 2 && (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year)) {
helper.e(".control-header-date-show-seperator").disabled = false;
} else {
helper.e(".control-header-date-show-seperator").disabled = true;
};
if (state.get().header.date.show.day || state.get().header.date.show.month) {
helper.e(".control-header-date-character-length-short").disabled = false;
helper.e(".control-header-date-character-length-long").disabled = false;
} else {
helper.e(".control-header-date-character-length-short").disabled = true;
helper.e(".control-header-date-character-length-long").disabled = true;
};
};
var _clock = function() {
if (state.get().header.clock.active) {
helper.e(".control-header-clock-show-seconds").disabled = false;
var activeCount = 0;
var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours];
toCheck.forEach(function(arrayItem, index) {
if (arrayItem == true) {
activeCount++;
};
});
if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) {
helper.e(".control-header-clock-show-seperator").disabled = false;
helper.e(".control-header-clock-24").disabled = false;
} else {
helper.e(".control-header-clock-show-seconds").disabled = true;
helper.e(".control-header-clock-show-seperator").disabled = true;
helper.e(".control-header-clock-24").disabled = true;
};
if (state.get().header.clock.active && state.get().header.clock.hour24) {
helper.e(".control-header-clock-show-leading-zero").disabled = false;
if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
helper.e(".control-header-clock-24").disabled = false;
helper.e(".control-header-clock-show-meridiem").disabled = false;
} else {
helper.e(".control-header-clock-show-leading-zero").disabled = true;
helper.e(".control-header-clock-24").disabled = true;
helper.e(".control-header-clock-show-meridiem").disabled = true;
};
if (state.get().header.clock.active && !state.get().header.clock.hour24) {
if ((state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) && !state.get().header.clock.hour24) {
helper.e(".control-header-clock-show-meridiem").disabled = false;
} else {
helper.e(".control-header-clock-show-meridiem").disabled = true;
@ -130,12 +163,14 @@ var control = (function() {
helper.e(".control-header-search-engine-duckduckgo").disabled = false;
helper.e(".control-header-search-engine-giphy").disabled = false;
helper.e(".control-header-search-engine-custom").disabled = false;
helper.e(".control-header-search-engine-label").removeAttribute("disabled");
} else {
helper.e(".control-header-search-grow").disabled = true;
helper.e(".control-header-search-engine-google").disabled = true;
helper.e(".control-header-search-engine-duckduckgo").disabled = true;
helper.e(".control-header-search-engine-giphy").disabled = true;
helper.e(".control-header-search-engine-custom").disabled = true;
helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
};
if (state.get().header.search.active && state.get().header.search.engine.selected === "custom") {
helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
@ -145,6 +180,7 @@ var control = (function() {
helper.e(".control-header-search-engine-custom-url").disabled = true;
};
};
_date();
_clock();
_search();
};
@ -153,11 +189,9 @@ var control = (function() {
helper.e(".control-menu").addEventListener("click", function() {
menu.toggle();
}, false);
helper.e(".control-add").addEventListener("click", function() {
link.add();
}, false);
helper.e(".control-edit").addEventListener("change", function() {
state.change({
path: "edit.active",
@ -166,7 +200,6 @@ var control = (function() {
render();
data.save();
}, false);
helper.e(".control-layout-theme").addEventListener("change", function() {
state.change({
path: "layout.theme",
@ -174,7 +207,7 @@ var control = (function() {
});
theme.render();
data.save();
});
}, false);
helper.e(".control-link-new-tab").addEventListener("change", function() {
state.change({
path: "link.newTab",
@ -245,10 +278,83 @@ var control = (function() {
});
search.update();
data.save();
});
helper.e(".control-header-clock-active").addEventListener("change", function() {
}, false);
helper.e(".control-header-date-show-date").addEventListener("change", function() {
state.change({
path: "header.clock.active",
path: "header.date.show.date",
value: this.checked
});
render();
_dependents();
date.clear();
date.render();
header.render();
data.save();
}, false);
helper.e(".control-header-date-show-day").addEventListener("change", function() {
state.change({
path: "header.date.show.day",
value: this.checked
});
render();
_dependents();
date.clear();
date.render();
header.render();
data.save();
}, false);
helper.e(".control-header-date-show-month").addEventListener("change", function() {
state.change({
path: "header.date.show.month",
value: this.checked
});
render();
_dependents();
date.clear();
date.render();
header.render();
data.save();
}, false);
helper.e(".control-header-date-show-year").addEventListener("change", function() {
state.change({
path: "header.date.show.year",
value: this.checked
});
render();
_dependents();
date.clear();
date.render();
header.render();
data.save();
}, false);
helper.e(".control-header-date-show-seperator").addEventListener("change", function() {
state.change({
path: "header.date.show.seperator",
value: this.checked
});
render();
_dependents();
date.clear();
date.render();
header.render();
data.save();
}, false);
helper.eA("input[name='control-header-date-character-length']").forEach(function(arrayItem, index) {
arrayItem.addEventListener("change", function() {
state.change({
path: "header.date.characterLength",
value: this.value
});
render();
date.clear();
date.render();
header.render();
data.save();
}, false);
});
helper.e(".control-header-clock-show-seconds").addEventListener("change", function() {
state.change({
path: "header.clock.show.seconds",
value: this.checked
});
render();
@ -258,11 +364,25 @@ var control = (function() {
header.render();
data.save();
}, false);
helper.e(".control-header-clock-show-seconds").addEventListener("change", function() {
helper.e(".control-header-clock-show-minutes").addEventListener("change", function() {
state.change({
path: "header.clock.show.seconds",
path: "header.clock.show.minutes",
value: this.checked
});
render();
_dependents();
clock.clear();
clock.render();
header.render();
data.save();
}, false);
helper.e(".control-header-clock-show-hours").addEventListener("change", function() {
state.change({
path: "header.clock.show.hours",
value: this.checked
});
render();
_dependents();
clock.clear();
clock.render();
header.render();
@ -289,17 +409,6 @@ var control = (function() {
header.render();
data.save();
}, false);
helper.e(".control-header-clock-show-leading-zero").addEventListener("change", function() {
state.change({
path: "header.clock.show.leadingZero",
value: this.checked
});
_dependents();
clock.clear();
clock.render();
header.render();
data.save();
}, false);
helper.e(".control-header-clock-show-meridiem").addEventListener("change", function() {
state.change({
path: "header.clock.show.meridiem",
@ -369,14 +478,20 @@ var control = (function() {
helper.e(".control-header-search-grow").checked = state.get().header.search.grow;
helper.e(".control-header-search-engine-" + state.get().header.search.engine.selected).checked = true;
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
helper.e(".control-header-clock-active").checked = state.get().header.clock.active;
helper.e(".control-header-date-show-date").checked = state.get().header.date.show.date;
helper.e(".control-header-date-show-day").checked = state.get().header.date.show.day;
helper.e(".control-header-date-show-month").checked = state.get().header.date.show.month;
helper.e(".control-header-date-show-year").checked = state.get().header.date.show.year;
helper.e(".control-header-date-show-seperator").checked = state.get().header.date.show.seperator;
helper.e(".control-header-clock-show-seconds").checked = state.get().header.clock.show.seconds;
helper.e(".control-header-clock-show-minutes").checked = state.get().header.clock.show.minutes;
helper.e(".control-header-clock-show-hours").checked = state.get().header.clock.show.hours;
helper.e(".control-header-clock-show-seperator").checked = state.get().header.clock.show.seperator;
helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24;
helper.e(".control-header-clock-show-leading-zero").checked = state.get().header.clock.show.leadingZero;
helper.e(".control-header-clock-show-meridiem").checked = state.get().header.clock.show.meridiem;
helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
helper.e(".control-header-date-character-length-" + state.get().header.date.characterLength).checked = true;
helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd;

114
js/date.js Normal file
View File

@ -0,0 +1,114 @@
var date = (function() {
var bind = function() {
window.setInterval(function() {
clear();
render();
}, 1000);
};
var clear = function() {
var date = helper.e(".date");
while (date.lastChild) {
date.removeChild(date.lastChild);
};
};
var _makeTimeObject = function() {
var time = helper.getDateTime();
return time;
};
var render = function() {
var _date = function() {
var date = helper.e(".date");
var time = _makeTimeObject();
time.day = helper.day(time.day - 1);
time.month = helper.month(time.month);
if (state.get().header.date.characterLength == "short") {
time.day = time.day.substring(0, 3);
time.month = time.month.substring(0, 3);
};
var sepCha = "/";
var dateNumber = helper.makeNode({
tag: "span",
text: time.date,
attr: [{
key: "class",
value: "date-item date-date"
}]
});
var day = helper.makeNode({
tag: "span",
text: time.day,
attr: [{
key: "class",
value: "date-item date-day"
}]
});
var month = helper.makeNode({
tag: "span",
text: time.month,
attr: [{
key: "class",
value: "date-item date-month"
}]
});
var year = helper.makeNode({
tag: "span",
text: time.year,
attr: [{
key: "class",
value: "date-item date-year"
}]
});
if (state.get().header.date.show.date) {
date.appendChild(dateNumber);
};
if (state.get().header.date.show.day) {
date.appendChild(day);
};
if (state.get().header.date.show.month) {
date.appendChild(month);
};
if (state.get().header.date.show.year) {
date.appendChild(year);
};
if (state.get().header.date.show.seperator) {
var parts = date.querySelectorAll("span");
if (parts.length > 1) {
parts.forEach(function(arrayItem, index) {
if (index > 0) {
var seperator = helper.makeNode({
tag: "span",
text: sepCha,
attr: [{
key: "class",
value: "date-seperator"
}]
});
date.insertBefore(seperator, arrayItem);
};
});
};
};
};
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) {
_date();
};
};
var init = function() {
render();
bind();
};
// exposed methods
return {
init: init,
bind: bind,
render: render,
clear: clear
};
})();

12
js/helper.js
View File

@ -38,6 +38,16 @@ var helper = (function() {
return object;
};
var month = function(index) {
var all = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return all[index];
};
var day = function(index) {
var all = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
return all[index];
};
var sortObject = function(object, key) {
object.sort(function(a, b) {
var textA = a[key];
@ -296,6 +306,8 @@ var helper = (function() {
removeClass: removeClass,
allEqual: allEqual,
getDateTime: getDateTime,
month: month,
day: day,
sortObject: sortObject,
applyOptions: applyOptions,
hexToRgb: hexToRgb,

4
js/init.js
View File

@ -27,6 +27,10 @@ control.init();
// render search engine
search.init();
// render date
// bind date update
date.init();
// render clock
// bind clock update
clock.init();

1
js/link.js
View File

@ -40,7 +40,6 @@ var link = (function() {
var edit = function(button) {
state.get().link.action = "edit";
state.get().link.editObject = bookmarks.get(parseInt(button.closest(".link-item").dataset.timeStamp, 10));
console.log(state.get().link.editObject);
var currentBookmark = bookmarks.get(state.get().link.editObject.timeStamp);
var form = _makeLinkForm();
form.querySelector(".link-form-input-letter").value = currentBookmark.letter;

14
js/state.js
View File

@ -2,12 +2,22 @@ var state = (function() {
var current = {
header: {
date: {
characterLength: "short",
show: {
date: true,
day: false,
month: true,
year: false,
seperator: true
}
},
clock: {
active: true,
hour24: true,
show: {
leadingZero: true,
seconds: true,
minutes: true,
hours: true,
seperator: true,
meridiem: true
}