From d21b1d6f2b1a971ad1e16a61c1e1241596f006de Mon Sep 17 00:00:00 2001 From: Kombie Date: Sat, 5 Jan 2019 20:57:21 +0000 Subject: [PATCH] [feature] adding date to header --- css/base.css | 6 ++ css/container.css | 2 +- css/date.css | 63 ++++++++++++ css/form.css | 26 ++--- css/{head.css => header.css} | 15 ++- css/link.css | 3 +- css/menu.css | 26 ++--- css/modal.css | 2 +- css/shade.css | 2 +- index.html | 71 ++++++++++---- js/clock.js | 62 +++++------- js/control.js | 181 ++++++++++++++++++++++++++++------- js/date.js | 114 ++++++++++++++++++++++ js/helper.js | 12 +++ js/init.js | 4 + js/link.js | 1 - js/state.js | 14 ++- 17 files changed, 484 insertions(+), 120 deletions(-) create mode 100644 css/date.css rename css/{head.css => header.css} (84%) create mode 100644 js/date.js diff --git a/css/base.css b/css/base.css index 54b3a02c..3e90eeb1 100644 --- a/css/base.css +++ b/css/base.css @@ -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 { diff --git a/css/container.css b/css/container.css index 420295c8..1d1e1f63 100644 --- a/css/container.css +++ b/css/container.css @@ -21,7 +21,7 @@ @media (min-width: 900px) {} -@media (min-width: 1000px) { +@media (min-width: 1100px) { .is-layout-wide .container { width: 75vw; } diff --git a/css/date.css b/css/date.css new file mode 100644 index 00000000..32a970bd --- /dev/null +++ b/css/date.css @@ -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); +} diff --git a/css/form.css b/css/form.css index 007c2d9c..a444c5e5 100644 --- a/css/form.css +++ b/css/form.css @@ -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, diff --git a/css/head.css b/css/header.css similarity index 84% rename from css/head.css rename to css/header.css index 50b80d08..1f8cf3c6 100644 --- a/css/head.css +++ b/css/header.css @@ -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 { diff --git a/css/link.css b/css/link.css index ecddfa37..04a26a00 100644 --- a/css/link.css +++ b/css/link.css @@ -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 { diff --git a/css/menu.css b/css/menu.css index 1c95e7b3..27f22772 100644 --- a/css/menu.css +++ b/css/menu.css @@ -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; } diff --git a/css/modal.css b/css/modal.css index f1b2b9e2..95e92de5 100644 --- a/css/modal.css +++ b/css/modal.css @@ -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 { diff --git a/css/shade.css b/css/shade.css index 6f7e9f6c..d2098682 100644 --- a/css/shade.css +++ b/css/shade.css @@ -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); } diff --git a/index.html b/index.html index dad292da..3b9092af 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,8 @@ - + + @@ -35,6 +36,9 @@

+
+

+
@@ -99,57 +103,89 @@

Clock

- - + +
-
+
+ + +
+
-
+
-
+
-
- - -
-
+
+
+

Date

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

Search

-
+
-
+ +
-
+
-
+
-
+
-
+
@@ -257,6 +293,7 @@ + diff --git a/js/clock.js b/js/clock.js index 21c5b9b2..d61af38d 100644 --- a/js/clock.js +++ b/js/clock.js @@ -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(); }; }; diff --git a/js/control.js b/js/control.js index c4ef6844..73b411aa 100644 --- a/js/control.js +++ b/js/control.js @@ -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; diff --git a/js/date.js b/js/date.js new file mode 100644 index 00000000..9b04d6ca --- /dev/null +++ b/js/date.js @@ -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 + }; + +})(); diff --git a/js/helper.js b/js/helper.js index 2e216fed..52cb8627 100644 --- a/js/helper.js +++ b/js/helper.js @@ -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, diff --git a/js/init.js b/js/init.js index 0d4669a6..8fe0a0c0 100644 --- a/js/init.js +++ b/js/init.js @@ -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(); diff --git a/js/link.js b/js/link.js index 36b9bb7b..736089f9 100644 --- a/js/link.js +++ b/js/link.js @@ -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; diff --git a/js/state.js b/js/state.js index 856524ce..f805513c 100644 --- a/js/state.js +++ b/js/state.js @@ -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 }