From 1add97b1b2640d99f29a5a9fc20df9098a097c57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 16:38:08 +0200 Subject: [PATCH 01/69] scrolls to page 100 ms after page load --- client/homebrew/brewRenderer/brewRenderer.jsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 6a4040b4d..e3742a051 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -79,6 +79,82 @@ const BrewRenderer = (props)=>{ return ()=>{window.removeEventListener('resize', updateSize);}; }, []); + + useEffect(() => { + // Extract element ID from the URL + const urlParams = new URLSearchParams(window.location.search); + const elementId = urlParams.get('elementId'); // Assume the URL is like ?elementId=yourElementId + + if (elementId) { + const iframe = document.getElementById('BrewRenderer'); + getPageContainingElement(iframe, elementId) + .then(pageNumber => { + if (pageNumber !== -1) { + scrollToPage(iframe, pageNumber); + } + }) + .catch(error => { + console.error('Error:', error); + }); + } + }, []); + + + const scrollToPage = (iframe, pageNumber) => { + if (iframe && iframe.contentWindow) { + const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); + if (brewRenderer) { + const pages = brewRenderer.querySelectorAll('.page'); + if (pages && pages[pageNumber]) { + pages[pageNumber].scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } + } + }; + + const getPageContainingElement = (iframe, elementId) => { + return new Promise((resolve, reject) => { + if (!iframe || !iframe.contentWindow) { + console.log("iframe doesn't exist or content window is not accessible."); + reject(new Error("iframe doesn't exist or content window is not accessible.")); + return; + } + + iframe.addEventListener('load', () => { + console.log('Iframe has finished loading'); + + const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); + console.log('brewRenderer:', brewRenderer); + if (!brewRenderer) { + console.log("brewRenderer doesn't exist"); + reject(new Error("brewRenderer doesn't exist")); + return; + } + + setTimeout(() => { + const pages = brewRenderer.querySelectorAll('.page'); + console.log('Number of pages found:', pages.length); + + for (let i = 0; i < pages.length; i++) { + if (pages[i].querySelector(`#${elementId}`)) { + console.log('Page containing element found:', i); + resolve(i); + return; + } else { + console.log('Page containing element not found:', i); + } + } + + console.log('Element with ID not found in any page.'); + resolve(-1); + }, 100); // Adjust delay as needed + }); + }); + }; + + + + const updateSize = ()=>{ setState((prevState)=>({ ...prevState, From f9352a94c65c9e8aeecad786bf31cbff79c163c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 16:47:17 +0200 Subject: [PATCH 02/69] "Refactor BrewRenderer: simplify URL param extraction, remove iframe existence checks, and update scrollIntoView behavior" --- client/homebrew/brewRenderer/brewRenderer.jsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index e3742a051..e01b2828f 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -81,9 +81,7 @@ const BrewRenderer = (props)=>{ useEffect(() => { - // Extract element ID from the URL - const urlParams = new URLSearchParams(window.location.search); - const elementId = urlParams.get('elementId'); // Assume the URL is like ?elementId=yourElementId + const elementId = window.location.hash.slice(1); // Remove the leading '#' if (elementId) { const iframe = document.getElementById('BrewRenderer'); @@ -106,7 +104,7 @@ const BrewRenderer = (props)=>{ if (brewRenderer) { const pages = brewRenderer.querySelectorAll('.page'); if (pages && pages[pageNumber]) { - pages[pageNumber].scrollIntoView({ behavior: 'smooth', block: 'start' }); + pages[pageNumber].scrollIntoView({ block: 'start' }); } } } @@ -114,22 +112,10 @@ const BrewRenderer = (props)=>{ const getPageContainingElement = (iframe, elementId) => { return new Promise((resolve, reject) => { - if (!iframe || !iframe.contentWindow) { - console.log("iframe doesn't exist or content window is not accessible."); - reject(new Error("iframe doesn't exist or content window is not accessible.")); - return; - } - iframe.addEventListener('load', () => { - console.log('Iframe has finished loading'); const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); console.log('brewRenderer:', brewRenderer); - if (!brewRenderer) { - console.log("brewRenderer doesn't exist"); - reject(new Error("brewRenderer doesn't exist")); - return; - } setTimeout(() => { const pages = brewRenderer.querySelectorAll('.page'); @@ -137,11 +123,8 @@ const BrewRenderer = (props)=>{ for (let i = 0; i < pages.length; i++) { if (pages[i].querySelector(`#${elementId}`)) { - console.log('Page containing element found:', i); resolve(i); return; - } else { - console.log('Page containing element not found:', i); } } From 3cca38302a6e4dbde3434277606fa3f1ffdd9b45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 17:00:03 +0200 Subject: [PATCH 03/69] "Refactor BrewRenderer component: removed unnecessary code, reorganized useEffect hooks, and simplified getPageContainingElement function." --- client/homebrew/brewRenderer/brewRenderer.jsx | 101 ++++++++++-------- 1 file changed, 54 insertions(+), 47 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index e01b2828f..705aab64d 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -43,7 +43,6 @@ const BrewPage = (props)=>{ ; }; - //v=====--------------------< Brew Renderer Component >-------------------=====v// const renderedPages = []; let rawPages = []; @@ -75,27 +74,46 @@ const BrewRenderer = (props)=>{ rawPages = props.text.split(/^\\page$/gm); } - useEffect(()=>{ // Unmounting steps - return ()=>{window.removeEventListener('resize', updateSize);}; - }, []); - - useEffect(() => { - const elementId = window.location.hash.slice(1); // Remove the leading '#' - - if (elementId) { - const iframe = document.getElementById('BrewRenderer'); - getPageContainingElement(iframe, elementId) - .then(pageNumber => { - if (pageNumber !== -1) { - scrollToPage(iframe, pageNumber); - } - }) - .catch(error => { - console.error('Error:', error); - }); - } - }, []); + const locationHash = window.location.hash; + const iframe = document.getElementById('BrewRenderer'); + + // Regular expression to match page IDs like '#p1' + const pageIdRegex = /^#p\d+$/; + iframe.addEventListener('load', () => { + setTimeout(() => { + if (pageIdRegex.test(locationHash)) { + // Extract page number from the ID + const pageNumber = parseInt(locationHash.slice(2)); + console.log('scrolling to page ', pageNumber); + if (!isNaN(pageNumber)) { + scrollToPage(iframe, pageNumber); + } else { + console.error('Invalid page ID:', locationHash); + } + } else { + // Treat it as an element ID + const elementId = locationHash.slice(1); // Remove the leading '#' + if (elementId) { + getPageContainingElement(iframe, elementId) + .then((pageNumber) => { + if (pageNumber !== -1) { + scrollToPage(iframe, pageNumber); + } + }) + .catch((error) => { + console.error('Error:', error); + }); + } + } + }, 100); + }); + + // Cleanup function for removing the resize event listener + return () => { + window.removeEventListener('resize', updateSize); + }; + }, []); const scrollToPage = (iframe, pageNumber) => { @@ -111,32 +129,21 @@ const BrewRenderer = (props)=>{ }; const getPageContainingElement = (iframe, elementId) => { - return new Promise((resolve, reject) => { - iframe.addEventListener('load', () => { - - const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); - console.log('brewRenderer:', brewRenderer); - - setTimeout(() => { - const pages = brewRenderer.querySelectorAll('.page'); - console.log('Number of pages found:', pages.length); - - for (let i = 0; i < pages.length; i++) { - if (pages[i].querySelector(`#${elementId}`)) { - resolve(i); - return; - } - } - - console.log('Element with ID not found in any page.'); - resolve(-1); - }, 100); // Adjust delay as needed - }); - }); - }; - - + return new Promise((resolve) => { + const brewRenderer = + iframe.contentWindow.document.querySelector('.brewRenderer'); + const pages = brewRenderer.querySelectorAll('.page'); + for (let i = 0; i < pages.length; i++) { + if (pages[i].querySelector(`#${elementId}`)) { + resolve(i); + return; + } + } + console.log('Element with ID not found in any page.'); + resolve(-1); + }); + }; const updateSize = ()=>{ setState((prevState)=>({ @@ -302,4 +309,4 @@ const BrewRenderer = (props)=>{ ); }; -module.exports = BrewRenderer; +module.exports = BrewRenderer; \ No newline at end of file From d012a093460f28e3c9b29111059338aa9b35a7c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 17:06:47 +0200 Subject: [PATCH 04/69] "Refactor BrewRenderer: updated iframe handling and scrolling logic in useEffect and scrollToPage function" --- client/homebrew/brewRenderer/brewRenderer.jsx | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 705aab64d..3808b8653 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -76,7 +76,7 @@ const BrewRenderer = (props)=>{ useEffect(() => { const locationHash = window.location.hash; - const iframe = document.getElementById('BrewRenderer'); + const iframe = document.getElementById('BrewRenderer'); // Regular expression to match page IDs like '#p1' const pageIdRegex = /^#p\d+$/; @@ -85,12 +85,7 @@ const BrewRenderer = (props)=>{ if (pageIdRegex.test(locationHash)) { // Extract page number from the ID const pageNumber = parseInt(locationHash.slice(2)); - console.log('scrolling to page ', pageNumber); - if (!isNaN(pageNumber)) { - scrollToPage(iframe, pageNumber); - } else { - console.error('Invalid page ID:', locationHash); - } + scrollToPage(iframe, pageNumber); } else { // Treat it as an element ID const elementId = locationHash.slice(1); // Remove the leading '#' @@ -117,16 +112,19 @@ const BrewRenderer = (props)=>{ const scrollToPage = (iframe, pageNumber) => { - if (iframe && iframe.contentWindow) { - const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); - if (brewRenderer) { - const pages = brewRenderer.querySelectorAll('.page'); - if (pages && pages[pageNumber]) { - pages[pageNumber].scrollIntoView({ block: 'start' }); - } - } - } - }; + if (iframe && iframe.contentWindow) { + const brewRenderer = + iframe.contentWindow.document.querySelector('.brewRenderer'); + if (brewRenderer) { + const pages = brewRenderer.querySelectorAll('.page'); + if (pageNumber > pages.length) { + console.log('page not found'); + } else { + pages[pageNumber].scrollIntoView({ block: 'start' }); + } + } + } + }; const getPageContainingElement = (iframe, elementId) => { return new Promise((resolve) => { From acbdd1b801a778cb9af5455ad6f4ddbcdabd543b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 17:13:29 +0200 Subject: [PATCH 05/69] "Removed iframe parameter from scrollToPage and getPageContainingElement functions, instead getting iframe element by id 'BrewRenderer' inside the functions." --- client/homebrew/brewRenderer/brewRenderer.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 3808b8653..88d60432d 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -85,15 +85,15 @@ const BrewRenderer = (props)=>{ if (pageIdRegex.test(locationHash)) { // Extract page number from the ID const pageNumber = parseInt(locationHash.slice(2)); - scrollToPage(iframe, pageNumber); + scrollToPage(pageNumber); } else { // Treat it as an element ID const elementId = locationHash.slice(1); // Remove the leading '#' if (elementId) { - getPageContainingElement(iframe, elementId) + getPageContainingElement(elementId) .then((pageNumber) => { if (pageNumber !== -1) { - scrollToPage(iframe, pageNumber); + scrollToPage(pageNumber); } }) .catch((error) => { @@ -111,7 +111,8 @@ const BrewRenderer = (props)=>{ }, []); - const scrollToPage = (iframe, pageNumber) => { + const scrollToPage = (pageNumber) => { + const iframe = document.getElementById('BrewRenderer'); if (iframe && iframe.contentWindow) { const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); @@ -126,7 +127,8 @@ const BrewRenderer = (props)=>{ } }; - const getPageContainingElement = (iframe, elementId) => { + const getPageContainingElement = (elementId) => { + const iframe = document.getElementById('BrewRenderer'); return new Promise((resolve) => { const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); From 8efea112b446def451f307244d68513c88538239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 20:22:14 +0200 Subject: [PATCH 06/69] "Updated scrollToPage argument to add 1 to pageNumber" --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 88d60432d..73036d9ab 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -85,7 +85,7 @@ const BrewRenderer = (props)=>{ if (pageIdRegex.test(locationHash)) { // Extract page number from the ID const pageNumber = parseInt(locationHash.slice(2)); - scrollToPage(pageNumber); + scrollToPage(pageNumber+1); } else { // Treat it as an element ID const elementId = locationHash.slice(1); // Remove the leading '#' From 90b504d67d7464c25f34a51850dd78d16e563ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 31 May 2024 20:26:12 +0200 Subject: [PATCH 07/69] Oops --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 73036d9ab..b1fdd3957 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -85,7 +85,7 @@ const BrewRenderer = (props)=>{ if (pageIdRegex.test(locationHash)) { // Extract page number from the ID const pageNumber = parseInt(locationHash.slice(2)); - scrollToPage(pageNumber+1); + scrollToPage(pageNumber-1); } else { // Treat it as an element ID const elementId = locationHash.slice(1); // Remove the leading '#' From f449132b4c446e3c1659d26578156e7668ed5752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 14 Aug 2024 20:38:38 +0200 Subject: [PATCH 08/69] wrap correctly --- client/homebrew/editor/editor.less | 1 + client/homebrew/editor/snippetbar/snippetbar.less | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index f8dc249d6..b2e96683e 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -2,6 +2,7 @@ .editor { position : relative; width : 100%; + container: editor / inline-size; .codeEditor { height : 100%; diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index e0a24fac9..19d4c3d4f 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -2,11 +2,18 @@ @import (less) '././././themes/fonts/5e/fonts.less'; .snippetBar { - @menuHeight : 25px; + @menuHeight : 25px; position : relative; height : @menuHeight; color : black; background-color : #DDDDDD; + min-width : 331px; + + @container editor (width < 538px) { + display : flex; + flex-wrap : wrap; + height : 50px; + } .editors { position : absolute; @@ -15,6 +22,11 @@ display : flex; justify-content : space-between; height : @menuHeight; + + @container editor (width < 538px) { + position : static; + } + & > div { width : @menuHeight; height : @menuHeight; From bbe56bf4435b3f68550e3387b2812a78cb725304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 14 Aug 2024 20:39:15 +0200 Subject: [PATCH 09/69] linting --- client/homebrew/editor/snippetbar/snippetbar.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 19d4c3d4f..86e4c9ffc 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -4,10 +4,10 @@ .snippetBar { @menuHeight : 25px; position : relative; + min-width : 331px; height : @menuHeight; color : black; background-color : #DDDDDD; - min-width : 331px; @container editor (width < 538px) { display : flex; @@ -139,11 +139,11 @@ cursor : pointer; .animate(background-color); i { + min-width : 25px; height : 1.2em; margin-right : 8px; font-size : 1.2em; - min-width: 25px; - text-align: center; + text-align : center; & ~ i { margin-right : 0; margin-left : 5px; From cc76ff147843fccb7f1f9c5c40140bf2b2e04f49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 15 Aug 2024 12:07:55 +0200 Subject: [PATCH 10/69] relocated container query --- .../editor/snippetbar/snippetbar.less | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 86e4c9ffc..7180da562 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -9,12 +9,6 @@ color : black; background-color : #DDDDDD; - @container editor (width < 538px) { - display : flex; - flex-wrap : wrap; - height : 50px; - } - .editors { position : absolute; top : 0px; @@ -22,10 +16,6 @@ display : flex; justify-content : space-between; height : @menuHeight; - - @container editor (width < 538px) { - position : static; - } & > div { width : @menuHeight; @@ -201,4 +191,17 @@ } } } +} + +@container editor (width < 538px) { + + .snippetBar { + display : flex; + flex-wrap : wrap; + height : 50px; + + .editors { + position : static; + } + } } \ No newline at end of file From 1f41745d2b47267db25ee5105f220f68e0c41998 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 23 Aug 2024 13:37:12 +0200 Subject: [PATCH 11/69] "Refactored Snippetbar component: updated JSX structure, added div wrapper for snippets, changed CSS styles for editors and snippets" --- .../homebrew/editor/snippetbar/snippetbar.jsx | 64 ++++++++++--------- .../editor/snippetbar/snippetbar.less | 10 ++- 2 files changed, 42 insertions(+), 32 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index af493c961..dd45f0773 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -125,19 +125,23 @@ const Snippetbar = createClass({ renderSnippetGroups : function(){ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); - return _.map(snippets, (snippetGroup)=>{ - return ; - }); + return
+ {_.map(snippets, (snippetGroup)=>{ + return ; + }) + } +
}, + renderEditorButtons : function(){ if(!this.props.showEditButtons) return; @@ -158,23 +162,6 @@ const Snippetbar = createClass({ } return
-
- -
-
- -
-
- {foldButtons} -
- - {this.state.themeSelector && this.renderThemeSelector()} -
- -
this.props.onViewChange('text')}> @@ -186,14 +173,33 @@ const Snippetbar = createClass({
this.props.onViewChange('meta')}> +
+
+ {foldButtons} +
+ + {this.state.themeSelector && this.renderThemeSelector()}
+ +
+
+ +
+
+ +
+
; }, render : function(){ return
- {this.renderSnippetGroups()} {this.renderEditorButtons()} + {this.renderSnippetGroups()} +
; } }); diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 7180da562..7b0754a07 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -8,11 +8,15 @@ height : @menuHeight; color : black; background-color : #DDDDDD; + display: flex; - .editors { + .snippets { position : absolute; top : 0px; right : 0px; + } + + .editors { display : flex; justify-content : space-between; height : @menuHeight; @@ -107,7 +111,7 @@ .tooltipLeft('Edit Brew Properties'); } .snippetGroup { - border-right : 1px solid currentColor; + border-left : 1px solid currentColor; &:hover { & > .dropdown { visibility : visible; } } @@ -200,7 +204,7 @@ flex-wrap : wrap; height : 50px; - .editors { + .snippets { position : static; } } From 3360b4e829592e5c2dc3116e2ea430d85584784a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 7 Sep 2024 19:12:59 +0200 Subject: [PATCH 12/69] refctor logic --- client/homebrew/brewRenderer/brewRenderer.jsx | 70 ++++++++++--------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 2aa494828..e391e237f 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -76,40 +76,44 @@ const BrewRenderer = (props)=>{ } useEffect(() => { - const locationHash = window.location.hash; - const iframe = document.getElementById('BrewRenderer'); + const locationHash = window.location.hash; + const iframe = document.getElementById('BrewRenderer'); + + const pageIdRegex = /^#p\d+$/; + + const handleIframeLoad = () => { + setTimeout(() => { + if (pageIdRegex.test(locationHash)) { + const pageNumber = parseInt(locationHash.slice(2)); + scrollToPage(pageNumber - 1); + } else { + const elementId = locationHash.slice(1); + if (elementId) { + getPageContainingElement(elementId) + .then((pageNumber) => { + if (pageNumber !== -1) { + scrollToPage(pageNumber); + } + }) + .catch((error) => { + console.error('Error:', error); + }); + } + } + }, 100); + }; + + if (locationHash) { + iframe.addEventListener('load', handleIframeLoad); + } - // Regular expression to match page IDs like '#p1' - const pageIdRegex = /^#p\d+$/; - iframe.addEventListener('load', () => { - setTimeout(() => { - if (pageIdRegex.test(locationHash)) { - // Extract page number from the ID - const pageNumber = parseInt(locationHash.slice(2)); - scrollToPage(pageNumber-1); - } else { - // Treat it as an element ID - const elementId = locationHash.slice(1); // Remove the leading '#' - if (elementId) { - getPageContainingElement(elementId) - .then((pageNumber) => { - if (pageNumber !== -1) { - scrollToPage(pageNumber); - } - }) - .catch((error) => { - console.error('Error:', error); - }); - } - } - }, 100); - }); - - // Cleanup function for removing the resize event listener - return () => { - window.removeEventListener('resize', updateSize); - }; - }, []); + return () => { + if (locationHash) { + iframe.removeEventListener('load', handleIframeLoad); + } + window.removeEventListener('resize', updateSize); + }; + }, []); const scrollToPage = (pageNumber) => { From e213eb0a78cdc8611b64ee5b0c44fd26210a546d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 15 Sep 2024 18:37:27 +0200 Subject: [PATCH 13/69] "Refactor BrewRenderer: removed iframe load event listener, simplified page scrolling logic, and inlined getPageContainingElement functionality" --- client/homebrew/brewRenderer/brewRenderer.jsx | 62 ++++++------------- 1 file changed, 19 insertions(+), 43 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 416337a61..ad628651e 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -79,44 +79,38 @@ const BrewRenderer = (props)=>{ useEffect(() => { const locationHash = window.location.hash; - const iframe = document.getElementById('BrewRenderer'); - const pageIdRegex = /^#p\d+$/; - const handleIframeLoad = () => { - setTimeout(() => { + console.log(state); + + if (locationHash) { + if (state.isMounted) { if (pageIdRegex.test(locationHash)) { const pageNumber = parseInt(locationHash.slice(2)); scrollToPage(pageNumber - 1); } else { const elementId = locationHash.slice(1); if (elementId) { - getPageContainingElement(elementId) - .then((pageNumber) => { - if (pageNumber !== -1) { - scrollToPage(pageNumber); - } - }) - .catch((error) => { - console.error('Error:', error); - }); + const element = document.getElementById(elementId); + console.log(element); + if (element) { + + const page = element.closest(".page"); + // Ensure `page` exists before proceeding + if (page) { + console.log(page.getAttribute("Id").slice(1)); + scrollToPage(page.getAttribute("Id").slice(1)); + } + } } } - }, 100); - }; - - if (locationHash) { - iframe.addEventListener('load', handleIframeLoad); - } - - return () => { - if (locationHash) { - iframe.removeEventListener('load', handleIframeLoad); } + } + + return () => { window.removeEventListener('resize', updateSize); }; - }, []); - + }, [state.isMounted]); const scrollToPage = (pageNumber) => { const iframe = document.getElementById('BrewRenderer'); @@ -133,24 +127,6 @@ const BrewRenderer = (props)=>{ } } }; - - const getPageContainingElement = (elementId) => { - const iframe = document.getElementById('BrewRenderer'); - return new Promise((resolve) => { - const brewRenderer = - iframe.contentWindow.document.querySelector('.brewRenderer'); - const pages = brewRenderer.querySelectorAll('.page'); - for (let i = 0; i < pages.length; i++) { - if (pages[i].querySelector(`#${elementId}`)) { - resolve(i); - return; - } - } - - console.log('Element with ID not found in any page.'); - resolve(-1); - }); - }; const updateSize = ()=>{ setState((prevState)=>({ From 2e5ebb861eb63e648edc002ad288b2370ee08de2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 17 Sep 2024 19:50:39 +0200 Subject: [PATCH 14/69] simplify logic --- client/homebrew/brewRenderer/brewRenderer.jsx | 74 +++++-------------- 1 file changed, 18 insertions(+), 56 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 12ac31794..7c5ac3a1b 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -78,56 +78,17 @@ const BrewRenderer = (props)=>{ } useEffect(() => { - const locationHash = window.location.hash; - const pageIdRegex = /^#p\d+$/; - - console.log(state); - - if (locationHash) { - if (state.isMounted) { - if (pageIdRegex.test(locationHash)) { - const pageNumber = parseInt(locationHash.slice(2)); - scrollToPage(pageNumber - 1); - } else { - const elementId = locationHash.slice(1); - if (elementId) { - const element = document.getElementById(elementId); - console.log(element); - if (element) { - - const page = element.closest(".page"); - // Ensure `page` exists before proceeding - if (page) { - console.log(page.getAttribute("Id").slice(1)); - scrollToPage(page.getAttribute("Id").slice(1)); - } - } - } - } - } + const elementId = window.location.hash.slice(1); + if (elementId && state.isMounted) { + const element = document.getElementById(elementId); + element.scrollIntoView({ block: 'start' }); } - + return () => { window.removeEventListener('resize', updateSize); }; }, [state.isMounted]); - const scrollToPage = (pageNumber) => { - const iframe = document.getElementById('BrewRenderer'); - if (iframe && iframe.contentWindow) { - const brewRenderer = - iframe.contentWindow.document.querySelector('.brewRenderer'); - if (brewRenderer) { - const pages = brewRenderer.querySelectorAll('.page'); - if (pageNumber > pages.length) { - console.log('page not found'); - } else { - pages[pageNumber].scrollIntoView({ block: 'start' }); - } - } - } - }; - const updateSize = ()=>{ setState((prevState)=>({ ...prevState, @@ -135,6 +96,19 @@ const BrewRenderer = (props)=>{ })); }; + const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" + setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame + updateSize(); + window.addEventListener('resize', updateSize); + renderPages(); //Make sure page is renderable before showing + setState((prevState)=>({ + ...prevState, + isMounted : true, + visibility : 'visible' + })); + }, 100); + }; + const updateCurrentPage = useCallback(_.throttle((e)=>{ const { scrollTop, clientHeight, scrollHeight } = e.target; const totalScrollableHeight = scrollHeight - clientHeight; @@ -207,18 +181,6 @@ const BrewRenderer = (props)=>{ } }; - const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" - setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame - updateSize(); - window.addEventListener('resize', updateSize); - renderPages(); //Make sure page is renderable before showing - setState((prevState)=>({ - ...prevState, - isMounted : true, - visibility : 'visible' - })); - }, 100); - }; const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside if(!window || !document) return; From 6456c22c61dbb93234987fc09e486637b57df512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Oct 2024 21:33:26 +0200 Subject: [PATCH 15/69] testing mutation Observer, don't review this yet --- client/homebrew/brewRenderer/brewRenderer.jsx | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 7c5ac3a1b..8d63c1e0c 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -16,8 +16,8 @@ const Frame = require('react-frame-component').default; const dedent = require('dedent-tabs').default; const { printCurrentBrew } = require('../../../shared/helpers.js'); -const DOMPurify = require('dompurify'); -const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false }; +//const DOMPurify = require('dompurify'); +//const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false }; const PAGE_HEIGHT = 1056; @@ -77,17 +77,42 @@ const BrewRenderer = (props)=>{ rawPages = props.text.split(/^\\page$/gm); } - useEffect(() => { + useEffect(()=>{ + const iframeDoc = document.getElementById('brewRenderer'); + const hash = window.location.hash; + console.log(hash); + if(hash && iframeDoc) { + const anchor = iframeDoc.querySelector(hash); + + if(anchor) { + anchor.scrollIntoView(); + } else { + // Use MutationObserver to wait for the element if it's not immediately available + const observer = new MutationObserver((mutations, obs)=>{ + const anchorElement = iframeDoc.querySelector(hash); + if(anchorElement) { + anchorElement.scrollIntoView(); + obs.disconnect(); // Stop observing once the element is found + } + }); + + observer.observe(iframeDoc, { + childList : true, + subtree : true, + }); + } + } + /* const elementId = window.location.hash.slice(1); - if (elementId && state.isMounted) { + if(elementId && state.isMounted) { const element = document.getElementById(elementId); element.scrollIntoView({ block: 'start' }); } - - return () => { + */ + return ()=>{ window.removeEventListener('resize', updateSize); }; - }, [state.isMounted]); + }, []); const updateSize = ()=>{ setState((prevState)=>({ From 55b5c1e71334397a91ed70c59fed1da0cfcfd1b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 10 Oct 2024 01:16:50 +0200 Subject: [PATCH 16/69] types react apparently needed? --- package-lock.json | 23 +++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index d9d24565a..c5b9488c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ }, "devDependencies": { "@stylistic/stylelint-plugin": "^3.1.1", + "@types/react": "^18.3.11", "eslint": "^9.12.0", "eslint-plugin-jest": "^28.8.3", "eslint-plugin-react": "^7.37.1", @@ -3125,6 +3126,22 @@ "undici-types": "~6.13.0" } }, + "node_modules/@types/prop-types": { + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.3.11", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz", + "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", @@ -5138,6 +5155,12 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, "node_modules/dash-ast": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz", diff --git a/package.json b/package.json index bc0b9fea2..39d0d47ce 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ }, "devDependencies": { "@stylistic/stylelint-plugin": "^3.1.1", + "@types/react": "^18.3.11", "eslint": "^9.12.0", "eslint-plugin-jest": "^28.8.3", "eslint-plugin-react": "^7.37.1", @@ -139,4 +140,4 @@ "stylelint-config-recommended": "^14.0.1", "supertest": "^7.0.0" } -} \ No newline at end of file +} From 656c9399ef4228d3a04105f3b0c48c76439e0aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 10 Oct 2024 02:06:00 +0200 Subject: [PATCH 17/69] initial commit --- .../notificationAdd/notificationAdd.jsx | 2 +- .../notificationLookup/notificationLookup.jsx | 6 +- client/components/dialog.jsx | 29 ++++--- .../notificationPopup/notificationPopup.jsx | 77 ++++++++++++------- .../notificationPopup/notificationPopup.less | 5 +- server/admin.api.js | 2 + 6 files changed, 78 insertions(+), 43 deletions(-) diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx b/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx index 5a8ebf5d0..0cca1047e 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx +++ b/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx @@ -66,7 +66,7 @@ const NotificationAdd = ()=>{ diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx b/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx index 71f8da59c..05f81b776 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx +++ b/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx @@ -14,9 +14,6 @@ const NotificationDetail = ({ notification, onDelete })=>(
Title
{notification.title || 'No Title'}
-
Text
-
{notification.text || 'No Text'}
-
Created
{Moment(notification.createdAt).format('LLLL')}
@@ -25,6 +22,9 @@ const NotificationDetail = ({ notification, onDelete })=>(
Stop
{Moment(notification.stopAt).format('LLLL') || 'No End Time'}
+ +
Text
+
{notification.text || 'No Text'}
diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 2057ecb87..bf3dabaed 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,22 +1,29 @@ // Dialog box, for popups and modal blocking messages -const React = require('react'); -const { useRef, useEffect } = React; +import React from "react"; // Correct the import statement +const { useRef, useEffect } = React; // Use React instead of react -function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { +function Dialog({ dismissKeys, closeText = 'Close', blocking = false, ...rest }) { const dialogRef = useRef(null); useEffect(()=>{ - if(!dismissKey || !localStorage.getItem(dismissKey)) { - blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); - } - }, []); + blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); + }, [dialogRef.current]); - const dismiss = ()=>{ - dismissKey && localStorage.setItem(dismissKey, true); + console.log(dismissKeys); + if (dismissKeys.length === 0) { + return null; + } + + const dismiss = () => { + dismissKeys.forEach(key => { + if (key) { + localStorage.setItem(key, 'true'); + } + }); dialogRef.current?.close(); }; - - return ( + console.log('rendering'); + return ( {rest.children}