From cfba193aac2d8a70d15be801cf0e4ebe39f80fd2 Mon Sep 17 00:00:00 2001 From: Ryan Date: Mon, 15 Apr 2024 23:43:15 -0400 Subject: [PATCH] add styles and js --- public/css/style.css | 121 ++++++++++++++++++ public/css/style.css.map | 1 + public/css/style.min.css | 1 + public/css/style.min.css.map | 1 + public/css/style.scss | 130 +++++++++++++++++++ public/js/script.js | 235 +++++++++++++++++++++++++++++++++++ 6 files changed, 489 insertions(+) create mode 100644 public/css/style.css create mode 100644 public/css/style.css.map create mode 100644 public/css/style.min.css create mode 100644 public/css/style.min.css.map create mode 100644 public/css/style.scss create mode 100644 public/js/script.js diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..1d424c9 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,121 @@ +/* Style for the 3-column layout */ +body { + margin: 0; +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + align-content: flex-start; + max-width: 1020px; + /* Adjust to your desired width */ + margin: 0 auto; +} + +.top-tab { + height: 50px; + width: 100%; +} + +/* Style for hamburger menu */ +.hamburger { + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0 15px 15px; + border: black solid 1px; + cursor: pointer; + border-radius: 5px; + width: 20px; + height: 20px; + padding: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); +} + +.fa-check { + color: green; +} + +.fa-bars:before, +.fa-navicon:before { + padding: 3px; +} + +ul.menu-open { + display: block !important; + background-color: #f9c74d; + padding: 10px; + z-index: 100; + list-style: none; + list-style-type: none; + position: fixed; +} + +.ref-tab { + width: 60px; +} + +.tab button { + display: flex; + justify-content: flex-start; + align-items: center; + height: 100px; + width: 100%; + cursor: pointer; + text-align: center; +} + +.ref-tab ul { + margin: 0; + padding: 0; +} + +.ref-tab ul li { + list-style: none; + list-style-type: none; +} + +.ref { + width: 35%; +} + +.ref > div#ref { + overflow-y: scroll; + width: 100%; + height: 100%; + border: black solid 1px; + border-radius: 3px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); +} + +.notes { + width: 55%; +} + +textarea#notes { + width: 100%; + height: 100%; +} + +div#refQuery { + display: none; + position: absolute; + z-index: 100; + background-color: rgba(0, 0, 0, 0.5); +} + +div#refQuery #search { + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + line-height: 1.5; + color: #333; + background-color: #f4f4f4; + width: 150px; + height: 25px; + cursor: pointer; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/public/css/style.css.map b/public/css/style.css.map new file mode 100644 index 0000000..ccb2786 --- /dev/null +++ b/public/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,wCAAA;ACAJ;;ADGA;EACI,YAAA;ACAJ;;ADGA;;EAEI,YAAA;ACAJ;;ADIA;EACI,yBAAA;EACA,yBAAA;EACA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,eAAA;ACDJ;;ADWA;EACI,WAAA;ACRJ;;ADWA;EACI,aAAA;EACA,2BAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;ACRJ;;ADWA;EACI,SAAA;EACA,UAAA;ACRJ;;ADWA;EACI,gBAAA;EACA,qBAAA;ACRJ;;ADWA;EACI,UAAA;ACRJ;;ADWA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACRJ;;ADWA;EACI,UAAA;ACRJ;;ADWA;EACI,WAAA;EACA,YAAA;ACRJ;;ADWA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACRJ;;ADWA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACRJ","file":"style.css"} \ No newline at end of file diff --git a/public/css/style.min.css b/public/css/style.min.css new file mode 100644 index 0000000..27acf7e --- /dev/null +++ b/public/css/style.min.css @@ -0,0 +1 @@ +body{margin:0}.container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.top-tab{height:50px;width:100%}.hamburger{display:flex;justify-content:space-between;align-items:center;margin:15px 0 15px 15px;border:#000 solid 1px;cursor:pointer;border-radius:5px;width:20px;height:20px;padding:5px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.fa-bars:before,.fa-navicon:before{padding:3px}ul.menu-open{display:block !important;background-color:#f9c74d;padding:10px;z-index:100;list-style:none;list-style-type:none;position:fixed}.ref-tab{width:60px}.tab button{display:flex;justify-content:flex-start;align-items:center;height:100px;width:100%;cursor:pointer;text-align:center}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.ref{width:35%}.ref>div#ref{overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.notes{width:55%}textarea#notes{width:100%;height:100%}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5)}div#refQuery #search{border:none;border-radius:5px;padding:10px 20px;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f4;width:150px;height:25px;cursor:pointer}/*# sourceMappingURL=style.min.css.map */ \ No newline at end of file diff --git a/public/css/style.min.css.map b/public/css/style.min.css.map new file mode 100644 index 0000000..0748a04 --- /dev/null +++ b/public/css/style.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAGJ,WACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,WAAA,CACA,UAAA,CAKJ,WACI,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,uBAAA,CACA,qBAAA,CACA,cAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,mCAAA,CAGJ,mCAEI,WAAA,CAIJ,aACI,wBAAA,CACA,wBAAA,CACA,YAAA,CACA,WAAA,CACA,eAAA,CACA,oBAAA,CACA,cAAA,CAUJ,SACI,UAAA,CAGJ,YACI,YAAA,CACA,0BAAA,CACA,kBAAA,CACA,YAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,SAAA,CAGJ,aACI,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA","file":"style.min.css"} \ No newline at end of file diff --git a/public/css/style.scss b/public/css/style.scss new file mode 100644 index 0000000..b6721ee --- /dev/null +++ b/public/css/style.scss @@ -0,0 +1,130 @@ +/* Style for the 3-column layout */ +body { + margin: 0; +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + align-content: flex-start; + max-width: 1020px; + /* Adjust to your desired width */ + margin: 0 auto; +} + +.top-tab { + height: 50px; + width: 100%; +} + +/* Style for hamburger menu */ + +.hamburger { + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0 15px 15px; + border: black solid 1px; + cursor: pointer; + border-radius: 5px; + width: 20px; + height: 20px; + padding: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); +} + +.fa-check { + color: green; +} + +.fa-bars:before, +.fa-navicon:before { + padding: 3px; +} + +// Display the menu links +ul.menu-open { + display: block !important; + background-color: #f9c74d; + padding: 10px; + z-index: 100; + list-style: none; + list-style-type: none; + position: fixed; +} + +.ref-tab, +.ref, +.notes { + // float: left; + // padding: 20px; +} + +.ref-tab { + width: 60px; +} + +.tab button { + display: flex; + justify-content: flex-start; + align-items: center; + height: 100px; + width: 100%; + cursor: pointer; + text-align: center; +} + +.ref-tab ul { + margin: 0; + padding: 0; +} + +.ref-tab ul li { + list-style: none; + list-style-type: none; +} + +.ref { + width: 35%; +} + +.ref>div#ref { + overflow-y: scroll; + width: 100%; + height: 100%; + border: black solid 1px; + border-radius: 3px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); +} + +.notes { + width: 55% +} + +textarea#notes { + width: 100%; + height: 100%; +} + +div#refQuery { + display: none; + position: absolute; + z-index: 100; + background-color: rgba(0, 0, 0, 0.5); +} + +div#refQuery #search { + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + line-height: 1.5; + color: #333; + background-color: #f4f4f4; + width: 150px; + height: 25px; + cursor: pointer; +} \ No newline at end of file diff --git a/public/js/script.js b/public/js/script.js new file mode 100644 index 0000000..c96df8c --- /dev/null +++ b/public/js/script.js @@ -0,0 +1,235 @@ +// Get the link element +const link = document.querySelector('.hamburger'); +var converter = null; +var references = {}; + +// Add an event listener to the link +if (link) { + link.addEventListener('click', function () { + // Toggle the class of the link to open or close the menu + document.querySelector('ul.hamburger-list').classList.toggle('menu-open'); + }); +} + +function setHeight() { + converter = new showdown.Converter(); + converter.setFlavor('github'); + + body = document.querySelector('body'); + body.style.height = window.innerHeight + 'px'; + + cont = document.querySelector('.container'); + cont.style.height = (window.innerHeight - 50) + 'px'; + + tabs = document.querySelector('.ref-tab'); + tabs.style.height = (window.innerHeight - 60) + 'px'; + + ref = document.querySelector('.ref'); + ref.style.height = (window.innerHeight - 125) + 'px'; + + notes = document.querySelector('.notes'); + notes.style.height = (window.innerHeight - 150) + 'px'; + + setTimeout(saveNote, 5000); +} + +function newNote() { + notes = document.querySelector('.notes'); + notes.textContent = ''; +} + +function openNote() { + +} + +function saveNote(event) { + event.preventDefault(); + + if(!validateNote()) { + setTimeout(saveNote, 5000); + return; + } + fetch('/index.php/save-note', { + method: 'POST', + headers: { + "Content-Type": 'application/x-www-form-urlencoded' + }, + body: { + title: document.querySelector('#noteTitle').value, + speaker: document.querySelector('#speaker').value, + series: document.querySelector('#series').value, + note: document.querySelector('#notes').textContent + } + .then(response => response.text) + .then(results => { + results = JSON.parse(results); + alert(results); + showSave(); + }) + }); + setTimeout(saveNote, 5000); +} + +function validateNote() { + const note = document.querySelector('#notes'); + const speaker = document.querySelector('#speaker'); + const series = document.querySelector('#series'); + const title = document.querySelector('#noteTitle'); + + if(!title.value.length) {return false;} + + if(!speaker.value) {return false;} + + if(!series.value) {return false;} + + if(!note.textContent.length) {return false;} + + return true; +} + +function showSave() {// Get the element that will display the checkmark + var checkmark = document.getElementById("save-check"); + + // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration) + setInterval(function() { + // Increment the opacity of the checkmark by 0.01 each time + checkmark.style.opacity += 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 >= 1) { + checkmark.style.opacity = 0; + clearInterval(setInterval); + } + }, 100); +} + +/** + * Function to discard the note by clearing all input fields and closing the menu. + */ +function discardNote() { + document.querySelector('#noteTitle').value = ''; + document.querySelector('#speaker').value = 0; + document.querySelector('#series').value = 0; + document.querySelector('#template').value = 0; + document.querySelector('#notes').value = ''; + + openRef(); +} + +function openRef() { + refQuery = document.querySelector('#refQuery'); + if (refQuery.style.display === 'block') { + refQuery.style.display = 'none'; + } else { + refQuery.style.display = 'block'; + } + + menu = document.querySelector('ul.hamburger-list'); + refQuery.style.left = (menu.clientLeft + menu.clientWidth) + 'px'; + refQuery.style.top = (menu.clientTop + menu.clientHeight) + 'px'; +} + +function queryRef() { + const input = document.querySelector('#refQuery #search'); + fetch('/index.php/retrieve-reference', { + method: 'POST', + headers: { + 'Content-Type': 'plain/text' + }, + body: JSON.stringify({ + 'reference': input.value + }) + }) + .then(response => response.text()) + .then(results => { + results = JSON.parse(results); + + const list = document.querySelector('#ref-list'); + var newList = document.createElement('li'); + newList.className = 'tab'; + var button = document.createElement('button'); + button.innerText = results.title; + button.onclick = function () { + document.querySelector('#ref').innerHTML = converter.makeHtml(references[button.innerText]); + } + button.ondblclick = function () { + document.querySelector('#ref').innerHTML = ''; + delete references[results.title]; + var list = button.parentElement; + list.remove(); + } + newList.appendChild(button); + list.appendChild(newList); + + const ref = document.querySelector('#ref'); + ref.innerHTML = converter.makeHtml(results.text); + + references[results.title] = results.text; + + input.value = ''; + openRef(); + link.click(); + }); +} + +function retrieveTemplate(orig, dest) { + const temp = document.querySelector('#' + orig); + if (temp.value == '0') { + document.querySelector('#' + dest).value = ''; + return; + } + fetch('/index.php/retrieve-template', { + method: 'POST', + headers: { + 'Content-Type': 'plain/text' + }, + body: JSON.stringify({ + 'template': temp.value + }) + }) + .then(response => response.text()) + .then(results => { + const div = document.querySelector('#' + dest); + div.value = results; + }); +} + +/** + * Saves the template by sending a POST request to the server with template data. + */ +function saveTemplate() { + fetch('/index.php/save-template', { + method: 'POST', + headers: { + 'Content-Type': 'plain/text' + }, + body: JSON.stringify({ + 'template_id': document.querySelector('#template_id').value, + 'template_name': document.querySelector('#template_name').value, + 'template_value': document.querySelector('#template_value').value, + }) + }) + .then(response => response.text()) + .then(results => { + alert(results); + }); +} + +function retrieveSeries() { + +} + +function saveSeries() { + +} + +function retrieveSpeaker() { + +} + +function saveSpeaker() { + +} + +function referenceEditor() { +}