mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-16 18:20:49 +01:00
[feature] add bookmark groups
This commit is contained in:
Kombie
GitHub
parent
81f6d16b49
commit
519ad5e4f0
@ -61,6 +61,7 @@ const cssFiles = [
|
||||
path.src + '/css/transitional.css',
|
||||
path.src + '/css/search.css',
|
||||
path.src + '/css/background.css',
|
||||
path.src + '/css/group.css',
|
||||
path.src + '/css/link.css',
|
||||
path.src + '/css/auto-suggest.css',
|
||||
path.src + '/css/fontawesome.css'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "3.83.0",
|
||||
"version": "4.0.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": {
|
||||
|
||||
@ -1,3 +1,71 @@
|
||||
/* select */
|
||||
select {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text)) 50%),
|
||||
linear-gradient(135deg, rgb(var(--form-input-text)) 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - calc(var(--form-arrow-size) * 5)) 50%,
|
||||
calc(100% - calc(var(--form-arrow-size) * 4)) 50%;
|
||||
background-size:
|
||||
var(--form-arrow-size) var(--form-arrow-size),
|
||||
var(--form-arrow-size) var(--form-arrow-size);
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 calc(var(--form-arrow-size) * 10) 0 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--form-input-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
border-width: var(--form-input-border);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-hover)) 50%),
|
||||
linear-gradient(135deg, rgb(var(--form-input-text-hover)) 50%, transparent 50%);
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
color: rgb(var(--form-input-text-hover));
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
}
|
||||
|
||||
select:focus,
|
||||
select:active {
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-focus)) 50%),
|
||||
linear-gradient(135deg, rgb(var(--form-input-text-focus)) 50%, transparent 50%);
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-input-text-focus));
|
||||
outline: none;
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
}
|
||||
|
||||
select:disabled,
|
||||
select:disabled:hover,
|
||||
select:disabled:focus,
|
||||
select:disabled:active {
|
||||
background-color: transparent;
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
|
||||
linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
|
||||
color: rgb(var(--form-input-text-disabled));
|
||||
border-color: rgb(var(--form-input-text-disabled));
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
textarea {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
@ -420,6 +488,7 @@ input[type="range"] {
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
display: block;
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
@ -846,7 +915,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
|
||||
.form-grid:focus,
|
||||
.form-grid:focus-within {
|
||||
outline: 0;
|
||||
outline: none;
|
||||
border-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
@ -1085,20 +1154,20 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
|
||||
.form-group-text:hover,
|
||||
.form-group-text:focus {
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border-bottom-color: rgb(var(--theme-gray-08));
|
||||
/* background-color: rgb(var(--theme-gray-03)); */
|
||||
/* border-bottom-color: rgb(var(--theme-gray-08)); */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group-text:disabled {
|
||||
.form-group-text.disabled {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
color: rgb(var(--form-input-placeholder-disabled));
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.form-group-text:disabled:hover,
|
||||
.form-group-text:disabled:focus {
|
||||
.form-group-text.disabled:hover,
|
||||
.form-group-text.disabled:focus {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -1138,7 +1207,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
|
||||
.form-group .form-group-text {
|
||||
margin-bottom: 0;
|
||||
margin-left: calc(-1px * var(--form-input-border));
|
||||
/* margin-left: calc(-1px * var(--form-input-border)); */
|
||||
border-radius: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
89
src/css/group.css
Normal file
89
src/css/group.css
Normal file
@ -0,0 +1,89 @@
|
||||
.group {
|
||||
padding-top: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
|
||||
padding-bottom: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
|
||||
padding-left: calc(var(--layout-space) * var(--layout-padding));
|
||||
padding-right: calc(var(--layout-space) * var(--layout-padding));
|
||||
width: var(--link-area-width);
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
|
||||
.group:last-child {
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
|
||||
.group-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.is-group-name-show .group-header,
|
||||
.is-link-edit .group-header {
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
|
||||
transition: padding var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.group-name {
|
||||
margin-right: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
min-height: 2.5em;
|
||||
font-size: var(--group-name-size);
|
||||
}
|
||||
|
||||
.is-group-name-show .group-name {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group-name-text {
|
||||
font-family: var(--font-fjalla);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-control {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
transition:
|
||||
width var(--layout-timing-extra-fast),
|
||||
height var(--layout-timing-extra-fast) var(--layout-duration-04),
|
||||
margin var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-edit .group-control {
|
||||
height: 2.5em;
|
||||
width: 16em;
|
||||
transition:
|
||||
width var(--layout-timing-extra-fast) var(--layout-duration-04),
|
||||
height var(--layout-timing-extra-fast),
|
||||
margin var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.is-link-edit.is-group-name-show .group-control {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.group-control-item {
|
||||
width: 4em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-body {
|
||||
font-size: calc(var(--link-item-size) * 1);
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
min-height: var(--link-item-height);
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: calc(var(--layout-space) * var(--layout-gutter));
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
.link {
|
||||
display: none;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
z-index: var(--z-index-link);
|
||||
}
|
||||
|
||||
@ -10,45 +10,33 @@
|
||||
}
|
||||
|
||||
.is-link-area-alignment-left .link {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-area-alignment-center .link {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-area-alignment-right .link {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.link-area {
|
||||
padding-left: calc(var(--layout-space) * var(--layout-padding));
|
||||
padding-right: calc(var(--layout-space) * var(--layout-padding));
|
||||
font-size: calc(var(--link-item-size) * 1);
|
||||
position: relative;
|
||||
width: var(--link-area-width);
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: calc(var(--layout-space) * var(--layout-gutter));
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
||||
.is-layout-order-headerlink .link {
|
||||
margin-top: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-order-headerlink .link-area {
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-padding));
|
||||
.is-layout-order-linkheader .link {
|
||||
margin-bottom: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-order-headerlink.is-header-border-bottom .link-area,
|
||||
.is-layout-order-headerlink.is-header-shade-style-always .link-area {
|
||||
padding-top: calc(var(--layout-space) * var(--layout-padding));
|
||||
.is-layout-order-headerlink.is-header-border-bottom .link,
|
||||
.is-layout-order-headerlink.is-header-shade-style-always .link {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.is-layout-order-linkheader .link-area {
|
||||
padding-top: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
|
||||
.is-layout-order-linkheader.is-header-border-top .link-area,
|
||||
.is-layout-order-linkheader.is-header-shade-style-always .link-area {
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-padding));
|
||||
.is-layout-order-linkheader.is-header-border-top .link,
|
||||
.is-layout-order-linkheader.is-header-shade-style-always .link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
@ -79,15 +67,12 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.link-item-placeholder {
|
||||
.link-placeholder {
|
||||
background-color: rgba(var(--theme-accent), 0.2);
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -321,6 +306,14 @@
|
||||
transition: all var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-style-list .link-control {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.is-link-style-block .link-control {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link-control-item {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
@ -329,7 +322,14 @@
|
||||
padding: 0;
|
||||
color: rgb(var(--theme-gray-02));
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.is-link-style-list .link-control-item {
|
||||
flex-basis: inherit;
|
||||
}
|
||||
|
||||
.is-link-style-block .link-control-item {
|
||||
flex-basis: 30%;
|
||||
}
|
||||
|
||||
.link-url-text-dark .link-control-item {
|
||||
@ -436,6 +436,15 @@
|
||||
.link-display {
|
||||
font-size: 1em;
|
||||
display: none;
|
||||
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-edit.is-link-style-list .link-display {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.is-link-edit.is-link-style-block .link-display {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.is-link-display-item-show .link-display {
|
||||
@ -497,7 +506,11 @@
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--theme-gray-12));
|
||||
display: none;
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-edit .link-name {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.link-name,
|
||||
@ -537,13 +550,27 @@
|
||||
}
|
||||
|
||||
.link-empty {
|
||||
background-color: rgba(var(--theme-gray-04), 0.2);
|
||||
padding: 1em 0;
|
||||
border-radius: var(--theme-radius);
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-sorting .link-empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-empty-heading {
|
||||
color: rgb(var(--theme-gray-16));
|
||||
color: rgb(var(--theme-style-text));
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-empty-heading:not(:only-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@ -604,12 +631,12 @@
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-text-icon:not(:disabled):hover .link-form-icon {
|
||||
.link-form-text-icon:not(.disabled):hover .link-form-icon {
|
||||
transform: scale(2) rotate(360deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.link-form-text-icon:not(:disabled):active .link-form-icon {
|
||||
.link-form-text-icon:not(.disabled):active .link-form-icon {
|
||||
transform: scale(4) rotate(360deg);
|
||||
}
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ p:not(:last-child) {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgb(var(--theme-gray-02));
|
||||
border-top: 2px solid rgb(var(--theme-gray-02));
|
||||
border-radius: var(--theme-radius);
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
|
||||
@ -38,6 +38,8 @@
|
||||
--header-button-size: 1em;
|
||||
--header-greeting-size: 1em;
|
||||
--header-transitional-size: 1em;
|
||||
/* group */
|
||||
--group-name-size: 1em;
|
||||
/* link */
|
||||
--link-area-width: 100%;
|
||||
--link-item-size: 1em;
|
||||
@ -51,11 +53,16 @@
|
||||
--layout-space: 0.5rem;
|
||||
--layout-padding: 4;
|
||||
--layout-gutter: 4;
|
||||
--layout-timing-extra-fast: 0.2s ease-in-out;
|
||||
--layout-timing-fast: 0.4s ease-in-out;
|
||||
--layout-timing-medium: 0.6s ease-in-out;
|
||||
--layout-timing-slow: 0.8s ease-in-out;
|
||||
--layout-timing-extra-slow: 1s ease-in-out;
|
||||
--layout-duration-02: 0.2s;
|
||||
--layout-duration-04: 0.4s;
|
||||
--layout-duration-06: 0.6s;
|
||||
--layout-duration-08: 0.8s;
|
||||
--layout-duration-10: 1s;
|
||||
--layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
|
||||
--layout-timing-fast: var(--layout-duration-04) ease-in-out;
|
||||
--layout-timing-medium: var(--layout-duration-06) ease-in-out;
|
||||
--layout-timing-slow: var(--layout-duration-08) ease-in-out;
|
||||
--layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
|
||||
--layout-shadow-small: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
--layout-shadow-medium: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 16px rgba(0, 0, 0, 0.1);
|
||||
--layout-shadow-large: 0 0 16px rgba(0, 0, 0, 0.2), 0 0 32px rgba(0, 0, 0, 0.1);
|
||||
@ -87,6 +94,7 @@
|
||||
--form-feedback-text-disabled: var(--theme-gray-04);
|
||||
--form-helper: var(--theme-gray-12);
|
||||
--form-helper-disabled: var(--theme-gray-06);
|
||||
--form-arrow-size: 5px;
|
||||
/* button */
|
||||
--button-text: var(--theme-gray-12);
|
||||
--button-text-hover-focus: var(--theme-style-text);
|
||||
@ -175,7 +183,7 @@
|
||||
--link-item-width: 11em;
|
||||
--link-item-height: 10em;
|
||||
--link-item-url-height: 20%;
|
||||
--link-item-edit-height: 30%;
|
||||
--link-item-edit-height: 50%;
|
||||
}
|
||||
|
||||
.is-link-style-list {
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
<link rel="stylesheet" href="css/transitional.css">
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/group.css">
|
||||
<link rel="stylesheet" href="css/link.css">
|
||||
<link rel="stylesheet" href="css/auto-suggest.css">
|
||||
<link rel="stylesheet" href="css/fontawesome.css">
|
||||
@ -99,9 +100,7 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="link">
|
||||
<div class="link-area"></div>
|
||||
</section>
|
||||
<section class="link"></section>
|
||||
|
||||
</main>
|
||||
|
||||
@ -112,6 +111,7 @@
|
||||
<div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
|
||||
<button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
|
||||
<button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
|
||||
<button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
|
||||
<button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
|
||||
<button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
|
||||
<button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
|
||||
@ -752,6 +752,29 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-groups is-hidden">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Names</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-group-name-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-group-name-size">Name Size</label>
|
||||
<input id="control-group-name-size" class="control-group-name-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-group-name-size-default button mb-0" tabindex="-1">Default name size</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
@ -1001,8 +1024,9 @@
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<label for="control-theme-accent-current-picker">Colour</label>
|
||||
<div class="input-wrap"><div class="form-group mb-0">
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-accent-current-picker">Colour</label>
|
||||
<div class="form-group mb-0">
|
||||
<input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
|
||||
@ -3,185 +3,176 @@ var bookmarks = (function() {
|
||||
var mod = {};
|
||||
|
||||
mod.all = [{
|
||||
display: "icon",
|
||||
letter: "DEV",
|
||||
icon: {
|
||||
name: "code",
|
||||
prefix: "fas",
|
||||
label: "Code"
|
||||
},
|
||||
name: "Devdocs",
|
||||
url: "http://devdocs.io/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453101749
|
||||
name: "Cool stuff",
|
||||
items: [{
|
||||
display: "icon",
|
||||
letter: "AS",
|
||||
icon: {
|
||||
name: "dice-d20",
|
||||
prefix: "fas",
|
||||
label: "Dice D20"
|
||||
},
|
||||
name: "awesomeSheet",
|
||||
url: "https://zombiefox.github.io/awesomeSheet/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453104010
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "AZ",
|
||||
icon: {
|
||||
name: "amazon",
|
||||
prefix: "fab",
|
||||
label: "Amazon"
|
||||
},
|
||||
name: "Amazon",
|
||||
url: "https://www.amazon.co.uk/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453107633
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "GM",
|
||||
icon: {
|
||||
name: "envelope",
|
||||
prefix: "fas",
|
||||
label: "Envelope"
|
||||
},
|
||||
name: "Gmail",
|
||||
url: "https://mail.google.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453110265
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "R",
|
||||
icon: {
|
||||
name: "reddit-alien",
|
||||
prefix: "fab",
|
||||
label: "reddit Alien"
|
||||
},
|
||||
name: "Reddit",
|
||||
url: "https://www.reddit.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453111491
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "N",
|
||||
icon: {
|
||||
name: "film",
|
||||
prefix: "fas",
|
||||
label: "Film"
|
||||
},
|
||||
name: "Netflix",
|
||||
url: "https://www.netflix.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453104460
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "DR",
|
||||
icon: {
|
||||
name: null,
|
||||
prefix: null,
|
||||
label: null
|
||||
},
|
||||
name: "Drive",
|
||||
url: "https://drive.google.com/drive/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453111953
|
||||
}]
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "AS",
|
||||
icon: {
|
||||
name: "dice-d20",
|
||||
prefix: "fas",
|
||||
label: "Dice D20"
|
||||
},
|
||||
name: "awesomeSheet",
|
||||
url: "https://zombiefox.github.io/awesomeSheet/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453104010
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "N",
|
||||
icon: {
|
||||
name: "film",
|
||||
prefix: "fas",
|
||||
label: "Film"
|
||||
},
|
||||
name: "Netflix",
|
||||
url: "https://www.netflix.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453104460
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "AZ",
|
||||
icon: {
|
||||
name: "amazon",
|
||||
prefix: "fab",
|
||||
label: "Amazon"
|
||||
},
|
||||
name: "Amazon",
|
||||
url: "https://www.amazon.co.uk/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453107633
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "YT",
|
||||
icon: {
|
||||
name: "youtube",
|
||||
prefix: "fab",
|
||||
label: "YouTube"
|
||||
},
|
||||
name: "Youtube",
|
||||
url: "https://www.youtube.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453108071
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "GIT",
|
||||
icon: {
|
||||
name: "github",
|
||||
prefix: "fab",
|
||||
label: "GitHub"
|
||||
},
|
||||
name: "Github",
|
||||
url: "https://github.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453108926
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "GM",
|
||||
icon: {
|
||||
name: "envelope",
|
||||
prefix: "fas",
|
||||
label: "Envelope"
|
||||
},
|
||||
name: "Gmail",
|
||||
url: "https://mail.google.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453110265
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "R",
|
||||
icon: {
|
||||
name: "reddit-alien",
|
||||
prefix: "fab",
|
||||
label: "reddit Alien"
|
||||
},
|
||||
name: "Reddit",
|
||||
url: "https://www.reddit.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453111491
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "DR",
|
||||
icon: {
|
||||
name: null,
|
||||
prefix: null,
|
||||
label: null
|
||||
},
|
||||
name: "Drive",
|
||||
url: "https://drive.google.com/drive/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453111953
|
||||
name: "Dev sites",
|
||||
items: [{
|
||||
display: "icon",
|
||||
letter: "DEV",
|
||||
icon: {
|
||||
name: "code",
|
||||
prefix: "fas",
|
||||
label: "Code"
|
||||
},
|
||||
name: "Devdocs",
|
||||
url: "http://devdocs.io/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453101749
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "GIT",
|
||||
icon: {
|
||||
name: "github",
|
||||
prefix: "fab",
|
||||
label: "GitHub"
|
||||
},
|
||||
name: "Github",
|
||||
url: "https://github.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
},
|
||||
timeStamp: 1546453108926
|
||||
}]
|
||||
}];
|
||||
|
||||
mod.get = function(data) {
|
||||
var _singleBookmark = function() {
|
||||
var found = false;
|
||||
for (var i = 0; i < mod.all.length; i++) {
|
||||
if (mod.all[i].timeStamp === data.timeStamp) {
|
||||
found = mod.all[i];
|
||||
};
|
||||
if (mod.all.length > 0) {
|
||||
mod.all.forEach(function(arrayItem, index) {
|
||||
arrayItem.forEach(function(arrayItem, index) {
|
||||
if (arrayItem[index].timeStamp === data.timeStamp) {
|
||||
found = arrayItem[index];
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
return found;
|
||||
};
|
||||
@ -198,24 +189,52 @@ var bookmarks = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
mod.add = function(data) {
|
||||
mod.all.push(data);
|
||||
mod.add = {
|
||||
link: function(data) {
|
||||
if (data.position.group.new) {
|
||||
mod.add.group(data);
|
||||
};
|
||||
mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, data.link);
|
||||
},
|
||||
group: function(data) {
|
||||
var name = data.position.group.name;
|
||||
if (name != null && typeof name == "string") {
|
||||
name = name.trim();
|
||||
};
|
||||
if (name == "" || name == null || name == undefined) {
|
||||
var count = get().length + 1;
|
||||
name = "Group " + count;
|
||||
};
|
||||
mod.all.push({
|
||||
name: name,
|
||||
items: []
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
mod.edit = function(data) {
|
||||
for (var i = 0; i < mod.all.length; i++) {
|
||||
if (mod.all[i].timeStamp === data.timeStamp) {
|
||||
mod.all[i] = data;
|
||||
mod.edit = {
|
||||
link: function(data) {
|
||||
if (data.position.group.new) {
|
||||
mod.add.group(data);
|
||||
};
|
||||
};
|
||||
var item = JSON.parse(JSON.stringify(data.link));
|
||||
mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
|
||||
mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
|
||||
},
|
||||
group: function(data) {
|
||||
var group = JSON.parse(JSON.stringify(data.group));
|
||||
mod.all.splice(data.position.origin, 1);
|
||||
mod.all.splice(data.position.destination, 0, group);
|
||||
}
|
||||
};
|
||||
|
||||
mod.remove = function(data) {
|
||||
for (var i = 0; i < mod.all.length; i++) {
|
||||
if (mod.all[i].timeStamp === data.timeStamp) {
|
||||
mod.all.splice(mod.all.indexOf(mod.all[i]), 1);
|
||||
};
|
||||
};
|
||||
mod.remove = {
|
||||
link: function(data) {
|
||||
mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
|
||||
},
|
||||
group: function(data) {
|
||||
mod.all.splice(data.position.origin, 1);
|
||||
}
|
||||
};
|
||||
|
||||
mod.sort = function(by) {
|
||||
@ -230,35 +249,51 @@ var bookmarks = (function() {
|
||||
return helper.sortObject(array, "icon.name");
|
||||
}
|
||||
};
|
||||
mod.all = action[by](mod.all);
|
||||
mod.all.forEach(function(arrayItem, index) {
|
||||
arrayItem.items = action[by](arrayItem.items);
|
||||
});
|
||||
};
|
||||
|
||||
mod.move = function(origin, destination) {
|
||||
mod.all = helper.moveArrayItem(mod.all, origin, destination);
|
||||
mod.move = {
|
||||
link: function(data) {
|
||||
var item = JSON.parse(JSON.stringify(mod.all[data.position.origin.group].items[data.position.origin.item]));
|
||||
mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
|
||||
mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
|
||||
},
|
||||
group: function(data) {
|
||||
var group = JSON.parse(JSON.stringify(mod.all[data.position.origin]));
|
||||
mod.all.splice(data.position.origin, 1);
|
||||
mod.all.splice(data.position.destination, 0, group);
|
||||
}
|
||||
};
|
||||
|
||||
mod.count = function() {
|
||||
var count = 0;
|
||||
mod.all.forEach(function(arrayItem, index) {
|
||||
count = count + arrayItem.items.length
|
||||
});
|
||||
return count;
|
||||
};
|
||||
|
||||
var count = function() {
|
||||
return mod.count();
|
||||
};
|
||||
|
||||
var get = function(data) {
|
||||
return mod.get(data);
|
||||
};
|
||||
|
||||
var add = function(data) {
|
||||
mod.add(data);
|
||||
};
|
||||
|
||||
var edit = function(data) {
|
||||
mod.edit(data);
|
||||
};
|
||||
|
||||
var sort = function(by) {
|
||||
mod.sort(by);
|
||||
};
|
||||
|
||||
var move = function(origin, destination) {
|
||||
mod.move(origin, destination);
|
||||
};
|
||||
|
||||
var remove = function(data) {
|
||||
mod.remove(data);
|
||||
var remove = {
|
||||
link: function(data) {
|
||||
mod.remove.link(data);
|
||||
},
|
||||
group: function(data) {
|
||||
mod.remove.group(data);
|
||||
}
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
@ -272,10 +307,8 @@ var bookmarks = (function() {
|
||||
init: init,
|
||||
mod: mod,
|
||||
get: get,
|
||||
add: add,
|
||||
edit: edit,
|
||||
sort: sort,
|
||||
move: move,
|
||||
count: count,
|
||||
remove: remove
|
||||
};
|
||||
|
||||
|
||||
@ -18,6 +18,12 @@ var control = (function() {
|
||||
func: function() {
|
||||
menu.nav(this.element, helper.e(".menu-content-area-header"));
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-menu-groups"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, helper.e(".menu-content-area-groups"));
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-menu-bookmarks"),
|
||||
type: "button",
|
||||
@ -76,7 +82,7 @@ var control = (function() {
|
||||
theme.accent();
|
||||
theme.render.input.picker();
|
||||
theme.render.input.hex();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-width"),
|
||||
@ -1591,6 +1597,78 @@ var control = (function() {
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-group-name-show"),
|
||||
path: "group.name.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
render.dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-group-name-size"),
|
||||
path: "group.name.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
additionalEvents: [{
|
||||
event: "input",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".group-name-text"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
event: "mousedown",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".group-name-text"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
event: "mouseup",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}, {
|
||||
event: "touchend",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}, {
|
||||
event: "keydown",
|
||||
func: function() {
|
||||
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
|
||||
edge.box.open({
|
||||
element: helper.e(".group-name-text"),
|
||||
});
|
||||
};
|
||||
}
|
||||
}, {
|
||||
event: "keyup",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
link.render.group.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-group-name-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".group-name-text"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
mod.setValue("group.name.size", 1);
|
||||
link.render.group.size();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-border-top"),
|
||||
path: "header.border.top",
|
||||
@ -1615,14 +1693,14 @@ var control = (function() {
|
||||
event: "input",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
event: "mousedown",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -1640,7 +1718,7 @@ var control = (function() {
|
||||
func: function() {
|
||||
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -1660,7 +1738,7 @@ var control = (function() {
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
@ -1686,7 +1764,7 @@ var control = (function() {
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
@ -1702,7 +1780,7 @@ var control = (function() {
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
@ -1718,7 +1796,7 @@ var control = (function() {
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".link-area"),
|
||||
element: helper.e(".group"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
@ -1923,14 +2001,14 @@ var control = (function() {
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-order-namedisplay"),
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-url-show"),
|
||||
@ -1974,7 +2052,7 @@ var control = (function() {
|
||||
path: "link.newTab",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-border"),
|
||||
@ -2017,35 +2095,35 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("letter");
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-sort-icon"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("icon");
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-sort-name"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("name");
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-accent-clear"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
link.mod.accent.clear();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-accent-set"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
link.mod.accent.rainbow();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-picker"),
|
||||
@ -2055,7 +2133,7 @@ var control = (function() {
|
||||
theme.accent();
|
||||
theme.render.input.quick();
|
||||
theme.render.input.hex();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-hex"),
|
||||
@ -2066,7 +2144,7 @@ var control = (function() {
|
||||
theme.accent();
|
||||
theme.render.input.picker();
|
||||
theme.render.input.quick();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-style-dark"),
|
||||
@ -2147,7 +2225,7 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.render.accent.random();
|
||||
theme.render.accent.color();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-color-by-theme"),
|
||||
@ -2520,6 +2598,13 @@ var control = (function() {
|
||||
_greeting();
|
||||
_transitional();
|
||||
};
|
||||
var _group = function() {
|
||||
if (state.get().group.name.show) {
|
||||
helper.addClass(html, "is-group-name-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-group-name-show");
|
||||
};
|
||||
};
|
||||
var _link = function() {
|
||||
helper.removeClass(html, "is-link-show");
|
||||
helper.removeClass(html, "is-link-area-alignment-left");
|
||||
@ -2612,6 +2697,7 @@ var control = (function() {
|
||||
};
|
||||
_menu();
|
||||
_header();
|
||||
_group();
|
||||
_link();
|
||||
_layout();
|
||||
_background();
|
||||
@ -2947,6 +3033,17 @@ var control = (function() {
|
||||
_disable.input(".control-link-edit", false);
|
||||
};
|
||||
};
|
||||
var _group = function() {
|
||||
if (state.get().group.name.show) {
|
||||
_disable.input(".control-group-name-size", false);
|
||||
_disable.element("[for=control-group-name-size]", false);
|
||||
_disable.input(".control-group-name-size-default", false);
|
||||
} else {
|
||||
_disable.input(".control-group-name-size", true);
|
||||
_disable.element("[for=control-group-name-size]", true);
|
||||
_disable.input(".control-group-name-size-default", true);
|
||||
};
|
||||
};
|
||||
var _link = function() {
|
||||
_disable.input(".control-layout-order-headerlink", true);
|
||||
_disable.input(".control-layout-order-linkheader", true);
|
||||
@ -3150,6 +3247,7 @@ var control = (function() {
|
||||
};
|
||||
_header();
|
||||
_edit();
|
||||
_group();
|
||||
_link();
|
||||
_theme();
|
||||
_background();
|
||||
|
||||
@ -1,8 +1,25 @@
|
||||
var edge = (function() {
|
||||
|
||||
var _timer = null;
|
||||
var _tick = null;
|
||||
var _currentElement = null;
|
||||
var _currentEdge = null;
|
||||
|
||||
var bind = {};
|
||||
|
||||
bind.tick = {
|
||||
set: function() {
|
||||
_tick = window.setTimeout(function() {
|
||||
render.update();
|
||||
bind.tick.set();
|
||||
}, 100);
|
||||
},
|
||||
remove: function() {
|
||||
window.clearTimeout(_tick);
|
||||
_tick = null;
|
||||
}
|
||||
};
|
||||
|
||||
var mod = {};
|
||||
|
||||
mod.open = function() {
|
||||
@ -40,6 +57,7 @@ var edge = (function() {
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
_currentElement = options.element;
|
||||
var _resize = function() {
|
||||
var scrollTop = document.documentElement.scrollTop;
|
||||
var scrollLeft = document.documentElement.scrollLeft;
|
||||
@ -60,7 +78,9 @@ var edge = (function() {
|
||||
} else {
|
||||
edgeElement.remove();
|
||||
};
|
||||
bind.tick.remove();
|
||||
_currentEdge = null;
|
||||
_currentElement = null;
|
||||
};
|
||||
edgeElement.addEventListener("transitionend", function(event, elapsed) {
|
||||
if (event.propertyName === "opacity" && getComputedStyle(this).opacity == 0) {
|
||||
@ -82,13 +102,26 @@ var edge = (function() {
|
||||
if (options.element != null) {
|
||||
if (_currentEdge == null) {
|
||||
_makeEdge();
|
||||
_resize();
|
||||
render.update();
|
||||
bind.tick.set();
|
||||
} else {
|
||||
_resize();
|
||||
render.update();
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
render.update = function() {
|
||||
if (_currentEdge != null) {
|
||||
var scrollTop = document.documentElement.scrollTop;
|
||||
var scrollLeft = document.documentElement.scrollLeft;
|
||||
var rect = _currentElement.getBoundingClientRect();
|
||||
_currentEdge.style.width = rect.width + "px";
|
||||
_currentEdge.style.height = rect.height + "px";
|
||||
_currentEdge.style.top = rect.top + scrollTop + "px";
|
||||
_currentEdge.style.left = rect.left + scrollLeft + "px";
|
||||
};
|
||||
};
|
||||
|
||||
var box = {
|
||||
open: function(override) {
|
||||
mod.open();
|
||||
@ -103,6 +136,7 @@ var edge = (function() {
|
||||
// exposed methods
|
||||
return {
|
||||
mod: mod,
|
||||
bind: bind,
|
||||
render: render,
|
||||
box: box
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@ var keyboard = (function() {
|
||||
// esc
|
||||
if (event.keyCode == 27) {
|
||||
if (state.get().edge) {
|
||||
edge.render.clear();
|
||||
edge.box.close();
|
||||
} else if (state.get().menu) {
|
||||
menu.close();
|
||||
shade.close();
|
||||
@ -16,17 +16,14 @@ var keyboard = (function() {
|
||||
} else if (state.get().link.add) {
|
||||
link.add.close();
|
||||
shade.close();
|
||||
} else if (state.get().link.edit) {
|
||||
link.add.close();
|
||||
shade.close();
|
||||
control.render.update();
|
||||
control.render.class();
|
||||
} else if (state.get().modal) {
|
||||
modal.close();
|
||||
shade.close();
|
||||
} else if (state.get().link.edit) {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "link.edit",
|
||||
newValue: false
|
||||
});
|
||||
control.render.update();
|
||||
control.render.class();
|
||||
};
|
||||
data.save();
|
||||
};
|
||||
@ -96,7 +93,7 @@ var keyboard = (function() {
|
||||
if (state.get().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
|
||||
theme.render.accent.random();
|
||||
theme.render.accent.color();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
data.save();
|
||||
};
|
||||
}, false);
|
||||
|
||||
1964
src/js/link.js
1964
src/js/link.js
File diff suppressed because it is too large
Load Diff
@ -7,7 +7,7 @@ var search = (function() {
|
||||
searchInput.addEventListener("input", function() {
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}, false);
|
||||
};
|
||||
|
||||
@ -17,7 +17,7 @@ var search = (function() {
|
||||
render.clear.input();
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.items();
|
||||
link.groupAndItems();
|
||||
}, false);
|
||||
};
|
||||
|
||||
@ -35,6 +35,7 @@ var search = (function() {
|
||||
|
||||
var get = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
var string = searchInput.value.toLowerCase().replace(/\s/g, "");
|
||||
if (state.get().search) {
|
||||
var searchedBookmarks = {
|
||||
total: 0,
|
||||
@ -42,12 +43,25 @@ var search = (function() {
|
||||
};
|
||||
searchedBookmarks.total = bookmarks.get().length;
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
|
||||
var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
|
||||
if (matchUrl || matchName) {
|
||||
var bookmarkDataCopy = JSON.parse(JSON.stringify(arrayItem));
|
||||
searchedBookmarks.matching.push(bookmarkDataCopy);
|
||||
var currentGroup = JSON.parse(JSON.stringify(arrayItem));
|
||||
var matchingItems = [];
|
||||
currentGroup.items.forEach(function(arrayItem, index) {
|
||||
var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(string));
|
||||
var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(string));
|
||||
if (matchUrl || matchName) {
|
||||
currentGroup.items.splice(index, 1);
|
||||
matchingItems.push(JSON.parse(JSON.stringify(arrayItem)));
|
||||
};
|
||||
});
|
||||
if (matchingItems.length > 0) {
|
||||
currentGroup.items = matchingItems;
|
||||
searchedBookmarks.matching.push(currentGroup);
|
||||
};
|
||||
var count = 0;
|
||||
searchedBookmarks.matching.forEach(function(arrayItem, index) {
|
||||
count = count + arrayItem.items.length
|
||||
});
|
||||
searchedBookmarks.total = count;
|
||||
});
|
||||
return searchedBookmarks;
|
||||
};
|
||||
|
||||
@ -175,6 +175,12 @@ var state = (function() {
|
||||
style: "block",
|
||||
orientation: "bottom"
|
||||
},
|
||||
group: {
|
||||
name: {
|
||||
show: true,
|
||||
size: 1
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
alignment: "centercenter",
|
||||
order: "headerlink",
|
||||
|
||||
@ -618,6 +618,19 @@ var update = (function() {
|
||||
show: true
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"4.0.0": function(data) {
|
||||
data.bookmarks = [{
|
||||
name: "Group 1",
|
||||
items: data.bookmarks
|
||||
}];
|
||||
data.state.group = {
|
||||
name: {
|
||||
show: true,
|
||||
size: 1
|
||||
}
|
||||
};
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "3.83.0";
|
||||
var current = "4.0.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
@ -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": "3.83.0",
|
||||
"version": "4.0.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user