mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-16 10:20:37 +01:00
[feature] add local background image controls to menu
This commit is contained in:
Kombie
GitHub
parent
4b858311a7
commit
02a2ab4b0f
@ -27,7 +27,15 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
|
||||
.background-image {
|
||||
background-image: var(--background-image);
|
||||
/* background-image: url(https://source.unsplash.com/random/1920x1080/?night); */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@ -33,7 +32,7 @@
|
||||
}
|
||||
|
||||
.background-accent {
|
||||
background-color: rgba(var(--theme-accent), var(--background-accent-opacity));
|
||||
background-color: rgba(var(--theme-accent), var(--background-accent));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
141
src/css/form.css
141
src/css/form.css
@ -148,7 +148,7 @@ label:not(:only-child):not(:last-child) {
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
label[disabled] {
|
||||
label.disabled {
|
||||
color: rgb(var(--form-label-disabled));
|
||||
}
|
||||
|
||||
@ -168,7 +168,7 @@ input[type="radio"] {
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
/* transition: all var(--layout-transition-speed-fast) ease-in-out; */
|
||||
transition: color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
@ -181,7 +181,7 @@ input[type="radio"]+label {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
transition: all var(--layout-transition-speed-fast) ease-in-out;
|
||||
transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label:before,
|
||||
@ -194,7 +194,29 @@ input[type="radio"]+label:before {
|
||||
height: 1em;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform 0.05s ease-in-out;
|
||||
font-family: "Icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label:before {
|
||||
content: "\e835";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label:before {
|
||||
content: "\e834";
|
||||
}
|
||||
|
||||
input[type="radio"]+label:before {
|
||||
content: "\e836";
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label:before {
|
||||
content: "\e837";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus+label,
|
||||
@ -261,32 +283,6 @@ input[type="radio"][disabled]:active+label:before {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label:before,
|
||||
input[type="radio"]+label:before {
|
||||
font-family: "Icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label:before {
|
||||
content: "\e835";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label:before {
|
||||
content: "\e834";
|
||||
}
|
||||
|
||||
input[type="radio"]+label:before {
|
||||
content: "\e836";
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label:before {
|
||||
content: "\e837";
|
||||
}
|
||||
|
||||
/* color */
|
||||
input[type="color"] {
|
||||
background-color: transparent;
|
||||
@ -537,26 +533,19 @@ input[type="range"][disabled]::-moz-range-progress {
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
}
|
||||
|
||||
/* input helper */
|
||||
.input-helper {
|
||||
margin-bottom: 0
|
||||
/* form helper */
|
||||
.form-helper {
|
||||
padding: 0.5em 0;
|
||||
color: rgb(var(--form-helper));
|
||||
transition: color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.input-helper:not(:only-child):not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
.form-helper.disabled {
|
||||
color: rgb(var(--form-helper-disabled));
|
||||
}
|
||||
|
||||
.input-helper[disabled],
|
||||
input[type="checkbox"][disabled]~.input-helper,
|
||||
input[type="radio"][disabled]~.input-helper,
|
||||
input[type="email"][disabled]~.input-helper,
|
||||
input[type="number"][disabled]~.input-helper,
|
||||
input[type="password"][disabled]~.input-helper,
|
||||
input[type="search"][disabled]~.input-helper,
|
||||
input[type="tel"][disabled]~.input-helper,
|
||||
input[type="text"][disabled]~.input-helper,
|
||||
input[type="range"][disabled]~.input-helper {
|
||||
color: rgb(var(--form-input-text-disabled-helper-text));
|
||||
.form-helper:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* input variants */
|
||||
@ -772,10 +761,6 @@ input[type="range"][disabled]~.input-helper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-grid-wrap .input-helper:not(:only-child) {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
padding: calc(var(--layout-line-width) * 2);
|
||||
display: grid;
|
||||
@ -783,7 +768,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
border-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--form-checkbox-radio-label));
|
||||
transition: all var(--layout-transition-speed-fast) ease-in-out;
|
||||
transition: border-color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.form-grid:focus,
|
||||
@ -792,16 +777,12 @@ input[type="range"][disabled]~.input-helper {
|
||||
border-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.form-grid[disabled] {
|
||||
.form-grid.disabled {
|
||||
border-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
.form-grid[disabled]+.input-helper {
|
||||
color: rgb(var(--form-input-text-disabled-helper-text));
|
||||
}
|
||||
|
||||
.form-grid[disabled]:focus,
|
||||
.form-grid[disabled]:focus-within {
|
||||
.form-grid.disabled:focus,
|
||||
.form-grid.disabled:focus-within {
|
||||
border-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
@ -845,6 +826,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
border-color: transparent;
|
||||
position: relative;
|
||||
transition: none;
|
||||
transition: border-color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:focus+label,
|
||||
@ -893,7 +875,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
font-size: 1em;
|
||||
/* margin: var(--layout-line-width); */
|
||||
background-color: transparent;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
width: calc(100% - calc(var(--layout-line-width) * 4));
|
||||
@ -903,7 +885,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
left: calc(var(--layout-line-width) * 2);
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform 0.05s ease-in-out;
|
||||
transition: transform var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:focus+label:before,
|
||||
@ -1004,7 +986,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
margin-right: 1.5em;
|
||||
margin-right: 0.5em;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
@ -1164,13 +1146,36 @@ input[type="range"][disabled]~.input-helper {
|
||||
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
|
||||
}
|
||||
|
||||
.form-feedback {
|
||||
padding: 1em 1.5em;
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
/* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
|
||||
border-radius: var(--theme-radius);
|
||||
.feedback-wrap {
|
||||
padding: 0.5em 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-feedback:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
.form-feedback {
|
||||
padding: 0.5em 1.5em 0.5em 1em;
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-width: 0;
|
||||
border-left-width: calc(var(--layout-line-width) * 2);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--theme-gray-04));
|
||||
border-top-right-radius: var(--theme-radius);
|
||||
border-bottom-right-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
.form-feedback p {
|
||||
color: rgb(var(--form-feedback-text));
|
||||
}
|
||||
|
||||
.form-feedback p.muted {
|
||||
color: rgb(var(--form-feedback-text-muted));
|
||||
}
|
||||
|
||||
.form-feedback.disabled {
|
||||
background-color: transparent;
|
||||
border-color: rgb(var(--theme-gray-02));
|
||||
}
|
||||
|
||||
.form-feedback.disabled p {
|
||||
color: rgb(var(--form-feedback-text-disabled));
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--layout-transition-speed-fast) 1;
|
||||
animation: pop var(--layout-transition-speed-slow) 1;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-scale: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-accent: 0;
|
||||
--background-blur: 0;
|
||||
/* form */
|
||||
--form-input-text: var(--theme-gray-16);
|
||||
@ -70,7 +70,6 @@
|
||||
--form-input-text-hover: var(--theme-style-text);
|
||||
--form-input-text-focus: var(--theme-style-text);
|
||||
--form-input-text-disabled: var(--theme-gray-02);
|
||||
--form-input-text-disabled-helper-text: var(--theme-gray-04);
|
||||
--form-input-placeholder: var(--theme-gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--theme-gray-10);
|
||||
--form-input-placeholder-disabled: var(--theme-gray-04);
|
||||
@ -80,6 +79,11 @@
|
||||
--form-checkbox-radio-checked-label: var(--theme-gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--theme-gray-04);
|
||||
--form-range-thumb: var(--theme-gray-12);
|
||||
--form-feedback-text: var(--theme-gray-16);
|
||||
--form-feedback-text-muted: var(--theme-gray-12);
|
||||
--form-feedback-text-disabled: var(--theme-gray-04);
|
||||
--form-helper: var(--theme-gray-12);
|
||||
--form-helper-disabled: var(--theme-gray-06);
|
||||
/* button */
|
||||
--button-text: var(--theme-gray-12);
|
||||
--button-text-hover-focus: var(--theme-style-text);
|
||||
|
||||
110
src/index.html
110
src/index.html
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="background-color: rgba(38, 40, 49)">
|
||||
<html lang="en" style="background-color: rgb(38, 40, 49)">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -175,8 +175,8 @@
|
||||
<label for="control-layout-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
<p class="control-layout-alignment-helper form-helper small">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -191,8 +191,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="1">
|
||||
<label for="control-layout-order-linkheader">Bookmarks then Header</label>
|
||||
<p class="input-helper small muted">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
<p class="control-layout-order-helper form-helper small">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -244,8 +244,8 @@
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-area-width">Width</label>
|
||||
<input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
||||
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
|
||||
<div class="button-wrap">
|
||||
<button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button>
|
||||
</div>
|
||||
@ -266,8 +266,8 @@
|
||||
<label for="control-header-area-alignment-right"><span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<p class="control-header-area-alignment-helper form-helper small">Effects may not be visible if the Header Area is full width.</p>
|
||||
<hr>
|
||||
<label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
@ -285,8 +285,8 @@
|
||||
<label for="control-header-item-alignment-right"><span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="control-header-item-alignment-helper form-helper small">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -335,8 +335,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-transitional-show">Show</label>
|
||||
<p class="input-helper small muted">Available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<p class="control-header-transitional-show-helper form-helper small">Available when Date or Time is shown.</p>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
|
||||
@ -453,8 +453,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="1">
|
||||
<label for="control-header-date-day-week-start-sunday">Sunday</label>
|
||||
<p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
|
||||
</div>
|
||||
<p class="control-header-date-day-week-start-helper form-helper small">Define what day "1" represents, either Monday or Sunday.</p>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="1">
|
||||
@ -489,8 +489,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-date-ordinal">Ordinal numbers</label>
|
||||
<p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
<p class="control-header-date-date-ordinal-helper form-helper small">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -506,8 +506,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-month-ordinal">Ordinal numbers</label>
|
||||
<p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
<p class="control-header-date-month-ordinal-helper form-helper small">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="1">
|
||||
@ -579,13 +579,13 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
|
||||
<label for="control-header-search-style-auto">Auto</label>
|
||||
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
|
||||
</div>
|
||||
<p class="control-header-search-style-auto-helper form-helper small">Search box will grow to best fit available space.</p>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
|
||||
<label for="control-header-search-style-custom">Custom</label>
|
||||
<p class="input-helper small muted">Define how wide the Search box should be inside the Header Area.</p>
|
||||
</div>
|
||||
<p class="control-header-search-style-custom-helper form-helper small">Define how wide the Search box should be inside the Header Area.</p>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-width">Width</label>
|
||||
@ -596,8 +596,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
|
||||
<label for="control-header-search-focus">Focus on load/refresh</label>
|
||||
<p class="input-helper small muted">May not work in Chrome.</p>
|
||||
</div>
|
||||
<p class="control-header-search-focus-helper form-helper small">May not work in some browsers.</p>
|
||||
<hr>
|
||||
<label class="control-header-search-engine-label">Search engine</label>
|
||||
<div class="input-wrap">
|
||||
@ -631,10 +631,10 @@
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
|
||||
<p class="input-helper small muted">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="input-helper small muted mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
|
||||
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
|
||||
</div>
|
||||
<p class="control-header-search-engine-custom-helper form-helper small">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="control-header-search-engine-custom-helper form-helper small mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-search-text-alignment-label">Align Text</label>
|
||||
@ -658,8 +658,8 @@
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-size">Size</label>
|
||||
<input id="control-header-search-size" class="control-header-search-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
||||
<p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
|
||||
</div>
|
||||
<p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
|
||||
<div class="button-wrap">
|
||||
<button class="control-header-search-size-default button mb-0" tabindex="1">Default search size</button>
|
||||
</div>
|
||||
@ -729,13 +729,13 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
|
||||
<label for="control-header-shade-style-always">Always visible</label>
|
||||
<p class="input-helper small muted">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<p class="control-header-shade-style-always-helper form-helper small">Useful for when a Background Image is shown.</p>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="1">
|
||||
<label for="control-header-shade-style-scroll">Visible on scroll</label>
|
||||
<p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<p class="control-header-shade-style-scroll-helper form-helper small">The page will not scroll if Bookmarks are not shown.</p>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
@ -760,8 +760,8 @@
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-area-width">Width</label>
|
||||
<input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
||||
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
|
||||
<div class="button-wrap">
|
||||
<button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button>
|
||||
</div>
|
||||
@ -782,8 +782,8 @@
|
||||
<label for="control-link-area-alignment-right"><span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
<p class="control-link-area-alignment-helper form-helper small">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -889,8 +889,8 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="1">
|
||||
<label for="control-link-item-order-namedisplay">Name then Letter/Icon</label>
|
||||
<p class="input-helper small muted">Only available when Letter/Icon and Name is shown.</p>
|
||||
</div>
|
||||
<p class="control-link-item-order-namedisplay-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
|
||||
@ -922,13 +922,13 @@
|
||||
<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>
|
||||
<p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped with content stacked vertically.</p>
|
||||
<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>
|
||||
<p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -936,13 +936,13 @@
|
||||
<h1 class="menu-item-header-text">Sort</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="button-wrap">
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-link-sort-letter button mb-0" tabindex="1">By Letter</button>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-link-sort-icon button mb-0" tabindex="1">By Icon</button>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-link-sort-name button mb-0" tabindex="1">By Name</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -952,11 +952,11 @@
|
||||
<h1 class="menu-item-header-text">Accent override</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="button-wrap">
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-link-accent-clear button mb-0" tabindex="1">Remove all override colours</button>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-link-accent-set button mb-0" tabindex="1">Apply override colours to all Bookmarks</button>
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-link-accent-set button mb-0" tabindex="1">All the colours!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -975,15 +975,15 @@
|
||||
<div class="input-wrap">
|
||||
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="1">
|
||||
<label for="control-theme-style-light">Light</label>
|
||||
<p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-radius">Radius</label>
|
||||
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-theme-radius-default button mb-0" tabindex="1">Default radius size</button>
|
||||
<button class="control-theme-radius-default button mb-0" tabindex="1">Default radius</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1037,12 +1037,34 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-url">URL</label>
|
||||
<input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http://" tabindex="1">
|
||||
<p class="input-helper small muted">Unsplash can be used for random images, eg:</p>
|
||||
<p class="input-helper small muted"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
||||
<p class="input-helper small muted">Change parameters after <i>.../ramdom/</i> for more options.</p>
|
||||
<p class="input-helper small muted">Loading times may vary.</p>
|
||||
<input id="control-background-image-from-local" class="control-background-image-from-local" type="radio" name="control-background-image-from" value="local" tabindex="1">
|
||||
<label for="control-background-image-from-local">Use local file</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap input-button input-hide form-inline">
|
||||
<input id="control-background-image-local" class="control-background-image-local" type="file">
|
||||
<label for="control-background-image-local">Select image</label>
|
||||
</div>
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-background-image-local-clear button mb-0" href="#">Clear image</button>
|
||||
</div>
|
||||
<p class="control-background-image-local-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
|
||||
<p class="control-background-image-local-helper form-helper small">Take care with large files, they may impact performance.</p>
|
||||
<div class="feedback-wrap">
|
||||
<div class="control-background-image-local-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="1">
|
||||
<label for="control-background-image-from-url">Use URL</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
|
||||
</div>
|
||||
<p class="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
|
||||
<p class="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
||||
<p class="control-background-image-url-helper form-helper small">Change parameters after <i>.../ramdom/</i> for more options. Loading times may vary.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -1080,8 +1102,10 @@
|
||||
<input id="control-data-import" class="control-data-import" type="file">
|
||||
<label for="control-data-import">Import data</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Restore a previously exported nightTab backup.</p>
|
||||
<div class="control-data-import-feedback form-feedback is-hidden"></div>
|
||||
<p class="control-data-import-helper form-helper small">Restore a previously exported nightTab backup.</p>
|
||||
<div class="feedback-wrap">
|
||||
<div class="control-data-import-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -1092,8 +1116,8 @@
|
||||
<div class="button-wrap">
|
||||
<button class="control-data-export button mb-0" href="#">Export data</button>
|
||||
</div>
|
||||
<p class="input-helper small muted">Download a backup of your nightTab Bookmarks and Settings.</p>
|
||||
<p class="input-helper small muted">This file can later be imported on this or another deivce.</p>
|
||||
<p class="control-data-export-helper form-helper small">Download a backup of your nightTab Bookmarks and Settings.</p>
|
||||
<p class="control-data-export-helper form-helper small">This file can later be imported on this or another deivce.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -1104,7 +1128,7 @@
|
||||
<div class="button-wrap">
|
||||
<button class="control-data-clear button mb-0" href="#">Clear data</button>
|
||||
</div>
|
||||
<p class="input-helper small muted">Wipe all data and restore nightTab to default state.</p>
|
||||
<p class="control-data-clear-helper form-helper small">Wipe all data and restore nightTab to default state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,210 @@
|
||||
var background = (function() {
|
||||
|
||||
var render = function() {
|
||||
var mod = {};
|
||||
|
||||
mod.clear = {
|
||||
file: function() {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "background.image.file.name",
|
||||
newValue: ""
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "background.image.file.data",
|
||||
newValue: ""
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var bind = {};
|
||||
|
||||
bind.feedback = {
|
||||
animation: {
|
||||
set: function(animationClass, action) {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
helper.addClass(controlBackgroundImageLocalFeedback, animationClass);
|
||||
var animationEndAction = function() {
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
bind.feedback.animation.reset();
|
||||
};
|
||||
controlBackgroundImageLocalFeedback.addEventListener("animationend", animationEndAction, false);
|
||||
},
|
||||
reset: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
helper.removeClass(controlBackgroundImageLocalFeedback, "is-shake");
|
||||
helper.removeClass(controlBackgroundImageLocalFeedback, "is-pop");
|
||||
controlBackgroundImageLocalFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var render = {};
|
||||
|
||||
render.image = function() {
|
||||
var html = helper.e("html");
|
||||
if (state.get().background.image.show) {
|
||||
if (state.get().background.image.from == "local") {
|
||||
html.style.setProperty("--background-image", "url(" + state.get().background.image.file.data + ")");
|
||||
} else if (state.get().background.image.from == "url") {
|
||||
html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
|
||||
};
|
||||
} else {
|
||||
html.style.setProperty("--background-image", "url()");
|
||||
};
|
||||
};
|
||||
|
||||
render.blur = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")");
|
||||
html.style.setProperty("--background-blur", state.get().background.image.blur + "px");
|
||||
};
|
||||
|
||||
render.grayscale = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
|
||||
};
|
||||
|
||||
render.opacity = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--background-opacity", state.get().background.image.opacity);
|
||||
};
|
||||
|
||||
render.scale = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--background-scale", state.get().background.image.scale);
|
||||
html.style.setProperty("--background-accent-opacity", state.get().background.image.accent);
|
||||
};
|
||||
|
||||
render.accent = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--background-accent", state.get().background.image.accent);
|
||||
};
|
||||
|
||||
render.input = {
|
||||
clear: function() {
|
||||
var input = helper.e(".control-background-image-local");
|
||||
input.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
render.feedback = {
|
||||
init: function() {
|
||||
if (state.get().background.image.file.name != "") {
|
||||
render.feedback.current();
|
||||
} else {
|
||||
render.feedback.empty();
|
||||
};
|
||||
},
|
||||
empty: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
var para1 = helper.node("p:No image selected.|class:muted small");
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
},
|
||||
current: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
var para1 = helper.node("p:Image loaded.|class:muted small");
|
||||
var para2 = helper.node("p:" + state.get().background.image.file.name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
},
|
||||
success: function(action) {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
var para1 = helper.node("p:Success! Setting Background image.|class:muted small");
|
||||
var para2 = helper.node("p:" + state.get().background.image.file.name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-pop", action);
|
||||
},
|
||||
clear: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
while (controlBackgroundImageLocalFeedback.lastChild) {
|
||||
controlBackgroundImageLocalFeedback.removeChild(controlBackgroundImageLocalFeedback.lastChild);
|
||||
};
|
||||
},
|
||||
fail: {
|
||||
filetype: function(name) {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted");
|
||||
var para2 = helper.node("p:" + name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-shake");
|
||||
},
|
||||
size: function(name) {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted");
|
||||
var para2 = helper.node("p:" + name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-shake");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var importData = function() {
|
||||
// get files from input
|
||||
var fileList = helper.e(".control-background-image-local").files;
|
||||
// if file was added
|
||||
if (fileList.length > 0) {
|
||||
// validate the file
|
||||
_validateImageFile(fileList);
|
||||
};
|
||||
};
|
||||
|
||||
var _validateImageFile = function(fileList) {
|
||||
// make new file reader
|
||||
var reader = new FileReader();
|
||||
// define the on load event for the reader
|
||||
reader.onload = function(event) {
|
||||
if (fileList.item(0).size <= 5000000) {
|
||||
if (fileList.item(0).type.split("/")[0] == "image") {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "background.image.file.name",
|
||||
newValue: fileList[0].name
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "background.image.file.data",
|
||||
newValue: event.target.result
|
||||
});
|
||||
data.save();;
|
||||
render.feedback.clear();
|
||||
render.feedback.success(render.image);
|
||||
render.input.clear();
|
||||
} else {
|
||||
render.feedback.clear();
|
||||
render.feedback.fail.filetype(fileList[0].name);
|
||||
render.input.clear();
|
||||
};
|
||||
} else {
|
||||
render.feedback.clear();
|
||||
render.feedback.fail.size(fileList[0].name);
|
||||
render.input.clear();
|
||||
};
|
||||
};
|
||||
// invoke the reader
|
||||
reader.readAsDataURL(fileList.item(0));
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render();
|
||||
render.image();
|
||||
render.blur();
|
||||
render.grayscale();
|
||||
render.opacity();
|
||||
render.scale();
|
||||
render.accent();
|
||||
render.feedback.init();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
mod: mod,
|
||||
bind: bind,
|
||||
render: render,
|
||||
init: init
|
||||
importData: importData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
var clock = (function() {
|
||||
|
||||
var bind = function() {
|
||||
window.setInterval(function() {
|
||||
clear();
|
||||
render();
|
||||
}, 1000);
|
||||
};
|
||||
var bind = {};
|
||||
|
||||
var clear = function() {
|
||||
var clock = helper.e(".clock");
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
};
|
||||
bind.tick = function() {
|
||||
window.setInterval(function() {
|
||||
render.clear();
|
||||
render.all();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var _makeTimeObject = function() {
|
||||
@ -39,8 +34,17 @@ var clock = (function() {
|
||||
return time;
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var _clock = function() {
|
||||
var render = {};
|
||||
|
||||
render.clear = function() {
|
||||
var clock = helper.e(".clock");
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
render.all = function() {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
var clock = helper.e(".clock");
|
||||
var timeObject = _makeTimeObject();
|
||||
var action = {
|
||||
@ -144,22 +148,18 @@ var clock = (function() {
|
||||
};
|
||||
};
|
||||
};
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
_clock();
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render();
|
||||
bind();
|
||||
bind.tick();
|
||||
render.all();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
bind: bind,
|
||||
render: render,
|
||||
clear: clear
|
||||
render: render
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
173
src/js/header.js
173
src/js/header.js
@ -1,9 +1,14 @@
|
||||
var header = (function() {
|
||||
|
||||
var _bind = function() {
|
||||
var bind = {};
|
||||
|
||||
bind.resize = function() {
|
||||
window.addEventListener("resize", function() {
|
||||
render.shade();
|
||||
}, false);
|
||||
};
|
||||
|
||||
bind.scroll = function() {
|
||||
window.addEventListener("scroll", function() {
|
||||
render.shade();
|
||||
}, false);
|
||||
@ -12,70 +17,24 @@ var header = (function() {
|
||||
render.shade();
|
||||
}, false);
|
||||
});
|
||||
};
|
||||
|
||||
bind.fonts = function() {
|
||||
document.fonts.ready.then(function() {
|
||||
render.shade();
|
||||
});
|
||||
};
|
||||
|
||||
var render = {
|
||||
area: {
|
||||
width: function() {
|
||||
_renderWidth();
|
||||
}
|
||||
},
|
||||
shade: function() {
|
||||
_renderShade();
|
||||
},
|
||||
opacity: function() {
|
||||
_renderOpacity();
|
||||
},
|
||||
border: function() {
|
||||
_renderBorder();
|
||||
},
|
||||
search: {
|
||||
width: function() {
|
||||
_renderSearchWidth();
|
||||
},
|
||||
size: function() {
|
||||
_renderSearchSize();
|
||||
}
|
||||
},
|
||||
greeting: {
|
||||
size: function() {
|
||||
_renderGreetingSize();
|
||||
}
|
||||
},
|
||||
transitional: {
|
||||
size: function() {
|
||||
_renderTransitionalSize();
|
||||
}
|
||||
},
|
||||
clock: {
|
||||
size: function() {
|
||||
_renderClockSize();
|
||||
}
|
||||
},
|
||||
date: {
|
||||
size: function() {
|
||||
_renderDateSize();
|
||||
}
|
||||
},
|
||||
button: {
|
||||
size: function() {
|
||||
_renderButtonSize();
|
||||
},
|
||||
style: function() {
|
||||
_renderButtonStyle();
|
||||
}
|
||||
var render = {};
|
||||
|
||||
render.area = {
|
||||
width: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderWidth = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
|
||||
};
|
||||
|
||||
var _renderShade = function() {
|
||||
render.shade = function() {
|
||||
var html = helper.e("html");
|
||||
var headerRect = helper.e(".header").getBoundingClientRect();
|
||||
var layoutRect = helper.e(".layout").getBoundingClientRect();
|
||||
@ -115,74 +74,86 @@ var header = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var _renderOpacity = function() {
|
||||
render.opacity = function() {
|
||||
var html = helper.e("html");
|
||||
if (state.get().header.shade.show) {
|
||||
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
|
||||
};
|
||||
};
|
||||
|
||||
var _renderBorder = function() {
|
||||
render.border = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-border-top", state.get().header.border.top);
|
||||
html.style.setProperty("--header-border-bottom", state.get().header.border.bottom);
|
||||
};
|
||||
|
||||
var _renderSearchWidth = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
|
||||
render.search = {
|
||||
width: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
|
||||
},
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderSearchSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
|
||||
render.greeting = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderGreetingSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
|
||||
render.transitional = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderTransitionalSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
|
||||
render.clock = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderClockSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
|
||||
render.date = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderDateSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
|
||||
};
|
||||
|
||||
var _renderButtonSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
|
||||
};
|
||||
|
||||
var _renderButtonStyle = function() {
|
||||
var action = {
|
||||
box: function() {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.removeClass(helper.e(".control-menu"), "button-link");
|
||||
},
|
||||
clear: function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.addClass(helper.e(".control-menu"), "button-link");
|
||||
}
|
||||
};
|
||||
action[state.get().header.button.style]();
|
||||
render.button = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
|
||||
},
|
||||
style: function() {
|
||||
var action = {
|
||||
box: function() {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.removeClass(helper.e(".control-menu"), "button-link");
|
||||
},
|
||||
clear: function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.addClass(helper.e(".control-menu"), "button-link");
|
||||
}
|
||||
};
|
||||
action[state.get().header.button.style]();
|
||||
}
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
_bind();
|
||||
bind.resize();
|
||||
bind.scroll();
|
||||
bind.fonts();
|
||||
render.area.width();
|
||||
render.shade();
|
||||
render.opacity();
|
||||
|
||||
@ -18,3 +18,4 @@ search.init();
|
||||
title.init();
|
||||
header.init();
|
||||
version.init();
|
||||
menu.open();
|
||||
|
||||
@ -1,36 +1,23 @@
|
||||
var layout = (function() {
|
||||
|
||||
var render = {
|
||||
width: function() {
|
||||
_renderWidth();
|
||||
},
|
||||
padding: function() {
|
||||
_renderPadding();
|
||||
},
|
||||
gutter: function() {
|
||||
_renderGutter();
|
||||
},
|
||||
order: function() {
|
||||
_renderOrder();
|
||||
}
|
||||
};
|
||||
var render = {};
|
||||
|
||||
var _renderWidth = function() {
|
||||
render.width = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--layout-width", state.get().layout.width + "%");
|
||||
};
|
||||
|
||||
var _renderPadding = function() {
|
||||
render.padding = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding);
|
||||
};
|
||||
|
||||
var _renderGutter = function() {
|
||||
render.gutter = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter);
|
||||
};
|
||||
|
||||
var _renderOrder = function() {
|
||||
render.order = function() {
|
||||
var html = helper.e("html");
|
||||
var layout = helper.e(".layout");
|
||||
var header = helper.e(".header");
|
||||
|
||||
205
src/js/link.js
205
src/js/link.js
@ -572,110 +572,86 @@ var link = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var render = {
|
||||
var render = {};
|
||||
|
||||
render = {
|
||||
area: {
|
||||
width: function() {
|
||||
_renderAreaWidth();
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
|
||||
}
|
||||
},
|
||||
item: {
|
||||
all: function() {
|
||||
_renderItemAll();
|
||||
},
|
||||
display: {
|
||||
letter: function() {
|
||||
_renderItemDisplayLetter();
|
||||
},
|
||||
icon: function() {
|
||||
_renderItemDisplayIcon();
|
||||
}
|
||||
},
|
||||
name: function() {
|
||||
_renderItemName();
|
||||
},
|
||||
size: function() {
|
||||
_renderItemSize();
|
||||
}
|
||||
},
|
||||
tabIndex: function() {
|
||||
_renderTabIndex();
|
||||
}
|
||||
};
|
||||
|
||||
var _renderAreaWidth = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
|
||||
};
|
||||
|
||||
var _renderItemAll = function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
var bookmarksToRender = false;
|
||||
if (state.get().search) {
|
||||
bookmarksToRender = search.get();
|
||||
} else {
|
||||
bookmarksToRender = bookmarks.get();
|
||||
};
|
||||
var action = {
|
||||
render: {
|
||||
bookmarks: function(array) {
|
||||
array.forEach(function(arrayItem, index) {
|
||||
linkArea.appendChild(_makeLink(arrayItem, index));
|
||||
});
|
||||
},
|
||||
empty: {
|
||||
search: function() {
|
||||
linkArea.appendChild(_makeEmptySearch());
|
||||
render.item = {
|
||||
all: function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
var bookmarksToRender = false;
|
||||
if (state.get().search) {
|
||||
bookmarksToRender = search.get();
|
||||
} else {
|
||||
bookmarksToRender = bookmarks.get();
|
||||
};
|
||||
var action = {
|
||||
render: {
|
||||
bookmarks: function(array) {
|
||||
array.forEach(function(arrayItem, index) {
|
||||
linkArea.appendChild(_makeLink(arrayItem, index));
|
||||
});
|
||||
},
|
||||
bookmarks: function() {
|
||||
linkArea.appendChild(_makeEmptyBookmarks());
|
||||
empty: {
|
||||
search: function() {
|
||||
linkArea.appendChild(_makeEmptySearch());
|
||||
},
|
||||
bookmarks: function() {
|
||||
linkArea.appendChild(_makeEmptyBookmarks());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// if searching
|
||||
if (state.get().search) {
|
||||
// if bookmarks exist to be searched
|
||||
if (bookmarksToRender.total > 0) {
|
||||
// if matching bookmarks found
|
||||
if (bookmarksToRender.matching.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender.matching);
|
||||
};
|
||||
// if searching
|
||||
if (state.get().search) {
|
||||
// if bookmarks exist to be searched
|
||||
if (bookmarksToRender.total > 0) {
|
||||
// if matching bookmarks found
|
||||
if (bookmarksToRender.matching.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender.matching);
|
||||
} else {
|
||||
action.render.empty.search();
|
||||
};
|
||||
} else {
|
||||
action.render.empty.search();
|
||||
action.render.empty.bookmarks();
|
||||
};
|
||||
} else {
|
||||
action.render.empty.bookmarks();
|
||||
// if bookmarks exist
|
||||
if (bookmarksToRender.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender);
|
||||
} else {
|
||||
action.render.empty.bookmarks();
|
||||
};
|
||||
};
|
||||
} else {
|
||||
// if bookmarks exist
|
||||
if (bookmarksToRender.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender);
|
||||
} else {
|
||||
action.render.empty.bookmarks();
|
||||
};
|
||||
};
|
||||
},
|
||||
display: {
|
||||
letter: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
|
||||
},
|
||||
icon: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
|
||||
}
|
||||
},
|
||||
name: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
|
||||
},
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
var _renderItemDisplayLetter = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
|
||||
};
|
||||
|
||||
var _renderItemDisplayIcon = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
|
||||
};
|
||||
|
||||
var _renderItemName = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
|
||||
};
|
||||
|
||||
var _renderItemSize = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
|
||||
};
|
||||
|
||||
var _renderTabIndex = function() {
|
||||
render.tabIndex = function() {
|
||||
var allLinkControlItem = helper.eA(".link-control-item");
|
||||
if (state.get().link.edit) {
|
||||
allLinkControlItem.forEach(function(arrayItem, index) {
|
||||
@ -688,32 +664,33 @@ var link = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var accent = {
|
||||
set: function() {
|
||||
var units = 360 / bookmarks.get().length;
|
||||
var degree = 0;
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent.override = true;
|
||||
arrayItem.accent.color = helper.hslToRgb({
|
||||
h: degree,
|
||||
s: 1,
|
||||
l: 0.5
|
||||
});
|
||||
degree = degree + units;
|
||||
var accent = {};
|
||||
|
||||
accent.set = function() {
|
||||
var units = 360 / bookmarks.get().length;
|
||||
var degree = 0;
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent.override = true;
|
||||
arrayItem.accent.color = helper.hslToRgb({
|
||||
h: degree,
|
||||
s: 1,
|
||||
l: 0.5
|
||||
});
|
||||
},
|
||||
clear: function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent = {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
degree = degree + units;
|
||||
});
|
||||
};
|
||||
|
||||
accent.clear = function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent = {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
@ -78,16 +78,9 @@ var menu = (function() {
|
||||
render.tabindex();
|
||||
};
|
||||
|
||||
var render = {
|
||||
tabindex: function() {
|
||||
renderTabindex();
|
||||
},
|
||||
menu: function() {
|
||||
renderMenu();
|
||||
}
|
||||
};
|
||||
var render = {};
|
||||
|
||||
var renderMenu = function() {
|
||||
render.menu = function() {
|
||||
var html = helper.e("html");
|
||||
if (state.get().menu) {
|
||||
helper.addClass(html, "is-menu-open");
|
||||
@ -103,7 +96,7 @@ var menu = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var renderTabindex = function() {
|
||||
render.tabindex = function() {
|
||||
var menu = helper.e(".menu");
|
||||
if (state.get().menu) {
|
||||
menu.tabIndex = 1;
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
var search = (function() {
|
||||
|
||||
var bind = function() {
|
||||
var bind = {};
|
||||
|
||||
bind.input = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
var searchClear = helper.e(".search-clear");
|
||||
searchInput.addEventListener("input", function() {
|
||||
_toggle();
|
||||
render.clear.button();
|
||||
link.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}, false);
|
||||
searchClear.addEventListener("click", function() {
|
||||
render.clear.input();
|
||||
_toggle();
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.clear();
|
||||
link.render.item.all();
|
||||
@ -20,24 +13,28 @@ var search = (function() {
|
||||
}, false);
|
||||
};
|
||||
|
||||
var _toggle = function() {
|
||||
var html = helper.e("html");
|
||||
var searchInput = helper.e(".search-input");
|
||||
if (searchInput.value != "") {
|
||||
bind.clear = function() {
|
||||
var searchClear = helper.e(".search-clear");
|
||||
searchClear.addEventListener("click", function() {
|
||||
render.clear.input();
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}, false);
|
||||
};
|
||||
|
||||
var mod = {};
|
||||
|
||||
mod.searching = {
|
||||
set: function() {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "search",
|
||||
newValue: true
|
||||
newValue: helper.e(".search-input").value != ""
|
||||
});
|
||||
helper.addClass(html, "is-header-searching");
|
||||
} else {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "search",
|
||||
newValue: false
|
||||
});
|
||||
helper.removeClass(html, "is-header-searching");
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
@ -65,21 +62,9 @@ var search = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var render = {
|
||||
engine: function() {
|
||||
_renderEngine();
|
||||
},
|
||||
clear: {
|
||||
input: function() {
|
||||
_renderClearInput();
|
||||
},
|
||||
button: function() {
|
||||
_renderClearButton();
|
||||
}
|
||||
}
|
||||
};
|
||||
var render = {};
|
||||
|
||||
var _renderEngine = function() {
|
||||
render.engine = function() {
|
||||
var search = helper.e(".search");
|
||||
var searchInput = helper.e(".search-input");
|
||||
var placeholder = "";
|
||||
@ -93,7 +78,15 @@ var search = (function() {
|
||||
search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
|
||||
};
|
||||
|
||||
var _renderClearButton = function() {
|
||||
render.clear = {};
|
||||
|
||||
render.clear.input = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
searchInput.value = "";
|
||||
searchInput.focus();
|
||||
};
|
||||
|
||||
render.clear.button = function() {
|
||||
var searchClear = helper.e(".search-clear");
|
||||
if (state.get().search) {
|
||||
searchClear.removeAttribute("disabled");
|
||||
@ -102,13 +95,7 @@ var search = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var _renderClearInput = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
searchInput.value = "";
|
||||
searchInput.focus();
|
||||
};
|
||||
|
||||
var _focus = function() {
|
||||
render.focus = function() {
|
||||
if (state.get().header.search.focus) {
|
||||
window.addEventListener("load", function(event) {
|
||||
helper.e(".search-input").focus();
|
||||
@ -116,11 +103,23 @@ var search = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
render.searching = function() {
|
||||
var html = helper.e("html");
|
||||
var searchInput = helper.e(".search-input");
|
||||
if (searchInput.value != "") {
|
||||
helper.addClass(html, "is-header-searching");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-searching");
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
bind.input();
|
||||
bind.clear();
|
||||
mod.searching.set();
|
||||
render.engine();
|
||||
_toggle();
|
||||
_focus();
|
||||
render.focus();
|
||||
render.searching();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
|
||||
@ -195,6 +195,11 @@ var state = (function() {
|
||||
background: {
|
||||
image: {
|
||||
show: false,
|
||||
from: "local",
|
||||
file: {
|
||||
name: "",
|
||||
data: ""
|
||||
},
|
||||
url: "",
|
||||
blur: 0,
|
||||
scale: 1,
|
||||
|
||||
143
src/js/theme.js
143
src/js/theme.js
@ -20,97 +20,84 @@ var theme = (function() {
|
||||
style[state.get().theme.style]();
|
||||
};
|
||||
|
||||
var render = {
|
||||
theme: function() {
|
||||
_renderTheme();
|
||||
},
|
||||
radius: function() {
|
||||
_renderRadius();
|
||||
},
|
||||
accent: {
|
||||
color: function() {
|
||||
_renderAccentColor();
|
||||
},
|
||||
random: function() {
|
||||
_renderAccentRandom();
|
||||
}
|
||||
}
|
||||
};
|
||||
var render = {};
|
||||
|
||||
var _renderTheme = function() {
|
||||
render.theme = function() {
|
||||
var html = helper.e("html");
|
||||
helper.removeClass(html, "is-theme-style-dark");
|
||||
helper.removeClass(html, "is-theme-style-light");
|
||||
helper.addClass(html, "is-theme-style-" + state.get().theme.style);
|
||||
};
|
||||
|
||||
var _renderRadius = function() {
|
||||
render.radius = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-radius", state.get().theme.radius + "rem");
|
||||
};
|
||||
|
||||
var _renderAccentColor = function() {
|
||||
var html = helper.e("html");
|
||||
var color = state.get().theme.accent.current;
|
||||
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||
render.accent = {
|
||||
color: function() {
|
||||
var html = helper.e("html");
|
||||
var color = state.get().theme.accent.current;
|
||||
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||
},
|
||||
random: function() {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
var randomVal = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + 1) + min;
|
||||
};
|
||||
var color = {
|
||||
any: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(0, 100),
|
||||
l: randomVal(0, 100)
|
||||
};
|
||||
},
|
||||
light: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(50, 90),
|
||||
l: randomVal(50, 90)
|
||||
};
|
||||
},
|
||||
dark: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(10, 50),
|
||||
l: randomVal(10, 50)
|
||||
};
|
||||
},
|
||||
pastel: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 50,
|
||||
l: 80
|
||||
};
|
||||
},
|
||||
saturated: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 100,
|
||||
l: 50
|
||||
};
|
||||
}
|
||||
};
|
||||
var hsl = color[state.get().theme.accent.random.style]();
|
||||
var randomColor = helper.hslToRgb({
|
||||
h: hsl.h,
|
||||
s: (hsl.s / 100),
|
||||
l: (hsl.l / 100)
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "theme.accent.current",
|
||||
newValue: randomColor
|
||||
});
|
||||
helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var _renderAccentRandom = function() {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
var randomVal = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + 1) + min;
|
||||
};
|
||||
var color = {
|
||||
any: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(0, 100),
|
||||
l: randomVal(0, 100)
|
||||
};
|
||||
},
|
||||
light: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(50, 90),
|
||||
l: randomVal(50, 90)
|
||||
};
|
||||
},
|
||||
dark: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(10, 50),
|
||||
l: randomVal(10, 50)
|
||||
};
|
||||
},
|
||||
pastel: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 50,
|
||||
l: 80
|
||||
};
|
||||
},
|
||||
saturated: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 100,
|
||||
l: 50
|
||||
};
|
||||
}
|
||||
};
|
||||
var hsl = color[state.get().theme.accent.random.style]();
|
||||
var randomColor = helper.hslToRgb({
|
||||
h: hsl.h,
|
||||
s: (hsl.s / 100),
|
||||
l: (hsl.l / 100)
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "theme.accent.current",
|
||||
newValue: randomColor
|
||||
});
|
||||
helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render.theme();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user