mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 12:31:47 +02:00
[refactor] [design] improve controls and header padding and border
This commit is contained in:
Kuldeep M
parent
d351aa136b
commit
6c302fb991
@ -71,10 +71,10 @@
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: none;
|
||||
--header-search-width: 0%;
|
||||
--header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
|
||||
--header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
|
||||
--header-shade-padding-multiplier-top: 4;
|
||||
--header-shade-padding-multiplier-bottom: 4;
|
||||
--header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top));
|
||||
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom));
|
||||
--header-padding-multiplier-top: 4;
|
||||
--header-padding-multiplier-bottom: 4;
|
||||
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
|
||||
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
|
||||
--header-border-width-multiplier-top: 1;
|
||||
|
||||
@ -45,17 +45,17 @@
|
||||
opacity: var(--header-shade-opacity);
|
||||
}
|
||||
|
||||
.is-header-shade-border-top-show .header-border {
|
||||
.is-header-border-top-show .header-border {
|
||||
border-top: var(--header-border-width-top) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom-show .header-border {
|
||||
.is-header-border-bottom-show .header-border {
|
||||
border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
padding-top: calc(var(--gutter) * 3 + var(--header-shade-padding-top));
|
||||
padding-bottom: calc(var(--gutter) * 3 + var(--header-shade-padding-bottom));
|
||||
padding-top: calc(var(--gutter) * 3 + var(--header-padding-top));
|
||||
padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
|
||||
padding-left: calc(var(--gutter) * 3);
|
||||
padding-right: calc(var(--gutter) * 3);
|
||||
position: relative;
|
||||
|
||||
20
css/link.css
20
css/link.css
@ -56,7 +56,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom-show .link-area,
|
||||
.is-header-border-bottom-show .link-area,
|
||||
.is-header-shade-style-always .link-area {
|
||||
padding-top: calc(var(--gutter) * 4);
|
||||
}
|
||||
@ -186,9 +186,9 @@
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-show-url .link-item:focus .link-panel-front,
|
||||
.is-link-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-link-show-url .link-item:hover .link-panel-front {
|
||||
.is-link-url-show .link-item:focus .link-panel-front,
|
||||
.is-link-url-show .link-item:focus-within .link-panel-front,
|
||||
.is-link-url-show .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--url-height));
|
||||
}
|
||||
|
||||
@ -270,7 +270,7 @@
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-show-url .link-url {
|
||||
.is-link-url-show .link-url {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -301,11 +301,11 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.is-link-url-dark .link-url-text {
|
||||
.is-link-url-style-dark .link-url-text {
|
||||
color: rgb(var(--black));
|
||||
}
|
||||
|
||||
.is-link-url-light .link-url-text {
|
||||
.is-link-url-style-light .link-url-text {
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
@ -430,9 +430,9 @@
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-link-edit.is-link-show-url .link-item:focus .link-panel-front,
|
||||
.is-link-edit.is-link-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-link-edit.is-link-show-url .link-item:hover .link-panel-front {
|
||||
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
|
||||
.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front,
|
||||
.is-link-edit.is-link-url-show .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--edit-height));
|
||||
}
|
||||
|
||||
|
||||
74
index.html
74
index.html
@ -571,6 +571,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Padding</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-padding-top">Top padding</label>
|
||||
<input id="control-header-padding-top" class="control-header-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-padding-bottom" class="control-header-padding-bottom" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-border-top-show" class="control-header-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-border-top-show">Top border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-border-top-width">Border width</label>
|
||||
<input id="control-header-border-top-width" class="control-header-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-border-bottom-show" class="control-header-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-border-bottom-show">Bottom border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-border-bottom-width">Border width</label>
|
||||
<input id="control-header-border-bottom-width" class="control-header-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
@ -597,36 +641,6 @@
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-top">Top padding</label>
|
||||
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top-show">Top border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-top-width">Border width</label>
|
||||
<input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom-show">Bottom border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-bottom-width">Border width</label>
|
||||
<input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
632
js/control.js
632
js/control.js
@ -335,8 +335,6 @@ var control = (function() {
|
||||
path: "header.greeting.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
}
|
||||
@ -345,8 +343,6 @@ var control = (function() {
|
||||
path: "header.greeting.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
}
|
||||
@ -355,8 +351,6 @@ var control = (function() {
|
||||
path: "header.greeting.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
}
|
||||
@ -365,8 +359,6 @@ var control = (function() {
|
||||
path: "header.greeting.name",
|
||||
type: "text",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
greeting.clear();
|
||||
greeting.render();
|
||||
}
|
||||
@ -385,8 +377,6 @@ var control = (function() {
|
||||
path: "header.transitional.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
}
|
||||
@ -395,8 +385,6 @@ var control = (function() {
|
||||
path: "header.transitional.type",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
transitional.clear();
|
||||
transitional.render();
|
||||
}
|
||||
@ -419,8 +407,6 @@ var control = (function() {
|
||||
path: "header.clock.hours.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -433,8 +419,6 @@ var control = (function() {
|
||||
path: "header.clock.hours.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -461,8 +445,6 @@ var control = (function() {
|
||||
path: "header.clock.minutes.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -475,8 +457,6 @@ var control = (function() {
|
||||
path: "header.clock.minutes.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -503,8 +483,6 @@ var control = (function() {
|
||||
path: "header.clock.seconds.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -517,8 +495,6 @@ var control = (function() {
|
||||
path: "header.clock.seconds.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
greeting.clear();
|
||||
@ -581,7 +557,6 @@ var control = (function() {
|
||||
path: "header.date.day.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
@ -595,8 +570,6 @@ var control = (function() {
|
||||
path: "header.date.day.weekStart",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -609,8 +582,6 @@ var control = (function() {
|
||||
path: "header.date.day.weekStart",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -623,7 +594,6 @@ var control = (function() {
|
||||
path: "header.date.day.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
@ -637,7 +607,6 @@ var control = (function() {
|
||||
path: "header.date.day.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -650,7 +619,6 @@ var control = (function() {
|
||||
path: "header.date.day.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -677,8 +645,6 @@ var control = (function() {
|
||||
path: "header.date.date.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -691,8 +657,6 @@ var control = (function() {
|
||||
path: "header.date.date.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -705,8 +669,6 @@ var control = (function() {
|
||||
path: "header.date.date.ordinal",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -733,7 +695,6 @@ var control = (function() {
|
||||
path: "header.date.month.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
@ -747,8 +708,6 @@ var control = (function() {
|
||||
path: "header.date.month.ordinal",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -761,7 +720,6 @@ var control = (function() {
|
||||
path: "header.date.month.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
@ -775,7 +733,6 @@ var control = (function() {
|
||||
path: "header.date.month.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -788,7 +745,6 @@ var control = (function() {
|
||||
path: "header.date.month.length",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -815,8 +771,6 @@ var control = (function() {
|
||||
path: "header.date.year.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -829,8 +783,6 @@ var control = (function() {
|
||||
path: "header.date.year.display",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -843,8 +795,6 @@ var control = (function() {
|
||||
path: "header.date.separator.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -857,8 +807,6 @@ var control = (function() {
|
||||
path: "header.date.format",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -871,8 +819,6 @@ var control = (function() {
|
||||
path: "header.date.format",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
date.clear();
|
||||
date.render();
|
||||
greeting.clear();
|
||||
@ -951,7 +897,6 @@ var control = (function() {
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
header.render.search();
|
||||
}
|
||||
}, {
|
||||
@ -963,7 +908,6 @@ var control = (function() {
|
||||
path: "header.search.engine.selected",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render();
|
||||
}
|
||||
@ -972,7 +916,6 @@ var control = (function() {
|
||||
path: "header.search.engine.selected",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render();
|
||||
}
|
||||
@ -981,7 +924,6 @@ var control = (function() {
|
||||
path: "header.search.engine.selected",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render();
|
||||
}
|
||||
@ -990,7 +932,6 @@ var control = (function() {
|
||||
path: "header.search.engine.selected",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render();
|
||||
}
|
||||
@ -999,7 +940,6 @@ var control = (function() {
|
||||
path: "header.search.engine.selected",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render();
|
||||
}
|
||||
@ -1083,12 +1023,11 @@ var control = (function() {
|
||||
type: "range",
|
||||
valueMod: ["reverse", "float"],
|
||||
func: function() {
|
||||
render();
|
||||
header.render.opacity();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-padding-top"),
|
||||
path: "header.shade.padding.top",
|
||||
element: helper.e(".control-header-padding-top"),
|
||||
path: "header.padding.top",
|
||||
type: "range",
|
||||
additionalEvents: [{
|
||||
event: "input",
|
||||
@ -1130,12 +1069,11 @@ var control = (function() {
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
header.render.padding();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-padding-bottom"),
|
||||
path: "header.shade.padding.bottom",
|
||||
element: helper.e(".control-header-padding-bottom"),
|
||||
path: "header.padding.bottom",
|
||||
type: "range",
|
||||
additionalEvents: [{
|
||||
event: "input",
|
||||
@ -1177,12 +1115,11 @@ var control = (function() {
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
header.render.padding();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-top-show"),
|
||||
path: "header.shade.border.top.show",
|
||||
element: helper.e(".control-header-border-top-show"),
|
||||
path: "header.border.top.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
@ -1190,15 +1127,15 @@ var control = (function() {
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-top-width"),
|
||||
path: "header.shade.border.top.width",
|
||||
element: helper.e(".control-header-border-top-width"),
|
||||
path: "header.border.top.width",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom-show"),
|
||||
path: "header.shade.border.bottom.show",
|
||||
element: helper.e(".control-header-border-bottom-show"),
|
||||
path: "header.border.bottom.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
@ -1206,8 +1143,8 @@ var control = (function() {
|
||||
header.render.border();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom-width"),
|
||||
path: "header.shade.border.bottom.width",
|
||||
element: helper.e(".control-header-border-bottom-width"),
|
||||
path: "header.border.bottom.width",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render.border();
|
||||
@ -1712,7 +1649,7 @@ var control = (function() {
|
||||
}
|
||||
}];
|
||||
|
||||
var _bind = function() {
|
||||
var bind = function() {
|
||||
var eventType = {
|
||||
button: "click",
|
||||
checkbox: "change",
|
||||
@ -1806,13 +1743,24 @@ var control = (function() {
|
||||
var _menu = function() {
|
||||
helper.addClass(html, "is-menu");
|
||||
};
|
||||
var _edit = function() {
|
||||
if (state.get().link.edit) {
|
||||
helper.addClass(html, "is-link-edit");
|
||||
link.render.tabIndex();
|
||||
var _header = function() {
|
||||
var _area = function() {
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-center");
|
||||
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 _clock = function() {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.addClass(html, "is-header-clock-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-edit");
|
||||
link.render.tabIndex();
|
||||
helper.removeClass(html, "is-header-clock-show");
|
||||
};
|
||||
};
|
||||
var _date = function() {
|
||||
@ -1822,120 +1770,21 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-header-date-show");
|
||||
};
|
||||
};
|
||||
var _clock = function() {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.addClass(html, "is-header-clock-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-clock-show");
|
||||
};
|
||||
};
|
||||
var _search = function() {
|
||||
if (state.get().header.search.show) {
|
||||
helper.addClass(html, "is-header-search-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-search-show");
|
||||
};
|
||||
helper.removeClass(html, "is-header-search-width-style-custom");
|
||||
helper.removeClass(html, "is-header-search-width-style-auto");
|
||||
helper.addClass(html, "is-header-search-width-style-" + state.get().header.search.width.style);
|
||||
helper.removeClass(html, "is-header-search-text-align-left");
|
||||
helper.removeClass(html, "is-header-search-text-align-center");
|
||||
helper.removeClass(html, "is-header-search-text-align-right");
|
||||
if (state.get().header.search.show) {
|
||||
helper.addClass(html, "is-header-search-show");
|
||||
helper.addClass(html, "is-header-search-width-style-" + state.get().header.search.width.style);
|
||||
helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align);
|
||||
};
|
||||
helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name;
|
||||
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
|
||||
};
|
||||
var _link = function() {
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-right");
|
||||
helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal);
|
||||
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.addClass(html, "is-link-items-alignment-horizontal-" + state.get().link.items.alignment.horizontal);
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-right");
|
||||
helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.display.alignment.horizontal);
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
|
||||
helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.display.alignment.vertical);
|
||||
var view = {
|
||||
block: function() {
|
||||
helper.addClass(html, "is-link-style-block");
|
||||
helper.removeClass(html, "is-link-style-list");
|
||||
},
|
||||
list: function() {
|
||||
helper.removeClass(html, "is-link-style-block");
|
||||
helper.addClass(html, "is-link-style-list");
|
||||
}
|
||||
};
|
||||
view[state.get().link.style]();
|
||||
var fit = {
|
||||
best: function() {
|
||||
helper.addClass(html, "is-link-fit-best");
|
||||
helper.removeClass(html, "is-link-fit-custom");
|
||||
},
|
||||
custom: function() {
|
||||
helper.removeClass(html, "is-link-fit-best");
|
||||
helper.addClass(html, "is-link-fit-custom");
|
||||
}
|
||||
};
|
||||
fit[state.get().link.fit]();
|
||||
if (state.get().link.show) {
|
||||
helper.addClass(html, "is-link-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-show");
|
||||
};
|
||||
if (state.get().link.name.show) {
|
||||
helper.addClass(html, "is-link-name-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-name-show");
|
||||
};
|
||||
if (state.get().link.display.show) {
|
||||
helper.addClass(html, "is-link-display-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-display-show");
|
||||
};
|
||||
if (state.get().link.url.show) {
|
||||
helper.addClass(html, "is-link-show-url");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-show-url");
|
||||
};
|
||||
var urlText = {
|
||||
dark: function() {
|
||||
helper.addClass(html, "is-link-url-dark");
|
||||
helper.removeClass(html, "is-link-url-light");
|
||||
},
|
||||
light: function() {
|
||||
helper.removeClass(html, "is-link-url-dark");
|
||||
helper.addClass(html, "is-link-url-light");
|
||||
}
|
||||
};
|
||||
urlText[state.get().link.url.style]();
|
||||
};
|
||||
var _layout = function() {
|
||||
if (state.get().layout.scrollPastEnd) {
|
||||
helper.addClass(html, "is-layout-scroll-past-end");
|
||||
} else {
|
||||
helper.removeClass(html, "is-layout-scroll-past-end");
|
||||
};
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-bottom");
|
||||
helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
|
||||
helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
|
||||
};
|
||||
var _theme = function() {
|
||||
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 _editAdd = function() {
|
||||
if (state.get().header.editAdd.show) {
|
||||
helper.addClass(html, "is-header-edit-add-show");
|
||||
@ -1964,6 +1813,105 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-header-transitional-show");
|
||||
};
|
||||
};
|
||||
var _shade = function() {
|
||||
helper.removeClass(html, "is-header-shade-show");
|
||||
helper.removeClass(html, "is-header-shade-style-always");
|
||||
helper.removeClass(html, "is-header-shade-style-scroll");
|
||||
if (state.get().header.shade.show) {
|
||||
helper.addClass(html, "is-header-shade-show");
|
||||
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
|
||||
};
|
||||
};
|
||||
var _border = function() {
|
||||
helper.removeClass(html, "is-header-border-top-show");
|
||||
helper.removeClass(html, "is-header-border-bottom-show");
|
||||
if (state.get().header.border.top.show) {
|
||||
helper.addClass(html, "is-header-border-top-show");
|
||||
};
|
||||
if (state.get().header.border.bottom.show) {
|
||||
helper.addClass(html, "is-header-border-bottom-show");
|
||||
};
|
||||
};
|
||||
_area();
|
||||
_items();
|
||||
_clock();
|
||||
_date();
|
||||
_search();
|
||||
_editAdd();
|
||||
_accent();
|
||||
_shade();
|
||||
_border();
|
||||
_greeting();
|
||||
_transitional();
|
||||
};
|
||||
var _link = function() {
|
||||
helper.removeClass(html, "is-link-show");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-link-name-show");
|
||||
helper.removeClass(html, "is-link-display-show");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
|
||||
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-style-list");
|
||||
helper.removeClass(html, "is-link-style-block");
|
||||
helper.removeClass(html, "is-link-edit");
|
||||
link.render.tabIndex();
|
||||
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-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-name-show");
|
||||
};
|
||||
if (state.get().link.display.show) {
|
||||
helper.addClass(html, "is-link-display-show");
|
||||
};
|
||||
if (state.get().link.url.show) {
|
||||
helper.addClass(html, "is-link-url-show");
|
||||
};
|
||||
if (state.get().link.edit) {
|
||||
helper.addClass(html, "is-link-edit");
|
||||
link.render.tabIndex();
|
||||
};
|
||||
};
|
||||
};
|
||||
var _layout = function() {
|
||||
helper.removeClass(html, "is-layout-scroll-past-end");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-bottom");
|
||||
helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
|
||||
helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
|
||||
if (state.get().layout.scrollPastEnd) {
|
||||
helper.addClass(html, "is-layout-scroll-past-end");
|
||||
};
|
||||
};
|
||||
var _theme = function() {
|
||||
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 _background = function() {
|
||||
if (state.get().background.image.show) {
|
||||
helper.addClass(html, "is-background-image-show");
|
||||
@ -1971,62 +1919,61 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-background-image-show");
|
||||
};
|
||||
};
|
||||
var _header = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.addClass(html, "is-header-shade-show");
|
||||
helper.removeClass(html, "is-header-shade-style-always");
|
||||
helper.removeClass(html, "is-header-shade-style-scroll");
|
||||
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-right");
|
||||
helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal);
|
||||
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);
|
||||
if (state.get().header.shade.border.top.show) {
|
||||
helper.addClass(html, "is-header-shade-border-top-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-top-show");
|
||||
};
|
||||
if (state.get().header.shade.border.bottom.show) {
|
||||
helper.addClass(html, "is-header-shade-border-bottom-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-bottom-show");
|
||||
};
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-show");
|
||||
helper.removeClass(html, "is-header-shade-style-always");
|
||||
helper.removeClass(html, "is-header-shade-style-scroll");
|
||||
helper.removeClass(html, "is-header-shade-border-top-show");
|
||||
helper.removeClass(html, "is-header-shade-border-bottom-show");
|
||||
};
|
||||
state.get().header.area.alignment.horizontal
|
||||
};
|
||||
_menu();
|
||||
_edit();
|
||||
_greeting();
|
||||
_transitional();
|
||||
_date();
|
||||
_clock();
|
||||
_search();
|
||||
_editAdd();
|
||||
_accent();
|
||||
_header();
|
||||
_link();
|
||||
_layout();
|
||||
_theme();
|
||||
_background();
|
||||
_header();
|
||||
};
|
||||
|
||||
var dependents = function() {
|
||||
var _edit = function() {
|
||||
if (bookmarks.get().length > 0) {
|
||||
helper.e(".control-edit").disabled = false;
|
||||
var _header = function() {
|
||||
var _clock = function() {
|
||||
var activeCount = 0;
|
||||
var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
|
||||
toCheck.forEach(function(arrayItem, index) {
|
||||
if (arrayItem == true) {
|
||||
activeCount++;
|
||||
};
|
||||
});
|
||||
if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
|
||||
helper.e(".control-header-clock-separator-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-edit").disabled = true;
|
||||
helper.e(".control-edit").checked = false;
|
||||
helper.e(".control-header-clock-separator-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hour24-show").disabled = false;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-hour24-show").disabled = true;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hours-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-hours-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-hours-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-hours-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.minutes.show) {
|
||||
helper.e(".control-header-clock-minutes-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-minutes-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-minutes-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-minutes-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.seconds.show) {
|
||||
helper.e(".control-header-clock-seconds-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-seconds-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-seconds-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-seconds-display-word").disabled = true;
|
||||
};
|
||||
};
|
||||
var _date = function() {
|
||||
@ -2114,80 +2061,33 @@ var control = (function() {
|
||||
helper.e(".control-header-date-month-ordinal").disabled = true;
|
||||
};
|
||||
};
|
||||
var _greeting = function() {
|
||||
if (state.get().header.greeting.show) {
|
||||
helper.e("[for=control-header-greeting-name]").removeAttribute("disabled");
|
||||
helper.e(".control-header-greeting-name").disabled = false;
|
||||
helper.e(".control-header-greeting-type-good").disabled = false;
|
||||
helper.e(".control-header-greeting-type-hello").disabled = false;
|
||||
helper.e(".control-header-greeting-type-hi").disabled = false;
|
||||
var _shade = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.e(".control-header-shade-style-always").disabled = false;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = false;
|
||||
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-opacity").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-greeting-name").disabled = true;
|
||||
helper.e(".control-header-greeting-type-good").disabled = true;
|
||||
helper.e(".control-header-greeting-type-hello").disabled = true;
|
||||
helper.e(".control-header-greeting-type-hi").disabled = true;
|
||||
helper.e(".control-header-shade-style-always").disabled = true;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = true;
|
||||
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-opacity").disabled = true;
|
||||
};
|
||||
};
|
||||
var _transitional = function() {
|
||||
if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-transitional-show").disabled = false;
|
||||
var _border = function() {
|
||||
if (state.get().header.border.top.show) {
|
||||
helper.e("[for=control-header-border-top-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-border-top-width").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-show").disabled = true;
|
||||
helper.e("[for=control-header-border-top-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-border-top-width").disabled = true;
|
||||
};
|
||||
if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = false;
|
||||
helper.e(".control-header-transitional-type-its").disabled = false;
|
||||
if (state.get().header.border.bottom.show) {
|
||||
helper.e("[for=control-header-border-bottom-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-border-bottom-width").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = true;
|
||||
helper.e(".control-header-transitional-type-its").disabled = true;
|
||||
};
|
||||
};
|
||||
var _clock = function() {
|
||||
var activeCount = 0;
|
||||
var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
|
||||
toCheck.forEach(function(arrayItem, index) {
|
||||
if (arrayItem == true) {
|
||||
activeCount++;
|
||||
};
|
||||
});
|
||||
if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
|
||||
helper.e(".control-header-clock-separator-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-separator-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hour24-show").disabled = false;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-hour24-show").disabled = true;
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-meridiem-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-clock-hours-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-hours-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-hours-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-hours-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.minutes.show) {
|
||||
helper.e(".control-header-clock-minutes-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-minutes-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-minutes-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-minutes-display-word").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.seconds.show) {
|
||||
helper.e(".control-header-clock-seconds-display-number").disabled = false;
|
||||
helper.e(".control-header-clock-seconds-display-word").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-seconds-display-number").disabled = true;
|
||||
helper.e(".control-header-clock-seconds-display-word").disabled = true;
|
||||
helper.e("[for=control-header-border-bottom-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-border-bottom-width").disabled = true;
|
||||
};
|
||||
};
|
||||
var _search = function() {
|
||||
@ -2245,17 +2145,49 @@ var control = (function() {
|
||||
helper.e(".control-header-search-width-custom").disabled = true;
|
||||
};
|
||||
};
|
||||
var _theme = function() {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.disabled = false;
|
||||
helper.e(".control-theme-accent-randomise").disabled = false;
|
||||
});
|
||||
var _greeting = function() {
|
||||
if (state.get().header.greeting.show) {
|
||||
helper.e("[for=control-header-greeting-name]").removeAttribute("disabled");
|
||||
helper.e(".control-header-greeting-name").disabled = false;
|
||||
helper.e(".control-header-greeting-type-good").disabled = false;
|
||||
helper.e(".control-header-greeting-type-hello").disabled = false;
|
||||
helper.e(".control-header-greeting-type-hi").disabled = false;
|
||||
} else {
|
||||
helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.disabled = true;
|
||||
helper.e(".control-theme-accent-randomise").disabled = true;
|
||||
});
|
||||
helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-greeting-name").disabled = true;
|
||||
helper.e(".control-header-greeting-type-good").disabled = true;
|
||||
helper.e(".control-header-greeting-type-hello").disabled = true;
|
||||
helper.e(".control-header-greeting-type-hi").disabled = true;
|
||||
};
|
||||
};
|
||||
var _transitional = function() {
|
||||
if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
helper.e(".control-header-transitional-show").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-show").disabled = true;
|
||||
};
|
||||
if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = false;
|
||||
helper.e(".control-header-transitional-type-its").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-transitional-type-timeanddate").disabled = true;
|
||||
helper.e(".control-header-transitional-type-its").disabled = true;
|
||||
};
|
||||
};
|
||||
_clock();
|
||||
_date();
|
||||
_border();
|
||||
_shade();
|
||||
_search();
|
||||
_greeting();
|
||||
_transitional();
|
||||
};
|
||||
var _edit = function() {
|
||||
if (bookmarks.get().length > 0) {
|
||||
helper.e(".control-edit").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-edit").disabled = true;
|
||||
helper.e(".control-edit").checked = false;
|
||||
};
|
||||
};
|
||||
var _link = function() {
|
||||
@ -2386,6 +2318,23 @@ var control = (function() {
|
||||
helper.e(".control-link-items-alignment-horizontal-right").disabled = true;
|
||||
};
|
||||
};
|
||||
var _theme = function() {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
helper.e(".control-theme-accent-random-style-any").disabled = false;
|
||||
helper.e(".control-theme-accent-random-style-light").disabled = false;
|
||||
helper.e(".control-theme-accent-random-style-dark").disabled = false;
|
||||
helper.e(".control-theme-accent-random-style-pastel").disabled = false;
|
||||
helper.e(".control-theme-accent-random-style-saturated").disabled = false;
|
||||
helper.e(".control-theme-accent-randomise").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-theme-accent-random-style-any").disabled = true;
|
||||
helper.e(".control-theme-accent-random-style-light").disabled = true;
|
||||
helper.e(".control-theme-accent-random-style-dark").disabled = true;
|
||||
helper.e(".control-theme-accent-random-style-pastel").disabled = true;
|
||||
helper.e(".control-theme-accent-random-style-saturated").disabled = true;
|
||||
helper.e(".control-theme-accent-randomise").disabled = true;
|
||||
};
|
||||
};
|
||||
var _background = function() {
|
||||
if (state.get().background.image.show) {
|
||||
helper.e("[for=control-background-image-url]").removeAttribute("disabled");
|
||||
@ -2411,63 +2360,11 @@ var control = (function() {
|
||||
helper.e(".control-background-image-accent").disabled = true;
|
||||
};
|
||||
};
|
||||
var _header = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.e(".control-header-shade-style-always").disabled = false;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = false;
|
||||
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-opacity").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding-top]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding-top").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding-bottom]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding-bottom").disabled = false;
|
||||
helper.e(".control-header-shade-border-top-show").disabled = false;
|
||||
helper.e(".control-header-shade-border-bottom-show").disabled = false;
|
||||
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = false;
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-shade-style-always").disabled = true;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = true;
|
||||
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-opacity").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding-top]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding-top").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding-bottom]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding-bottom").disabled = true;
|
||||
helper.e(".control-header-shade-border-top-show").disabled = true;
|
||||
helper.e(".control-header-shade-border-bottom-show").disabled = true;
|
||||
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = true;
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = true;
|
||||
};
|
||||
if (state.get().header.shade.show && state.get().header.shade.border.top.show) {
|
||||
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = true;
|
||||
};
|
||||
if (state.get().header.shade.show && state.get().header.shade.border.bottom.show) {
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = true;
|
||||
};
|
||||
};
|
||||
_edit();
|
||||
_date();
|
||||
_clock();
|
||||
_greeting();
|
||||
_transitional();
|
||||
_search();
|
||||
_theme();
|
||||
_link();
|
||||
_background();
|
||||
_header();
|
||||
_edit();
|
||||
_link();
|
||||
_theme();
|
||||
_background();
|
||||
};
|
||||
|
||||
var update = function() {
|
||||
@ -2531,7 +2428,7 @@ var control = (function() {
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
_bind();
|
||||
bind();
|
||||
update();
|
||||
dependents();
|
||||
render();
|
||||
@ -2540,6 +2437,7 @@ var control = (function() {
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
bind: bind,
|
||||
render: render,
|
||||
dependents: dependents,
|
||||
update: update
|
||||
|
||||
@ -87,14 +87,14 @@ var header = (function() {
|
||||
|
||||
var _padding = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
|
||||
html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
|
||||
html.style.setProperty("--header-padding-multiplier-top", state.get().header.padding.top);
|
||||
html.style.setProperty("--header-padding-multiplier-bottom", state.get().header.padding.bottom);
|
||||
};
|
||||
|
||||
var _border = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.border.top.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.border.bottom.width);
|
||||
};
|
||||
|
||||
var _search = function() {
|
||||
|
||||
@ -105,12 +105,13 @@ var state = (function() {
|
||||
},
|
||||
shade: {
|
||||
show: true,
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
border: {
|
||||
top: {
|
||||
show: false,
|
||||
@ -120,7 +121,6 @@ var state = (function() {
|
||||
show: false,
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
greeting: {
|
||||
show: false,
|
||||
|
||||
13
js/update.js
13
js/update.js
@ -391,6 +391,15 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_340 = function(data) {
|
||||
data.version = "3.4.0";
|
||||
data.state.header.padding = data.state.header.shade.padding;
|
||||
delete data.state.header.shade.padding;
|
||||
data.state.header.border = data.state.header.shade.border;
|
||||
delete data.state.header.shade.border;
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -493,6 +502,10 @@ var update = (function() {
|
||||
console.log("\t= running update 3.2.0");
|
||||
data = _update_320(data);
|
||||
};
|
||||
if (version.compare(data.version, "3.4.0") == -1) {
|
||||
console.log("\t= running update 3.4.0");
|
||||
data = _update_340(data);
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "3.3.0";
|
||||
var current = "3.4.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user