extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-10-05 09:41:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] [design] improved controls and options for layout

Browse Source
This commit is contained in:
Kombie 2019-05-23 19:15:14 +01:00 committed by GitHub
parent 4591525fab
commit bfa72ffd8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 1600 additions and 1006 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/base.css
View File

@ -1,4 +1,5 @@
:root {
--accent: 250, 130, 0;
--black: 0, 0, 0;
--white: 255, 255, 255;
--shade-01: 38, 40, 49;
@ -44,7 +45,6 @@
--form-checkbox-radio-chcked-label: var(--gray-16);
--form-checkbox-radio-disabled-label: var(--gray-04);
--form-range-thumb: var(--gray-12);
--accent: 0, 255, 0;
--root-font-size: 14px;
--radius: 0.2em;
--line-width: 0.2em;
@ -66,9 +66,10 @@
--z-index-modal: 7000;
--z-index-menu: 8000;
--z-index-auto-suggest-list: 8000;
--z-index-edge: 9000;
--header-area-width: 100%;
--header-shade-color: transparent;
--header-shade-opacity: none;
--header-height: 0;
--header-search-width: 0%;
--header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
--header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
@ -78,14 +79,13 @@
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
--header-border-width-multiplier-top: 1;
--header-border-width-multiplier-bottom: 1;
--link-area-width: 100%;
--background-image: none;
--background-opacity: 1;
--background-accent-opacity: 0;
--background-blur: 0;
--layout-width: calc(70vw - var(--layout-width-gutter));
--layout-width-gutter: var(--gutter) * 8;
--menu-border-width: 2px;
--menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
--layout-width: 80%;
--menu-border: calc(var(--line-width) * 1) solid rgb(var(--gray-03));
--shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
--shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1);
@ -102,13 +102,15 @@
}
:root.is-bookmarks-style-block {
--link-height: 7em;
--link-items-width: 20%;
--link-items-height: 10em;
--url-height: 20%;
--edit-height: 30%;
}
:root.is-bookmarks-style-list {
--link-height: 4em;
--link-items-width: 20%;
--link-items-height: 4em;
--url-height: 30%;
--edit-height: 50%;
}
@ -117,10 +119,6 @@
:root {
--root-font-size: 16px;
}
:root.is-bookmarks-style-block {
--link-height: 9em;
}
}
::selection {
@ -140,27 +138,40 @@ body {
font-family: var(--font-regular);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
min-height: 100vh;
transition: background-color var(--animation-speed-fast) ease-in-out;
}
.is-header-alignment-vertical-top body {
.is-layout-scroll-past-end body {
margin-bottom: 40vh;
}
.is-layout-alignment-horizontal-left body {
align-items: flex-start;
}
.is-layout-alignment-horizontal-center body {
align-items: center;
}
.is-layout-alignment-horizontal-right body {
align-items: flex-end;
}
.is-layout-alignment-vertical-top body {
justify-content: flex-start;
}
.is-header-alignment-vertical-center body {
.is-layout-alignment-vertical-center body {
justify-content: center;
}
.is-header-alignment-vertical-bottom body {
.is-layout-alignment-vertical-bottom body {
justify-content: flex-end;
}
.is-bookmarks-show-link body {
display: inherit;
height: inherit;
}
.is-theme-style-dark {
--gray-01: var(--shade-01);
--gray-02: var(--shade-02);

29
css/clock.css
View File

@ -13,6 +13,18 @@
flex-wrap: wrap;
}
.is-header-items-alignment-horizontal-left .clock {
justify-content: flex-start;
}
.is-header-items-alignment-horizontal-center .clock {
justify-content: center;
}
.is-header-items-alignment-horizontal-right .clock {
justify-content: flex-end;
}
.clock-separator,
.clock-hours,
.clock-minutes,
@ -27,7 +39,6 @@
.clock-separator {
justify-content: center;
/* min-width: 0.5em; */
color: rgb(var(--accent));
}
@ -39,14 +50,18 @@
min-width: 1.25em;
}
.clock [class^="clock-"]:not(:first-child):not([class^="clock-separator"]),
.clock [class*=" clock-"]:not(:first-child):not([class*=" clock-separator"]) {
margin-left: 0.2em;
.is-header-items-alignment-horizontal-left .clock-item:not(:last-child) {
margin-right: 0.2em;
}
.clock [class^="clock-"]:not(:last-child):not([class^="clock-separator"]),
.clock [class*=" clock-"]:not(:last-child):not([class*=" clock-separator"]) {
margin-right: 0.2em;
.is-header-items-alignment-horizontal-center .clock-item:not(:first-child),
.is-header-items-alignment-horizontal-center .clock-item:not(:last-child) {
margin-left: 0.1em;
margin-right: 0.1em;
}
.is-header-items-alignment-horizontal-right .clock-item:not(:first-child) {
margin-left: 0.2em;
}
.clock-hours {

29
css/container.css
View File

@ -1,29 +0,0 @@
.container {
margin-left: auto;
margin-right: auto;
position: relative;
width: var(--layout-width);
}
.container-edge {
background-color: transparent;
position: fixed;
top: 0;
left: 50%;
width: calc(var(--layout-width) + var(--layout-width-gutter));
height: 100vh;
transform: translate(-50%, 0);
z-index: var(--z-container-edge);
pointer-events: none;
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
}
@media (min-width: 550px) {}
@media (min-width: 900px) {}
@media (min-width: 1100px) {}
@media (min-width: 1600px) {}
@media (min-width: 1600px) {}

29
css/date.css
View File

@ -13,6 +13,18 @@
flex-wrap: wrap;
}
.is-header-items-alignment-horizontal-left .date {
justify-content: flex-start;
}
.is-header-items-alignment-horizontal-center .date {
justify-content: center;
}
.is-header-items-alignment-horizontal-right .date {
justify-content: flex-end;
}
.date-separator,
.date-date,
.date-day,
@ -27,7 +39,6 @@
.date-separator {
justify-content: center;
/* min-width: 0.5em; */
color: rgb(var(--accent));
}
@ -38,14 +49,18 @@
justify-content: center;
}
.date [class^="date-"]:not(:first-child):not([class^="date-separator"]),
.date [class*=" date-"]:not(:first-child):not([class*=" date-separator"]) {
margin-left: 0.2em;
.is-header-items-alignment-horizontal-left .date-item:not(:last-child) {
margin-right: 0.2em;
}
.date [class^="date-"]:not(:last-child):not([class^="date-separator"]),
.date [class*=" date-"]:not(:last-child):not([class*=" date-separator"]) {
margin-right: 0.2em;
.is-header-items-alignment-horizontal-center .date-item:not(:first-child),
.is-header-items-alignment-horizontal-center .date-item:not(:last-child) {
margin-left: 0.1em;
margin-right: 0.1em;
}
.is-header-items-alignment-horizontal-right .date-item:not(:first-child) {
margin-left: 0.2em;
}
.date-day {

14
css/edge.css Normal file
View File

@ -0,0 +1,14 @@
.edge {
background-color: rgba(var(--accent), 0.10);
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0;
border-radius: calc(var(--radius) * 2);
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--accent), 0.25);
z-index: var(--z-index-edge);
pointer-events: none;
transition: opacity var(--animation-speed-fast) ease-in-out;
}

2
css/form.css
View File

@ -745,7 +745,7 @@ input[type="range"][disabled]~.input-helper {
.form-group {
margin: 0 0 1em 0;
display: inline-flex;
justify-content: center;
justify-content: flex-start;
align-items: stretch;
width: 100%;
}

6
css/greeting.css
View File

@ -20,9 +20,3 @@
justify-content: center;
align-items: center;
}
.greeting-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

80
css/header.css
View File

@ -1,19 +1,30 @@
.header {
padding-top: var(--header-shade-padding-top);
padding-bottom: var(--header-shade-padding-bottom);
width: 100%;
position: relative;
display: flex;
flex-direction: row;
z-index: var(--z-index-header);
}
.is-header-area-alignment-horizontal-left .header {
justify-content: flex-start;
}
.is-header-area-alignment-horizontal-center .header {
justify-content: center;
}
.is-header-area-alignment-horizontal-right .header {
justify-content: flex-end;
}
.is-bookmarks-show-link .header {
position: fixed;
position: sticky;
top: 0;
left: 0;
}
.header .header-shade,
.header .header-border {
.header-shade,
.header-border {
content: "";
display: block;
position: absolute;
@ -24,51 +35,47 @@
pointer-events: none;
}
.is-header-shade-style-scroll .header .header-shade {
.is-header-shade-style-scroll .header-shade {
transition: background-color var(--animation-speed-slow) ease-in-out;
animation: none;
}
.is-header-shade-show .header .header-shade {
.is-header-shade-show .header-shade {
background-color: rgb(var(--header-shade-color));
opacity: var(--header-shade-opacity);
}
.is-header-shade-border-top-show .header .header-border {
.is-header-shade-border-top-show .header-border {
border-top: var(--header-border-width-top) solid rgb(var(--accent));
}
.is-header-shade-border-bottom-show .header .header-border {
.is-header-shade-border-bottom-show .header-border {
border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
}
.header-edge {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
}
.header-area {
margin: 0 calc(var(--gutter) * -1);
padding-top: calc(var(--gutter) * 3 + var(--header-shade-padding-top));
padding-bottom: calc(var(--gutter) * 3 + var(--header-shade-padding-bottom));
padding-left: calc(var(--gutter) * 3);
padding-right: calc(var(--gutter) * 3);
position: relative;
width: var(--header-area-width);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.header-item {
margin: var(--gutter);
max-width: calc(100% - var(--gutter) * 2);
display: flex;
flex-wrap: nowrap;
.is-header-items-alignment-horizontal-left .header-area {
justify-content: flex-start;
align-items: center;
position: relative;
}
.is-header-items-alignment-horizontal-center .header-area {
justify-content: center;
}
.is-header-items-alignment-horizontal-right .header-area {
justify-content: flex-end;
}
.is-header-search-text-align-left .header-search-input {
@ -93,16 +100,13 @@
right: 0;
}
.is-header-alignment-horizontal-left .header-area {
.header-item {
margin: var(--gutter);
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
.is-header-alignment-horizontal-center .header-area {
justify-content: center;
}
.is-header-alignment-horizontal-right .header-area {
justify-content: flex-end;
align-items: center;
position: relative;
}
.header-search {

103
css/link.css
View File

@ -1,44 +1,102 @@
.link {
margin-bottom: 2em;
margin-top: var(--header-height);
width: 100vw;
position: relative;
z-index: var(--z-index-link);
display: none;
/* transition: margin-top var(--animation-speed-fast) ease-in-out; */
position: relative;
flex-direction: row;
z-index: var(--z-index-link);
}
.is-bookmarks-show-link .link {
display: block;
display: flex;
}
.is-layout-scroll-past-end .link {
margin-bottom: 60vh;
.is-link-area-alignment-horizontal-left .link {
justify-content: flex-start;
}
.is-link-area-alignment-horizontal-center .link {
justify-content: center;
}
.is-link-area-alignment-horizontal-right .link {
justify-content: flex-end;
}
.link-area {
width: 100%;
padding-bottom: calc(var(--gutter) * 4);
padding-left: calc(var(--gutter) * 4);
padding-right: calc(var(--gutter) * 4);
position: relative;
width: var(--link-area-width);
}
.is-bookmarks-fit-best .link-area {
display: grid;
grid-auto-rows: 1fr;
grid-gap: calc(var(--gutter) * 2);
}
.is-bookmarks-style-block .link-area {
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
.is-bookmarks-fit-custom .link-area {
margin-top: calc(var(--gutter) * -1);
padding-bottom: calc(var(--gutter) * 3);
padding-left: calc(var(--gutter) * 3);
padding-right: calc(var(--gutter) * 3);
display: flex;
flex-wrap: wrap;
}
.is-bookmarks-style-list .link-area {
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
.is-link-items-alignment-horizontal-left .link-area {
justify-content: flex-start;
}
.is-link-items-alignment-horizontal-center .link-area {
justify-content: center;
}
.is-link-items-alignment-horizontal-right .link-area {
justify-content: flex-end;
}
.is-header-shade-style-always .link-area {
padding-top: calc(var(--gutter) * 4);
}
.is-link-alignment-horizontal-left .link-area {
justify-content: flex-start;
}
.is-link-alignment-horizontal-center .link-area {
justify-content: center;
}
.is-link-alignment-horizontal-right .link-area {
justify-content: flex-end;
}
.is-bookmarks-fit-best.is-bookmarks-style-block .link-area {
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
}
.is-bookmarks-fit-best.is-bookmarks-style-list .link-area {
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
}
.link-item {
width: 100%;
height: var(--link-height);
font-size: 1em;
position: relative;
display: block;
transform: scale(1);
transition: all var(--animation-speed-fast) ease-in-out;
transition: transform var(--animation-speed-fast) ease-in-out;
direction: ltr;
}
.is-bookmarks-fit-best .link-item {
height: var(--link-items-height);
}
.is-bookmarks-fit-custom .link-item {
height: var(--link-items-height);
width: var(--link-items-width);
margin: var(--gutter);
}
.link-item:focus-within,
@ -287,8 +345,6 @@
}
.link-empty {
grid-column-start: 1;
grid-column-end: -1;
text-align: center;
}
@ -296,6 +352,15 @@
color: rgb(var(--gray-16));
}
.is-bookmarks-fit-best .link-empty {
grid-column-start: 1;
grid-column-end: -1;
}
.is-bookmarks-fit-custom .link-empty {
margin: 1em;
}
.is-bookmarks-style-block .link-name {
text-align: center;
}

4
css/main.css Normal file
View File

@ -0,0 +1,4 @@
.main {
position: relative;
width: var(--layout-width);
}

127
css/menu.css
View File

@ -23,15 +23,19 @@
background-color: rgb(var(--gray-01));
border-radius: var(--radius);
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
pointer-events: all;
transition: background-color var(--animation-speed-fast) ease-in-out;
opacity: 1;
transition: background-color var(--animation-speed-fast) ease-in-out, opacity var(--animation-speed-fast) ease-in-out;
}
.is-edge .menu-area {
opacity: 0.2;
}
.menu-nav {
display: flex;
flex-direction: column-reverse;
flex-direction: row;
}
@ -50,17 +54,12 @@
margin: 0;
}
.menu-content {
padding-bottom: 40vh;
}
.menu-content-area {
display: grid;
grid-template-columns: 1fr;
}
.menu-item {
padding: 2em;
position: relative;
z-index: 1;
}
@ -69,6 +68,18 @@
border-bottom: var(--menu-border);
}
.menu-item-header {
padding: 2em;
}
.menu-item-header-text {
margin-bottom: 0;
}
.menu-item-form {
padding: 0 2em 2em 4em;
}
.menu-close {
background-color: transparent;
margin: 0;
@ -99,6 +110,10 @@
}
@media (min-width: 550px) {
.menu {
width: 80vw;
}
.menu-nav-button {
flex-basis: 0;
}
@ -106,7 +121,7 @@
@media (min-width: 700px) {
.menu {
width: 90vw;
width: 60vw;
height: 100%;
overflow-y: inherit;
max-height: inherit;
@ -117,8 +132,6 @@
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
justify-items: stretch;
align-items: stretch;
}
@ -127,85 +140,39 @@
overflow-y: auto;
}
.menu-content-area {
grid-template-columns: repeat(2, 1fr);
grid-gap: 4em;
padding: 2em;
}
.menu-item:not(:last-child) {
border-bottom: 0;
}
.menu-item:nth-child(odd):after {
content: "";
width: 0;
height: 100%;
position: absolute;
top: 0;
right: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em;
border-right: var(--menu-border);
}
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
content: "";
width: 100%;
height: 0;
position: absolute;
left: 0;
bottom: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em;
border-bottom: var(--menu-border);
}
.menu-item {
padding: 1em 0;
display: grid;
grid-template-columns: 2fr 3fr;
grid-template-rows: 1fr;
align-items: flex-start;
grid-gap: 2em;
}
.menu-item-header {
padding: 2em 0 2em 2em;
position: sticky;
top: 0;
z-index: 3;
}
.menu-item-form {
padding: 2em 2em 2em 0;
z-index: 2;
}
}
@media (min-width: 900px) {
.menu {
width: 80vw;
width: 60vw;
}
.menu-item {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 1600px) {
.menu {
width: 70vw;
}
.menu-content-area {
grid-template-columns: repeat(3, 1fr);
}
.menu-item:nth-child(odd):after {
content: none;
}
.menu-item:not(:nth-child(3n+3)):after {
content: "";
width: 0;
height: 100%;
position: absolute;
top: 0;
right: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em;
border-right: var(--menu-border);
}
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
content: none;
}
.menu-item:not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)):before {
content: "";
width: 100%;
height: 0;
position: absolute;
left: 0;
bottom: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em;
border-bottom: var(--menu-border);
width: 40vw;
}
}

8
css/shade.css
View File

@ -1,14 +1,10 @@
.shade {
/* background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(var(--accent), 0.6) 100%); */
background-color: rgba(var(--accent), 0.4);
/* background-color: rgba(var(--black), 0.5); */
/* box-shadow: 0 0 5em 0 rgba(var(--accent), 1) inset; */
position: fixed;
top: -1em;
left: -1em;
width: calc(100% + 2em);
height: calc(100% + 2em);
opacity: 0;
transition: opacity var(--animation-speed-fast) ease-in-out, background-color var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-shade);
}
@ -16,3 +12,7 @@
.is-background-image-show .shade {
background-color: rgba(var(--black), 0.5);
}
.is-edge:not(.is-background-image-show) .shade {
background-color: rgba(var(--accent), 0.05);
}

6
css/transitional.css
View File

@ -20,9 +20,3 @@
justify-content: center;
align-items: center;
}
.transitional-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

365
index.html
View File

@ -8,13 +8,14 @@
<title>New Tab</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/edge.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/state.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/typography.css">
<link rel="stylesheet" href="css/container.css">
<link rel="stylesheet" href="css/spacing.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/form.css">
@ -41,10 +42,11 @@
<div class="background-accent"></div>
</div>
<header class="header">
<div class="header-shade"></div>
<div class="header-border"></div>
<div class="container">
<main class="main">
<header class="header">
<div class="header-shade"></div>
<div class="header-border"></div>
<div class="header-area">
<div class="header-item header-greeting">
<p class="greeting"></p>
@ -90,24 +92,24 @@
</button>
</div>
</div>
</div>
</header>
</header>
<section class="link">
<div class="container">
<section class="link">
<div class="link-area"></div>
</div>
</section>
</section>
</main>
<section class="menu" tabindex="1">
<div class="menu-area">
<div class="menu-nav">
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-header" tabindex="1">Header</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
</div>
<div class="menu-nav-area">
@ -117,7 +119,113 @@
<div class="menu-content">
<div class="menu-content-area menu-content-area-header">
<div class="menu-content-area menu-content-area-layout">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Area</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-width">Width</label>
<input id="control-layout-width" class="control-layout-width" type="range" min="15" max="100" value="0" tabindex="1">
</div>
<hr>
<label class="control-layout-alignment-horizontal-label">Layout Horizontal Alignment</label>
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
<label for="control-layout-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
<label for="control-layout-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
<label for="control-layout-alignment-horizontal-right">Right</label>
</div>
<hr>
<label class="control-layout-alignment-vertical-label">Layout Vertical Alignment</label>
<p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
<label for="control-layout-alignment-vertical-top">Top</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
<label for="control-layout-alignment-vertical-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
<label for="control-layout-alignment-vertical-bottom">Bottom</label>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Page</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-title">Title</label>
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
</div>
<hr>
<div class="input-wrap">
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
<label for="control-layout-scroll-past-end">Scroll past end</label>
</div>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-header is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Area</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-header-area-width">Width</label>
<input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="1">
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div>
<hr>
<div class="button-wrap">
<button class="control-header-area-width-match mb-0" type="button">Match Bookmarks Area Width</button>
</div>
<hr>
<label class="control-header-area-alignment-horizontal-label">Header Area Horizontal Alignment</label>
<div class="input-wrap">
<input id="control-header-area-alignment-horizontal-left" class="control-header-area-alignment-horizontal-left" type="radio" name="control-header-area-alignment-horizontal" value="left" tabindex="1">
<label for="control-header-area-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-header-area-alignment-horizontal-center" class="control-header-area-alignment-horizontal-center" type="radio" name="control-header-area-alignment-horizontal" value="center" tabindex="1">
<label for="control-header-area-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-header-area-alignment-horizontal-right" class="control-header-area-alignment-horizontal-right" type="radio" name="control-header-area-alignment-horizontal" value="right" tabindex="1">
<label for="control-header-area-alignment-horizontal-right">Right</label>
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
</div>
<hr>
<label class="control-header-items-alignment-horizontal-label">Header Items Horizontal Alignment</label>
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
<div class="input-wrap">
<input id="control-header-items-alignment-horizontal-left" class="control-header-items-alignment-horizontal-left" type="radio" name="control-header-items-alignment-horizontal" value="left" tabindex="1">
<label for="control-header-items-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-header-items-alignment-horizontal-center" class="control-header-items-alignment-horizontal-center" type="radio" name="control-header-items-alignment-horizontal" value="center" tabindex="1">
<label for="control-header-items-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-header-items-alignment-horizontal-right" class="control-header-items-alignment-horizontal-right" type="radio" name="control-header-items-alignment-horizontal" value="right" tabindex="1">
<label for="control-header-items-alignment-horizontal-right">Right</label>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Greeting</h1>
@ -128,24 +236,24 @@
<label for="control-header-greeting-show">Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
<label for="control-header-greeting-type-good">"Good morning..."</label>
<div class="input-wrap">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
<label for="control-header-greeting-type-good">"Good morning..."</label>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
<label for="control-header-greeting-type-hello">"Hello..."</label>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
<label for="control-header-greeting-type-hi">"Hi..."</label>
</div>
<hr>
<div class="input-wrap">
<label for="control-header-greeting-name">Name</label>
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
</div>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
<label for="control-header-greeting-type-hello">"Hello..."</label>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
<label for="control-header-greeting-type-hi">"Hi..."</label>
</div>
<hr>
<div class="input-wrap">
<label for="control-header-greeting-name">Name</label>
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
</div>
</div>
</div>
</div>
<div class="menu-item">
@ -384,9 +492,8 @@
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-header-search-width-custom">Percentage of header space</label>
<label for="control-header-search-width-custom">Width</label>
<input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
<p class="input-helper small muted">Header space can be changed by the Layout Content Container Width.</p>
</div>
</div>
<hr>
@ -430,14 +537,14 @@
</div>
</div>
<hr>
<label class="control-header-search-text-align-label">Text align</label>
<label class="control-header-search-text-align-label">Align Text</label>
<div class="input-wrap">
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
<label for="control-header-search-text-align-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
<label for="control-header-search-text-align-center">Center</label>
<label for="control-header-search-text-align-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
@ -463,47 +570,7 @@
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Horizontal Alignment</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
<label for="control-layout-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
<label for="control-layout-alignment-horizontal-center">Center</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
<label for="control-layout-alignment-horizontal-right">Right</label>
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Vertical Alignment</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
<label for="control-layout-alignment-vertical-top">Top</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
<label for="control-layout-alignment-vertical-center">Center</label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
<label for="control-layout-alignment-vertical-bottom">Bottom</label>
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Background Shade</h1>
<h1 class="menu-item-header-text">Shade</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
@ -528,11 +595,11 @@
</div>
<div class="input-wrap">
<label for="control-header-shade-padding-top">Top padding</label>
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
</div>
<div class="input-wrap">
<label for="control-header-shade-padding-bottom">Bottom padding</label>
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="1" max="50" value="0" tabindex="1">
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="0" max="50" value="0" tabindex="1">
</div>
<hr>
<div class="input-wrap">
@ -562,32 +629,95 @@
</div>
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Area</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-link-area-width">Width</label>
<input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="1">
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div>
<hr>
<div class="button-wrap">
<button class="control-link-area-width-match mb-0" type="button">Match Header Area Width</button>
</div>
<hr>
<label class="control-link-area-alignment-horizontal-label">Bookmark Area Horizontal Alignment</label>
<div class="input-wrap">
<input id="control-link-area-alignment-horizontal-left" class="control-link-area-alignment-horizontal-left" type="radio" name="control-link-area-alignment-horizontal" value="left" tabindex="1">
<label for="control-link-area-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-link-area-alignment-horizontal-center" class="control-link-area-alignment-horizontal-center" type="radio" name="control-link-area-alignment-horizontal" value="center" tabindex="1">
<label for="control-link-area-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-link-area-alignment-horizontal-right" class="control-link-area-alignment-horizontal-right" type="radio" name="control-link-area-alignment-horizontal" value="right" tabindex="1">
<label for="control-link-area-alignment-horizontal-right">Right</label>
<p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Bookmarks</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-link-show">Show</label>
<input id="control-link-link-show" class="control-link-link-show" type="checkbox" tabindex="1">
<label for="control-link-link-show">Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-name-show">Names</label>
<input id="control-link-name-show" class="control-link-name-show" type="checkbox" tabindex="1">
<label for="control-link-name-show">Names</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-url-show">URL on hover</label>
<input id="control-link-url-show" class="control-link-url-show" type="checkbox" tabindex="1">
<label for="control-link-url-show">URL on hover</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
<label for="control-bookmarks-url-style-dark">Dark text</label>
<input id="control-link-url-style-dark" class="control-link-url-style-dark" type="radio" name="control-link-url-style" value="dark" tabindex="1">
<label for="control-link-url-style-dark">Dark text</label>
</div>
<div class="input-wrap">
<input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
<label for="control-bookmarks-url-style-light">Light text</label>
<input id="control-link-url-style-light" class="control-link-url-style-light" type="radio" name="control-link-url-style" value="light" tabindex="1">
<label for="control-link-url-style-light">Light text</label>
</div>
</div>
<hr>
<label class="control-link-fit-label">Bookmark size</label>
<div class="input-wrap">
<input id="control-link-fit-best" class="control-link-fit-best" type="radio" name="control-link-fit" value="best" tabindex="1">
<label for="control-link-fit-best">Best fit</label>
</div>
<div class="input-wrap">
<input id="control-link-fit-custom" class="control-link-fit-custom" type="radio" name="control-link-fit" value="custom" tabindex="1">
<label for="control-link-fit-custom">Custom</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-items-width">Width</label>
<input id="control-link-items-width" class="control-link-items-width" type="range" min="5" max="100" value="0" tabindex="1">
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
</div>
<hr>
<label class="control-link-items-alignment-horizontal-label">Bookmark Horizontal Alignment</label>
<div class="input-wrap">
<input id="control-link-items-alignment-horizontal-left" class="control-link-items-alignment-horizontal-left" type="radio" name="control-link-items-alignment-horizontal" value="left" tabindex="1">
<label for="control-link-items-alignment-horizontal-left">Left</label>
</div>
<div class="input-wrap">
<input id="control-link-items-alignment-horizontal-center" class="control-link-items-alignment-horizontal-center" type="radio" name="control-link-items-alignment-horizontal" value="center" tabindex="1">
<label for="control-link-items-alignment-horizontal-center">Centre</label>
</div>
<div class="input-wrap">
<input id="control-link-items-alignment-horizontal-right" class="control-link-items-alignment-horizontal-right" type="radio" name="control-link-items-alignment-horizontal" value="right" tabindex="1">
<label for="control-link-items-alignment-horizontal-right">Right</label>
</div>
</div>
</div>
@ -599,8 +729,8 @@
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
<label for="control-bookmarks-new-tab">In a new tab</label>
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
<label for="control-link-new-tab">In a new tab</label>
</div>
</div>
</div>
@ -610,12 +740,12 @@
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
<label for="control-bookmarks-style-block">Block</label>
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="1">
<label for="control-link-style-block">Block</label>
</div>
<div class="input-wrap">
<input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
<label for="control-bookmarks-style-list">List</label>
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="1">
<label for="control-link-style-list">List</label>
</div>
</div>
</div>
@ -625,20 +755,20 @@
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
<label for="control-bookmarks-sort-none">None (as added)</label>
<input id="control-link-sort-none" class="control-link-sort-none" type="radio" name="control-link-sort" value="none" tabindex="1">
<label for="control-link-sort-none">None (as added)</label>
</div>
<div class="input-wrap">
<input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
<label for="control-bookmarks-sort-letter">Letter</label>
<input id="control-link-sort-letter" class="control-link-sort-letter" type="radio" name="control-link-sort" value="letter" tabindex="1">
<label for="control-link-sort-letter">Letter</label>
</div>
<div class="input-wrap">
<input id="control-bookmarks-sort-icon" class="control-bookmarks-sort-icon" type="radio" name="control-bookmarks-sort" value="icon" tabindex="1">
<label for="control-bookmarks-sort-icon">Icon</label>
<input id="control-link-sort-icon" class="control-link-sort-icon" type="radio" name="control-link-sort" value="icon" tabindex="1">
<label for="control-link-sort-icon">Icon</label>
</div>
<div class="input-wrap">
<input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
<label for="control-bookmarks-sort-name">Name</label>
<input id="control-link-sort-name" class="control-link-sort-name" type="radio" name="control-link-sort" value="name" tabindex="1">
<label for="control-link-sort-name">Name</label>
</div>
</div>
</div>
@ -700,36 +830,6 @@
</div>
</div>
<div class="menu-content-area menu-content-area-layout is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Content container</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-width">Width</label>
<input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Page</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
<label for="control-layout-scroll-past-end">Scroll past end</label>
</div>
<hr>
<div class="input-wrap">
<label for="control-layout-title">Title</label>
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
</div>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-background is-hidden">
<div class="menu-item">
<div class="menu-item-header">
@ -805,6 +905,7 @@
<script src="js/layout.js"></script>
<script src="js/auto-suggest.js"></script>
<script src="js/page.js"></script>
<script src="js/edge.js"></script>
<script src="js/init.js"></script>
</html>

306
js/bookmarks.js
View File

@ -1,25 +1,6 @@
var bookmarks = (function() {
var all = [{
display: "letter",
letter: "CM",
icon: {
name: null,
prefix: null,
label: null
},
name: "Citymapper",
url: "https://citymapper.com/london/superrouter",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453100455
}, {
display: "icon",
letter: "DEV",
icon: {
@ -38,63 +19,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453101749
}, {
display: "letter",
letter: "OD",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/opendirectories/",
url: "https://www.reddit.com/r/opendirectories/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453102199
}, {
display: "letter",
letter: "KP",
icon: {
name: null,
prefix: null,
label: null
},
name: "Keep",
url: "https://keep.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453102671
}, {
display: "letter",
letter: "MHW",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/monsterhunterworld/",
url: "https://www.reddit.com/r/monsterhunterworld/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453103110
}, {
display: "letter",
letter: "M",
@ -152,44 +76,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453104460
}, {
display: "letter",
letter: "P",
icon: {
name: null,
prefix: null,
label: null
},
name: "Photos",
url: "https://photos.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453104910
}, {
display: "letter",
letter: "FB",
icon: {
name: null,
prefix: null,
label: null
},
name: "Facebook",
url: "https://www.facebook.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453105349
}, {
display: "letter",
letter: "GOT",
@ -209,63 +95,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453105844
}, {
display: "letter",
letter: "BX",
icon: {
name: null,
prefix: null,
label: null
},
name: "Box",
url: "https://app.box.com/login/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453106272
}, {
display: "letter",
letter: "TFL",
icon: {
name: null,
prefix: null,
label: null
},
name: "TFL Map",
url: "http://content.tfl.gov.uk/standard-tube-map.pdf",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453106734
}, {
display: "letter",
letter: "PRG",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/Pathfinder_RPG/",
url: "https://www.reddit.com/r/Pathfinder_RPG/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453107194
}, {
display: "icon",
letter: "AZ",
@ -277,11 +106,11 @@ var bookmarks = (function() {
name: "Amazon",
url: "https://www.amazon.co.uk/",
accent: {
override: false,
override: true,
color: {
r: null,
g: null,
b: null
r: 255,
g: 168,
b: 0
}
},
timeStamp: 1546453107633
@ -304,25 +133,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453108071
}, {
display: "letter",
letter: "CO",
icon: {
name: null,
prefix: null,
label: null
},
name: "Contacts",
url: "https://contacts.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453108501
}, {
display: "icon",
letter: "GIT",
@ -342,44 +152,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453108926
}, {
display: "letter",
letter: "AN",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/Android/",
url: "https://www.reddit.com/r/Android/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453109355
}, {
display: "letter",
letter: "V",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/videos/",
url: "https://www.reddit.com/r/videos/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453109840
}, {
display: "icon",
letter: "GM",
@ -399,25 +171,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453110265
}, {
display: "letter",
letter: "CAL",
icon: {
name: null,
prefix: null,
label: null
},
name: "Calendar",
url: "https://www.google.com/calendar/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453110885
}, {
display: "icon",
letter: "R",
@ -429,11 +182,11 @@ var bookmarks = (function() {
name: "Reddit",
url: "https://www.reddit.com/",
accent: {
override: false,
override: true,
color: {
r: null,
g: null,
b: null
r: 255,
g: 69,
b: 0
}
},
timeStamp: 1546453111491
@ -456,44 +209,6 @@ var bookmarks = (function() {
}
},
timeStamp: 1546453111953
}, {
display: "letter",
letter: "ANA",
icon: {
name: null,
prefix: null,
label: null
},
name: "Analytics",
url: "https://analytics.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453112357
}, {
display: "letter",
letter: "COS",
icon: {
name: null,
prefix: null,
label: null
},
name: "r/chromeos/",
url: "https://www.reddit.com/r/chromeos/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453112797
}];
var get = function(data) {
@ -521,7 +236,7 @@ var bookmarks = (function() {
return helper.sortObject(array, "icon.name");
}
};
return action[state.get().bookmarks.sort](all);
return action[state.get().link.sort](all);
};
if (data && typeof data.timeStamp == "number") {
return _singleBookmark();
@ -569,7 +284,8 @@ var bookmarks = (function() {
get: get,
add: add,
edit: edit,
remove: remove
remove: remove,
restore: restore
};
})();

2
js/clock.js
View File

@ -135,7 +135,7 @@ var clock = (function() {
text: separatorCharacter,
attr: [{
key: "class",
value: "clock-separator"
value: "clock-item clock-separator"
}]
});
clock.insertBefore(separator, arrayItem);

965
js/control.js
View File

File diff suppressed because it is too large Load Diff

7
js/data.js
View File

@ -33,7 +33,7 @@ var data = (function() {
return data;
};
var _checkForSavedData = function(data) {
var restore = function(data) {
if (data) {
if (!("version" in data) || data.version != version.get()) {
console.log("data version " + data.version + " found less than current");
@ -48,7 +48,7 @@ var data = (function() {
};
var init = function() {
_checkForSavedData(load());
restore(load());
};
return {
@ -58,7 +58,8 @@ var data = (function() {
set: set,
get: get,
load: load,
wipe: wipe
wipe: wipe,
restore: restore
};
})();

10
js/date.js
View File

@ -1,10 +1,10 @@
var date = (function() {
var bind = function() {
// window.setInterval(function() {
// clear();
// render();
// }, 1000);
window.setInterval(function() {
clear();
render();
}, 1000);
};
var clear = function() {
@ -170,7 +170,7 @@ var date = (function() {
text: separatorCharacter,
attr: [{
key: "class",
value: "date-separator"
value: "date-item date-separator"
}]
});
date.insertBefore(separator, arrayItem);

86
js/edge.js Normal file
View File

@ -0,0 +1,86 @@
var edge = (function() {
var _timer = null;
var _currentEdge = null;
var destroy = function() {
var allEdge = helper.eA(".edge");
if (allEdge[0]) {
for (var i = 0; i < allEdge.length; i++) {
allEdge[i].destroy();
};
};
};
var render = function(override) {
var options = {
element: null,
delay: null
};
if (override) {
options = helper.applyOptions(options, override);
};
var _resize = function() {
var rect = options.element.getBoundingClientRect();
_currentEdge.style.width = rect.width + "px";
_currentEdge.style.height = rect.height + "px";
_currentEdge.style.top = rect.top + "px";
_currentEdge.style.left = rect.left + "px";
};
var _makeEdge = function() {
helper.setObject({
object: state.get(),
path: "edge",
newValue: true
});
var html = helper.e("html");
var body = helper.e("body");
var edgeElement = helper.node("div|class:edge is-transparent");
edgeElement.destroy = function() {
if (edgeElement.classList.contains("is-opaque")) {
helper.removeClass(edgeElement, "is-opaque");
helper.addClass(edgeElement, "is-transparent");
} else {
edgeElement.remove();
};
_currentEdge = null;
helper.setObject({
object: state.get(),
path: "edge",
newValue: false
});
};
edgeElement.addEventListener("transitionend", function(event, elapsed) {
if (event.propertyName === "opacity" && getComputedStyle(this).opacity == 0) {
this.parentElement.removeChild(this);
helper.removeClass(html, "is-edge");
};
}, false);
if (options.delay) {
clearTimeout(_timer);
_timer = setTimeout(edgeElement.destroy, options.delay);
};
helper.addClass(html, "is-edge");
body.appendChild(edgeElement);
getComputedStyle(edgeElement).opacity;
helper.removeClass(edgeElement, "is-transparent");
helper.addClass(edgeElement, "is-opaque");
_currentEdge = edgeElement;
};
if (options.element != null) {
if (_currentEdge == null) {
_makeEdge();
_resize();
} else {
_resize();
};
};
};
// exposed methods
return {
render: render,
destroy: destroy
};
})();

148
js/header.js
View File

@ -2,110 +2,122 @@ var header = (function() {
var _bind = function() {
window.addEventListener("resize", function() {
render();
render.shade();
}, false);
window.addEventListener("scroll", function() {
render();
render.shade();
}, false);
helper.eA(".container").forEach(function(arrayItem, index) {
arrayItem.addEventListener("transitionend", function() {
render();
render.shade();
}, false);
});
document.fonts.ready.then(function() {
render();
render.shade();
});
};
var edge = function(action) {
var header = helper.e(".header");
var container = helper.makeNode({
tag: "div",
attr: [{
key: "class",
value: "header-edge"
}]
});
var state = {
show: function() {
header.appendChild(container);
var render = {
width: {
set: function() {
_width();
},
hide: function() {
header.removeChild(helper.e(".header-edge"));
match: function() {
_match();
}
};
state[action]();
},
shade: function() {
_shade();
},
opacity: function() {
_opacity();
},
padding: function() {
_padding();
},
border: function() {
_border();
},
search: function() {
_search();
}
};
var render = function() {
var _width = function() {
var html = helper.e("html");
html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
};
var _match = function() {
helper.setObject({
object: state.get(),
path: "header.area.width",
newValue: state.get().link.area.width
});
render.width.set();
};
var _shade = function() {
var html = helper.e("html");
var header = helper.e(".header");
var link = helper.e(".link");
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
var scrollPosition = document.documentElement.scrollTop;
var _margin = function() {
var height = parseInt(getComputedStyle(header).height, 10);
var marginValue;
if (state.get().background.image.show && (state.get().header.shade.show && state.get().header.shade.style == "always") || state.get().header.shade.style == "always" || state.get().header.shade.border.bottom.show) {
marginValue = (height + fontSize);
} else {
marginValue = height;
};
html.style.setProperty("--header-height", marginValue + "px");
};
var _color = function() {
if (state.get().header.shade.show) {
if (state.get().header.shade.style == "always") {
if (state.get().header.shade.show) {
if (state.get().header.shade.style == "always") {
html.style.setProperty("--header-shade-color", "var(--gray-01)");
} else if (state.get().header.shade.style == "scroll") {
if (scrollPosition > (fontSize * 2)) {
html.style.setProperty("--header-shade-color", "var(--gray-01)");
} else if (state.get().header.shade.style == "scroll") {
if (scrollPosition > (fontSize * 2)) {
html.style.setProperty("--header-shade-color", "var(--gray-01)");
} else {
html.style.setProperty("--header-shade-color", "transparent");
};
} else {
html.style.setProperty("--header-shade-color", "transparent");
};
} else {
html.style.setProperty("--header-shade-color", "transparent");
};
} else {
html.style.setProperty("--header-shade-color", "transparent");
};
var _opacity = function() {
if (state.get().header.shade.show) {
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
};
};
var _opacity = function() {
var html = helper.e("html");
if (state.get().header.shade.show) {
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
};
var _padding = function() {
html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
};
var _padding = function() {
var html = helper.e("html");
html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
};
var _border = function() {
var html = helper.e("html");
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
};
var _search = function() {
var html = helper.e("html");
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%");
} else {
html.style.removeProperty("--header-search-width");
};
var _border = function() {
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
};
var _search = function() {
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%");
} else {
html.style.removeProperty("--header-search-width");
};
};
_search();
_color();
_opacity();
_padding();
_border();
_margin();
};
var init = function() {
_bind();
render();
render.width.set();
render.search();
render.shade();
render.opacity();
render.padding();
render.border();
};
// exposed methods
return {
edge: edge,
render: render,
init: init
};

3
js/init.js
View File

@ -63,3 +63,6 @@ title.init();
// render header height padding
header.init();
// menu.open();

18
js/keyboard.js
View File

@ -4,7 +4,9 @@ var keyboard = (function() {
window.addEventListener("keydown", function(event) {
// esc
if (event.keyCode == 27) {
if (state.get().menu) {
if (state.get().edge) {
edge.destroy();
} else if (state.get().menu) {
menu.close();
shade.destroy();
} else if (state.get().autoSuggest) {
@ -12,10 +14,10 @@ var keyboard = (function() {
} else if (state.get().modal) {
modal.destroy();
shade.destroy();
} else if (state.get().bookmarks.edit) {
} else if (state.get().link.edit) {
helper.setObject({
object: state.get(),
path: "bookmarks.edit",
path: "link.edit",
newValue: false
});
control.update();
@ -25,7 +27,7 @@ var keyboard = (function() {
};
// ctrl+alt+a
if (event.ctrlKey && event.altKey && event.keyCode == 65) {
if (state.get().bookmarks.link.show) {
if (state.get().link.show) {
menu.close();
link.add();
};
@ -45,17 +47,17 @@ var keyboard = (function() {
};
// ctrl+alt+e
if (event.ctrlKey && event.altKey && event.keyCode == 69) {
if (state.get().bookmarks.link.show && bookmarks.get().length > 0) {
if (state.get().bookmarks.edit) {
if (state.get().link.show && bookmarks.get().length > 0) {
if (state.get().link.edit) {
helper.setObject({
object: state.get(),
path: "bookmarks.edit",
path: "link.edit",
newValue: false
});
} else {
helper.setObject({
object: state.get(),
path: "bookmarks.edit",
path: "link.edit",
newValue: true
});
};

25
js/layout.js
View File

@ -2,30 +2,10 @@ var layout = (function() {
var render = function() {
var html = helper.e("html");
html.style.setProperty("--layout-width", "calc(" + helper.getObject({
html.style.setProperty("--layout-width", helper.getObject({
object: state.get(),
path: "layout.width"
}) + "vw - var(--layout-width-gutter))");
};
var edge = function(action) {
var body = helper.e("body");
var container = helper.makeNode({
tag: "div",
attr: [{
key: "class",
value: "container container-edge"
}]
});
var state = {
show: function() {
body.appendChild(container);
},
hide: function() {
body.removeChild(helper.e(".container-edge"));
}
};
state[action]();
}) + "%");
};
var init = function() {
@ -34,7 +14,6 @@ var layout = (function() {
// exposed methods
return {
edge: edge,
render: render,
init: init
};

54
js/link.js
View File

@ -60,7 +60,7 @@ var link = (function() {
bookmarks.add(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
data.save();
clear();
render();
render.link();
tabIndex();
control.dependents();
control.render();
@ -112,7 +112,7 @@ var link = (function() {
bookmarks.edit(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
data.save();
clear();
render();
render.link();
tabIndex();
_returnToPreviousFocusLink();
resetStagedBookmarkData();
@ -132,14 +132,14 @@ var link = (function() {
_checkCount();
data.save();
clear();
render();
render.link();
};
var _checkCount = function() {
if (bookmarks.get().length <= 0) {
helper.setObject({
object: state.get(),
path: "bookmarks.edit",
path: "link.edit",
newValue: false
});
};
@ -295,7 +295,7 @@ var link = (function() {
value: 1
}]
};
if (state.get().bookmarks.newTab) {
if (state.get().link.newTab) {
linkPanelFrontOptions.attr.push({
key: "target",
value: "_blank"
@ -491,7 +491,24 @@ var link = (function() {
return div;
};
var render = function() {
var render = {
width: {
set: function() {
_width();
},
match: function() {
_match();
}
},
link: function() {
_link();
},
items: function() {
_items();
}
};
var _link = function() {
var linkArea = helper.e(".link-area");
var bookmarksToRender = false;
if (state.get().search) {
@ -539,9 +556,28 @@ var link = (function() {
};
};
var _width = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
};
var _match = function() {
helper.setObject({
object: state.get(),
path: "link.area.width",
newValue: state.get().header.area.width
});
render.width.set();
};
var _items = function() {
var html = helper.e("html");
html.style.setProperty("--link-items-width", state.get().link.items.width + "%");
};
var tabIndex = function() {
var allLinkControlItem = helper.eA(".link-control-item");
if (state.get().bookmarks.edit) {
if (state.get().link.edit) {
allLinkControlItem.forEach(function(arrayItem, index) {
arrayItem.tabIndex = 1;
});
@ -560,7 +596,9 @@ var link = (function() {
};
var init = function() {
render();
render.link();
render.width.set();
render.items();
};
// exposed methods

5
js/menu.js
View File

@ -47,7 +47,7 @@ var menu = (function() {
};
var open = function() {
_scrollToTop();
_scrollToTop();
helper.setObject({
object: state.get(),
path: "menu",
@ -64,7 +64,7 @@ var menu = (function() {
newValue: false
});
} else {
_scrollToTop();
_scrollToTop();
helper.setObject({
object: state.get(),
path: "menu",
@ -82,7 +82,6 @@ var menu = (function() {
shade.render({
action: function() {
close();
render();
page.update();
}
});

2
js/modal.js
View File

@ -25,12 +25,12 @@ var modal = (function() {
options = helper.applyOptions(options, override);
};
var _makeModal = function() {
var body = helper.e("body");
helper.setObject({
object: state.get(),
path: "modal",
newValue: true
});
var body = helper.e("body");
var modalWrapper = document.createElement("div");
modalWrapper.setAttribute("class", "modal-wrapper");
var modal = document.createElement("div");

6
js/search.js
View File

@ -7,7 +7,7 @@ var search = (function() {
_toggle(this);
_searchClear();
link.clear();
link.render();
link.render.link();
}, false);
searchClear.addEventListener("click", function() {
_toggle(this);
@ -67,7 +67,7 @@ var search = (function() {
var search = helper.e(".search");
var searchInput = helper.e(".search-input");
var placeholder = "";
if (state.get().bookmarks.link.show) {
if (state.get().link.show) {
placeholder = "Find bookmarks or search";
} else {
placeholder = "Search";
@ -82,7 +82,7 @@ var search = (function() {
searchInput.value = "";
searchInput.focus();
link.clear();
link.render();
link.render.link();
};
var _focus = function() {

12
js/shade.js
View File

@ -13,8 +13,7 @@ var shade = (function() {
var render = function(override) {
var options = {
action: null,
includeHeader: false
action: null
};
if (override) {
options = helper.applyOptions(options, override);
@ -28,13 +27,7 @@ var shade = (function() {
var body = helper.e("body");
var shade = document.createElement("div");
shade.setAttribute("class", "shade");
if (options.includeHeader) {
helper.addClass(shade, "m-shade-top");
};
shade.destroy = function() {
if (options.action) {
options.action();
};
if (shade.classList.contains("is-opaque")) {
helper.removeClass(shade, "is-opaque");
helper.addClass(shade, "is-transparent");
@ -52,6 +45,9 @@ var shade = (function() {
}.bind(shade), false);
shade.addEventListener("click", function() {
this.destroy();
if (options.action) {
options.action();
};
}, false);
previousShade = shade;
body.appendChild(shade);

52
js/state.js
View File

@ -2,6 +2,17 @@ var state = (function() {
var current = {
header: {
area: {
width: 90,
alignment: {
horizontal: "center"
}
},
items: {
alignment: {
horizontal: "left"
}
},
clock: {
hours: {
show: true,
@ -44,7 +55,7 @@ var state = (function() {
ordinal: true
},
year: {
show: true,
show: false,
display: "number"
},
separator: {
@ -83,13 +94,9 @@ var state = (function() {
}
},
text: {
align: "left"
align: "center"
}
},
alignment: {
horizontal: "left",
vertical: "top"
},
editAdd: {
show: true,
},
@ -99,8 +106,8 @@ var state = (function() {
shade: {
show: true,
padding: {
top: 10,
bottom: 10
top: 0,
bottom: 0
},
style: "scroll",
opacity: 0.95,
@ -125,9 +132,18 @@ var state = (function() {
type: "timeanddate"
}
},
bookmarks: {
link: {
show: true
link: {
area: {
width: 90,
alignment: {
horizontal: "center"
}
},
items: {
width: 12,
alignment: {
horizontal: "left"
}
},
name: {
show: true
@ -136,15 +152,20 @@ var state = (function() {
show: true,
style: "dark"
},
show: true,
fit: "best",
newTab: false,
edit: false,
editObject: null,
style: "block",
sort: "none"
},
layout: {
width: 80,
scrollPastEnd: true,
alignment: {
horizontal: "center",
vertical: "center"
},
width: 100,
scrollPastEnd: false,
title: "New Tab"
},
theme: {
@ -152,7 +173,7 @@ var state = (function() {
current: {
r: 0,
g: 130,
b: 200,
b: 250,
},
random: {
active: false,
@ -171,6 +192,7 @@ var state = (function() {
accent: 0
}
},
edge: false,
search: false,
menu: false,
modal: false,

48
js/update.js
View File

@ -319,7 +319,7 @@ var update = (function() {
return data;
};
var _update_3000 = function(data) {
var _update_300 = function(data) {
data.version = "3.0.0";
data.bookmarks.forEach(function(item, index) {
item.display = "letter";
@ -332,6 +332,46 @@ var update = (function() {
return data;
};
var _update_310 = function(data) {
data.version = "3.1.0";
data.state.header.area = {
width: 90,
alignment: {
horizontal: "center"
}
};
data.state.header.items = {
alignment: {
horizontal: "left"
}
};
delete data.state.header.alignment;
data.state.link = data.state.bookmarks;
delete data.state.bookmarks;
data.state.link.area = {
width: 90,
alignment: {
horizontal: "center"
}
};
data.state.link.items = {
width: 12,
alignment: {
horizontal: "left"
}
};
data.state.link.show = data.state.link.link.show;
delete data.state.link.link;
data.state.link.fit = "best";
delete data.state.link.editObject;
data.state.layout.alignment = {
horizontal: "center",
vertical: "center"
};
data.state.edge = false;
return data;
};
// var _update_300 = function(data) {
// data.version = 3.00;
// return data;
@ -424,7 +464,11 @@ var update = (function() {
};
if (version.compare(data.version, "3.0.0") == -1) {
console.log("\t= running update 3.0.0");
data = _update_3000(data);
data = _update_300(data);
};
if (version.compare(data.version, "3.1.0") == -1) {
console.log("\t= running update 3.1.0");
data = _update_310(data);
};
};
// if no update is needed

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added
var current = "3.0.0";
var current = "3.1.0";
var compare = function(a, b) {
var pa = a.split(".");