[feature] add bookmark groups

This commit is contained in:
Kombie 2019-10-19 10:52:33 +01:00 committed by GitHub
parent 81f6d16b49
commit 519ad5e4f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 2006 additions and 973 deletions

View File

@ -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'

View File

@ -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": {

View File

@ -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
View 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));
}

View File

@ -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);
}

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -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
};

View File

@ -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();

View File

@ -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
};

View File

@ -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);

File diff suppressed because it is too large Load Diff

View File

@ -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;
};

View File

@ -175,6 +175,12 @@ var state = (function() {
style: "block",
orientation: "bottom"
},
group: {
name: {
show: true,
size: 1
}
},
layout: {
alignment: "centercenter",
order: "headerlink",

View File

@ -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;
}
};

View File

@ -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(".");

View File

@ -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"