From 6a87114499c98879cb59efbf217e9a4f859a66d2 Mon Sep 17 00:00:00 2001 From: Kombie Date: Sun, 3 Feb 2019 13:51:54 +0000 Subject: [PATCH] [refactor] improve state and control binding --- css/base.css | 14 +- css/container.css | 18 +- css/header.css | 28 +- css/link.css | 66 +-- css/menu.css | 20 +- css/shade.css | 11 +- index.html | 150 +++--- js/background.js | 4 +- js/bookmarks.js | 2 +- js/control.js | 1227 ++++++++++++++++++++++++++------------------- js/data.js | 4 +- js/date.js | 2 +- js/init.js | 1 + js/keyboard.js | 31 +- js/link.js | 35 +- js/menu.js | 12 +- js/modal.js | 10 +- js/search.js | 22 +- js/state.js | 124 +++-- js/theme.js | 5 +- js/update.js | 65 ++- js/version.js | 2 +- 22 files changed, 1068 insertions(+), 785 deletions(-) diff --git a/css/base.css b/css/base.css index ff33735f..cd7a0104 100644 --- a/css/base.css +++ b/css/base.css @@ -54,13 +54,13 @@ --breakpoint-xxl: 1600px; } -:root.is-link-block { +:root.is-bookmarks-style-block { --link-height: 7em; --url-height: 20%; --edit-height: 30%; } -:root.is-link-list { +:root.is-bookmarks-style-list { --link-height: 4em; --url-height: 30%; --edit-height: 50%; @@ -71,7 +71,7 @@ --root-font-size: 16px; } - :root.is-link-block { + :root.is-bookmarks-style-block { --link-height: 9em; } } @@ -96,19 +96,19 @@ body { height: 100vh; } -.is-alignment-vertical-top body { +.is-header-alignment-vertical-top body { justify-content: flex-start; } -.is-alignment-vertical-center body { +.is-header-alignment-vertical-center body { justify-content: center; } -.is-alignment-vertical-bottom body { +.is-header-alignment-vertical-bottom body { justify-content: flex-end; } -.is-link body { +.is-bookmarks-show-link body { display: inherit; height: inherit; } diff --git a/css/container.css b/css/container.css index c6f9ba5a..886b4512 100644 --- a/css/container.css +++ b/css/container.css @@ -4,18 +4,18 @@ transition: all var(--animation-speed-fast) ease-in-out; } -.is-layout-fluid .container, -.is-layout-wide .container, -.is-layout-thin .container { +.is-layout-width-fluid .container, +.is-layout-width-wide .container, +.is-layout-width-thin .container { width: calc(100vw - 4em); } @media (min-width: 550px) { - .is-layout-wide .container { + .is-layout-width-wide .container { width: 80vw; } - .is-layout-thin .container { + .is-layout-width-thin .container { width: 60vw; } } @@ -23,21 +23,21 @@ @media (min-width: 900px) {} @media (min-width: 1100px) { - .is-layout-wide .container { + .is-layout-width-wide .container { width: 75vw; } - .is-layout-thin .container { + .is-layout-width-thin .container { width: 40vw; } } @media (min-width: 1600px) { - .is-layout-wide .container { + .is-layout-width-wide .container { width: 70vw; } - .is-layout-thin .container { + .is-layout-width-thin .container { width: 30vw; } } diff --git a/css/header.css b/css/header.css index 82aed3d7..389729da 100644 --- a/css/header.css +++ b/css/header.css @@ -3,7 +3,7 @@ z-index: var(--z-index-header); } -.is-link .header { +.is-bookmarks-show-link .header { position: fixed; top: 0; left: 0; @@ -44,26 +44,26 @@ right: 0; } -.is-alignment-horizontal-left .header-area { +.is-header-alignment-horizontal-left .header-area { justify-content: flex-start; } -.is-alignment-horizontal-center .header-area { +.is-header-alignment-horizontal-center .header-area { justify-content: center; } -.is-alignment-horizontal-right .header-area { +.is-header-alignment-horizontal-right .header-area { justify-content: flex-end; } -.is-layout-thin.is-search-grow .header-search, -.is-search-grow .header-search { +.is-layout-width-thin.is-header-search-grow .header-search, +.is-header-search-grow .header-search { flex-grow: 1; flex-basis: 100%; } @media (min-width: 550px) { - .is-search-grow .header-search { + .is-header-search-grow .header-search { flex-basis: initial; } } @@ -77,14 +77,16 @@ .header-clock, .header-search, .header-edit-add, -.header-accent { +.header-accent, +.header-menu { display: none; } -.is-search .header-search, -.is-date .header-date, -.is-clock .header-clock, -.is-search-edit-add .header-edit-add, -.is-search-accent .header-accent { +.is-header-search-show .header-search, +.is-header-date-show .header-date, +.is-header-clock-show .header-clock, +.is-header-edit-add .header-edit-add, +.is-header-accent .header-accent, +.is-menu .header-menu { display: flex; } diff --git a/css/link.css b/css/link.css index b03d6a20..0d34bbf7 100644 --- a/css/link.css +++ b/css/link.css @@ -6,11 +6,11 @@ display: none; } -.is-link .link { +.is-bookmarks-show-link .link { display: block; } -.is-scroll-past-end .link { +.is-layout-scroll-past-end .link { margin-bottom: 60vh; } @@ -21,15 +21,15 @@ grid-gap: calc(var(--gutter) * 2); } -.is-link-block .link-area { +.is-bookmarks-style-block .link-area { grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); } -.is-link-list .link-area { +.is-bookmarks-style-list .link-area { grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); } -.is-layout-thin.is-link-list .link-area { +.is-layout-width-thin.is-bookmarks-style-list .link-area { grid-template-columns: 1fr; } @@ -67,13 +67,13 @@ transition: all var(--animation-speed-fast) ease-in-out; } -.is-link-block .link-panel-front { +.is-bookmarks-style-block .link-panel-front { flex-direction: column; align-items: center; justify-content: center; } -.is-link-list .link-panel-front { +.is-bookmarks-style-list .link-panel-front { flex-direction: row; align-items: center; justify-content: flex-start; @@ -95,9 +95,9 @@ box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4); } -.is-link-url .link-item:focus .link-panel-front, -.is-link-url .link-item:focus-within .link-panel-front, -.is-link-url .link-item:hover .link-panel-front { +.is-bookmarks-show-url .link-item:focus .link-panel-front, +.is-bookmarks-show-url .link-item:focus-within .link-panel-front, +.is-bookmarks-show-url .link-item:hover .link-panel-front { height: calc(100% - var(--url-height)); } @@ -159,13 +159,13 @@ .link-control-item:focus, .link-control-item:hover { - color: rgb(var(--black)); - background-color: rgba(255, 255, 255, 0.2); + color: rgb(var(--white)); + background-color: rgba(0, 0, 0, 0.2); } .link-control-item:active { - color: rgb(var(--black)); - background-color: rgba(255, 255, 255, 0.4); + color: rgb(var(--white)); + background-color: rgba(0, 0, 0, 0.3); transition: none; } @@ -179,15 +179,15 @@ transition: all var(--animation-speed-fast) ease-in-out; } -.is-link-url .link-url { +.is-bookmarks-show-url .link-url { display: flex; } -.is-link-block .link-url { +.is-bookmarks-style-block .link-url { justify-content: center; } -.is-link-list .link-url { +.is-bookmarks-style-list .link-url { justify-content: flex-start; } @@ -216,14 +216,14 @@ transition: all var(--animation-speed-fast) ease-in-out; } -.is-link-block .link-letter { +.is-bookmarks-style-block .link-letter { margin: 0; font-size: 2em; text-align: center; max-width: 100%; } -.is-link-list .link-letter { +.is-bookmarks-style-list .link-letter { margin: 0 0.5em 0 0; font-size: 1.5em; flex-shrink: 0; @@ -252,7 +252,7 @@ transition: all var(--animation-speed-fast) ease-in-out; } -.is-link-name .link-name { +.is-bookmarks-show-name .link-name { display: block; } @@ -275,37 +275,43 @@ color: rgb(var(--gray-16)); } -.is-link-block .link-name { +.is-bookmarks-style-block .link-name { text-align: center; } -.is-edit .link-panel-front, -.is-edit .link-item:hover .link-panel-front, -.is-edit .link-item:focus .link-panel-front { +.is-bookmarks-edit .link-panel-front, +.is-bookmarks-edit .link-item:hover .link-panel-front, +.is-bookmarks-edit .link-item:focus .link-panel-front { height: calc(100% - var(--edit-height)); box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4); } -.is-edit .link-control { +.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front, +.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus-within .link-panel-front, +.is-bookmarks-edit.is-bookmarks-show-url .link-item:hover .link-panel-front { + height: calc(100% - var(--edit-height)); +} + +.is-bookmarks-edit .link-control { height: var(--edit-height); } -.is-edit .link-item:hover .link-url, -.is-edit .link-item:focus .link-url { +.is-bookmarks-edit .link-item:hover .link-url, +.is-bookmarks-edit .link-item:focus .link-url { height: 0; } -.is-edit .link-control-item { +.is-bookmarks-edit .link-control-item { pointer-events: all; } -.is-link-block .link-panel-front { +.is-bookmarks-style-block .link-panel-front { flex-direction: column; align-items: center; justify-content: center; } -.is-link-list .link-panel-front { +.is-bookmarks-style-list .link-panel-front { flex-direction: row; align-items: center; justify-content: flex-start; diff --git a/css/menu.css b/css/menu.css index 13c3e182..fc4e21b3 100644 --- a/css/menu.css +++ b/css/menu.css @@ -6,7 +6,7 @@ right: 1em; width: calc(100vw - 2em); max-height: calc(80vh - 2em); - overflow-y: scroll; + overflow-y: auto; transform: translateY(calc(-100% - 2em)); transition: transform var(--animation-speed-fast) ease-in-out; z-index: var(--z-index-menu); @@ -43,15 +43,6 @@ margin: 0; } -.menu-nav-item { - flex-grow: 1; - flex-basis: 0; -} - -.menu-nav-item:not(:last-child) { - margin: 0; -} - .menu-content { padding: 2em; } @@ -78,7 +69,7 @@ margin: 0; padding-top: 0.75em; padding-bottom: 0.75em; - border-radius: 0; + border-radius: 0 var(--radius) 0 0; } .menu-nav-button { @@ -87,6 +78,12 @@ padding-top: 1em; padding-bottom: 1em; border-radius: 0; + flex-grow: 1; + flex-basis: 0; +} + +.menu-nav-button:first-child { + border-radius: var(--radius) 0 0 0; } .menu-nav-button [class^="icon-"], @@ -98,6 +95,7 @@ @media (min-width: 550px) { .menu { + overflow-y: inherit; max-height: inherit; } diff --git a/css/shade.css b/css/shade.css index e17eaeb2..cea49029 100644 --- a/css/shade.css +++ b/css/shade.css @@ -1,13 +1,18 @@ .shade { /* background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(var(--accent), 0.6) 100%); */ - /* background-color: rgba(var(--accent), 0.5); */ - background-color: rgba(var(--black), 0.5); + background-color: rgba(var(--accent), 0.4); + /* background-color: rgba(var(--black), 0.5); */ + /* box-shadow: 0 0 5em 0 rgba(var(--accent), 1) inset; */ position: fixed; top: -1em; left: -1em; width: calc(100% + 2em); height: calc(100% + 2em); opacity: 0; - transition: opacity var(--animation-speed-fast) ease-in-out; + transition: opacity var(--animation-speed-fast) ease-in-out, background-color var(--animation-speed-fast) ease-in-out; z-index: var(--z-index-shade); } + +.is-background-image-show .shade { + background-color: rgba(var(--black), 0.5); +} diff --git a/index.html b/index.html index 07d8eb01..de1d8542 100644 --- a/index.html +++ b/index.html @@ -69,14 +69,14 @@
- -
-
@@ -94,25 +94,19 @@
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+ + + + +
+
+

Clock

@@ -164,19 +158,19 @@
- +
- +

Search

- - + +
@@ -187,135 +181,137 @@

May not work in Chrome.

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

Buttons

- - + +
- - + +

Horizontal Alignment

- +
- +
- +

Vertical Alignment

- +
- +
- +

Available when Bookmarks are not shown.

+ +
diff --git a/js/background.js b/js/background.js index eed3aecd..f7458484 100644 --- a/js/background.js +++ b/js/background.js @@ -4,13 +4,13 @@ var background = (function() { var html = helper.e("html"); var background = helper.e(".background"); var backgroundImage = helper.e(".background-image"); - if (state.get().background.image.active) { + if (state.get().background.image.show) { helper.removeClass(background, "is-hidden"); html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); html.style.setProperty("--background-blur", state.get().background.image.blur + "px"); html.style.setProperty("--background-grayscale", state.get().background.image.grayscale); html.style.setProperty("--background-opacity", state.get().background.image.opacity); - html.style.setProperty("--background-accent-opacity", state.get().background.image.accentOpacity); + html.style.setProperty("--background-accent-opacity", state.get().background.image.accent); if (state.get().background.image.blur > 0 && state.get().background.image.grayscale > 0) { backgroundImage.style.setProperty("filter", "blur(var(--background-blur)) grayscale(var(--background-grayscale))"); } else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) { diff --git a/js/bookmarks.js b/js/bookmarks.js index d1ad6262..9cd87566 100644 --- a/js/bookmarks.js +++ b/js/bookmarks.js @@ -154,7 +154,7 @@ var bookmarks = (function() { return helper.sortObject(array, "letter"); } }; - return action[state.get().link.sort](all); + return action[state.get().bookmarks.sort](all); }; if (timeStamp && typeof timeStamp == "number") { return _singleBookmark(timeStamp); diff --git a/js/control.js b/js/control.js index 9a48a339..a46366ad 100644 --- a/js/control.js +++ b/js/control.js @@ -1,121 +1,684 @@ var control = (function() { - var toggle = function(override) { - var options = { - path: null, - value: null + var _allControl = [{ + element: helper.e(".control-menu"), + type: "button", + func: function() { + menu.toggle(); + } + }, { + element: helper.e(".control-add"), + type: "button", + func: function() { + link.add(); + } + }, { + element: helper.e(".control-edit"), + path: "bookmarks.edit", + type: "checkbox", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-current"), + path: "layout.theme.current", + type: "color", + func: function() { + theme.render(); + } + }, { + element: helper.e(".control-header-clock-show-hours"), + path: "header.clock.show.hours", + type: "checkbox", + func: function() { + render(); + dependents(); + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-clock-show-minutes"), + path: "header.clock.show.minutes", + type: "checkbox", + func: function() { + render(); + dependents(); + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-clock-show-seconds"), + path: "header.clock.show.seconds", + type: "checkbox", + func: function() { + render(); + dependents(); + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-clock-show-separator"), + path: "header.clock.show.separator", + type: "checkbox", + func: function() { + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-clock-24"), + path: "header.clock.hour24", + type: "checkbox", + func: function() { + dependents(); + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-clock-show-meridiem"), + path: "header.clock.show.meridiem", + type: "checkbox", + func: function() { + dependents(); + clock.clear(); + clock.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-show-day"), + path: "header.date.show.day", + type: "checkbox", + func: function() { + render(); + dependents(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-show-date"), + path: "header.date.show.date", + type: "checkbox", + func: function() { + render(); + dependents(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-show-month"), + path: "header.date.show.month", + type: "checkbox", + func: function() { + render(); + dependents(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-show-year"), + path: "header.date.show.year", + type: "checkbox", + func: function() { + render(); + dependents(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-show-separator"), + path: "header.date.show.separator", + type: "checkbox", + func: function() { + render(); + dependents(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-character-length-short"), + path: "header.date.character.length", + type: "radio", + func: function() { + render(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-date-character-length-long"), + path: "header.date.character.length", + type: "radio", + func: function() { + render(); + date.clear(); + date.render(); + header.render(); + } + }, { + element: helper.e(".control-header-search-show"), + path: "header.search.show", + type: "checkbox", + func: function() { + render(); + dependents(); + header.render(); + } + }, { + element: helper.e(".control-header-search-grow"), + path: "header.search.grow", + type: "checkbox", + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-search-focus"), + path: "header.search.focus", + type: "checkbox", + func: function() {} + }, { + element: helper.e(".control-header-search-engine-google"), + path: "header.search.engine.selected", + type: "radio", + func: function() { + render(); + dependents(); + search.update(); + } + }, { + element: helper.e(".control-header-search-engine-duckduckgo"), + path: "header.search.engine.selected", + type: "radio", + func: function() { + render(); + dependents(); + search.update(); + } + }, { + element: helper.e(".control-header-search-engine-giphy"), + path: "header.search.engine.selected", + type: "radio", + func: function() { + render(); + dependents(); + search.update(); + } + }, { + element: helper.e(".control-header-search-engine-custom"), + path: "header.search.engine.selected", + type: "radio", + func: function() { + render(); + dependents(); + search.update(); + } + }, { + element: helper.e(".control-header-search-engine-custom-url"), + path: "header.search.engine.custom.url", + type: "text", + func: function() { + search.update(); + } + }, { + element: helper.e(".control-header-edit-add-show"), + path: "header.editAdd.show", + type: "checkbox", + func: function() { + render(); + } + }, { + element: helper.e(".control-header-accent-show"), + path: "header.accent.show", + type: "checkbox", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-horizontal-left"), + path: "header.alignment.horizontal", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-horizontal-center"), + path: "header.alignment.horizontal", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-horizontal-right"), + path: "header.alignment.horizontal", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-vertical-top"), + path: "header.alignment.vertical", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-vertical-center"), + path: "header.alignment.vertical", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-alignment-vertical-bottom"), + path: "header.alignment.vertical", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-bookmarks-show-link"), + path: "bookmarks.show.link", + type: "checkbox", + func: function() { + render(); + dependents(); + header.render(); + } + }, { + element: helper.e(".control-bookmarks-show-name"), + path: "bookmarks.show.name", + type: "checkbox", + func: function() { + render(); + dependents(); + } + }, { + element: helper.e(".control-bookmarks-show-url"), + path: "bookmarks.show.url", + type: "checkbox", + func: function() { + render(); + dependents(); + } + }, { + element: helper.e(".control-bookmarks-new-tab"), + path: "bookmarks.newTab", + type: "checkbox", + func: function() { + link.clear(); + link.render(); + } + }, { + element: helper.e(".control-bookmarks-style-block"), + path: "bookmarks.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-bookmarks-style-list"), + path: "bookmarks.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-bookmarks-sort-none"), + path: "bookmarks.sort", + type: "radio", + func: function() { + link.clear(); + link.render(); + } + }, { + element: helper.e(".control-bookmarks-sort-name"), + path: "bookmarks.sort", + type: "radio", + func: function() { + link.clear(); + link.render(); + } + }, { + element: helper.e(".control-bookmarks-sort-letter"), + path: "bookmarks.sort", + type: "radio", + func: function() { + link.clear(); + link.render(); + } + }, { + element: helper.e(".control-layout-width-fluid"), + path: "layout.width", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-width-wide"), + path: "layout.width", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-width-thin"), + path: "layout.width", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-scroll-past-end"), + path: "layout.scrollPastEnd", + type: "checkbox", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-random-active"), + path: "layout.theme.random.active", + type: "checkbox", + func: function() { + dependents(); + theme.render(); + } + }, { + element: helper.e(".control-layout-theme-style-any"), + path: "layout.theme.random.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-style-light"), + path: "layout.theme.random.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-style-dark"), + path: "layout.theme.random.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-style-pastel"), + path: "layout.theme.random.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-layout-theme-style-saturated"), + path: "layout.theme.random.style", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-background-image-show"), + path: "background.image.show", + type: "checkbox", + func: function() { + render(); + dependents(); + background.render(); + } + }, { + element: helper.e(".control-background-image-url"), + path: "background.image.url", + type: "text", + func: function() { + background.render(); + } + }, { + element: helper.e(".control-background-image-opacity"), + path: "background.image.opacity", + type: "range", + valueMod: ["reverse", "float"], + func: function() { + background.render(); + } + }, { + element: helper.e(".control-background-image-grayscale"), + path: "background.image.grayscale", + type: "range", + valueMod: ["float"], + func: function() { + background.render(); + } + }, { + element: helper.e(".control-background-image-blur"), + path: "background.image.blur", + type: "range", + func: function() { + background.render(); + } + }, { + element: helper.e(".control-background-image-accent"), + path: "background.image.accent", + type: "range", + valueMod: ["float"], + func: function() { + background.render(); + } + }]; + + var _bind = function() { + var eventType = { + button: "click", + checkbox: "change", + radio: "change", + text: "input", + range: "input", + color: "change" }; - if (override) { - options = helper.applyOptions(options, override); + var valueType = { + checkbox: function(object) { + return object.element.checked; + }, + radio: function(object) { + return object.element.value; + }, + text: function(object) { + return object.element.value; + }, + range: function(object) { + return parseInt(object.element.value, 10); + }, + color: function(object) { + return helper.hexToRgb(object.element.value); + } }; - if (options.path != null) { - helper.setObject({ - path: options.path, - object: state.get(), - newValue: options.value - }); + var valueMod = { + reverse: function(value, object) { + return parseInt(object.element.max, 10) - value; + }, + float: function(value, object) { + return value / 100; + } }; + // var toggleValue = function(object) { + // var value = false; + // if (helper.getObject({ + // object: state.get(), + // path: object.path + // })) { + // value = true; + // }; + // helper.setObject({ + // path: object.path, + // object: state.get(), + // newValue: value + // }); + // }; + var changeValue = function(object) { + if (object.path) { + var newValue = valueType[object.type](object); + if (object.valueMod) { + object.valueMod.forEach(function(arrayItem, index) { + newValue = valueMod[arrayItem](newValue, object); + }); + }; + helper.setObject({ + object: state.get(), + path: object.path, + newValue: newValue + }); + // console.log(object.path, helper.getObject({ + // object: state.get(), + // path: object.path + // })); + }; + }; + var bindControl = function(object) { + var action = { + input: function(object) { + changeValue(object); + if (object.func) { + object.func(); + }; + }, + button: function(object) { + if (object.func) { + object.func(); + }; + // toggleValue(object); + } + }; + object.element.addEventListener(eventType[object.type], function() { + action[object.element.tagName.toLowerCase()](object); + data.save(); + }, false); + }; + _allControl.forEach(function(arrayItem, index) { + bindControl(arrayItem); + }); }; var render = function() { var html = helper.e("html"); + var _menu = function() { + helper.addClass(html, "is-menu"); + }; var _edit = function() { - if (state.get().edit.active) { - helper.addClass(html, "is-edit"); + if (state.get().bookmarks.edit) { + helper.addClass(html, "is-bookmarks-edit"); + link.tabIndex(); } else { - helper.removeClass(html, "is-edit"); + helper.removeClass(html, "is-bookmarks-edit"); + link.tabIndex(); }; }; 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"); + helper.addClass(html, "is-header-date-show"); } else { - helper.removeClass(html, "is-date"); + helper.removeClass(html, "is-header-date-show"); }; }; var _clock = function() { if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) { - helper.addClass(html, "is-clock"); + helper.addClass(html, "is-header-clock-show"); } else { - helper.removeClass(html, "is-clock"); + helper.removeClass(html, "is-header-clock-show"); }; }; var _search = function() { - if (state.get().header.search.active) { - helper.addClass(html, "is-search"); + if (state.get().header.search.show) { + helper.addClass(html, "is-header-search-show"); } else { - helper.removeClass(html, "is-search"); + helper.removeClass(html, "is-header-search-show"); }; if (state.get().header.search.grow) { - helper.addClass(html, "is-search-grow"); + helper.addClass(html, "is-header-search-grow"); } else { - helper.removeClass(html, "is-search-grow"); + helper.removeClass(html, "is-header-search-grow"); }; helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url; }; var _alignment = function() { - helper.removeClass(html, "is-alignment-horizontal-left"); - helper.removeClass(html, "is-alignment-horizontal-center"); - helper.removeClass(html, "is-alignment-horizontal-right"); - helper.removeClass(html, "is-alignment-vertical-top"); - helper.removeClass(html, "is-alignment-vertical-center"); - helper.removeClass(html, "is-alignment-vertical-bottom"); - helper.addClass(html, "is-alignment-horizontal-" + state.get().layout.alignment.horizontal); - helper.addClass(html, "is-alignment-vertical-" + state.get().layout.alignment.vertical); + helper.removeClass(html, "is-header-alignment-horizontal-left"); + helper.removeClass(html, "is-header-alignment-horizontal-center"); + helper.removeClass(html, "is-header-alignment-horizontal-right"); + helper.removeClass(html, "is-header-alignment-vertical-top"); + helper.removeClass(html, "is-header-alignment-vertical-center"); + helper.removeClass(html, "is-header-alignment-vertical-bottom"); + helper.addClass(html, "is-header-alignment-horizontal-" + state.get().header.alignment.horizontal); + helper.addClass(html, "is-header-alignment-vertical-" + state.get().header.alignment.vertical); }; var _link = function() { var view = { block: function() { - helper.addClass(html, "is-link-block"); - helper.removeClass(html, "is-link-list"); + helper.addClass(html, "is-bookmarks-style-block"); + helper.removeClass(html, "is-bookmarks-style-list"); }, list: function() { - helper.removeClass(html, "is-link-block"); - helper.addClass(html, "is-link-list"); + helper.removeClass(html, "is-bookmarks-style-block"); + helper.addClass(html, "is-bookmarks-style-list"); } }; - view[state.get().link.style](); - if (state.get().link.show.active) { - helper.addClass(html, "is-link"); + view[state.get().bookmarks.style](); + if (state.get().bookmarks.show.link) { + helper.addClass(html, "is-bookmarks-show-link"); } else { - helper.removeClass(html, "is-link"); + helper.removeClass(html, "is-bookmarks-show-link"); }; - if (state.get().link.show.name) { - helper.addClass(html, "is-link-name"); + if (state.get().bookmarks.show.name) { + helper.addClass(html, "is-bookmarks-show-name"); } else { - helper.removeClass(html, "is-link-name"); + helper.removeClass(html, "is-bookmarks-show-name"); }; - if (state.get().link.show.url) { - helper.addClass(html, "is-link-url"); + if (state.get().bookmarks.show.url) { + helper.addClass(html, "is-bookmarks-show-url"); } else { - helper.removeClass(html, "is-link-url"); + helper.removeClass(html, "is-bookmarks-show-url"); }; }; var _layout = function() { - helper.removeClass(html, "is-layout-fluid"); - helper.removeClass(html, "is-layout-wide"); - helper.removeClass(html, "is-layout-thin"); - helper.addClass(html, "is-layout-" + state.get().layout.container); + helper.removeClass(html, "is-layout-width-fluid"); + helper.removeClass(html, "is-layout-width-wide"); + helper.removeClass(html, "is-layout-width-thin"); + helper.addClass(html, "is-layout-width-" + state.get().layout.width); if (state.get().layout.scrollPastEnd) { - helper.addClass(html, "is-scroll-past-end"); + helper.addClass(html, "is-layout-scroll-past-end"); } else { - helper.removeClass(html, "is-scroll-past-end"); + helper.removeClass(html, "is-layout-scroll-past-end"); }; }; var _editAdd = function() { - if (state.get().header.editAdd.active) { - helper.addClass(html, "is-search-edit-add"); + if (state.get().header.editAdd.show) { + helper.addClass(html, "is-header-edit-add"); } else { - helper.removeClass(html, "is-search-edit-add"); + helper.removeClass(html, "is-header-edit-add"); }; }; var _accent = function() { - if (state.get().header.accent.active) { - helper.addClass(html, "is-search-accent"); + if (state.get().header.accent.show) { + helper.addClass(html, "is-header-accent"); } else { - helper.removeClass(html, "is-search-accent"); + helper.removeClass(html, "is-header-accent"); }; }; + var _background = function() { + if (state.get().background.image.show) { + helper.addClass(html, "is-background-image-show"); + } else { + helper.removeClass(html, "is-background-image-show"); + }; + }; + _menu(); _alignment(); _edit(); _date(); @@ -125,6 +688,7 @@ var control = (function() { _accent(); _link(); _layout(); + _background(); }; var dependents = function() { @@ -134,9 +698,10 @@ var control = (function() { } else { helper.e(".control-edit").disabled = true; helper.e(".control-edit").checked = false; - state.change({ + helper.setObject({ + object: state.get(), path: "edit.active", - value: false + newValue: false }); }; }; @@ -188,7 +753,7 @@ var control = (function() { }; }; var _search = function() { - if (state.get().header.search.active) { + if (state.get().header.search.show) { helper.e(".control-header-search-grow").disabled = false; helper.e(".control-header-search-focus").disabled = false; helper.e(".control-header-search-engine-google").disabled = false; @@ -205,7 +770,7 @@ var control = (function() { 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") { + if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") { helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled"); helper.e(".control-header-search-engine-custom-url").disabled = false; } else { @@ -225,34 +790,34 @@ var control = (function() { }; }; var _link = function() { - if (state.get().link.show.active) { - helper.e(".control-link-show-name").disabled = false; - helper.e(".control-link-show-url").disabled = false; - helper.e(".control-link-style-block").disabled = false; - helper.e(".control-link-style-list").disabled = false; - helper.e(".control-link-new-tab").disabled = false; - helper.e(".control-link-sort-none").disabled = false; - helper.e(".control-link-sort-name").disabled = false; - helper.e(".control-link-sort-letter").disabled = false; + if (state.get().bookmarks.show.link) { + helper.e(".control-bookmarks-show-name").disabled = false; + helper.e(".control-bookmarks-show-url").disabled = false; + helper.e(".control-bookmarks-style-block").disabled = false; + helper.e(".control-bookmarks-style-list").disabled = false; + helper.e(".control-bookmarks-new-tab").disabled = false; + helper.e(".control-bookmarks-sort-none").disabled = false; + helper.e(".control-bookmarks-sort-name").disabled = false; + helper.e(".control-bookmarks-sort-letter").disabled = false; helper.e(".control-layout-alignment-vertical-top").disabled = true; helper.e(".control-layout-alignment-vertical-center").disabled = true; helper.e(".control-layout-alignment-vertical-bottom").disabled = true; } else { - helper.e(".control-link-show-name").disabled = true; - helper.e(".control-link-show-url").disabled = true; - helper.e(".control-link-style-block").disabled = true; - helper.e(".control-link-style-list").disabled = true; - helper.e(".control-link-new-tab").disabled = true; - helper.e(".control-link-sort-none").disabled = true; - helper.e(".control-link-sort-name").disabled = true; - helper.e(".control-link-sort-letter").disabled = true; + helper.e(".control-bookmarks-show-name").disabled = true; + helper.e(".control-bookmarks-show-url").disabled = true; + helper.e(".control-bookmarks-style-block").disabled = true; + helper.e(".control-bookmarks-style-list").disabled = true; + helper.e(".control-bookmarks-new-tab").disabled = true; + helper.e(".control-bookmarks-sort-none").disabled = true; + helper.e(".control-bookmarks-sort-name").disabled = true; + helper.e(".control-bookmarks-sort-letter").disabled = true; helper.e(".control-layout-alignment-vertical-top").disabled = false; helper.e(".control-layout-alignment-vertical-center").disabled = false; helper.e(".control-layout-alignment-vertical-bottom").disabled = false; }; }; var _background = function() { - if (state.get().background.image.active) { + if (state.get().background.image.show) { helper.e("[for=control-background-image-url]").removeAttribute("disabled"); helper.e(".control-background-image-url").disabled = false; helper.e("[for=control-background-image-opacity]").removeAttribute("disabled"); @@ -261,8 +826,8 @@ var control = (function() { helper.e(".control-background-image-blur").disabled = false; helper.e("[for=control-background-image-grayscale]").removeAttribute("disabled"); helper.e(".control-background-image-grayscale").disabled = false; - helper.e("[for=control-background-image-accent-opacity]").removeAttribute("disabled"); - helper.e(".control-background-image-accent-opacity").disabled = false; + helper.e("[for=control-background-image-accent]").removeAttribute("disabled"); + helper.e(".control-background-image-accent").disabled = false; } else { helper.e("[for=control-background-image-url]").setAttribute("disabled", ""); helper.e(".control-background-image-url").disabled = true; @@ -272,8 +837,8 @@ var control = (function() { helper.e(".control-background-image-blur").disabled = true; helper.e("[for=control-background-image-grayscale]").setAttribute("disabled", ""); helper.e(".control-background-image-grayscale").disabled = true; - helper.e("[for=control-background-image-accent-opacity]").setAttribute("disabled", ""); - helper.e(".control-background-image-accent-opacity").disabled = true; + helper.e("[for=control-background-image-accent]").setAttribute("disabled", ""); + helper.e(".control-background-image-accent").disabled = true; }; }; _edit(); @@ -285,442 +850,66 @@ var control = (function() { _background(); }; - var _bind = 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", - value: this.checked - }); - render(); - dependents(); - data.save(); - }, false); - helper.e(".control-layout-theme").addEventListener("change", function() { - state.change({ - path: "layout.theme.current", - value: helper.hexToRgb(this.value) - }); - theme.render(); - data.save(); - }, false); - helper.e(".control-layout-theme-random").addEventListener("change", function() { - state.change({ - path: "layout.theme.random.active", - value: this.checked - }); - theme.render(); - dependents(); - data.save(); - }, false); - helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "layout.theme.random.style", - value: this.value - }); - render(); - data.save(); - }, false); - }); - helper.e(".control-link-new-tab").addEventListener("change", function() { - state.change({ - path: "link.newTab", - value: this.checked - }); - link.clear(); - link.render(); - data.save(); - }); - helper.e(".control-link-show-active").addEventListener("change", function() { - state.change({ - path: "link.show.active", - value: this.checked - }); - render(); - dependents(); - header.render(); - data.save(); - }); - helper.e(".control-link-show-name").addEventListener("change", function() { - state.change({ - path: "link.show.name", - value: this.checked - }); - render(); - dependents(); - data.save(); - }); - helper.e(".control-link-show-url").addEventListener("change", function() { - state.change({ - path: "link.show.url", - value: this.checked - }); - render(); - dependents(); - data.save(); - }); - helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "link.style", - value: this.value - }); - render(); - data.save(); - }, false); - }); - helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "link.sort", - value: this.value - }); - link.clear(); - link.render(); - data.save(); - }, false); - }); - helper.e(".control-header-search-active").addEventListener("change", function() { - state.change({ - path: "header.search.active", - value: this.checked - }); - render(); - dependents(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-search-grow").addEventListener("change", function() { - state.change({ - path: "header.search.grow", - value: this.checked - }); - render(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-search-focus").addEventListener("change", function() { - state.change({ - path: "header.search.focus", - value: this.checked - }); - data.save(); - }, false); - helper.eA("input[name='control-header-search-engine']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "header.search.engine.selected", - value: this.value - }); - render(); - dependents(); - search.update(); - data.save(); - }, false); - }); - helper.e(".control-header-search-engine-custom-url").addEventListener("input", function() { - state.change({ - path: "header.search.engine.custom.url", - value: this.value - }); - search.update(); - data.save(); - }, false); - helper.e(".control-header-date-show-date").addEventListener("change", function() { - state.change({ - 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-separator").addEventListener("change", function() { - state.change({ - path: "header.date.show.separator", - 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(); - dependents(); - clock.clear(); - clock.render(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-clock-show-minutes").addEventListener("change", function() { - state.change({ - 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(); - data.save(); - }, false); - helper.e(".control-header-clock-show-separator").addEventListener("change", function() { - state.change({ - path: "header.clock.show.separator", - value: this.checked - }); - clock.clear(); - clock.render(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-clock-24").addEventListener("change", function() { - state.change({ - path: "header.clock.hour24", - 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", - value: this.checked - }); - clock.clear(); - clock.render(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-edit-add-active").addEventListener("change", function() { - state.change({ - path: "header.editAdd.active", - value: this.checked - }); - render(); - header.render(); - data.save(); - }, false); - helper.e(".control-header-accent-active").addEventListener("change", function() { - state.change({ - path: "header.accent.active", - value: this.checked - }); - render(); - header.render(); - data.save(); - }, false); - helper.eA("input[name='control-layout-alignment-horizontal']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "layout.alignment.horizontal", - value: this.value - }); - render(); - data.save(); - }, false); - }); - helper.eA("input[name='control-layout-alignment-vertical']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "layout.alignment.vertical", - value: this.value - }); - render(); - data.save(); - }, false); - }); - helper.eA("input[name='control-layout-container']").forEach(function(arrayItem, index) { - arrayItem.addEventListener("change", function() { - state.change({ - path: "layout.container", - value: this.value - }); - render(); - header.render(); - data.save(); - }, false); - }); - helper.e(".control-layout-scroll-past-end").addEventListener("change", function() { - state.change({ - path: "layout.scrollPastEnd", - value: this.checked - }); - render(); - data.save(); - }, false); - helper.e(".control-background-image-active").addEventListener("change", function() { - state.change({ - path: "background.image.active", - value: this.checked - }); - render(); - dependents(); - background.render(); - data.save(); - }, false); - helper.e(".control-background-image-url").addEventListener("input", function() { - state.change({ - path: "background.image.url", - value: this.value - }); - background.render(); - data.save(); - }, false); - helper.e(".control-background-image-opacity").addEventListener("input", function() { - state.change({ - path: "background.image.opacity", - value: (100 - parseInt(this.value)) / 100 - }); - background.render(); - data.save(); - }, false); - helper.e(".control-background-image-blur").addEventListener("input", function() { - state.change({ - path: "background.image.blur", - value: parseInt(this.value, 10) - }); - background.render(); - data.save(); - }, false); - helper.e(".control-background-image-grayscale").addEventListener("input", function() { - state.change({ - path: "background.image.grayscale", - value: parseInt(this.value, 10) / 100 - }); - background.render(); - data.save(); - }, false); - helper.e(".control-background-image-accent-opacity").addEventListener("input", function() { - state.change({ - path: "background.image.accentOpacity", - value: parseInt(this.value, 10) / 100 - }); - background.render(); - data.save(); - }, false); - }; - var update = function() { - helper.e(".control-edit").checked = state.get().edit.active; - helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme.current); - helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random.active; - helper.e(".control-layout-theme-style-" + state.get().layout.theme.random.style).checked = true; - helper.e(".control-link-new-tab").value = state.get().link.style.newTab; - helper.e(".control-link-show-active").checked = state.get().link.show.active; - helper.e(".control-link-show-name").checked = state.get().link.show.name; - helper.e(".control-link-show-url").checked = state.get().link.show.url; - helper.e(".control-link-style-" + state.get().link.style).checked = true; - helper.e(".control-link-sort-" + state.get().link.sort).checked = true; - helper.e(".control-header-search-active").checked = state.get().header.search.active; - helper.e(".control-header-search-grow").checked = state.get().header.search.grow; - helper.e(".control-header-search-focus").checked = state.get().header.search.focus; - 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-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-separator").checked = state.get().header.date.show.separator; - 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-separator").checked = state.get().header.clock.show.separator; - helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24; - 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-horizontal-" + state.get().layout.alignment.horizontal).checked = true; - helper.e(".control-layout-alignment-vertical-" + state.get().layout.alignment.vertical).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; - helper.e(".control-background-image-active").checked = state.get().background.image.active; - helper.e(".control-background-image-url").value = state.get().background.image.url; - helper.e(".control-background-image-opacity").value = 100 - (state.get().background.image.opacity * 100); - helper.e(".control-background-image-blur").value = state.get().background.image.blur; - helper.e(".control-background-image-grayscale").value = state.get().background.image.grayscale * 100; - helper.e(".control-background-image-accent-opacity").value = (state.get().background.image.accentOpacity * 100); + var eventType = { + button: "click", + checkbox: "change", + radio: "change", + text: "input", + range: "input", + color: "change" + }; + var valueMod = { + reverse: function(value, element) { + return parseInt(element.max, 10) - value; + }, + float: function(value, element) { + return value * 100; + } + }; + var setValue = { + checkbox: function(object) { + object.element.checked = helper.getObject({ + object: state.get(), + path: object.path + }); + }, + radio: function(object) { + helper.e("." + object.element.className.substring(0, object.element.className.lastIndexOf("-") + 1) + helper.getObject({ + object: state.get(), + path: object.path + })).checked = true; + }, + text: function(object) { + object.element.value = helper.getObject({ + object: state.get(), + path: object.path + }); + }, + range: function(object) { + var newValue = helper.getObject({ + object: state.get(), + path: object.path + }); + if (object.valueMod) { + object.valueMod.slice().reverse().forEach(function(arrayItem, index) { + newValue = valueMod[arrayItem](newValue, object.element); + }); + }; + object.element.value = newValue; + }, + color: function(object) { + object.element.value = helper.rgbToHex(helper.getObject({ + object: state.get(), + path: object.path + })); + } + }; + _allControl.forEach(function(arrayItem, index) { + if (arrayItem.element.tagName.toLowerCase() == "input") { + setValue[arrayItem.type](arrayItem); + }; + }); }; var init = function() { diff --git a/js/data.js b/js/data.js index 962e285f..7af4cb42 100644 --- a/js/data.js +++ b/js/data.js @@ -37,8 +37,8 @@ var data = (function() { if (data) { console.log("data loaded"); if (!("version" in data) || data.version != version.get()) { - console.log("data version found less than current"); - data = update.render(data); + console.log("data version", data.version, "found less than current"); + data = update.run(data); set(saveName, JSON.stringify(data)); } else { console.log("data version =", version.get()); diff --git a/js/date.js b/js/date.js index cbfdb801..30297a1b 100644 --- a/js/date.js +++ b/js/date.js @@ -25,7 +25,7 @@ var date = (function() { var time = _makeTimeObject(); time.day = helper.day(time.day); time.month = helper.month(time.month); - if (state.get().header.date.characterLength == "short") { + if (state.get().header.date.character.length == "short") { time.day = time.day.substring(0, 3); time.month = time.month.substring(0, 3); }; diff --git a/js/init.js b/js/init.js index 4f279121..e59e2f57 100644 --- a/js/init.js +++ b/js/init.js @@ -12,6 +12,7 @@ state.init(); bookmarks.init(); // close menu if left open +// bind menu tabs menu.init(); // render input color value diff --git a/js/keyboard.js b/js/keyboard.js index d2c5418e..28a2660e 100644 --- a/js/keyboard.js +++ b/js/keyboard.js @@ -4,16 +4,17 @@ var keyboard = (function() { window.addEventListener("keydown", function(event) { // esc if (event.keyCode == 27) { - if (state.get().menu.active) { + if (state.get().menu) { menu.close(); shade.destroy(); - } else if (state.get().modal.active) { + } else if (state.get().modal) { modal.destroy(); shade.destroy(); - } else if (state.get().edit.active) { - state.change({ + } else if (state.get().bookmarks.edit) { + helper.setObject({ + object: state.get(), path: "edit.active", - value: false + newValue: false }); control.update(); control.render(); @@ -22,7 +23,7 @@ var keyboard = (function() { }; // ctrl+alt+a if (event.ctrlKey && event.altKey && event.keyCode == 65) { - if (state.get().link.show.active) { + if (state.get().bookmarks.show.link) { menu.close(); link.add(); }; @@ -35,16 +36,18 @@ var keyboard = (function() { }; // ctrl+alt+e if (event.ctrlKey && event.altKey && event.keyCode == 69) { - if (state.get().link.show.active) { - if (state.get().edit.active) { - state.change({ - path: "edit.active", - value: false + if (state.get().bookmarks.show.link) { + if (state.get().bookmarks.edit) { + helper.setObject({ + object: state.get(), + path: "bookmarks.edit", + newValue: false }); } else { - state.change({ - path: "edit.active", - value: true + helper.setObject({ + object: state.get(), + path: "bookmarks.edit", + newValue: true }); }; control.update(); diff --git a/js/link.js b/js/link.js index 1747ad33..49fd820d 100644 --- a/js/link.js +++ b/js/link.js @@ -145,6 +145,15 @@ var link = (function() { }, { key: "autocomplete", value: "off" + }, { + key: "autocorrect", + value: "off" + }, { + key: "autocapitalize", + value: "off" + }, { + key: "spellcheck", + value: "false" }] }); var nameLabel = helper.makeNode({ @@ -175,6 +184,15 @@ var link = (function() { }, { key: "autocomplete", value: "off" + }, { + key: "autocorrect", + value: "off" + }, { + key: "autocapitalize", + value: "off" + }, { + key: "spellcheck", + value: "false" }] }); var urlLabel = helper.makeNode({ @@ -205,6 +223,15 @@ var link = (function() { }, { key: "autocomplete", value: "off" + }, { + key: "autocorrect", + value: "off" + }, { + key: "autocapitalize", + value: "off" + }, { + key: "spellcheck", + value: "false" }] }); fieldset.appendChild(letterLabel); @@ -238,7 +265,7 @@ var link = (function() { value: 1 }] }; - if (state.get().link.newTab) { + if (state.get().bookmarks.newTab) { linkOptions.attr.push({ key: "target", value: "_blank" @@ -393,7 +420,7 @@ var link = (function() { var render = function() { var linkArea = helper.e(".link-area"); var bookmarksToRender = false; - if (state.get().header.search.searching) { + if (state.get().search) { bookmarksToRender = search.get(); } else { bookmarksToRender = bookmarks.get(); @@ -416,7 +443,7 @@ var link = (function() { } }; // if searching - if (state.get().header.search.searching) { + if (state.get().search) { // if bookmarks exist to be searched if (bookmarksToRender.total > 0) { // if matching bookmarks found @@ -440,7 +467,7 @@ var link = (function() { var tabIndex = function() { var allLinkControlItem = helper.eA(".link-control-item"); - if (state.get().edit.active) { + if (state.get().bookmarks.edit) { allLinkControlItem.forEach(function(arrayItem, index) { arrayItem.tabIndex = 1; }); diff --git a/js/menu.js b/js/menu.js index 2b7fa7e0..093d7b5f 100644 --- a/js/menu.js +++ b/js/menu.js @@ -35,29 +35,29 @@ var menu = (function() { }; var close = function() { - state.get().menu.active = false; + state.get().menu = false; render(); }; var open = function() { _scrollToTop(helper.e(".menu-content")); - state.get().menu.active = true; + state.get().menu = true; render(); }; var toggle = function() { - if (state.get().menu.active) { - state.get().menu.active = false; + if (state.get().menu) { + state.get().menu = false; } else { _scrollToTop(helper.e(".menu-content")); - state.get().menu.active = true; + state.get().menu = true; }; render(); }; var render = function() { var html = helper.e("html"); - if (state.get().menu.active) { + if (state.get().menu) { helper.addClass(html, "is-menu-open"); helper.e(".menu").focus(); shade.render({ diff --git a/js/modal.js b/js/modal.js index ab1e634d..5a523b29 100644 --- a/js/modal.js +++ b/js/modal.js @@ -25,9 +25,10 @@ var modal = (function() { }; var makeModal = function() { var body = helper.e("body"); - state.change({ + helper.setObject({ + object: state.get(), path: "modal.active", - value: true + newValue: true }); var modalWrapper = document.createElement("div"); modalWrapper.setAttribute("class", "modal-wrapper"); @@ -47,9 +48,10 @@ var modal = (function() { } else { modal.remove(); }; - state.change({ + helper.setObject({ + object: state.get(), path: "modal.active", - value: false + newValue: false }); }; var modalBody = document.createElement("div"); diff --git a/js/search.js b/js/search.js index 2356bac5..24f688e6 100644 --- a/js/search.js +++ b/js/search.js @@ -18,22 +18,24 @@ var search = (function() { var _toggle = function(input) { if (input.value != "") { - state.change({ - path: "header.search.searching", - value: true - }) + helper.setObject({ + object: state.get(), + path: "search", + newValue: true + }); } else { - state.change({ - path: "header.search.searching", - value: false - }) + helper.setObject({ + object: state.get(), + path: "search", + newValue: false + }); }; }; var _searchClear = function() { var searchInput = helper.e(".search-input"); var searchClear = helper.e(".search-clear"); - if (state.get().header.search.searching) { + if (state.get().search) { searchClear.removeAttribute("disabled"); } else { searchClear.setAttribute("disabled", ""); @@ -42,7 +44,7 @@ var search = (function() { var get = function() { var searchInput = helper.e(".search-input"); - if (state.get().header.search.searching) { + if (state.get().search) { var searchedBookmarks = { total: 0, matching: [] diff --git a/js/state.js b/js/state.js index 26499878..37c5259d 100644 --- a/js/state.js +++ b/js/state.js @@ -2,35 +2,30 @@ var state = (function() { var current = { header: { - date: { - characterLength: "short", - show: { - date: true, - day: false, - month: true, - year: false, - separator: true - } - }, clock: { hour24: true, show: { - seconds: true, - minutes: true, hours: true, + minutes: true, + seconds: true, separator: true, meridiem: true } }, - editAdd: { - active: true, - }, - accent: { - active: true, + date: { + show: { + day: false, + date: true, + month: true, + year: false, + separator: true + }, + character: { + length: "short" + } }, search: { - searching: false, - active: true, + show: true, grow: true, focus: false, engine: { @@ -49,27 +44,31 @@ var state = (function() { } } }, - buttons: { - show: true - } - }, - link: { - show: { - active: true, - name: true, - url: true - }, - editObject: null, - newTab: false, - style: "block", - sort: "none" - }, - layout: { alignment: { horizontal: "left", vertical: "top" }, - container: "wide", + editAdd: { + show: true, + }, + accent: { + show: true, + } + }, + bookmarks: { + show: { + link: true, + name: true, + url: true + }, + newTab: false, + edit: false, + editObject: null, + style: "block", + sort: "none" + }, + layout: { + width: "wide", scrollPastEnd: true, theme: { current: { @@ -81,27 +80,21 @@ var state = (function() { active: false, style: "any" } - }, + } }, background: { image: { - active: false, + show: false, url: "../background/gray-steps.jpg", blur: 0, opacity: 1, grayscale: 0, - accentOpacity: 0 + accent: 0 } }, - edit: { - active: false - }, - menu: { - open: false - }, - modal: { - active: false - } + search: false, + menu: false, + modal: false }; var get = function() { @@ -114,22 +107,22 @@ var state = (function() { }; }; - var change = function(override) { - var options = { - path: null, - value: null - }; - if (override) { - options = helper.applyOptions(options, override); - }; - if (options.path != null) { - helper.setObject({ - path: options.path, - object: current, - newValue: options.value - }); - }; - }; + // var change = function(override) { + // var options = { + // path: null, + // value: null + // }; + // if (override) { + // options = helper.applyOptions(options, override); + // }; + // if (options.path != null) { + // helper.setObject({ + // path: options.path, + // object: current, + // newValue: options.value + // }); + // }; + // }; var init = function() { if (data.load()) { @@ -139,8 +132,7 @@ var state = (function() { return { init: init, - get: get, - change: change + get: get }; })(); diff --git a/js/theme.js b/js/theme.js index 10686bbc..dd984c81 100644 --- a/js/theme.js +++ b/js/theme.js @@ -54,9 +54,10 @@ var theme = (function() { s: (hsl.s / 100), l: (hsl.l / 100) }); - state.change({ + helper.setObject({ + object: state.get(), path: "layout.theme.current", - value: randomColor + newValue: randomColor }); }; }; diff --git a/js/update.js b/js/update.js index 0a079b1e..188e7cda 100644 --- a/js/update.js +++ b/js/update.js @@ -11,9 +11,10 @@ var update = (function() { }; var _update_200 = function(data) { - state.change({ + helper.setObject({ + object: state.get(), path: "layout.theme", - value: data.theme + newValue: data.theme }); data = { state: state.get(), @@ -71,12 +72,64 @@ var update = (function() { return data; }; + var _update_270 = function(data) { + // update date character length + data.state.header.date.character = { + length: data.state.header.date.characterLength + }; + // change editAdd active to show + data.state.header.editAdd.show = data.state.header.editAdd.active; + delete data.state.header.editAdd.active; + // change editAdd active to show + data.state.header.accent.show = data.state.header.accent.active; + delete data.state.header.accent.active; + // move alignment into header + data.state.header.alignment = { + horizontal: data.state.layout.alignment.horizontal, + vertical: data.state.layout.alignment.vertical + }; + delete data.state.layout.alignment; + // change header search + data.state.header.search.show = data.state.header.search.active; + delete data.state.header.search.active; + // move searching + data.state.search = { + active: false + }; + delete data.state.header.search.searching; + // change links to bookmarks + data.state.bookmarks = data.state.link; + delete data.state.link; + // change bookmarks show + data.state.bookmarks.show.link = data.state.bookmarks.show.active; + delete data.state.bookmarks.show.active; + // move edit + data.state.bookmarks.edit = false; + delete data.state.edit; + // change layout width + data.state.layout.width = data.state.layout.container; + delete data.state.layout.container; + // change background active + data.state.background.image.show = data.state.background.image.active; + delete data.state.background.image.active; + // change background accent + data.state.background.image.accent = data.state.background.image.accentOpacity; + delete data.state.background.image.accentOpacity; + // change menu active + data.state.menu.show = data.state.menu.active; + delete data.state.menu.active; + delete data.state.menu.open; + // update version + data.version = 2.70; + return data; + }; + // var _update_300 = function(data) { // data.version = 3.00; // return data; // }; - function render(data) { + function run(data) { if (!("version" in data)) { console.log("\trunning update", 1.00); data = _update_100(data); @@ -101,6 +154,10 @@ var update = (function() { console.log("\trunning update", 2.50); data = _update_250(data); }; + if (data.version < 2.70) { + console.log("\trunning update", 2.70); + data = _update_270(data); + }; // if (data.version < 3.00) { // console.log("\t# running update", 3.00); // data = _update_300(data); @@ -110,7 +167,7 @@ var update = (function() { // exposed methods return { - render: render + run: run }; })(); diff --git a/js/version.js b/js/version.js index 8b42bdf1..c382d18f 100644 --- a/js/version.js +++ b/js/version.js @@ -1,7 +1,7 @@ var version = (function() { // version is normally bumped when the state needs changing or any new functionality is added - var current = "2.6.0"; + var current = "2.7.0"; var get = function() { var number = current.split(".");