extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-15 10:28:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] [design] improve alignment control and UI

Browse Source
This commit is contained in:
Kombie 2019-06-30 18:37:05 +01:00 committed by GitHub
parent 36ff6cb4a2
commit 0a31c441a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 755 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/css/base.css
View File

@ -20,3 +20,52 @@ body {
min-height: 100vh; min-height: 100vh;
transition: background-color var(--layout-transition-speed-fast) ease-in-out; transition: background-color var(--layout-transition-speed-fast) ease-in-out;
} }
.is-layout-scroll-past-end body {
margin-bottom: 40vh;
}
.is-layout-alignment-topleft body {
justify-content: flex-start;
align-items: flex-start;
}
.is-layout-alignment-topcenter body {
justify-content: flex-start;
align-items: center;
}
.is-layout-alignment-topright body {
justify-content: flex-start;
align-items: flex-end;
}
.is-layout-alignment-centerleft body {
justify-content: center;
align-items: flex-start;
}
.is-layout-alignment-centercenter body {
justify-content: center;
align-items: center;
}
.is-layout-alignment-centerright body {
justify-content: center;
align-items: flex-end;
}
.is-layout-alignment-bottomleft body {
justify-content: flex-end;
align-items: flex-start;
}
.is-layout-alignment-bottomcenter body {
justify-content: flex-end;
align-items: center;
}
.is-layout-alignment-bottomright body {
justify-content: flex-end;
align-items: flex-end;
}

15
src/css/clock.css
View File

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

16
src/css/date.css
View File

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

236
src/css/form.css
View File

@ -190,9 +190,9 @@ input[type="radio"]+label:before {
margin-right: 0.5em; margin-right: 0.5em;
font-size: 1.5em; font-size: 1.5em;
line-height: 1; line-height: 1;
display: block;
width: 1em; width: 1em;
height: 1em; height: 1em;
display: block;
transform: scale(1); transform: scale(1);
transition: transform 0.05s ease-in-out; transition: transform 0.05s ease-in-out;
} }
@ -224,7 +224,7 @@ input[type="radio"]:active+label:before {
input[type="checkbox"]:checked+label, input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label { input[type="radio"]:checked+label {
color: rgb(var(--form-checkbox-radio-chcked-label)); color: rgb(var(--form-checkbox-radio-checked-label));
} }
input[type="checkbox"]:not([disabled]):hover:checked+label, input[type="checkbox"]:not([disabled]):hover:checked+label,
@ -758,6 +758,238 @@ input[type="range"][disabled]~.input-helper {
} }
/* form variants */ /* form variants */
.form-grid-wrap {
padding: 0.5em 0;
position: relative;
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;
border-radius: calc(var(--layout-line-width) * 6);
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;
}
.form-grid:focus,
.form-grid:focus-within {
outline: 0;
border-color: rgb(var(--theme-style-text));
}
.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 {
border-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid-3x3 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.form-grid-3x1 {
grid-template-columns: repeat(3, 1fr);
}
.form-grid-square {
width: 7em;
height: 7em;
}
.form-grid-rectangle {
width: 7em;
height: 3em;
}
.form-grid-viewport {
width: 12vw;
height: 12vh;
min-width: 5em;
min-height: 5em;
}
.form-grid .input-wrap {
padding: 0;
}
.form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label {
display: block;
width: 100%;
height: 100%;
border-width: calc(var(--layout-line-width) / 2);
border-style: solid;
border-color: transparent;
position: relative;
transition: none;
}
.form-grid input[type="checkbox"]:focus+label,
.form-grid input[type="checkbox"]:hover+label,
.form-grid input[type="radio"]:focus+label,
.form-grid input[type="radio"]:hover+label {
border-color: rgb(var(--theme-style-text));
}
.form-grid input[type="checkbox"]:active+label,
.form-grid input[type="radio"]:active+label {
border-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"]:checked+label,
.form-grid input[type="radio"]:checked+label {
border-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"][disabled]:focus+label,
.form-grid input[type="checkbox"][disabled]:hover+label,
.form-grid input[type="radio"][disabled]:focus+label,
.form-grid input[type="radio"][disabled]:hover+label {
border-color: transparent;
}
.form-grid input[type="checkbox"][disabled]:active+label,
.form-grid input[type="radio"][disabled]:active+label {
border-color: transparent;
}
.form-grid input[type="checkbox"][disabled]:checked+label,
.form-grid input[type="radio"][disabled]:checked+label {
border-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid input[type="checkbox"]:not([disabled]):hover:checked+label,
.form-grid input[type="checkbox"]:not([disabled]):focus:checked+label,
.form-grid input[type="radio"]:not([disabled]):hover:checked+label,
.form-grid input[type="radio"]:not([disabled]):focus:checked+label {
border-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before {
content: "";
margin-right: 0;
font-size: 1em;
/* margin: var(--layout-line-width); */
width: inherit;
height: inherit;
width: calc(100% - calc(var(--layout-line-width) * 4));
height: calc(100% - calc(var(--layout-line-width) * 4));
position: absolute;
top: calc(var(--layout-line-width) * 2);
left: calc(var(--layout-line-width) * 2);
display: block;
transform: scale(1);
transition: transform 0.05s ease-in-out;
}
.form-grid input[type="checkbox"]:focus+label:before,
.form-grid input[type="checkbox"]:hover+label:before,
.form-grid input[type="radio"]:focus+label:before,
.form-grid input[type="radio"]:hover+label:before {
transform: scale(1);
}
.form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before {
background-color: rgb(var(--theme-accent));
transform: scale(1);
}
.form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before {
background-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"][disabled]+label,
.form-grid input[type="radio"][disabled]+label {
transform: scale(1);
}
.form-grid input[type="checkbox"][disabled]:checked+label:before,
.form-grid input[type="radio"][disabled]:checked+label:before {
background-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label {
border-top-left-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label:before {
border-top-left-radius: var(--layout-line-width);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label {
border-top-right-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label:before {
border-top-right-radius: var(--layout-line-width);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label {
border-bottom-left-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label:before {
border-bottom-left-radius: var(--layout-line-width);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label {
border-bottom-right-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label:before {
border-bottom-right-radius: var(--layout-line-width);
}
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label,
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label {
border-top-left-radius: calc(var(--layout-line-width) * 3);
border-bottom-left-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label:before {
border-top-left-radius: var(--layout-line-width);
border-bottom-left-radius: var(--layout-line-width);
}
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label,
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label {
border-top-right-radius: calc(var(--layout-line-width) * 3);
border-bottom-right-radius: calc(var(--layout-line-width) * 3);
}
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label:before {
border-top-right-radius: var(--layout-line-width);
border-bottom-right-radius: var(--layout-line-width);
}
.form-indent { .form-indent {
margin-left: 2.25em; margin-left: 2.25em;
} }

24
src/css/header.css
View File

@ -10,15 +10,15 @@
pointer-events: all; pointer-events: all;
} }
.is-header-area-alignment-horizontal-left .header { .is-header-area-alignment-left .header {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-area-alignment-horizontal-center .header { .is-header-area-alignment-center .header {
justify-content: center; justify-content: center;
} }
.is-header-area-alignment-horizontal-right .header { .is-header-area-alignment-right .header {
justify-content: flex-end; justify-content: flex-end;
} }
@ -46,7 +46,7 @@
left: 0; left: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: background-color var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out; transition: background-color var(--layout-transition-speed-slow) ease-in-out, opacity var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
} }
.is-header-radius .header-shade { .is-header-radius .header-shade {
@ -86,15 +86,15 @@
border-radius: calc(var(--theme-radius) * 4); border-radius: calc(var(--theme-radius) * 4);
} }
.is-header-search-text-align-left .header-search-input { .is-header-search-text-alignment-left .header-search-input {
text-align: left; text-align: left;
} }
.is-header-search-text-align-center .header-search-input { .is-header-search-text-alignment-center .header-search-input {
text-align: center; text-align: center;
} }
.is-header-search-text-align-right .header-search-input { .is-header-search-text-alignment-right .header-search-input {
text-align: right; text-align: right;
} }
@ -109,27 +109,27 @@
} }
.header-item-grid { .header-item-grid {
margin: calc(-1 * calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2))); margin: calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier))) 0 0 calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier)));
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
} }
.is-header-item-alignment-horizontal-left .header-item-grid { .is-header-item-alignment-left .header-item-grid {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-item-alignment-horizontal-center .header-item-grid { .is-header-item-alignment-center .header-item-grid {
justify-content: center; justify-content: center;
} }
.is-header-item-alignment-horizontal-right .header-item-grid { .is-header-item-alignment-right .header-item-grid {
justify-content: flex-end; justify-content: flex-end;
} }
.header-item { .header-item {
margin: calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2)); margin: calc(var(--layout-gutter) * var(--layout-gutter-multiplier)) 0 0 calc(var(--layout-gutter) * var(--layout-gutter-multiplier));
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;

112
src/css/link.css
View File

@ -9,15 +9,15 @@
display: flex; display: flex;
} }
.is-link-area-alignment-horizontal-left .link { .is-link-area-alignment-left .link {
justify-content: flex-start; justify-content: flex-start;
} }
.is-link-area-alignment-horizontal-center .link { .is-link-area-alignment-center .link {
justify-content: center; justify-content: center;
} }
.is-link-area-alignment-horizontal-right .link { .is-link-area-alignment-right .link {
justify-content: flex-end; justify-content: flex-end;
} }
@ -130,28 +130,49 @@
flex-direction: column; flex-direction: column;
} }
.is-link-style-block.is-link-display-alignment-horizontal-left .link-panel-front { .is-link-style-block.is-link-display-alignment-topleft .link-panel-front {
justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-horizontal-center .link-panel-front { .is-link-style-block.is-link-display-alignment-topcenter .link-panel-front {
justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-horizontal-right .link-panel-front { .is-link-style-block.is-link-display-alignment-topright .link-panel-front {
justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-block.is-link-display-alignment-vertical-top .link-panel-front { .is-link-style-block.is-link-display-alignment-centerleft .link-panel-front {
justify-content: flex-start;
}
.is-link-style-block.is-link-display-alignment-vertical-center .link-panel-front {
justify-content: center; justify-content: center;
align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-vertical-bottom .link-panel-front { .is-link-style-block.is-link-display-alignment-centercenter .link-panel-front {
justify-content: center;
align-items: center;
}
.is-link-style-block.is-link-display-alignment-centerright .link-panel-front {
justify-content: center;
align-items: flex-end;
}
.is-link-style-block.is-link-display-alignment-bottomleft .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start;
}
.is-link-style-block.is-link-display-alignment-bottomcenter .link-panel-front {
justify-content: flex-end;
align-items: center;
}
.is-link-style-block.is-link-display-alignment-bottomright .link-panel-front {
justify-content: flex-end;
align-items: flex-end;
} }
.is-link-style-list .link-panel-front { .is-link-style-list .link-panel-front {
@ -159,27 +180,48 @@
flex-direction: row; flex-direction: row;
} }
.is-link-style-list.is-link-display-alignment-horizontal-left .link-panel-front { .is-link-style-list.is-link-display-alignment-topleft .link-panel-front {
justify-content: flex-start; justify-content: flex-start;
}
.is-link-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
justify-content: center;
}
.is-link-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
justify-content: flex-end;
}
.is-link-style-list.is-link-display-alignment-vertical-top .link-panel-front {
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-list.is-link-display-alignment-vertical-center .link-panel-front { .is-link-style-list.is-link-display-alignment-topcenter .link-panel-front {
justify-content: center;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-topright .link-panel-front {
justify-content: flex-end;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-centerleft .link-panel-front {
justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-style-list.is-link-display-alignment-vertical-bottom .link-panel-front { .is-link-style-list.is-link-display-alignment-centercenter .link-panel-front {
justify-content: center;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-centerright .link-panel-front {
justify-content: flex-end;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-bottomleft .link-panel-front {
justify-content: flex-start;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-bottomcenter .link-panel-front {
justify-content: center;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-bottomright .link-panel-front {
justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
@ -293,15 +335,21 @@
display: flex; display: flex;
} }
.is-link-display-alignment-horizontal-left .link-url { .is-link-display-alignment-topleft .link-url,
.is-link-display-alignment-centerleft .link-url,
.is-link-display-alignment-bottomleft .link-url {
justify-content: flex-start; justify-content: flex-start;
} }
.is-link-display-alignment-horizontal-center .link-url { .is-link-display-alignment-topcenter .link-url,
.is-link-display-alignment-centercenter .link-url,
.is-link-display-alignment-bottomcenter .link-url {
justify-content: center; justify-content: center;
} }
.is-link-display-alignment-horizontal-right .link-url { .is-link-display-alignment-topright .link-url,
.is-link-display-alignment-centerright .link-url,
.is-link-display-alignment-bottomright .link-url {
justify-content: flex-end; justify-content: flex-end;
} }
@ -396,15 +444,15 @@
transition: color var(--layout-transition-speed-fast) ease-in-out; transition: color var(--layout-transition-speed-fast) ease-in-out;
} }
.is-link-display-alignment-horizontal-left .link-name { .is-link-display-alignment-left .link-name {
text-align: left; text-align: left;
} }
.is-link-display-alignment-horizontal-center .link-name { .is-link-display-alignment-center .link-name {
text-align: center; text-align: center;
} }
.is-link-display-alignment-horizontal-right .link-name { .is-link-display-alignment-right .link-name {
text-align: right; text-align: right;
} }

11
src/css/utilities.css
View File

@ -38,3 +38,14 @@
.is-pop { .is-pop {
animation: pop var(--layout-transition-speed-fast) 1; animation: pop var(--layout-transition-speed-fast) 1;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

2
src/css/variables.css
View File

@ -77,7 +77,7 @@
--form-label: var(--theme-gray-12); --form-label: var(--theme-gray-12);
--form-label-disabled: var(--theme-gray-04); --form-label-disabled: var(--theme-gray-04);
--form-checkbox-radio-label: var(--theme-gray-12); --form-checkbox-radio-label: var(--theme-gray-12);
--form-checkbox-radio-chcked-label: var(--theme-gray-16); --form-checkbox-radio-checked-label: var(--theme-gray-16);
--form-checkbox-radio-disabled-label: var(--theme-gray-04); --form-checkbox-radio-disabled-label: var(--theme-gray-04);
--form-range-thumb: var(--theme-gray-12); --form-range-thumb: var(--theme-gray-12);
/* button */ /* button */

172
src/index.html
View File

@ -134,35 +134,48 @@
<input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="1"> <input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="1">
</div> </div>
<hr> <hr>
<label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label> <label class="control-layout-alignment-label">Area Alignment</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x3 form-grid-square control-layout-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1"> <input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="1">
<label for="control-layout-alignment-horizontal-left">Left</label> <label for="control-layout-alignment-topleft"><span class="sr-only">Top left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1"> <input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="1">
<label for="control-layout-alignment-horizontal-center">Centre</label> <label for="control-layout-alignment-topcenter"><span class="sr-only">Top center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1"> <input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="1">
<label for="control-layout-alignment-horizontal-right">Right</label> <label for="control-layout-alignment-topright"><span class="sr-only">Top right</span></label>
</div>
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
<hr>
<label class="control-layout-alignment-vertical-label">Vertical Alignment</label>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
<label for="control-layout-alignment-vertical-top">Top</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1"> <input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="1">
<label for="control-layout-alignment-vertical-center">Centre</label> <label for="control-layout-alignment-centerleft"><span class="sr-only">Center left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1"> <input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="1">
<label for="control-layout-alignment-vertical-bottom">Bottom</label> <label for="control-layout-alignment-centercenter"><span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="1">
<label for="control-layout-alignment-centerright"><span class="sr-only">Center right</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="1">
<label for="control-layout-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="1">
<label for="control-layout-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="1">
<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> </div>
<p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@ -177,6 +190,7 @@
<div class="input-wrap"> <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"> <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> <label for="control-layout-order-linkHeader">Bookmarks then Header</label>
<p class="input-helper small muted">Only available when Bookmarks are shown.</p>
</div> </div>
</div> </div>
</div> </div>
@ -235,37 +249,45 @@
<button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button> <button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button>
</div> </div>
<hr> <hr>
<label class="control-header-area-alignment-horizontal-label">Area Horizontal Alignment</label> <label class="control-header-area-alignment-label">Area Horizontal Alignment</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-area-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-area-alignment-horizontal-left" class="control-header-area-alignment-horizontal-left" type="radio" name="control-header-area-alignment-horizontal" value="left" tabindex="1"> <input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="1">
<label for="control-header-area-alignment-horizontal-left">Left</label> <label for="control-header-area-alignment-left"><span class="sr-only">Left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-area-alignment-horizontal-center" class="control-header-area-alignment-horizontal-center" type="radio" name="control-header-area-alignment-horizontal" value="center" tabindex="1"> <input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="1">
<label for="control-header-area-alignment-horizontal-center">Centre</label> <label for="control-header-area-alignment-center"><span class="sr-only">Center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-area-alignment-horizontal-right" class="control-header-area-alignment-horizontal-right" type="radio" name="control-header-area-alignment-horizontal" value="right" tabindex="1"> <input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="1">
<label for="control-header-area-alignment-horizontal-right">Right</label> <label for="control-header-area-alignment-right"><span class="sr-only">Right</span></label>
</div>
</div> </div>
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p> <p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
</div>
<hr> <hr>
<label class="control-header-item-alignment-horizontal-label">Item Horizontal Alignment</label> <label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-item-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-item-alignment-horizontal-left" class="control-header-item-alignment-horizontal-left" type="radio" name="control-header-item-alignment-horizontal" value="left" tabindex="1"> <input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="1">
<label for="control-header-item-alignment-horizontal-left">Left</label> <label for="control-header-item-alignment-left"><span class="sr-only">Left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-item-alignment-horizontal-center" class="control-header-item-alignment-horizontal-center" type="radio" name="control-header-item-alignment-horizontal" value="center" tabindex="1"> <input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="1">
<label for="control-header-item-alignment-horizontal-center">Centre</label> <label for="control-header-item-alignment-center"><span class="sr-only">Center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-item-alignment-horizontal-right" class="control-header-item-alignment-horizontal-right" type="radio" name="control-header-item-alignment-horizontal" value="right" tabindex="1"> <input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="1">
<label for="control-header-item-alignment-horizontal-right">Right</label> <label for="control-header-item-alignment-right"><span class="sr-only">Right</span></label>
</div>
</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> <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> </div>
</div> </div>
</div>
<div class="menu-item"> <div class="menu-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Greeting</h1> <h1 class="menu-item-header-text">Greeting</h1>
@ -610,18 +632,22 @@
</div> </div>
</div> </div>
<hr> <hr>
<label class="control-header-search-text-align-label">Align Text</label> <label class="control-header-search-text-alignment-label">Align Text</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-search-text-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1"> <input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="1">
<label for="control-header-search-text-align-left">Left</label> <label for="control-header-search-text-alignment-left"><span class="sr-only">Left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1"> <input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="1">
<label for="control-header-search-text-align-center">Centre</label> <label for="control-header-search-text-alignment-center"><span class="sr-only">Center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1"> <input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="1">
<label for="control-header-search-text-align-right">Right</label> <label for="control-header-search-text-alignment-right"><span class="sr-only">Right</span></label>
</div>
</div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -735,18 +761,22 @@
<button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button> <button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button>
</div> </div>
<hr> <hr>
<label class="control-link-area-alignment-horizontal-label">Horizontal Alignment</label> <label class="control-link-area-alignment-label">Horizontal Alignment</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x1 form-grid-rectangle control-link-area-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-area-alignment-horizontal-left" class="control-link-area-alignment-horizontal-left" type="radio" name="control-link-area-alignment-horizontal" value="left" tabindex="1"> <input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="1">
<label for="control-link-area-alignment-horizontal-left">Left</label> <label for="control-link-area-alignment-left"><span class="sr-only">Left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-area-alignment-horizontal-center" class="control-link-area-alignment-horizontal-center" type="radio" name="control-link-area-alignment-horizontal" value="center" tabindex="1"> <input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="1">
<label for="control-link-area-alignment-horizontal-center">Centre</label> <label for="control-link-area-alignment-center"><span class="sr-only">Center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-area-alignment-horizontal-right" class="control-link-area-alignment-horizontal-right" type="radio" name="control-link-area-alignment-horizontal" value="right" tabindex="1"> <input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="1">
<label for="control-link-area-alignment-horizontal-right">Right</label> <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> <p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
</div> </div>
</div> </div>
@ -820,32 +850,46 @@
<label for="control-link-item-hover-scale">Grow on hover</label> <label for="control-link-item-hover-scale">Grow on hover</label>
</div> </div>
<hr> <hr>
<label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label> <label class="control-link-item-display-alignment-label">Content Alignment</label>
<div class="form-grid-wrap">
<div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-horizontal-left" class="control-link-item-display-alignment-horizontal-left" type="radio" name="control-link-item-display-alignment-horizontal" value="left" tabindex="1"> <input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="1">
<label for="control-link-item-display-alignment-horizontal-left">Left</label> <label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-horizontal-center" class="control-link-item-display-alignment-horizontal-center" type="radio" name="control-link-item-display-alignment-horizontal" value="center" tabindex="1"> <input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="1">
<label for="control-link-item-display-alignment-horizontal-center">Centre</label> <label for="control-link-item-display-alignment-topcenter"><span class="sr-only">Top center</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-horizontal-right" class="control-link-item-display-alignment-horizontal-right" type="radio" name="control-link-item-display-alignment-horizontal" value="right" tabindex="1"> <input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="1">
<label for="control-link-item-display-alignment-horizontal-right">Right</label> <label for="control-link-item-display-alignment-topright"><span class="sr-only">Top right</span></label>
</div>
<hr>
<label class="control-link-item-display-alignment-vertical-label">Content Vertical Alignment</label>
<div class="input-wrap">
<input id="control-link-item-display-alignment-vertical-top" class="control-link-item-display-alignment-vertical-top" type="radio" name="control-link-item-display-alignment-vertical" value="top" tabindex="1">
<label for="control-link-item-display-alignment-vertical-top">Top</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-vertical-center" class="control-link-item-display-alignment-vertical-center" type="radio" name="control-link-item-display-alignment-vertical" value="center" tabindex="1"> <input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="1">
<label for="control-link-item-display-alignment-vertical-center">Centre</label> <label for="control-link-item-display-alignment-centerleft"><span class="sr-only">Center left</span></label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-alignment-vertical-bottom" class="control-link-item-display-alignment-vertical-bottom" type="radio" name="control-link-item-display-alignment-vertical" value="bottom" tabindex="1"> <input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="1">
<label for="control-link-item-display-alignment-vertical-bottom">Bottom</label> <label for="control-link-item-display-alignment-centercenter"><span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="1">
<label for="control-link-item-display-alignment-centerright"><span class="sr-only">Center right</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="1">
<label for="control-link-item-display-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="1">
<label for="control-link-item-display-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="1">
<label for="control-link-item-display-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

358
src/js/control.js
View File

@ -78,98 +78,65 @@ var control = (function() {
layout.render.width(); layout.render.width();
} }
}, { }, {
element: helper.e(".control-layout-alignment-horizontal-left"), element: helper.e(".control-layout-alignment-topleft"),
path: "layout.alignment.horizontal", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-layout-alignment-horizontal-center"), element: helper.e(".control-layout-alignment-topcenter"),
path: "layout.alignment.horizontal", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-layout-alignment-horizontal-right"), element: helper.e(".control-layout-alignment-topright"),
path: "layout.alignment.horizontal", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-layout-alignment-vertical-top"), element: helper.e(".control-layout-alignment-centerleft"),
path: "layout.alignment.vertical", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-layout-alignment-vertical-center"), element: helper.e(".control-layout-alignment-centercenter"),
path: "layout.alignment.vertical", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-layout-alignment-vertical-bottom"), element: helper.e(".control-layout-alignment-centerright"),
path: "layout.alignment.vertical", path: "layout.alignment",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() { func: function() {
edge.render({ render();
element: helper.e(".layout"),
delay: 500
});
} }
}], }, {
element: helper.e(".control-layout-alignment-bottomleft"),
path: "layout.alignment",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-layout-alignment-bottomcenter"),
path: "layout.alignment",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-layout-alignment-bottomright"),
path: "layout.alignment",
type: "radio",
func: function() { func: function() {
render(); render();
} }
@ -177,15 +144,6 @@ var control = (function() {
element: helper.e(".control-layout-order-headerLink"), element: helper.e(".control-layout-order-headerLink"),
path: "layout.order", path: "layout.order",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
layout.render.order(); layout.render.order();
header.render.shade(); header.render.shade();
@ -195,15 +153,6 @@ var control = (function() {
element: helper.e(".control-layout-order-linkHeader"), element: helper.e(".control-layout-order-linkHeader"),
path: "layout.order", path: "layout.order",
type: "radio", type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.render({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() { func: function() {
layout.render.order(); layout.render.order();
header.render.shade(); header.render.shade();
@ -388,8 +337,8 @@ var control = (function() {
update(); update();
} }
}, { }, {
element: helper.e(".control-header-area-alignment-horizontal-left"), element: helper.e(".control-header-area-alignment-left"),
path: "header.area.alignment.horizontal", path: "header.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -404,8 +353,8 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-area-alignment-horizontal-center"), element: helper.e(".control-header-area-alignment-center"),
path: "header.area.alignment.horizontal", path: "header.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -420,8 +369,8 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-area-alignment-horizontal-right"), element: helper.e(".control-header-area-alignment-right"),
path: "header.area.alignment.horizontal", path: "header.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -436,22 +385,22 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-item-alignment-horizontal-left"), element: helper.e(".control-header-item-alignment-left"),
path: "header.item.alignment.horizontal", path: "header.item.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-item-alignment-horizontal-center"), element: helper.e(".control-header-item-alignment-center"),
path: "header.item.alignment.horizontal", path: "header.item.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-item-alignment-horizontal-right"), element: helper.e(".control-header-item-alignment-right"),
path: "header.item.alignment.horizontal", path: "header.item.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
@ -1368,22 +1317,22 @@ var control = (function() {
search.render.engine(); search.render.engine();
} }
}, { }, {
element: helper.e(".control-header-search-text-align-left"), element: helper.e(".control-header-search-text-alignment-left"),
path: "header.search.text.align", path: "header.search.text.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-search-text-align-center"), element: helper.e(".control-header-search-text-alignment-center"),
path: "header.search.text.align", path: "header.search.text.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-search-text-align-right"), element: helper.e(".control-header-search-text-alignment-right"),
path: "header.search.text.align", path: "header.search.text.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
@ -1674,8 +1623,8 @@ var control = (function() {
update(); update();
} }
}, { }, {
element: helper.e(".control-link-area-alignment-horizontal-left"), element: helper.e(".control-link-area-alignment-left"),
path: "link.area.alignment.horizontal", path: "link.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -1690,8 +1639,8 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-area-alignment-horizontal-center"), element: helper.e(".control-link-area-alignment-center"),
path: "link.area.alignment.horizontal", path: "link.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -1706,8 +1655,8 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-area-alignment-horizontal-right"), element: helper.e(".control-link-area-alignment-right"),
path: "link.area.alignment.horizontal", path: "link.area.alignment",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -1881,43 +1830,64 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-horizontal-left"), element: helper.e(".control-link-item-display-alignment-topleft"),
path: "link.item.display.alignment.horizontal", path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-horizontal-center"), element: helper.e(".control-link-item-display-alignment-topcenter"),
path: "link.item.display.alignment.horizontal", path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-horizontal-right"), element: helper.e(".control-link-item-display-alignment-topright"),
path: "link.item.display.alignment.horizontal", path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-vertical-top"), element: helper.e(".control-link-item-display-alignment-centerleft"),
path: "link.item.display.alignment.vertical", path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-vertical-center"), element: helper.e(".control-link-item-display-alignment-centercenter"),
path: "link.item.display.alignment.vertical", path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-display-alignment-vertical-bottom"), element: helper.e(".control-link-item-display-alignment-centerright"),
path: "link.item.display.alignment.vertical", path: "link.item.display.alignment",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-bottomleft"),
path: "link.item.display.alignment",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-bottomcenter"),
path: "link.item.display.alignment",
type: "radio",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-display-alignment-bottomright"),
path: "link.item.display.alignment",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
@ -2268,16 +2238,16 @@ var control = (function() {
}; };
var _header = function() { var _header = function() {
var _area = function() { var _area = function() {
helper.removeClass(html, "is-header-area-alignment-horizontal-left"); helper.removeClass(html, "is-header-area-alignment-left");
helper.removeClass(html, "is-header-area-alignment-horizontal-center"); helper.removeClass(html, "is-header-area-alignment-center");
helper.removeClass(html, "is-header-area-alignment-horizontal-right"); helper.removeClass(html, "is-header-area-alignment-right");
helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal); helper.addClass(html, "is-header-area-alignment-" + state.get().header.area.alignment);
}; };
var _item = function() { var _item = function() {
helper.removeClass(html, "is-header-item-alignment-horizontal-left"); helper.removeClass(html, "is-header-item-alignment-left");
helper.removeClass(html, "is-header-item-alignment-horizontal-center"); helper.removeClass(html, "is-header-item-alignment-center");
helper.removeClass(html, "is-header-item-alignment-horizontal-right"); helper.removeClass(html, "is-header-item-alignment-right");
helper.addClass(html, "is-header-item-alignment-horizontal-" + state.get().header.item.alignment.horizontal); helper.addClass(html, "is-header-item-alignment-" + state.get().header.item.alignment);
}; };
var _clock = function() { var _clock = function() {
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) { if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
@ -2297,13 +2267,13 @@ var control = (function() {
helper.removeClass(html, "is-header-search-show"); helper.removeClass(html, "is-header-search-show");
helper.removeClass(html, "is-header-search-style-custom"); helper.removeClass(html, "is-header-search-style-custom");
helper.removeClass(html, "is-header-search-style-auto"); helper.removeClass(html, "is-header-search-style-auto");
helper.removeClass(html, "is-header-search-text-align-left"); helper.removeClass(html, "is-header-search-text-alignment-left");
helper.removeClass(html, "is-header-search-text-align-center"); helper.removeClass(html, "is-header-search-text-alignment-center");
helper.removeClass(html, "is-header-search-text-align-right"); helper.removeClass(html, "is-header-search-text-alignment-right");
if (state.get().header.search.show) { if (state.get().header.search.show) {
helper.addClass(html, "is-header-search-show"); helper.addClass(html, "is-header-search-show");
helper.addClass(html, "is-header-search-style-" + state.get().header.search.style); helper.addClass(html, "is-header-search-style-" + state.get().header.search.style);
helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align); helper.addClass(html, "is-header-search-text-alignment-" + state.get().header.search.text.alignment);
}; };
helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name; 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; helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
@ -2371,32 +2341,34 @@ var control = (function() {
}; };
var _link = function() { var _link = function() {
helper.removeClass(html, "is-link-show"); helper.removeClass(html, "is-link-show");
helper.removeClass(html, "is-link-area-alignment-horizontal-left"); helper.removeClass(html, "is-link-area-alignment-left");
helper.removeClass(html, "is-link-area-alignment-horizontal-center"); helper.removeClass(html, "is-link-area-alignment-center");
helper.removeClass(html, "is-link-area-alignment-horizontal-right"); helper.removeClass(html, "is-link-area-alignment-right");
helper.removeClass(html, "is-link-name-show"); helper.removeClass(html, "is-link-name-show");
helper.removeClass(html, "is-link-display-show"); helper.removeClass(html, "is-link-display-show");
helper.removeClass(html, "is-link-display-alignment-horizontal-left"); helper.removeClass(html, "is-link-display-alignment-topleft");
helper.removeClass(html, "is-link-display-alignment-horizontal-center"); helper.removeClass(html, "is-link-display-alignment-topcenter");
helper.removeClass(html, "is-link-display-alignment-horizontal-right"); helper.removeClass(html, "is-link-display-alignment-topright");
helper.removeClass(html, "is-link-display-alignment-vertical-top"); helper.removeClass(html, "is-link-display-alignment-centerleft");
helper.removeClass(html, "is-link-display-alignment-vertical-center"); helper.removeClass(html, "is-link-display-alignment-centercenter");
helper.removeClass(html, "is-link-display-alignment-vertical-bottom"); helper.removeClass(html, "is-link-display-alignment-centerright");
helper.removeClass(html, "is-link-display-alignment-bottomleft");
helper.removeClass(html, "is-link-display-alignment-bottomcenter");
helper.removeClass(html, "is-link-display-alignment-bottomright");
helper.removeClass(html, "is-link-url-show"); helper.removeClass(html, "is-link-url-show");
helper.removeClass(html, "is-link-item-line"); helper.removeClass(html, "is-link-item-line");
helper.removeClass(html, "is-link-item-hover-scale"); helper.removeClass(html, "is-link-item-hover-scale");
helper.removeClass(html, "is-link-item-alignment-horizontal-left"); helper.removeClass(html, "is-link-item-alignment-left");
helper.removeClass(html, "is-link-item-alignment-horizontal-center"); helper.removeClass(html, "is-link-item-alignment-center");
helper.removeClass(html, "is-link-item-alignment-horizontal-right"); helper.removeClass(html, "is-link-item-alignment-right");
helper.removeClass(html, "is-link-style-list"); helper.removeClass(html, "is-link-style-list");
helper.removeClass(html, "is-link-style-block"); helper.removeClass(html, "is-link-style-block");
helper.removeClass(html, "is-link-edit"); helper.removeClass(html, "is-link-edit");
link.render.tabIndex(); link.render.tabIndex();
if (state.get().link.show) { if (state.get().link.show) {
helper.addClass(html, "is-link-show"); helper.addClass(html, "is-link-show");
helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal); helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment);
helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.item.display.alignment.horizontal); helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment);
helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.item.display.alignment.vertical);
helper.addClass(html, "is-link-style-" + state.get().link.style); helper.addClass(html, "is-link-style-" + state.get().link.style);
if (state.get().link.item.name.show) { if (state.get().link.item.name.show) {
helper.addClass(html, "is-link-name-show"); helper.addClass(html, "is-link-name-show");
@ -2421,16 +2393,18 @@ var control = (function() {
}; };
var _layout = function() { var _layout = function() {
helper.removeClass(html, "is-layout-scroll-past-end"); helper.removeClass(html, "is-layout-scroll-past-end");
helper.removeClass(html, "is-layout-alignment-horizontal-left"); helper.removeClass(html, "is-layout-alignment-topleft");
helper.removeClass(html, "is-layout-alignment-horizontal-center"); helper.removeClass(html, "is-layout-alignment-topcenter");
helper.removeClass(html, "is-layout-alignment-horizontal-right"); helper.removeClass(html, "is-layout-alignment-topright");
helper.removeClass(html, "is-layout-alignment-vertical-top"); helper.removeClass(html, "is-layout-alignment-centerleft");
helper.removeClass(html, "is-layout-alignment-vertical-center"); helper.removeClass(html, "is-layout-alignment-centercenter");
helper.removeClass(html, "is-layout-alignment-vertical-bottom"); helper.removeClass(html, "is-layout-alignment-centerright");
helper.removeClass(html, "is-layout-alignment-bottomleft");
helper.removeClass(html, "is-layout-alignment-bottomcenter");
helper.removeClass(html, "is-layout-alignment-bottomright");
helper.removeClass(html, "is-layout-order-headerLink"); helper.removeClass(html, "is-layout-order-headerLink");
helper.removeClass(html, "is-layout-order-linkHeader"); helper.removeClass(html, "is-layout-order-linkHeader");
helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal); helper.addClass(html, "is-layout-alignment-" + state.get().layout.alignment);
helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
helper.addClass(html, "is-layout-order-" + state.get().layout.order); helper.addClass(html, "is-layout-order-" + state.get().layout.order);
if (state.get().layout.scrollPastEnd) { if (state.get().layout.scrollPastEnd) {
helper.addClass(html, "is-layout-scroll-past-end"); helper.addClass(html, "is-layout-scroll-past-end");
@ -2637,10 +2611,10 @@ var control = (function() {
helper.e(".control-header-search-engine-youtube").disabled = false; helper.e(".control-header-search-engine-youtube").disabled = false;
helper.e(".control-header-search-engine-giphy").disabled = false; helper.e(".control-header-search-engine-giphy").disabled = false;
helper.e(".control-header-search-engine-custom").disabled = false; helper.e(".control-header-search-engine-custom").disabled = false;
helper.e(".control-header-search-text-align-label").removeAttribute("disabled"); helper.e(".control-header-search-text-alignment-label").removeAttribute("disabled");
helper.e(".control-header-search-text-align-left").disabled = false; helper.e(".control-header-search-text-alignment-left").disabled = false;
helper.e(".control-header-search-text-align-center").disabled = false; helper.e(".control-header-search-text-alignment-center").disabled = false;
helper.e(".control-header-search-text-align-right").disabled = false; helper.e(".control-header-search-text-alignment-right").disabled = false;
helper.e("[for=control-header-search-size]").removeAttribute("disabled"); helper.e("[for=control-header-search-size]").removeAttribute("disabled");
helper.e(".control-header-search-size").disabled = false; helper.e(".control-header-search-size").disabled = false;
helper.e(".control-header-search-size-default").disabled = false; helper.e(".control-header-search-size-default").disabled = false;
@ -2657,10 +2631,10 @@ var control = (function() {
helper.e(".control-header-search-engine-youtube").disabled = true; helper.e(".control-header-search-engine-youtube").disabled = true;
helper.e(".control-header-search-engine-giphy").disabled = true; helper.e(".control-header-search-engine-giphy").disabled = true;
helper.e(".control-header-search-engine-custom").disabled = true; helper.e(".control-header-search-engine-custom").disabled = true;
helper.e(".control-header-search-text-align-label").setAttribute("disabled", ""); helper.e(".control-header-search-text-alignment-label").setAttribute("disabled", "");
helper.e(".control-header-search-text-align-left").disabled = true; helper.e(".control-header-search-text-alignment-left").disabled = true;
helper.e(".control-header-search-text-align-center").disabled = true; helper.e(".control-header-search-text-alignment-center").disabled = true;
helper.e(".control-header-search-text-align-right").disabled = true; helper.e(".control-header-search-text-alignment-right").disabled = true;
helper.e("[for=control-header-search-size]").setAttribute("disabled", ""); helper.e("[for=control-header-search-size]").setAttribute("disabled", "");
helper.e(".control-header-search-size").disabled = true; helper.e(".control-header-search-size").disabled = true;
helper.e(".control-header-search-size-default").disabled = true; helper.e(".control-header-search-size-default").disabled = true;
@ -2746,10 +2720,11 @@ var control = (function() {
helper.e("[for=control-link-area-width]").setAttribute("disabled", ""); helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
helper.e(".control-link-area-width").disabled = true; helper.e(".control-link-area-width").disabled = true;
helper.e(".control-link-area-width-match").disabled = true; helper.e(".control-link-area-width-match").disabled = true;
helper.e(".control-link-area-alignment-horizontal-label").setAttribute("disabled", ""); helper.e(".control-link-area-alignment-grid").setAttribute("disabled", "");
helper.e(".control-link-area-alignment-horizontal-left").disabled = true; helper.e(".control-link-area-alignment-label").setAttribute("disabled", "");
helper.e(".control-link-area-alignment-horizontal-center").disabled = true; helper.e(".control-link-area-alignment-left").disabled = true;
helper.e(".control-link-area-alignment-horizontal-right").disabled = true; helper.e(".control-link-area-alignment-center").disabled = true;
helper.e(".control-link-area-alignment-right").disabled = true;
helper.e("[for=control-link-item-size]").setAttribute("disabled", ""); helper.e("[for=control-link-item-size]").setAttribute("disabled", "");
helper.e(".control-link-item-size").disabled = true; helper.e(".control-link-item-size").disabled = true;
helper.e(".control-link-item-size-default").disabled = true; helper.e(".control-link-item-size-default").disabled = true;
@ -2767,30 +2742,36 @@ var control = (function() {
helper.e(".control-link-item-url-show").disabled = true; helper.e(".control-link-item-url-show").disabled = true;
helper.e(".control-link-item-line").disabled = true; helper.e(".control-link-item-line").disabled = true;
helper.e(".control-link-item-hover-scale").disabled = true; helper.e(".control-link-item-hover-scale").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-grid").setAttribute("disabled", "");
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true; helper.e(".control-link-item-display-alignment-label").setAttribute("disabled", "");
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true; helper.e(".control-link-item-display-alignment-topleft").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-right").disabled = true; helper.e(".control-link-item-display-alignment-topcenter").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-label").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-topright").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-top").disabled = true; helper.e(".control-link-item-display-alignment-centerleft").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-center").disabled = true; helper.e(".control-link-item-display-alignment-centercenter").disabled = true;
helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = true; helper.e(".control-link-item-display-alignment-centerright").disabled = true;
helper.e(".control-link-item-display-alignment-bottomleft").disabled = true;
helper.e(".control-link-item-display-alignment-bottomcenter").disabled = true;
helper.e(".control-link-item-display-alignment-bottomright").disabled = true;
helper.e(".control-link-new-tab").disabled = true; helper.e(".control-link-new-tab").disabled = true;
helper.e(".control-link-style-block").disabled = true; helper.e(".control-link-style-block").disabled = true;
helper.e(".control-link-style-list").disabled = true; helper.e(".control-link-style-list").disabled = true;
helper.e(".control-link-sort-name").disabled = true; helper.e(".control-link-sort-name").disabled = true;
helper.e(".control-link-sort-letter").disabled = true; helper.e(".control-link-sort-letter").disabled = true;
helper.e(".control-link-sort-icon").disabled = true; helper.e(".control-link-sort-icon").disabled = true;
helper.e(".control-link-accent-clear").disabled = true;
helper.e(".control-link-accent-set").disabled = true;
if (state.get().link.show) { if (state.get().link.show) {
helper.e(".control-layout-order-headerLink").disabled = false; helper.e(".control-layout-order-headerLink").disabled = false;
helper.e(".control-layout-order-linkHeader").disabled = false; helper.e(".control-layout-order-linkHeader").disabled = false;
helper.e("[for=control-link-area-width]").removeAttribute("disabled"); helper.e("[for=control-link-area-width]").removeAttribute("disabled");
helper.e(".control-link-area-width").disabled = false; helper.e(".control-link-area-width").disabled = false;
helper.e(".control-link-area-width-match").disabled = false; helper.e(".control-link-area-width-match").disabled = false;
helper.e(".control-link-area-alignment-horizontal-label").removeAttribute("disabled"); helper.e(".control-link-area-alignment-grid").removeAttribute("disabled");
helper.e(".control-link-area-alignment-horizontal-left").disabled = false; helper.e(".control-link-area-alignment-label").removeAttribute("disabled");
helper.e(".control-link-area-alignment-horizontal-center").disabled = false; helper.e(".control-link-area-alignment-left").disabled = false;
helper.e(".control-link-area-alignment-horizontal-right").disabled = false; helper.e(".control-link-area-alignment-center").disabled = false;
helper.e(".control-link-area-alignment-right").disabled = false;
helper.e("[for=control-link-item-size]").removeAttribute("disabled"); helper.e("[for=control-link-item-size]").removeAttribute("disabled");
helper.e(".control-link-item-size").disabled = false; helper.e(".control-link-item-size").disabled = false;
helper.e(".control-link-item-size-default").disabled = false; helper.e(".control-link-item-size-default").disabled = false;
@ -2805,6 +2786,8 @@ var control = (function() {
helper.e(".control-link-sort-name").disabled = false; helper.e(".control-link-sort-name").disabled = false;
helper.e(".control-link-sort-letter").disabled = false; helper.e(".control-link-sort-letter").disabled = false;
helper.e(".control-link-sort-icon").disabled = false; helper.e(".control-link-sort-icon").disabled = false;
helper.e(".control-link-accent-clear").disabled = false;
helper.e(".control-link-accent-set").disabled = false;
if (state.get().link.item.display.show) { if (state.get().link.item.display.show) {
helper.e("[for=control-link-item-display-letter-size]").removeAttribute("disabled"); helper.e("[for=control-link-item-display-letter-size]").removeAttribute("disabled");
helper.e(".control-link-item-display-letter-size").disabled = false; helper.e(".control-link-item-display-letter-size").disabled = false;
@ -2818,15 +2801,18 @@ var control = (function() {
helper.e(".control-link-item-name-size").disabled = false; helper.e(".control-link-item-name-size").disabled = false;
helper.e(".control-link-item-name-size-default").disabled = false; helper.e(".control-link-item-name-size-default").disabled = false;
}; };
if (state.get().link.item.display.show || state.get().link.item.name.show || state.get().link.item.url) { if (state.get().link.item.display.show || state.get().link.item.name.show) {
helper.e(".control-link-item-display-alignment-horizontal-label").removeAttribute("disabled"); helper.e(".control-link-item-display-alignment-grid").removeAttribute("disabled");
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = false; helper.e(".control-link-item-display-alignment-label").removeAttribute("disabled");
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = false; helper.e(".control-link-item-display-alignment-topleft").disabled = false;
helper.e(".control-link-item-display-alignment-horizontal-right").disabled = false; helper.e(".control-link-item-display-alignment-topcenter").disabled = false;
helper.e(".control-link-item-display-alignment-vertical-label").removeAttribute("disabled"); helper.e(".control-link-item-display-alignment-topright").disabled = false;
helper.e(".control-link-item-display-alignment-vertical-top").disabled = false; helper.e(".control-link-item-display-alignment-centerleft").disabled = false;
helper.e(".control-link-item-display-alignment-vertical-center").disabled = false; helper.e(".control-link-item-display-alignment-centercenter").disabled = false;
helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = false; helper.e(".control-link-item-display-alignment-centerright").disabled = false;
helper.e(".control-link-item-display-alignment-bottomleft").disabled = false;
helper.e(".control-link-item-display-alignment-bottomcenter").disabled = false;
helper.e(".control-link-item-display-alignment-bottomright").disabled = false;
}; };
}; };
}; };

24
src/js/state.js
View File

@ -4,14 +4,10 @@ var state = (function() {
header: { header: {
area: { area: {
width: 100, width: 100,
alignment: { alignment: "center"
horizontal: "center"
}
}, },
item: { item: {
alignment: { alignment: "left"
horizontal: "left"
}
}, },
clock: { clock: {
hours: { hours: {
@ -94,7 +90,7 @@ var state = (function() {
} }
}, },
text: { text: {
align: "center" alignment: "center"
}, },
size: 1 size: 1
}, },
@ -133,18 +129,13 @@ var state = (function() {
link: { link: {
area: { area: {
width: 100, width: 100,
alignment: { alignment: "center"
horizontal: "center"
}
}, },
item: { item: {
display: { display: {
show: true, show: true,
size: 2, size: 2,
alignment: { alignment: "centercenter",
horizontal: "center",
vertical: "center"
},
letter: { letter: {
size: 3 size: 3
}, },
@ -167,10 +158,7 @@ var state = (function() {
style: "block" style: "block"
}, },
layout: { layout: {
alignment: { alignment: "centercenter",
horizontal: "center",
vertical: "center"
},
order: "headerLink", order: "headerLink",
padding: 4, padding: 4,
gutter: 2, gutter: 2,

16
src/js/update.js
View File

@ -572,6 +572,18 @@ var update = (function() {
return data; return data;
}; };
var _update_3270 = function(data) {
data.version = "3.27.0";
data.state.header.area.alignment = data.state.header.area.alignment.horizontal;
data.state.header.item.alignment = data.state.header.item.alignment.horizontal;
data.state.header.search.text.alignment = data.state.header.search.text.align;
delete data.state.header.search.text.align;
data.state.link.area.alignment = data.state.link.area.alignment.horizontal;
data.state.link.item.display.alignment = data.state.link.item.display.alignment.horizontal + data.state.link.item.display.alignment.vertical;
data.state.layout.alignment = data.state.layout.alignment.horizontal + data.state.layout.alignment.vertical;
return data;
};
// var _update_300 = function(data) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -718,6 +730,10 @@ var update = (function() {
console.log("\t= running update 3.21.0"); console.log("\t= running update 3.21.0");
data = _update_3210(data); data = _update_3210(data);
}; };
if (version.compare(data.version, "3.27.0") == -1) {
console.log("\t= running update 3.27.0");
data = _update_3270(data);
};
}; };
// if no update is needed // if no update is needed
// version bump // version bump

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "3.26.0"; var current = "3.27.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.26.0", "version": "3.27.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"