From 8a8c6c71f773da03d5dc5b299c57d548c8d8fe92 Mon Sep 17 00:00:00 2001 From: Darius Rapalis Date: Wed, 7 Sep 2022 00:58:24 +0300 Subject: [PATCH] Implemented note list --- Twitch Notes/twitch-notes.css | 10 +++ Twitch Notes/twitch-notes.js | 112 +++++++++++++++++++++++++++++++--- 2 files changed, 115 insertions(+), 7 deletions(-) diff --git a/Twitch Notes/twitch-notes.css b/Twitch Notes/twitch-notes.css index 7d55def..d21d286 100644 --- a/Twitch Notes/twitch-notes.css +++ b/Twitch Notes/twitch-notes.css @@ -285,3 +285,13 @@ max-width: 90vw; overflow: auto; } + +.twitch-notes-user-list-user { + padding: 1rem; + border-bottom: var(--border-width-default) solid var(--color-border-base) !important; + cursor: pointer; +} + +.twitch-notes-user-list-user[data-active] { + background: #772ce833; +} diff --git a/Twitch Notes/twitch-notes.js b/Twitch Notes/twitch-notes.js index 996e887..38563b7 100644 --- a/Twitch Notes/twitch-notes.js +++ b/Twitch Notes/twitch-notes.js @@ -51,6 +51,104 @@ settings: {}, })); }, + showAllNotes: () => { + let activeNote = null; + const blurredBackground = createElement('div', null, 'twitch-notes-blurred-background'); + const container = createElement('div', null, 'twitch-notes-center-floating-container', { + padding: '0', + paddingTop: '1rem', + width: '100%', + height: 'calc(320px + 5rem)' + }); + const closeButton = createElement('button', xButton, 'twitch-notes-settings-close-button', { + position: 'absolute', + top: '1rem', + right: '1rem', + }); + + const title = createElement('div', 'Notes:', 'twitch-note-title', { + borderBottom: '1px solid #FFFFFF19', + paddingBottom: '1rem', + }); + container.appendChild(title); + + const content = createElement('div', null, null, { + display: 'flex', + flexDirection: 'row', + flexWrap: 'no-wrap', + width: '100%', + height: '320px' + }); + container.appendChild(content); + closeButton.addEventListener('click', () => { + blurredBackground.remove(); + }); + container.appendChild(closeButton); + + const userList = createElement('div', null, null, { + borderRight: '1px solid #FFFFFF19', + height: '320px', + minWidth: '240px', + overflowY: 'auto', + overflowX: 'hidden', + }); + + const noteContainer = createElement('div', null, null, { + height: '320px', + padding: '1rem', + width: '100%', + opacity: '0', + }); + + const note = createElement('div', null, null, { + marginBottom: '3rem', + border: '1px solid #FFFFFF19', + height: 'calc(320px - 7rem)', + width: '100%', + padding: '6px', + outline: 'none', + overflowY: 'auto', + overflowX: 'hidden', + }, { + contentEditable: 'true', + }); + const saveNote = createElement('button', 'Save Note', 'twitch-notes-settings-button', { + position: 'absolute', + bottom: '1rem', + left: '1rem' + }); + + saveNote.addEventListener('click', () => { + if(!activeNote) { + return; + } + Notes.saveNote(activeNote, note.innerHTML); + }) + + for(let user of Notes.getSavedUserList()) { + const userLine = createElement('div', user, 'twitch-notes-user-list-user'); + userLine.addEventListener('click', () => { + const list = document.getElementsByClassName('twitch-notes-user-list-user'); + for(let i = 0; i < list.length; i++) { + list.item(i).removeAttribute('data-active'); + } + userLine.setAttribute('data-active', 'true'); + noteContainer.style.opacity = '1'; + note.innerHTML = Notes.getNote(user); + activeNote = user; + }); + userList.appendChild(userLine); + } + + noteContainer.appendChild(note); + noteContainer.appendChild(saveNote); + + content.appendChild(userList); + content.appendChild(noteContainer); + + blurredBackground.appendChild(container); + document.body.appendChild(blurredBackground); + }, importNotesConflictResolve: (user, resultsContainer, container, blurredBackground) => { const diffBlurredBackground = createElement('div', null, 'twitch-notes-blurred-background'); const diffContainer = createElement('div', 'Select which note to keep for ' + user + '
You can modify notes to merge them and keep updated one

', 'twitch-notes-center-floating-container'); @@ -65,7 +163,8 @@ const valueStyle = { minWidth: '320px', padding: '6px', - border: '1px solid #FFFFFF19' + border: '1px solid #FFFFFF19', + outline: 'none', }; const valueAttr = {contentEditable: 'true'}; @@ -273,7 +372,7 @@ document.body.appendChild(blurredBackground); }, openAllNotes: () => { - console.log('TODO: Implement Open All Notes functionality'); + Notes.showAllNotes(); } } @@ -507,10 +606,10 @@ const openAllNotes = createChatSettingsLine('View All Notes'); settingsContent.appendChild(openAllNotes); - exportNotes.addEventListener('click', Notes.exportNotes); - importNotes.addEventListener('click', Notes.importNotes); - clearData.addEventListener('click', Notes.clearAllData); - openAllNotes.addEventListener('click', Notes.openAllNotes); + exportNotes.addEventListener('click', () => {Notes.exportNotes(); toggleSettings()}); + importNotes.addEventListener('click', () => {Notes.importNotes(); toggleSettings()}); + clearData.addEventListener('click', () => {Notes.clearAllData(); toggleSettings()}); + openAllNotes.addEventListener('click', () => {Notes.openAllNotes(); toggleSettings()}); settingsPopover.appendChild(settingsScrollableArea); @@ -532,7 +631,6 @@ settingsWindow.style.display = 'block'; settingsWindowOpen = true; } - console.log('toggle settings'); } const xButton = ``;