extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-08-18 17:49:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve state and control binding

Browse Source
This commit is contained in:
Kombie
2019-02-03 13:51:54 +00:00
committed by GitHub
parent 1aa93166c5
commit 6a87114499
22 changed files with 1068 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/base.css
View File

@@ -54,13 +54,13 @@
--breakpoint-xxl: 1600px; --breakpoint-xxl: 1600px;
} }
:root.is-link-block { :root.is-bookmarks-style-block {
--link-height: 7em; --link-height: 7em;
--url-height: 20%; --url-height: 20%;
--edit-height: 30%; --edit-height: 30%;
} }
:root.is-link-list { :root.is-bookmarks-style-list {
--link-height: 4em; --link-height: 4em;
--url-height: 30%; --url-height: 30%;
--edit-height: 50%; --edit-height: 50%;
@@ -71,7 +71,7 @@
--root-font-size: 16px; --root-font-size: 16px;
} }
:root.is-link-block { :root.is-bookmarks-style-block {
--link-height: 9em; --link-height: 9em;
} }
} }
@@ -96,19 +96,19 @@ body {
height: 100vh; height: 100vh;
} }
.is-alignment-vertical-top body { .is-header-alignment-vertical-top body {
justify-content: flex-start; justify-content: flex-start;
} }
.is-alignment-vertical-center body { .is-header-alignment-vertical-center body {
justify-content: center; justify-content: center;
} }
.is-alignment-vertical-bottom body { .is-header-alignment-vertical-bottom body {
justify-content: flex-end; justify-content: flex-end;
} }
.is-link body { .is-bookmarks-show-link body {
display: inherit; display: inherit;
height: inherit; height: inherit;
} }

18
css/container.css
View File

@@ -4,18 +4,18 @@
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
.is-layout-fluid .container, .is-layout-width-fluid .container,
.is-layout-wide .container, .is-layout-width-wide .container,
.is-layout-thin .container { .is-layout-width-thin .container {
width: calc(100vw - 4em); width: calc(100vw - 4em);
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.is-layout-wide .container { .is-layout-width-wide .container {
width: 80vw; width: 80vw;
} }
.is-layout-thin .container { .is-layout-width-thin .container {
width: 60vw; width: 60vw;
} }
} }
@@ -23,21 +23,21 @@
@media (min-width: 900px) {} @media (min-width: 900px) {}
@media (min-width: 1100px) { @media (min-width: 1100px) {
.is-layout-wide .container { .is-layout-width-wide .container {
width: 75vw; width: 75vw;
} }
.is-layout-thin .container { .is-layout-width-thin .container {
width: 40vw; width: 40vw;
} }
} }
@media (min-width: 1600px) { @media (min-width: 1600px) {
.is-layout-wide .container { .is-layout-width-wide .container {
width: 70vw; width: 70vw;
} }
.is-layout-thin .container { .is-layout-width-thin .container {
width: 30vw; width: 30vw;
} }
} }

28
css/header.css
View File

@@ -3,7 +3,7 @@
z-index: var(--z-index-header); z-index: var(--z-index-header);
} }
.is-link .header { .is-bookmarks-show-link .header {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -44,26 +44,26 @@
right: 0; right: 0;
} }
.is-alignment-horizontal-left .header-area { .is-header-alignment-horizontal-left .header-area {
justify-content: flex-start; justify-content: flex-start;
} }
.is-alignment-horizontal-center .header-area { .is-header-alignment-horizontal-center .header-area {
justify-content: center; justify-content: center;
} }
.is-alignment-horizontal-right .header-area { .is-header-alignment-horizontal-right .header-area {
justify-content: flex-end; justify-content: flex-end;
} }
.is-layout-thin.is-search-grow .header-search, .is-layout-width-thin.is-header-search-grow .header-search,
.is-search-grow .header-search { .is-header-search-grow .header-search {
flex-grow: 1; flex-grow: 1;
flex-basis: 100%; flex-basis: 100%;
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.is-search-grow .header-search { .is-header-search-grow .header-search {
flex-basis: initial; flex-basis: initial;
} }
} }
@@ -77,14 +77,16 @@
.header-clock, .header-clock,
.header-search, .header-search,
.header-edit-add, .header-edit-add,
.header-accent { .header-accent,
.header-menu {
display: none; display: none;
} }
.is-search .header-search, .is-header-search-show .header-search,
.is-date .header-date, .is-header-date-show .header-date,
.is-clock .header-clock, .is-header-clock-show .header-clock,
.is-search-edit-add .header-edit-add, .is-header-edit-add .header-edit-add,
.is-search-accent .header-accent { .is-header-accent .header-accent,
.is-menu .header-menu {
display: flex; display: flex;
} }

66
css/link.css
View File

@@ -6,11 +6,11 @@
display: none; display: none;
} }
.is-link .link { .is-bookmarks-show-link .link {
display: block; display: block;
} }
.is-scroll-past-end .link { .is-layout-scroll-past-end .link {
margin-bottom: 60vh; margin-bottom: 60vh;
} }
@@ -21,15 +21,15 @@
grid-gap: calc(var(--gutter) * 2); 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)); 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)); 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; grid-template-columns: 1fr;
} }
@@ -67,13 +67,13 @@
transition: all var(--animation-speed-fast) ease-in-out; 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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.is-link-list .link-panel-front { .is-bookmarks-style-list .link-panel-front {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -95,9 +95,9 @@
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4); box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
} }
.is-link-url .link-item:focus .link-panel-front, .is-bookmarks-show-url .link-item:focus .link-panel-front,
.is-link-url .link-item:focus-within .link-panel-front, .is-bookmarks-show-url .link-item:focus-within .link-panel-front,
.is-link-url .link-item:hover .link-panel-front { .is-bookmarks-show-url .link-item:hover .link-panel-front {
height: calc(100% - var(--url-height)); height: calc(100% - var(--url-height));
} }
@@ -159,13 +159,13 @@
.link-control-item:focus, .link-control-item:focus,
.link-control-item:hover { .link-control-item:hover {
color: rgb(var(--black)); color: rgb(var(--white));
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.link-control-item:active { .link-control-item:active {
color: rgb(var(--black)); color: rgb(var(--white));
background-color: rgba(255, 255, 255, 0.4); background-color: rgba(0, 0, 0, 0.3);
transition: none; transition: none;
} }
@@ -179,15 +179,15 @@
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
.is-link-url .link-url { .is-bookmarks-show-url .link-url {
display: flex; display: flex;
} }
.is-link-block .link-url { .is-bookmarks-style-block .link-url {
justify-content: center; justify-content: center;
} }
.is-link-list .link-url { .is-bookmarks-style-list .link-url {
justify-content: flex-start; justify-content: flex-start;
} }
@@ -216,14 +216,14 @@
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
.is-link-block .link-letter { .is-bookmarks-style-block .link-letter {
margin: 0; margin: 0;
font-size: 2em; font-size: 2em;
text-align: center; text-align: center;
max-width: 100%; max-width: 100%;
} }
.is-link-list .link-letter { .is-bookmarks-style-list .link-letter {
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
font-size: 1.5em; font-size: 1.5em;
flex-shrink: 0; flex-shrink: 0;
@@ -252,7 +252,7 @@
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
.is-link-name .link-name { .is-bookmarks-show-name .link-name {
display: block; display: block;
} }
@@ -275,37 +275,43 @@
color: rgb(var(--gray-16)); color: rgb(var(--gray-16));
} }
.is-link-block .link-name { .is-bookmarks-style-block .link-name {
text-align: center; text-align: center;
} }
.is-edit .link-panel-front, .is-bookmarks-edit .link-panel-front,
.is-edit .link-item:hover .link-panel-front, .is-bookmarks-edit .link-item:hover .link-panel-front,
.is-edit .link-item:focus .link-panel-front { .is-bookmarks-edit .link-item:focus .link-panel-front {
height: calc(100% - var(--edit-height)); height: calc(100% - var(--edit-height));
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4); 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); height: var(--edit-height);
} }
.is-edit .link-item:hover .link-url, .is-bookmarks-edit .link-item:hover .link-url,
.is-edit .link-item:focus .link-url { .is-bookmarks-edit .link-item:focus .link-url {
height: 0; height: 0;
} }
.is-edit .link-control-item { .is-bookmarks-edit .link-control-item {
pointer-events: all; pointer-events: all;
} }
.is-link-block .link-panel-front { .is-bookmarks-style-block .link-panel-front {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.is-link-list .link-panel-front { .is-bookmarks-style-list .link-panel-front {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;

20
css/menu.css
View File

@@ -6,7 +6,7 @@
right: 1em; right: 1em;
width: calc(100vw - 2em); width: calc(100vw - 2em);
max-height: calc(80vh - 2em); max-height: calc(80vh - 2em);
overflow-y: scroll; overflow-y: auto;
transform: translateY(calc(-100% - 2em)); transform: translateY(calc(-100% - 2em));
transition: transform var(--animation-speed-fast) ease-in-out; transition: transform var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-menu); z-index: var(--z-index-menu);
@@ -43,15 +43,6 @@
margin: 0; margin: 0;
} }
.menu-nav-item {
flex-grow: 1;
flex-basis: 0;
}
.menu-nav-item:not(:last-child) {
margin: 0;
}
.menu-content { .menu-content {
padding: 2em; padding: 2em;
} }
@@ -78,7 +69,7 @@
margin: 0; margin: 0;
padding-top: 0.75em; padding-top: 0.75em;
padding-bottom: 0.75em; padding-bottom: 0.75em;
border-radius: 0; border-radius: 0 var(--radius) 0 0;
} }
.menu-nav-button { .menu-nav-button {
@@ -87,6 +78,12 @@
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-radius: 0; 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-"], .menu-nav-button [class^="icon-"],
@@ -98,6 +95,7 @@
@media (min-width: 550px) { @media (min-width: 550px) {
.menu { .menu {
overflow-y: inherit;
max-height: inherit; max-height: inherit;
} }

11
css/shade.css
View File

@@ -1,13 +1,18 @@
.shade { .shade {
/* background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(var(--accent), 0.6) 100%); */ /* 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(--accent), 0.4);
background-color: rgba(var(--black), 0.5); /* background-color: rgba(var(--black), 0.5); */
/* box-shadow: 0 0 5em 0 rgba(var(--accent), 1) inset; */
position: fixed; position: fixed;
top: -1em; top: -1em;
left: -1em; left: -1em;
width: calc(100% + 2em); width: calc(100% + 2em);
height: calc(100% + 2em); height: calc(100% + 2em);
opacity: 0; 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); z-index: var(--z-index-shade);
} }
.is-background-image-show .shade {
background-color: rgba(var(--black), 0.5);
}

142
index.html
View File

@@ -69,14 +69,14 @@
</div> </div>
<div class="header-item header-accent"> <div class="header-item header-accent">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-theme" type="color" class="control-layout-theme" value="#00ff00" tabindex="1"> <input id="control-layout-theme-current" class="control-layout-theme-current" type="color" value="#00ff00" tabindex="1">
<label for="control-layout-theme" class="button input-label-button mb-0"> <label for="control-layout-theme-current" class="button input-label-button mb-0">
<span class="button-text">Accent</span> <span class="button-text">Accent</span>
</label> </label>
</div> </div>
</div> </div>
<div class="header-item header-menu"> <div class="header-item header-menu">
<button class="button mb-0 control-menu" tabindex="1"> <button id="control-menu" class="control-menu button mb-0" tabindex="1">
<span class="button-text"><span class="icon-settings"></span></span> <span class="button-text"><span class="icon-settings"></span></span>
</button> </button>
</div> </div>
@@ -94,25 +94,19 @@
<div class="menu-area"> <div class="menu-area">
<div class="menu-nav"> <div class="menu-nav">
<ul class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled"> <div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
<li class="menu-nav-item">
<button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button> <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
</li>
<li class="menu-nav-item">
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button> <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
</li>
<li class="menu-nav-item">
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button> <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
</li>
<li class="menu-nav-item">
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button> <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
</li> </div>
</ul>
<div class="menu-nav-area"> <div class="menu-nav-area">
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button> <button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
</div> </div>
</div> </div>
<div class="menu-content"> <div class="menu-content">
<div class="menu-content-area menu-content-area-header"> <div class="menu-content-area menu-content-area-header">
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Clock</h1> <h1 class="menu-header">Clock</h1>
@@ -164,19 +158,19 @@
<label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label> <label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" tabindex="1" name="control-header-date-character-length" value="short"> <input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" name="control-header-date-character-length" value="short" tabindex="1">
<label for="control-header-date-character-length-short"><span class="label-icon"></span>Short text</label> <label for="control-header-date-character-length-short"><span class="label-icon"></span>Short text</label>
</div> </div>
<div class="radio-wrap"> <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"> <input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" name="control-header-date-character-length" value="long" tabindex="1">
<label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label> <label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Search</h1> <h1 class="menu-header">Search</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-header-search-active" class="control-header-search-active" type="checkbox" tabindex="1"> <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
<label for="control-header-search-active"><span class="label-icon"></span>Show</label> <label for="control-header-search-show"><span class="label-icon"></span>Show</label>
</div> </div>
<div class="checkbox-wrap form-indent-1"> <div class="checkbox-wrap form-indent-1">
<input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1"> <input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
@@ -187,135 +181,137 @@
<label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label> <label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label>
<p class="input-helper small muted">May not work in Chrome.</p> <p class="input-helper small muted">May not work in Chrome.</p>
</div> </div>
<label class="control-header-search-engine-label form-indent-1 mb-1">Engine</label> <label class="control-header-search-engine-label form-indent-1">Engine</label>
<div class="radio-wrap form-indent-1"> <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"> <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="1">
<label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label> <label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap 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"> <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="1">
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label> <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap 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"> <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="1">
<label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label> <label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap 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"> <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
<label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label> <label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
</div> </div>
<div class="input-wrap form-indent-2"> <div class="input-wrap form-indent-2">
<label for="control-header-search-engine-custom-url">URL</label> <label for="control-header-search-engine-custom-url">URL</label>
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Buttons</h1> <h1 class="menu-header">Buttons</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-header-edit-add-active" class="control-header-edit-add-active" type="checkbox" tabindex="1"> <input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-edit-add-active"><span class="label-icon"></span>Show Edit/Add</label> <label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
</div> </div>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-header-accent-active" class="control-header-accent-active" type="checkbox" tabindex="1"> <input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
<label for="control-header-accent-active"><span class="label-icon"></span>Show Accent</label> <label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Horizontal Alignment</h1> <h1 class="menu-header">Horizontal Alignment</h1>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="left"> <input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
<label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label> <label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="center"> <input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
<label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label> <label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="right"> <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
<label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label> <label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Vertical Alignment</h1> <h1 class="menu-header">Vertical Alignment</h1>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="top"> <input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
<label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label> <label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="center"> <input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
<label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label> <label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="bottom"> <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
<label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label> <label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
<p class="input-helper small muted">Available when Bookmarks are not shown.</p> <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content-area menu-content-area-bookmarks is-hidden"> <div class="menu-content-area menu-content-area-bookmarks is-hidden">
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Bookmarks</h1> <h1 class="menu-header">Bookmarks</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-link-show-active" class="control-link-show-active" type="checkbox" tabindex="1"> <input id="control-bookmarks-show-link" class="control-bookmarks-show-link" type="checkbox" tabindex="1">
<label for="control-link-show-active"><span class="label-icon"></span>Show</label> <label for="control-bookmarks-show-link"><span class="label-icon"></span>Show</label>
</div> </div>
<div class="checkbox-wrap form-indent-1"> <div class="checkbox-wrap form-indent-1">
<input id="control-link-show-name" class="control-link-show-name" type="checkbox" tabindex="1"> <input id="control-bookmarks-show-name" class="control-bookmarks-show-name" type="checkbox" tabindex="1">
<label for="control-link-show-name"><span class="label-icon"></span>Names</label> <label for="control-bookmarks-show-name"><span class="label-icon"></span>Names</label>
</div> </div>
<div class="checkbox-wrap form-indent-1"> <div class="checkbox-wrap form-indent-1">
<input id="control-link-show-url" class="control-link-show-url" type="checkbox" tabindex="1"> <input id="control-bookmarks-show-url" class="control-bookmarks-show-url" type="checkbox" tabindex="1">
<label for="control-link-show-url"><span class="label-icon"></span>URL (on hover)</label> <label for="control-bookmarks-show-url"><span class="label-icon"></span>URL on hover</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Open</h1> <h1 class="menu-header">Open</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1"> <input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
<label for="control-link-new-tab"><span class="label-icon"></span>In a new tab</label> <label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Style</h1> <h1 class="menu-header">Style</h1>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-link-style-block" class="control-link-style-block" type="radio" tabindex="1" name="control-link-style" value="block"> <input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
<label for="control-link-style-block"><span class="label-icon"></span>Block</label> <label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-link-style-list" class="control-link-style-list" type="radio" tabindex="1" name="control-link-style" value="list"> <input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
<label for="control-link-style-list"><span class="label-icon"></span>List</label> <label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Sort</h1> <h1 class="menu-header">Sort</h1>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-link-sort-none" class="control-link-sort-none" type="radio" tabindex="1" name="control-link-sort" value="none"> <input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
<label for="control-link-sort-none"><span class="label-icon"></span>None (as added)</label> <label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-link-sort-name" class="control-link-sort-name" type="radio" tabindex="1" name="control-link-sort" value="name"> <input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
<label for="control-link-sort-name"><span class="label-icon"></span>Name</label> <label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-link-sort-letter" class="control-link-sort-letter" type="radio" tabindex="1" name="control-link-sort" value="letter"> <input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
<label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label> <label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content-area menu-content-area-layout is-hidden"> <div class="menu-content-area menu-content-area-layout is-hidden">
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Width</h1> <h1 class="menu-header">Width</h1>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-container-fluid" class="control-layout-container-fluid" type="radio" tabindex="1" name="control-layout-container" value="fluid"> <input id="control-layout-width-fluid" class="control-layout-width-fluid" type="radio" name="control-layout-width" value="fluid" tabindex="1">
<label for="control-layout-container-fluid"><span class="label-icon"></span>Fluid</label> <label for="control-layout-width-fluid"><span class="label-icon"></span>Fluid</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-container-wide" class="control-layout-container-wide" type="radio" tabindex="1" name="control-layout-container" value="wide"> <input id="control-layout-width-wide" class="control-layout-width-wide" type="radio" name="control-layout-width" value="wide" tabindex="1">
<label for="control-layout-container-wide"><span class="label-icon"></span>Wide</label> <label for="control-layout-width-wide"><span class="label-icon"></span>Wide</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input id="control-layout-container-thin" class="control-layout-container-thin" type="radio" tabindex="1" name="control-layout-container" value="thin"> <input id="control-layout-width-thin" class="control-layout-width-thin" type="radio" name="control-layout-width" value="thin" tabindex="1">
<label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label> <label for="control-layout-width-thin"><span class="label-icon"></span>Thin</label>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@@ -328,41 +324,42 @@
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Theme</h1> <h1 class="menu-header">Theme</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1"> <input id="control-layout-theme-random-active" class="control-layout-theme-random-active" type="checkbox" tabindex="1">
<label for="control-layout-theme-random"><span class="label-icon"></span>Random Accent colour on load/refresh</label> <label for="control-layout-theme-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap form-indent-1">
<input id="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" tabindex="1" name="control-layout-theme-style" value="any"> <input id="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" name="control-layout-theme-style" value="any" tabindex="1">
<label for="control-layout-theme-style-any"><span class="label-icon"></span>Any colour</label> <label for="control-layout-theme-style-any"><span class="label-icon"></span>Any colour</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap form-indent-1">
<input id="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" tabindex="1" name="control-layout-theme-style" value="light"> <input id="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" name="control-layout-theme-style" value="light" tabindex="1">
<label for="control-layout-theme-style-light"><span class="label-icon"></span>Light colours</label> <label for="control-layout-theme-style-light"><span class="label-icon"></span>Light colours</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap form-indent-1">
<input id="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" tabindex="1" name="control-layout-theme-style" value="dark"> <input id="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" name="control-layout-theme-style" value="dark" tabindex="1">
<label for="control-layout-theme-style-dark"><span class="label-icon"></span>Dark colours</label> <label for="control-layout-theme-style-dark"><span class="label-icon"></span>Dark colours</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap form-indent-1">
<input id="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" tabindex="1" name="control-layout-theme-style" value="pastel"> <input id="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" name="control-layout-theme-style" value="pastel" tabindex="1">
<label for="control-layout-theme-style-pastel"><span class="label-icon"></span>Pastel colours</label> <label for="control-layout-theme-style-pastel"><span class="label-icon"></span>Pastel colours</label>
</div> </div>
<div class="radio-wrap form-indent-1"> <div class="radio-wrap form-indent-1">
<input id="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" tabindex="1" name="control-layout-theme-style" value="saturated"> <input id="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" name="control-layout-theme-style" value="saturated" tabindex="1">
<label for="control-layout-theme-style-saturated"><span class="label-icon"></span>Saturated colours</label> <label for="control-layout-theme-style-saturated"><span class="label-icon"></span>Saturated colours</label>
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content-area menu-content-area-background is-hidden"> <div class="menu-content-area menu-content-area-background is-hidden">
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Image</h1> <h1 class="menu-header">Image</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
<input id="control-background-image-active" class="control-background-image-active" type="checkbox" tabindex="1"> <input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1">
<label for="control-background-image-active"><span class="label-icon"></span>Show</label> <label for="control-background-image-show"><span class="label-icon"></span>Show</label>
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap form-indent-1">
<label for="control-background-image-url">URL or path</label> <label for="control-background-image-url">URL or path</label>
<input id="control-background-image-url" type="text" class="control-background-image-url" placeholder="http:// or ../path/to/file" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">
<p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p> <p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p>
<p class="input-helper small muted">To use local files enter a relative file path, eg:</p> <p class="input-helper small muted">To use local files enter a relative file path, eg:</p>
<p class="input-helper small muted">../background/abstract.jpg</p> <p class="input-helper small muted">../background/abstract.jpg</p>
@@ -370,22 +367,23 @@
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap form-indent-1">
<label for="control-background-image-opacity">Opacity</label> <label for="control-background-image-opacity">Opacity</label>
<input id="control-background-image-opacity" type="range" min="0" max="100" value="0" class="control-background-image-opacity mb-0" placeholder="Path to file" tabindex="1"> <input id="control-background-image-opacity" class="control-background-image-opacity mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap form-indent-1">
<label for="control-background-image-grayscale">Grayscale</label> <label for="control-background-image-grayscale">Grayscale</label>
<input id="control-background-image-grayscale" type="range" min="0" max="100" value="0" class="control-background-image-grayscale mb-0" placeholder="Path to file" tabindex="1"> <input id="control-background-image-grayscale" class="control-background-image-grayscale mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap form-indent-1">
<label for="control-background-image-blur">Blur</label> <label for="control-background-image-blur">Blur</label>
<input id="control-background-image-blur" type="range" min="0" max="100" value="0" class="control-background-image-blur mb-0" placeholder="Path to file" tabindex="1"> <input id="control-background-image-blur" class="control-background-image-blur mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
</div> </div>
<div class="input-wrap form-indent-1"> <div class="input-wrap form-indent-1">
<label for="control-background-image-accent-opacity">Accent overlay</label> <label for="control-background-image-accent">Accent overlay</label>
<input id="control-background-image-accent-opacity" type="range" min="0" max="50" value="0" class="control-background-image-accent-opacity mb-0" placeholder="URL or path to file" tabindex="1"> <input id="control-background-image-accent" class="control-background-image-accent mb-0" type="range" min="0" max="50" value="0" placeholder="URL or path to file" tabindex="1">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

4
js/background.js
View File

@@ -4,13 +4,13 @@ var background = (function() {
var html = helper.e("html"); var html = helper.e("html");
var background = helper.e(".background"); var background = helper.e(".background");
var backgroundImage = helper.e(".background-image"); var backgroundImage = helper.e(".background-image");
if (state.get().background.image.active) { if (state.get().background.image.show) {
helper.removeClass(background, "is-hidden"); helper.removeClass(background, "is-hidden");
html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); 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-blur", state.get().background.image.blur + "px");
html.style.setProperty("--background-grayscale", state.get().background.image.grayscale); html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
html.style.setProperty("--background-opacity", state.get().background.image.opacity); 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) { 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))"); 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) { } else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) {

2
js/bookmarks.js
View File

@@ -154,7 +154,7 @@ var bookmarks = (function() {
return helper.sortObject(array, "letter"); return helper.sortObject(array, "letter");
} }
}; };
return action[state.get().link.sort](all); return action[state.get().bookmarks.sort](all);
}; };
if (timeStamp && typeof timeStamp == "number") { if (timeStamp && typeof timeStamp == "number") {
return _singleBookmark(timeStamp); return _singleBookmark(timeStamp);

1225
js/control.js
View File

File diff suppressed because it is too large Load Diff

4
js/data.js
View File

@@ -37,8 +37,8 @@ var data = (function() {
if (data) { if (data) {
console.log("data loaded"); console.log("data loaded");
if (!("version" in data) || data.version != version.get()) { if (!("version" in data) || data.version != version.get()) {
console.log("data version found less than current"); console.log("data version", data.version, "found less than current");
data = update.render(data); data = update.run(data);
set(saveName, JSON.stringify(data)); set(saveName, JSON.stringify(data));
} else { } else {
console.log("data version =", version.get()); console.log("data version =", version.get());

2
js/date.js
View File

@@ -25,7 +25,7 @@ var date = (function() {
var time = _makeTimeObject(); var time = _makeTimeObject();
time.day = helper.day(time.day); time.day = helper.day(time.day);
time.month = helper.month(time.month); 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.day = time.day.substring(0, 3);
time.month = time.month.substring(0, 3); time.month = time.month.substring(0, 3);
}; };

1
js/init.js
View File

@@ -12,6 +12,7 @@ state.init();
bookmarks.init(); bookmarks.init();
// close menu if left open // close menu if left open
// bind menu tabs
menu.init(); menu.init();
// render input color value // render input color value

31
js/keyboard.js
View File

@@ -4,16 +4,17 @@ var keyboard = (function() {
window.addEventListener("keydown", function(event) { window.addEventListener("keydown", function(event) {
// esc // esc
if (event.keyCode == 27) { if (event.keyCode == 27) {
if (state.get().menu.active) { if (state.get().menu) {
menu.close(); menu.close();
shade.destroy(); shade.destroy();
} else if (state.get().modal.active) { } else if (state.get().modal) {
modal.destroy(); modal.destroy();
shade.destroy(); shade.destroy();
} else if (state.get().edit.active) { } else if (state.get().bookmarks.edit) {
state.change({ helper.setObject({
object: state.get(),
path: "edit.active", path: "edit.active",
value: false newValue: false
}); });
control.update(); control.update();
control.render(); control.render();
@@ -22,7 +23,7 @@ var keyboard = (function() {
}; };
// ctrl+alt+a // ctrl+alt+a
if (event.ctrlKey && event.altKey && event.keyCode == 65) { if (event.ctrlKey && event.altKey && event.keyCode == 65) {
if (state.get().link.show.active) { if (state.get().bookmarks.show.link) {
menu.close(); menu.close();
link.add(); link.add();
}; };
@@ -35,16 +36,18 @@ var keyboard = (function() {
}; };
// ctrl+alt+e // ctrl+alt+e
if (event.ctrlKey && event.altKey && event.keyCode == 69) { if (event.ctrlKey && event.altKey && event.keyCode == 69) {
if (state.get().link.show.active) { if (state.get().bookmarks.show.link) {
if (state.get().edit.active) { if (state.get().bookmarks.edit) {
state.change({ helper.setObject({
path: "edit.active", object: state.get(),
value: false path: "bookmarks.edit",
newValue: false
}); });
} else { } else {
state.change({ helper.setObject({
path: "edit.active", object: state.get(),
value: true path: "bookmarks.edit",
newValue: true
}); });
}; };
control.update(); control.update();

35
js/link.js
View File

@@ -145,6 +145,15 @@ var link = (function() {
}, { }, {
key: "autocomplete", key: "autocomplete",
value: "off" value: "off"
}, {
key: "autocorrect",
value: "off"
}, {
key: "autocapitalize",
value: "off"
}, {
key: "spellcheck",
value: "false"
}] }]
}); });
var nameLabel = helper.makeNode({ var nameLabel = helper.makeNode({
@@ -175,6 +184,15 @@ var link = (function() {
}, { }, {
key: "autocomplete", key: "autocomplete",
value: "off" value: "off"
}, {
key: "autocorrect",
value: "off"
}, {
key: "autocapitalize",
value: "off"
}, {
key: "spellcheck",
value: "false"
}] }]
}); });
var urlLabel = helper.makeNode({ var urlLabel = helper.makeNode({
@@ -205,6 +223,15 @@ var link = (function() {
}, { }, {
key: "autocomplete", key: "autocomplete",
value: "off" value: "off"
}, {
key: "autocorrect",
value: "off"
}, {
key: "autocapitalize",
value: "off"
}, {
key: "spellcheck",
value: "false"
}] }]
}); });
fieldset.appendChild(letterLabel); fieldset.appendChild(letterLabel);
@@ -238,7 +265,7 @@ var link = (function() {
value: 1 value: 1
}] }]
}; };
if (state.get().link.newTab) { if (state.get().bookmarks.newTab) {
linkOptions.attr.push({ linkOptions.attr.push({
key: "target", key: "target",
value: "_blank" value: "_blank"
@@ -393,7 +420,7 @@ var link = (function() {
var render = function() { var render = function() {
var linkArea = helper.e(".link-area"); var linkArea = helper.e(".link-area");
var bookmarksToRender = false; var bookmarksToRender = false;
if (state.get().header.search.searching) { if (state.get().search) {
bookmarksToRender = search.get(); bookmarksToRender = search.get();
} else { } else {
bookmarksToRender = bookmarks.get(); bookmarksToRender = bookmarks.get();
@@ -416,7 +443,7 @@ var link = (function() {
} }
}; };
// if searching // if searching
if (state.get().header.search.searching) { if (state.get().search) {
// if bookmarks exist to be searched // if bookmarks exist to be searched
if (bookmarksToRender.total > 0) { if (bookmarksToRender.total > 0) {
// if matching bookmarks found // if matching bookmarks found
@@ -440,7 +467,7 @@ var link = (function() {
var tabIndex = function() { var tabIndex = function() {
var allLinkControlItem = helper.eA(".link-control-item"); var allLinkControlItem = helper.eA(".link-control-item");
if (state.get().edit.active) { if (state.get().bookmarks.edit) {
allLinkControlItem.forEach(function(arrayItem, index) { allLinkControlItem.forEach(function(arrayItem, index) {
arrayItem.tabIndex = 1; arrayItem.tabIndex = 1;
}); });

12
js/menu.js
View File

@@ -35,29 +35,29 @@ var menu = (function() {
}; };
var close = function() { var close = function() {
state.get().menu.active = false; state.get().menu = false;
render(); render();
}; };
var open = function() { var open = function() {
_scrollToTop(helper.e(".menu-content")); _scrollToTop(helper.e(".menu-content"));
state.get().menu.active = true; state.get().menu = true;
render(); render();
}; };
var toggle = function() { var toggle = function() {
if (state.get().menu.active) { if (state.get().menu) {
state.get().menu.active = false; state.get().menu = false;
} else { } else {
_scrollToTop(helper.e(".menu-content")); _scrollToTop(helper.e(".menu-content"));
state.get().menu.active = true; state.get().menu = true;
}; };
render(); render();
}; };
var render = function() { var render = function() {
var html = helper.e("html"); var html = helper.e("html");
if (state.get().menu.active) { if (state.get().menu) {
helper.addClass(html, "is-menu-open"); helper.addClass(html, "is-menu-open");
helper.e(".menu").focus(); helper.e(".menu").focus();
shade.render({ shade.render({

10
js/modal.js
View File

@@ -25,9 +25,10 @@ var modal = (function() {
}; };
var makeModal = function() { var makeModal = function() {
var body = helper.e("body"); var body = helper.e("body");
state.change({ helper.setObject({
object: state.get(),
path: "modal.active", path: "modal.active",
value: true newValue: true
}); });
var modalWrapper = document.createElement("div"); var modalWrapper = document.createElement("div");
modalWrapper.setAttribute("class", "modal-wrapper"); modalWrapper.setAttribute("class", "modal-wrapper");
@@ -47,9 +48,10 @@ var modal = (function() {
} else { } else {
modal.remove(); modal.remove();
}; };
state.change({ helper.setObject({
object: state.get(),
path: "modal.active", path: "modal.active",
value: false newValue: false
}); });
}; };
var modalBody = document.createElement("div"); var modalBody = document.createElement("div");

22
js/search.js
View File

@@ -18,22 +18,24 @@ var search = (function() {
var _toggle = function(input) { var _toggle = function(input) {
if (input.value != "") { if (input.value != "") {
state.change({ helper.setObject({
path: "header.search.searching", object: state.get(),
value: true path: "search",
}) newValue: true
});
} else { } else {
state.change({ helper.setObject({
path: "header.search.searching", object: state.get(),
value: false path: "search",
}) newValue: false
});
}; };
}; };
var _searchClear = function() { var _searchClear = function() {
var searchInput = helper.e(".search-input"); var searchInput = helper.e(".search-input");
var searchClear = helper.e(".search-clear"); var searchClear = helper.e(".search-clear");
if (state.get().header.search.searching) { if (state.get().search) {
searchClear.removeAttribute("disabled"); searchClear.removeAttribute("disabled");
} else { } else {
searchClear.setAttribute("disabled", ""); searchClear.setAttribute("disabled", "");
@@ -42,7 +44,7 @@ var search = (function() {
var get = function() { var get = function() {
var searchInput = helper.e(".search-input"); var searchInput = helper.e(".search-input");
if (state.get().header.search.searching) { if (state.get().search) {
var searchedBookmarks = { var searchedBookmarks = {
total: 0, total: 0,
matching: [] matching: []

122
js/state.js
View File

@@ -2,35 +2,30 @@ var state = (function() {
var current = { var current = {
header: { header: {
date: {
characterLength: "short",
show: {
date: true,
day: false,
month: true,
year: false,
separator: true
}
},
clock: { clock: {
hour24: true, hour24: true,
show: { show: {
seconds: true,
minutes: true,
hours: true, hours: true,
minutes: true,
seconds: true,
separator: true, separator: true,
meridiem: true meridiem: true
} }
}, },
editAdd: { date: {
active: true, show: {
day: false,
date: true,
month: true,
year: false,
separator: true
}, },
accent: { character: {
active: true, length: "short"
}
}, },
search: { search: {
searching: false, show: true,
active: true,
grow: true, grow: true,
focus: false, focus: false,
engine: { 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: { alignment: {
horizontal: "left", horizontal: "left",
vertical: "top" 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, scrollPastEnd: true,
theme: { theme: {
current: { current: {
@@ -81,27 +80,21 @@ var state = (function() {
active: false, active: false,
style: "any" style: "any"
} }
}, }
}, },
background: { background: {
image: { image: {
active: false, show: false,
url: "../background/gray-steps.jpg", url: "../background/gray-steps.jpg",
blur: 0, blur: 0,
opacity: 1, opacity: 1,
grayscale: 0, grayscale: 0,
accentOpacity: 0 accent: 0
} }
}, },
edit: { search: false,
active: false menu: false,
}, modal: false
menu: {
open: false
},
modal: {
active: false
}
}; };
var get = function() { var get = function() {
@@ -114,22 +107,22 @@ var state = (function() {
}; };
}; };
var change = function(override) { // var change = function(override) {
var options = { // var options = {
path: null, // path: null,
value: null // value: null
}; // };
if (override) { // if (override) {
options = helper.applyOptions(options, override); // options = helper.applyOptions(options, override);
}; // };
if (options.path != null) { // if (options.path != null) {
helper.setObject({ // helper.setObject({
path: options.path, // path: options.path,
object: current, // object: current,
newValue: options.value // newValue: options.value
}); // });
}; // };
}; // };
var init = function() { var init = function() {
if (data.load()) { if (data.load()) {
@@ -139,8 +132,7 @@ var state = (function() {
return { return {
init: init, init: init,
get: get, get: get
change: change
}; };
})(); })();

5
js/theme.js
View File

@@ -54,9 +54,10 @@ var theme = (function() {
s: (hsl.s / 100), s: (hsl.s / 100),
l: (hsl.l / 100) l: (hsl.l / 100)
}); });
state.change({ helper.setObject({
object: state.get(),
path: "layout.theme.current", path: "layout.theme.current",
value: randomColor newValue: randomColor
}); });
}; };
}; };

65
js/update.js
View File

@@ -11,9 +11,10 @@ var update = (function() {
}; };
var _update_200 = function(data) { var _update_200 = function(data) {
state.change({ helper.setObject({
object: state.get(),
path: "layout.theme", path: "layout.theme",
value: data.theme newValue: data.theme
}); });
data = { data = {
state: state.get(), state: state.get(),
@@ -71,12 +72,64 @@ var update = (function() {
return data; 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) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
// }; // };
function render(data) { function run(data) {
if (!("version" in data)) { if (!("version" in data)) {
console.log("\trunning update", 1.00); console.log("\trunning update", 1.00);
data = _update_100(data); data = _update_100(data);
@@ -101,6 +154,10 @@ var update = (function() {
console.log("\trunning update", 2.50); console.log("\trunning update", 2.50);
data = _update_250(data); data = _update_250(data);
}; };
if (data.version < 2.70) {
console.log("\trunning update", 2.70);
data = _update_270(data);
};
// if (data.version < 3.00) { // if (data.version < 3.00) {
// console.log("\t# running update", 3.00); // console.log("\t# running update", 3.00);
// data = _update_300(data); // data = _update_300(data);
@@ -110,7 +167,7 @@ var update = (function() {
// exposed methods // exposed methods
return { return {
render: render run: run
}; };
})(); })();

2
js/version.js
View File

@@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added // version is normally bumped when the state needs changing or any new functionality is added
var current = "2.6.0"; var current = "2.7.0";
var get = function() { var get = function() {
var number = current.split("."); var number = current.split(".");