extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-23 05:30: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;
--line-width: 0.2em;
--background: rgb(var(--gray-01));
--gutter: 0.5em;
--gutter: 0.5rem;
--animation-speed-fast: 0.2s;
--animation-speed-medium: 0.4s;
--animation-speed-slow: 0.6s;
@ -80,8 +80,11 @@
--header-border-width-multiplier-top: 1;
--header-border-width-multiplier-bottom: 1;
--link-area-width: 100%;
--link-display-letter-size: 2em;
--link-display-icon-size: 2.5em;
--link-area-gutter-multiplier: 2;
--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-opacity: 1;
--background-accent-opacity: 0;
@ -104,15 +107,15 @@
}
:root.is-link-style-block {
--link-items-width: 20%;
--link-items-height: 10em;
--link-item-width: 11em;
--link-item-height: 10em;
--url-height: 20%;
--edit-height: 30%;
}
:root.is-link-style-list {
--link-items-width: 20%;
--link-items-height: 4em;
--link-item-width: 20em;
--link-item-height: 4em;
--url-height: 30%;
--edit-height: 50%;
}

14
css/clock.css
View File

@ -13,15 +13,15 @@
flex-wrap: wrap;
}
.is-header-items-alignment-horizontal-left .clock {
.is-header-item-alignment-horizontal-left .clock {
justify-content: flex-start;
}
.is-header-items-alignment-horizontal-center .clock {
.is-header-item-alignment-horizontal-center .clock {
justify-content: center;
}
.is-header-items-alignment-horizontal-right .clock {
.is-header-item-alignment-horizontal-right .clock {
justify-content: flex-end;
}
@ -50,17 +50,17 @@
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;
}
.is-header-items-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(:first-child),
.is-header-item-alignment-horizontal-center .clock-item:not(:last-child) {
margin-left: 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;
}

14
css/date.css
View File

@ -13,15 +13,15 @@
flex-wrap: wrap;
}
.is-header-items-alignment-horizontal-left .date {
.is-header-item-alignment-horizontal-left .date {
justify-content: flex-start;
}
.is-header-items-alignment-horizontal-center .date {
.is-header-item-alignment-horizontal-center .date {
justify-content: center;
}
.is-header-items-alignment-horizontal-right .date {
.is-header-item-alignment-horizontal-right .date {
justify-content: flex-end;
}
@ -49,17 +49,17 @@
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;
}
.is-header-items-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(:first-child),
.is-header-item-alignment-horizontal-center .date-item:not(:last-child) {
margin-left: 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;
}

6
css/header.css
View File

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

74
css/link.css
View File

@ -25,35 +25,13 @@
padding-bottom: calc(var(--gutter) * 4);
padding-left: calc(var(--gutter) * 4);
padding-right: calc(var(--gutter) * 4);
font-size: calc(var(--link-item-size) * 1);
position: relative;
width: var(--link-area-width);
}
.is-link-fit-best .link-area {
display: grid;
grid-auto-rows: 1fr;
grid-gap: calc(var(--gutter) * 2);
}
.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;
grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier));
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
}
.is-header-border-bottom-show .link-area,
@ -61,27 +39,21 @@
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 {
font-size: 1em;
position: relative;
height: var(--link-item-height);
display: block;
transform: scale(1);
transition: transform var(--animation-speed-fast) ease-in-out;
direction: ltr;
z-index: 1;
}
.link-item:focus-within,
.link-item:focus,
.link-item:hover {
transform: scale(1.06);
z-index: 2;
}
.link-item:active {
@ -89,16 +61,6 @@
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 {
background-color: rgb(var(--gray-02));
border-radius: var(--radius);
@ -109,7 +71,7 @@
overflow: hidden;
position: relative;
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,
@ -310,7 +272,7 @@
}
.link-display {
font-size: 1rem;
font-size: 1em;
display: none;
}
@ -339,12 +301,12 @@
.is-link-style-block .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-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) {
@ -369,12 +331,12 @@
.link-name {
margin: 0;
font-size: 0.9em;
font-size: var(--link-item-name-size);
font-family: var(--font-regular);
color: rgb(var(--gray-12));
display: none;
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 {
@ -403,20 +365,14 @@
}
.link-empty {
grid-column-start: 1;
grid-column-end: -1;
text-align: center;
}
.link-empty-heading {
color: rgb(var(--gray-16));
}
.is-link-fit-best .link-empty {
grid-column-start: 1;
grid-column-end: -1;
}
.is-link-fit-custom .link-empty {
margin: 1em;
font-size: 1.5rem;
}
.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>
</div>
<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>
<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">
<label for="control-header-items-alignment-horizontal-left">Left</label>
<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-item-alignment-horizontal-left">Left</label>
</div>
<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">
<label for="control-header-items-alignment-horizontal-center">Centre</label>
<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-item-alignment-horizontal-center">Centre</label>
</div>
<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">
<label for="control-header-items-alignment-horizontal-right">Right</label>
<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-item-alignment-horizontal-right">Right</label>
</div>
</div>
</div>
@ -683,103 +683,101 @@
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-link-show" class="control-link-link-show" type="checkbox" tabindex="1">
<label for="control-link-link-show">Show</label>
<input id="control-link-show" class="control-link-show" type="checkbox" tabindex="1">
<label for="control-link-show">Show</label>
</div>
<div class="form-indent">
<hr>
<div class="input-wrap">
<input id="control-link-display-show" class="control-link-display-show" type="checkbox" tabindex="1">
<label for="control-link-display-show">Letter/Icon</label>
<label for="control-link-item-size">Tile Size</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 class="form-indent">
<div class="input-wrap">
<label for="control-link-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">
<label for="control-link-item-display-letter-size">Letter size</label>
<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="button control-link-item-display-letter-size-default mb-0" type="button">Default letter size</button>
</div>
<hr>
<div class="input-wrap">
<label for="control-link-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">
<label for="control-link-item-display-icon-size">Icon size</label>
<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>
<hr>
<div class="input-wrap">
<input id="control-link-name-show" class="control-link-name-show" type="checkbox" tabindex="1">
<label for="control-link-name-show">Names</label>
<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>
<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>
<hr>
<div class="input-wrap">
<input id="control-link-url-show" class="control-link-url-show" type="checkbox" tabindex="1">
<label for="control-link-url-show">URL on hover</label>
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
<label for="control-link-item-url-show">URL on hover</label>
</div>
<div class="form-indent">
<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">
<label for="control-link-url-style-dark">Dark text</label>
<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-item-url-style-dark">Dark text</label>
</div>
<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">
<label for="control-link-url-style-light">Light text</label>
<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-item-url-style-light">Light text</label>
</div>
</div>
<hr>
<label class="control-link-display-alignment-horizontal-label">Content Horizontal Alignment</label>
<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-display-alignment-horizontal-left">Left</label>
</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>
<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-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">
<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">
<label for="control-link-display-alignment-vertical-top">Top</label>
<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-item-display-alignment-horizontal-left">Left</label>
</div>
<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">
<label for="control-link-display-alignment-vertical-center">Centre</label>
<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-item-display-alignment-horizontal-center">Centre</label>
</div>
<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">
<label for="control-link-display-alignment-vertical-bottom">Bottom</label>
<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-item-display-alignment-horizontal-right">Right</label>
</div>
<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">
<input id="control-link-fit-best" class="control-link-fit-best" type="radio" name="control-link-fit" value="best" tabindex="1">
<label for="control-link-fit-best">Best fit</label>
<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-item-display-alignment-vertical-top">Top</label>
</div>
<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">
<label for="control-link-fit-custom">Custom</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>
<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-item-display-alignment-vertical-center">Centre</label>
</div>
<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">
<label for="control-link-items-alignment-horizontal-center">Centre</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>
<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-item-display-alignment-vertical-bottom">Bottom</label>
</div>
</div>
</div>
@ -803,10 +801,12 @@
<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">
<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 class="input-wrap">
<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>
<p class="input-helper small muted">Bookmark tiles more short and wide with content stacked horizontally.</p>
</div>
</div>
</div>

523
js/control.js
View File

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

153
js/link.js
View File

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

4
js/search.js
View File

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

22
js/state.js
View File

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

23
js/update.js
View File

@ -400,6 +400,25 @@ var update = (function() {
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) {
// data.version = 3.00;
// return data;
@ -506,6 +525,10 @@ var update = (function() {
console.log("\t= running update 3.4.0");
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
// version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added
var current = "3.5.0";
var current = "3.6.0";
var compare = function(a, b) {
var pa = a.split(".");