mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 12:31:47 +02:00
[feature] [refactor] improve controls and add controls for layout padding and gutter size
This commit is contained in:
Kombie
GitHub
parent
019d82f628
commit
d69eead3f4
@ -7,10 +7,16 @@
|
||||
pointer-events: none;
|
||||
z-index: var(--z-index-background);
|
||||
animation: appear var(--animation-speed-slow) 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-background-image-show .background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: var(--background-image);
|
||||
/* background-image: url(https://source.unsplash.com/random/1920x1080/?night); */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@ -22,7 +28,8 @@
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
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 {
|
||||
|
||||
13
css/base.css
13
css/base.css
@ -58,14 +58,8 @@
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: none;
|
||||
--header-search-width: 0%;
|
||||
--header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier));
|
||||
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier));
|
||||
--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-border-top: 0;
|
||||
--header-border-bottom: 0;
|
||||
--header-date-size: 1em;
|
||||
--header-clock-size: 1em;
|
||||
--header-search-size: 1em;
|
||||
@ -80,9 +74,12 @@
|
||||
--link-item-name-size: 0.9em;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-scale: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-blur: 0;
|
||||
--layout-width: 80%;
|
||||
--layout-padding-multiplier: 4;
|
||||
--layout-gutter-multiplier: 4;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.4s;
|
||||
--animation-speed-slow: 0.6s;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.clock {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.date {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.edge {
|
||||
background-color: rgba(var(--theme-accent), 0.10);
|
||||
background-color: rgba(var(--theme-accent), 0.2);
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
@ -7,7 +7,7 @@
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
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);
|
||||
pointer-events: none;
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.greeting {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
@ -13,6 +12,18 @@
|
||||
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 {
|
||||
font-size: 1.5em;
|
||||
max-width: 100%;
|
||||
|
||||
@ -23,8 +23,7 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header-shade,
|
||||
.header-border {
|
||||
.header-shade {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -35,47 +34,35 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-header-shade-style-scroll .header-shade {
|
||||
transition: background-color var(--animation-speed-slow) ease-in-out;
|
||||
animation: none;
|
||||
.is-header-radius .header-shade {
|
||||
border-radius: calc(var(--theme-radius) * 4);
|
||||
}
|
||||
|
||||
.is-header-shade-show .header-shade {
|
||||
background-color: rgb(var(--header-shade-color));
|
||||
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));
|
||||
background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
padding-top: calc(var(--gutter) * 3 + var(--header-padding-top));
|
||||
padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
|
||||
padding-left: calc(var(--gutter) * 3);
|
||||
padding-right: calc(var(--gutter) * 3);
|
||||
padding: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
position: relative;
|
||||
width: var(--header-area-width);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .header-area {
|
||||
justify-content: flex-start;
|
||||
.is-header-border-top .header-area {
|
||||
border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .header-area {
|
||||
justify-content: center;
|
||||
.is-header-border-bottom .header-area {
|
||||
border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .header-area {
|
||||
justify-content: flex-end;
|
||||
.is-header-radius .header-area {
|
||||
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 {
|
||||
@ -100,13 +87,35 @@
|
||||
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 {
|
||||
margin: var(--gutter);
|
||||
margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2));
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.is-header-search-style-auto .header-search {
|
||||
|
||||
24
css/link.css
24
css/link.css
@ -22,21 +22,21 @@
|
||||
}
|
||||
|
||||
.link-area {
|
||||
padding-bottom: calc(var(--gutter) * 4);
|
||||
padding-left: calc(var(--gutter) * 4);
|
||||
padding-right: calc(var(--gutter) * 4);
|
||||
padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
font-size: calc(var(--link-item-size) * 1);
|
||||
position: relative;
|
||||
width: var(--link-area-width);
|
||||
display: grid;
|
||||
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));
|
||||
}
|
||||
|
||||
.is-header-border-bottom-show .link-area,
|
||||
.is-header-border-bottom .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 {
|
||||
@ -52,7 +52,7 @@
|
||||
.link-item:focus-within,
|
||||
.link-item:focus,
|
||||
.link-item:hover {
|
||||
transform: scale(1.06);
|
||||
transform: scale(1.05);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@ -178,18 +178,14 @@
|
||||
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-within .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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
20
css/menu.css
20
css/menu.css
@ -54,6 +54,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: 0 3em;
|
||||
}
|
||||
|
||||
.menu-content-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@ -65,11 +69,11 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 2em;
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
.menu-item-header-text {
|
||||
@ -77,7 +81,7 @@
|
||||
}
|
||||
|
||||
.menu-item-form {
|
||||
padding: 0 2em 2em 4em;
|
||||
padding: 0 2em 2em 3em;
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
@ -121,7 +125,7 @@
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.menu {
|
||||
width: 60vw;
|
||||
width: 70vw;
|
||||
height: 100%;
|
||||
overflow-y: inherit;
|
||||
max-height: inherit;
|
||||
@ -149,21 +153,21 @@
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
padding: 2em 0 2em 2em;
|
||||
padding: 2em 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.menu-item-form {
|
||||
padding: 2em 2em 2em 0;
|
||||
padding: 2em 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.menu {
|
||||
width: 60vw;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@ -173,6 +177,6 @@
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.menu {
|
||||
width: 40vw;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.transitional {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--gray-14));
|
||||
@ -20,3 +19,15 @@
|
||||
justify-content: 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
195
index.html
@ -46,51 +46,52 @@
|
||||
|
||||
<header class="header">
|
||||
<div class="header-shade"></div>
|
||||
<div class="header-border"></div>
|
||||
<div class="header-area">
|
||||
<div class="header-item header-greeting">
|
||||
<p class="greeting"></p>
|
||||
</div>
|
||||
<div class="header-item header-transitional">
|
||||
<p class="transitional"></p>
|
||||
</div>
|
||||
<div class="header-item header-clock">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
<div class="header-item header-date">
|
||||
<p class="date"></p>
|
||||
</div>
|
||||
<div class="header-item header-search">
|
||||
<form class="search" action="" method="get">
|
||||
<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">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</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>
|
||||
<div class="header-item-grid">
|
||||
<div class="header-item header-greeting">
|
||||
<p class="greeting"></p>
|
||||
</div>
|
||||
<div class="header-item header-transitional">
|
||||
<p class="transitional"></p>
|
||||
</div>
|
||||
<div class="header-item header-clock">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
<div class="header-item header-date">
|
||||
<p class="date"></p>
|
||||
</div>
|
||||
<div class="header-item header-search">
|
||||
<form class="search" action="" method="get">
|
||||
<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">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-accent">
|
||||
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
||||
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
|
||||
<label for="control-theme-accent-current">Accent</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-menu">
|
||||
<button id="control-menu" class="control-menu button mb-0" tabindex="1">
|
||||
<div class="header-item header-button header-accent">
|
||||
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -127,7 +128,7 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<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>
|
||||
<hr>
|
||||
<label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label>
|
||||
@ -161,6 +162,28 @@
|
||||
</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-header">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<hr>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
@ -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>
|
||||
</div>
|
||||
<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>
|
||||
@ -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">
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-header-button-size-default button mb-0" type="button">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">
|
||||
<button class="control-header-button-size-default button mb-0" tabindex="1">Default button size</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -643,25 +650,13 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<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-show">Top border</label>
|
||||
</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>
|
||||
<label for="control-header-border-top">Top</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>
|
||||
<hr>
|
||||
<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-show">Bottom border</label>
|
||||
</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>
|
||||
<label for="control-header-border-bottom">Bottom</label>
|
||||
<input id="control-header-border-bottom" class="control-header-border-bottom" type="range" min="0" max="60" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -691,6 +686,11 @@
|
||||
<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">
|
||||
</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>
|
||||
@ -708,7 +708,7 @@
|
||||
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<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>
|
||||
<hr>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
<hr>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
<hr>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<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="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">
|
||||
</div>
|
||||
<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>
|
||||
@ -802,11 +802,6 @@
|
||||
<label for="control-link-item-line-show">Tile line</label>
|
||||
</div>
|
||||
<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>
|
||||
<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">
|
||||
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
@ -946,7 +941,7 @@
|
||||
<label for="control-theme-accent-random-style-saturated">Saturated colours</label>
|
||||
</div>
|
||||
<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>
|
||||
@ -968,10 +963,12 @@
|
||||
<div class="input-wrap">
|
||||
<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">
|
||||
<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>
|
||||
<p class="input-helper small muted">../background/gray-steps.jpg</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"><i>../background/abstract.jpg</i></p>
|
||||
<p class="input-helper small muted"><i>../background/gray-steps.jpg</i></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>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -988,7 +985,11 @@
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<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>
|
||||
|
||||
@ -2,31 +2,12 @@ var background = (function() {
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var background = helper.e(".background");
|
||||
var backgroundImage = helper.e(".background-image");
|
||||
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.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");
|
||||
};
|
||||
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-scale", state.get().background.image.scale);
|
||||
html.style.setProperty("--background-accent-opacity", state.get().background.image.accent);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
@ -19,25 +19,6 @@ var bookmarks = (function() {
|
||||
}
|
||||
},
|
||||
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",
|
||||
letter: "AS",
|
||||
@ -76,25 +57,6 @@ var bookmarks = (function() {
|
||||
}
|
||||
},
|
||||
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",
|
||||
letter: "AZ",
|
||||
|
||||
574
js/control.js
574
js/control.js
@ -72,7 +72,7 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
layout.render();
|
||||
layout.render.width();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-horizontal-left"),
|
||||
@ -170,6 +170,98 @@ var control = (function() {
|
||||
func: function() {
|
||||
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"),
|
||||
path: "layout.title",
|
||||
@ -371,12 +463,60 @@ var control = (function() {
|
||||
path: "header.greeting.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.greeting.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-greeting-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".greeting"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.greeting.size", 1);
|
||||
header.render.greeting.size();
|
||||
@ -413,12 +553,60 @@ var control = (function() {
|
||||
path: "header.transitional.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.transitional.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-transitional-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".transitional"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.transitional.size", 1);
|
||||
header.render.transitional.size();
|
||||
@ -579,12 +767,60 @@ var control = (function() {
|
||||
path: "header.clock.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.clock.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".clock"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.clock.size", 1);
|
||||
header.render.clock.size();
|
||||
@ -883,12 +1119,60 @@ var control = (function() {
|
||||
path: "header.date.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.date.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-date-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".date"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.date.size", 1);
|
||||
header.render.date.size();
|
||||
@ -907,6 +1191,15 @@ var control = (function() {
|
||||
element: helper.e(".control-header-search-style-auto"),
|
||||
path: "header.search.style",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".header-search-input"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
@ -916,6 +1209,15 @@ var control = (function() {
|
||||
element: helper.e(".control-header-search-style-custom"),
|
||||
path: "header.search.style",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".header-search-input"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
@ -1051,12 +1353,60 @@ var control = (function() {
|
||||
path: "header.search.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.search.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-search-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".header-search-input"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.search.size", 1);
|
||||
header.render.search.size();
|
||||
@ -1083,12 +1433,60 @@ var control = (function() {
|
||||
path: "header.button.size",
|
||||
type: "range",
|
||||
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() {
|
||||
header.render.button.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-button-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".control-menu"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
_setValue("header.button.size", 1);
|
||||
header.render.button.size();
|
||||
@ -1128,128 +1526,27 @@ var control = (function() {
|
||||
header.render.opacity();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-padding-top"),
|
||||
path: "header.padding.top",
|
||||
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",
|
||||
element: helper.e(".control-header-radius"),
|
||||
path: "header.radius",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-border-top-width"),
|
||||
path: "header.border.top.width",
|
||||
element: helper.e(".control-header-border-top"),
|
||||
path: "header.border.top",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-border-bottom-show"),
|
||||
path: "header.border.bottom.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-border-bottom-width"),
|
||||
path: "header.border.bottom.width",
|
||||
element: helper.e(".control-header-border-bottom"),
|
||||
path: "header.border.bottom",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render.border();
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-area-width"),
|
||||
@ -1536,13 +1833,6 @@ var control = (function() {
|
||||
func: function() {
|
||||
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"),
|
||||
path: "link.item.display.alignment.horizontal",
|
||||
@ -1769,6 +2059,14 @@ var control = (function() {
|
||||
func: function() {
|
||||
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) {
|
||||
@ -1835,7 +2133,7 @@ var control = (function() {
|
||||
path: object.path,
|
||||
newValue: newValue
|
||||
});
|
||||
// console.log(object.path, helper.getObject({
|
||||
// console.log("state set", object.path, helper.getObject({
|
||||
// object: state.get(),
|
||||
// path: object.path
|
||||
// }));
|
||||
@ -1956,15 +2254,20 @@ var control = (function() {
|
||||
helper.addClass(html, "is-header-shade-show");
|
||||
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() {
|
||||
helper.removeClass(html, "is-header-border-top-show");
|
||||
helper.removeClass(html, "is-header-border-bottom-show");
|
||||
if (state.get().header.border.top.show) {
|
||||
helper.addClass(html, "is-header-border-top-show");
|
||||
helper.removeClass(html, "is-header-border-top");
|
||||
helper.removeClass(html, "is-header-border-bottom");
|
||||
if (state.get().header.border.top > 0) {
|
||||
helper.addClass(html, "is-header-border-top");
|
||||
};
|
||||
if (state.get().header.border.bottom.show) {
|
||||
helper.addClass(html, "is-header-border-bottom-show");
|
||||
if (state.get().header.border.bottom > 0) {
|
||||
helper.addClass(html, "is-header-border-bottom");
|
||||
};
|
||||
};
|
||||
_area();
|
||||
@ -2227,22 +2530,6 @@ var control = (function() {
|
||||
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() {
|
||||
if (state.get().header.search.show) {
|
||||
helper.e(".control-header-search-style-label").removeAttribute("disabled");
|
||||
@ -2347,7 +2634,6 @@ var control = (function() {
|
||||
};
|
||||
_clock();
|
||||
_date();
|
||||
_border();
|
||||
_shade();
|
||||
_search();
|
||||
_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-light").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-left").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-url-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-style-block").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("[for=control-background-image-accent]").removeAttribute("disabled");
|
||||
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 {
|
||||
helper.e("[for=control-background-image-url]").setAttribute("disabled", "");
|
||||
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("[for=control-background-image-accent]").setAttribute("disabled", "");
|
||||
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();
|
||||
|
||||
@ -21,7 +21,7 @@ var data = (function() {
|
||||
bookmarks: bookmarks.get()
|
||||
};
|
||||
set(saveName, JSON.stringify(data));
|
||||
console.log("data saved");
|
||||
// console.log("data saved");
|
||||
};
|
||||
|
||||
var wipe = function() {
|
||||
|
||||
14
js/header.js
14
js/header.js
@ -29,9 +29,6 @@ var header = (function() {
|
||||
opacity: function() {
|
||||
_renderOpacity();
|
||||
},
|
||||
padding: function() {
|
||||
_renderPadding();
|
||||
},
|
||||
border: function() {
|
||||
_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 html = helper.e("html");
|
||||
html.style.setProperty("--header-border-width-top-multiplier", state.get().header.border.top.width);
|
||||
html.style.setProperty("--header-border-width-bottom-multiplier", state.get().header.border.bottom.width);
|
||||
html.style.setProperty("--header-border-top", state.get().header.border.top);
|
||||
html.style.setProperty("--header-border-bottom", state.get().header.border.bottom);
|
||||
};
|
||||
|
||||
var _renderSearchWidth = function() {
|
||||
@ -155,7 +146,6 @@ var header = (function() {
|
||||
render.area.width();
|
||||
render.shade();
|
||||
render.opacity();
|
||||
render.padding();
|
||||
render.border();
|
||||
render.greeting.size();
|
||||
render.transitional.size();
|
||||
|
||||
33
js/layout.js
33
js/layout.js
@ -1,15 +1,36 @@
|
||||
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");
|
||||
html.style.setProperty("--layout-width", helper.getObject({
|
||||
object: state.get(),
|
||||
path: "layout.width"
|
||||
}) + "%");
|
||||
html.style.setProperty("--layout-width", state.get().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() {
|
||||
render();
|
||||
render.width();
|
||||
render.padding();
|
||||
render.gutter();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
|
||||
@ -523,9 +523,6 @@ var link = (function() {
|
||||
|
||||
var render = {
|
||||
area: {
|
||||
gap: function() {
|
||||
_renderAreaGap();
|
||||
},
|
||||
width: function() {
|
||||
_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 html = helper.e("html");
|
||||
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
|
||||
@ -646,7 +638,6 @@ var link = (function() {
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render.area.gap();
|
||||
render.area.width();
|
||||
render.item.all();
|
||||
render.item.size();
|
||||
|
||||
23
js/state.js
23
js/state.js
@ -110,21 +110,11 @@ var state = (function() {
|
||||
shade: {
|
||||
show: true,
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
opacity: 0.95
|
||||
},
|
||||
border: {
|
||||
top: {
|
||||
show: false,
|
||||
width: 1
|
||||
},
|
||||
bottom: {
|
||||
show: false,
|
||||
width: 1
|
||||
}
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
greeting: {
|
||||
show: false,
|
||||
@ -136,11 +126,11 @@ var state = (function() {
|
||||
show: false,
|
||||
type: "timeanddate",
|
||||
size: 1
|
||||
}
|
||||
},
|
||||
radius: false
|
||||
},
|
||||
link: {
|
||||
area: {
|
||||
gap: 2,
|
||||
width: 100,
|
||||
alignment: {
|
||||
horizontal: "center"
|
||||
@ -185,6 +175,8 @@ var state = (function() {
|
||||
horizontal: "center",
|
||||
vertical: "center"
|
||||
},
|
||||
padding: 4,
|
||||
gutter: 2,
|
||||
width: 80,
|
||||
scrollPastEnd: false,
|
||||
title: "New Tab"
|
||||
@ -209,6 +201,7 @@ var state = (function() {
|
||||
show: false,
|
||||
url: "../background/gray-steps.jpg",
|
||||
blur: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
grayscale: 0,
|
||||
accent: 0
|
||||
|
||||
20
js/update.js
20
js/update.js
@ -446,11 +446,25 @@ var update = (function() {
|
||||
size: 1
|
||||
};
|
||||
delete data.state.header.editAdd;
|
||||
delete data.state.header.accent;
|
||||
data.state.theme.radius = 0.2;
|
||||
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) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -569,6 +583,10 @@ var update = (function() {
|
||||
console.log("\t= running update 3.8.0");
|
||||
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
|
||||
// version bump
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// 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 pa = a.split(".");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user