mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-22 21:20:47 +01:00
[v2] refactor, improvements to UX/UI and new controls
This commit is contained in:
Kombie
GitHub
parent
b6a37a0aa7
commit
301d275016
19
css/base.css
19
css/base.css
@ -23,12 +23,13 @@
|
||||
--gray-20: #fafafa;
|
||||
--root-font-size: 14px;
|
||||
--radius: 2px;
|
||||
--accent: 255, 170, 51;
|
||||
--accent: 0, 255, 0;
|
||||
--line-width: 3px;
|
||||
--background: var(--gray-01);
|
||||
--animation-speed-fast: 0.1s;
|
||||
--animation-speed-medium: 0.2s;
|
||||
--animation-speed-slow: 0.3s;
|
||||
--gutter: 0.5em;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.3s;
|
||||
--animation-speed-slow: 0.4s;
|
||||
--font-regular: "Open Sans Regular", sans-serif;
|
||||
--font-bold: "Open Sans Bold", sans-serif;
|
||||
--font-light: "Open Sans Light", sans-serif;
|
||||
@ -38,7 +39,7 @@
|
||||
--breakpoint-sm: 550px;
|
||||
--breakpoint-md: 700px;
|
||||
--breakpoint-lg: 900px;
|
||||
--breakpoint-xl: 1300px;
|
||||
--breakpoint-xl: 1100px;
|
||||
}
|
||||
|
||||
:root.is-link-block {
|
||||
@ -57,6 +58,7 @@
|
||||
:root {
|
||||
--root-font-size: 16px;
|
||||
}
|
||||
|
||||
:root.is-link-block {
|
||||
--link-height: 9em;
|
||||
}
|
||||
@ -75,11 +77,6 @@ body {
|
||||
background-color: var(--background);
|
||||
color: var(--white);
|
||||
font-size: 1rem;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@ input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: var(--gray-02);
|
||||
padding: 0.25em 1em;
|
||||
padding: 0.125em 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: var(--gray-16);
|
||||
color: var(--gray-12);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
@ -22,7 +22,7 @@ input[type="submit"] {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -85,9 +85,14 @@ button [class*=" icon-"],
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin: 0 0 1em 0;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
@ -99,12 +104,14 @@ button [class*=" icon-"],
|
||||
}
|
||||
|
||||
.button-group button:first-child,
|
||||
.button-group .button:first-child {
|
||||
.button-group .button:first-child,
|
||||
.button-group .button-group-addon:first-child {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.button-group button:last-child,
|
||||
.button-group .button:last-child {
|
||||
.button-group .button:last-child,
|
||||
.button-group .button-group-addon:last-child {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,29 +1,52 @@
|
||||
.clock {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-size: 1.5em;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.clock-seperator,
|
||||
.clock-hours,
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clock-seperator {
|
||||
min-width: 0.5em;
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
|
||||
.clock-hour,
|
||||
.clock-hours,
|
||||
.clock-minutes,
|
||||
.clock-seconds {
|
||||
min-width: 1.75em;
|
||||
display: block;
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
min-width: 1.25em;
|
||||
}
|
||||
|
||||
.clock-hour {
|
||||
.clock [class^="clock-"]:not(:first-child),
|
||||
.clock [class*=" clock-"]:not(:first-child) {
|
||||
margin-left: 0.125em;
|
||||
}
|
||||
|
||||
.clock [class^="clock-"]:not(:last-child),
|
||||
.clock [class*=" clock-"]:not(:last-child) {
|
||||
margin-right: 0.125em;
|
||||
}
|
||||
|
||||
.clock-hours {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@ -34,3 +57,7 @@
|
||||
.clock-seconds {
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
.clock-meridiem {
|
||||
color: var(--gray-10);
|
||||
}
|
||||
|
||||
44
css/container.css
Normal file
44
css/container.css
Normal file
@ -0,0 +1,44 @@
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-layout-fluid .container,
|
||||
.is-layout-wide .container,
|
||||
.is-layout-thin .container {
|
||||
width: calc(100vw - 4em);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.is-layout-wide .container {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.is-layout-thin .container {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.is-layout-wide .container {
|
||||
width: 75vw;
|
||||
}
|
||||
|
||||
.is-layout-thin .container {
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.is-layout-wide .container {
|
||||
width: 70vw;
|
||||
}
|
||||
.is-layout-thin .container {
|
||||
width: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {}
|
||||
256
css/form.css
256
css/form.css
@ -18,10 +18,53 @@ input[type="text"] {
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius);
|
||||
cursor: text;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="email"][disabled],
|
||||
input[type="email"][disabled]:hover,
|
||||
input[type="email"][disabled]:focus,
|
||||
input[type="email"][disabled]::placeholder,
|
||||
input[type="email"][disabled]:hover::placeholder,
|
||||
input[type="email"][disabled]:focus::placeholder,
|
||||
input[type="number"][disabled],
|
||||
input[type="number"][disabled]:hover,
|
||||
input[type="number"][disabled]:focus,
|
||||
input[type="number"][disabled]::placeholder,
|
||||
input[type="number"][disabled]:hover::placeholder,
|
||||
input[type="number"][disabled]:focus::placeholder,
|
||||
input[type="password"][disabled],
|
||||
input[type="password"][disabled]:hover,
|
||||
input[type="password"][disabled]:focus,
|
||||
input[type="password"][disabled]::placeholder,
|
||||
input[type="password"][disabled]:hover::placeholder,
|
||||
input[type="password"][disabled]:focus::placeholder,
|
||||
input[type="search"][disabled],
|
||||
input[type="search"][disabled]:hover,
|
||||
input[type="search"][disabled]:focus,
|
||||
input[type="search"][disabled]::placeholder,
|
||||
input[type="search"][disabled]:hover::placeholder,
|
||||
input[type="search"][disabled]:focus::placeholder,
|
||||
input[type="tel"][disabled],
|
||||
input[type="tel"][disabled]:hover,
|
||||
input[type="tel"][disabled]:focus,
|
||||
input[type="tel"][disabled]::placeholder,
|
||||
input[type="tel"][disabled]:hover::placeholder,
|
||||
input[type="tel"][disabled]:focus::placeholder,
|
||||
input[type="text"][disabled],
|
||||
input[type="text"][disabled]:hover,
|
||||
input[type="text"][disabled]:focus,
|
||||
input[type="text"][disabled]::placeholder,
|
||||
input[type="text"][disabled]:hover::placeholder,
|
||||
input[type="text"][disabled]:focus::placeholder {
|
||||
background-color: var(--gray-04);
|
||||
color: var(--gray-08);
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="email"]:hover,
|
||||
input[type="number"]:hover,
|
||||
input[type="password"]:hover,
|
||||
@ -55,7 +98,16 @@ input[type="search"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[type="text"]::placeholder {
|
||||
color: var(--gray-10);
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="email"]:hover::placeholder,
|
||||
input[type="number"]:hover::placeholder,
|
||||
input[type="password"]:hover::placeholder,
|
||||
input[type="search"]:hover::placeholder,
|
||||
input[type="tel"]:hover::placeholder,
|
||||
input[type="text"]:hover::placeholder {
|
||||
color: var(--gray-12);
|
||||
}
|
||||
|
||||
input[type="email"]:focus::placeholder,
|
||||
@ -68,14 +120,24 @@ input[type="text"]:focus::placeholder {
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--gray-18);
|
||||
padding: 0.5em 0;
|
||||
color: var(--gray-16);
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label[disabled] {
|
||||
color: var(--gray-04);
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
border: 0;
|
||||
height: 2.5em;
|
||||
opacity: 0;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
@ -92,3 +154,185 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type="color"]+.label-button-color {
|
||||
padding-right: 2.25em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="color"]+.label-button-color:before {
|
||||
background-color: rgb(var(--accent));
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 0.5em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
|
||||
}
|
||||
|
||||
.input-wrap,
|
||||
.checkbox-wrap,
|
||||
.radio-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input-indent-1.input-wrap,
|
||||
.form-input-indent-1.checkbox-wrap,
|
||||
.form-input-indent-1.radio-wrap {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.form-input-indent-2.input-wrap,
|
||||
.form-input-indent-2.checkbox-wrap,
|
||||
.form-input-indent-2.radio-wrap {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.form-input-indent-3.input-wrap,
|
||||
.form-input-indent-3.checkbox-wrap,
|
||||
.form-input-indent-3.radio-wrap {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
color: var(--gray-12);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
/* transition: all var(--animation-speed-fast) ease-in-out; */
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon,
|
||||
input[type="radio"]+label .label-icon {
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus+label,
|
||||
input[type="checkbox"]:hover+label,
|
||||
input[type="radio"]:focus+label,
|
||||
input[type="radio"]:hover+label {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label,
|
||||
input[type="radio"]:active+label {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus+label .label-icon,
|
||||
input[type="checkbox"]:hover+label .label-icon,
|
||||
input[type="radio"]:focus+label .label-icon,
|
||||
input[type="radio"]:hover+label .label-icon {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-icon,
|
||||
input[type="radio"]:active+label .label-icon {
|
||||
color: rgb(var(--accent));
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label,
|
||||
input[type="radio"]:checked+label {
|
||||
color: var(--gray-16);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not([disabled]):hover:checked+label,
|
||||
input[type="checkbox"]:not([disabled]):focus:checked+label,
|
||||
input[type="radio"]:not([disabled]):hover:checked+label,
|
||||
input[type="radio"]:not([disabled]):focus:checked+label {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-icon,
|
||||
input[type="radio"]:checked+label .label-icon {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked:focus+label .label-icon,
|
||||
input[type="radio"]:checked:focus+label .label-icon {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+.button-checkbox,
|
||||
input[type="radio"]+.button-checkbox {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+.button-checkbox,
|
||||
input[type="radio"]:checked+.button-checkbox {
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label,
|
||||
input[type="radio"][disabled]+label {
|
||||
color: var(--gray-04);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label .label-icon,
|
||||
input[type="radio"][disabled]+label .label-icon {
|
||||
color: var(--gray-04);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:active+label .label-icon,
|
||||
input[type="radio"][disabled]:active+label .label-icon {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon:before,
|
||||
input[type="radio"]+label .label-icon:before {
|
||||
font-family: "Icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon:before {
|
||||
content: "\e835";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-icon:before {
|
||||
content: "\e834";
|
||||
}
|
||||
|
||||
input[type="radio"]+label .label-icon:before {
|
||||
content: "\e836";
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label .label-icon:before {
|
||||
content: "\e837";
|
||||
}
|
||||
|
||||
88
css/grid.css
88
css/grid.css
@ -1,88 +0,0 @@
|
||||
.grid {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-gap: 0;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.grid-item-head {
|
||||
padding: 2em 2em 1em 2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item-body {
|
||||
padding: 2em 2em 25vh 2em;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(1em, 1fr));
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
|
||||
.grid-item-head,
|
||||
.grid-item-body {
|
||||
padding-left: 8vw;
|
||||
padding-right: 8vw;
|
||||
}
|
||||
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(3, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
||||
.grid-item-head,
|
||||
.grid-item-body {
|
||||
padding-left: 11vw;
|
||||
padding-right: 11vw;
|
||||
}
|
||||
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(4, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) {
|
||||
|
||||
.grid-item-head,
|
||||
.grid-item-body {
|
||||
padding-left: 14vw;
|
||||
padding-right: 14vw;
|
||||
}
|
||||
|
||||
.grid-item-head {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(5, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(6, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(7, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2200px) {
|
||||
.grid-item-body {
|
||||
grid-template-columns: repeat(8, minmax(1em, 1fr));
|
||||
}
|
||||
}
|
||||
55
css/head.css
55
css/head.css
@ -1,22 +1,65 @@
|
||||
.head {
|
||||
--gutter: 0.5em;
|
||||
margin: 0 calc(var(--gutter) * -1);
|
||||
.header {
|
||||
background-color: var(--background);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-area {
|
||||
margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1) calc(var(--gutter) * 2) calc(var(--gutter) * -1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: auto 1fr auto auto auto; */
|
||||
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
|
||||
}
|
||||
|
||||
.head-item {
|
||||
.header-item {
|
||||
margin-left: var(--gutter);
|
||||
margin-right: var(--gutter);
|
||||
margin-bottom: 1em;
|
||||
margin: var(--gutter);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head-search {
|
||||
.is-alignment-left .header-area {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-alignment-center .header-area {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-alignment-right .header-area {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-search-grow .header-search {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 20vw;
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
.header-clock,
|
||||
.header-search,
|
||||
.header-edit-add,
|
||||
.header-accent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-search .header-search,
|
||||
.is-clock .header-clock,
|
||||
.is-search-edit-add .header-edit-add,
|
||||
.is-search-accent .header-accent {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@font-face {
|
||||
font-family: "icons";
|
||||
font-family: "Icons";
|
||||
src: url("../fonts/icons/icons.eot?4e687y");
|
||||
src: url("../fonts/icons/icons.eot?4e687y#iefix") format("embedded-opentype"),
|
||||
url("../fonts/icons/icons.ttf?4e687y") format("truetype"),
|
||||
@ -12,7 +12,7 @@
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: "icons" !important;
|
||||
font-family: "Icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@ -71,6 +71,7 @@
|
||||
.icon-done:before {
|
||||
content: "\e876";
|
||||
}
|
||||
|
||||
.icon-arrow-down:before {
|
||||
content: "\e313";
|
||||
}
|
||||
@ -107,6 +108,10 @@
|
||||
content: "\e15b";
|
||||
}
|
||||
|
||||
.icon-settings:before {
|
||||
content: "\e8b8";
|
||||
}
|
||||
|
||||
.icon-unfold-less:before {
|
||||
content: "\e5d6";
|
||||
}
|
||||
|
||||
@ -1,3 +1,33 @@
|
||||
.link {
|
||||
margin-bottom: 50vh;
|
||||
width: 100vw;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.link-area {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: calc(var(--gutter) * 2);
|
||||
}
|
||||
|
||||
.is-link-block .link-area {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
|
||||
}
|
||||
|
||||
.is-link-list .link-area {
|
||||
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
|
||||
}
|
||||
|
||||
.is-layout-thin.is-link-list .link-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.is-layout-thin.is-link-block .link-area {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.link-item {
|
||||
width: 100%;
|
||||
height: var(--link-height);
|
||||
@ -5,7 +35,7 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-item:focus,
|
||||
@ -28,7 +58,7 @@
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-block .link-panel-front {
|
||||
@ -83,14 +113,15 @@
|
||||
}
|
||||
|
||||
.link-control {
|
||||
margin: 0 0.25em;
|
||||
margin: 0;
|
||||
padding: 0 var(--line-width);
|
||||
height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-control-item {
|
||||
@ -131,7 +162,7 @@
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-block .link-url {
|
||||
@ -188,7 +219,7 @@
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-08);
|
||||
color: var(--gray-12);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
43
css/menu.css
Normal file
43
css/menu.css
Normal file
@ -0,0 +1,43 @@
|
||||
.menu {
|
||||
background-color: var(--gray-02);
|
||||
border-radius: var(--radius);
|
||||
padding: calc(var(--gutter) * 4);
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 1em;
|
||||
width: calc(100% - 2em);
|
||||
max-height: calc(60vh - 2em);
|
||||
overflow-y: scroll;
|
||||
z-index: 3000;
|
||||
display: grid;
|
||||
/* grid-template-columns: repeat(1, minmax(1em, 1fr)); */
|
||||
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
|
||||
transform: translateY(calc(100% + 2em));
|
||||
transition: transform var(--animation-speed-fast) ease-in-out;
|
||||
grid-gap: calc(var(--gutter) * 8);
|
||||
}
|
||||
|
||||
.is-menu-open .menu {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item:not(:first-child):before {
|
||||
/* content: "";
|
||||
border-left: 1px solid var(--gray-04);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2em;
|
||||
width: calc(100% + 1px);
|
||||
height: calc(100% + 1px);
|
||||
pointer-events: none; */
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.menu {
|
||||
max-height: calc(80vh - 2em);
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
perspective: 1000px;
|
||||
transition: opacity var(--animation-speed-slow);
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.is-transition-end .modal-wrapper {
|
||||
transition: all var(--animation-speed-medium);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
left: -1em;
|
||||
width: calc(100% + 2em);
|
||||
height: calc(100% + 2em);
|
||||
opacity: 0.5;
|
||||
opacity: 0;
|
||||
z-index: 1000;
|
||||
transition: opacity var(--animation-speed-slow);
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
@ -1248,7 +1248,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) {
|
||||
@media (min-width: 1100px) {
|
||||
.m-xl-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
39
css/state.css
Normal file
39
css/state.css
Normal file
@ -0,0 +1,39 @@
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.is-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.is-transparent {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.is-opaque {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.is-invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.is-visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.is-scrolll-disabled {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-small {
|
||||
transform: scale(0.5) !important;
|
||||
}
|
||||
|
||||
.is-large {
|
||||
transform: scale(1.5) !important;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
.theme {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-label.button {
|
||||
position: relative;
|
||||
padding-right: 2.25em;
|
||||
}
|
||||
|
||||
.theme-label:before {
|
||||
background-color: rgb(var(--accent));
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 0.5em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
|
||||
}
|
||||
|
||||
.theme-input[type="color"] {
|
||||
opacity: 0;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.theme-input[type="color"]:focus+.theme-label {
|
||||
background-color: var(--gray-03);
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
}
|
||||
@ -11,43 +11,49 @@ h6 {
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-family: var(--font-light);
|
||||
font-family: var(--font-fjalla);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
font-family: var(--font-light);
|
||||
font-size: 1.2em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.1em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
font-family: var(--font-bold);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-bold);
|
||||
color: var(--gray-18);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
font-family: var(--font-bold);
|
||||
color: var(--gray-18);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--black);
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border: 1px solid var(--gray-08);
|
||||
border-top: 1px solid var(--gray-04);
|
||||
border-radius: var(--radius);
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@ -1,39 +1,12 @@
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
.u-list-unstyled {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-inline-block {
|
||||
display: inline-block !important;
|
||||
.u-list-unstyled li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.is-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.is-transparent {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.is-opaque {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.is-invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.is-visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.is-scrolll-disabled {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-small {
|
||||
transform: scale(0.5) !important;
|
||||
}
|
||||
|
||||
.is-large {
|
||||
transform: scale(1.5) !important;
|
||||
.u-list-inline li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Binary file not shown.
16251
fonts/icons/icons.json
Normal file → Executable file
16251
fonts/icons/icons.json
Normal file → Executable file
File diff suppressed because one or more lines are too long
@ -29,5 +29,6 @@
|
||||
<glyph unicode="" glyph-name="radio_button_unchecked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
|
||||
<glyph unicode="" glyph-name="radio_button_checked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM512 640.667c118 0 214-96 214-214s-96-214-214-214-214 96-214 214 96 214 214 214z" />
|
||||
<glyph unicode="" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
|
||||
<glyph unicode="" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
|
||||
<glyph unicode="" glyph-name="indeterminate_check_box" d="M726 384.667v84h-428v-84h428zM810 810.667c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-46 0-86 40-86 86v596c0 46 40 86 86 86h596z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
Binary file not shown.
217
index.html
217
index.html
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="is-link-block">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -10,84 +10,227 @@
|
||||
<link rel="stylesheet" href="css/base.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/theme.css">
|
||||
<link rel="stylesheet" href="css/typography.css">
|
||||
<link rel="stylesheet" href="css/grid.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">
|
||||
<link rel="stylesheet" href="css/shade.css">
|
||||
<link rel="stylesheet" href="css/modal.css">
|
||||
<link rel="stylesheet" href="css/menu.css">
|
||||
<link rel="stylesheet" href="css/head.css">
|
||||
<link rel="stylesheet" href="css/clock.css">
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<link rel="stylesheet" href="css/links.css">
|
||||
<link rel="stylesheet" href="css/link.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="grid-item-head">
|
||||
<div class="head">
|
||||
<div class="head-item mb-3 mb-xl-0">
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header-area">
|
||||
<div class="header-item header-clock">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
<div class="head-item head-search mb-3 mb-xl-0">
|
||||
<form class="search" action="https://www.google.com/search" method="get">
|
||||
<input class="search-input mb-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
|
||||
<div class="header-item header-search">
|
||||
<form class="search" action="" method="get">
|
||||
<input class="search-input mb-0" type="text" placeholder="Find or Search" tabindex="1" name="q" autocomplete="off" tabindex="1">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="button mb-0 ml-3 search-clear" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item button-group mb-3 mb-xl-0">
|
||||
<button class="button mb-0 control-add" tabindex="1">
|
||||
<span class="button-text">Add</span>
|
||||
</button>
|
||||
<button class="button mb-0 control-edit" tabindex="1">
|
||||
<span class="button-text">Edit</span>
|
||||
</button>
|
||||
<div class="header-item header-edit-add">
|
||||
<div class="button-group mb-0">
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-edit" class="button button-checkbox">
|
||||
<div class="button-text">Edit</div>
|
||||
</label>
|
||||
</div>
|
||||
<button class="button control-add" tabindex="1">
|
||||
<span class="button-text">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-item button-group mb-3 mb-xl-0">
|
||||
<button class="button mb-0 control-link-list" tabindex="1">
|
||||
<span class="button-text">List</span>
|
||||
</button>
|
||||
<button class="button mb-0 control-link-blocks" tabindex="1">
|
||||
<span class="button-text">Block</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item mb-3 mb-xl-0">
|
||||
<form class="theme">
|
||||
<input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
|
||||
<label class="button mb-0 theme-label" for="accent-picker">
|
||||
<div class="header-item header-accent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-theme" type="color" class="control-layout-theme" value="#00ff00" tabindex="1">
|
||||
<label for="control-layout-theme" class="button label-button-color mb-0">
|
||||
<span class="button-text">Accent</span>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<button class="button mb-0 control-menu" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid-item-body"></div>
|
||||
<section class="link">
|
||||
<div class="container">
|
||||
<div class="link-area"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<section class="menu">
|
||||
<div class="menu-item">
|
||||
<h1>Header</h1>
|
||||
<h2>Clock</h2>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-clock-active" class="control-header-clock-active" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-1">
|
||||
<input id="control-header-clock-show-seconds" class="control-header-clock-show-seconds" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-seconds"><span class="label-icon"></span>Seconds</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-1">
|
||||
<input id="control-header-clock-show-seperator" class="control-header-clock-show-seperator" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-seperator"><span class="label-icon"></span>Seperators</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-1">
|
||||
<input id="control-header-clock-24" class="control-header-clock-24" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-24"><span class="label-icon"></span>24 Hours</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-2">
|
||||
<input id="control-header-clock-show-leading-zero" class="control-header-clock-show-leading-zero" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-leading-zero"><span class="label-icon"></span>Leading Zero</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-1">
|
||||
<input id="control-header-clock-show-meridiem" class="control-header-clock-show-meridiem" type="checkbox" tabindex="1">
|
||||
<label for="control-header-clock-show-meridiem"><span class="label-icon"></span>AM/PM</label>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Search</h2>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-search-active" class="control-header-search-active" type="checkbox" tabindex="1">
|
||||
<label for="control-header-search-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-input-indent-1">
|
||||
<input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
|
||||
<label for="control-header-search-grow"><span class="label-icon"></span>Fill</label>
|
||||
</div>
|
||||
<h2>Engine</h2>
|
||||
<div class="radio-wrap form-input-indent-1">
|
||||
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" tabindex="1" name="control-header-search-engine" value="google">
|
||||
<label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-input-indent-1">
|
||||
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" tabindex="1" name="control-header-search-engine" value="duckduckgo">
|
||||
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-input-indent-1">
|
||||
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" tabindex="1" name="control-header-search-engine" value="giphy">
|
||||
<label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-input-indent-1">
|
||||
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" tabindex="1" name="control-header-search-engine" value="custom">
|
||||
<label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
|
||||
</div>
|
||||
<div class="input-wrap form-input-indent-1">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off">
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Edit/Add</h2>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-edit-add-active" class="control-header-edit-add-active" type="checkbox" tabindex="1">
|
||||
<label for="control-header-edit-add-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Accent</h2>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-accent-active" class="control-header-accent-active" type="checkbox" tabindex="1">
|
||||
<label for="control-header-accent-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Alignment</h2>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-left" class="control-layout-alignment-left" type="radio" tabindex="1" name="control-layout-alignment" value="left">
|
||||
<label for="control-layout-alignment-left"><span class="label-icon"></span>Left</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-center" class="control-layout-alignment-center" type="radio" tabindex="1" name="control-layout-alignment" value="center">
|
||||
<label for="control-layout-alignment-center"><span class="label-icon"></span>Center</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-right" class="control-layout-alignment-right" type="radio" tabindex="1" name="control-layout-alignment" value="right">
|
||||
<label for="control-layout-alignment-right"><span class="label-icon"></span>Right</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1>Bookmarks</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
|
||||
<label for="control-link-new-tab"><span class="label-icon"></span>Open in new tab</label>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Style</h2>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-style-block" class="control-link-style-block" type="radio" tabindex="1" name="control-link-style" value="block">
|
||||
<label for="control-link-style-block"><span class="label-icon"></span>Block</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-style-list" class="control-link-style-list" type="radio" tabindex="1" name="control-link-style" value="list">
|
||||
<label for="control-link-style-list"><span class="label-icon"></span>List</label>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Sort</h2>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-sort-none" class="control-link-sort-none" type="radio" tabindex="1" name="control-link-sort" value="none">
|
||||
<label for="control-link-sort-none"><span class="label-icon"></span>None (As added)</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-sort-name" class="control-link-sort-name" type="radio" tabindex="1" name="control-link-sort" value="name">
|
||||
<label for="control-link-sort-name"><span class="label-icon"></span>Name</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-sort-letter" class="control-link-sort-letter" type="radio" tabindex="1" name="control-link-sort" value="letter">
|
||||
<label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1>Layout</h1>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-container-fluid" class="control-layout-container-fluid" type="radio" tabindex="1" name="control-layout-container" value="fluid">
|
||||
<label for="control-layout-container-fluid"><span class="label-icon"></span>Fluid</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-container-wide" class="control-layout-container-wide" type="radio" tabindex="1" name="control-layout-container" value="wide">
|
||||
<label for="control-layout-container-wide"><span class="label-icon"></span>Wide</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-container-thin" class="control-layout-container-thin" type="radio" tabindex="1" name="control-layout-container" value="thin">
|
||||
<label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="js/helper.js"></script>
|
||||
<script src="js/control.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
<script src="js/state.js"></script>
|
||||
<script src="js/bookmarks.js"></script>
|
||||
<script src="js/control.js"></script>
|
||||
<script src="js/menu.js"></script>
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/modal.js"></script>
|
||||
<script src="js/shade.js"></script>
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/clock.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
<script src="js/state.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
<script src="js/links.js"></script>
|
||||
<script src="js/link.js"></script>
|
||||
<script src="js/version.js"></script>
|
||||
<script src="js/keyboard.js"></script>
|
||||
<script src="js/init.js"></script>
|
||||
|
||||
</html>
|
||||
|
||||
254
js/bookmarks.js
254
js/bookmarks.js
@ -1,135 +1,217 @@
|
||||
var bookmarks = (function() {
|
||||
|
||||
var all = [{
|
||||
letter: "AN",
|
||||
name: "/r/Android/",
|
||||
url: "https://www.reddit.com/r/Android/"
|
||||
}, {
|
||||
letter: "ANA",
|
||||
name: "Analytics",
|
||||
url: "https://analytics.google.com/"
|
||||
}, {
|
||||
letter: "AS",
|
||||
name: "awesomeSheet",
|
||||
url: "https://zombiefox.github.io/awesomeSheet/"
|
||||
}, {
|
||||
letter: "AZ",
|
||||
name: "Amazon",
|
||||
url: "https://www.amazon.co.uk/"
|
||||
}, {
|
||||
letter: "BX",
|
||||
name: "Box",
|
||||
url: "https://app.box.com/login/"
|
||||
}, {
|
||||
letter: "CAL",
|
||||
name: "Calendar",
|
||||
url: "https://www.google.com/calendar/"
|
||||
}, {
|
||||
letter: "CM",
|
||||
name: "Citymapper",
|
||||
url: "https://citymapper.com/london/superrouter"
|
||||
}, {
|
||||
letter: "CO",
|
||||
name: "Contacts",
|
||||
url: "https://contacts.google.com/"
|
||||
}, {
|
||||
letter: "COS",
|
||||
name: "/r/chromeos/",
|
||||
url: "https://www.reddit.com/r/chromeos/"
|
||||
}, {
|
||||
letter: "DR",
|
||||
name: "Drive",
|
||||
url: "https://drive.google.com/drive/"
|
||||
url: "https://citymapper.com/london/superrouter",
|
||||
timeStamp: 1546453100455
|
||||
}, {
|
||||
letter: "DEV",
|
||||
name: "Devdocs",
|
||||
url: "http://devdocs.io/"
|
||||
url: "http://devdocs.io/",
|
||||
timeStamp: 1546453101749
|
||||
}, {
|
||||
letter: "FB",
|
||||
name: "Facebook",
|
||||
url: "https://www.facebook.com/"
|
||||
}, {
|
||||
letter: "GIT",
|
||||
name: "Github",
|
||||
url: "https://github.com/login"
|
||||
}, {
|
||||
letter: "GM",
|
||||
name: "Gmail",
|
||||
url: "https://mail.google.com/"
|
||||
}, {
|
||||
letter: "GOT",
|
||||
name: "/r/gameofthrones/",
|
||||
url: "https://www.reddit.com/r/gameofthrones/"
|
||||
letter: "OD",
|
||||
name: "r/opendirectories/",
|
||||
url: "https://www.reddit.com/r/opendirectories/",
|
||||
timeStamp: 1546453102199
|
||||
}, {
|
||||
letter: "KP",
|
||||
name: "Keep",
|
||||
url: "https://keep.google.com/"
|
||||
url: "https://keep.google.com/",
|
||||
timeStamp: 1546453102671
|
||||
}, {
|
||||
letter: "MHW",
|
||||
name: "r/monsterhunter/",
|
||||
url: "https://www.reddit.com/r/monsterhunter/",
|
||||
timeStamp: 1546453103110
|
||||
}, {
|
||||
letter: "M",
|
||||
name: "Maps",
|
||||
url: "https://www.google.co.uk/maps"
|
||||
url: "https://www.google.co.uk/maps",
|
||||
timeStamp: 1546453103560
|
||||
}, {
|
||||
letter: "MHW",
|
||||
name: "/r/monsterhunter/",
|
||||
url: "https://www.reddit.com/r/monsterhunter/"
|
||||
letter: "AS",
|
||||
name: "awesomeSheet",
|
||||
url: "https://zombiefox.github.io/awesomeSheet/",
|
||||
timeStamp: 1546453104010
|
||||
}, {
|
||||
letter: "N",
|
||||
name: "Netflix",
|
||||
url: "https://www.netflix.com/"
|
||||
}, {
|
||||
letter: "OD",
|
||||
name: "/r/opendirectories/",
|
||||
url: "https://www.reddit.com/r/opendirectories/"
|
||||
url: "https://www.netflix.com/",
|
||||
timeStamp: 1546453104460
|
||||
}, {
|
||||
letter: "P",
|
||||
name: "Photos",
|
||||
url: "https://photos.google.com/"
|
||||
url: "https://photos.google.com/",
|
||||
timeStamp: 1546453104910
|
||||
}, {
|
||||
letter: "PRG",
|
||||
name: "/r/Pathfinder_RPG/",
|
||||
url: "https://www.reddit.com/r/Pathfinder_RPG/"
|
||||
letter: "FB",
|
||||
name: "Facebook",
|
||||
url: "https://www.facebook.com/",
|
||||
timeStamp: 1546453105349
|
||||
}, {
|
||||
letter: "R",
|
||||
name: "Reddit",
|
||||
url: "https://www.reddit.com/"
|
||||
letter: "GOT",
|
||||
name: "r/gameofthrones/",
|
||||
url: "https://www.reddit.com/r/gameofthrones/",
|
||||
timeStamp: 1546453105844
|
||||
}, {
|
||||
letter: "BX",
|
||||
name: "Box",
|
||||
url: "https://app.box.com/login/",
|
||||
timeStamp: 1546453106272
|
||||
}, {
|
||||
letter: "TFL",
|
||||
name: "TFL Map",
|
||||
url: "http://content.tfl.gov.uk/standard-tube-map.pdf"
|
||||
url: "http://content.tfl.gov.uk/standard-tube-map.pdf",
|
||||
timeStamp: 1546453106734
|
||||
}, {
|
||||
letter: "V",
|
||||
name: "/r/videos/",
|
||||
url: "https://www.reddit.com/r/videos/"
|
||||
letter: "PRG",
|
||||
name: "r/Pathfinder_RPG/",
|
||||
url: "https://www.reddit.com/r/Pathfinder_RPG/",
|
||||
timeStamp: 1546453107194
|
||||
}, {
|
||||
letter: "AZ",
|
||||
name: "Amazon",
|
||||
url: "https://www.amazon.co.uk/",
|
||||
timeStamp: 1546453107633
|
||||
}, {
|
||||
letter: "YT",
|
||||
name: "Youtube",
|
||||
url: "https://www.youtube.com/"
|
||||
url: "https://www.youtube.com/",
|
||||
timeStamp: 1546453108071
|
||||
}, {
|
||||
letter: "CO",
|
||||
name: "Contacts",
|
||||
url: "https://contacts.google.com/",
|
||||
timeStamp: 1546453108501
|
||||
}, {
|
||||
letter: "GIT",
|
||||
name: "Github",
|
||||
url: "https://github.com/login",
|
||||
timeStamp: 1546453108926
|
||||
}, {
|
||||
letter: "AN",
|
||||
name: "r/Android/",
|
||||
url: "https://www.reddit.com/r/Android/",
|
||||
timeStamp: 1546453109355
|
||||
}, {
|
||||
letter: "V",
|
||||
name: "r/videos/",
|
||||
url: "https://www.reddit.com/r/videos/",
|
||||
timeStamp: 1546453109840
|
||||
}, {
|
||||
letter: "GM",
|
||||
name: "Gmail",
|
||||
url: "https://mail.google.com/",
|
||||
timeStamp: 1546453110265
|
||||
}, {
|
||||
letter: "CAL",
|
||||
name: "Calendar",
|
||||
url: "https://www.google.com/calendar/",
|
||||
timeStamp: 1546453110885
|
||||
}, {
|
||||
letter: "R",
|
||||
name: "Reddit",
|
||||
url: "https://www.reddit.com/",
|
||||
timeStamp: 1546453111491
|
||||
}, {
|
||||
letter: "DR",
|
||||
name: "Drive",
|
||||
url: "https://drive.google.com/drive/",
|
||||
timeStamp: 1546453111953
|
||||
}, {
|
||||
letter: "ANA",
|
||||
name: "Analytics",
|
||||
url: "https://analytics.google.com/",
|
||||
timeStamp: 1546453112357
|
||||
}, {
|
||||
letter: "COS",
|
||||
name: "r/chromeos/",
|
||||
url: "https://www.reddit.com/r/chromeos/",
|
||||
timeStamp: 1546453112797
|
||||
}];
|
||||
|
||||
var get = function() {
|
||||
return all;
|
||||
var get = function(timeStamp) {
|
||||
var _singleBookmark = function() {
|
||||
for (var i = 0; i < all.length; i++) {
|
||||
if (all[i].timeStamp === timeStamp) {
|
||||
return all[i];
|
||||
};
|
||||
};
|
||||
};
|
||||
var _allBookmarks = function() {
|
||||
var by = {
|
||||
none: function(array) {
|
||||
return helper.sortObject(array, "timeStamp");
|
||||
},
|
||||
name: function(array) {
|
||||
return helper.sortObject(array, "name");
|
||||
},
|
||||
letter: function(array) {
|
||||
return helper.sortObject(array, "letter");
|
||||
}
|
||||
};
|
||||
return by[state.get().link.sort](all);
|
||||
};
|
||||
if (timeStamp) {
|
||||
return _singleBookmark(timeStamp);
|
||||
} else {
|
||||
return _allBookmarks();
|
||||
};
|
||||
};
|
||||
|
||||
var add = function(object) {
|
||||
all.push(object);
|
||||
var restore = function(data) {
|
||||
if ("bookmarks" in data) {
|
||||
all = data.bookmarks;
|
||||
};
|
||||
};
|
||||
|
||||
var edit = function(object, index) {
|
||||
all[index] = object;
|
||||
var add = function(override) {
|
||||
var options = {
|
||||
letter: null,
|
||||
name: null,
|
||||
url: null,
|
||||
timeStamp: null
|
||||
};
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
var newBookmark = {
|
||||
letter: options.letter,
|
||||
name: options.name,
|
||||
url: options.url,
|
||||
timeStamp: options.timeStamp
|
||||
};
|
||||
all.push(newBookmark);
|
||||
};
|
||||
|
||||
var remove = function(index) {
|
||||
all.splice(index, 1);
|
||||
var edit = function(object, timeStamp) {
|
||||
for (var i = 0; i < all.length; i++) {
|
||||
if (all[i].timeStamp === timeStamp) {
|
||||
all[i] = object;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
var restore = function(array) {
|
||||
if (array) {
|
||||
all = array;
|
||||
var remove = function(timeStamp) {
|
||||
for (var i = 0; i < all.length; i++) {
|
||||
if (all[i].timeStamp === timeStamp) {
|
||||
all.splice(all.indexOf(all[i]), 1);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
if (data.load()) {
|
||||
restore(data.load());
|
||||
};
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
all: all,
|
||||
init: init,
|
||||
get: get,
|
||||
add: add,
|
||||
edit: edit,
|
||||
|
||||
166
js/clock.js
166
js/clock.js
@ -1,58 +1,136 @@
|
||||
var clock = (function() {
|
||||
|
||||
var clear = function() {
|
||||
var clock = helper.e(".clock")
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var time = helper.getDateTime();
|
||||
if (time.minutes < 10) {
|
||||
time.minutes = "0" + time.minutes;
|
||||
};
|
||||
if (time.seconds < 10) {
|
||||
time.seconds = "0" + time.seconds;
|
||||
};
|
||||
// if (time.hours > 12) {
|
||||
// time.hours = time.hours - 12;
|
||||
// };
|
||||
var hour = document.createElement("span");
|
||||
hour.setAttribute("class", "clock-hour");
|
||||
hour.textContent = time.hours;
|
||||
var minutes = document.createElement("span");
|
||||
minutes.setAttribute("class", "clock-minutes");
|
||||
minutes.textContent = time.minutes;
|
||||
var seconds = document.createElement("span");
|
||||
seconds.setAttribute("class", "clock-seconds");
|
||||
seconds.textContent = time.seconds;
|
||||
var seperator1 = document.createElement("span");
|
||||
seperator1.setAttribute("class", "clock-seperator");
|
||||
seperator1.textContent = " : ";
|
||||
var seperator2 = document.createElement("span");
|
||||
seperator2.setAttribute("class", "clock-seperator");
|
||||
seperator2.textContent = " : ";
|
||||
var clock = helper.e(".clock");
|
||||
clock.appendChild(hour);
|
||||
clock.appendChild(seperator1);
|
||||
clock.appendChild(minutes);
|
||||
clock.appendChild(seperator2);
|
||||
clock.appendChild(seconds);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
clear();
|
||||
render();
|
||||
var bind = function() {
|
||||
window.setInterval(function() {
|
||||
clear();
|
||||
render();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
var clock = helper.e(".clock");
|
||||
while (clock.lastChild) {
|
||||
clock.removeChild(clock.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
var _makeTimeObject = function() {
|
||||
var time = helper.getDateTime();
|
||||
time.meridiem = "AM";
|
||||
if (state.get().header.clock.hour24) {
|
||||
if (time.hours < 10 && state.get().header.clock.show.leadingZero) {
|
||||
time.hours = "0" + time.hours;
|
||||
};
|
||||
} else {
|
||||
if (time.hours > 12) {
|
||||
time.meridiem = "PM";
|
||||
time.hours = time.hours - 12;
|
||||
};
|
||||
if (time.hours == 0) {
|
||||
time.hours = 12;
|
||||
};
|
||||
};
|
||||
if (time.minutes < 10) {
|
||||
time.minutes = "0" + time.minutes;
|
||||
};
|
||||
if (time.seconds < 10) {
|
||||
time.seconds = "0" + time.seconds;
|
||||
};
|
||||
return time;
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var _clock = function() {
|
||||
var clock = helper.e(".clock");
|
||||
var time = _makeTimeObject();
|
||||
var hours = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.hours,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-hours"
|
||||
}]
|
||||
});
|
||||
var minutes = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.minutes,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-minutes"
|
||||
}]
|
||||
});
|
||||
var seconds = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.seconds,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-seconds"
|
||||
}]
|
||||
});
|
||||
var meridiem = helper.makeNode({
|
||||
tag: "span",
|
||||
text: time.meridiem,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-item clock-meridiem"
|
||||
}]
|
||||
});
|
||||
var seperator1 = helper.makeNode({
|
||||
tag: "span",
|
||||
text: ":",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-seperator"
|
||||
}]
|
||||
});
|
||||
var seperator2 = helper.makeNode({
|
||||
tag: "span",
|
||||
text: ":",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-seperator"
|
||||
}]
|
||||
});
|
||||
var seperator3 = helper.makeNode({
|
||||
tag: "span",
|
||||
text: ":",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "clock-seperator"
|
||||
}]
|
||||
});
|
||||
clock.appendChild(hours);
|
||||
if (state.get().header.clock.show.seperator) {
|
||||
clock.appendChild(seperator1);
|
||||
};
|
||||
clock.appendChild(minutes);
|
||||
if (state.get().header.clock.show.seconds) {
|
||||
if (state.get().header.clock.show.seperator) {
|
||||
clock.appendChild(seperator2);
|
||||
};
|
||||
clock.appendChild(seconds);
|
||||
};
|
||||
if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
|
||||
if (state.get().header.clock.show.seperator) {
|
||||
clock.appendChild(seperator3);
|
||||
};
|
||||
clock.appendChild(meridiem);
|
||||
};
|
||||
};
|
||||
if (state.get().header.clock.active) {
|
||||
_clock();
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render();
|
||||
bind();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
bind: bind,
|
||||
render: render,
|
||||
clear: clear
|
||||
};
|
||||
|
||||
436
js/control.js
436
js/control.js
@ -1,113 +1,383 @@
|
||||
var control = (function() {
|
||||
|
||||
var state = {
|
||||
edit: false,
|
||||
style: {
|
||||
block: true,
|
||||
list: false
|
||||
}
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
return state;
|
||||
};
|
||||
|
||||
var bind = function() {
|
||||
var controlAdd = helper.e(".control-add");
|
||||
var controlEdit = helper.e(".control-edit");
|
||||
var controlLinkBlock = helper.e(".control-link-blocks");
|
||||
var controlLinkList = helper.e(".control-link-list");
|
||||
controlAdd.addEventListener("click", function() {
|
||||
links.add();
|
||||
}, false);
|
||||
controlEdit.addEventListener("click", function() {
|
||||
_toggleEdit();
|
||||
render();
|
||||
links.tabIndex();
|
||||
data.save();
|
||||
}, false);
|
||||
controlLinkBlock.addEventListener("click", function() {
|
||||
_toggleListStyle("block");
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
controlLinkList.addEventListener("click", function() {
|
||||
_toggleListStyle("list");
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
};
|
||||
|
||||
var _toggleEdit = function() {
|
||||
if (state.edit) {
|
||||
state.edit = false;
|
||||
} else {
|
||||
state.edit = true;
|
||||
var toggle = function(override) {
|
||||
var options = {
|
||||
path: null,
|
||||
value: null
|
||||
};
|
||||
};
|
||||
|
||||
var _toggleListStyle = function(style) {
|
||||
var action = {
|
||||
block: function() {
|
||||
state.style.block = true;
|
||||
state.style.list = false;
|
||||
},
|
||||
list: function() {
|
||||
state.style.block = false;
|
||||
state.style.list = true;
|
||||
}
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
if (options.path != null) {
|
||||
helper.setObject({
|
||||
path: options.path,
|
||||
object: state.get(),
|
||||
newValue: options.value
|
||||
});
|
||||
console.log(state.get());
|
||||
};
|
||||
action[style]();
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var controlEdit = helper.e(".control-edit");
|
||||
var controlLinkBlock = helper.e(".control-link-blocks");
|
||||
var controlLinkList = helper.e(".control-link-list");
|
||||
var _renderEdit = function() {
|
||||
if (state.edit) {
|
||||
var _edit = function() {
|
||||
if (state.get().edit.active) {
|
||||
helper.addClass(html, "is-edit");
|
||||
helper.addClass(controlEdit, "active");
|
||||
} else {
|
||||
helper.removeClass(html, "is-edit");
|
||||
helper.removeClass(controlEdit, "active");
|
||||
};
|
||||
};
|
||||
var _renderStyle = function() {
|
||||
if (state.style.block) {
|
||||
helper.addClass(html, "is-link-block");
|
||||
helper.removeClass(html, "is-link-list");
|
||||
helper.addClass(controlLinkBlock, "active");
|
||||
helper.removeClass(controlLinkList, "active");
|
||||
} else if (state.style.list) {
|
||||
helper.removeClass(html, "is-link-block");
|
||||
helper.addClass(html, "is-link-list");
|
||||
helper.removeClass(controlLinkBlock, "active");
|
||||
helper.addClass(controlLinkList, "active");
|
||||
var _clock = function() {
|
||||
if (state.get().header.clock.active) {
|
||||
helper.addClass(html, "is-clock");
|
||||
} else {
|
||||
helper.removeClass(html, "is-clock");
|
||||
};
|
||||
};
|
||||
_renderEdit();
|
||||
_renderStyle();
|
||||
var _search = function() {
|
||||
if (state.get().header.search.active) {
|
||||
helper.addClass(html, "is-search");
|
||||
} else {
|
||||
helper.removeClass(html, "is-search");
|
||||
};
|
||||
if (state.get().header.search.grow) {
|
||||
helper.addClass(html, "is-search-grow");
|
||||
} else {
|
||||
helper.removeClass(html, "is-search-grow");
|
||||
};
|
||||
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
|
||||
};
|
||||
var _alignment = function() {
|
||||
helper.removeClass(html, "is-alignment-left");
|
||||
helper.removeClass(html, "is-alignment-center");
|
||||
helper.removeClass(html, "is-alignment-right");
|
||||
helper.addClass(html, "is-alignment-" + state.get().layout.alignment);
|
||||
};
|
||||
var _link = function() {
|
||||
var view = {
|
||||
block: function() {
|
||||
helper.addClass(html, "is-link-block");
|
||||
helper.removeClass(html, "is-link-list");
|
||||
},
|
||||
list: function() {
|
||||
helper.removeClass(html, "is-link-block");
|
||||
helper.addClass(html, "is-link-list");
|
||||
}
|
||||
};
|
||||
view[state.get().link.style]();
|
||||
};
|
||||
var _layout = function() {
|
||||
helper.removeClass(html, "is-layout-fludi");
|
||||
helper.removeClass(html, "is-layout-wide");
|
||||
helper.removeClass(html, "is-layout-thin");
|
||||
helper.addClass(html, "is-layout-" + state.get().layout.container);
|
||||
};
|
||||
var _editAdd = function() {
|
||||
if (state.get().header.editAdd.active) {
|
||||
helper.addClass(html, "is-search-edit-add");
|
||||
} else {
|
||||
helper.removeClass(html, "is-search-edit-add");
|
||||
};
|
||||
};
|
||||
var _accent = function() {
|
||||
if (state.get().header.accent.active) {
|
||||
helper.addClass(html, "is-search-accent");
|
||||
} else {
|
||||
helper.removeClass(html, "is-search-accent");
|
||||
};
|
||||
};
|
||||
_alignment();
|
||||
_edit();
|
||||
_clock();
|
||||
_search();
|
||||
_editAdd();
|
||||
_accent();
|
||||
_link();
|
||||
_layout();
|
||||
};
|
||||
|
||||
var restore = function(object) {
|
||||
if (object) {
|
||||
state = object;
|
||||
render();
|
||||
var _dependents = function(options) {
|
||||
var _clock = function() {
|
||||
if (state.get().header.clock.active) {
|
||||
helper.e(".control-header-clock-show-seconds").disabled = false;
|
||||
helper.e(".control-header-clock-show-seperator").disabled = false;
|
||||
helper.e(".control-header-clock-24").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-show-seconds").disabled = true;
|
||||
helper.e(".control-header-clock-show-seperator").disabled = true;
|
||||
helper.e(".control-header-clock-24").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.active && state.get().header.clock.hour24) {
|
||||
helper.e(".control-header-clock-show-leading-zero").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-show-leading-zero").disabled = true;
|
||||
};
|
||||
if (state.get().header.clock.active && !state.get().header.clock.hour24) {
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-clock-show-meridiem").disabled = true;
|
||||
};
|
||||
};
|
||||
var _search = function() {
|
||||
if (state.get().header.search.active) {
|
||||
helper.e(".control-header-search-grow").disabled = false;
|
||||
helper.e(".control-header-search-engine-google").disabled = false;
|
||||
helper.e(".control-header-search-engine-duckduckgo").disabled = false;
|
||||
helper.e(".control-header-search-engine-giphy").disabled = false;
|
||||
helper.e(".control-header-search-engine-custom").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-search-grow").disabled = true;
|
||||
helper.e(".control-header-search-engine-google").disabled = true;
|
||||
helper.e(".control-header-search-engine-duckduckgo").disabled = true;
|
||||
helper.e(".control-header-search-engine-giphy").disabled = true;
|
||||
helper.e(".control-header-search-engine-custom").disabled = true;
|
||||
};
|
||||
if (state.get().header.search.active && state.get().header.search.engine.selected === "custom") {
|
||||
helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-engine-custom-url").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-engine-custom-url").disabled = true;
|
||||
};
|
||||
};
|
||||
_clock();
|
||||
_search();
|
||||
};
|
||||
|
||||
var _bind = function() {
|
||||
helper.e(".control-menu").addEventListener("click", function() {
|
||||
menu.toggle();
|
||||
}, false);
|
||||
|
||||
helper.e(".control-add").addEventListener("click", function() {
|
||||
link.add();
|
||||
}, false);
|
||||
|
||||
helper.e(".control-edit").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
|
||||
helper.e(".control-layout-theme").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "layout.theme",
|
||||
value: helper.hexToRgb(this.value)
|
||||
});
|
||||
theme.render();
|
||||
data.save();
|
||||
});
|
||||
helper.e(".control-link-new-tab").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.newTab",
|
||||
value: this.checked
|
||||
});
|
||||
link.clear();
|
||||
link.render();
|
||||
data.save();
|
||||
});
|
||||
helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.style",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
|
||||
helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.sort",
|
||||
value: this.value
|
||||
});
|
||||
link.clear();
|
||||
link.render();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
helper.e(".control-header-search-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.search.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
_dependents();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-search-grow").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.search.grow",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
_dependents();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.eA("input[name='control-header-search-engine']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.search.engine.selected",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
_dependents();
|
||||
search.update();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
helper.e(".control-header-search-engine-custom-url").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "header.search.engine.custom.url",
|
||||
value: this.value
|
||||
});
|
||||
search.update();
|
||||
data.save();
|
||||
});
|
||||
helper.e(".control-header-clock-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
_dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-clock-show-seconds").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.show.seconds",
|
||||
value: this.checked
|
||||
});
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-clock-show-seperator").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.show.seperator",
|
||||
value: this.checked
|
||||
});
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-clock-24").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.hour24",
|
||||
value: this.checked
|
||||
});
|
||||
_dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-clock-show-leading-zero").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.show.leadingZero",
|
||||
value: this.checked
|
||||
});
|
||||
_dependents();
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-clock-show-meridiem").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.clock.show.meridiem",
|
||||
value: this.checked
|
||||
});
|
||||
clock.clear();
|
||||
clock.render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-edit-add-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.editAdd.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-header-accent-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "header.accent.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.eA("input[name='control-layout-alignment']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "layout.alignment",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
helper.eA("input[name='control-layout-container']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "layout.container",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
};
|
||||
|
||||
var update = function() {
|
||||
helper.e(".control-edit").checked = state.get().edit.active;
|
||||
helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme);
|
||||
helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
|
||||
helper.e(".control-link-style-" + state.get().link.style).checked = true;
|
||||
helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
|
||||
helper.e(".control-header-search-active").checked = state.get().header.search.active;
|
||||
helper.e(".control-header-search-grow").checked = state.get().header.search.grow;
|
||||
helper.e(".control-header-search-engine-" + state.get().header.search.engine.selected).checked = true;
|
||||
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
|
||||
helper.e(".control-header-clock-active").checked = state.get().header.clock.active;
|
||||
helper.e(".control-header-clock-show-seconds").checked = state.get().header.clock.show.seconds;
|
||||
helper.e(".control-header-clock-show-seperator").checked = state.get().header.clock.show.seperator;
|
||||
helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24;
|
||||
helper.e(".control-header-clock-show-leading-zero").checked = state.get().header.clock.show.leadingZero;
|
||||
helper.e(".control-header-clock-show-meridiem").checked = state.get().header.clock.show.meridiem;
|
||||
helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
|
||||
helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
|
||||
helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
|
||||
helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
_bind();
|
||||
update();
|
||||
_dependents();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
get: get,
|
||||
restore: restore,
|
||||
update: update,
|
||||
render: render
|
||||
};
|
||||
|
||||
|
||||
26
js/data.js
26
js/data.js
@ -15,40 +15,30 @@ var data = (function() {
|
||||
};
|
||||
|
||||
var save = function() {
|
||||
set(saveName, JSON.stringify(state.get()));
|
||||
var data = {
|
||||
state: state.get(),
|
||||
bookmarks: bookmarks.get()
|
||||
};
|
||||
set(saveName, JSON.stringify(data));
|
||||
console.log("data saved");
|
||||
};
|
||||
|
||||
var restore = function() {
|
||||
var load = function() {
|
||||
var data = JSON.parse(get(saveName));
|
||||
if (data) {
|
||||
bookmarks.restore(data.bookmarks);
|
||||
theme.restore(data.theme);
|
||||
control.restore(data.control);
|
||||
console.log("data restored");
|
||||
};
|
||||
return data;
|
||||
};
|
||||
|
||||
var wipe = function() {
|
||||
clear(saveName);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
if (get(saveName)) {
|
||||
restore();
|
||||
} else {
|
||||
save();
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
init: init,
|
||||
save: save,
|
||||
clear: clear,
|
||||
set: set,
|
||||
get: get,
|
||||
wipe: wipe,
|
||||
restore: restore
|
||||
load: load
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
29
js/header.js
Normal file
29
js/header.js
Normal file
@ -0,0 +1,29 @@
|
||||
var header = (function() {
|
||||
|
||||
var _bind = function() {
|
||||
window.addEventListener("resize", function(event) {
|
||||
render();
|
||||
}, false);
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var header = helper.e(".header");
|
||||
var link = helper.e(".link");
|
||||
var height = parseInt(getComputedStyle(header).height, 10);
|
||||
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
link.style.marginTop = (height + fontSize) + "px";
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
_bind();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
render: render
|
||||
};
|
||||
|
||||
})();
|
||||
222
js/helper.js
222
js/helper.js
@ -1,27 +1,27 @@
|
||||
var helper = (function() {
|
||||
|
||||
// methods on this object
|
||||
function e(selector) {
|
||||
var e = function(selector) {
|
||||
return document.querySelector(selector);
|
||||
};
|
||||
|
||||
function eA(selector) {
|
||||
var eA = function(selector) {
|
||||
return document.querySelectorAll(selector);
|
||||
};
|
||||
|
||||
function toggleClass(element, theClassName) {
|
||||
var toggleClass = function(element, theClassName) {
|
||||
element.classList.toggle(theClassName);
|
||||
};
|
||||
|
||||
function addClass(element, theClassName) {
|
||||
var addClass = function(element, theClassName) {
|
||||
element.classList.add(theClassName);
|
||||
};
|
||||
|
||||
function removeClass(element, theClassName) {
|
||||
var removeClass = function(element, theClassName) {
|
||||
element.classList.remove(theClassName);
|
||||
};
|
||||
|
||||
function getDateTime() {
|
||||
var getDateTime = function() {
|
||||
var dateStamp = new Date();
|
||||
var object = {
|
||||
// string: dateStamp.constructor(),
|
||||
@ -40,8 +40,14 @@ var helper = (function() {
|
||||
|
||||
var sortObject = function(object, key) {
|
||||
object.sort(function(a, b) {
|
||||
var textA = a[key].toLowerCase();
|
||||
var textB = b[key].toLowerCase();
|
||||
var textA = a[key];
|
||||
if (typeof textA == "string") {
|
||||
textA = textA.toLowerCase();
|
||||
};
|
||||
var textB = b[key];
|
||||
if (typeof textB == "string") {
|
||||
textB = textB.toLowerCase();
|
||||
};
|
||||
if (textA < textB) {
|
||||
return -1;
|
||||
} else if (textA > textB) {
|
||||
@ -53,7 +59,7 @@ var helper = (function() {
|
||||
return object;
|
||||
};
|
||||
|
||||
function applyOptions(defaultOptions, options) {
|
||||
var applyOptions = function(defaultOptions, options) {
|
||||
if (defaultOptions && options) {
|
||||
if (options) {
|
||||
for (var key in options) {
|
||||
@ -68,7 +74,7 @@ var helper = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var hexToRgb = function(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
result = {
|
||||
@ -82,7 +88,7 @@ var helper = (function() {
|
||||
return result;
|
||||
};
|
||||
|
||||
function rgbToHex(rgbObject) {
|
||||
var rgbToHex = function(rgbObject) {
|
||||
var componentToHex = function(hexPart) {
|
||||
hexPart = hexPart.toString(16);
|
||||
if (hexPart.length == 1) {
|
||||
@ -94,6 +100,193 @@ var helper = (function() {
|
||||
return result;
|
||||
};
|
||||
|
||||
var makeNode = function(override) {
|
||||
var options = {
|
||||
tag: null,
|
||||
classes: null,
|
||||
text: null,
|
||||
url: null,
|
||||
index: null,
|
||||
attr: null
|
||||
};
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
var element = document.createElement(options.tag);
|
||||
if (options.text != null) {
|
||||
element.textContent = options.text;
|
||||
};
|
||||
if (options.attr != null) {
|
||||
options.attr.forEach(function(arrayItem, index) {
|
||||
if ("key" in arrayItem && "value" in arrayItem) {
|
||||
element.setAttribute(arrayItem.key, arrayItem.value);
|
||||
} else if ("key" in arrayItem) {
|
||||
element.setAttribute(arrayItem.key, "");
|
||||
}
|
||||
});
|
||||
};
|
||||
return element;
|
||||
};
|
||||
|
||||
function _makeAddress(path) {
|
||||
var array;
|
||||
if (path.indexOf("[") != -1 && path.indexOf("]") != -1) {
|
||||
array = path.split(".").join(",").split("[").join(",").split("]").join(",").split(",");
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (array[i] == "") {
|
||||
array.splice(i, 1);
|
||||
};
|
||||
if (!isNaN(parseInt(array[i], 10))) {
|
||||
array[i] = parseInt(array[i], 10);
|
||||
};
|
||||
};
|
||||
} else {
|
||||
array = path.split(".");
|
||||
};
|
||||
return array;
|
||||
};
|
||||
|
||||
function setObject(options) {
|
||||
var defaultOptions = {
|
||||
path: null,
|
||||
object: null,
|
||||
newValue: null
|
||||
};
|
||||
if (options) {
|
||||
var defaultOptions = applyOptions(defaultOptions, options);
|
||||
};
|
||||
var address = _makeAddress(defaultOptions.path);
|
||||
var _setData = function() {
|
||||
while (address.length > 1) {
|
||||
// shift off and store the first key
|
||||
var currentKey = address.shift();
|
||||
// if the key is not found make a new object
|
||||
if (!(currentKey in defaultOptions.object)) {
|
||||
// make an empty object in the current object level
|
||||
if (isNaN(currentKey)) {
|
||||
defaultOptions.object[currentKey] = {};
|
||||
} else {
|
||||
defaultOptions.object[currentKey] = [];
|
||||
};
|
||||
};
|
||||
// drill down the object with the first key
|
||||
defaultOptions.object = defaultOptions.object[currentKey];
|
||||
};
|
||||
var finalKey = address.shift();
|
||||
defaultOptions.object[finalKey] = defaultOptions.newValue;
|
||||
};
|
||||
if (defaultOptions.object != null && defaultOptions.path != null && defaultOptions.newValue != null) {
|
||||
_setData();
|
||||
} else {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
function getObject(options) {
|
||||
var defaultOptions = {
|
||||
object: null,
|
||||
path: null
|
||||
};
|
||||
if (options) {
|
||||
var defaultOptions = applyOptions(defaultOptions, options);
|
||||
};
|
||||
var address = _makeAddress(defaultOptions.path);
|
||||
var _getData = function() {
|
||||
while (address.length > 1) {
|
||||
// shift off and store the first key
|
||||
var currentKey = address.shift();
|
||||
// if the key is not found make a new object
|
||||
if (!(currentKey in defaultOptions.object)) {
|
||||
// make an empty object in the current object level
|
||||
if (isNaN(currentKey)) {
|
||||
defaultOptions.object[currentKey] = {};
|
||||
} else {
|
||||
defaultOptions.object[currentKey] = [];
|
||||
};
|
||||
};
|
||||
// drill down the object with the first key
|
||||
defaultOptions.object = defaultOptions.object[currentKey];
|
||||
};
|
||||
var finalKey = address.shift();
|
||||
if (!(finalKey in defaultOptions.object)) {
|
||||
return "";
|
||||
} else {
|
||||
return defaultOptions.object[finalKey];
|
||||
};
|
||||
};
|
||||
if (defaultOptions.object != null && defaultOptions.path != null) {
|
||||
return _getData();
|
||||
} else {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
function makeObject(string) {
|
||||
var _stringOrBooleanOrNumber = function(stringToTest) {
|
||||
console.log(stringToTest);
|
||||
if (stringToTest == "true") {
|
||||
return true;
|
||||
} else if (stringToTest == "false") {
|
||||
return false;
|
||||
} else if (stringToTest.indexOf("#") != -1) {
|
||||
return stringToTest.substr(1, kevValuePair[1].length);
|
||||
} else {
|
||||
return "\"" + stringToTest + "\"";
|
||||
};
|
||||
};
|
||||
// if argument is a string
|
||||
if (typeof string == "string") {
|
||||
// start building the object
|
||||
var objectString = "{";
|
||||
// split the string on comma not followed by a space
|
||||
// split on character if not followed by a space
|
||||
var items = string.split(/,(?=\S)/);
|
||||
// loop over each item
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
// split each would be object key values pair
|
||||
// split on character if not followed by a space
|
||||
var kevValuePair = items[i].split(/:(?=\S)/);
|
||||
// get the key
|
||||
var key = "\"" + kevValuePair[0] + "\"";
|
||||
var value;
|
||||
// if the value has + with a space after it
|
||||
if (/\+(?=\S)/.test(kevValuePair[1])) {
|
||||
// remove first + symbol
|
||||
kevValuePair[1] = kevValuePair[1].substr(1, kevValuePair[1].length);
|
||||
// split the would be values
|
||||
// split on character if not followed by a space
|
||||
var all_value = kevValuePair[1].split(/\+(?=\S)/);
|
||||
// if there are multiple values make an array
|
||||
value = "["
|
||||
for (var q = 0; q < all_value.length; q++) {
|
||||
value += _stringOrBooleanOrNumber(all_value[q]) + ",";
|
||||
};
|
||||
// remove last comma
|
||||
value = value.substr(0, value.length - 1);
|
||||
// close array
|
||||
value += "]"
|
||||
} else {
|
||||
value = _stringOrBooleanOrNumber(kevValuePair[1]);
|
||||
};
|
||||
objectString += key + ":" + value + ",";
|
||||
};
|
||||
// remove last comma
|
||||
objectString = objectString.substr(0, objectString.length - 1);
|
||||
// close object
|
||||
objectString += "}";
|
||||
var object = JSON.parse(objectString);
|
||||
return object;
|
||||
} else {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
var allEqual = function(array) {
|
||||
return array.every(function(arrayItem) {
|
||||
return arrayItem === array[0];
|
||||
});
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
e: e,
|
||||
@ -101,11 +294,16 @@ var helper = (function() {
|
||||
toggleClass: toggleClass,
|
||||
addClass: addClass,
|
||||
removeClass: removeClass,
|
||||
allEqual: allEqual,
|
||||
getDateTime: getDateTime,
|
||||
sortObject: sortObject,
|
||||
applyOptions: applyOptions,
|
||||
hexToRgb: hexToRgb,
|
||||
rgbToHex: rgbToHex
|
||||
rgbToHex: rgbToHex,
|
||||
makeNode: makeNode,
|
||||
setObject: setObject,
|
||||
getObject: getObject,
|
||||
makeObject: makeObject
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
39
js/init.js
39
js/init.js
@ -1,11 +1,38 @@
|
||||
// log version
|
||||
console.log("nightTab v", version.get(), "loaded");
|
||||
// look for and restore data
|
||||
data.init();
|
||||
// render theme
|
||||
|
||||
// bind and update controls
|
||||
// render states
|
||||
state.init();
|
||||
|
||||
// close menu if left open
|
||||
menu.init();
|
||||
|
||||
// restore bookmarks
|
||||
bookmarks.init();
|
||||
|
||||
// render input color value
|
||||
// render css accent var
|
||||
theme.init();
|
||||
// render links
|
||||
links.init();
|
||||
// other init
|
||||
|
||||
// render links from bookmarks
|
||||
link.init();
|
||||
|
||||
// bind controls
|
||||
// render checkboxes and radios
|
||||
// render states
|
||||
control.init();
|
||||
|
||||
// bind search box
|
||||
// render search engine
|
||||
search.init();
|
||||
|
||||
// render clock
|
||||
// bind clock update
|
||||
clock.init();
|
||||
|
||||
// bind keyboard keys
|
||||
keyboard.init();
|
||||
|
||||
// render header height padding
|
||||
header.init();
|
||||
|
||||
62
js/keyboard.js
Normal file
62
js/keyboard.js
Normal file
@ -0,0 +1,62 @@
|
||||
var keyboard = (function() {
|
||||
|
||||
var _bind = function() {
|
||||
window.addEventListener("keydown", function(event) {
|
||||
// esc
|
||||
if (event.keyCode == 27) {
|
||||
if (state.get().menu.active) {
|
||||
menu.close();
|
||||
shade.destroy();
|
||||
} else if (state.get().modal.active) {
|
||||
modal.destroy();
|
||||
shade.destroy();
|
||||
} else if (state.get().edit.active) {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: false
|
||||
});
|
||||
control.update();
|
||||
control.render();
|
||||
};
|
||||
data.save();
|
||||
};
|
||||
// ctrl+alt+a
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 65) {
|
||||
menu.close();
|
||||
link.add();
|
||||
};
|
||||
// ctrl+alt+m
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 77) {
|
||||
shade.destroy();
|
||||
modal.destroy();
|
||||
menu.toggle();
|
||||
};
|
||||
// ctrl+alt+e
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 69) {
|
||||
if (state.get().edit.active) {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: false
|
||||
});
|
||||
} else {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: true
|
||||
});
|
||||
};
|
||||
control.update();
|
||||
control.render();
|
||||
data.save();
|
||||
};
|
||||
}, false);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
_bind();
|
||||
};
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
|
||||
})();
|
||||
@ -1,8 +1,4 @@
|
||||
var links = (function() {
|
||||
|
||||
var currentEditIndex = null;
|
||||
|
||||
var currentAction = null;
|
||||
var link = (function() {
|
||||
|
||||
var _bind = function(override) {
|
||||
var options = {
|
||||
@ -11,7 +7,7 @@ var links = (function() {
|
||||
};
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
}
|
||||
};
|
||||
var action = {
|
||||
edit: function() {
|
||||
options.element.addEventListener("click", function() {
|
||||
@ -30,7 +26,7 @@ var links = (function() {
|
||||
};
|
||||
|
||||
var add = function() {
|
||||
currentAction = "add";
|
||||
state.get().link.action = "add";
|
||||
var form = _makeLinkForm();
|
||||
modal.render({
|
||||
heading: "Add a new bookmark",
|
||||
@ -42,9 +38,10 @@ var links = (function() {
|
||||
};
|
||||
|
||||
var edit = function(button) {
|
||||
currentAction = "edit";
|
||||
currentEditIndex = parseInt(button.closest(".link-item").dataset.index, 10);
|
||||
var currentBookmark = bookmarks.get()[currentEditIndex];
|
||||
state.get().link.action = "edit";
|
||||
state.get().link.editObject = bookmarks.get(parseInt(button.closest(".link-item").dataset.timeStamp, 10));
|
||||
console.log(state.get().link.editObject);
|
||||
var currentBookmark = bookmarks.get(state.get().link.editObject.timeStamp);
|
||||
var form = _makeLinkForm();
|
||||
form.querySelector(".link-form-input-letter").value = currentBookmark.letter;
|
||||
form.querySelector(".link-form-input-name").value = currentBookmark.name;
|
||||
@ -61,10 +58,12 @@ var links = (function() {
|
||||
var save = function(button) {
|
||||
var action = {
|
||||
add: function(newLinkData) {
|
||||
newLinkData.timeStamp = new Date().getTime();
|
||||
bookmarks.add(newLinkData);
|
||||
},
|
||||
edit: function(newLinkData) {
|
||||
bookmarks.edit(newLinkData, currentEditIndex);
|
||||
newLinkData.timeStamp = state.get().link.editObject.timeStamp;
|
||||
bookmarks.edit(newLinkData, state.get().link.editObject.timeStamp);
|
||||
}
|
||||
};
|
||||
var form = helper.e(".link-form");
|
||||
@ -73,11 +72,11 @@ var links = (function() {
|
||||
name: form.querySelector(".link-form-input-name").value,
|
||||
url: form.querySelector(".link-form-input-url").value
|
||||
};
|
||||
action[currentAction](newLinkData);
|
||||
currentEditIndex = null;
|
||||
currentAction = null;
|
||||
action[state.get().link.action](newLinkData);
|
||||
state.get().link.editObject = null;
|
||||
state.get().link.action = null;
|
||||
clear();
|
||||
if (search.get().search) {
|
||||
if (state.get().header.search.searching) {
|
||||
search.render();
|
||||
} else {
|
||||
render();
|
||||
@ -86,10 +85,10 @@ var links = (function() {
|
||||
};
|
||||
|
||||
var remove = function(button) {
|
||||
var index = parseInt(button.closest(".link-item").dataset.index, 10);
|
||||
bookmarks.remove(index);
|
||||
var timeStamp = parseInt(button.closest(".link-item").dataset.timeStamp, 10);
|
||||
bookmarks.remove(timeStamp);
|
||||
clear();
|
||||
if (search.get().search) {
|
||||
if (state.get().header.search.searching) {
|
||||
search.render();
|
||||
} else {
|
||||
render();
|
||||
@ -97,46 +96,18 @@ var links = (function() {
|
||||
data.save();
|
||||
};
|
||||
|
||||
var _makeElement = function(override) {
|
||||
var options = {
|
||||
tag: null,
|
||||
classes: null,
|
||||
text: null,
|
||||
url: null,
|
||||
index: null,
|
||||
attr: null
|
||||
};
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
var element = document.createElement(options.tag);
|
||||
if (options.text != null) {
|
||||
element.textContent = options.text;
|
||||
};
|
||||
if (options.attr != null) {
|
||||
options.attr.forEach(function(arrayItem, index) {
|
||||
if ("key" in arrayItem && "value" in arrayItem) {
|
||||
element.setAttribute(arrayItem.key, arrayItem.value);
|
||||
} else if ("key" in arrayItem) {
|
||||
element.setAttribute(arrayItem.key, "");
|
||||
}
|
||||
});
|
||||
};
|
||||
return element;
|
||||
};
|
||||
|
||||
var _makeLinkForm = function() {
|
||||
var form = _makeElement({
|
||||
var form = helper.makeNode({
|
||||
tag: "form",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-form"
|
||||
}]
|
||||
});
|
||||
var fieldset = _makeElement({
|
||||
var fieldset = helper.makeNode({
|
||||
tag: "fieldset"
|
||||
});
|
||||
var letterLabel = _makeElement({
|
||||
var letterLabel = helper.makeNode({
|
||||
tag: "label",
|
||||
text: "Letters",
|
||||
attr: [{
|
||||
@ -144,7 +115,7 @@ var links = (function() {
|
||||
value: "letters"
|
||||
}]
|
||||
});
|
||||
var letterInput = _makeElement({
|
||||
var letterInput = helper.makeNode({
|
||||
tag: "input",
|
||||
attr: [{
|
||||
key: "type",
|
||||
@ -166,7 +137,7 @@ var links = (function() {
|
||||
value: "off"
|
||||
}]
|
||||
});
|
||||
var nameLabel = _makeElement({
|
||||
var nameLabel = helper.makeNode({
|
||||
tag: "label",
|
||||
text: "Name",
|
||||
attr: [{
|
||||
@ -174,7 +145,7 @@ var links = (function() {
|
||||
value: "name"
|
||||
}]
|
||||
});
|
||||
var nameInput = _makeElement({
|
||||
var nameInput = helper.makeNode({
|
||||
tag: "input",
|
||||
attr: [{
|
||||
key: "type",
|
||||
@ -196,7 +167,7 @@ var links = (function() {
|
||||
value: "off"
|
||||
}]
|
||||
});
|
||||
var urlLabel = _makeElement({
|
||||
var urlLabel = helper.makeNode({
|
||||
tag: "label",
|
||||
text: "URL",
|
||||
attr: [{
|
||||
@ -204,7 +175,7 @@ var links = (function() {
|
||||
value: "url"
|
||||
}]
|
||||
});
|
||||
var urlInput = _makeElement({
|
||||
var urlInput = helper.makeNode({
|
||||
tag: "input",
|
||||
attr: [{
|
||||
key: "type",
|
||||
@ -236,18 +207,18 @@ var links = (function() {
|
||||
return form;
|
||||
};
|
||||
|
||||
var _makeLink = function(data, index) {
|
||||
var linkItem = _makeElement({
|
||||
var _makeLink = function(data) {
|
||||
var linkItem = helper.makeNode({
|
||||
tag: "div",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-item"
|
||||
}, {
|
||||
key: "data-index",
|
||||
value: index
|
||||
key: "data-time-stamp",
|
||||
value: data.timeStamp
|
||||
}]
|
||||
});
|
||||
var linkPanelFront = _makeElement({
|
||||
var linkOptions = {
|
||||
tag: "a",
|
||||
attr: [{
|
||||
key: "class",
|
||||
@ -259,26 +230,30 @@ var links = (function() {
|
||||
key: "tabindex",
|
||||
value: 1
|
||||
}]
|
||||
});
|
||||
var linkPanelBack = _makeElement({
|
||||
};
|
||||
if (state.get().link.newTab) {
|
||||
linkOptions.attr.push({
|
||||
key: "target",
|
||||
value: "_blank"
|
||||
});
|
||||
};
|
||||
var linkPanelFront = helper.makeNode(linkOptions);
|
||||
var linkPanelBack = helper.makeNode({
|
||||
tag: "div",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-panel-back"
|
||||
}]
|
||||
});
|
||||
var linkLetter = _makeElement({
|
||||
var linkLetter = helper.makeNode({
|
||||
tag: "p",
|
||||
text: data.letter,
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-letter"
|
||||
}, {
|
||||
key: "data-index",
|
||||
value: data.url
|
||||
}]
|
||||
});
|
||||
var linkName = _makeElement({
|
||||
var linkName = helper.makeNode({
|
||||
tag: "p",
|
||||
text: data.name,
|
||||
attr: [{
|
||||
@ -286,14 +261,14 @@ var links = (function() {
|
||||
value: "link-name"
|
||||
}]
|
||||
});
|
||||
var linkUrl = _makeElement({
|
||||
var linkUrl = helper.makeNode({
|
||||
tag: "div",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-url"
|
||||
}]
|
||||
});
|
||||
var linkUrlText = _makeElement({
|
||||
var linkUrlText = helper.makeNode({
|
||||
tag: "p",
|
||||
text: data.url.replace(/^https?\:\/\//i, "").replace(/\/$/, ""),
|
||||
attr: [{
|
||||
@ -301,14 +276,14 @@ var links = (function() {
|
||||
value: "link-url-text"
|
||||
}]
|
||||
});
|
||||
var linkControl = _makeElement({
|
||||
var linkControl = helper.makeNode({
|
||||
tag: "div",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "link-control"
|
||||
}]
|
||||
});
|
||||
var linkEdit = _makeElement({
|
||||
var linkEdit = helper.makeNode({
|
||||
tag: "button",
|
||||
attr: [{
|
||||
key: "class",
|
||||
@ -318,14 +293,14 @@ var links = (function() {
|
||||
value: -1
|
||||
}]
|
||||
});
|
||||
var linkEditIcon = _makeElement({
|
||||
var linkEditIcon = helper.makeNode({
|
||||
tag: "span",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "button-icon icon-edit"
|
||||
}]
|
||||
});
|
||||
var linkDelete = _makeElement({
|
||||
var linkDelete = helper.makeNode({
|
||||
tag: "button",
|
||||
attr: [{
|
||||
key: "class",
|
||||
@ -335,7 +310,7 @@ var links = (function() {
|
||||
value: -1
|
||||
}]
|
||||
});
|
||||
var linkDeleteIcon = _makeElement({
|
||||
var linkDeleteIcon = helper.makeNode({
|
||||
tag: "span",
|
||||
attr: [{
|
||||
key: "class",
|
||||
@ -365,24 +340,16 @@ var links = (function() {
|
||||
};
|
||||
|
||||
var render = function(array) {
|
||||
var gridItemBody = helper.e(".grid-item-body");
|
||||
if (array) {
|
||||
array.forEach(function(arrayItem, index) {
|
||||
if (arrayItem.index) {
|
||||
index = arrayItem.index;
|
||||
};
|
||||
gridItemBody.appendChild(_makeLink(arrayItem, index));
|
||||
});
|
||||
} else {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
gridItemBody.appendChild(_makeLink(arrayItem, index));
|
||||
});
|
||||
};
|
||||
var linkArea = helper.e(".link-area");
|
||||
var bookmarksToRender = array || bookmarks.get();
|
||||
bookmarksToRender.forEach(function(arrayItem) {
|
||||
linkArea.appendChild(_makeLink(arrayItem));
|
||||
});
|
||||
};
|
||||
|
||||
var tabIndex = function() {
|
||||
var allLinkControlItem = helper.eA(".link-control-item");
|
||||
if (control.get().edit) {
|
||||
if (state.get().edit.active) {
|
||||
allLinkControlItem.forEach(function(arrayItem, index) {
|
||||
arrayItem.tabIndex = 1;
|
||||
});
|
||||
@ -394,9 +361,9 @@ var links = (function() {
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
var gridItemBody = helper.e(".grid-item-body");
|
||||
while (gridItemBody.lastChild) {
|
||||
gridItemBody.removeChild(gridItemBody.lastChild);
|
||||
var linkArea = helper.e(".link-area");
|
||||
while (linkArea.lastChild) {
|
||||
linkArea.removeChild(linkArea.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
49
js/menu.js
Normal file
49
js/menu.js
Normal file
@ -0,0 +1,49 @@
|
||||
var menu = (function() {
|
||||
|
||||
var close = function() {
|
||||
state.get().menu.active = false;
|
||||
render();
|
||||
};
|
||||
|
||||
var open = function() {
|
||||
state.get().menu.active = true;
|
||||
render();
|
||||
};
|
||||
|
||||
var toggle = function() {
|
||||
if (state.get().menu.active) {
|
||||
state.get().menu.active = false;
|
||||
} else {
|
||||
state.get().menu.active = true;
|
||||
};
|
||||
render();
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
if (state.get().menu.active) {
|
||||
helper.addClass(html, "is-menu-open");
|
||||
shade.render({
|
||||
action: function() {
|
||||
close();
|
||||
render();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
helper.removeClass(html, "is-menu-open");
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
close();
|
||||
};
|
||||
|
||||
return {
|
||||
init: init,
|
||||
close: close,
|
||||
open: open,
|
||||
toggle: toggle,
|
||||
render: render
|
||||
};
|
||||
|
||||
})();
|
||||
14
js/modal.js
14
js/modal.js
@ -2,7 +2,7 @@ var modal = (function() {
|
||||
|
||||
var previousModal = null;
|
||||
|
||||
function destroy() {
|
||||
var destroy = function() {
|
||||
var all_modal = helper.eA(".modal");
|
||||
if (all_modal[0]) {
|
||||
for (var i = 0; i < all_modal.length; i++) {
|
||||
@ -11,7 +11,7 @@ var modal = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
function render(options) {
|
||||
var render = function(options) {
|
||||
var defaultOptions = {
|
||||
heading: "Modal",
|
||||
content: "Body",
|
||||
@ -25,7 +25,10 @@ var modal = (function() {
|
||||
};
|
||||
var makeModal = function() {
|
||||
var body = helper.e("body");
|
||||
body.dataset.modal = true;
|
||||
state.change({
|
||||
path: "modal.active",
|
||||
value: true
|
||||
});
|
||||
var modalWrapper = document.createElement("div");
|
||||
modalWrapper.setAttribute("class", "modal-wrapper");
|
||||
var modal = document.createElement("div");
|
||||
@ -44,7 +47,10 @@ var modal = (function() {
|
||||
} else {
|
||||
modal.remove();
|
||||
};
|
||||
body.dataset.modal = false;
|
||||
state.change({
|
||||
path: "modal.active",
|
||||
value: false
|
||||
});
|
||||
};
|
||||
var modalBody = document.createElement("div");
|
||||
modalBody.setAttribute("class", "modal-body");
|
||||
|
||||
52
js/search.js
52
js/search.js
@ -1,40 +1,32 @@
|
||||
var search = (function() {
|
||||
|
||||
var state = {
|
||||
search: false
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
return state;
|
||||
};
|
||||
|
||||
var bind = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
var searchClear = helper.e(".search-clear");
|
||||
searchInput.addEventListener("input", function() {
|
||||
_updateState(this);
|
||||
_updateSearchClear();
|
||||
_toggle(this);
|
||||
_searchClear();
|
||||
render();
|
||||
}, false);
|
||||
searchClear.addEventListener("click", function() {
|
||||
_updateState(this);
|
||||
_updateSearchClear();
|
||||
_toggle(this);
|
||||
_searchClear();
|
||||
clear();
|
||||
}, false);
|
||||
};
|
||||
|
||||
var _updateState = function(input) {
|
||||
var _toggle = function(input) {
|
||||
if (input.value != "") {
|
||||
state.search = true;
|
||||
state.get().header.search.searching = true;
|
||||
} else {
|
||||
state.search = false;
|
||||
state.get().header.search.searching = false;
|
||||
};
|
||||
};
|
||||
|
||||
var _updateSearchClear = function() {
|
||||
var _searchClear = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
var searchClear = helper.e(".search-clear");
|
||||
if (state.search) {
|
||||
if (state.get().header.search.searching) {
|
||||
searchClear.removeAttribute("disabled");
|
||||
} else {
|
||||
searchClear.setAttribute("disabled", "");
|
||||
@ -43,40 +35,46 @@ var search = (function() {
|
||||
|
||||
var render = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
if (state.search) {
|
||||
var searchResult = [];
|
||||
if (state.get().header.search.searching) {
|
||||
var searchedBookmarks = [];
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
if (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase()) || arrayItem.name.toLowerCase().includes(searchInput.value.toLowerCase())) {
|
||||
var copy = JSON.parse(JSON.stringify(arrayItem));
|
||||
copy.index = index;
|
||||
searchResult.push(copy);
|
||||
searchedBookmarks.push(copy);
|
||||
};
|
||||
});
|
||||
links.clear();
|
||||
links.render(searchResult);
|
||||
link.clear();
|
||||
link.render(searchedBookmarks);
|
||||
} else {
|
||||
links.clear();
|
||||
links.render();
|
||||
link.clear();
|
||||
link.render();
|
||||
};
|
||||
};
|
||||
|
||||
var update = function() {
|
||||
var search = helper.e(".search");
|
||||
search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
searchInput.value = "";
|
||||
searchInput.focus();
|
||||
links.clear();
|
||||
links.render();
|
||||
link.clear();
|
||||
link.render();
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
update();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
get: get,
|
||||
render: render,
|
||||
update: update,
|
||||
clear: clear
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ var shade = (function() {
|
||||
|
||||
var previousShade = null;
|
||||
|
||||
function destroy() {
|
||||
var destroy = function() {
|
||||
var all_shade = helper.eA(".shade");
|
||||
if (all_shade[0]) {
|
||||
for (var i = 0; i < all_shade.length; i++) {
|
||||
@ -11,7 +11,7 @@ var shade = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
function render(options) {
|
||||
var render = function(options) {
|
||||
var defaultOptions = {
|
||||
action: null,
|
||||
includeHeader: false
|
||||
|
||||
108
js/state.js
108
js/state.js
@ -1,16 +1,112 @@
|
||||
var state = (function() {
|
||||
|
||||
var current = {
|
||||
header: {
|
||||
clock: {
|
||||
active: true,
|
||||
hour24: true,
|
||||
show: {
|
||||
leadingZero: true,
|
||||
seconds: true,
|
||||
seperator: true,
|
||||
meridiem: true
|
||||
}
|
||||
},
|
||||
editAdd: {
|
||||
active: true,
|
||||
},
|
||||
accent: {
|
||||
active: true,
|
||||
},
|
||||
search: {
|
||||
searching: false,
|
||||
active: true,
|
||||
grow: true,
|
||||
engine: {
|
||||
selected: "google",
|
||||
google: {
|
||||
url: "https://www.google.com/search"
|
||||
},
|
||||
duckduckgo: {
|
||||
url: "https://duckduckgo.com/"
|
||||
},
|
||||
giphy: {
|
||||
url: "https://giphy.com/search/"
|
||||
},
|
||||
custom: {
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
buttons: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
link: {
|
||||
editObject: null,
|
||||
action: null,
|
||||
newTab: false,
|
||||
style: "block",
|
||||
sort: "none"
|
||||
},
|
||||
layout: {
|
||||
alignment: "left",
|
||||
container: "wide",
|
||||
theme: {
|
||||
r: 0,
|
||||
g: 255,
|
||||
b: 0,
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
active: false
|
||||
},
|
||||
menu: {
|
||||
open: false
|
||||
},
|
||||
modal: {
|
||||
active: false
|
||||
}
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
var current = {
|
||||
bookmarks: bookmarks.get(),
|
||||
control: control.get(),
|
||||
theme: theme.get()
|
||||
};
|
||||
return current;
|
||||
};
|
||||
|
||||
var restore = function(data) {
|
||||
if ("state" in data) {
|
||||
current = data.state;
|
||||
};
|
||||
};
|
||||
|
||||
var change = function(override) {
|
||||
var options = {
|
||||
path: null,
|
||||
value: null
|
||||
};
|
||||
if (override) {
|
||||
options = helper.applyOptions(options, override);
|
||||
};
|
||||
if (options.path != null) {
|
||||
helper.setObject({
|
||||
path: options.path,
|
||||
object: current,
|
||||
newValue: options.value
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
if (data.load()) {
|
||||
restore(data.load());
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
get: get
|
||||
init: init,
|
||||
get: get,
|
||||
change: change,
|
||||
restore: restore
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
45
js/theme.js
45
js/theme.js
@ -1,55 +1,18 @@
|
||||
var theme = (function() {
|
||||
|
||||
var state = {
|
||||
r: 255,
|
||||
g: 170,
|
||||
b: 51,
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
return state;
|
||||
};
|
||||
|
||||
var bind = function() {
|
||||
var themeAccent = helper.e(".theme-input");
|
||||
themeAccent.addEventListener("change", function() {
|
||||
_updateAcent(this);
|
||||
render();
|
||||
data.save();
|
||||
});
|
||||
};
|
||||
|
||||
var _updateAcent = function(input) {
|
||||
state = helper.hexToRgb(input.value);
|
||||
};
|
||||
|
||||
var _updateInput = function() {
|
||||
var themeAccent = helper.e(".theme-input");
|
||||
themeAccent.value = helper.rgbToHex(state);
|
||||
};
|
||||
|
||||
var render = function(input) {
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--accent", state.r + ", " + state.g + ", " + state.b);
|
||||
};
|
||||
|
||||
var restore = function(object) {
|
||||
if (object) {
|
||||
state = object;
|
||||
_updateInput();
|
||||
render();
|
||||
};
|
||||
var color = state.get().layout.theme;
|
||||
html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
get: get,
|
||||
restore: restore,
|
||||
render: render
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = 1.0;
|
||||
var current = 2.0;
|
||||
|
||||
var get = function() {
|
||||
return current;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user