extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 20:41:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] [refactor] improve controls and add controls for layout padding and gutter size

Browse Source
This commit is contained in:
Kombie 2019-06-13 15:47:00 +01:00 committed by GitHub
parent 019d82f628
commit d69eead3f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 692 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/background.css
View File

@ -7,10 +7,16 @@
pointer-events: none; pointer-events: none;
z-index: var(--z-index-background); z-index: var(--z-index-background);
animation: appear var(--animation-speed-slow) 1; animation: appear var(--animation-speed-slow) 1;
display: none;
}
.is-background-image-show .background {
display: block;
} }
.background-image { .background-image {
background-image: var(--background-image); background-image: var(--background-image);
/* background-image: url(https://source.unsplash.com/random/1920x1080/?night); */
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -22,7 +28,8 @@
pointer-events: none; pointer-events: none;
display: block; display: block;
opacity: var(--background-opacity); opacity: var(--background-opacity);
/* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */ transform: scale(var(--background-scale));
filter: blur(var(--background-blur)) grayscale(var(--background-grayscale));
} }
.background-accent { .background-accent {

13
css/base.css
View File

@ -58,14 +58,8 @@
--header-shade-color: transparent; --header-shade-color: transparent;
--header-shade-opacity: none; --header-shade-opacity: none;
--header-search-width: 0%; --header-search-width: 0%;
--header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier)); --header-border-top: 0;
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier)); --header-border-bottom: 0;
--header-padding-top-multiplier: 4;
--header-padding-bottom-multiplier: 4;
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-top-multiplier));
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-bottom-multiplier));
--header-border-width-top-multiplier: 1;
--header-border-width-bottom-multiplier: 1;
--header-date-size: 1em; --header-date-size: 1em;
--header-clock-size: 1em; --header-clock-size: 1em;
--header-search-size: 1em; --header-search-size: 1em;
@ -80,9 +74,12 @@
--link-item-name-size: 0.9em; --link-item-name-size: 0.9em;
--background-image: none; --background-image: none;
--background-opacity: 1; --background-opacity: 1;
--background-scale: 1;
--background-accent-opacity: 0; --background-accent-opacity: 0;
--background-blur: 0; --background-blur: 0;
--layout-width: 80%; --layout-width: 80%;
--layout-padding-multiplier: 4;
--layout-gutter-multiplier: 4;
--animation-speed-fast: 0.2s; --animation-speed-fast: 0.2s;
--animation-speed-medium: 0.4s; --animation-speed-medium: 0.4s;
--animation-speed-slow: 0.6s; --animation-speed-slow: 0.6s;

1
css/clock.css
View File

@ -1,7 +1,6 @@
.clock { .clock {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));

1
css/date.css
View File

@ -1,7 +1,6 @@
.date { .date {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));

4
css/edge.css
View File

@ -1,5 +1,5 @@
.edge { .edge {
background-color: rgba(var(--theme-accent), 0.10); background-color: rgba(var(--theme-accent), 0.2);
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
@ -7,7 +7,7 @@
left: 0; left: 0;
opacity: 0; opacity: 0;
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--theme-accent), 0.25); box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
z-index: var(--z-index-edge); z-index: var(--z-index-edge);
pointer-events: none; pointer-events: none;
transition: opacity var(--animation-speed-fast) ease-in-out; transition: opacity var(--animation-speed-fast) ease-in-out;

13
css/greeting.css
View File

@ -1,7 +1,6 @@
.greeting { .greeting {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
@ -13,6 +12,18 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.is-header-item-alignment-horizontal-left .greeting {
justify-content: flex-start;
}
.is-header-item-alignment-horizontal-center .greeting {
justify-content: center;
}
.is-header-item-alignment-horizontal-right .greeting {
justify-content: flex-end;
}
.greeting-item { .greeting-item {
font-size: 1.5em; font-size: 1.5em;
max-width: 100%; max-width: 100%;

69
css/header.css
View File

@ -23,8 +23,7 @@
left: 0; left: 0;
} }
.header-shade, .header-shade {
.header-border {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -35,47 +34,35 @@
pointer-events: none; pointer-events: none;
} }
.is-header-shade-style-scroll .header-shade { .is-header-radius .header-shade {
transition: background-color var(--animation-speed-slow) ease-in-out; border-radius: calc(var(--theme-radius) * 4);
animation: none;
} }
.is-header-shade-show .header-shade { .is-header-shade-show .header-shade {
background-color: rgb(var(--header-shade-color)); background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
opacity: var(--header-shade-opacity);
}
.is-header-border-top-show .header-border {
border-top: var(--header-border-width-top) solid rgb(var(--theme-accent));
}
.is-header-border-bottom-show .header-border {
border-bottom: var(--header-border-width-bottom) solid rgb(var(--theme-accent));
} }
.header-area { .header-area {
padding-top: calc(var(--gutter) * 3 + var(--header-padding-top)); padding: calc(var(--gutter) * var(--layout-padding-multiplier));
padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
padding-left: calc(var(--gutter) * 3);
padding-right: calc(var(--gutter) * 3);
position: relative; position: relative;
width: var(--header-area-width); width: var(--header-area-width);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
} }
.is-header-item-alignment-horizontal-left .header-area { .is-header-border-top .header-area {
justify-content: flex-start; border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
} }
.is-header-item-alignment-horizontal-center .header-area { .is-header-border-bottom .header-area {
justify-content: center; border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
} }
.is-header-item-alignment-horizontal-right .header-area { .is-header-radius .header-area {
justify-content: flex-end; border-radius: calc(var(--theme-radius) * 4);
}
.is-header-shade-style-scroll .header-area {
transition: background-color var(--animation-speed-slow) ease-in-out;
animation: none;
} }
.is-header-search-text-align-left .header-search-input { .is-header-search-text-align-left .header-search-input {
@ -100,13 +87,35 @@
right: 0; right: 0;
} }
.header-item-grid {
margin: calc(-1 * calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2)));
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
pointer-events: none;
}
.is-header-item-alignment-horizontal-left .header-item-grid {
justify-content: flex-start;
}
.is-header-item-alignment-horizontal-center .header-item-grid {
justify-content: center;
}
.is-header-item-alignment-horizontal-right .header-item-grid {
justify-content: flex-end;
}
.header-item { .header-item {
margin: var(--gutter); margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2));
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
position: relative; position: relative;
pointer-events: all;
} }
.is-header-search-style-auto .header-search { .is-header-search-style-auto .header-search {

24
css/link.css
View File

@ -22,21 +22,21 @@
} }
.link-area { .link-area {
padding-bottom: calc(var(--gutter) * 4); padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier));
padding-left: calc(var(--gutter) * 4); padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
padding-right: calc(var(--gutter) * 4); padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
font-size: calc(var(--link-item-size) * 1); font-size: calc(var(--link-item-size) * 1);
position: relative; position: relative;
width: var(--link-area-width); width: var(--link-area-width);
display: grid; display: grid;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier)); grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier));
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
} }
.is-header-border-bottom-show .link-area, .is-header-border-bottom .link-area,
.is-header-shade-style-always .link-area { .is-header-shade-style-always .link-area {
padding-top: calc(var(--gutter) * 4); padding-top: calc(var(--gutter) * var(--layout-padding-multiplier));
} }
.link-item { .link-item {
@ -52,7 +52,7 @@
.link-item:focus-within, .link-item:focus-within,
.link-item:focus, .link-item:focus,
.link-item:hover { .link-item:hover {
transform: scale(1.06); transform: scale(1.05);
z-index: 2; z-index: 2;
} }
@ -178,18 +178,14 @@
height: calc(100% - var(--line-width)); height: calc(100% - var(--line-width));
} }
.is-link-edit .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back, .is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back, .is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back { .is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back {
top: calc(var(--line-width) * 2); top: 0;
height: 100%;
} }
/* .is-link-item-line-show.is-link-url-show .link-item:focus .link-panel-back,
.is-link-item-line-show.is-link-url-show .link-item:focus-within .link-panel-back,
.is-link-item-line-show.is-link-url-show .link-item:hover .link-panel-back {
top: var(--line-width);
} */
.link-control { .link-control {
margin: 0; margin: 0;
padding: 0; padding: 0;

20
css/menu.css
View File

@ -54,6 +54,10 @@
margin: 0; margin: 0;
} }
.menu-content {
padding: 0 3em;
}
.menu-content-area { .menu-content-area {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -65,11 +69,11 @@
} }
.menu-item:not(:last-child) { .menu-item:not(:last-child) {
border-bottom: calc(var(--line-width) * 2) solid rgb(var(--gray-03)); border-bottom: 2px solid rgb(var(--gray-03));
} }
.menu-item-header { .menu-item-header {
padding: 2em; padding: 2em 0;
} }
.menu-item-header-text { .menu-item-header-text {
@ -77,7 +81,7 @@
} }
.menu-item-form { .menu-item-form {
padding: 0 2em 2em 4em; padding: 0 2em 2em 3em;
} }
.menu-close { .menu-close {
@ -121,7 +125,7 @@
@media (min-width: 700px) { @media (min-width: 700px) {
.menu { .menu {
width: 60vw; width: 70vw;
height: 100%; height: 100%;
overflow-y: inherit; overflow-y: inherit;
max-height: inherit; max-height: inherit;
@ -149,21 +153,21 @@
} }
.menu-item-header { .menu-item-header {
padding: 2em 0 2em 2em; padding: 2em 0;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 3; z-index: 3;
} }
.menu-item-form { .menu-item-form {
padding: 2em 2em 2em 0; padding: 2em 0;
z-index: 2; z-index: 2;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.menu { .menu {
width: 60vw; width: 70vw;
} }
.menu-item { .menu-item {
@ -173,6 +177,6 @@
@media (min-width: 1600px) { @media (min-width: 1600px) {
.menu { .menu {
width: 40vw; width: 50vw;
} }
} }

13
css/transitional.css
View File

@ -1,7 +1,6 @@
.transitional { .transitional {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--gray-14)); color: rgb(var(--gray-14));
@ -20,3 +19,15 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-header-item-alignment-horizontal-left .transitional {
text-align: left;
}
.is-header-item-alignment-horizontal-center .transitional {
text-align: center;
}
.is-header-item-alignment-horizontal-right .transitional {
text-align: right;
}

195
index.html
View File

@ -46,51 +46,52 @@
<header class="header"> <header class="header">
<div class="header-shade"></div> <div class="header-shade"></div>
<div class="header-border"></div>
<div class="header-area"> <div class="header-area">
<div class="header-item header-greeting"> <div class="header-item-grid">
<p class="greeting"></p> <div class="header-item header-greeting">
</div> <p class="greeting"></p>
<div class="header-item header-transitional"> </div>
<p class="transitional"></p> <div class="header-item header-transitional">
</div> <p class="transitional"></p>
<div class="header-item header-clock"> </div>
<p class="clock"></p> <div class="header-item header-clock">
</div> <p class="clock"></p>
<div class="header-item header-date"> </div>
<p class="date"></p> <div class="header-item header-date">
</div> <p class="date"></p>
<div class="header-item header-search"> </div>
<form class="search" action="" method="get"> <div class="header-item header-search">
<input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1"> <form class="search" action="" method="get">
<input type="submit" value="Search" class="is-hidden"> <input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
</form> <input type="submit" value="Search" class="is-hidden">
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled> </form>
<span class="icon-close"></span> <button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
</button> <span class="icon-close"></span>
</div>
<div class="header-item header-button header-edit-add">
<div class="form-group nested-button mb-0">
<div class="input-wrap input-button input-hide py-0">
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
<label for="control-link-edit" class=" mb-0">Edit</label>
</div>
<button class="control-link-add button" tabindex="1">
<span class="button-text">Add</span>
</button> </button>
</div> </div>
</div> <div class="header-item header-button header-edit-add">
<div class="header-item header-button header-accent"> <div class="form-group nested-button mb-0">
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0"> <div class="input-wrap input-button input-hide py-0">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1"> <input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
<label for="control-theme-accent-current">Accent</label> <label for="control-link-edit" class=" mb-0">Edit</label>
</div>
<button class="control-link-add button" tabindex="1">
<span class="button-text">Add</span>
</button>
</div>
</div> </div>
</div> <div class="header-item header-button header-accent">
<div class="header-item header-button header-menu"> <div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<button id="control-menu" class="control-menu button mb-0" tabindex="1"> <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current">Accent</label>
</div>
</div>
<div class="header-item header-button header-menu">
<button 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>
</div>
</div> </div>
</header> </header>
@ -127,7 +128,7 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-layout-width">Width</label> <label for="control-layout-width">Width</label>
<input id="control-layout-width" class="control-layout-width" type="range" min="15" max="100" value="0" tabindex="1"> <input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="1">
</div> </div>
<hr> <hr>
<label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label> <label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label>
@ -161,6 +162,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Padding</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
<input id="control-layout-padding" class="control-layout-padding" type="range" min="0" max="40" value="0" tabindex="1">
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Gutter</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
<input id="control-layout-gutter" class="control-layout-gutter" type="range" min="0" max="40" value="0" tabindex="1">
</div>
</div>
</div>
<div class="menu-item"> <div class="menu-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Page</h1> <h1 class="menu-item-header-text">Page</h1>
@ -191,7 +214,7 @@
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p> <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-area-width-match button mb-0" type="button">Match Bookmarks Area Width</button> <button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button>
</div> </div>
<hr> <hr>
<label class="control-header-area-alignment-horizontal-label">Area Horizontal Alignment</label> <label class="control-header-area-alignment-horizontal-label">Area Horizontal Alignment</label>
@ -259,7 +282,7 @@
<input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="1"> <input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-greeting-size-default button mb-0" type="button">Default greeting size</button> <button class="control-header-greeting-size-default button mb-0" tabindex="1">Default greeting size</button>
</div> </div>
</div> </div>
</div> </div>
@ -290,7 +313,7 @@
<input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="1"> <input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-transitional-size-default button mb-0" type="button">Default transitional size</button> <button class="control-header-transitional-size-default button mb-0" tabindex="1">Default transitional size</button>
</div> </div>
</div> </div>
</div> </div>
@ -364,7 +387,7 @@
<input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="1"> <input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-clock-size-default button mb-0" type="button">Default clock size</button> <button class="control-header-clock-size-default button mb-0" tabindex="1">Default clock size</button>
</div> </div>
</div> </div>
</div> </div>
@ -499,7 +522,7 @@
<input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="1"> <input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-date-size-default button mb-0" type="button">Default date size</button> <button class="control-header-date-size-default button mb-0" tabindex="1">Default date size</button>
</div> </div>
</div> </div>
</div> </div>
@ -592,7 +615,7 @@
<p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p> <p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-search-size-default button mb-0" type="button">Default search size</button> <button class="control-header-search-size-default button mb-0" tabindex="1">Default search size</button>
</div> </div>
</div> </div>
</div> </div>
@ -617,23 +640,7 @@
<input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="1"> <input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-header-button-size-default button mb-0" type="button">Default button size</button> <button class="control-header-button-size-default button mb-0" tabindex="1">Default button size</button>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Padding</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-header-padding-top">Top padding</label>
<input id="control-header-padding-top" class="control-header-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
</div>
<hr>
<div class="input-wrap">
<label for="control-header-padding-bottom">Bottom padding</label>
<input id="control-header-padding-bottom" class="control-header-padding-bottom" type="range" min="0" max="50" value="0" tabindex="1">
</div> </div>
</div> </div>
</div> </div>
@ -643,25 +650,13 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-border-top-show" class="control-header-border-top-show" type="checkbox" value="always" tabindex="1"> <label for="control-header-border-top">Top</label>
<label for="control-header-border-top-show">Top border</label> <input id="control-header-border-top" class="control-header-border-top mb-0" type="range" min="0" max="60" value="0" tabindex="1">
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-header-border-top-width">Border width</label>
<input id="control-header-border-top-width" class="control-header-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
</div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-border-bottom-show" class="control-header-border-bottom-show" type="checkbox" value="always" tabindex="1"> <label for="control-header-border-bottom">Bottom</label>
<label for="control-header-border-bottom-show">Bottom border</label> <input id="control-header-border-bottom" class="control-header-border-bottom" type="range" min="0" max="60" value="0" tabindex="1">
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-header-border-bottom-width">Border width</label>
<input id="control-header-border-bottom-width" class="control-header-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -691,6 +686,11 @@
<label for="control-header-shade-opacity">Opacity</label> <label for="control-header-shade-opacity">Opacity</label>
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1"> <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
</div> </div>
<hr>
<div class="input-wrap">
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="1">
<label for="control-header-radius">Corner radius</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -708,7 +708,7 @@
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p> <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-area-width-match button mb-0" type="button">Match Header Area Width</button> <button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button>
</div> </div>
<hr> <hr>
<label class="control-link-area-alignment-horizontal-label">Horizontal Alignment</label> <label class="control-link-area-alignment-horizontal-label">Horizontal Alignment</label>
@ -743,7 +743,7 @@
<input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1"> <input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-size-default button mb-0" type="button">Default tile size</button> <button class="control-link-item-size-default button mb-0" tabindex="1">Default tile size</button>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -756,7 +756,7 @@
<input id="control-link-item-display-letter-size" class="control-link-item-display-letter-size" type="range" min="1" max="3000" value="0" tabindex="1"> <input id="control-link-item-display-letter-size" class="control-link-item-display-letter-size" type="range" min="1" max="3000" value="0" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-letter-size-default button mb-0" type="button">Default letter size</button> <button class="control-link-item-display-letter-size-default button mb-0" tabindex="1">Default letter size</button>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -764,20 +764,20 @@
<input id="control-link-item-display-icon-size" class="control-link-item-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="1"> <input id="control-link-item-display-icon-size" class="control-link-item-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-icon-size-default button mb-0" type="button">Default icon size</button> <button class="control-link-item-display-icon-size-default button mb-0" tabindex="1">Default icon size</button>
</div> </div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-name-show" class="control-link-item-name-show" type="checkbox" tabindex="1"> <input id="control-link-item-name-show" class="control-link-item-name-show" type="checkbox" tabindex="1">
<label for="control-link-item-name-show">Names</label> <label for="control-link-item-name-show">Name</label>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-name-size">Names size</label> <label for="control-link-item-name-size">Name size</label>
<input id="control-link-item-name-size" class="control-link-item-name-size" type="range" min="1" max="1500" value="0" tabindex="1"> <input id="control-link-item-name-size" class="control-link-item-name-size" type="range" min="1" max="1500" value="0" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-name-size-default button mb-0" type="button">Default icon size</button> <button class="control-link-item-name-size-default button mb-0" tabindex="1">Default icon size</button>
</div> </div>
</div> </div>
</div> </div>
@ -802,11 +802,6 @@
<label for="control-link-item-line-show">Tile line</label> <label for="control-link-item-line-show">Tile line</label>
</div> </div>
<hr> <hr>
<div class="input-wrap">
<label for="control-link-area-gap">Gap size</label>
<input id="control-link-area-gap" class="control-link-area-gap" type="range" min="0" max="20" value="0" tabindex="1">
</div>
<hr>
<label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label> <label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-horizontal-left" class="control-link-item-display-alignment-horizontal-left" type="radio" name="control-link-item-display-alignment-horizontal" value="left" tabindex="1"> <input id="control-link-item-display-alignment-horizontal-left" class="control-link-item-display-alignment-horizontal-left" type="radio" name="control-link-item-display-alignment-horizontal" value="left" tabindex="1">
@ -911,7 +906,7 @@
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1"> <input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-theme-radius-default button mb-0" type="button">Default radius size</button> <button class="control-theme-radius-default button mb-0" tabindex="1">Default radius size</button>
</div> </div>
</div> </div>
</div> </div>
@ -946,7 +941,7 @@
<label for="control-theme-accent-random-style-saturated">Saturated colours</label> <label for="control-theme-accent-random-style-saturated">Saturated colours</label>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-theme-accent-randomise button mb-0" type="button">Randomise now</button> <button class="control-theme-accent-randomise button mb-0" tabindex="1">Randomise now</button>
</div> </div>
</div> </div>
</div> </div>
@ -968,10 +963,12 @@
<div class="input-wrap"> <div class="input-wrap">
<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" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1"> <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">Use a URL or file path to an image. Local files use relative file paths, 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"><i>../background/abstract.jpg</i></p>
<p class="input-helper small muted">../background/abstract.jpg</p> <p class="input-helper small muted"><i>../background/gray-steps.jpg</i></p>
<p class="input-helper small muted">../background/gray-steps.jpg</p> <p class="input-helper small muted">Use Unsplash for random images, eg:</p>
<p class="input-helper small muted"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
<p class="input-helper small muted">Change parameters after <i>.../ramdom/</i> for more options. Loading times may vary when using Unsplash.</p>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -988,7 +985,11 @@
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-background-image-accent">Accent overlay</label> <label for="control-background-image-accent">Accent overlay</label>
<input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1"> <input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="90" value="0" tabindex="1">
</div>
<div class="input-wrap">
<label for="control-background-image-scale">Size</label>
<input id="control-background-image-scale" class="control-background-image-scale" type="range" min="100" max="300" value="0" tabindex="1">
</div> </div>
</div> </div>
</div> </div>

31
js/background.js
View File

@ -2,31 +2,12 @@ var background = (function() {
var render = function() { var render = function() {
var html = helper.e("html"); var html = helper.e("html");
var background = helper.e(".background"); html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")");
var backgroundImage = helper.e(".background-image"); html.style.setProperty("--background-blur", state.get().background.image.blur + "px");
if (state.get().background.image.show) { html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
helper.removeClass(background, "is-hidden"); html.style.setProperty("--background-opacity", state.get().background.image.opacity);
html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); html.style.setProperty("--background-scale", state.get().background.image.scale);
html.style.setProperty("--background-blur", state.get().background.image.blur + "px"); html.style.setProperty("--background-accent-opacity", state.get().background.image.accent);
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.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) {
backgroundImage.style.setProperty("filter", "blur(var(--background-blur))");
} else if (state.get().background.image.blur == 0 && state.get().background.image.grayscale > 0) {
backgroundImage.style.setProperty("filter", "grayscale(var(--background-grayscale))");
};
} else {
helper.addClass(background, "is-hidden");
html.style.setProperty("--background-image", "none");
html.style.setProperty("--background-blur", "none");
html.style.setProperty("--background-grayscale", "none");
html.style.setProperty("--background-opacity", "none");
html.style.setProperty("--background-accent-opacity", "none");
backgroundImage.style.setProperty("filter", "none");
};
}; };
var init = function() { var init = function() {

38
js/bookmarks.js
View File

@ -19,25 +19,6 @@ var bookmarks = (function() {
} }
}, },
timeStamp: 1546453101749 timeStamp: 1546453101749
}, {
display: "letter",
letter: "M",
icon: {
name: null,
prefix: null,
label: null
},
name: "Maps",
url: "https://www.google.co.uk/maps",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453103560
}, { }, {
display: "icon", display: "icon",
letter: "AS", letter: "AS",
@ -76,25 +57,6 @@ var bookmarks = (function() {
} }
}, },
timeStamp: 1546453104460 timeStamp: 1546453104460
}, {
display: "letter",
letter: "GOT",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/gameofthrones/",
url: "https://www.reddit.com/r/gameofthrones/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453105844
}, { }, {
display: "icon", display: "icon",
letter: "AZ", letter: "AZ",

574
js/control.js
View File

@ -72,7 +72,7 @@ var control = (function() {
}], }],
func: function() { func: function() {
render(); render();
layout.render(); layout.render.width();
} }
}, { }, {
element: helper.e(".control-layout-alignment-horizontal-left"), element: helper.e(".control-layout-alignment-horizontal-left"),
@ -170,6 +170,98 @@ var control = (function() {
func: function() { func: function() {
render(); render();
} }
}, {
element: helper.e(".control-layout-padding"),
path: "layout.padding",
type: "range",
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".main"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".main"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".main"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() {
layout.render.padding();
}
}, {
element: helper.e(".control-layout-gutter"),
path: "layout.gutter",
type: "range",
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".main"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".main"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".main"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() {
layout.render.gutter();
}
}, { }, {
element: helper.e(".control-layout-title"), element: helper.e(".control-layout-title"),
path: "layout.title", path: "layout.title",
@ -371,12 +463,60 @@ var control = (function() {
path: "header.greeting.size", path: "header.greeting.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".greeting"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".greeting"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".greeting"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.greeting.size(); header.render.greeting.size();
} }
}, { }, {
element: helper.e(".control-header-greeting-size-default"), element: helper.e(".control-header-greeting-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".greeting"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.greeting.size", 1); _setValue("header.greeting.size", 1);
header.render.greeting.size(); header.render.greeting.size();
@ -413,12 +553,60 @@ var control = (function() {
path: "header.transitional.size", path: "header.transitional.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".transitional"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".transitional"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".transitional"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.transitional.size(); header.render.transitional.size();
} }
}, { }, {
element: helper.e(".control-header-transitional-size-default"), element: helper.e(".control-header-transitional-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".transitional"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.transitional.size", 1); _setValue("header.transitional.size", 1);
header.render.transitional.size(); header.render.transitional.size();
@ -579,12 +767,60 @@ var control = (function() {
path: "header.clock.size", path: "header.clock.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".clock"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".clock"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".clock"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.clock.size(); header.render.clock.size();
} }
}, { }, {
element: helper.e(".control-header-clock-size-default"), element: helper.e(".control-header-clock-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".clock"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.clock.size", 1); _setValue("header.clock.size", 1);
header.render.clock.size(); header.render.clock.size();
@ -883,12 +1119,60 @@ var control = (function() {
path: "header.date.size", path: "header.date.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".date"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".date"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".date"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.date.size(); header.render.date.size();
} }
}, { }, {
element: helper.e(".control-header-date-size-default"), element: helper.e(".control-header-date-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".date"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.date.size", 1); _setValue("header.date.size", 1);
header.render.date.size(); header.render.date.size();
@ -907,6 +1191,15 @@ var control = (function() {
element: helper.e(".control-header-search-style-auto"), element: helper.e(".control-header-search-style-auto"),
path: "header.search.style", path: "header.search.style",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".header-search-input"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
dependents(); dependents();
@ -916,6 +1209,15 @@ var control = (function() {
element: helper.e(".control-header-search-style-custom"), element: helper.e(".control-header-search-style-custom"),
path: "header.search.style", path: "header.search.style",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".header-search-input"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
dependents(); dependents();
@ -1051,12 +1353,60 @@ var control = (function() {
path: "header.search.size", path: "header.search.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".header-search-input"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.search.size(); header.render.search.size();
} }
}, { }, {
element: helper.e(".control-header-search-size-default"), element: helper.e(".control-header-search-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".header-search-input"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.search.size", 1); _setValue("header.search.size", 1);
header.render.search.size(); header.render.search.size();
@ -1083,12 +1433,60 @@ var control = (function() {
path: "header.button.size", path: "header.button.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".control-menu"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".control-menu"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".control-menu"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() { func: function() {
header.render.button.size(); header.render.button.size();
} }
}, { }, {
element: helper.e(".control-header-button-size-default"), element: helper.e(".control-header-button-size-default"),
type: "button", type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.render({
element: helper.e(".control-menu"),
delay: 500
});
}
}],
func: function() { func: function() {
_setValue("header.button.size", 1); _setValue("header.button.size", 1);
header.render.button.size(); header.render.button.size();
@ -1128,128 +1526,27 @@ var control = (function() {
header.render.opacity(); header.render.opacity();
} }
}, { }, {
element: helper.e(".control-header-padding-top"), element: helper.e(".control-header-radius"),
path: "header.padding.top", path: "header.radius",
type: "range",
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".header-area")
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".header-area")
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".header-area"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() {
header.render.padding();
}
}, {
element: helper.e(".control-header-padding-bottom"),
path: "header.padding.bottom",
type: "range",
additionalEvents: [{
event: "input",
func: function() {
edge.render({
element: helper.e(".header-area")
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
element: helper.e(".header-area")
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
element: helper.e(".header-area"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.destroy();
}
}],
func: function() {
header.render.padding();
}
}, {
element: helper.e(".control-header-border-top-show"),
path: "header.border.top.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents();
header.render.border();
} }
}, { }, {
element: helper.e(".control-header-border-top-width"), element: helper.e(".control-header-border-top"),
path: "header.border.top.width", path: "header.border.top",
type: "range", type: "range",
func: function() { func: function() {
header.render.border(); header.render.border();
}
}, {
element: helper.e(".control-header-border-bottom-show"),
path: "header.border.bottom.show",
type: "checkbox",
func: function() {
render(); render();
dependents();
header.render.border();
} }
}, { }, {
element: helper.e(".control-header-border-bottom-width"), element: helper.e(".control-header-border-bottom"),
path: "header.border.bottom.width", path: "header.border.bottom",
type: "range", type: "range",
func: function() { func: function() {
header.render.border(); header.render.border();
render();
} }
}, { }, {
element: helper.e(".control-link-area-width"), element: helper.e(".control-link-area-width"),
@ -1536,13 +1833,6 @@ var control = (function() {
func: function() { func: function() {
render(); render();
} }
}, {
element: helper.e(".control-link-area-gap"),
path: "link.area.gap",
type: "range",
func: function() {
link.render.area.gap();
}
}, { }, {
element: helper.e(".control-link-item-display-alignment-horizontal-left"), element: helper.e(".control-link-item-display-alignment-horizontal-left"),
path: "link.item.display.alignment.horizontal", path: "link.item.display.alignment.horizontal",
@ -1769,6 +2059,14 @@ var control = (function() {
func: function() { func: function() {
background.render(); background.render();
} }
}, {
element: helper.e(".control-background-image-scale"),
path: "background.image.scale",
type: "range",
valueMod: ["float"],
func: function() {
background.render();
}
}]; }];
var _setValue = function(path, value) { var _setValue = function(path, value) {
@ -1835,7 +2133,7 @@ var control = (function() {
path: object.path, path: object.path,
newValue: newValue newValue: newValue
}); });
// console.log(object.path, helper.getObject({ // console.log("state set", object.path, helper.getObject({
// object: state.get(), // object: state.get(),
// path: object.path // path: object.path
// })); // }));
@ -1956,15 +2254,20 @@ var control = (function() {
helper.addClass(html, "is-header-shade-show"); helper.addClass(html, "is-header-shade-show");
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style); helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
}; };
if (state.get().header.radius) {
helper.addClass(html, "is-header-radius");
} else {
helper.removeClass(html, "is-header-radius");
};
}; };
var _border = function() { var _border = function() {
helper.removeClass(html, "is-header-border-top-show"); helper.removeClass(html, "is-header-border-top");
helper.removeClass(html, "is-header-border-bottom-show"); helper.removeClass(html, "is-header-border-bottom");
if (state.get().header.border.top.show) { if (state.get().header.border.top > 0) {
helper.addClass(html, "is-header-border-top-show"); helper.addClass(html, "is-header-border-top");
}; };
if (state.get().header.border.bottom.show) { if (state.get().header.border.bottom > 0) {
helper.addClass(html, "is-header-border-bottom-show"); helper.addClass(html, "is-header-border-bottom");
}; };
}; };
_area(); _area();
@ -2227,22 +2530,6 @@ var control = (function() {
helper.e(".control-header-shade-opacity").disabled = true; helper.e(".control-header-shade-opacity").disabled = true;
}; };
}; };
var _border = function() {
if (state.get().header.border.top.show) {
helper.e("[for=control-header-border-top-width]").removeAttribute("disabled");
helper.e(".control-header-border-top-width").disabled = false;
} else {
helper.e("[for=control-header-border-top-width]").setAttribute("disabled", "");
helper.e(".control-header-border-top-width").disabled = true;
};
if (state.get().header.border.bottom.show) {
helper.e("[for=control-header-border-bottom-width]").removeAttribute("disabled");
helper.e(".control-header-border-bottom-width").disabled = false;
} else {
helper.e("[for=control-header-border-bottom-width]").setAttribute("disabled", "");
helper.e(".control-header-border-bottom-width").disabled = true;
};
};
var _search = function() { var _search = function() {
if (state.get().header.search.show) { if (state.get().header.search.show) {
helper.e(".control-header-search-style-label").removeAttribute("disabled"); helper.e(".control-header-search-style-label").removeAttribute("disabled");
@ -2347,7 +2634,6 @@ var control = (function() {
}; };
_clock(); _clock();
_date(); _date();
_border();
_shade(); _shade();
_search(); _search();
_greeting(); _greeting();
@ -2387,8 +2673,6 @@ var control = (function() {
helper.e(".control-link-item-url-style-dark").disabled = true; helper.e(".control-link-item-url-style-dark").disabled = true;
helper.e(".control-link-item-url-style-light").disabled = true; helper.e(".control-link-item-url-style-light").disabled = true;
helper.e(".control-link-item-line-show").disabled = true; helper.e(".control-link-item-line-show").disabled = true;
helper.e("[for=control-link-area-gap]").setAttribute("disabled", "");
helper.e(".control-link-area-gap").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true;
@ -2419,8 +2703,6 @@ var control = (function() {
helper.e(".control-link-item-name-show").disabled = false; helper.e(".control-link-item-name-show").disabled = false;
helper.e(".control-link-item-url-show").disabled = false; helper.e(".control-link-item-url-show").disabled = false;
helper.e(".control-link-item-line-show").disabled = false; helper.e(".control-link-item-line-show").disabled = false;
helper.e("[for=control-link-area-gap]").removeAttribute("disabled");
helper.e(".control-link-area-gap").disabled = false;
helper.e(".control-link-new-tab").disabled = false; helper.e(".control-link-new-tab").disabled = false;
helper.e(".control-link-style-block").disabled = false; helper.e(".control-link-style-block").disabled = false;
helper.e(".control-link-style-list").disabled = false; helper.e(".control-link-style-list").disabled = false;
@ -2486,6 +2768,8 @@ var control = (function() {
helper.e(".control-background-image-grayscale").disabled = false; helper.e(".control-background-image-grayscale").disabled = false;
helper.e("[for=control-background-image-accent]").removeAttribute("disabled"); helper.e("[for=control-background-image-accent]").removeAttribute("disabled");
helper.e(".control-background-image-accent").disabled = false; helper.e(".control-background-image-accent").disabled = false;
helper.e("[for=control-background-image-scale]").removeAttribute("disabled");
helper.e(".control-background-image-scale").disabled = false;
} else { } else {
helper.e("[for=control-background-image-url]").setAttribute("disabled", ""); helper.e("[for=control-background-image-url]").setAttribute("disabled", "");
helper.e(".control-background-image-url").disabled = true; helper.e(".control-background-image-url").disabled = true;
@ -2497,6 +2781,8 @@ var control = (function() {
helper.e(".control-background-image-grayscale").disabled = true; helper.e(".control-background-image-grayscale").disabled = true;
helper.e("[for=control-background-image-accent]").setAttribute("disabled", ""); helper.e("[for=control-background-image-accent]").setAttribute("disabled", "");
helper.e(".control-background-image-accent").disabled = true; helper.e(".control-background-image-accent").disabled = true;
helper.e("[for=control-background-image-scale]").setAttribute("disabled", "");
helper.e(".control-background-image-scale").disabled = true;
}; };
}; };
_header(); _header();

2
js/data.js
View File

@ -21,7 +21,7 @@ var data = (function() {
bookmarks: bookmarks.get() bookmarks: bookmarks.get()
}; };
set(saveName, JSON.stringify(data)); set(saveName, JSON.stringify(data));
console.log("data saved"); // console.log("data saved");
}; };
var wipe = function() { var wipe = function() {

14
js/header.js
View File

@ -29,9 +29,6 @@ var header = (function() {
opacity: function() { opacity: function() {
_renderOpacity(); _renderOpacity();
}, },
padding: function() {
_renderPadding();
},
border: function() { border: function() {
_renderBorder(); _renderBorder();
}, },
@ -103,16 +100,10 @@ var header = (function() {
}; };
}; };
var _renderPadding = function() {
var html = helper.e("html");
html.style.setProperty("--header-padding-top-multiplier", state.get().header.padding.top);
html.style.setProperty("--header-padding-bottom-multiplier", state.get().header.padding.bottom);
};
var _renderBorder = function() { var _renderBorder = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--header-border-width-top-multiplier", state.get().header.border.top.width); html.style.setProperty("--header-border-top", state.get().header.border.top);
html.style.setProperty("--header-border-width-bottom-multiplier", state.get().header.border.bottom.width); html.style.setProperty("--header-border-bottom", state.get().header.border.bottom);
}; };
var _renderSearchWidth = function() { var _renderSearchWidth = function() {
@ -155,7 +146,6 @@ var header = (function() {
render.area.width(); render.area.width();
render.shade(); render.shade();
render.opacity(); render.opacity();
render.padding();
render.border(); render.border();
render.greeting.size(); render.greeting.size();
render.transitional.size(); render.transitional.size();

33
js/layout.js
View File

@ -1,15 +1,36 @@
var layout = (function() { var layout = (function() {
var render = function() { var render = {
width: function() {
_renderWidth();
},
padding: function() {
_renderPadding();
},
gutter: function() {
_renderGutter();
}
};
var _renderWidth = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--layout-width", helper.getObject({ html.style.setProperty("--layout-width", state.get().layout.width + "%");
object: state.get(), };
path: "layout.width"
}) + "%"); var _renderPadding = function() {
var html = helper.e("html");
html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding);
};
var _renderGutter = function() {
var html = helper.e("html");
html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter);
}; };
var init = function() { var init = function() {
render(); render.width();
render.padding();
render.gutter();
}; };
// exposed methods // exposed methods

9
js/link.js
View File

@ -523,9 +523,6 @@ var link = (function() {
var render = { var render = {
area: { area: {
gap: function() {
_renderAreaGap();
},
width: function() { width: function() {
_renderAreaWidth(); _renderAreaWidth();
} }
@ -554,11 +551,6 @@ var link = (function() {
} }
}; };
var _renderAreaGap = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-gutter-multiplier", state.get().link.area.gap);
};
var _renderAreaWidth = function() { var _renderAreaWidth = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-area-width", state.get().link.area.width + "%"); html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
@ -646,7 +638,6 @@ var link = (function() {
}; };
var init = function() { var init = function() {
render.area.gap();
render.area.width(); render.area.width();
render.item.all(); render.item.all();
render.item.size(); render.item.size();

23
js/state.js
View File

@ -110,21 +110,11 @@ var state = (function() {
shade: { shade: {
show: true, show: true,
style: "scroll", style: "scroll",
opacity: 0.95, opacity: 0.95
},
padding: {
top: 0,
bottom: 0
}, },
border: { border: {
top: { top: 0,
show: false, bottom: 0
width: 1
},
bottom: {
show: false,
width: 1
}
}, },
greeting: { greeting: {
show: false, show: false,
@ -136,11 +126,11 @@ var state = (function() {
show: false, show: false,
type: "timeanddate", type: "timeanddate",
size: 1 size: 1
} },
radius: false
}, },
link: { link: {
area: { area: {
gap: 2,
width: 100, width: 100,
alignment: { alignment: {
horizontal: "center" horizontal: "center"
@ -185,6 +175,8 @@ var state = (function() {
horizontal: "center", horizontal: "center",
vertical: "center" vertical: "center"
}, },
padding: 4,
gutter: 2,
width: 80, width: 80,
scrollPastEnd: false, scrollPastEnd: false,
title: "New Tab" title: "New Tab"
@ -209,6 +201,7 @@ var state = (function() {
show: false, show: false,
url: "../background/gray-steps.jpg", url: "../background/gray-steps.jpg",
blur: 0, blur: 0,
scale: 1,
opacity: 1, opacity: 1,
grayscale: 0, grayscale: 0,
accent: 0 accent: 0

20
js/update.js
View File

@ -446,11 +446,25 @@ var update = (function() {
size: 1 size: 1
}; };
delete data.state.header.editAdd; delete data.state.header.editAdd;
delete data.state.header.accent;
data.state.theme.radius = 0.2; data.state.theme.radius = 0.2;
return data; return data;
}; };
var _update_390 = function(data) {
data.version = "3.9.0";
delete data.state.header.padding;
data.state.header.radius = false;
data.state.header.border = {
top: data.state.header.border.top.width,
bottom: data.state.header.border.bottom.width
};
data.state.layout.padding = 4;
data.state.layout.gutter = 2;
data.state.background.image.scale = 1;
delete data.state.link.area.gap;
return data;
};
// var _update_300 = function(data) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -569,6 +583,10 @@ var update = (function() {
console.log("\t= running update 3.8.0"); console.log("\t= running update 3.8.0");
data = _update_380(data); data = _update_380(data);
}; };
if (version.compare(data.version, "3.9.0") == -1) {
console.log("\t= running update 3.9.0");
data = _update_390(data);
};
}; };
// if no update is needed // if no update is needed
// version bump // version bump

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 = "3.8.4"; var current = "3.9.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");