extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-23 08:33:38 +01: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 1068 additions and 785 deletions
Show Stats 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;
}
: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;
}

18
css/container.css
View File

@ -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;
}
}

28
css/header.css
View File

@ -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;
}

66
css/link.css
View File

@ -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;

20
css/menu.css
View File

@ -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;
}

11
css/shade.css
View File

@ -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);
}

150
index.html
View File

@ -69,14 +69,14 @@
</div>
<div class="header-item header-accent">
<div class="input-wrap">
<input id="control-layout-theme" type="color" class="control-layout-theme" value="#00ff00" tabindex="1">
<label for="control-layout-theme" class="button input-label-button mb-0">
<input id="control-layout-theme-current" class="control-layout-theme-current" type="color" value="#00ff00" tabindex="1">
<label for="control-layout-theme-current" class="button input-label-button mb-0">
<span class="button-text">Accent</span>
</label>
</div>
</div>
<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>
</button>
</div>
@ -94,25 +94,19 @@
<div class="menu-area">
<div class="menu-nav">
<ul 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>
</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>
</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>
</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>
</li>
</ul>
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
<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" 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-layout" tabindex="1">Layout</button>
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
</div>
<div class="menu-nav-area">
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
</div>
</div>
<div class="menu-content">
<div class="menu-content-area menu-content-area-header">
<div class="menu-item">
<h1 class="menu-header">Clock</h1>
@ -164,19 +158,19 @@
<label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label>
</div>
<div class="radio-wrap">
<input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" tabindex="1" name="control-header-date-character-length" value="short">
<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>
</div>
<div class="radio-wrap">
<input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" tabindex="1" name="control-header-date-character-length" value="long">
<input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" name="control-header-date-character-length" value="long" tabindex="1">
<label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Search</h1>
<div class="checkbox-wrap">
<input id="control-header-search-active" class="control-header-search-active" type="checkbox" tabindex="1">
<label for="control-header-search-active"><span class="label-icon"></span>Show</label>
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
<label for="control-header-search-show"><span class="label-icon"></span>Show</label>
</div>
<div class="checkbox-wrap form-indent-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>
<p class="input-helper small muted">May not work in Chrome.</p>
</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">
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<div class="input-wrap form-indent-2">
<label for="control-header-search-engine-custom-url">URL</label>
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off" 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 class="menu-item">
<h1 class="menu-header">Buttons</h1>
<div class="checkbox-wrap">
<input id="control-header-edit-add-active" class="control-header-edit-add-active" type="checkbox" tabindex="1">
<label for="control-header-edit-add-active"><span class="label-icon"></span>Show Edit/Add</label>
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
</div>
<div class="checkbox-wrap">
<input id="control-header-accent-active" class="control-header-accent-active" type="checkbox" tabindex="1">
<label for="control-header-accent-active"><span class="label-icon"></span>Show Accent</label>
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
<label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Horizontal Alignment</h1>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Vertical Alignment</h1>
<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>
</div>
<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>
</div>
<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>
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
<div class="menu-item">
<h1 class="menu-header">Bookmarks</h1>
<div class="checkbox-wrap">
<input id="control-link-show-active" class="control-link-show-active" type="checkbox" tabindex="1">
<label for="control-link-show-active"><span class="label-icon"></span>Show</label>
<input id="control-bookmarks-show-link" class="control-bookmarks-show-link" type="checkbox" tabindex="1">
<label for="control-bookmarks-show-link"><span class="label-icon"></span>Show</label>
</div>
<div class="checkbox-wrap form-indent-1">
<input id="control-link-show-name" class="control-link-show-name" type="checkbox" tabindex="1">
<label for="control-link-show-name"><span class="label-icon"></span>Names</label>
<input id="control-bookmarks-show-name" class="control-bookmarks-show-name" type="checkbox" tabindex="1">
<label for="control-bookmarks-show-name"><span class="label-icon"></span>Names</label>
</div>
<div class="checkbox-wrap form-indent-1">
<input id="control-link-show-url" class="control-link-show-url" type="checkbox" tabindex="1">
<label for="control-link-show-url"><span class="label-icon"></span>URL (on hover)</label>
<input id="control-bookmarks-show-url" class="control-bookmarks-show-url" type="checkbox" tabindex="1">
<label for="control-bookmarks-show-url"><span class="label-icon"></span>URL on hover</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Open</h1>
<div class="checkbox-wrap">
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
<label for="control-link-new-tab"><span class="label-icon"></span>In a new tab</label>
<input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
<label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Style</h1>
<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">
<label for="control-link-style-block"><span class="label-icon"></span>Block</label>
<input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
<label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
</div>
<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">
<label for="control-link-style-list"><span class="label-icon"></span>List</label>
<input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
<label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Sort</h1>
<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">
<label for="control-link-sort-none"><span class="label-icon"></span>None (as added)</label>
<input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
<label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
</div>
<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">
<label for="control-link-sort-name"><span class="label-icon"></span>Name</label>
<input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
<label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
</div>
<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">
<label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label>
<input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
<label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-layout is-hidden">
<div class="menu-item">
<h1 class="menu-header">Width</h1>
<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">
<label for="control-layout-container-fluid"><span class="label-icon"></span>Fluid</label>
<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-width-fluid"><span class="label-icon"></span>Fluid</label>
</div>
<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">
<label for="control-layout-container-wide"><span class="label-icon"></span>Wide</label>
<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-width-wide"><span class="label-icon"></span>Wide</label>
</div>
<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">
<label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label>
<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-width-thin"><span class="label-icon"></span>Thin</label>
</div>
</div>
<div class="menu-item">
@ -328,41 +324,42 @@
<div class="menu-item">
<h1 class="menu-header">Theme</h1>
<div class="checkbox-wrap">
<input id="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
<label for="control-layout-theme-random"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
<input id="control-layout-theme-random-active" class="control-layout-theme-random-active" type="checkbox" tabindex="1">
<label for="control-layout-theme-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-background is-hidden">
<div class="menu-item">
<h1 class="menu-header">Image</h1>
<div class="checkbox-wrap">
<input id="control-background-image-active" class="control-background-image-active" type="checkbox" tabindex="1">
<label for="control-background-image-active"><span class="label-icon"></span>Show</label>
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1">
<label for="control-background-image-show"><span class="label-icon"></span>Show</label>
</div>
<div class="input-wrap form-indent-1">
<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">To use local files enter a relative file path, eg:</p>
<p class="input-helper small muted">../background/abstract.jpg</p>
@ -370,22 +367,23 @@
</div>
<div class="input-wrap form-indent-1">
<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 class="input-wrap form-indent-1">
<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 class="input-wrap form-indent-1">
<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 class="input-wrap form-indent-1">
<label for="control-background-image-accent-opacity">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">
<label for="control-background-image-accent">Accent overlay</label>
<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>

4
js/background.js
View File

@ -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) {

2
js/bookmarks.js
View File

@ -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);

1227
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) {
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());

2
js/date.js
View File

@ -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);
};

1
js/init.js
View File

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

31
js/keyboard.js
View File

@ -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();

35
js/link.js
View File

@ -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;
});

12
js/menu.js
View File

@ -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({

10
js/modal.js
View File

@ -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");

22
js/search.js
View File

@ -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: []

124
js/state.js
View File

@ -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
};
})();

5
js/theme.js
View File

@ -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
});
};
};

65
js/update.js
View File

@ -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
};
})();

2
js/version.js
View File

@ -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(".");