mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-08 15:09:30 +01:00
[feature] make header items sortable
This commit is contained in:
Kombie
GitHub
parent
cec82cf829
commit
cd776f5136
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.36.0",
|
||||
"version": "4.37.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.36.0",
|
||||
"version": "4.37.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -144,8 +144,8 @@ button [class^="icon-"],
|
||||
button [class*=" icon-"],
|
||||
.button [class^="icon-"],
|
||||
.button [class*=" icon-"] {
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.button.active {
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
@ -16,14 +15,17 @@
|
||||
|
||||
.is-header-item-alignment-left .clock {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .clock {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right .clock {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.clock-separator,
|
||||
@ -48,7 +50,7 @@
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
justify-content: center;
|
||||
min-width: 1.25em;
|
||||
/* min-width: 1.25em; */
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left .clock-item:not(:last-child) {
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
@ -16,14 +15,17 @@
|
||||
|
||||
.is-header-item-alignment-left .date {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .date {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right .date {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.date-separator,
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
padding: 1.5em 1em 1em 1em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
/* label */
|
||||
@ -390,6 +390,44 @@ input[type="text"]:disabled:focus::placeholder {
|
||||
color: rgb(var(--form-placeholder-disabled));
|
||||
}
|
||||
|
||||
.input-clear[type="email"],
|
||||
.input-clear[type="number"],
|
||||
.input-clear[type="password"],
|
||||
.input-clear[type="search"],
|
||||
.input-clear[type="tel"],
|
||||
.input-clear[type="text"] {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input-clear[type="email"]:hover,
|
||||
.input-clear[type="number"]:hover,
|
||||
.input-clear[type="password"]:hover,
|
||||
.input-clear[type="search"]:hover,
|
||||
.input-clear[type="tel"]:hover,
|
||||
.input-clear[type="text"]:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-clear[type="email"]:focus,
|
||||
.input-clear[type="email"]:active,
|
||||
.input-clear[type="number"]:focus,
|
||||
.input-clear[type="number"]:active,
|
||||
.input-clear[type="password"]:focus,
|
||||
.input-clear[type="password"]:active,
|
||||
.input-clear[type="search"]:focus,
|
||||
.input-clear[type="search"]:active,
|
||||
.input-clear[type="tel"]:focus,
|
||||
.input-clear[type="tel"]:active,
|
||||
.input-clear[type="text"]:focus,
|
||||
.input-clear[type="text"]:active {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
/* checkbox and radio */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
@ -1324,7 +1362,6 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-group .form-wrap {
|
||||
@ -1508,7 +1545,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
}
|
||||
|
||||
.form-group-border {
|
||||
border-radius: calc(var(--theme-radius) * 2);
|
||||
border-radius: var(--theme-radius);
|
||||
border-width: var(--layout-line-width);
|
||||
border-color: rgb(var(--form-group-text-border));
|
||||
border-style: solid;
|
||||
@ -1587,17 +1624,6 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.form-group-text-transparent,
|
||||
.form-group-text-transparent:hover,
|
||||
.form-group-text-transparent:focus,
|
||||
.form-group-text-transparent:active,
|
||||
.form-group-text-transparent.disabled,
|
||||
.form-group-text-transparent.disabled:hover,
|
||||
.form-group-text-transparent.disabled:focus,
|
||||
.form-group-text-transparent.disable:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.form-group-item-small,
|
||||
.form-group-item-medium,
|
||||
.form-group-item-large,
|
||||
@ -1662,6 +1688,17 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
min-width: inherit;
|
||||
}
|
||||
|
||||
.form-group-text-transparent,
|
||||
.form-group-text-transparent:hover,
|
||||
.form-group-text-transparent:focus,
|
||||
.form-group-text-transparent:active,
|
||||
.form-group-text-transparent.disabled,
|
||||
.form-group-text-transparent.disabled:hover,
|
||||
.form-group-text-transparent.disabled:focus,
|
||||
.form-group-text-transparent.disable:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* form dropdown */
|
||||
.form-dropdown {
|
||||
position: relative;
|
||||
|
||||
@ -6,23 +6,25 @@
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left .greeting {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .greeting {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right .greeting {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -110,34 +110,13 @@
|
||||
border-radius: calc(var(--theme-radius) * 4);
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-left .header-search-input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-center .header-search-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-right .header-search-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-header-searching .header-search-input[type="text"] {
|
||||
padding-right: 3.5em;
|
||||
}
|
||||
|
||||
.header-search-clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.header-item-grid {
|
||||
margin: calc(-1 * calc(var(--layout-space) * var(--layout-gutter))) 0 0 calc(-1 * calc(var(--layout-space) * var(--layout-gutter)));
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left .header-item-grid {
|
||||
@ -162,72 +141,178 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.header-date-body,
|
||||
.header-clock-body,
|
||||
.header-search-body,
|
||||
.header-button-body,
|
||||
.header-greeting-body,
|
||||
.header-transitional-body {
|
||||
.is-header-search-width-by-auto .header-item-search {
|
||||
flex-grow: 1;
|
||||
width: 15em;
|
||||
min-width: 15em;
|
||||
}
|
||||
|
||||
.is-header-search-width-by-custom .header-item-search {
|
||||
flex-grow: 0;
|
||||
width: var(--header-search-width-size);
|
||||
}
|
||||
|
||||
.is-header-item-newline-greeting .header-item-greeting {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-clock .header-item-clock {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-transitional .header-item-transitional {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-date .header-item-date {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-search .header-item-search {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-editadd .header-item-editadd {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-coloraccent .header-item-coloraccent {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.is-header-item-newline-menu .header-item-menu {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.header-item-menu-baseline-alignment-character {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.header-item-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-item-body-greeting,
|
||||
.header-item-body-date,
|
||||
.header-item-body-transitional,
|
||||
.header-item-body-clock,
|
||||
.header-item-body-search,
|
||||
.header-item-body-editadd,
|
||||
.header-item-body-coloraccent,
|
||||
.header-item-body-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-date-body {
|
||||
font-size: var(--header-date-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-clock-body {
|
||||
font-size: var(--header-clock-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-search-body {
|
||||
font-size: var(--header-search-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-button-body {
|
||||
font-size: var(--header-button-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-greeting-body {
|
||||
.header-item-body-greeting {
|
||||
font-size: var(--header-greeting-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-transitional-body {
|
||||
.header-item-body-clock {
|
||||
font-size: var(--header-clock-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-item-body-transitional {
|
||||
font-size: var(--header-transitional-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-date,
|
||||
.header-clock,
|
||||
.header-search,
|
||||
.header-edit-add,
|
||||
.header-coloraccent,
|
||||
.header-greeting,
|
||||
.header-transitional,
|
||||
.header-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-header-search-show .header-search,
|
||||
.is-header-date-show .header-date,
|
||||
.is-header-clock-show .header-clock,
|
||||
.is-header-button-editadd-show .header-edit-add,
|
||||
.is-header-button-coloraccent-show .header-coloraccent,
|
||||
.is-header-greeting-show .header-greeting,
|
||||
.is-header-transitional-show .header-transitional,
|
||||
.is-menu .header-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-header-search-style-auto .header-search {
|
||||
.header-item-body-date {
|
||||
font-size: var(--header-date-size);
|
||||
flex-grow: 1;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.is-header-search-style-custom .header-search {
|
||||
width: var(--header-search-width);
|
||||
.header-item-body-search {
|
||||
font-size: var(--header-search-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-item-body-editadd {
|
||||
font-size: var(--header-editadd-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-item-body-coloraccent {
|
||||
font-size: var(--header-coloraccent-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-item-body-menu {
|
||||
font-size: var(--header-menu-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.is-header-item-newline-search.is-header-search-width-by-custom .header-item-body-search {
|
||||
flex-grow: 0;
|
||||
width: var(--header-search-width-size);
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left .header-item-body-greeting,
|
||||
.is-header-item-alignment-left .header-item-body-clock,
|
||||
.is-header-item-alignment-left .header-item-body-transitional,
|
||||
.is-header-item-alignment-left .header-item-body-date,
|
||||
.is-header-item-alignment-left .header-item-body-search,
|
||||
.is-header-item-alignment-left .header-item-body-editadd,
|
||||
.is-header-item-alignment-left .header-item-body-coloraccent,
|
||||
.is-header-item-alignment-left .header-item-body-menu {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .header-item-body-greeting,
|
||||
.is-header-item-alignment-center .header-item-body-clock,
|
||||
.is-header-item-alignment-center .header-item-body-transitional,
|
||||
.is-header-item-alignment-center .header-item-body-date,
|
||||
.is-header-item-alignment-center .header-item-body-search,
|
||||
.is-header-item-alignment-center .header-item-body-editadd,
|
||||
.is-header-item-alignment-center .header-item-body-coloraccent,
|
||||
.is-header-item-alignment-center .header-item-body-menu {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right .header-item-body-greeting,
|
||||
.is-header-item-alignment-right .header-item-body-clock,
|
||||
.is-header-item-alignment-right .header-item-body-transitional,
|
||||
.is-header-item-alignment-right .header-item-body-date,
|
||||
.is-header-item-alignment-right .header-item-body-search,
|
||||
.is-header-item-alignment-right .header-item-body-editadd,
|
||||
.is-header-item-alignment-right .header-item-body-coloraccent,
|
||||
.is-header-item-alignment-right .header-item-body-menu {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-item-sort-placeholder {
|
||||
width: 0.5em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-item-sort-placeholder-edge {
|
||||
background-color: rgba(var(--theme-accent), 0.2);
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 2.5em;
|
||||
position: relative;
|
||||
box-shadow: var(--edge-shadow);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1,3 +1,31 @@
|
||||
.search {
|
||||
.search-wrapper {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-left .search-input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-center .search-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-search-text-alignment-right .search-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-header-searching .search-input[type="text"] {
|
||||
padding-right: 3.5em;
|
||||
}
|
||||
|
||||
@ -6,23 +6,25 @@
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
color: rgb(var(--theme-color-14));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-left .transitional {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .transitional {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-right .transitional {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -77,13 +77,15 @@
|
||||
--header-color-theme: var(--theme-color-01);
|
||||
--header-color-custom: rgb(0, 0, 0);
|
||||
--header-opacity: 0.95;
|
||||
--header-search-width: 0%;
|
||||
--header-search-width-size: 30%;
|
||||
--header-border-top: 0;
|
||||
--header-border-bottom: 0;
|
||||
--header-date-size: 1em;
|
||||
--header-clock-size: 1em;
|
||||
--header-search-size: 1em;
|
||||
--header-button-size: 1em;
|
||||
--header-editadd-size: 1em;
|
||||
--header-coloraccent-size: 1em;
|
||||
--header-menu-size: 1em;
|
||||
--header-greeting-size: 1em;
|
||||
--header-transitional-size: 1em;
|
||||
/* group */
|
||||
|
||||
@ -3,85 +3,7 @@
|
||||
<header class="header">
|
||||
<div class="header-color"></div>
|
||||
<div class="header-border"></div>
|
||||
<div class="header-area">
|
||||
<div class="header-item-grid">
|
||||
<div class="header-item header-greeting">
|
||||
<div class="header-greeting-body">
|
||||
<p class="greeting"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-transitional">
|
||||
<div class="header-transitional-body">
|
||||
<p class="transitional"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-clock">
|
||||
<div class="header-clock-body">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-date">
|
||||
<div class="header-date-body">
|
||||
<p class="date"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-search">
|
||||
<div class="header-search-body">
|
||||
<form class="search" action="" method="get">
|
||||
<input class="header-search-input search-input" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="header-search-clear search-clear button button-link" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-edit-add">
|
||||
<div class="header-button-body">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-edit"><span class="label-icon"></span> Edit</label>
|
||||
</div>
|
||||
<div class="form-dropdown">
|
||||
<button class="control-add-toggle form-dropdown-toggle button" tabindex="1">
|
||||
<span class="button-text">Add</span>
|
||||
</button>
|
||||
<ul class="list-unstyled form-dropdown-menu">
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><span class="button-text">New Group</span></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><span class="button-text">New Bookmark</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-coloraccent">
|
||||
<div class="header-button-body">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button input-color-dot input-color-dot-shade">
|
||||
<input id="control-theme-color-rgb-color-quick" class="control-theme-color-rgb-color-quick" type="color" value="#000000" tabindex="1">
|
||||
<label for="control-theme-color-rgb-color-quick">Colour</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent">
|
||||
<input id="control-theme-accent-rgb-color-quick" class="control-theme-accent-rgb-color-quick" type="color" value="#000000" tabindex="1">
|
||||
<label for="control-theme-accent-rgb-color-quick">Accent</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-menu">
|
||||
<div class="header-button-body">
|
||||
<button class="control-menu-open button" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-area"></div>
|
||||
</header>
|
||||
|
||||
<section class="link"></section>
|
||||
|
||||
@ -68,6 +68,16 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-header-item-alignment-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-item-alignment-label">Header item order</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="header-order"></div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -107,6 +117,14 @@
|
||||
<button class="control-header-greeting-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,6 +160,14 @@
|
||||
<button class="control-header-transitional-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,6 +250,14 @@
|
||||
<button class="control-header-clock-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -390,6 +424,14 @@
|
||||
<button class="control-header-date-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -404,34 +446,44 @@
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-style-label">Search box width</label>
|
||||
<label class="control-header-search-width-by-label">Search box width</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
||||
<label for="control-header-search-style-auto"><span class="label-icon"></span> Auto</label>
|
||||
<input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
||||
<label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-style-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
|
||||
<p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-style-custom"><span class="label-icon"></span> Custom</label>
|
||||
<input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-style-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
|
||||
<p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-search-width-range" class="control-header-search-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
<input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-width-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-search-style-label">Style</label>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
|
||||
<label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
|
||||
@ -479,7 +531,7 @@
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL</p>
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -515,53 +567,138 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Buttons</h1>
|
||||
<h1 class="menu-item-header-text">Edit/Add</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<label class="control-header-button-style-label">Button style</label>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="-1">
|
||||
<label for="control-header-button-style-box"><span class="label-icon"></span> Box</label>
|
||||
<input id="control-header-editadd-show" class="control-header-editadd-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-button-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
<div class="form-indent">
|
||||
<label class="control-header-editadd-style-label">Style</label>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-box" class="control-header-editadd-style-box" type="radio" name="control-header-editadd-style" value="box" tabindex="-1">
|
||||
<label for="control-header-editadd-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-clear" class="control-header-editadd-style-clear" type="radio" name="control-header-editadd-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-editadd-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-editadd-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-editadd-size-range" class="control-header-editadd-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-editadd-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-editadd-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour/Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-button-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
|
||||
<input id="control-header-coloraccent-show" class="control-header-coloraccent-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-button-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
|
||||
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-button-coloraccent-dot-show" class="control-header-button-coloraccent-dot-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-button-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
|
||||
<input id="control-header-coloraccent-dot-show" class="control-header-coloraccent-dot-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-coloraccent-style-label">Style</label>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-box" class="control-header-coloraccent-style-box" type="radio" name="control-header-coloraccent-style" value="box" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-clear" class="control-header-coloraccent-style-clear" type="radio" name="control-header-coloraccent-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-coloraccent-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-coloraccent-size-range" class="control-header-coloraccent-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-coloraccent-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-coloraccent-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Settings menu</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<label class="control-header-menu-style-label">Style</label>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-box" class="control-header-menu-style-box" type="radio" name="control-header-menu-style" value="box" tabindex="-1">
|
||||
<label for="control-header-menu-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-clear" class="control-header-menu-style-clear" type="radio" name="control-header-menu-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-menu-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-menu-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-menu-size-range" class="control-header-menu-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-menu-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-menu-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-button-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-button-size-range" class="control-header-button-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-button-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-button-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -143,23 +143,22 @@ var autoSuggest = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var documentEvent = {};
|
||||
|
||||
documentEvent.add = function() {
|
||||
document.addEventListener("click", documentEvent.clickOut, false);
|
||||
document.addEventListener("keydown", bind.navigateResults, false);
|
||||
bind.documentEvent = {
|
||||
add: function() {
|
||||
document.addEventListener("click", bind.documentEvent.clickOut, false);
|
||||
document.addEventListener("keydown", bind.navigateResults, false);
|
||||
},
|
||||
remove: function() {
|
||||
document.removeEventListener("click", bind.documentEvent.clickOut, false);
|
||||
document.removeEventListener("keydown", bind.navigateResults, false);
|
||||
},
|
||||
clickOut: function(event) {
|
||||
if (!(event.target.classList.contains("auto-suggest-list")) && !(event.target.classList.contains("auto-suggest-input"))) {
|
||||
render.close();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
documentEvent.remove = function() {
|
||||
document.removeEventListener("click", documentEvent.clickOut, false);
|
||||
document.removeEventListener("keydown", bind.navigateResults, false);
|
||||
};
|
||||
|
||||
documentEvent.clickOut = function(event) {
|
||||
if (!(event.target.classList.contains("auto-suggest-list")) && !(event.target.classList.contains("auto-suggest-input"))) {
|
||||
render.close();
|
||||
};
|
||||
};
|
||||
|
||||
var render = {};
|
||||
|
||||
@ -216,7 +215,7 @@ var autoSuggest = (function() {
|
||||
autoSuggest.appendChild(autoSuggestList);
|
||||
body.appendChild(autoSuggest);
|
||||
autoSuggest.setAttribute("style", "width: " + box.width + "px; top: " + box.top + "px; left: " + box.left + "px;");
|
||||
documentEvent.add();
|
||||
bind.documentEvent.add();
|
||||
};
|
||||
_populateList(autoSuggestList);
|
||||
};
|
||||
@ -233,7 +232,7 @@ var autoSuggest = (function() {
|
||||
var autoSuggest = helper.e(".auto-suggest");
|
||||
if (autoSuggest) {
|
||||
autoSuggest.remove();
|
||||
documentEvent.remove();
|
||||
bind.documentEvent.remove();
|
||||
_currentInputOptions = {};
|
||||
_autoSuggestActive = false;
|
||||
};
|
||||
|
||||
@ -12,9 +12,11 @@ var clock = (function() {
|
||||
var render = {};
|
||||
|
||||
render.clear = function() {
|
||||
var clock = helper.e(".clock");
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
if (state.get.current().header.clock.seconds.show || state.get.current().header.clock.minutes.show || state.get.current().header.clock.hours.show) {
|
||||
var clock = helper.e(".clock");
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
4144
src/js/control.js
4144
src/js/control.js
File diff suppressed because it is too large
Load Diff
@ -12,9 +12,11 @@ var date = (function() {
|
||||
var render = {};
|
||||
|
||||
render.clear = function() {
|
||||
var date = helper.e(".date");
|
||||
while (date.lastChild) {
|
||||
date.removeChild(date.lastChild);
|
||||
if (state.get.current().header.date.date.show || state.get.current().header.date.day.show || state.get.current().header.date.month.show || state.get.current().header.date.year.show) {
|
||||
var date = helper.e(".date");
|
||||
while (date.lastChild) {
|
||||
date.removeChild(date.lastChild);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -38,27 +38,24 @@ var dropdown = (function() {
|
||||
|
||||
var bind = {};
|
||||
|
||||
var documentEvent = {};
|
||||
|
||||
documentEvent.add = function() {
|
||||
document.addEventListener("click", documentEvent.clickOut, false);
|
||||
bind.documentEvent = {
|
||||
add: function() {
|
||||
document.addEventListener("click", bind.documentEvent.clickOut, false);
|
||||
},
|
||||
remove: function() {
|
||||
document.removeEventListener("click", bind.documentEvent.clickOut, false);
|
||||
},
|
||||
clickOut: function() {
|
||||
var path = event.composedPath();
|
||||
if (!path.includes(_currentFormDropdown)) {
|
||||
close();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
documentEvent.remove = function() {
|
||||
document.removeEventListener("click", documentEvent.clickOut, false);
|
||||
};
|
||||
|
||||
documentEvent.clickOut = function() {
|
||||
var path = event.composedPath();
|
||||
if (!path.includes(_currentFormDropdown)) {
|
||||
close();
|
||||
};
|
||||
};
|
||||
|
||||
bind.formDropdown = function() {
|
||||
var allFormDropdown = helper.eA(".form-dropdown");
|
||||
allFormDropdown.forEach(function(arrayItem, index) {
|
||||
var formDropdown = arrayItem;
|
||||
bind.formDropdown = function(formDropdown) {
|
||||
var bindDropdown = function(formDropdown) {
|
||||
var formDropdownToggle = formDropdown.querySelector(".form-dropdown-toggle");
|
||||
var allFormDropdownMenuItem = formDropdown.querySelectorAll(".form-dropdown-menu-item");
|
||||
formDropdownToggle.addEventListener("click", function() {
|
||||
@ -72,7 +69,21 @@ var dropdown = (function() {
|
||||
render.close();
|
||||
}, false);
|
||||
});
|
||||
});
|
||||
};
|
||||
if (formDropdown) {
|
||||
bindDropdown(formDropdown);
|
||||
} else {
|
||||
var allFormDropdown = helper.eA(".form-dropdown");
|
||||
allFormDropdown.forEach(function(arrayItem, index) {
|
||||
bindDropdown(arrayItem);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
bind.editAdd = function() {
|
||||
if (state.get.current().header.editAdd.show) {
|
||||
bind.formDropdown(helper.e(".header-item-body-editadd").querySelector(".form-dropdown"));
|
||||
};
|
||||
};
|
||||
|
||||
var render = {};
|
||||
@ -110,14 +121,14 @@ var dropdown = (function() {
|
||||
render.close = function() {
|
||||
helper.removeClass(_currentFormDropdown, "form-dropdown-open");
|
||||
render.offset();
|
||||
documentEvent.remove();
|
||||
bind.documentEvent.remove();
|
||||
_currentFormDropdown = null;
|
||||
};
|
||||
|
||||
render.open = function() {
|
||||
helper.addClass(_currentFormDropdown, "form-dropdown-open");
|
||||
render.offset();
|
||||
documentEvent.add();
|
||||
bind.documentEvent.add();
|
||||
};
|
||||
|
||||
var close = function() {
|
||||
|
||||
@ -12,9 +12,11 @@ var greeting = (function() {
|
||||
var render = {};
|
||||
|
||||
render.clear = function() {
|
||||
var greeting = helper.e(".greeting");
|
||||
while (greeting.lastChild) {
|
||||
greeting.removeChild(greeting.lastChild);
|
||||
if (state.get.current().header.greeting.show) {
|
||||
var greeting = helper.e(".greeting");
|
||||
while (greeting.lastChild) {
|
||||
greeting.removeChild(greeting.lastChild);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
443
src/js/header.js
443
src/js/header.js
@ -1,5 +1,15 @@
|
||||
var header = (function() {
|
||||
|
||||
var mod = {};
|
||||
|
||||
mod.item = {
|
||||
move: function(data) {
|
||||
var item = JSON.parse(JSON.stringify(state.get.current().header.order[data.origin]));
|
||||
state.get.current().header.order.splice(data.origin, 1);
|
||||
state.get.current().header.order.splice(data.destination, 0, item);
|
||||
}
|
||||
};
|
||||
|
||||
var bind = {};
|
||||
|
||||
bind.resize = function() {
|
||||
@ -25,6 +35,56 @@ var header = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
bind.sort = {
|
||||
update: {
|
||||
func: function(event) {
|
||||
var positionData = {
|
||||
origin: event.detail.origin.index,
|
||||
destination: event.detail.destination.index
|
||||
};
|
||||
mod.item.move(positionData);
|
||||
data.save();
|
||||
render.control.clear();
|
||||
render.control.all();
|
||||
bind.sort.item();
|
||||
render.item.clear();
|
||||
render.item.all();
|
||||
greeting.render.clear();
|
||||
greeting.render.all();
|
||||
clock.render.clear();
|
||||
clock.render.all();
|
||||
transitional.render.clear();
|
||||
transitional.render.all();
|
||||
date.render.clear();
|
||||
date.render.all();
|
||||
control.render.dependents();
|
||||
control.render.update.control.header();
|
||||
control.bind.control.header();
|
||||
search.render.engine();
|
||||
search.bind.input();
|
||||
search.bind.clear();
|
||||
dropdown.bind.editAdd();
|
||||
},
|
||||
remove: function() {
|
||||
sortable(".header-order")[0].removeEventListener("sortupdate", bind.sort.update.func, false);
|
||||
}
|
||||
},
|
||||
item: function() {
|
||||
var placeholderFormWrap = helper.node("div|class:form-wrap");
|
||||
var placeholderFormInline = helper.node("div|class:form-inline");
|
||||
var placeholder = helper.node("div|class:header-item-sort-placeholder-edge")
|
||||
placeholderFormInline.appendChild(placeholder);
|
||||
placeholderFormWrap.appendChild(placeholderFormInline);
|
||||
sortable('.header-order', {
|
||||
orientation: "vertical",
|
||||
handle: ".header-order-control-item-handle",
|
||||
placeholder: placeholderFormWrap
|
||||
});
|
||||
bind.sort.update.remove();
|
||||
sortable(".header-order")[0].addEventListener("sortupdate", bind.sort.update.func, false, event);
|
||||
}
|
||||
};
|
||||
|
||||
var render = {};
|
||||
|
||||
render.area = {
|
||||
@ -84,14 +144,306 @@ var header = (function() {
|
||||
html.style.setProperty("--header-border-bottom", state.get.current().header.border.bottom);
|
||||
};
|
||||
|
||||
render.search = {
|
||||
width: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-width", state.get.current().header.search.width + "%");
|
||||
render.control = {
|
||||
all: function() {
|
||||
var names = {
|
||||
greeting: "Greeting",
|
||||
clock: "Clock",
|
||||
transitional: "Transitional",
|
||||
date: "Date",
|
||||
search: "Search bar",
|
||||
editAdd: "Edit/Add",
|
||||
colorAccent: "Colour/Accent",
|
||||
menu: "Settings menu"
|
||||
};
|
||||
var headerOrder = helper.e(".header-order");
|
||||
state.get.current().header.order.forEach(function(arrayItem, index) {
|
||||
var formWrap = helper.node("div|class:form-wrap");
|
||||
var forminline = helper.node("div|class:form-inline");
|
||||
var formGroup = helper.node("div|class:form-group header-order-control");
|
||||
|
||||
var buttonUp = helper.node("button|class:button form-group-item-shrink header-order-control-item header-order-control-item-up,tabindex:-1,title:Move this header item up");
|
||||
var buttonUpIcon = helper.node("span|class:button-icon icon-arrow-up");
|
||||
buttonUp.appendChild(buttonUpIcon);
|
||||
|
||||
var linkHandle = helper.node("div|class:button form-group-item-shrink header-order-control-item header-order-control-item-handle,tabindex:-1,title:Drag header item to reorder");
|
||||
var linkHandleIcon = helper.node("span|class:button-icon icon-reorder");
|
||||
linkHandle.appendChild(linkHandleIcon);
|
||||
|
||||
var buttonDown = helper.node("button|class:button form-group-item-shrink header-order-control-item header-order-control-item-down,tabindex:-1,title:Move this header item down");
|
||||
var buttonDownIcon = helper.node("span|class:button-icon icon-arrow-down");
|
||||
buttonDown.appendChild(buttonDownIcon);
|
||||
|
||||
var name = helper.node("div:" + names[arrayItem]);
|
||||
|
||||
formGroup.appendChild(buttonUp);
|
||||
formGroup.appendChild(linkHandle);
|
||||
formGroup.appendChild(buttonDown);
|
||||
|
||||
forminline.appendChild(formGroup);
|
||||
forminline.appendChild(name);
|
||||
formWrap.appendChild(forminline);
|
||||
|
||||
headerOrder.appendChild(formWrap);
|
||||
|
||||
if (state.get.current().menu) {
|
||||
headerOrder.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
|
||||
arrayItem.tabIndex = 1;
|
||||
});
|
||||
};
|
||||
|
||||
buttonUp.addEventListener("click", function(event) {
|
||||
var positionData = {
|
||||
origin: index,
|
||||
destination: index - 1
|
||||
};
|
||||
if (positionData.destination < 0) {
|
||||
positionData.destination = 0
|
||||
};
|
||||
mod.item.move(positionData);
|
||||
data.save();
|
||||
render.control.clear();
|
||||
render.control.all();
|
||||
bind.sort.item();
|
||||
render.item.clear();
|
||||
render.item.all();
|
||||
greeting.render.clear();
|
||||
greeting.render.all();
|
||||
clock.render.clear();
|
||||
clock.render.all();
|
||||
transitional.render.clear();
|
||||
transitional.render.all();
|
||||
date.render.clear();
|
||||
date.render.all();
|
||||
control.render.dependents();
|
||||
control.render.update.control.header();
|
||||
control.bind.control.header();
|
||||
search.render.engine();
|
||||
search.bind.input();
|
||||
search.bind.clear();
|
||||
render.control.focus.up(positionData);
|
||||
dropdown.bind.editAdd();
|
||||
}, false);
|
||||
|
||||
buttonDown.addEventListener("click", function(event) {
|
||||
var positionData = {
|
||||
origin: index,
|
||||
destination: index + 1
|
||||
};
|
||||
mod.item.move(positionData);
|
||||
data.save();
|
||||
render.control.clear();
|
||||
render.control.all();
|
||||
bind.sort.item();
|
||||
render.item.clear();
|
||||
render.item.all();
|
||||
greeting.render.clear();
|
||||
greeting.render.all();
|
||||
clock.render.clear();
|
||||
clock.render.all();
|
||||
transitional.render.clear();
|
||||
transitional.render.all();
|
||||
date.render.clear();
|
||||
date.render.all();
|
||||
control.render.dependents();
|
||||
control.render.update.control.header();
|
||||
control.bind.control.header();
|
||||
search.render.engine();
|
||||
search.bind.input();
|
||||
search.bind.clear();
|
||||
render.control.focus.down(positionData);
|
||||
dropdown.bind.editAdd();
|
||||
}, false);
|
||||
});
|
||||
},
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
|
||||
clear: function() {
|
||||
var headerOrder = helper.e(".header-order");
|
||||
while (headerOrder.lastChild) {
|
||||
headerOrder.removeChild(headerOrder.lastChild);
|
||||
};
|
||||
},
|
||||
focus: {
|
||||
up: function(positionData) {
|
||||
var allHeaderOrderControl = helper.eA(".header-order-control");
|
||||
var target = positionData.destination;
|
||||
if (target < 0) {
|
||||
target = 0;
|
||||
};
|
||||
var button = allHeaderOrderControl[target].querySelector(".header-order-control-item-up");
|
||||
button.focus();
|
||||
},
|
||||
down: function(positionData) {
|
||||
var allHeaderOrderControl = helper.eA(".header-order-control");
|
||||
var target = positionData.destination;
|
||||
if (target >= allHeaderOrderControl.length) {
|
||||
target = allHeaderOrderControl.length - 1;
|
||||
};
|
||||
var button = allHeaderOrderControl[target].querySelector(".header-order-control-item-down");
|
||||
button.focus();
|
||||
}
|
||||
},
|
||||
tabindex: function() {
|
||||
var allHeaderItemControl = helper.eA(".header-item-control");
|
||||
if (state.get.current().edit) {
|
||||
allHeaderItemControl.forEach(function(arrayItem, index) {
|
||||
arrayItem.tabIndex = 1;
|
||||
});
|
||||
} else {
|
||||
allHeaderItemControl.forEach(function(arrayItem, index) {
|
||||
arrayItem.tabIndex = -1;
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
render.item = {
|
||||
all: function() {
|
||||
var headerArea = helper.e(".header-area");
|
||||
var headerItemGrid = helper.node("div|class:header-item-grid");
|
||||
state.get.current().header.order.forEach(function(arrayItem, index) {
|
||||
if ((arrayItem == "clock" && (state.get.current().header.clock.seconds.show || state.get.current().header.clock.minutes.show || state.get.current().header.clock.hours.show)) ||
|
||||
(arrayItem == "date" && (state.get.current().header.date.day.show || state.get.current().header.date.date.show || state.get.current().header.date.month.show || state.get.current().header.date.year.show)) ||
|
||||
state.get.current().header[arrayItem].show) {
|
||||
var name = arrayItem.toLowerCase();
|
||||
headerItemGrid.appendChild(render.item.wrapper(name, render.item[arrayItem](name), index));
|
||||
};
|
||||
});
|
||||
headerArea.appendChild(headerItemGrid);
|
||||
},
|
||||
clear: function() {
|
||||
var headerArea = helper.e(".header-area");
|
||||
while (headerArea.lastChild) {
|
||||
headerArea.removeChild(headerArea.lastChild);
|
||||
};
|
||||
},
|
||||
wrapper: function(name, item) {
|
||||
var headerItem = helper.node("div|class:header-item header-item-" + name + "");
|
||||
var headerItemBody = helper.node("div|class:header-item-body header-item-body-" + name);
|
||||
headerItemBody.appendChild(item);
|
||||
headerItem.appendChild(headerItemBody);
|
||||
return headerItem;
|
||||
},
|
||||
greeting: function(name) {
|
||||
return helper.node("p|class:" + name + "");
|
||||
},
|
||||
clock: function(name) {
|
||||
return helper.node("p|class:" + name + "");
|
||||
},
|
||||
transitional: function(name) {
|
||||
return helper.node("p|class:" + name + "");
|
||||
},
|
||||
date: function(name) {
|
||||
return helper.node("p|class:" + name + "");
|
||||
},
|
||||
search: function() {
|
||||
var headerSearchBody = helper.node("div|class:search-wrapper");
|
||||
var form = helper.node("form|class:search,action,method:get");
|
||||
var searchInput = helper.node("input|class:search-input,type:text,placeholder:Find or Search,name:q,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,tabindex:1");
|
||||
var hiddenInput = helper.node("input|type:submit,value:Search,class:is-hidden");
|
||||
var clearButton = helper.node("button|class:search-clear search-clear button button-link,tabindex:1,disabled");
|
||||
var clearButtonIcon = helper.node("span|class:icon-close");
|
||||
clearButton.appendChild(clearButtonIcon);
|
||||
form.appendChild(searchInput);
|
||||
form.appendChild(hiddenInput);
|
||||
headerSearchBody.appendChild(form);
|
||||
headerSearchBody.appendChild(clearButton);
|
||||
|
||||
if (state.get.current().header.search.style == "clear") {
|
||||
helper.addClass(searchInput, "input-clear");
|
||||
};
|
||||
|
||||
return headerSearchBody;
|
||||
},
|
||||
editAdd: function() {
|
||||
var formGroup = helper.node("div|class:header-editadd form-group form-group-nested-button");
|
||||
var formInputButton = helper.node("div|class:form-input-button form-input-hide");
|
||||
var controlEditInput = helper.node("input|id:control-edit,class:control-edit,type:checkbox,tabindex:1");
|
||||
var controlEditLabel = helper.node("label|for:control-edit");
|
||||
var controlEditLabelText = helper.node("span:Edit");
|
||||
var controlEditLabelIcon = helper.node("span|class:label-icon");
|
||||
controlEditLabel.appendChild(controlEditLabelText);
|
||||
controlEditLabel.appendChild(controlEditLabelIcon);
|
||||
formInputButton.appendChild(controlEditInput);
|
||||
formInputButton.appendChild(controlEditLabel);
|
||||
|
||||
var formDropdown = helper.node("div|class:form-dropdown");
|
||||
var controlAddToggle = helper.node("button|class:control-add-toggle form-dropdown-toggle button,tabindex:1");
|
||||
var controlAddToggleText = helper.node("span:Add");
|
||||
controlAddToggle.appendChild(controlAddToggleText);
|
||||
var formDropdownMenu = helper.node("ul|class:list-unstyled form-dropdown-menu");
|
||||
var controlGroupAddLi = helper.node("li");
|
||||
var controlGroupAdd = helper.node("button|class:button button-block text-left form-dropdown-menu-item control-group-add,tabindex:1");
|
||||
var controlGroupAddText = helper.node("span:New Group|class:button-text");
|
||||
controlGroupAdd.appendChild(controlGroupAddText);
|
||||
controlGroupAddLi.appendChild(controlGroupAdd);
|
||||
var controlLinkAddLi = helper.node("li");
|
||||
var controlLinkAdd = helper.node("button|class:button button-block text-left form-dropdown-menu-item control-link-add,tabindex:1");
|
||||
var controlLinkAddText = helper.node("span:New Bookmark|class:button-text");
|
||||
controlLinkAdd.appendChild(controlLinkAddText);
|
||||
controlLinkAddLi.appendChild(controlLinkAdd);
|
||||
formDropdownMenu.appendChild(controlGroupAddLi);
|
||||
formDropdownMenu.appendChild(controlLinkAddLi);
|
||||
formDropdown.appendChild(controlAddToggle);
|
||||
formDropdown.appendChild(formDropdownMenu);
|
||||
|
||||
if (state.get.current().header.editAdd.style == "clear") {
|
||||
helper.addClass(formInputButton, "form-input-button-link");
|
||||
helper.addClass(controlAddToggle, "button-link");
|
||||
};
|
||||
|
||||
formGroup.appendChild(formInputButton);
|
||||
formGroup.appendChild(formDropdown);
|
||||
|
||||
return formGroup;
|
||||
},
|
||||
colorAccent: function() {
|
||||
var formGroup = helper.node("div|class:header-coloraccent form-group form-group-nested-button");
|
||||
|
||||
var colorInputButton = helper.node("div|class:form-input-button");
|
||||
var colorInput = helper.node("input|id:control-theme-color-rgb-color-quick,class:control-theme-color-rgb-color-quick,type:color,value:#000000,tabindex:1");
|
||||
var colorInputLabel = helper.node("label|for:control-theme-color-rgb-color-quick");
|
||||
var colorInputLabelText = helper.node("span:Colour");
|
||||
colorInputLabel.appendChild(colorInputLabelText);
|
||||
colorInputButton.appendChild(colorInput);
|
||||
colorInputButton.appendChild(colorInputLabel);
|
||||
|
||||
var accentInputButton = helper.node("div|class:form-input-button");
|
||||
var accentInput = helper.node("input|id:control-theme-accent-rgb-color-quick,class:control-theme-accent-rgb-color-quick,type:color,value:#000000,tabindex:1");
|
||||
var accentInputLabel = helper.node("label|for:control-theme-accent-rgb-color-quick");
|
||||
var accentInputLabelText = helper.node("span:Accent");
|
||||
accentInputLabel.appendChild(accentInputLabelText);
|
||||
accentInputButton.appendChild(accentInput);
|
||||
accentInputButton.appendChild(accentInputLabel);
|
||||
|
||||
if (state.get.current().header.colorAccent.dot.show) {
|
||||
helper.addClass(colorInputButton, "input-color-dot");
|
||||
helper.addClass(colorInputButton, "input-color-dot-shade");
|
||||
helper.addClass(accentInputButton, "input-color-dot");
|
||||
helper.addClass(accentInputButton, "input-color-dot-accent");
|
||||
} else {
|
||||
helper.addClass(colorInputButton, "form-input-hide");
|
||||
helper.addClass(accentInputButton, "form-input-hide");
|
||||
};
|
||||
|
||||
if (state.get.current().header.colorAccent.style == "clear") {
|
||||
helper.addClass(colorInputButton, "form-input-button-link");
|
||||
helper.addClass(accentInputButton, "form-input-button-link");
|
||||
};
|
||||
|
||||
formGroup.appendChild(colorInputButton);
|
||||
formGroup.appendChild(accentInputButton);
|
||||
return formGroup;
|
||||
},
|
||||
menu: function() {
|
||||
var button = helper.node("button|class:control-menu-open button,tabindex:1");
|
||||
var baselineAlignmentCharacter = helper.node("span:-|class:header-item-menu-baseline-alignment-character,aria-hidden:true");
|
||||
var buttonIcon = helper.node("span|class:icon-settings");
|
||||
if (state.get.current().header.menu.style == "clear") {
|
||||
helper.addClass(button, "button-link");
|
||||
};
|
||||
button.appendChild(baselineAlignmentCharacter);
|
||||
button.appendChild(buttonIcon);
|
||||
return button;
|
||||
}
|
||||
};
|
||||
|
||||
@ -102,6 +454,19 @@ var header = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
render.search = {
|
||||
width: {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-width-size", state.get.current().header.search.width.size + "%");
|
||||
}
|
||||
},
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
render.transitional = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
@ -123,46 +488,24 @@ var header = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
render.button = {
|
||||
render.editadd = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-button-size", state.get.current().header.button.size + "em");
|
||||
},
|
||||
style: function() {
|
||||
var action = {
|
||||
box: function() {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.e(".control-add-toggle"), "button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.e(".control-menu-open"), "button-link");
|
||||
},
|
||||
clear: function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.e(".control-add-toggle"), "button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.e(".control-menu-open"), "button-link");
|
||||
}
|
||||
};
|
||||
action[state.get.current().header.button.style]();
|
||||
},
|
||||
dot: function() {
|
||||
if (state.get.current().header.button.colorAccent.dot.show) {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot-shade");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-hide");
|
||||
} else {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot-shade");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-hide");
|
||||
};
|
||||
html.style.setProperty("--header-editadd-size", state.get.current().header.editAdd.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
render.coloraccent = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-coloraccent-size", state.get.current().header.colorAccent.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
render.menu = {
|
||||
size: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-menu-size", state.get.current().header.menu.size + "em");
|
||||
}
|
||||
};
|
||||
|
||||
@ -170,6 +513,7 @@ var header = (function() {
|
||||
bind.resize();
|
||||
bind.scroll();
|
||||
bind.fonts();
|
||||
render.item.all();
|
||||
render.area.width();
|
||||
render.color.scrolling();
|
||||
render.color.custom();
|
||||
@ -179,15 +523,16 @@ var header = (function() {
|
||||
render.transitional.size();
|
||||
render.clock.size();
|
||||
render.date.size();
|
||||
render.search.width();
|
||||
render.search.width.size();
|
||||
render.search.size();
|
||||
render.button.size();
|
||||
render.button.style();
|
||||
render.button.dot();
|
||||
render.menu.size();
|
||||
render.control.all();
|
||||
bind.sort.item();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
mod: mod,
|
||||
render: render,
|
||||
init: init
|
||||
};
|
||||
|
||||
@ -220,7 +220,7 @@ var helper = (function() {
|
||||
return element;
|
||||
};
|
||||
|
||||
var node = function(string) {
|
||||
var node = function(string, node) {
|
||||
// set element
|
||||
var tag;
|
||||
if (string.indexOf("|") > 0) {
|
||||
@ -266,6 +266,9 @@ var helper = (function() {
|
||||
}
|
||||
});
|
||||
};
|
||||
if (node) {
|
||||
element.appendChild(node);
|
||||
};
|
||||
return element;
|
||||
};
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
console.log("nightTab version", version.get().number, version.get().name);
|
||||
data.init();
|
||||
state.init();
|
||||
header.init();
|
||||
bookmarks.init();
|
||||
theme.init();
|
||||
menu.init();
|
||||
@ -15,7 +16,6 @@ clock.init();
|
||||
keyboard.init();
|
||||
layout.init();
|
||||
background.init();
|
||||
header.init();
|
||||
modal.init();
|
||||
shade.init();
|
||||
dropdown.init();
|
||||
|
||||
@ -121,7 +121,8 @@ var keyboard = (function() {
|
||||
// ctrl+alt+d
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 68) {
|
||||
theme.style.toggle();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
data.save();
|
||||
};
|
||||
}, false);
|
||||
@ -183,7 +184,8 @@ var keyboard = (function() {
|
||||
// ctrl+alt+r
|
||||
if (state.get.current().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
|
||||
theme.accent.random();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
link.groupAndItems();
|
||||
data.save();
|
||||
};
|
||||
|
||||
@ -1260,7 +1260,7 @@ var link = (function() {
|
||||
var linkEmpty = helper.node("div|class:link-empty link-item");
|
||||
var para1 = helper.makeNode({
|
||||
tag: "p",
|
||||
text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found"
|
||||
text: "No bookmarks matching \"" + helper.e(".search-input").value + "\" found"
|
||||
});
|
||||
var para2 = helper.node("p:\"Enter\" to Search " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name + ".|class:small muted");
|
||||
linkEmpty.appendChild(para1);
|
||||
@ -1742,12 +1742,14 @@ var link = (function() {
|
||||
mode: {
|
||||
open: function() {
|
||||
mod.edit.mode.open();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
control.render.class();
|
||||
},
|
||||
close: function() {
|
||||
mod.edit.mode.close();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
control.render.class();
|
||||
},
|
||||
check: function() {
|
||||
|
||||
@ -3,21 +3,25 @@ var search = (function() {
|
||||
var bind = {};
|
||||
|
||||
bind.input = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
searchInput.addEventListener("input", function() {
|
||||
check();
|
||||
}, false);
|
||||
if (state.get.current().header.search.show) {
|
||||
var searchInput = helper.e(".search-input");
|
||||
searchInput.addEventListener("input", function() {
|
||||
check();
|
||||
}, false);
|
||||
};
|
||||
};
|
||||
|
||||
bind.clear = function() {
|
||||
var searchClear = helper.e(".search-clear");
|
||||
searchClear.addEventListener("click", function() {
|
||||
mod.searching.close();
|
||||
render.clear.input();
|
||||
render.clear.button();
|
||||
render.searching();
|
||||
link.groupAndItems();
|
||||
}, false);
|
||||
if (state.get.current().header.search.show) {
|
||||
var searchClear = helper.e(".search-clear");
|
||||
searchClear.addEventListener("click", function() {
|
||||
mod.searching.close();
|
||||
render.clear.input();
|
||||
render.clear.button();
|
||||
render.searching();
|
||||
link.groupAndItems();
|
||||
}, false);
|
||||
};
|
||||
};
|
||||
|
||||
var mod = {};
|
||||
@ -89,17 +93,19 @@ var search = (function() {
|
||||
var render = {};
|
||||
|
||||
render.engine = function() {
|
||||
var search = helper.e(".search");
|
||||
var searchInput = helper.e(".search-input");
|
||||
var placeholder = "";
|
||||
if (state.get.current().link.show) {
|
||||
placeholder = "Find bookmarks or search";
|
||||
} else {
|
||||
placeholder = "Search";
|
||||
if (state.get.current().header.search.show) {
|
||||
var search = helper.e(".search");
|
||||
var searchInput = helper.e(".search-input");
|
||||
var placeholder = "";
|
||||
if (state.get.current().link.show) {
|
||||
placeholder = "Find bookmarks or search";
|
||||
} else {
|
||||
placeholder = "Search";
|
||||
};
|
||||
placeholder = placeholder + " " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name;
|
||||
searchInput.setAttribute("placeholder", placeholder);
|
||||
search.setAttribute("action", state.get.current().header.search.engine[state.get.current().header.search.engine.selected].url);
|
||||
};
|
||||
placeholder = placeholder + " " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name;
|
||||
searchInput.setAttribute("placeholder", placeholder);
|
||||
search.setAttribute("action", state.get.current().header.search.engine[state.get.current().header.search.engine.selected].url);
|
||||
};
|
||||
|
||||
render.clear = {};
|
||||
@ -166,6 +172,7 @@ var search = (function() {
|
||||
return {
|
||||
init: init,
|
||||
mod: mod,
|
||||
bind: bind,
|
||||
render: render,
|
||||
check: check
|
||||
};
|
||||
|
||||
@ -11,6 +11,13 @@ var state = (function() {
|
||||
item: {
|
||||
alignment: "left"
|
||||
},
|
||||
greeting: {
|
||||
show: false,
|
||||
type: "good",
|
||||
name: "",
|
||||
size: 1,
|
||||
newLine: false
|
||||
},
|
||||
clock: {
|
||||
hours: {
|
||||
show: true,
|
||||
@ -21,7 +28,7 @@ var state = (function() {
|
||||
display: "number"
|
||||
},
|
||||
seconds: {
|
||||
show: true,
|
||||
show: false,
|
||||
display: "number"
|
||||
},
|
||||
separator: {
|
||||
@ -33,7 +40,14 @@ var state = (function() {
|
||||
hour24: {
|
||||
show: true
|
||||
},
|
||||
size: 1
|
||||
size: 1,
|
||||
newLine: false
|
||||
},
|
||||
transitional: {
|
||||
show: false,
|
||||
type: "timeanddate",
|
||||
size: 1,
|
||||
newLine: false
|
||||
},
|
||||
date: {
|
||||
day: {
|
||||
@ -61,12 +75,16 @@ var state = (function() {
|
||||
show: true
|
||||
},
|
||||
format: "datemonth",
|
||||
size: 1
|
||||
size: 1,
|
||||
newLine: false
|
||||
},
|
||||
search: {
|
||||
show: true,
|
||||
style: "auto",
|
||||
width: 30,
|
||||
style: "box",
|
||||
width: {
|
||||
by: "auto",
|
||||
size: 30
|
||||
},
|
||||
focus: false,
|
||||
engine: {
|
||||
selected: "google",
|
||||
@ -98,20 +116,34 @@ var state = (function() {
|
||||
text: {
|
||||
alignment: "center"
|
||||
},
|
||||
size: 1
|
||||
size: 1,
|
||||
newLine: false
|
||||
},
|
||||
button: {
|
||||
editAdd: {
|
||||
editAdd: {
|
||||
show: true,
|
||||
size: 1,
|
||||
style: "box",
|
||||
newLine: false
|
||||
},
|
||||
colorAccent: {
|
||||
dot: {
|
||||
show: true
|
||||
},
|
||||
colorAccent: {
|
||||
show: true,
|
||||
dot: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
size: 1,
|
||||
style: "box",
|
||||
size: 1
|
||||
newLine: false
|
||||
},
|
||||
menu: {
|
||||
show: true,
|
||||
size: 1,
|
||||
style: "box",
|
||||
newLine: false
|
||||
},
|
||||
order: ["greeting", "transitional", "clock", "date", "search", "editAdd", "colorAccent", "menu"],
|
||||
border: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
@ -120,24 +152,10 @@ var state = (function() {
|
||||
g: 0,
|
||||
b: 0
|
||||
},
|
||||
show: true,
|
||||
style: "scroll",
|
||||
opacity: 0.95
|
||||
},
|
||||
border: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
greeting: {
|
||||
show: false,
|
||||
type: "good",
|
||||
name: "",
|
||||
size: 1
|
||||
},
|
||||
transitional: {
|
||||
show: false,
|
||||
type: "timeanddate",
|
||||
size: 1
|
||||
opacity: 0.95,
|
||||
show: true,
|
||||
newLine: false
|
||||
},
|
||||
position: "sticky",
|
||||
radius: false
|
||||
@ -324,10 +342,18 @@ var state = (function() {
|
||||
size: 1
|
||||
},
|
||||
search: {
|
||||
width: 30,
|
||||
width: {
|
||||
size: 30
|
||||
},
|
||||
size: 1
|
||||
},
|
||||
button: {
|
||||
editAdd: {
|
||||
size: 1,
|
||||
},
|
||||
colorAccent: {
|
||||
size: 1,
|
||||
},
|
||||
menu: {
|
||||
size: 1
|
||||
},
|
||||
color: {
|
||||
|
||||
@ -1585,7 +1585,8 @@ var theme = (function() {
|
||||
render.shade.opacity();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
control.render.class();
|
||||
}, false);
|
||||
});
|
||||
@ -1677,7 +1678,8 @@ var theme = (function() {
|
||||
render.shade.opacity();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
control.render.class();
|
||||
}, false);
|
||||
|
||||
@ -1850,7 +1852,8 @@ var theme = (function() {
|
||||
shade.close();
|
||||
pagelock.unlock();
|
||||
stagedThemeCustom.reset();
|
||||
control.render.update();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
control.render.class();
|
||||
control.render.dependents();
|
||||
};
|
||||
@ -1963,7 +1966,6 @@ var theme = (function() {
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
style.check();
|
||||
accent.random();
|
||||
mod.accent.random();
|
||||
mod.custom.close();
|
||||
|
||||
@ -12,9 +12,11 @@ var transitional = (function() {
|
||||
var render = {};
|
||||
|
||||
render.clear = function() {
|
||||
var transitional = helper.e(".transitional");
|
||||
while (transitional.lastChild) {
|
||||
transitional.removeChild(transitional.lastChild);
|
||||
if (state.get.current().header.transitional.show) {
|
||||
var transitional = helper.e(".transitional");
|
||||
while (transitional.lastChild) {
|
||||
transitional.removeChild(transitional.lastChild);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -805,6 +805,44 @@ var update = (function() {
|
||||
"4.33.0": function(data) {
|
||||
data.state.layout.scrollbars = "auto";
|
||||
return data;
|
||||
},
|
||||
"4.37.0": function(data) {
|
||||
data.state.header.order = ["greeting", "transitional", "clock", "date", "search", "editAdd", "colorAccent", "menu"];
|
||||
data.state.header.menu = {
|
||||
show: true,
|
||||
size: data.state.header.button.size,
|
||||
style: data.state.header.button.style
|
||||
};
|
||||
data.state.header.editAdd = {
|
||||
show: data.state.header.button.editAdd.show,
|
||||
size: data.state.header.button.size,
|
||||
style: data.state.header.button.style,
|
||||
newLine: false
|
||||
};
|
||||
data.state.header.colorAccent = {
|
||||
dot: {
|
||||
show: data.state.header.button.colorAccent.dot.show
|
||||
},
|
||||
show: data.state.header.button.colorAccent.show,
|
||||
size: data.state.header.button.size,
|
||||
style: data.state.header.button.style,
|
||||
newLine: false
|
||||
};
|
||||
data.state.header.greeting.newLine = false;
|
||||
data.state.header.clock.newLine = false;
|
||||
data.state.header.transitional.newLine = false;
|
||||
data.state.header.date.newLine = false;
|
||||
data.state.header.search.newLine = false;
|
||||
data.state.header.editAdd.newLine = false;
|
||||
data.state.header.colorAccent.newLine = false;
|
||||
data.state.header.menu.newLine = false;
|
||||
data.state.header.search.width = {
|
||||
by: data.state.header.search.style,
|
||||
size: data.state.header.search.width
|
||||
};
|
||||
data.state.header.search.style = "box";
|
||||
delete data.state.header.button;
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.36.0";
|
||||
var current = "4.37.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"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.",
|
||||
"version": "4.36.0",
|
||||
"version": "4.37.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user