Compare commits
8
Commits
29f8b7461f
...
05874c025f
| Author | SHA1 | Date | |
|---|---|---|---|
 ryan
|
05874c025f | ||
|
ryan
|
10267a261d | ||
|
ryan
|
ccab4ba655 | ||
|
ryan
|
dec1b801d8 | ||
|
ryan
|
723d046ce3 | ||
|
ryan
|
52bdf2f16e | ||
|
ryan
|
788190328b | ||
|
ryan
|
0a55500892 |
@@ -0,0 +1,620 @@
|
|||||||
|
@import url(fontawesome-all.min.css);
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
|
||||||
|
/* Global style settings */
|
||||||
|
@media screen and (max-width: 1050px) {
|
||||||
|
#sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 50px 50% 1fr;
|
||||||
|
gap: 5px 0;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-areas: "mobile-note-header" "notes" "ref-text";
|
||||||
|
}
|
||||||
|
.container .ref-text {
|
||||||
|
height: 99%;
|
||||||
|
width: 98vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
}
|
||||||
|
.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mobile-note-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.mobile-note-header h2 {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.mobile-note-header button {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
width: 98vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 50px;
|
||||||
|
gap: 2px 0;
|
||||||
|
grid-template-areas: "note-text" "fields-container";
|
||||||
|
grid-area: notes;
|
||||||
|
}
|
||||||
|
.notes .fields-container {
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
}
|
||||||
|
.notes .fields-container input[type=text], .notes .fields-container select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--border);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
.notes .note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.notes .note-text textarea {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Roboto Sans";
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1051px) and (max-width: 1079px) {
|
||||||
|
#sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mobile-note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
grid-template-columns: 60px 35% 1fr;
|
||||||
|
grid-template-rows: 60px 1.8fr;
|
||||||
|
gap: 5px 5px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes";
|
||||||
|
}
|
||||||
|
.container .fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.bottom-row {
|
||||||
|
height: calc(100vh - 75px);
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 75px 1fr;
|
||||||
|
gap: 2px 0px;
|
||||||
|
grid-template-areas: "fields-container" "note-text";
|
||||||
|
grid-area: notes;
|
||||||
|
}
|
||||||
|
.notes .fields-container {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
}
|
||||||
|
.notes .fields-container input[type=text], .notes .fields-container select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
.notes .note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 98.5%;
|
||||||
|
}
|
||||||
|
.notes .note-text textarea {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Roboto Sans";
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
.note-header, .ref-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.note-header h2, .ref-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1080px) {
|
||||||
|
.mobile-note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
grid-template-columns: 60px 35% 0.995fr;
|
||||||
|
grid-template-rows: 60px 1.8fr;
|
||||||
|
gap: 5px 5px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes";
|
||||||
|
}
|
||||||
|
.container .fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.bottom-row {
|
||||||
|
height: calc(100vh - 75px);
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 75px 1fr;
|
||||||
|
gap: 2px 0px;
|
||||||
|
grid-template-areas: "fields-container" "note-text";
|
||||||
|
grid-area: notes;
|
||||||
|
}
|
||||||
|
.notes .fields-container {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
}
|
||||||
|
.notes .fields-container input[type=text], .notes .fields-container select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 2;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
.notes .note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 98.5%;
|
||||||
|
}
|
||||||
|
.notes .note-text textarea {
|
||||||
|
height: 99%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Roboto Sans";
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
.note-header, .ref-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.note-header h2, .ref-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.note-header select, .ref-header select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 2;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#previewBtn.active,
|
||||||
|
#show-hide-btn.active,
|
||||||
|
.ref-list button.active,
|
||||||
|
#open-ref.active,
|
||||||
|
#mobile-open-ref.active {
|
||||||
|
background-color: var(--primary) !important;
|
||||||
|
color: var(--light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#save-check {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ui-datepicker-div {
|
||||||
|
z-index: 11 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Roboto Slab", "Open Sans", sans-serif !important;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0 0 1.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80px;
|
||||||
|
width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: inset 0 0 0 2px var(--primary);
|
||||||
|
color: var(--primary) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 3em;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
line-height: 3em;
|
||||||
|
padding: 0 2em;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.button i {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-warning {
|
||||||
|
border: solid 2px var(--warning) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-error {
|
||||||
|
border: solid 2px var(--error) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-btn-header {
|
||||||
|
grid-area: ref-btn-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-btn {
|
||||||
|
grid-area: ref-btn;
|
||||||
|
}
|
||||||
|
.ref-btn .ref-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 1px;
|
||||||
|
margin: 1px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-text {
|
||||||
|
grid-area: ref-text;
|
||||||
|
display: block;
|
||||||
|
overflow-y: scroll;
|
||||||
|
border: var(--border) solid 1px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.ref-text h2 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#refQuery {
|
||||||
|
position: fixed;
|
||||||
|
background-color: var(--background);
|
||||||
|
z-index: 999;
|
||||||
|
width: 400px;
|
||||||
|
height: 200px;
|
||||||
|
border: solid 2px var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
margin: 10px 50px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chapter-range, #verse-range {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-header {
|
||||||
|
grid-area: note-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notePreview {
|
||||||
|
display: none;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-header {
|
||||||
|
grid-area: ref-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** drowndown button */
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.dropdown select option:hover {
|
||||||
|
background-color: var(--primary);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* slider switch */
|
||||||
|
/* The switch - the box around the slider */
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 42px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide default HTML checkbox */
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider */
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: white;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
transform: translateX(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rounded sliders */
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#refQuery, #passage-popup, #modal-backdrop, #modal-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar
|
||||||
|
*/
|
||||||
|
#sidebar {
|
||||||
|
transition: margin-left 0.5s ease, box-shadow 0.5s ease;
|
||||||
|
background-color: var(--background);
|
||||||
|
font-size: 0.9em;
|
||||||
|
position: relative;
|
||||||
|
width: 25em;
|
||||||
|
border-right: solid 2px var(--border);
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
#sidebar .toggle {
|
||||||
|
text-decoration: none;
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
height: 4.5em;
|
||||||
|
left: 25em;
|
||||||
|
line-height: 4.5em;
|
||||||
|
outline: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
text-indent: -15em;
|
||||||
|
white-space: nowrap;
|
||||||
|
top: 0;
|
||||||
|
width: 6em;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
#sidebar > .inner {
|
||||||
|
position: relative;
|
||||||
|
width: 25em;
|
||||||
|
}
|
||||||
|
#sidebar > .inner > * {
|
||||||
|
border-bottom: solid 2px var(--medium);
|
||||||
|
margin: 0 0 3.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: stretch;
|
||||||
|
align-content: flex-start;
|
||||||
|
max-width: 1060px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.inner > .alt {
|
||||||
|
background-color: var(--light);
|
||||||
|
border-bottom: 0;
|
||||||
|
margin: -2.22em -2.33em 1em -2.22em;
|
||||||
|
padding: 2.22em;
|
||||||
|
width: calc(100% - 4.44em);
|
||||||
|
}
|
||||||
|
|
||||||
|
header.major {
|
||||||
|
border-bottom: solid 3px var(--border);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
padding: 0 0.75em 0.5em 0;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul li {
|
||||||
|
border-top: solid 1px var(--medium);
|
||||||
|
margin: 0.5em 0 0 0;
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul li:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul a {
|
||||||
|
border-bottom: 0;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0.625em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .toggle::before {
|
||||||
|
content: "\f0c9";
|
||||||
|
font-size: 2rem;
|
||||||
|
height: inherit;
|
||||||
|
left: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
position: absolute;
|
||||||
|
text-indent: 0;
|
||||||
|
top: 0;
|
||||||
|
width: inherit;
|
||||||
|
z-index: 99;
|
||||||
|
font-family: "Font Awesome 5 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
display: inline-block;
|
||||||
|
font-style: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
text-transform: none !important;
|
||||||
|
}/*# sourceMappingURL=styles.css.map */
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,699 @@
|
|||||||
|
// Set up the global font styles
|
||||||
|
@import url(fontawesome-all.min.css);
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
|
||||||
|
/* Global style settings */
|
||||||
|
@media screen and (max-width: 1050px) {
|
||||||
|
#sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 50px 50% 1fr;
|
||||||
|
gap: 5px 0;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-areas:
|
||||||
|
"mobile-note-header"
|
||||||
|
"notes"
|
||||||
|
"ref-text";
|
||||||
|
|
||||||
|
.ref-text {
|
||||||
|
height: 99%;
|
||||||
|
width: 98vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-note-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
width: 98vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 50px;
|
||||||
|
gap: 2px 0;
|
||||||
|
grid-template-areas: "note-text" "fields-container";
|
||||||
|
|
||||||
|
grid-area: notes;
|
||||||
|
|
||||||
|
.fields-container {
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
|
||||||
|
input[type="text"], select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--border);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Roboto Sans';
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1051px) and (max-width: 1079px) {
|
||||||
|
#sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
grid-template-columns: 60px 35% 1fr;
|
||||||
|
grid-template-rows: 60px 1.8fr;
|
||||||
|
gap: 5px 5px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
"ref-btn-header ref-header note-header"
|
||||||
|
"ref-btn ref-text notes";
|
||||||
|
|
||||||
|
.fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-row {
|
||||||
|
height: calc(100vh - 75px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 75px 1fr;
|
||||||
|
gap: 2px 0px;
|
||||||
|
grid-template-areas: "fields-container" "note-text";
|
||||||
|
|
||||||
|
grid-area: notes;
|
||||||
|
|
||||||
|
.fields-container {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
// height: 75px;
|
||||||
|
|
||||||
|
input[type="text"], select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 98.5%;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Roboto Sans';
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-header, .ref-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1080px) {
|
||||||
|
#sidebar {
|
||||||
|
//display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-note-header, #note-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
grid-template-columns: 60px 35% 0.995fr;
|
||||||
|
grid-template-rows: 60px 1.8fr;
|
||||||
|
gap: 5px 5px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
"ref-btn-header ref-header note-header"
|
||||||
|
"ref-btn ref-text notes";
|
||||||
|
|
||||||
|
.fields-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-row {
|
||||||
|
height: calc(100vh - 75px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 75px 1fr;
|
||||||
|
gap: 2px 0px;
|
||||||
|
grid-template-areas: "fields-container" "note-text";
|
||||||
|
|
||||||
|
grid-area: notes;
|
||||||
|
|
||||||
|
.fields-container {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 99.5%;
|
||||||
|
// height: 75px;
|
||||||
|
|
||||||
|
input[type="text"], select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 2;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-text {
|
||||||
|
height: 100%;
|
||||||
|
width: 98.5%;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
height: 99%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Roboto Sans';
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-header, .ref-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
height: 1.5em;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
border: solid 1px var(--dark);
|
||||||
|
outline: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.65;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 2;
|
||||||
|
min-width: 50px;
|
||||||
|
max-width: 200px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#previewBtn.active,
|
||||||
|
#show-hide-btn.active,
|
||||||
|
.ref-list button.active,
|
||||||
|
#open-ref.active,
|
||||||
|
#mobile-open-ref.active {
|
||||||
|
background-color: var(--primary) !important;
|
||||||
|
color: var(--light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#save-check {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ui-datepicker-div {
|
||||||
|
z-index: 11 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto Slab', 'Open Sans', sans-serif !important;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Roboto Slab', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0 0 1.5em 0;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80px;
|
||||||
|
width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: inset 0 0 0 2px var(--primary);
|
||||||
|
color: var(--primary) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 3em;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
line-height: 3em;
|
||||||
|
padding: 0 2em;
|
||||||
|
// min-width: 30px;
|
||||||
|
// max-width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.button i {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-warning {
|
||||||
|
border: solid 2px var(--warning) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-error {
|
||||||
|
border: solid 2px var(--error) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-btn-header { grid-area: ref-btn-header; }
|
||||||
|
|
||||||
|
.ref-btn {
|
||||||
|
grid-area: ref-btn;
|
||||||
|
|
||||||
|
.ref-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 1px;
|
||||||
|
margin: 1px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-text {
|
||||||
|
grid-area: ref-text;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// width: 100%;
|
||||||
|
border: var(--border) solid 1px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1;
|
||||||
|
// position: relative;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#refQuery {
|
||||||
|
position: fixed;
|
||||||
|
background-color: var(--background);
|
||||||
|
z-index: 999;
|
||||||
|
width: 400px;
|
||||||
|
height: 200px;
|
||||||
|
border: solid 2px var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
margin: 10px 50px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chapter-range, #verse-range {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-header {
|
||||||
|
grid-area: note-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notePreview {
|
||||||
|
display: none;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-header {
|
||||||
|
grid-area: ref-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** drowndown button */
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
// height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown select {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
|
||||||
|
option:hover {
|
||||||
|
background-color: var(--primary);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* slider switch */
|
||||||
|
/* The switch - the box around the slider */
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 42px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide default HTML checkbox */
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider */
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
-webkit-transition: .5s;
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-transition: 0.5s;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(18px);
|
||||||
|
-ms-transform: translateX(18px);
|
||||||
|
transform: translateX(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rounded sliders */
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#refQuery, #passage-popup, #modal-backdrop, #modal-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar
|
||||||
|
*/
|
||||||
|
#sidebar {
|
||||||
|
transition: margin-left 0.5s ease, box-shadow 0.5s ease;
|
||||||
|
background-color: var(--background);
|
||||||
|
font-size: 0.9em;
|
||||||
|
position: relative;
|
||||||
|
width: 25em;
|
||||||
|
border-right: solid 2px var(--border);
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
text-decoration: none;
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
height: 4.5em;
|
||||||
|
left: 25em;
|
||||||
|
line-height: 4.5em;
|
||||||
|
outline: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
text-indent: -15em;
|
||||||
|
white-space: nowrap;
|
||||||
|
top: 0;
|
||||||
|
width: 6em;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .inner {
|
||||||
|
//padding: 2.22em 2.22em 2.44em 2.22em;
|
||||||
|
position: relative;
|
||||||
|
width: 25em;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
border-bottom: solid 2px var(--medium);
|
||||||
|
margin: 0 0 3.5em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: stretch;
|
||||||
|
align-content: flex-start;
|
||||||
|
max-width: 1060px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
> .alt {
|
||||||
|
background-color: var(--light);
|
||||||
|
border-bottom: 0;
|
||||||
|
margin: -2.22em -2.33em 1.0em -2.22em;
|
||||||
|
padding: 2.22em;
|
||||||
|
width: calc(100% - 4.44em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header.major {
|
||||||
|
border-bottom: solid 3px var(--border);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
padding: 0 0.75em 0.5em 0;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul {
|
||||||
|
user-select: none;
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul li {
|
||||||
|
border-top: solid 1px var(--medium);
|
||||||
|
margin: 0.5em 0 0 0;
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul li:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu ul a {
|
||||||
|
border-bottom: 0;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0.625em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .toggle::before {
|
||||||
|
content: '\f0c9';
|
||||||
|
font-size: 2rem;
|
||||||
|
height: inherit;
|
||||||
|
left: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
position: absolute;
|
||||||
|
text-indent: 0;
|
||||||
|
top: 0;
|
||||||
|
width: inherit;
|
||||||
|
z-index: 99;
|
||||||
|
font-family: 'Font Awesome 5 Free';
|
||||||
|
font-weight: 900;
|
||||||
|
display: inline-block;
|
||||||
|
font-style: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
text-transform: none !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,439 @@
|
|||||||
|
import * as note from './note.js';
|
||||||
|
import { state } from './state.js';
|
||||||
|
import * as ref from './reference.js';
|
||||||
|
|
||||||
|
// Get the link element
|
||||||
|
var tabs = [];
|
||||||
|
let controller;
|
||||||
|
|
||||||
|
// Function to change the CSS file based on checkbox state
|
||||||
|
/**
|
||||||
|
* Method to toggle dark/light mode
|
||||||
|
*
|
||||||
|
* @param {*} event
|
||||||
|
*/
|
||||||
|
export function toggleDarkMode(event) {
|
||||||
|
let mainCssLink = $('link[data-css="mode"');
|
||||||
|
if(mainCssLink.length > 0) {
|
||||||
|
mainCssLink[0].href = (event.target.checked ? mainCssLink.data('dark') : mainCssLink.data('light'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the visibility of the fields container and updates the active state of the show/hide button.
|
||||||
|
*
|
||||||
|
* @param Event e
|
||||||
|
* @param boolean forceShow
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function toggleFields(e, forceShow = false) {
|
||||||
|
const fieldsContainer = document.querySelector('.fields-container');
|
||||||
|
let showHideBtn = document.getElementById('show-hide-btn');
|
||||||
|
let mobileShowHideBtn = document.getElementById('mobile-show-hide-btn');
|
||||||
|
|
||||||
|
if (forceShow || !fieldsContainer.classList.contains('show')) {
|
||||||
|
fieldsContainer.classList.add('show');
|
||||||
|
fieldsContainer.style.display = 'flex';
|
||||||
|
showHideBtn.classList.add('active');
|
||||||
|
mobileShowHideBtn.classList.add('active');
|
||||||
|
} else {
|
||||||
|
fieldsContainer.classList.remove('show');
|
||||||
|
fieldsContainer.style.display = 'none';
|
||||||
|
showHideBtn.classList.remove('active');
|
||||||
|
mobileShowHideBtn.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Increases the font size of the element with the id 'ref' by 1 point.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return a value.
|
||||||
|
*/
|
||||||
|
export function increaseFont() {
|
||||||
|
var currentSize = document.querySelector('#ref-text').style.fontSize;
|
||||||
|
const newSize = parseInt(currentSize) + 1;
|
||||||
|
document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
|
||||||
|
document.querySelector('#notes').style.fontSize = newSize + 'pt';
|
||||||
|
document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decreases the font size of the element with the id 'ref' by 1 point.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return a value.
|
||||||
|
*/
|
||||||
|
export function decreaseFont() {
|
||||||
|
var currentSize = document.querySelector('#ref-text').style.fontSize;
|
||||||
|
const newSize = parseInt(currentSize) - 1;
|
||||||
|
document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
|
||||||
|
document.querySelector('#notes').style.fontSize = newSize + 'pt';
|
||||||
|
document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Previews a note by rendering the markdown content of the note in a preview section.
|
||||||
|
* Toggles between the note text and preview sections.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function previewNote() {
|
||||||
|
var noteText = document.querySelector('#notes');
|
||||||
|
var notePreview = document.querySelector('#notePreview');
|
||||||
|
var previewButton = document.querySelector('#previewBtn');
|
||||||
|
|
||||||
|
const title = document.querySelector('#noteTitle');
|
||||||
|
const speaker = document.querySelector('#speaker');
|
||||||
|
const passage = document.querySelector('#passage');
|
||||||
|
|
||||||
|
const markdownPreview = "# " + title.value + " - " +
|
||||||
|
speaker.options[speaker.selectedIndex].text + " - " + passage.value + "\n\n" + noteText.value;
|
||||||
|
|
||||||
|
notePreview.innerHTML = state.md.render(markdownPreview);
|
||||||
|
|
||||||
|
if (previewButton.classList.contains('active')) {
|
||||||
|
document.querySelector('.note-text').style.display = 'block';
|
||||||
|
notePreview.style.display = 'none';
|
||||||
|
previewButton.classList.remove('active');
|
||||||
|
} else {
|
||||||
|
document.querySelector('.note-text').style.display = 'none';
|
||||||
|
notePreview.style.display = 'block';
|
||||||
|
previewButton.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
note.findLinks();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets event listeners for keyup events on the document and the '#notes' element.
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function setEventListeners() {
|
||||||
|
document.addEventListener('keyup', function (event) {
|
||||||
|
if (event.key == "F3") {
|
||||||
|
openRef(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#notes').addEventListener('keyup', function (event) {
|
||||||
|
let key = event.keyCode;
|
||||||
|
|
||||||
|
if (key == 8 || key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
|
||||||
|
state.textDirty = true;
|
||||||
|
document.querySelector('.mobile-note-header h2').classList.add('dirty');
|
||||||
|
document.querySelector('.note-header h2').classList.add('dirty');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('dark-mode-checkbox').addEventListener('click', toggleDarkMode);
|
||||||
|
document.getElementById('mobile-dark-mode-checkbox').addEventListener('click', toggleDarkMode);
|
||||||
|
|
||||||
|
document.getElementById('show-hide-btn').addEventListener('click', toggleFields);
|
||||||
|
document.getElementById('mobile-show-hide-btn').addEventListener('click', toggleFields);
|
||||||
|
|
||||||
|
document.getElementById('increaseFont').addEventListener('click', increaseFont);
|
||||||
|
document.getElementById('decreaseFont').addEventListener('click', decreaseFont);
|
||||||
|
document.getElementById('open-ref').addEventListener('click', openRef, {closeSidebar: false});
|
||||||
|
document.getElementById('mobile-open-ref').addEventListener('click', openRef, {closeSidebar: false});
|
||||||
|
document.getElementById('previewBtn').addEventListener('click', previewNote);
|
||||||
|
|
||||||
|
document.getElementById('searchBtn').addEventListener('click', ref.queryRef);
|
||||||
|
document.getElementById('closeSearch').addEventListener('click', closeRef);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initHome() {
|
||||||
|
setBooks();
|
||||||
|
setEventListeners();
|
||||||
|
|
||||||
|
$('sidebar-link').on('click', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
$('#sidebar').toggleClass('inactive');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('sidebar').on('click', 'a', function(event) {
|
||||||
|
var $a = $(this), href = $a.attr('href'), target = $a.attr('target');
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
$('sidebar').addClass('inactive');
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
if (target == '_blank')
|
||||||
|
window.open(href);
|
||||||
|
else
|
||||||
|
window.location.href = href;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#note-table').DataTable({
|
||||||
|
paging: false,
|
||||||
|
ajax: {
|
||||||
|
url: '/get-notes',
|
||||||
|
type: 'POST'
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ data: 'link' },
|
||||||
|
{ data: 'speaker.name' },
|
||||||
|
{ data: 'passage' },
|
||||||
|
{
|
||||||
|
data: 'date.date',
|
||||||
|
render: DataTable.render.date("L")
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
$('#shareBtn').on('click', note.openShareNote);
|
||||||
|
$('#modal-backdrop').on('click', note.closeShareNote);
|
||||||
|
|
||||||
|
state.md = new markdownit({
|
||||||
|
html: true,
|
||||||
|
linkify: true,
|
||||||
|
breaks: true
|
||||||
|
});
|
||||||
|
|
||||||
|
if ($('#noteDate')) {
|
||||||
|
$('#noteDate').datepicker();
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($('#query')) {
|
||||||
|
document.querySelector('#query').addEventListener('keyup', function (event) {
|
||||||
|
if (event.key == "Enter") {
|
||||||
|
search();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Assuming 'to' and 'saveInterval' are declared globally elsewhere in your script
|
||||||
|
if (typeof state.to === 'undefined' || !state.to) {
|
||||||
|
state.to = setTimeout(note.saveNote, state.saveInterval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function setBooks() {
|
||||||
|
fetch('js/data.json')
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('HTTP Error: Status: ${res.status}');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
state.BOOKS = data;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opens the reference with the option to close the sidebar.
|
||||||
|
*
|
||||||
|
* @param {boolean} closeSidebar - Indicates whether to close the sidebar when opening the reference.
|
||||||
|
*/
|
||||||
|
export function openRef(e, closeSidebar = true) {
|
||||||
|
document.querySelector('#open-ref').classList.add('active');
|
||||||
|
document.querySelector('#mobile-open-ref').classList.add('active');
|
||||||
|
|
||||||
|
let refQuery = document.querySelector('#refQuery');
|
||||||
|
refQuery.style.display = 'block';
|
||||||
|
|
||||||
|
let ref = document.querySelector('#ref-text');
|
||||||
|
refQuery.style.left = ref.offsetLeft + 'px';
|
||||||
|
refQuery.style.top = ref.offsetTop + 'px';
|
||||||
|
if (closeSidebar) {
|
||||||
|
document.querySelector('.toggle').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the reference query and resets the reference search form.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function closeRef() {
|
||||||
|
document.querySelector('#referenceSearch').value = '';
|
||||||
|
document.querySelector('#referenceSearch').style.display = '';
|
||||||
|
document.querySelector('#referenceType').value = '';
|
||||||
|
document.querySelector('#referenceBook').value = '';
|
||||||
|
document.querySelector('#referenceBook').style.display = 'none';
|
||||||
|
document.querySelector('#chapter-range').innerText = '';
|
||||||
|
document.querySelector('#verse-range').innerText = '';
|
||||||
|
|
||||||
|
document.querySelector('#refQuery').style.display = 'none';
|
||||||
|
document.querySelector('#open-ref').classList.remove('active');
|
||||||
|
document.querySelector('#mobile-open-ref').classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieves a note from the server based on the provided ID.
|
||||||
|
*
|
||||||
|
* @param {string} id - The ID of the note to retrieve.
|
||||||
|
* @param {boolean} [runOpen=true] - Whether to open the note sidebar after retrieving the note.
|
||||||
|
* @return {Promise<void>} A promise that resolves when the note is successfully retrieved and the UI is updated.
|
||||||
|
*/
|
||||||
|
export function retrieveNote(id, runOpen = true) {
|
||||||
|
fetch('/get-note', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'id': id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(result => {
|
||||||
|
var dt = new Date(result.date.date);
|
||||||
|
|
||||||
|
document.querySelector('#notes').value = result.text;
|
||||||
|
document.querySelector('#passage').value = result.passage;
|
||||||
|
document.querySelector('#series').value = result.series.id;
|
||||||
|
document.querySelector('#speaker').value = result.speaker.id;
|
||||||
|
document.querySelector('#noteTitle').value = result.title;
|
||||||
|
document.querySelector('#noteDate').value = '';
|
||||||
|
document.querySelector('#noteDate').value =
|
||||||
|
(dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '/' +
|
||||||
|
(dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + '/' +
|
||||||
|
dt.getFullYear();
|
||||||
|
document.querySelector('#noteId').value = result.id;
|
||||||
|
|
||||||
|
if (result.refs) {
|
||||||
|
references = result.refs;
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = document.querySelector('#ref-list');
|
||||||
|
list.innerHTML = '';
|
||||||
|
var newList = null;
|
||||||
|
for (var x in references) {
|
||||||
|
var newList = document.createElement('li');
|
||||||
|
newList.className = 'tab';
|
||||||
|
var button = makeButton(x);
|
||||||
|
newList.appendChild(button);
|
||||||
|
list.appendChild(newList);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (runOpen) {
|
||||||
|
note.openNote(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A function to create a button element with the specified title and event listeners for click and double click actions.
|
||||||
|
*
|
||||||
|
* @param {string} title - The title to be displayed on the button.
|
||||||
|
* @return {Element} The created button element.
|
||||||
|
*/
|
||||||
|
export function makeButton(title) {
|
||||||
|
var btn = document.createElement('button');
|
||||||
|
btn.innerText = title;
|
||||||
|
btn.class = 'button';
|
||||||
|
btn.style = 'line-height:normal;'
|
||||||
|
btn.addEventListener('click', function () {
|
||||||
|
removeActiveRef();
|
||||||
|
document.querySelector('#ref-text').innerHTML = state.md.render(state.references[title]);
|
||||||
|
this.classList.add('active');
|
||||||
|
note.findRefLinks();
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.addEventListener('dblclick', function () {
|
||||||
|
document.querySelector('#ref-text').innerHTML = '';
|
||||||
|
delete state.references[title];
|
||||||
|
var list = this.parentElement;
|
||||||
|
list.remove();
|
||||||
|
state.saved = false;
|
||||||
|
state.textDirty = true;
|
||||||
|
note.saveNote();
|
||||||
|
});
|
||||||
|
|
||||||
|
removeActiveRef();
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
return btn;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes the 'active' class from all elements with the class 'active'.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return a value.
|
||||||
|
*/
|
||||||
|
export function removeActiveRef() {
|
||||||
|
tabs = document.querySelectorAll('#ref-list .active');
|
||||||
|
for (var t in tabs) {
|
||||||
|
if (isFinite(parseInt(t))) {
|
||||||
|
tabs[t].classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates a random UUIDv4 string.
|
||||||
|
*
|
||||||
|
* @return {string} The generated UUIDv4 string.
|
||||||
|
*/
|
||||||
|
export function uuidv4() {
|
||||||
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
|
||||||
|
.replace(/[xy]/g, function (c) {
|
||||||
|
const r = Math.random() * 16 | 0,
|
||||||
|
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||||
|
return v.toString(16);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Searches for notes based on the query entered in the search field.
|
||||||
|
* Sends a POST request to the '/search' endpoint with the query as a JSON payload.
|
||||||
|
* Updates the '#old-notes' element with the search results.
|
||||||
|
*
|
||||||
|
* @return {Promise} A Promise that resolves with the search results.
|
||||||
|
*/
|
||||||
|
export function search() {
|
||||||
|
query = document.querySelector('#query').value;
|
||||||
|
fetch('/search', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'query': query
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(results => {
|
||||||
|
var oldNotes = document.querySelector('#old-notes');
|
||||||
|
oldNotes.innerHTML = '';
|
||||||
|
for (var n in results) {
|
||||||
|
var link = document.createElement('a');
|
||||||
|
link.href = '#';
|
||||||
|
link.setAttribute('onclick', "note.retrieveNote('" + results[n].id + "');note.openNote();");
|
||||||
|
link.innerHTML = results[n].title;
|
||||||
|
|
||||||
|
var p = document.createElement('p');
|
||||||
|
p.innerHTML = results[n].passage;
|
||||||
|
|
||||||
|
var article = document.createElement('article');
|
||||||
|
article.appendChild(link);
|
||||||
|
article.appendChild(p);
|
||||||
|
|
||||||
|
oldNotes.append(article);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the passage popup by clearing its content and hiding it.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function closePopup() {
|
||||||
|
const popup = document.querySelector('#passage-popup');
|
||||||
|
popup.innerHTML = '';
|
||||||
|
popup.style.display = 'none';
|
||||||
|
}
|
||||||
@@ -0,0 +1,412 @@
|
|||||||
|
import { state } from './state.js';
|
||||||
|
import { toggleFields } from './home.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the visibility of the note list and reference elements.
|
||||||
|
*
|
||||||
|
* @param {boolean} [openSidebar=true] - Whether to open the sidebar after toggling the visibility.
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function openNote(openSidebar = true) {
|
||||||
|
const noteList = document.querySelector('#note-list');
|
||||||
|
const refs = document.querySelector('#ref');
|
||||||
|
|
||||||
|
if (noteList.style.display == 'block') {
|
||||||
|
noteList.style.display = 'none';
|
||||||
|
refs.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
noteList.style.display = 'block';
|
||||||
|
refs.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (openSidebar) {
|
||||||
|
document.querySelector('.toggle').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Starts the save process by updating the save-check element's classList, removing error, fa-times-circle, and fa-save classes,
|
||||||
|
* adding the 'saving' and 'fa-save' classes, and setting the opacity to 1.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function startSave() {
|
||||||
|
document.querySelector('#save-check').classList.remove('error', 'fa-times-circle', 'fa-save');
|
||||||
|
document.querySelector('#save-check').classList.add('saving', 'fa-save');
|
||||||
|
document.querySelector('#save-check').style.opacity = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays a checkmark animation on the screen.
|
||||||
|
*
|
||||||
|
* @param {none} - This function does not take any parameters.
|
||||||
|
* @return {none} - This function does not return any value.
|
||||||
|
*/
|
||||||
|
export function showSave() {
|
||||||
|
if (state.saved) { return; }
|
||||||
|
|
||||||
|
var checkmark = document.getElementById("save-check");
|
||||||
|
checkmark.classList.add('fa-save');
|
||||||
|
|
||||||
|
// Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
|
||||||
|
var si = setInterval(function () {
|
||||||
|
// Increment the opacity of the checkmark by 0.01 each time
|
||||||
|
op = parseFloat(checkmark.style.opacity);
|
||||||
|
checkmark.style.opacity = op - 0.1;
|
||||||
|
|
||||||
|
// If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
|
||||||
|
if (checkmark.style.opacity == 0.1) {
|
||||||
|
checkmark.style.opacity = 0;
|
||||||
|
clearInterval(si);
|
||||||
|
state.saved = false;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function to discard the note by clearing all input fields and closing the menu.
|
||||||
|
*/
|
||||||
|
export function deleteNote(noteId, link) {
|
||||||
|
document.querySelector('#noteTitle').value = '';
|
||||||
|
document.querySelector('#speaker').value = 0;
|
||||||
|
document.querySelector('#series').value = 0;
|
||||||
|
document.querySelector('#template').value = 0;
|
||||||
|
document.querySelector('#passage').value = '';
|
||||||
|
document.querySelector('#notes').value = '';
|
||||||
|
document.querySelector('#recording').value = '';
|
||||||
|
document.querySelector('#noteDate').value = '';
|
||||||
|
document.querySelector('#noteId').value = '';
|
||||||
|
|
||||||
|
var row = link.parentElement.parentElement;
|
||||||
|
|
||||||
|
fetch('/delete-note', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'id': noteId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.msg != 'deleted') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
alert('Note deleted.');
|
||||||
|
row.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates a note by checking if all required fields are filled.
|
||||||
|
*
|
||||||
|
* @return {boolean} Returns true if all required fields are filled, false otherwise.
|
||||||
|
*/
|
||||||
|
export function validateNote() {
|
||||||
|
const note = document.querySelector('#notes');
|
||||||
|
const date = document.querySelector('#noteDate');
|
||||||
|
const speaker = document.querySelector('#speaker');
|
||||||
|
const series = document.querySelector('#series');
|
||||||
|
const title = document.querySelector('#noteTitle');
|
||||||
|
const psg = document.querySelector('#passage');
|
||||||
|
|
||||||
|
let ret = true;
|
||||||
|
|
||||||
|
if (!title.value.length) { title.classList.add('input-error'); ret = false; }
|
||||||
|
if (!date.value) { date.classList.add('input-error'); ret = false; }
|
||||||
|
if (!parseInt(speaker.value)) { speaker.classList.add('input-error'); ret = false; }
|
||||||
|
if (!parseInt(series.value)) { series.classList.add('input-error'); ret = false; }
|
||||||
|
if (!psg.value) { psg.classList.add('input-error'); ret = false; }
|
||||||
|
if (!note.value.length) { note.classList.add('input-error'); ret = false; }
|
||||||
|
|
||||||
|
if (!ret) {
|
||||||
|
toggleFields(null, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets the state of the note editor by clearing the text and form fields,
|
||||||
|
* resetting the references, and removing any dirty classes. It also sets the
|
||||||
|
* date to the current date, clears the speaker, series, template, passage,
|
||||||
|
* recording, and note ID fields. Finally, it clears the reference list and
|
||||||
|
* reference display.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function newNote() {
|
||||||
|
notes = document.querySelector('#notes');
|
||||||
|
notes.text = '';
|
||||||
|
notes.value = '';
|
||||||
|
state.references = {};
|
||||||
|
state.saved = true;
|
||||||
|
state.textDirty = false;
|
||||||
|
document.querySelector('#note-header-left h2').classList.remove('dirty');
|
||||||
|
|
||||||
|
dt = new Date();
|
||||||
|
document.querySelector('#noteDate').value = dt.getFullYear() + '-' +
|
||||||
|
(dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' +
|
||||||
|
(dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate());
|
||||||
|
document.querySelector('#noteTitle').value = '';
|
||||||
|
document.querySelector('#speaker').value = 0;
|
||||||
|
document.querySelector('#series').value = 0;
|
||||||
|
document.querySelector('#template').value = 0;
|
||||||
|
document.querySelector('#passage').value = '';
|
||||||
|
document.querySelector('#recording').value = '';
|
||||||
|
document.querySelector('#noteId').value = '';
|
||||||
|
|
||||||
|
document.querySelector('#ref-list').innerHTML = '';
|
||||||
|
document.querySelector('#ref').innerHTML = '';
|
||||||
|
document.querySelector('.toggle').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save a note by sending it to the server for storage.
|
||||||
|
*
|
||||||
|
* @param {Event} event - The event object triggering the save action.
|
||||||
|
* @return {void} No explicit return value.
|
||||||
|
*/
|
||||||
|
export function saveNote(event) {
|
||||||
|
console.debug('called saveNote '+new Date());
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!state.textDirty) {
|
||||||
|
clearTimeout(state.to);
|
||||||
|
state.to = setTimeout(saveNote, state.saveInterval);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('#noteTitle').classList.remove('input-error');
|
||||||
|
document.querySelector('#noteDate').classList.remove('input-error');
|
||||||
|
document.querySelector('#speaker').classList.remove('input-error');
|
||||||
|
document.querySelector('#series').classList.remove('input-error');
|
||||||
|
document.querySelector('#passage').classList.remove('input-error');
|
||||||
|
document.querySelector('#notes').classList.remove('input-error');
|
||||||
|
|
||||||
|
if (!validateNote()) {
|
||||||
|
clearTimeout(state.to);
|
||||||
|
state.to = setTimeout(saveNote, state.saveInterval);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let saveCheck = document.querySelector('#save-check');
|
||||||
|
var noteText = document.querySelector('#notes').value;
|
||||||
|
|
||||||
|
startSave();
|
||||||
|
|
||||||
|
var note = {
|
||||||
|
id: document.querySelector("#noteId").value,
|
||||||
|
date: document.querySelector('#noteDate').value,
|
||||||
|
title: document.querySelector('#noteTitle').value,
|
||||||
|
speaker: document.querySelector('#speaker').value,
|
||||||
|
series: document.querySelector('#series').value,
|
||||||
|
passage: document.querySelector('#passage').value,
|
||||||
|
note: document.querySelector('#notes').value,
|
||||||
|
recording: document.querySelector('#recording').value,
|
||||||
|
refs: references
|
||||||
|
};
|
||||||
|
$.ajax({
|
||||||
|
url: '/save-note',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data: JSON.stringify(note),
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: state.saveTimeout
|
||||||
|
})
|
||||||
|
.done(function (data) {
|
||||||
|
if (data.msg == 'saved' && !state.saved) {
|
||||||
|
state.saveFailureCount = SAVE_FAILURE_LIMIT;
|
||||||
|
saveCheck.classList.remove('saving', 'error', 'fa-times-circle', 'fa-save');
|
||||||
|
showSave();
|
||||||
|
if (noteText == document.querySelector('#notes').value) {
|
||||||
|
state.saved = true;
|
||||||
|
state.textDirty = false;
|
||||||
|
document.querySelector('note-header h2').classList.remove('dirty');
|
||||||
|
document.querySelector('mobile-note-header h2').classList.remove('dirty');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.new) {
|
||||||
|
document.querySelector('#noteId').value = data.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.fail(function (xhr, status, error) {
|
||||||
|
state.saveFailureCount--;
|
||||||
|
saveCheck.classList.remove('saving', 'fa-save');
|
||||||
|
saveCheck.classList.add('fa-times-circle', 'error');
|
||||||
|
console.error(error);
|
||||||
|
})
|
||||||
|
.always(function (xhr, status) {
|
||||||
|
if (status == 'timeout') {
|
||||||
|
saveCheck.classList.remove('saving', 'fa-save');
|
||||||
|
saveCheck.classList.add('error', 'fa-times-circle');
|
||||||
|
}
|
||||||
|
clearTimeout(to);
|
||||||
|
if (state.saveFailureCount > 0) {
|
||||||
|
state.to = setTimeout(saveNote, state.saveInterval);
|
||||||
|
} else {
|
||||||
|
state.saveFailureCount = SAVE_FAILURE_LIMIT;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function that finds reference links and fetches passage data when clicked.
|
||||||
|
*/
|
||||||
|
export function findRefLinks() {
|
||||||
|
var links = document.querySelector('#ref-text').querySelectorAll('a');
|
||||||
|
|
||||||
|
for (var i = 0; i < links.length; i++) {
|
||||||
|
links[i].addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.href.includes('get-passage')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var passage = this.href.split('/');
|
||||||
|
passage = passage[passage.length - 1];
|
||||||
|
|
||||||
|
fetch(this.href, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'passage': passage
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(result => {
|
||||||
|
passage = passage.replace(/\+/g, ' ');
|
||||||
|
psg = passage.split(' ');
|
||||||
|
if (psg.length > 2) {
|
||||||
|
book = psg[0] + ' ' + psg[1];
|
||||||
|
cv = psg[2];
|
||||||
|
} else {
|
||||||
|
book = psg[0];
|
||||||
|
cv = psg[1];
|
||||||
|
}
|
||||||
|
showPassage(
|
||||||
|
e,
|
||||||
|
"<button onclick='closePopup()'>Close</button> " +
|
||||||
|
"<button onclick=\"queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
|
||||||
|
result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Finds all links in the note preview and adds event listeners to them.
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function findLinks() {
|
||||||
|
var links = document.querySelector('#notePreview').querySelectorAll('a');
|
||||||
|
|
||||||
|
for (var i = 0; i < links.length; i++) {
|
||||||
|
links[i].addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.href.includes('get-passage')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var passage = this.href.split('/');
|
||||||
|
passage = passage[passage.length - 1];
|
||||||
|
|
||||||
|
fetch(this.href, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'passage': passage
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(result => {
|
||||||
|
passage = passage.replace(/\+/g, ' ');
|
||||||
|
psg = passage.split(' ');
|
||||||
|
if (psg.length > 2) {
|
||||||
|
book = psg[0] + ' ' + psg[1];
|
||||||
|
cv = psg[2];
|
||||||
|
} else {
|
||||||
|
book = psg[0];
|
||||||
|
cv = psg[1];
|
||||||
|
}
|
||||||
|
showPassage(
|
||||||
|
e,
|
||||||
|
"<button onclick='home.closePopup()'>Close</button> " +
|
||||||
|
"<button onclick=\"home.queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
|
||||||
|
result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opens the share note functionality.
|
||||||
|
*/
|
||||||
|
export function openShareNote() {
|
||||||
|
var id = document.querySelector('#noteId').value;
|
||||||
|
if (!id) {
|
||||||
|
alert('No Open Note Found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
bd = document.querySelector('#modal-backdrop');
|
||||||
|
bd.style.display = 'block';
|
||||||
|
cont = document.querySelector('#modal-container');
|
||||||
|
cont.style.display = bd.style.display;
|
||||||
|
|
||||||
|
emailCont = document.querySelector('#modal-container');
|
||||||
|
emailCont.style.left = ((window.innerWidth / 2) - (emailCont.clientWidth / 2)) + 'px';
|
||||||
|
emailCont.style.top = ((window.innerHeight / 2) - (emailCont.clientHeight / 2)) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the share note modal by hiding the backdrop and container,
|
||||||
|
* and clears the email input value.
|
||||||
|
*/
|
||||||
|
export function closeShareNote() {
|
||||||
|
var bd = document.querySelector('#modal-backdrop');
|
||||||
|
var cont = document.querySelector('#modal-container');
|
||||||
|
bd.style.display = 'none';
|
||||||
|
cont.style.display = 'none';
|
||||||
|
document.querySelector('#shareEmail').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to share a note by sending the note ID and email to the server.
|
||||||
|
*/
|
||||||
|
export function shareNote(event) {
|
||||||
|
var id = document.querySelector('#noteId').value;
|
||||||
|
var email = document.querySelector('#shareEmail').value;
|
||||||
|
if (!id || !email) {
|
||||||
|
alert('Invalid Input');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('/share-note', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'id': id,
|
||||||
|
'email': email
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(result => {
|
||||||
|
if (result) {
|
||||||
|
alert(result.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
closeShareNote();
|
||||||
|
}
|
||||||
|
|
||||||
+212
-5
@@ -1,3 +1,7 @@
|
|||||||
|
import { state } from './state.js';
|
||||||
|
import { closeRef, makeButton } from './home.js';
|
||||||
|
import { saveNote, findRefLinks } from './note.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Retrieves the reference type from the server and populates the reference series dropdown.
|
* Retrieves the reference type from the server and populates the reference series dropdown.
|
||||||
*
|
*
|
||||||
@@ -7,7 +11,7 @@
|
|||||||
export function retrieveReferenceType(el) {
|
export function retrieveReferenceType(el) {
|
||||||
fetch('/reference/' + el.value, {
|
fetch('/reference/' + el.value, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
header: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -41,7 +45,7 @@ export function retrieveReference(el) {
|
|||||||
}
|
}
|
||||||
fetch('/get-reference', {
|
fetch('/get-reference', {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
header: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json"
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
@@ -66,7 +70,7 @@ export function saveReference() {
|
|||||||
let cont = document.querySelector('#reference');
|
let cont = document.querySelector('#reference');
|
||||||
fetch('/save-reference', {
|
fetch('/save-reference', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
header: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
@@ -76,10 +80,213 @@ export function saveReference() {
|
|||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(results => {
|
.then(results => {
|
||||||
//alert(results.msg);
|
|
||||||
|
|
||||||
document.querySelector('#reference').value = '';
|
document.querySelector('#reference').value = '';
|
||||||
document.querySelector('#referenceType').value = '';
|
document.querySelector('#referenceType').value = '';
|
||||||
document.querySelector('#referenceSeries').value = '';
|
document.querySelector('#referenceSeries').value = '';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieves the list of books based on the selected reference type.
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
export function retrieveBooks() {
|
||||||
|
document.querySelector('#chapter-range').innerText = '';
|
||||||
|
document.querySelector('#verse-range').innerText = '';
|
||||||
|
document.querySelector('#referenceSearch').value = '';
|
||||||
|
document.querySelector('#referenceSearch').style.display = 'none';
|
||||||
|
const selectedType = document.querySelector('#referenceType').value;
|
||||||
|
if (!selectedType) { return; }
|
||||||
|
|
||||||
|
var bookList = document.querySelector('#referenceBook');
|
||||||
|
bookList.style.display = "block";
|
||||||
|
bookList.innerHTML = '';
|
||||||
|
if (selectedType == 'bible') {
|
||||||
|
document.querySelector('#referenceSearch').style.display = 'block';
|
||||||
|
var none = document.createElement("option");
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
for (var x in state.BOOKS.bible) {
|
||||||
|
var newBook = document.createElement("option");
|
||||||
|
newBook.text = x;
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
} else if (selectedType == 'creed') {
|
||||||
|
var none = document.createElement('option');
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
for (var x in state.BOOKS.creed) {
|
||||||
|
var newBook = document.createElement('option');
|
||||||
|
newBook.value = x;
|
||||||
|
newBook.text = state.BOOKS.creed[x];
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
} else if (selectedType == 'cd') {
|
||||||
|
var none = document.createElement("option");
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
for (var x in state.BOOKS.cd) {
|
||||||
|
var newBook = document.createElement("option");
|
||||||
|
newBook.text = state.BOOKS.cd[x];
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
} else if (selectedType == 'hc') {
|
||||||
|
var none = document.createElement("option");
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
for (var x in state.BOOKS[selectedType]) {
|
||||||
|
var newBook = document.createElement("optgroup");
|
||||||
|
newBook.label = "Lord's Day " + (parseInt(x) + 1)
|
||||||
|
var ld = document.createElement("option");
|
||||||
|
ld.value = 'ld' + (parseInt(x) + 1);
|
||||||
|
ld.text = "LD " + (parseInt(x) + 1) + " All";
|
||||||
|
newBook.appendChild(ld);
|
||||||
|
|
||||||
|
for (var y in state.BOOKS[selectedType][x]) {
|
||||||
|
var question = document.createElement("option");
|
||||||
|
question.value = 'hc' + state.BOOKS[selectedType][x][y];
|
||||||
|
question.text = "HC" + state.BOOKS[selectedType][x][y];
|
||||||
|
newBook.appendChild(question);
|
||||||
|
}
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
} else if (selectedType == 'note') {
|
||||||
|
var none = document.createElement("option");
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
|
||||||
|
fetch('/retrieve-reference', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'type': 'note'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(results => {
|
||||||
|
for (var x in results) {
|
||||||
|
var newBook = document.createElement("option");
|
||||||
|
newBook.value = results[x].id;
|
||||||
|
newBook.text = results[x].title;
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var min = state.BOOKS[selectedType][0];
|
||||||
|
var max = state.BOOKS[selectedType][1];
|
||||||
|
var none = document.createElement("option");
|
||||||
|
none.value = '';
|
||||||
|
none.text = '-- Select --';
|
||||||
|
bookList.appendChild(none);
|
||||||
|
for (var x = min; x <= max; x++) {
|
||||||
|
var newBook = document.createElement("option");
|
||||||
|
newBook.value = x;
|
||||||
|
newBook.text = x;
|
||||||
|
bookList.appendChild(newBook);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filters the books based on the selected reference type and updates the chapter range.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function filterBooks() {
|
||||||
|
document.querySelector('#chapter-range').innerText = '';
|
||||||
|
document.querySelector('#verse-range').innerText = '';
|
||||||
|
if (document.querySelector('#referenceType').value != 'bible') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bookList = document.querySelector('#referenceBook');
|
||||||
|
var book = state.BOOKS.bible[bookList.value];
|
||||||
|
var max = Object.keys(book).length;
|
||||||
|
|
||||||
|
var chapterRange = document.querySelector('#chapter-range');
|
||||||
|
chapterRange.innerText = 'Chapters: ' + max;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filters the verse based on the selected book and chapter.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function filterVerse() {
|
||||||
|
if (document.querySelector('#referenceType').value != 'bible') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bookList = document.querySelector('#referenceBook').value;
|
||||||
|
var search = document.querySelector('#referenceSearch').value;
|
||||||
|
var chapter = search.split(':')[0];
|
||||||
|
var verseRange = document.querySelector('#verse-range');
|
||||||
|
|
||||||
|
if (!state.BOOKS.bible[bookList] || !state.BOOKS.bible[bookList][chapter]) {
|
||||||
|
verseRange.innerText = 'Unknown Chapter';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var verse = state.BOOKS.bible[bookList][chapter];
|
||||||
|
verseRange.innerText = 'Verse: ' + verse;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetches a reference based on the provided type, book, and input.
|
||||||
|
*
|
||||||
|
* @param {string} type - The type of reference.
|
||||||
|
* @param {string} book - The book of the reference.
|
||||||
|
* @param {string} input - The input for the reference.
|
||||||
|
* @return {void} This function does not return anything directly, but processes the fetched reference data.
|
||||||
|
*/
|
||||||
|
export function queryRef(e, type = null, book = null, input = null) {
|
||||||
|
if (!input) {
|
||||||
|
var input = document.querySelector('#refQuery #referenceSearch').value;
|
||||||
|
}
|
||||||
|
if (!type) {
|
||||||
|
var type = document.querySelector('#referenceType').value;
|
||||||
|
}
|
||||||
|
if (!book) {
|
||||||
|
var book = document.querySelector('#referenceBook').value;
|
||||||
|
}
|
||||||
|
fetch('/retrieve-reference', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'type': type,
|
||||||
|
'book': book,
|
||||||
|
'reference': input,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(results => {
|
||||||
|
const list = document.querySelector('#ref-list');
|
||||||
|
var newList = document.createElement('li');
|
||||||
|
newList.className = 'tab';
|
||||||
|
let button = makeButton(results.title);
|
||||||
|
newList.appendChild(button);
|
||||||
|
list.appendChild(newList);
|
||||||
|
|
||||||
|
const ref = document.querySelector('#ref-text');
|
||||||
|
ref.innerHTML = state.md.render(results.text);
|
||||||
|
|
||||||
|
state.references[results.title] = results.text;
|
||||||
|
|
||||||
|
closeRef();
|
||||||
|
|
||||||
|
state.saved = false;
|
||||||
|
state.textDirty = true;
|
||||||
|
saveNote();
|
||||||
|
findRefLinks();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -10,15 +10,13 @@ registerBtn.addEventListener("click", handleSubmit);
|
|||||||
|
|
||||||
// Function to handle form submission
|
// Function to handle form submission
|
||||||
function handleSubmit(event) {
|
function handleSubmit(event) {
|
||||||
// Prevent default form submission behavior
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
// Validate input
|
// Validate input
|
||||||
const name = nameInput.value;
|
const name = nameInput.value;
|
||||||
const email = emailInput.value;
|
const email = emailInput.value;
|
||||||
const password = passwordInput.value;
|
const password = passwordInput.value;
|
||||||
|
|
||||||
if (name === "" || email === "" || password === "") {
|
if (name === "" || email === "" || password === "") {
|
||||||
|
event.preventDefault();
|
||||||
alert("Please fill in all fields.");
|
alert("Please fill in all fields.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { state } from './state.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A description of the entire function.
|
||||||
|
*/
|
||||||
|
export function newSeries() {
|
||||||
|
if (document.querySelector('#series').value == 'new') {
|
||||||
|
document.querySelector('#newSeries').style.display = 'inline-block';
|
||||||
|
document.querySelector('#series').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
state.saved = false;
|
||||||
|
state.textDirty = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saves a series by making a POST request to '/save-series' with the series name as the request body.
|
||||||
|
*
|
||||||
|
* @param {Event} event - The keydown event.
|
||||||
|
* @return {Promise} A Promise that resolves with the response from the server.
|
||||||
|
*/
|
||||||
|
export function saveSeries(event) {
|
||||||
|
if (event.keyCode == 27) {
|
||||||
|
document.querySelector('#newSeries').style.display = 'none';
|
||||||
|
document.querySelector('#series').style.display = 'inline-block';
|
||||||
|
document.querySelector('#series').value = 0;
|
||||||
|
}
|
||||||
|
if (event.keyCode == 13 && document.querySelector('#newSeries').value != '') {
|
||||||
|
fetch('/save-series', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'seriesName': document.querySelector('#newSeries').value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(results => {
|
||||||
|
var newSeries = document.createElement('option');
|
||||||
|
newSeries.text = document.querySelector('#newSeries').value;
|
||||||
|
newSeries.value = results.id;
|
||||||
|
document.querySelector('#series').add(newSeries);
|
||||||
|
|
||||||
|
alert(results.msg);
|
||||||
|
document.querySelector('#newSeries').style.display = 'none';
|
||||||
|
document.querySelector('#series').style.display = 'inline-block';
|
||||||
|
|
||||||
|
document.querySelector('#newSeries').value = '';
|
||||||
|
document.querySelector('#series').value = results.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { state } from './state.js';
|
||||||
|
/**
|
||||||
|
* Toggles the display of the new speaker input field and hides the speaker select field.
|
||||||
|
*
|
||||||
|
* @return {void} This function does not return anything.
|
||||||
|
*/
|
||||||
|
export function newSpeaker() {
|
||||||
|
if (document.querySelector('#speaker').value == 'new') {
|
||||||
|
document.querySelector('#newSpeaker').style.display = 'inline-block';
|
||||||
|
document.querySelector('#speaker').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
state.saved = false;
|
||||||
|
state.textDirty = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saves a new speaker to the database and updates the UI with the new speaker option.
|
||||||
|
*
|
||||||
|
* @param {Event} event - The keydown event triggered by the user.
|
||||||
|
* @return {Promise} A Promise that resolves with the results of the fetch request.
|
||||||
|
*/
|
||||||
|
export function saveSpeaker(event) {
|
||||||
|
if (event.keyCode == 27) {
|
||||||
|
document.querySelector('#newSpeaker').style.display = 'none';
|
||||||
|
document.querySelector('#speaker').style.display = 'inline-block';
|
||||||
|
document.querySelector('#speaker').value = 0;
|
||||||
|
}
|
||||||
|
if (event.keyCode == 13 && document.querySelector('#newSpeaker').value != '') {
|
||||||
|
fetch('/save-speaker', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
'speakerName': document.querySelector('#newSpeaker').value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(results => {
|
||||||
|
var newSpeaker = document.createElement('option');
|
||||||
|
newSpeaker.text = document.querySelector('#newSpeaker').value;
|
||||||
|
newSpeaker.value = results.id;
|
||||||
|
document.querySelector('#speaker').add(newSpeaker);
|
||||||
|
|
||||||
|
alert(results.msg);
|
||||||
|
document.querySelector('#newSpeaker').style.display = 'none';
|
||||||
|
document.querySelector('#speaker').style.display = 'inline-block';
|
||||||
|
|
||||||
|
document.querySelector('#newSpeaker').value = '';
|
||||||
|
document.querySelector('#speaker').value = results.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
export let state = {
|
||||||
|
textDirty: false,
|
||||||
|
saved: true,
|
||||||
|
references: {},
|
||||||
|
saveTimeout: null,
|
||||||
|
saveInterval: 5000,
|
||||||
|
saveFailureCount: 0,
|
||||||
|
to: null,
|
||||||
|
BOOKS: {},
|
||||||
|
md: null,
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import { state } from "./state.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Retrieves a template from the server and sets it as the value of a specified destination element.
|
* Retrieves a template from the server and sets it as the value of a specified destination element.
|
||||||
*
|
*
|
||||||
@@ -24,6 +26,7 @@ export function retrieveTemplate(orig, dest) {
|
|||||||
.then(results => {
|
.then(results => {
|
||||||
const div = document.querySelector('#' + dest);
|
const div = document.querySelector('#' + dest);
|
||||||
div.value = results;
|
div.value = results;
|
||||||
|
state.textDirty = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Generated
+488
-471
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,11 @@
|
|||||||
twig:
|
twig:
|
||||||
file_name_pattern: '*.twig'
|
file_name_pattern: '*.twig'
|
||||||
|
|
||||||
|
when@dev:
|
||||||
|
twig:
|
||||||
|
debug: true
|
||||||
|
cache: false
|
||||||
|
|
||||||
when@test:
|
when@test:
|
||||||
twig:
|
twig:
|
||||||
strict_variables: true
|
strict_variables: true
|
||||||
|
|||||||
@@ -34,4 +34,25 @@ return [
|
|||||||
'datatables' => [
|
'datatables' => [
|
||||||
'version' => '1.10.18',
|
'version' => '1.10.18',
|
||||||
],
|
],
|
||||||
|
'ref' => [
|
||||||
|
'path' => './assets/js/reference.js',
|
||||||
|
],
|
||||||
|
'home' => [
|
||||||
|
'path' => './assets/js/home.js',
|
||||||
|
],
|
||||||
|
'note' => [
|
||||||
|
'path' => './assets/js/note.js',
|
||||||
|
],
|
||||||
|
'state' => [
|
||||||
|
'path' => './assets/js/state.js',
|
||||||
|
],
|
||||||
|
'series' => [
|
||||||
|
'path' => './assets/js/series.js',
|
||||||
|
],
|
||||||
|
'speaker' => [
|
||||||
|
'path' => './assets/js/speaker.js',
|
||||||
|
],
|
||||||
|
'template' => [
|
||||||
|
'path' => './assets/js/template.js',
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -0,0 +1,216 @@
|
|||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Sermon Notes{% endblock %}
|
||||||
|
|
||||||
|
{% block stylesheets %}
|
||||||
|
<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
|
||||||
|
<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
|
||||||
|
<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
|
||||||
|
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link href="//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
#notes,
|
||||||
|
#notePreview {
|
||||||
|
font-size: {{ meta.noteTextSize }}pt;
|
||||||
|
}
|
||||||
|
.input-error {
|
||||||
|
/* border: solid 2px red !important; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block javascripts %}
|
||||||
|
<script src="{{ asset('js/jquery.min.js') }}"></script>
|
||||||
|
<script src="{{ asset('js/jquery-ui.js') }}"></script>
|
||||||
|
<script src="{{ asset('js/browser.min.js') }}"></script>
|
||||||
|
<script src="{{ asset('js/breakpoints.min.js') }}"></script>
|
||||||
|
<script src="{{ asset('js/util.js') }}"></script>
|
||||||
|
{#<script src="{{ asset('js/main.js') }}"></script>#}
|
||||||
|
<script src="//momentjs.com/downloads/moment-with-locales.js"></script>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
|
||||||
|
|
||||||
|
{{ importmap('app') }}
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import * as ref from "{{ asset('js/reference.js') }}";
|
||||||
|
import * as home from "{{ asset('js/home.js') }}";
|
||||||
|
import * as note from "{{ asset('js/note.js') }}";
|
||||||
|
import { state } from "{{ asset('js/state.js') }}";
|
||||||
|
import * as series from "{{ asset('js/series.js') }}";
|
||||||
|
import * as speaker from "{{ asset('js/speaker.js') }}";
|
||||||
|
import * as template from "{{ asset('js/template.js') }}";
|
||||||
|
window.ref = ref;
|
||||||
|
window.home = home;
|
||||||
|
window.note = note;
|
||||||
|
window.state = state;
|
||||||
|
window.series = series;
|
||||||
|
window.speaker = speaker;
|
||||||
|
window.template = template;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
home.initHome();
|
||||||
|
|
||||||
|
state.saveInterval = ({{ meta.saveInterval }} * 1000);
|
||||||
|
state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
|
||||||
|
const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
|
||||||
|
state.saveFailureCount = {{ meta.saveFailureCount }};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% include('default/sidebar.html.twig') %}
|
||||||
|
|
||||||
|
<div id="query"></div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="ref-btn-header"> </div>
|
||||||
|
<div class="ref-btn bottom-row">
|
||||||
|
<ul id="ref-list" class="ref-list"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-note-header">
|
||||||
|
<h2>Notes</h2>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="mobile-dark-mode-checkbox"/>
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
<button id="mobile-open-ref" class="button">
|
||||||
|
<i class="fa fa-book"></i>
|
||||||
|
</button>
|
||||||
|
<button id="mobile-show-hide-btn" class="button">
|
||||||
|
<i class="fa fa-table"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="ref-header">
|
||||||
|
<h2>Reference</h2>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="dark-mode-checkbox"/>
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
<div class="ref-header-buttons">
|
||||||
|
<button id="increaseFont"><i class="fa fa-plus"></i></button>
|
||||||
|
<button id="decreaseFont"><i class="fa fa-minus"></i></button>
|
||||||
|
<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></div>
|
||||||
|
<div id="note-list">
|
||||||
|
<table id="note-table" data-order='[[ 3, "desc" ]]'>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>Speaker</th>
|
||||||
|
<th>Passage</th>
|
||||||
|
<th>Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="note-header">
|
||||||
|
<div class="note-header-column">
|
||||||
|
<h2>Notes</h2>
|
||||||
|
<i id="save-check" class="fa fa-save"></i>
|
||||||
|
</div>
|
||||||
|
<div class="note-header-column">
|
||||||
|
<button id="previewBtn" class="button">
|
||||||
|
<i class="fa fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
<button id="show-hide-btn" class="button">
|
||||||
|
<i class="fa fa-table"></i>
|
||||||
|
</button>
|
||||||
|
<button id="shareBtn" class="button">
|
||||||
|
<i class="fas fa-share-alt"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="note-header-column">
|
||||||
|
<div class="dropdown" id="templateDropdown">
|
||||||
|
<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
|
||||||
|
<option value="0">-- Template --</option>
|
||||||
|
{% for t in app.user.templates %}
|
||||||
|
<option value="{{ t.id }}">{{ t.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notes bottom-row">
|
||||||
|
<div class="fields-container">
|
||||||
|
<input type="hidden" id="noteId" value="">
|
||||||
|
<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
|
||||||
|
<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
|
||||||
|
<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
|
||||||
|
<input type="text" id="recording" placeholder="Recording link...">
|
||||||
|
<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
|
||||||
|
<div class="dropdown" id="speakerDropdown">
|
||||||
|
<select id="speaker" onchange="speaker.newSpeaker()">
|
||||||
|
<option value="0">-- Speaker --</option>
|
||||||
|
<option value="new">New Speaker</option>
|
||||||
|
{% for s in speakers %}
|
||||||
|
<option value="{{ s.id }}">{{ s.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
|
||||||
|
<div class="dropdown" id="seriesDropdown">
|
||||||
|
<select id="series" onchange="series.newSeries()">
|
||||||
|
<option value="0">-- Series --</option>
|
||||||
|
<option value="new">New Series</option>
|
||||||
|
{% for s in series %}
|
||||||
|
<option value="{{ s.id }}">{{ s.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="note-text">
|
||||||
|
<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
|
||||||
|
</div>
|
||||||
|
<div id="notePreview"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="refQuery">
|
||||||
|
<select id="referenceType" onchange="ref.retrieveBooks()">
|
||||||
|
<option>-- Select --</option>
|
||||||
|
<option value="bible">Bible</option>
|
||||||
|
<option value="creed">Various Creed</option>
|
||||||
|
<option value="bc">Belgic Confession</option>
|
||||||
|
<option value="hc">Heidelberg Catechism</option>
|
||||||
|
<option value="cd">Canons of Dort</option>
|
||||||
|
<option value="wcf">Westminster Confession of Faith</option>
|
||||||
|
<option value="wsc">Westminster Shorter Catechism</option>
|
||||||
|
<option value="wlc">Westminster Larger Catechism</option>
|
||||||
|
<option value="lbc">London Baptist Confession</option>
|
||||||
|
<option value="39a">Thirty-Nine Articles</option>
|
||||||
|
<option value="1hc">First Helvetic Confession</option>
|
||||||
|
<option value="2hc">Second Helvetic Confession</option>
|
||||||
|
<option value="sd">Savoy Declaration</option>
|
||||||
|
<option value="agc">Augsburg Confession</option>
|
||||||
|
</select>
|
||||||
|
<select id="referenceBook" onchange="ref.filterBooks()" style="display:none;"></select>
|
||||||
|
<span id="chapter-range"></span>
|
||||||
|
<input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
|
||||||
|
<span id="verse-range"></span>
|
||||||
|
<br />
|
||||||
|
<button id="searchBtn">Search</button>
|
||||||
|
<button id="closeSearch">Close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="passage-popup"></div>
|
||||||
|
|
||||||
|
<div id="modal-backdrop" class="modal-backdrop fade in" style="display:none;"></div>
|
||||||
|
|
||||||
|
<div id="modal-container" class="modal-container" style="display:none;">
|
||||||
|
<header class="modal-header">Share Note</header>
|
||||||
|
<form id="emailForm" class="modal-body">
|
||||||
|
<label for="shareEmail">Enter Friends Email:</label>
|
||||||
|
<input type="email" id="shareEmail" name="email" required />
|
||||||
|
<button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
|
||||||
|
</form>
|
||||||
|
<footer class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
@@ -70,4 +70,5 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
<a class='toggle' href='#sidebar' id='sidebar-link'>Toggle</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,7 +18,6 @@
|
|||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% include('default/sidebar.html.twig') %}
|
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
@@ -44,6 +43,7 @@
|
|||||||
value="{{ csrf_token('authenticate') }}"
|
value="{{ csrf_token('authenticate') }}"
|
||||||
>
|
>
|
||||||
<button class="btn btn-lg btn-primary" type="submit">Sign in</button>
|
<button class="btn btn-lg btn-primary" type="submit">Sign in</button>
|
||||||
|
<button class="btn btn-lg btn-primary" id='back'>Back</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user