extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-23 13:40:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] improve link size controls

Browse Source
This commit is contained in:
Kombie 2019-06-06 18:22:42 +01:00 committed by GitHub
parent b2a5e84e24
commit 29f14af9bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 546 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/base.css
View File

@ -49,7 +49,7 @@
--radius: 0.2em; --radius: 0.2em;
--line-width: 0.2em; --line-width: 0.2em;
--background: rgb(var(--gray-01)); --background: rgb(var(--gray-01));
--gutter: 0.5em; --gutter: 0.5rem;
--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;
@ -80,8 +80,11 @@
--header-border-width-multiplier-top: 1; --header-border-width-multiplier-top: 1;
--header-border-width-multiplier-bottom: 1; --header-border-width-multiplier-bottom: 1;
--link-area-width: 100%; --link-area-width: 100%;
--link-display-letter-size: 2em; --link-area-gutter-multiplier: 2;
--link-display-icon-size: 2.5em; --link-item-size: 1em;
--link-item-display-letter-size: 2em;
--link-item-display-icon-size: 2.5em;
--link-item-name-size: 0.9em;
--background-image: none; --background-image: none;
--background-opacity: 1; --background-opacity: 1;
--background-accent-opacity: 0; --background-accent-opacity: 0;
@ -104,15 +107,15 @@
} }
:root.is-link-style-block { :root.is-link-style-block {
--link-items-width: 20%; --link-item-width: 11em;
--link-items-height: 10em; --link-item-height: 10em;
--url-height: 20%; --url-height: 20%;
--edit-height: 30%; --edit-height: 30%;
} }
:root.is-link-style-list { :root.is-link-style-list {
--link-items-width: 20%; --link-item-width: 20em;
--link-items-height: 4em; --link-item-height: 4em;
--url-height: 30%; --url-height: 30%;
--edit-height: 50%; --edit-height: 50%;
} }

14
css/clock.css
View File

@ -13,15 +13,15 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.is-header-items-alignment-horizontal-left .clock { .is-header-item-alignment-horizontal-left .clock {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-items-alignment-horizontal-center .clock { .is-header-item-alignment-horizontal-center .clock {
justify-content: center; justify-content: center;
} }
.is-header-items-alignment-horizontal-right .clock { .is-header-item-alignment-horizontal-right .clock {
justify-content: flex-end; justify-content: flex-end;
} }
@ -50,17 +50,17 @@
min-width: 1.25em; min-width: 1.25em;
} }
.is-header-items-alignment-horizontal-left .clock-item:not(:last-child) { .is-header-item-alignment-horizontal-left .clock-item:not(:last-child) {
margin-right: 0.2em; margin-right: 0.2em;
} }
.is-header-items-alignment-horizontal-center .clock-item:not(:first-child), .is-header-item-alignment-horizontal-center .clock-item:not(:first-child),
.is-header-items-alignment-horizontal-center .clock-item:not(:last-child) { .is-header-item-alignment-horizontal-center .clock-item:not(:last-child) {
margin-left: 0.1em; margin-left: 0.1em;
margin-right: 0.1em; margin-right: 0.1em;
} }
.is-header-items-alignment-horizontal-right .clock-item:not(:first-child) { .is-header-item-alignment-horizontal-right .clock-item:not(:first-child) {
margin-left: 0.2em; margin-left: 0.2em;
} }

14
css/date.css
View File

@ -13,15 +13,15 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.is-header-items-alignment-horizontal-left .date { .is-header-item-alignment-horizontal-left .date {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-items-alignment-horizontal-center .date { .is-header-item-alignment-horizontal-center .date {
justify-content: center; justify-content: center;
} }
.is-header-items-alignment-horizontal-right .date { .is-header-item-alignment-horizontal-right .date {
justify-content: flex-end; justify-content: flex-end;
} }
@ -49,17 +49,17 @@
justify-content: center; justify-content: center;
} }
.is-header-items-alignment-horizontal-left .date-item:not(:last-child) { .is-header-item-alignment-horizontal-left .date-item:not(:last-child) {
margin-right: 0.2em; margin-right: 0.2em;
} }
.is-header-items-alignment-horizontal-center .date-item:not(:first-child), .is-header-item-alignment-horizontal-center .date-item:not(:first-child),
.is-header-items-alignment-horizontal-center .date-item:not(:last-child) { .is-header-item-alignment-horizontal-center .date-item:not(:last-child) {
margin-left: 0.1em; margin-left: 0.1em;
margin-right: 0.1em; margin-right: 0.1em;
} }
.is-header-items-alignment-horizontal-right .date-item:not(:first-child) { .is-header-item-alignment-horizontal-right .date-item:not(:first-child) {
margin-left: 0.2em; margin-left: 0.2em;
} }

6
css/header.css
View File

@ -66,15 +66,15 @@
align-items: stretch; align-items: stretch;
} }
.is-header-items-alignment-horizontal-left .header-area { .is-header-item-alignment-horizontal-left .header-area {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-items-alignment-horizontal-center .header-area { .is-header-item-alignment-horizontal-center .header-area {
justify-content: center; justify-content: center;
} }
.is-header-items-alignment-horizontal-right .header-area { .is-header-item-alignment-horizontal-right .header-area {
justify-content: flex-end; justify-content: flex-end;
} }

74
css/link.css
View File

@ -25,35 +25,13 @@
padding-bottom: calc(var(--gutter) * 4); padding-bottom: calc(var(--gutter) * 4);
padding-left: calc(var(--gutter) * 4); padding-left: calc(var(--gutter) * 4);
padding-right: calc(var(--gutter) * 4); padding-right: calc(var(--gutter) * 4);
font-size: calc(var(--link-item-size) * 1);
position: relative; position: relative;
width: var(--link-area-width); width: var(--link-area-width);
}
.is-link-fit-best .link-area {
display: grid; display: grid;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-gap: calc(var(--gutter) * 2); grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier));
} grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
.is-link-fit-custom .link-area {
margin-top: calc(var(--gutter) * -1);
padding-bottom: calc(var(--gutter) * 3);
padding-left: calc(var(--gutter) * 3);
padding-right: calc(var(--gutter) * 3);
display: flex;
flex-wrap: wrap;
}
.is-link-fit-custom.is-link-items-alignment-horizontal-left .link-area {
justify-content: flex-start;
}
.is-link-fit-custom.is-link-items-alignment-horizontal-center .link-area {
justify-content: center;
}
.is-link-fit-custom.is-link-items-alignment-horizontal-right .link-area {
justify-content: flex-end;
} }
.is-header-border-bottom-show .link-area, .is-header-border-bottom-show .link-area,
@ -61,27 +39,21 @@
padding-top: calc(var(--gutter) * 4); padding-top: calc(var(--gutter) * 4);
} }
.is-link-fit-best.is-link-style-block .link-area {
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
}
.is-link-fit-best.is-link-style-list .link-area {
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
}
.link-item { .link-item {
font-size: 1em; font-size: 1em;
position: relative; position: relative;
height: var(--link-item-height);
display: block; display: block;
transform: scale(1); transform: scale(1);
transition: transform var(--animation-speed-fast) ease-in-out; transition: transform var(--animation-speed-fast) ease-in-out;
direction: ltr; z-index: 1;
} }
.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.06);
z-index: 2;
} }
.link-item:active { .link-item:active {
@ -89,16 +61,6 @@
transition: none; transition: none;
} }
.is-link-fit-best .link-item {
height: var(--link-items-height);
}
.is-link-fit-custom .link-item {
height: var(--link-items-height);
width: var(--link-items-width);
margin: var(--gutter);
}
.link-panel-front { .link-panel-front {
background-color: rgb(var(--gray-02)); background-color: rgb(var(--gray-02));
border-radius: var(--radius); border-radius: var(--radius);
@ -109,7 +71,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
user-select: none; user-select: none;
transition: all var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
} }
.link-panel-front:hover, .link-panel-front:hover,
@ -310,7 +272,7 @@
} }
.link-display { .link-display {
font-size: 1rem; font-size: 1em;
display: none; display: none;
} }
@ -339,12 +301,12 @@
.is-link-style-block .link-display-letter, .is-link-style-block .link-display-letter,
.is-link-style-list .link-display-letter { .is-link-style-list .link-display-letter {
font-size: var(--link-display-letter-size); font-size: var(--link-item-display-letter-size);
} }
.is-link-style-block .link-display-icon, .is-link-style-block .link-display-icon,
.is-link-style-list .link-display-icon { .is-link-style-list .link-display-icon {
font-size: var(--link-display-icon-size); font-size: var(--link-item-display-icon-size);
} }
.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) { .is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
@ -369,12 +331,12 @@
.link-name { .link-name {
margin: 0; margin: 0;
font-size: 0.9em; font-size: var(--link-item-name-size);
font-family: var(--font-regular); font-family: var(--font-regular);
color: rgb(var(--gray-12)); color: rgb(var(--gray-12));
display: none; display: none;
text-align: center; text-align: center;
transition: all var(--animation-speed-fast) ease-in-out; transition: color var(--animation-speed-fast) ease-in-out;
} }
.is-link-display-alignment-horizontal-left .link-name { .is-link-display-alignment-horizontal-left .link-name {
@ -403,20 +365,14 @@
} }
.link-empty { .link-empty {
grid-column-start: 1;
grid-column-end: -1;
text-align: center; text-align: center;
} }
.link-empty-heading { .link-empty-heading {
color: rgb(var(--gray-16)); color: rgb(var(--gray-16));
} font-size: 1.5rem;
.is-link-fit-best .link-empty {
grid-column-start: 1;
grid-column-end: -1;
}
.is-link-fit-custom .link-empty {
margin: 1em;
} }
.is-link-style-list .link-name { .is-link-style-list .link-name {

130
index.html
View File

@ -209,19 +209,19 @@
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p> <p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
</div> </div>
<hr> <hr>
<label class="control-header-items-alignment-horizontal-label">Item Horizontal Alignment</label> <label class="control-header-item-alignment-horizontal-label">Item Horizontal Alignment</label>
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p> <p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-items-alignment-horizontal-left" class="control-header-items-alignment-horizontal-left" type="radio" name="control-header-items-alignment-horizontal" value="left" tabindex="1"> <input id="control-header-item-alignment-horizontal-left" class="control-header-item-alignment-horizontal-left" type="radio" name="control-header-item-alignment-horizontal" value="left" tabindex="1">
<label for="control-header-items-alignment-horizontal-left">Left</label> <label for="control-header-item-alignment-horizontal-left">Left</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-items-alignment-horizontal-center" class="control-header-items-alignment-horizontal-center" type="radio" name="control-header-items-alignment-horizontal" value="center" tabindex="1"> <input id="control-header-item-alignment-horizontal-center" class="control-header-item-alignment-horizontal-center" type="radio" name="control-header-item-alignment-horizontal" value="center" tabindex="1">
<label for="control-header-items-alignment-horizontal-center">Centre</label> <label for="control-header-item-alignment-horizontal-center">Centre</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-items-alignment-horizontal-right" class="control-header-items-alignment-horizontal-right" type="radio" name="control-header-items-alignment-horizontal" value="right" tabindex="1"> <input id="control-header-item-alignment-horizontal-right" class="control-header-item-alignment-horizontal-right" type="radio" name="control-header-item-alignment-horizontal" value="right" tabindex="1">
<label for="control-header-items-alignment-horizontal-right">Right</label> <label for="control-header-item-alignment-horizontal-right">Right</label>
</div> </div>
</div> </div>
</div> </div>
@ -683,103 +683,101 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-link-show" class="control-link-link-show" type="checkbox" tabindex="1"> <input id="control-link-show" class="control-link-show" type="checkbox" tabindex="1">
<label for="control-link-link-show">Show</label> <label for="control-link-show">Show</label>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-display-show" class="control-link-display-show" type="checkbox" tabindex="1"> <label for="control-link-item-size">Tile Size</label>
<label for="control-link-display-show">Letter/Icon</label> <input id="control-link-item-size" class="control-link-item-size" type="range" min="50" max="500" value="0" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-link-item-size-default mb-0" type="button">Defaul tile size</button>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="1">
<label for="control-link-item-display-show">Letter/Icon</label>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-display-letter-size">Letter size</label> <label for="control-link-item-display-letter-size">Letter size</label>
<input id="control-link-display-letter-size" class="control-link-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">
<button class="button control-link-item-display-letter-size-default mb-0" type="button">Default letter size</button>
</div>
<hr>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-display-icon-size">Icon size</label> <label for="control-link-item-display-icon-size">Icon size</label>
<input id="control-link-display-icon-size" class="control-link-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 class="button-wrap">
<button class="button control-link-item-display-icon-size-default mb-0" type="button">Default icon size</button>
</div> </div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-name-show" class="control-link-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-name-show">Names</label> <label for="control-link-item-name-show">Names</label>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-name-size">Names 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="button control-link-item-name-size-default mb-0" type="button">Default icon size</button>
</div>
</div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-url-show" class="control-link-url-show" type="checkbox" tabindex="1"> <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
<label for="control-link-url-show">URL on hover</label> <label for="control-link-item-url-show">URL on hover</label>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-url-style-dark" class="control-link-url-style-dark" type="radio" name="control-link-url-style" value="dark" tabindex="1"> <input id="control-link-item-url-style-dark" class="control-link-item-url-style-dark" type="radio" name="control-link-item-url-style" value="dark" tabindex="1">
<label for="control-link-url-style-dark">Dark text</label> <label for="control-link-item-url-style-dark">Dark text</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-url-style-light" class="control-link-url-style-light" type="radio" name="control-link-url-style" value="light" tabindex="1"> <input id="control-link-item-url-style-light" class="control-link-item-url-style-light" type="radio" name="control-link-item-url-style" value="light" tabindex="1">
<label for="control-link-url-style-light">Light text</label> <label for="control-link-item-url-style-light">Light text</label>
</div> </div>
</div> </div>
<hr> <hr>
<label class="control-link-display-alignment-horizontal-label">Content Horizontal Alignment</label>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-display-alignment-horizontal-left" class="control-link-display-alignment-horizontal-left" type="radio" name="control-link-display-alignment-horizontal" value="left" tabindex="1"> <label for="control-link-area-gap">Gap size</label>
<label for="control-link-display-alignment-horizontal-left">Left</label> <input id="control-link-area-gap" class="control-link-area-gap" type="range" min="0" max="20" value="0" tabindex="1">
</div>
<div class="input-wrap">
<input id="control-link-display-alignment-horizontal-center" class="control-link-display-alignment-horizontal-center" type="radio" name="control-link-display-alignment-horizontal" value="center" tabindex="1">
<label for="control-link-display-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-link-display-alignment-horizontal-right" class="control-link-display-alignment-horizontal-right" type="radio" name="control-link-display-alignment-horizontal" value="right" tabindex="1">
<label for="control-link-display-alignment-horizontal-right">Right</label>
</div> </div>
<hr> <hr>
<label class="control-link-display-alignment-vertical-label">Content Vertical 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-display-alignment-vertical-top" class="control-link-display-alignment-vertical-top" type="radio" name="control-link-display-alignment-vertical" value="top" 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">
<label for="control-link-display-alignment-vertical-top">Top</label> <label for="control-link-item-display-alignment-horizontal-left">Left</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-display-alignment-vertical-center" class="control-link-display-alignment-vertical-center" type="radio" name="control-link-display-alignment-vertical" value="center" tabindex="1"> <input id="control-link-item-display-alignment-horizontal-center" class="control-link-item-display-alignment-horizontal-center" type="radio" name="control-link-item-display-alignment-horizontal" value="center" tabindex="1">
<label for="control-link-display-alignment-vertical-center">Centre</label> <label for="control-link-item-display-alignment-horizontal-center">Centre</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-display-alignment-vertical-bottom" class="control-link-display-alignment-vertical-bottom" type="radio" name="control-link-display-alignment-vertical" value="bottom" tabindex="1"> <input id="control-link-item-display-alignment-horizontal-right" class="control-link-item-display-alignment-horizontal-right" type="radio" name="control-link-item-display-alignment-horizontal" value="right" tabindex="1">
<label for="control-link-display-alignment-vertical-bottom">Bottom</label> <label for="control-link-item-display-alignment-horizontal-right">Right</label>
</div> </div>
<hr> <hr>
<label class="control-link-fit-label">Bookmark size</label> <label class="control-link-item-display-alignment-vertical-label">Content Vertical Alignment</label>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-fit-best" class="control-link-fit-best" type="radio" name="control-link-fit" value="best" tabindex="1"> <input id="control-link-item-display-alignment-vertical-top" class="control-link-item-display-alignment-vertical-top" type="radio" name="control-link-item-display-alignment-vertical" value="top" tabindex="1">
<label for="control-link-fit-best">Best fit</label> <label for="control-link-item-display-alignment-vertical-top">Top</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-fit-custom" class="control-link-fit-custom" type="radio" name="control-link-fit" value="custom" tabindex="1"> <input id="control-link-item-display-alignment-vertical-center" class="control-link-item-display-alignment-vertical-center" type="radio" name="control-link-item-display-alignment-vertical" value="center" tabindex="1">
<label for="control-link-fit-custom">Custom</label> <label for="control-link-item-display-alignment-vertical-center">Centre</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-items-width">Width</label>
<input id="control-link-items-width" class="control-link-items-width" type="range" min="5" max="100" value="0" tabindex="1">
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div>
<hr>
<label class="control-link-items-alignment-horizontal-label">Bookmark Horizontal Alignment</label>
<div class="input-wrap">
<input id="control-link-items-alignment-horizontal-left" class="control-link-items-alignment-horizontal-left" type="radio" name="control-link-items-alignment-horizontal" value="left" tabindex="1">
<label for="control-link-items-alignment-horizontal-left">Left</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-items-alignment-horizontal-center" class="control-link-items-alignment-horizontal-center" type="radio" name="control-link-items-alignment-horizontal" value="center" tabindex="1"> <input id="control-link-item-display-alignment-vertical-bottom" class="control-link-item-display-alignment-vertical-bottom" type="radio" name="control-link-item-display-alignment-vertical" value="bottom" tabindex="1">
<label for="control-link-items-alignment-horizontal-center">Centre</label> <label for="control-link-item-display-alignment-vertical-bottom">Bottom</label>
</div>
<div class="input-wrap">
<input id="control-link-items-alignment-horizontal-right" class="control-link-items-alignment-horizontal-right" type="radio" name="control-link-items-alignment-horizontal" value="right" tabindex="1">
<label for="control-link-items-alignment-horizontal-right">Right</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -803,10 +801,12 @@
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="1"> <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="1">
<label for="control-link-style-block">Block</label> <label for="control-link-style-block">Block</label>
<p class="input-helper small muted">Bookmark tiles more square shaped with content stacked vertically.</p>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="1"> <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="1">
<label for="control-link-style-list">List</label> <label for="control-link-style-list">List</label>
<p class="input-helper small muted">Bookmark tiles more short and wide with content stacked horizontally.</p>
</div> </div>
</div> </div>
</div> </div>

523
js/control.js
View File

@ -300,22 +300,22 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-items-alignment-horizontal-left"), element: helper.e(".control-header-item-alignment-horizontal-left"),
path: "header.items.alignment.horizontal", path: "header.item.alignment.horizontal",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-items-alignment-horizontal-center"), element: helper.e(".control-header-item-alignment-horizontal-center"),
path: "header.items.alignment.horizontal", path: "header.item.alignment.horizontal",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-items-alignment-horizontal-right"), element: helper.e(".control-header-item-alignment-horizontal-right"),
path: "header.items.alignment.horizontal", path: "header.item.alignment.horizontal",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
@ -1265,130 +1265,10 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-link-show"), element: helper.e(".control-link-item-size"),
path: "link.show", path: "link.item.size",
type: "checkbox",
func: function() {
render();
dependents();
search.render();
}
}, {
element: helper.e(".control-link-display-show"),
path: "link.display.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-display-letter-size"),
path: "link.display.letter.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() {
link.render.displayLetterIcon.size();
}
}, {
element: helper.e(".control-link-display-icon-size"),
path: "link.display.icon.size",
type: "range",
valueMod: ["float"],
func: function() {
link.render.displayLetterIcon.size();
}
}, {
element: helper.e(".control-link-name-show"),
path: "link.name.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-url-show"),
path: "link.url.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-url-style-dark"),
path: "link.url.style",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-url-style-light"),
path: "link.url.style",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-horizontal-left"),
path: "link.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-horizontal-center"),
path: "link.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-horizontal-right"),
path: "link.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-vertical-top"),
path: "link.display.alignment.vertical",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-vertical-center"),
path: "link.display.alignment.vertical",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-display-alignment-vertical-bottom"),
path: "link.display.alignment.vertical",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-fit-best"),
path: "link.fit",
type: "radio",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-fit-custom"),
path: "link.fit",
type: "radio",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-items-width"),
path: "link.items.width",
type: "range",
additionalEvents: [{ additionalEvents: [{
event: "input", event: "input",
func: function() { func: function() {
@ -1429,53 +1309,162 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
link.render.items(); link.render.item.size.set();
} }
}, { }, {
element: helper.e(".control-link-items-alignment-horizontal-left"), element: helper.e(".control-link-item-size-default"),
path: "link.items.alignment.horizontal", type: "button",
type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "click",
func: function() { func: function() {
edge.render({ edge.render({
element: helper.e(".link-area"), element: helper.e(".link-item"),
delay: 500 delay: 500
}); });
} }
}], }],
func: function() {
link.render.item.size.default();
update();
}
}, {
element: helper.e(".control-link-show"),
path: "link.show",
type: "checkbox",
func: function() {
render();
dependents();
search.render();
}
}, {
element: helper.e(".control-link-item-display-show"),
path: "link.item.display.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-item-display-letter-size"),
path: "link.item.display.letter.size",
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.display.letter.set();
}
}, {
element: helper.e(".control-link-item-display-letter-size-default"),
type: "button",
func: function() {
link.render.item.display.letter.default();
update();
}
}, {
element: helper.e(".control-link-item-display-icon-size"),
path: "link.item.display.icon.size",
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.display.icon.set();
}
}, {
element: helper.e(".control-link-item-display-icon-size-default"),
type: "button",
func: function() {
link.render.item.display.icon.default();
update();
}
}, {
element: helper.e(".control-link-item-name-show"),
path: "link.item.name.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-item-name-size"),
path: "link.item.name.size",
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.name.set();
}
}, {
element: helper.e(".control-link-item-name-size-default"),
type: "button",
func: function() {
link.render.item.name.default();
update();
}
}, {
element: helper.e(".control-link-item-url-show"),
path: "link.item.url.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-link-item-url-style-dark"),
path: "link.item.url.style",
type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-items-alignment-horizontal-center"), element: helper.e(".control-link-item-url-style-light"),
path: "link.items.alignment.horizontal", path: "link.item.url.style",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".link-area"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-items-alignment-horizontal-right"), element: helper.e(".control-link-area-gap"),
path: "link.items.alignment.horizontal", path: "link.area.gap",
type: "radio", type: "range",
additionalEvents: [{
event: "change",
func: function() { func: function() {
edge.render({ link.render.area.gap();
element: helper.e(".link-area"),
delay: 500
});
} }
}], }, {
element: helper.e(".control-link-item-display-alignment-horizontal-left"),
path: "link.item.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-horizontal-center"),
path: "link.item.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-horizontal-right"),
path: "link.item.display.alignment.horizontal",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-vertical-top"),
path: "link.item.display.alignment.vertical",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-vertical-center"),
path: "link.item.display.alignment.vertical",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-vertical-bottom"),
path: "link.item.display.alignment.vertical",
type: "radio",
func: function() { func: function() {
render(); render();
} }
@ -1485,7 +1474,7 @@ var control = (function() {
type: "checkbox", type: "checkbox",
func: function() { func: function() {
link.clear(); link.clear();
link.render.link(); link.render.item.all();
} }
}, { }, {
element: helper.e(".control-link-style-block"), element: helper.e(".control-link-style-block"),
@ -1507,7 +1496,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
link.clear(); link.clear();
link.render.link(); link.render.item.all();
} }
}, { }, {
element: helper.e(".control-link-sort-letter"), element: helper.e(".control-link-sort-letter"),
@ -1515,7 +1504,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
link.clear(); link.clear();
link.render.link(); link.render.item.all();
} }
}, { }, {
element: helper.e(".control-link-sort-icon"), element: helper.e(".control-link-sort-icon"),
@ -1523,7 +1512,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
link.clear(); link.clear();
link.render.link(); link.render.item.all();
} }
}, { }, {
element: helper.e(".control-link-sort-name"), element: helper.e(".control-link-sort-name"),
@ -1531,7 +1520,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
link.clear(); link.clear();
link.render.link(); link.render.item.all();
} }
}, { }, {
element: helper.e(".control-theme-style-dark"), element: helper.e(".control-theme-style-dark"),
@ -1750,11 +1739,11 @@ var control = (function() {
helper.removeClass(html, "is-header-area-alignment-horizontal-right"); helper.removeClass(html, "is-header-area-alignment-horizontal-right");
helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal); helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal);
}; };
var _items = function() { var _item = function() {
helper.removeClass(html, "is-header-items-alignment-horizontal-left"); helper.removeClass(html, "is-header-item-alignment-horizontal-left");
helper.removeClass(html, "is-header-items-alignment-horizontal-center"); helper.removeClass(html, "is-header-item-alignment-horizontal-center");
helper.removeClass(html, "is-header-items-alignment-horizontal-right"); helper.removeClass(html, "is-header-item-alignment-horizontal-right");
helper.addClass(html, "is-header-items-alignment-horizontal-" + state.get().header.items.alignment.horizontal); helper.addClass(html, "is-header-item-alignment-horizontal-" + state.get().header.item.alignment.horizontal);
}; };
var _clock = function() { var _clock = function() {
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) { if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
@ -1833,7 +1822,7 @@ var control = (function() {
}; };
}; };
_area(); _area();
_items(); _item();
_clock(); _clock();
_date(); _date();
_search(); _search();
@ -1860,11 +1849,9 @@ var control = (function() {
helper.removeClass(html, "is-link-url-show"); helper.removeClass(html, "is-link-url-show");
helper.removeClass(html, "is-link-url-style-light"); helper.removeClass(html, "is-link-url-style-light");
helper.removeClass(html, "is-link-url-style-dark"); helper.removeClass(html, "is-link-url-style-dark");
helper.removeClass(html, "is-link-fit-custom"); helper.removeClass(html, "is-link-item-alignment-horizontal-left");
helper.removeClass(html, "is-link-fit-best"); helper.removeClass(html, "is-link-item-alignment-horizontal-center");
helper.removeClass(html, "is-link-items-alignment-horizontal-left"); helper.removeClass(html, "is-link-item-alignment-horizontal-right");
helper.removeClass(html, "is-link-items-alignment-horizontal-center");
helper.removeClass(html, "is-link-items-alignment-horizontal-right");
helper.removeClass(html, "is-link-style-list"); helper.removeClass(html, "is-link-style-list");
helper.removeClass(html, "is-link-style-block"); helper.removeClass(html, "is-link-style-block");
helper.removeClass(html, "is-link-edit"); helper.removeClass(html, "is-link-edit");
@ -1872,19 +1859,17 @@ var control = (function() {
if (state.get().link.show) { if (state.get().link.show) {
helper.addClass(html, "is-link-show"); helper.addClass(html, "is-link-show");
helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal); helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal);
helper.addClass(html, "is-link-items-alignment-horizontal-" + state.get().link.items.alignment.horizontal); helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.item.display.alignment.horizontal);
helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.display.alignment.horizontal); helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.item.display.alignment.vertical);
helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.display.alignment.vertical);
helper.addClass(html, "is-link-style-" + state.get().link.style); helper.addClass(html, "is-link-style-" + state.get().link.style);
helper.addClass(html, "is-link-fit-" + state.get().link.fit); helper.addClass(html, "is-link-url-style-" + state.get().link.item.url.style);
helper.addClass(html, "is-link-url-style-" + state.get().link.url.style); if (state.get().link.item.name.show) {
if (state.get().link.name.show) {
helper.addClass(html, "is-link-name-show"); helper.addClass(html, "is-link-name-show");
}; };
if (state.get().link.display.show) { if (state.get().link.item.display.show) {
helper.addClass(html, "is-link-display-show"); helper.addClass(html, "is-link-display-show");
}; };
if (state.get().link.url.show) { if (state.get().link.item.url.show) {
helper.addClass(html, "is-link-url-show"); helper.addClass(html, "is-link-url-show");
}; };
if (state.get().link.edit) { if (state.get().link.edit) {
@ -2191,6 +2176,47 @@ var control = (function() {
}; };
}; };
var _link = function() { var _link = function() {
helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
helper.e(".control-link-area-width").disabled = true;
helper.e(".control-link-area-width-match").disabled = true;
helper.e(".control-link-area-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-area-alignment-horizontal-left").disabled = true;
helper.e(".control-link-area-alignment-horizontal-center").disabled = true;
helper.e(".control-link-area-alignment-horizontal-right").disabled = true;
helper.e("[for=control-link-item-size]").setAttribute("disabled", "");
helper.e(".control-link-item-size").disabled = true;
helper.e(".control-link-item-size-default").disabled = true;
helper.e(".control-link-item-display-show").disabled = true;
helper.e("[for=control-link-item-display-letter-size]").setAttribute("disabled", "");
helper.e(".control-link-item-display-letter-size").disabled = true;
helper.e(".control-link-item-display-letter-size-default").disabled = true;
helper.e("[for=control-link-item-display-icon-size]").setAttribute("disabled", "");
helper.e(".control-link-item-display-icon-size").disabled = true;
helper.e(".control-link-item-display-icon-size-default").disabled = true;
helper.e(".control-link-item-name-show").disabled = true;
helper.e("[for=control-link-item-name-size]").setAttribute("disabled", "");
helper.e(".control-link-item-name-size").disabled = true;
helper.e(".control-link-item-name-size-default").disabled = true;
helper.e(".control-link-item-url-show").disabled = true;
helper.e(".control-link-item-url-style-dark").disabled = true;
helper.e(".control-link-item-url-style-light").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;
helper.e(".control-link-item-display-alignment-horizontal-right").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-label").setAttribute("disabled", "");
helper.e(".control-link-item-display-alignment-vertical-top").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-center").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = true;
helper.e(".control-link-new-tab").disabled = true;
helper.e(".control-link-style-block").disabled = true;
helper.e(".control-link-style-list").disabled = true;
helper.e(".control-link-sort-none").disabled = true;
helper.e(".control-link-sort-name").disabled = true;
helper.e(".control-link-sort-letter").disabled = true;
helper.e(".control-link-sort-icon").disabled = true;
if (state.get().link.show) { if (state.get().link.show) {
helper.e("[for=control-link-area-width]").removeAttribute("disabled"); helper.e("[for=control-link-area-width]").removeAttribute("disabled");
helper.e(".control-link-area-width").disabled = false; helper.e(".control-link-area-width").disabled = false;
@ -2199,123 +2225,48 @@ var control = (function() {
helper.e(".control-link-area-alignment-horizontal-left").disabled = false; helper.e(".control-link-area-alignment-horizontal-left").disabled = false;
helper.e(".control-link-area-alignment-horizontal-center").disabled = false; helper.e(".control-link-area-alignment-horizontal-center").disabled = false;
helper.e(".control-link-area-alignment-horizontal-right").disabled = false; helper.e(".control-link-area-alignment-horizontal-right").disabled = false;
helper.e(".control-link-fit-label").removeAttribute("disabled"); helper.e("[for=control-link-item-size]").removeAttribute("disabled");
helper.e(".control-link-fit-best").disabled = false; helper.e(".control-link-item-size").disabled = false;
helper.e(".control-link-fit-custom").disabled = false; helper.e(".control-link-item-size-default").disabled = false;
helper.e(".control-link-display-show").disabled = false; helper.e(".control-link-item-display-show").disabled = false;
helper.e(".control-link-name-show").disabled = false; helper.e(".control-link-item-name-show").disabled = false;
helper.e(".control-link-url-show").disabled = false; helper.e(".control-link-item-url-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-block").disabled = false;
helper.e(".control-link-style-list").disabled = false; helper.e(".control-link-style-list").disabled = false;
helper.e(".control-link-new-tab").disabled = false;
helper.e(".control-link-sort-none").disabled = false; helper.e(".control-link-sort-none").disabled = false;
helper.e(".control-link-sort-name").disabled = false; helper.e(".control-link-sort-name").disabled = false;
helper.e(".control-link-sort-letter").disabled = false; helper.e(".control-link-sort-letter").disabled = false;
helper.e(".control-link-sort-icon").disabled = false; helper.e(".control-link-sort-icon").disabled = false;
helper.e("[for=control-link-display-letter-size]").removeAttribute("disabled"); if (state.get().link.item.display.show) {
helper.e(".control-link-display-letter-size").disabled = false; helper.e("[for=control-link-item-display-letter-size]").removeAttribute("disabled");
helper.e("[for=control-link-display-icon-size]").removeAttribute("disabled"); helper.e(".control-link-item-display-letter-size").disabled = false;
helper.e(".control-link-display-icon-size").disabled = false; helper.e(".control-link-item-display-letter-size-default").disabled = false;
helper.e(".control-link-display-alignment-horizontal-label").removeAttribute("disabled"); helper.e("[for=control-link-item-display-icon-size]").removeAttribute("disabled");
helper.e(".control-link-display-alignment-horizontal-left").disabled = false; helper.e(".control-link-item-display-icon-size").disabled = false;
helper.e(".control-link-display-alignment-horizontal-center").disabled = false; helper.e(".control-link-item-display-icon-size-default").disabled = false;
helper.e(".control-link-display-alignment-horizontal-right").disabled = false;
helper.e(".control-link-display-alignment-vertical-label").removeAttribute("disabled");
helper.e(".control-link-display-alignment-vertical-top").disabled = false;
helper.e(".control-link-display-alignment-vertical-center").disabled = false;
helper.e(".control-link-display-alignment-vertical-bottom").disabled = false;
} else {
helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
helper.e(".control-link-area-width").disabled = true;
helper.e(".control-link-area-width-match").disabled = true;
helper.e(".control-link-area-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-area-alignment-horizontal-left").disabled = true;
helper.e(".control-link-area-alignment-horizontal-center").disabled = true;
helper.e(".control-link-area-alignment-horizontal-right").disabled = true;
helper.e(".control-link-fit-label").setAttribute("disabled", "");
helper.e(".control-link-fit-best").disabled = true;
helper.e(".control-link-fit-custom").disabled = true;
helper.e(".control-link-display-show").disabled = true;
helper.e(".control-link-name-show").disabled = true;
helper.e(".control-link-url-show").disabled = true;
helper.e(".control-link-style-block").disabled = true;
helper.e(".control-link-style-list").disabled = true;
helper.e(".control-link-new-tab").disabled = true;
helper.e(".control-link-sort-none").disabled = true;
helper.e(".control-link-sort-name").disabled = true;
helper.e(".control-link-sort-letter").disabled = true;
helper.e(".control-link-sort-icon").disabled = true;
helper.e("[for=control-link-display-letter-size]").setAttribute("disabled", "");
helper.e(".control-link-display-letter-size").disabled = true;
helper.e("[for=control-link-display-icon-size]").setAttribute("disabled", "");
helper.e(".control-link-display-icon-size").disabled = true;
helper.e(".control-link-display-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-display-alignment-horizontal-left").disabled = true;
helper.e(".control-link-display-alignment-horizontal-center").disabled = true;
helper.e(".control-link-display-alignment-horizontal-right").disabled = true;
helper.e(".control-link-display-alignment-vertical-label").setAttribute("disabled", "");
helper.e(".control-link-display-alignment-vertical-top").disabled = true;
helper.e(".control-link-display-alignment-vertical-center").disabled = true;
helper.e(".control-link-display-alignment-vertical-bottom").disabled = true;
}; };
if (state.get().link.show && (state.get().link.display.show || state.get().link.name.show || state.get().link.url.show)) { if (state.get().link.item.name.show) {
helper.e(".control-link-display-alignment-horizontal-label").removeAttribute("disabled"); helper.e("[for=control-link-item-name-size]").removeAttribute("disabled");
helper.e(".control-link-display-alignment-horizontal-left").disabled = false; helper.e(".control-link-item-name-size").disabled = false;
helper.e(".control-link-display-alignment-horizontal-center").disabled = false; helper.e(".control-link-item-name-size-default").disabled = false;
helper.e(".control-link-display-alignment-horizontal-right").disabled = false;
helper.e(".control-link-display-alignment-vertical-label").removeAttribute("disabled");
helper.e(".control-link-display-alignment-vertical-top").disabled = false;
helper.e(".control-link-display-alignment-vertical-center").disabled = false;
helper.e(".control-link-display-alignment-vertical-bottom").disabled = false;
} else {
helper.e(".control-link-display-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-display-alignment-horizontal-left").disabled = true;
helper.e(".control-link-display-alignment-horizontal-center").disabled = true;
helper.e(".control-link-display-alignment-horizontal-right").disabled = true;
helper.e(".control-link-display-alignment-vertical-label").setAttribute("disabled", "");
helper.e(".control-link-display-alignment-vertical-top").disabled = true;
helper.e(".control-link-display-alignment-vertical-center").disabled = true;
helper.e(".control-link-display-alignment-vertical-bottom").disabled = true;
}; };
if (state.get().link.show && state.get().link.display.show) { if (state.get().link.item.display.show || state.get().link.item.name.show || state.get().link.item.url.show) {
helper.e("[for=control-link-display-letter-size]").removeAttribute("disabled"); helper.e(".control-link-item-display-alignment-horizontal-label").removeAttribute("disabled");
helper.e(".control-link-display-letter-size").disabled = false; helper.e(".control-link-item-display-alignment-horizontal-left").disabled = false;
helper.e("[for=control-link-display-icon-size]").removeAttribute("disabled"); helper.e(".control-link-item-display-alignment-horizontal-center").disabled = false;
helper.e(".control-link-display-icon-size").disabled = false; helper.e(".control-link-item-display-alignment-horizontal-right").disabled = false;
} else { helper.e(".control-link-item-display-alignment-vertical-label").removeAttribute("disabled");
helper.e("[for=control-link-display-letter-size]").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-vertical-top").disabled = false;
helper.e(".control-link-display-letter-size").disabled = true; helper.e(".control-link-item-display-alignment-vertical-center").disabled = false;
helper.e("[for=control-link-display-icon-size]").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = false;
helper.e(".control-link-display-icon-size").disabled = true;
}; };
if (state.get().link.show && state.get().link.url.show) { if (state.get().link.item.url.show) {
helper.e(".control-link-url-style-dark").disabled = false; helper.e(".control-link-item-url-style-dark").disabled = false;
helper.e(".control-link-url-style-light").disabled = false; helper.e(".control-link-item-url-style-light").disabled = false;
} else {
helper.e(".control-link-url-style-dark").disabled = true;
helper.e(".control-link-url-style-light").disabled = true;
}; };
if (state.get().link.show && state.get().link.fit == "best") {
helper.e("[for=control-link-items-width]").setAttribute("disabled", "");
helper.e(".control-link-items-width").disabled = true;
helper.e(".control-link-items-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-items-alignment-horizontal-left").disabled = true;
helper.e(".control-link-items-alignment-horizontal-center").disabled = true;
helper.e(".control-link-items-alignment-horizontal-right").disabled = true;
} else if (state.get().link.show && state.get().link.fit == "custom") {
helper.e("[for=control-link-items-width]").removeAttribute("disabled");
helper.e(".control-link-items-width").disabled = false;
helper.e(".control-link-items-alignment-horizontal-label").removeAttribute("disabled");
helper.e(".control-link-items-alignment-horizontal-left").disabled = false;
helper.e(".control-link-items-alignment-horizontal-center").disabled = false;
helper.e(".control-link-items-alignment-horizontal-right").disabled = false;
} else {
helper.e("[for=control-link-items-width]").setAttribute("disabled", "");
helper.e(".control-link-items-width").disabled = true;
helper.e(".control-link-items-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-items-alignment-horizontal-left").disabled = true;
helper.e(".control-link-items-alignment-horizontal-center").disabled = true;
helper.e(".control-link-items-alignment-horizontal-right").disabled = true;
}; };
}; };
var _theme = function() { var _theme = function() {

153
js/link.js
View File

@ -60,7 +60,7 @@ var link = (function() {
bookmarks.add(JSON.parse(JSON.stringify(link.stagedBookmarkData))); bookmarks.add(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
data.save(); data.save();
clear(); clear();
render.link(); render.item.all();
render.tabIndex(); render.tabIndex();
control.dependents(); control.dependents();
control.render(); control.render();
@ -113,7 +113,7 @@ var link = (function() {
bookmarks.edit(JSON.parse(JSON.stringify(link.stagedBookmarkData))); bookmarks.edit(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
data.save(); data.save();
clear(); clear();
render.link(); render.item.all();
render.tabIndex(); render.tabIndex();
_returnToPreviousFocusLink(); _returnToPreviousFocusLink();
resetStagedBookmarkData(); resetStagedBookmarkData();
@ -133,7 +133,7 @@ var link = (function() {
_checkCount(); _checkCount();
data.save(); data.save();
clear(); clear();
render.link(); render.item.all();
}; };
var _checkCount = function() { var _checkCount = function() {
@ -507,31 +507,69 @@ var link = (function() {
}; };
var render = { var render = {
width: { area: {
set: function() { gap: function() {
_width(); _areaGap();
},
match: function() {
_match();
} }
}, },
displayLetterIcon: { width: {
size: function() { set: function() {
_size(); _renderWidthSet();
}, },
match: function() {
_renderWidthMatch();
}
},
item: {
all: function() {
_renderItemAll();
},
display: {
letter: {
set: function() {
_renderItemDisplayLetterSet();
},
default: function() {
_renderItemDisplayLetterDefault();
}
},
icon: {
set: function() {
_renderItemDisplayIconSet();
},
default: function() {
_renderItemDisplayIconDefault();
}
}
},
name: {
set: function() {
_renderItemNameSet();
},
default: function() {
_renderItemNameDefault();
}
},
size: {
set: function() {
_renderItemSizeSet();
},
default: function() {
_renderItemSizeDefault();
}
}, },
link: function() {
_link();
}, },
tabIndex: function() { tabIndex: function() {
_tabIndex(); _renderTabIndex();
},
items: function() {
_items();
} }
}; };
var _link = function() { var _areaGap = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-gutter-multiplier", state.get().link.area.gap);
};
var _renderItemAll = function() {
var linkArea = helper.e(".link-area"); var linkArea = helper.e(".link-area");
var bookmarksToRender = false; var bookmarksToRender = false;
if (state.get().search) { if (state.get().search) {
@ -579,18 +617,68 @@ var link = (function() {
}; };
}; };
var _width = function() { var _renderWidthSet = 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 + "%");
}; };
var _size = function() { var _renderItemDisplayLetterSet = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-display-letter-size", state.get().link.display.letter.size + "em"); html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
html.style.setProperty("--link-display-icon-size", state.get().link.display.icon.size + "em");
}; };
var _match = function() { var _renderItemDisplayLetterDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.letter.size",
newValue: 2
});
render.item.display.letter.set();
};
var _renderItemDisplayIconSet = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
};
var _renderItemDisplayIconDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.icon.size",
newValue: 2
});
render.item.display.icon.set();
};
var _renderItemNameSet = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
};
var _renderItemNameDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.name.size",
newValue: 0.9
});
render.item.name.set();
};
var _renderItemSizeSet = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
};
var _renderItemSizeDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.size",
newValue: 1
});
render.item.size.set();
};
var _renderWidthMatch = function() {
helper.setObject({ helper.setObject({
object: state.get(), object: state.get(),
path: "link.area.width", path: "link.area.width",
@ -599,12 +687,7 @@ var link = (function() {
render.width.set(); render.width.set();
}; };
var _items = function() { var _renderTabIndex = function() {
var html = helper.e("html");
html.style.setProperty("--link-items-width", state.get().link.items.width + "%");
};
var _tabIndex = function() {
var allLinkControlItem = helper.eA(".link-control-item"); var allLinkControlItem = helper.eA(".link-control-item");
if (state.get().link.edit) { if (state.get().link.edit) {
allLinkControlItem.forEach(function(arrayItem, index) { allLinkControlItem.forEach(function(arrayItem, index) {
@ -625,10 +708,14 @@ var link = (function() {
}; };
var init = function() { var init = function() {
render.link(); render.area.gap();
render.displayLetterIcon.size(); render.item.all();
render.item.size.set();
render.item.display.letter.set();
render.item.display.icon.set();
render.item.name.set();
render.item.name.default();
render.width.set(); render.width.set();
render.items();
}; };
// exposed methods // exposed methods

4
js/search.js
View File

@ -7,7 +7,7 @@ var search = (function() {
_toggle(this); _toggle(this);
_searchClear(); _searchClear();
link.clear(); link.clear();
link.render.link(); link.render.item.all();
}, false); }, false);
searchClear.addEventListener("click", function() { searchClear.addEventListener("click", function() {
_toggle(this); _toggle(this);
@ -82,7 +82,7 @@ var search = (function() {
searchInput.value = ""; searchInput.value = "";
searchInput.focus(); searchInput.focus();
link.clear(); link.clear();
link.render.link(); link.render.item.all();
}; };
var _focus = function() { var _focus = function() {

22
js/state.js
View File

@ -8,7 +8,7 @@ var state = (function() {
horizontal: "center" horizontal: "center"
} }
}, },
items: { item: {
alignment: { alignment: {
horizontal: "left" horizontal: "left"
} }
@ -134,40 +134,38 @@ var state = (function() {
}, },
link: { link: {
area: { area: {
gap: 2,
width: 100, width: 100,
alignment: { alignment: {
horizontal: "center" horizontal: "center"
} }
}, },
items: { item: {
width: 12, size: 1,
alignment: {
horizontal: "left"
}
},
display: { display: {
show: true, show: true,
size: 2, size: 2,
alignment: { alignment: {
horizontal: "center", horizontal: "right",
vertical: "center" vertical: "bottom"
}, },
letter: { letter: {
size: 2 size: 2
}, },
icon: { icon: {
size: 2.5 size: 2
} }
}, },
name: { name: {
show: true show: true,
size: 0.9,
}, },
url: { url: {
show: true, show: true,
style: "dark" style: "dark"
}, },
},
show: true, show: true,
fit: "best",
newTab: false, newTab: false,
edit: false, edit: false,
style: "block", style: "block",

23
js/update.js
View File

@ -400,6 +400,25 @@ var update = (function() {
return data; return data;
}; };
var _update_360 = function(data) {
data.version = "3.6.0";
data.state.header.item = data.state.header.items;
delete data.state.header.items;
data.state.link.area.gap = 2;
delete data.state.link.items;
data.state.link.item = {
size: 1,
display: data.state.link.display,
name: data.state.link.name,
url: data.state.link.url
};
data.state.link.item.name.size = 0.9;
delete data.state.link.display;
delete data.state.link.name;
delete data.state.link.url;
return data;
};
// var _update_300 = function(data) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -506,6 +525,10 @@ var update = (function() {
console.log("\t= running update 3.4.0"); console.log("\t= running update 3.4.0");
data = _update_340(data); data = _update_340(data);
}; };
if (version.compare(data.version, "3.6.0") == -1) {
console.log("\t= running update 3.6.0");
data = _update_360(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.5.0"; var current = "3.6.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");