From 838c8881ff0aa463ffd7532bdd5ba38ac99ecd62 Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Mon, 4 Nov 2024 21:21:12 +0100 Subject: [PATCH 1/6] started working on responsive overlay (adding desktop version) --- static/css/home.css | 37 +++++++++++- static/js/common.js | 7 +++ static/js/nearYouOverlay.js | 117 +++++++++++++++++++++++++++++++++--- 3 files changed, 153 insertions(+), 8 deletions(-) diff --git a/static/css/home.css b/static/css/home.css index f149419..6d1662b 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -307,7 +307,7 @@ body{ } /* nearYouMobileOverlay */ -#nearYouMobileOverlay { +#nearYouMobileOverlay.mobile { position: fixed; z-index: 999; bottom: -90%; /* Initially at 10% visible */ @@ -327,6 +327,41 @@ body{ box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.5); } +#nearYouMobileOverlay.desktop { + height: 90vh; /* 100% Full-height */ + width: 0; /* 0 width - change this with JavaScript */ + position: fixed; /* Stay in place */ + z-index: 1; /* Stay on top */ + top: 10vh; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + background-color: rgb(255, 255, 255); + overflow-x: hidden; /* Disable horizontal scroll */ + padding-top: 60px; /* Place content 60px from the top */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ + transition-timing-function: 'ease-in'; +} + +/* desktop button */ +#nearYouToggleButton { + position: fixed; + top: 15vh; + right: 50px; + z-index: 1000; /* Ensures it stays above other elements */ + background-color:#61518f; + color:#ffffff; + border: none; + border-radius: 5px; + padding: 0.5rem 0.5rem; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5rem; +} + + #nearYouMobileLine { margin-top: 0.5rem; width: 10%; diff --git a/static/js/common.js b/static/js/common.js index e4ed4f1..aa6a3ec 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -15,6 +15,8 @@ const emailInput = document.getElementsByClassName('successEmail')[0]; const nearYouButton = document.getElementsByClassName('nearYouButton')[0]; +const mobileThreshold = 768; + var imageFile; var selectedLogo; var selectedLogoId; @@ -22,3 +24,8 @@ var emailCode; var pointersOnMap = []; var logoIcons = []; + +// Define the function before the event listener +function isMobile() { + return window.innerWidth <= mobileThreshold; +} \ No newline at end of file diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index 539ecce..cabd19e 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -7,6 +7,7 @@ var Overlay = L.Class.extend({ // Overylay constructor initialize: function (selector, options) { this.isActive = false; + this.currentlyMobile = isMobile(); this._selector = selector; this._dragStartY = 0; this._overlayHeight = 0; @@ -14,7 +15,14 @@ var Overlay = L.Class.extend({ this._overlayElement = this.createOverlayElement(); document.body.appendChild(this._overlayElement); - this.addTouchEventListeners(); + this._desktopOpenButton = this.addDesktopOpenButton(); + + if (this.currentlyMobile) { + this.switchToMobile(); + } + else { + this.switchToDesktop(); + } }, // Create overlay structure @@ -22,7 +30,6 @@ var Overlay = L.Class.extend({ const overlayElement = document.createElement('div'); overlayElement.id = 'nearYouMobileOverlay'; - // Assign this._line here to make sure it's accessible this._line = this.createElement('img', 'nearYouMobileLine', { src: './static/img/line.svg' }); overlayElement.appendChild(this._line); @@ -36,6 +43,83 @@ var Overlay = L.Class.extend({ return overlayElement; }, + addDesktopOpenButton: function () { + var self = this; + + // Create a button to open/close the sidebar + let toggleButton = document.createElement('button'); + toggleButton.style.display = 'none'; + toggleButton.id = 'nearYouToggleButton'; + toggleButton.innerHTML = 'Show Stickers'; + document.body.appendChild(toggleButton); + + toggleButton.addEventListener('click', function() { + if (self.isActive === false) { + self.openDesktopSidebar(); + } else { + self.closeDesktopSidebar(); + } + }); + + + return toggleButton; + }, + + switchToMobile: function () { + this.currentlyMobile = true; + this.closeDesktopSidebar(); + this._overlayElement.style.width = "100%"; + this._overlayElement.classList.remove('desktop'); + this._overlayElement.classList.add('mobile'); + + this._line.style.display + this.addTouchEventListeners(); + console.log("added touch listeners!"); + + this._desktopOpenButton.style.display = 'none'; + }, + + switchToDesktop: function () { + this.currentlyMobile = false; + this.closeMobileOverlay(); + this._overlayElement.style.width = "0"; + this._overlayElement.classList.remove('mobile'); + this._overlayElement.classList.add('desktop'); + this.removeTouchEventListeners(); + console.log("removed touch listeners!"); + + this._line.style.display = 'none'; + this._desktopOpenButton.style.display = 'block'; + }, + + openDesktopSidebar: function () { + // this._overlayElement.style.width = '300px'; + // this._overlayElement.style.borderRadius = '0px'; + // this._overlayElement.style.overflowY = 'auto'; + // this._line.style.display = 'none'; + // this._overlayElement.style.top = '0'; + // this._overlayElement.style.right = '0'; + // this._overlayElement.style.right = '300px'; + // this._overlayElement.style.right = '300px'; + this._overlayElement.style.width = "500px"; + this._overlayElement.style.marginLeft = "0"; + + if (!this.isActive) { + this.getNearYouData(); + } + this.isActive = true; + }, + + closeDesktopSidebar: function () { + this.isActive = false; + this._overlayElement.style.width = "0"; + this._overlayElement.style.marginLeft = "0"; + // this._overlayElement.style.width = '0'; + // this._overlayElement.style.borderRadius = '15px 15px 0px 0px'; + // this._overlayElement.style.overflowY = 'hidden'; + // this._line.style.display = 'block'; + }, + // Helper to create elements with attributes createElement: function (tagName, id, attributes = {}) { const element = document.createElement(tagName); @@ -78,6 +162,15 @@ var Overlay = L.Class.extend({ this._overlayElement.addEventListener('touchend', this.onTouchEnd.bind(self)); }, + removeTouchEventListeners: function () { + const self = this; + + // Use named functions for event listeners + this._overlayElement.removeEventListener('touchstart', this.onTouchStart.bind(self)); + this._overlayElement.removeEventListener('touchmove', this.onTouchMove.bind(self)); + this._overlayElement.removeEventListener('touchend', this.onTouchEnd.bind(self)); + }, + onTouchStart: function (e) { this._dragStartY = e.touches[0].clientY; this._overlayHeight = this._overlayElement.clientHeight; @@ -96,14 +189,14 @@ var Overlay = L.Class.extend({ const snapThreshold = -this._overlayHeight * SNAP_THRESHOLD; // Snap when dragged beyond SNAP_THRESHOLD% of the overlay height if (parseInt(this._overlayElement.style.bottom) < snapThreshold) { - this.closeOverlay(); + this.closeMobileOverlay(); } else { - this.openOverlay(); + this.openMobileOverlay(); } }, - openOverlay: function () { + openMobileOverlay: function () { this._overlayElement.style.bottom = '0'; this._overlayElement.style.borderRadius = '0px 0px 0px 0px'; this._overlayElement.style.overflowY = 'auto'; @@ -114,7 +207,8 @@ var Overlay = L.Class.extend({ this.isActive = true; }, - closeOverlay: function () { + closeMobileOverlay: function () { + console.log("closing moblie overlay!"); this.isActive = false; this._overlayElement.style.bottom = '-90%'; this._overlayElement.style.borderRadius = '15px 15px 0px 0px'; @@ -222,7 +316,7 @@ var Overlay = L.Class.extend({ }, handleOpenOnMapClick: function (stickerID, lat, long) { - this.closeOverlay(); + this.closeMobileOverlay(); mymap.flyTo([lat, long], 18); // Stickers are loaded in only when they're in you view @@ -283,3 +377,12 @@ var Overlay = L.Class.extend({ }); var overlay = new Overlay('#overlay'); + +window.addEventListener('resize', function() { + if (isMobile() && !overlay.currentlyMobile) { + console.log(overlay.currentlyMobile); + overlay.switchToMobile(); + } else { + overlay.switchToDesktop(); + } +}); \ No newline at end of file From bba8b6de4b45c32ed36072293d37a91e97c268ea Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Mon, 11 Nov 2024 18:40:33 +0100 Subject: [PATCH 2/6] Made a desktop version of the near you overlay --- server.py | 3 - static/css/home.css | 65 ++++++++++++---- static/js/main.js | 1 - static/js/nearYouOverlay.js | 144 +++++++++++++++++++----------------- 4 files changed, 127 insertions(+), 86 deletions(-) diff --git a/server.py b/server.py index 2890799..a9d3edd 100644 --- a/server.py +++ b/server.py @@ -190,7 +190,6 @@ def editLogo(): con.commit() return json.dumps({'status': '200', 'error': 'Logo updated!'}), 200 - @app.route('/deleteLogo', methods=['DELETE']) def deleteLogo(): # Check if the request contains an valid admin token @@ -361,8 +360,6 @@ def updateStickerSpots(): else: return json.dumps({'status': '400', 'error': 'Updating sticker spots failed'}), 400 - - def sendEmailUpdate(): return 0 # TODO not implemented diff --git a/static/css/home.css b/static/css/home.css index 6d1662b..87619cc 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -310,28 +310,26 @@ body{ #nearYouMobileOverlay.mobile { position: fixed; z-index: 999; - bottom: -90%; /* Initially at 10% visible */ + bottom: -90%; left: 0; width: 100%; - height: 100%; /* Full screen height */ + height: 100%; background-color: rgb(255, 255, 255); - /* border: 5px solid #61518f; */ - transition: bottom 0.5s, border-radius 0.5s; /* Transition for sliding */ + transition: bottom 0.5s, border-radius 0.5s; transition-timing-function: 'ease-in'; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - /* Enable scrolling if content exceeds screen height */ border-radius: 30px 30px 0px 0px; box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.5); } #nearYouMobileOverlay.desktop { - height: 90vh; /* 100% Full-height */ - width: 0; /* 0 width - change this with JavaScript */ - position: fixed; /* Stay in place */ - z-index: 1; /* Stay on top */ + height: 90vh; + width: 0; + position: fixed; + z-index: 1; top: 10vh; right: 0; display: flex; @@ -339,18 +337,43 @@ body{ align-items: center; justify-content: flex-start; background-color: rgb(255, 255, 255); - overflow-x: hidden; /* Disable horizontal scroll */ - padding-top: 60px; /* Place content 60px from the top */ - transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ + overflow-x: hidden; + padding-top: 60px; + transition: 0.5s; transition-timing-function: 'ease-in'; } +#nearYouMobileOverlay.desktop.active { + width: 500px; + margin-left: 0; +} + +#nearYouMobileOverlay.desktop.inactive { + width: 0; + margin-left: 0; +} + +#nearYouMobileOverlay.mobile.active { + /* top: 0; */ + bottom: 0; + border-radius: 0px 0px 0px 0px; + overflow-y: auto; +} + +#nearYouMobileOverlay.mobile.inactive { + /* top: 90%; */ + bottom: -90%; + border-radius: 15px 15px 0px 0px; + overflow-y: hidden; +} + /* desktop button */ -#nearYouToggleButton { +#nearYouDesktopToggleButton.desktop { + display: block; position: fixed; top: 15vh; right: 50px; - z-index: 1000; /* Ensures it stays above other elements */ + z-index: 1000; background-color:#61518f; color:#ffffff; border: none; @@ -361,12 +384,24 @@ body{ margin-bottom: 0.5rem; } +#nearYouDesktopToggleButton.mobile { + display: none; +} -#nearYouMobileLine { +#nearYouMobileLine.mobile { + display: block; margin-top: 0.5rem; width: 10%; } +#nearYouMobileLine.mobile.active { + display: none; +} + +#nearYouMobileLine.desktop { + display: none; +} + #nearYouMobileTopText { margin-top: 0.5rem; } diff --git a/static/js/main.js b/static/js/main.js index af0b145..ccad8c5 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -64,7 +64,6 @@ // } // logoSourceRequest.send(); - //Update email function updateEmail(){ if(emailInput.value != ''){ diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index cabd19e..7f39c1b 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -7,12 +7,13 @@ var Overlay = L.Class.extend({ // Overylay constructor initialize: function (selector, options) { this.isActive = false; - this.currentlyMobile = isMobile(); + this.currentlyMobile = isMobile(); this._selector = selector; this._dragStartY = 0; this._overlayHeight = 0; this._overlayElement = this.createOverlayElement(); + document.body.appendChild(this._overlayElement); this._desktopOpenButton = this.addDesktopOpenButton(); @@ -40,6 +41,9 @@ var Overlay = L.Class.extend({ this.createStickerDiv(i, overlayElement); } + overlayElement.classList.add('inactive'); + overlayElement.classList.remove('active'); + return overlayElement; }, @@ -47,13 +51,13 @@ var Overlay = L.Class.extend({ var self = this; // Create a button to open/close the sidebar - let toggleButton = document.createElement('button'); - toggleButton.style.display = 'none'; - toggleButton.id = 'nearYouToggleButton'; - toggleButton.innerHTML = 'Show Stickers'; - document.body.appendChild(toggleButton); + let _desktopOpenButton = document.createElement('button'); + _desktopOpenButton.classList.add('desktop'); + _desktopOpenButton.id = 'nearYouDesktopToggleButton'; + _desktopOpenButton.innerHTML = 'Show Stickers'; + document.body.appendChild(_desktopOpenButton); - toggleButton.addEventListener('click', function() { + _desktopOpenButton.addEventListener('click', function() { if (self.isActive === false) { self.openDesktopSidebar(); } else { @@ -61,48 +65,72 @@ var Overlay = L.Class.extend({ } }); - - return toggleButton; + return _desktopOpenButton; }, switchToMobile: function () { this.currentlyMobile = true; this.closeDesktopSidebar(); - this._overlayElement.style.width = "100%"; + console.log("SWITCHTOMOBILE"); this._overlayElement.classList.remove('desktop'); this._overlayElement.classList.add('mobile'); + this._desktopOpenButton.classList.remove('desktop'); + this._desktopOpenButton.classList.add('mobile'); + this._line.classList.remove('desktop'); + this._line.classList.add('mobile'); - this._line.style.display this.addTouchEventListeners(); - console.log("added touch listeners!"); - - this._desktopOpenButton.style.display = 'none'; }, switchToDesktop: function () { this.currentlyMobile = false; this.closeMobileOverlay(); - this._overlayElement.style.width = "0"; this._overlayElement.classList.remove('mobile'); this._overlayElement.classList.add('desktop'); + this._desktopOpenButton.classList.remove('mobile'); + this._desktopOpenButton.classList.add('desktop'); + this._line.classList.remove('mobile'); + this._line.classList.add('desktop'); + this.removeTouchEventListeners(); - console.log("removed touch listeners!"); + }, - this._line.style.display = 'none'; - this._desktopOpenButton.style.display = 'block'; + openMobileOverlay: function () { + this._overlayElement.classList.add('active'); + this._overlayElement.classList.remove('inactive'); + this._line.classList.add('active'); + this._line.classList.remove('inactive'); + + // This styling needs to be in the javascript because it needs to override the onTouchMove function + this._overlayElement.style.bottom = "0"; + + if (!this.isActive) { + this.getNearYouData(); + } + + this.isActive = true; + }, + + closeMobileOverlay: function () { + this._overlayElement.classList.add('inactive'); + this._overlayElement.classList.remove('active'); + this._line.classList.add('inactive'); + this._line.classList.remove('active'); + this.isActive = false; + + // This styling needs to be in the javascript because it needs to override the onTouchMove function + this._overlayElement.style.bottom = "-90%"; + + this._overlayElement.scrollTo(0, 0); + let stickerDivs = document.querySelectorAll('.stickerDiv'); + stickerDivs.forEach(div => div.classList.remove('revealed')); }, openDesktopSidebar: function () { - // this._overlayElement.style.width = '300px'; - // this._overlayElement.style.borderRadius = '0px'; - // this._overlayElement.style.overflowY = 'auto'; - // this._line.style.display = 'none'; - // this._overlayElement.style.top = '0'; - // this._overlayElement.style.right = '0'; - // this._overlayElement.style.right = '300px'; - // this._overlayElement.style.right = '300px'; - this._overlayElement.style.width = "500px"; - this._overlayElement.style.marginLeft = "0"; + this._overlayElement.classList.add('active'); + this._overlayElement.classList.remove('inactive'); + this._line.classList.add('active'); + this._line.classList.remove('inactive'); if (!this.isActive) { this.getNearYouData(); @@ -111,13 +139,14 @@ var Overlay = L.Class.extend({ }, closeDesktopSidebar: function () { + this._overlayElement.classList.add('inactive'); + this._overlayElement.classList.remove('active'); + this._line.classList.add('inactive'); + this._line.classList.remove('active'); + this.isActive = false; - this._overlayElement.style.width = "0"; - this._overlayElement.style.marginLeft = "0"; - // this._overlayElement.style.width = '0'; - // this._overlayElement.style.borderRadius = '15px 15px 0px 0px'; - // this._overlayElement.style.overflowY = 'hidden'; - // this._line.style.display = 'block'; + let stickerDivs = document.querySelectorAll('.stickerDiv'); + stickerDivs.forEach(div => div.classList.remove('revealed')); }, // Helper to create elements with attributes @@ -155,8 +184,6 @@ var Overlay = L.Class.extend({ addTouchEventListeners: function () { const self = this; - - // Use named functions for event listeners this._overlayElement.addEventListener('touchstart', this.onTouchStart.bind(self)); this._overlayElement.addEventListener('touchmove', this.onTouchMove.bind(self)); this._overlayElement.addEventListener('touchend', this.onTouchEnd.bind(self)); @@ -164,11 +191,15 @@ var Overlay = L.Class.extend({ removeTouchEventListeners: function () { const self = this; - - // Use named functions for event listeners - this._overlayElement.removeEventListener('touchstart', this.onTouchStart.bind(self)); - this._overlayElement.removeEventListener('touchmove', this.onTouchMove.bind(self)); - this._overlayElement.removeEventListener('touchend', this.onTouchEnd.bind(self)); + // this._overlayElement.removeEventListener('touchstart', this.onTouchStart.bind(self)); + // this._overlayElement.removeEventListener('touchmove', this.onTouchMove.bind(self)); + // this._overlayElement.removeEventListener('touchend', this.onTouchEnd.bind(self)); + var oldOverlay = this._overlayElement; + var newOverlay = oldOverlay.cloneNode(true); + oldOverlay.parentNode.replaceChild(newOverlay, oldOverlay); + this._overlayElement = newOverlay; + this._line = this._overlayElement.querySelector("#nearYouMobileLine"); + this._desktopOpenButton = this.overlayElement.querySelector("#nearYouDesktopToggleButton"); }, onTouchStart: function (e) { @@ -189,36 +220,14 @@ var Overlay = L.Class.extend({ const snapThreshold = -this._overlayHeight * SNAP_THRESHOLD; // Snap when dragged beyond SNAP_THRESHOLD% of the overlay height if (parseInt(this._overlayElement.style.bottom) < snapThreshold) { + console.log("closing overlay"); this.closeMobileOverlay(); } else { + console.log("opening overlay"); this.openMobileOverlay(); } }, - - openMobileOverlay: function () { - this._overlayElement.style.bottom = '0'; - this._overlayElement.style.borderRadius = '0px 0px 0px 0px'; - this._overlayElement.style.overflowY = 'auto'; - this._line.style.display = 'none'; - if (!this.isActive) { - this.getNearYouData(); - } - this.isActive = true; - }, - - closeMobileOverlay: function () { - console.log("closing moblie overlay!"); - this.isActive = false; - this._overlayElement.style.bottom = '-90%'; - this._overlayElement.style.borderRadius = '15px 15px 0px 0px'; - this._overlayElement.style.overflowY = 'hidden'; - this._overlayElement.scrollTo(0, 0); - this._line.style.display = 'block'; - let stickerDivs = document.querySelectorAll('.stickerDiv'); - stickerDivs.forEach(div => div.classList.remove('revealed')); - }, - handleGeolocationError: function (error) { console.error(`Geolocation error: ${error.message}`); alert("Geolocation is not supported by this browser."); @@ -380,9 +389,10 @@ var overlay = new Overlay('#overlay'); window.addEventListener('resize', function() { if (isMobile() && !overlay.currentlyMobile) { - console.log(overlay.currentlyMobile); overlay.switchToMobile(); - } else { + } + + else if (!isMobile() && overlay.currentlyMobile) { overlay.switchToDesktop(); } }); \ No newline at end of file From fe33f963d1bc17a26eac7d71d1e442e41fe3d4e6 Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Tue, 12 Nov 2024 21:14:18 +0100 Subject: [PATCH 3/6] removed switching to mobile/desktop bugs and redid the desktop sidebar --- server.py | 1 - static/css/home.css | 31 +++++++++++++++++++++---------- static/js/nearYouOverlay.js | 36 ++++++++++++++++++++---------------- 3 files changed, 41 insertions(+), 27 deletions(-) diff --git a/server.py b/server.py index a9d3edd..39907a9 100644 --- a/server.py +++ b/server.py @@ -176,7 +176,6 @@ def getLogos(): # results = cursor.execute('SELECT * FROM logos ORDER BY logoTitle DESC').fetchall() # return json.dumps(results) - @app.route('/editLogo', methods=['PATCH']) def editLogo(): # Check if the request contains an valid admin token diff --git a/static/css/home.css b/static/css/home.css index 87619cc..7f40cf9 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -327,30 +327,31 @@ body{ #nearYouMobileOverlay.desktop { height: 90vh; - width: 0; + width: 40vw; position: fixed; z-index: 1; top: 10vh; - right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: rgb(255, 255, 255); overflow-x: hidden; - padding-top: 60px; + padding-top: 1rem; transition: 0.5s; transition-timing-function: 'ease-in'; } #nearYouMobileOverlay.desktop.active { - width: 500px; + /* width: 500px; */ + left: 60vw; margin-left: 0; } #nearYouMobileOverlay.desktop.inactive { - width: 0; - margin-left: 0; + /* width: 0; */ + /* margin-left: -500px; */ + left: 100vw; } #nearYouMobileOverlay.mobile.active { @@ -372,7 +373,6 @@ body{ display: block; position: fixed; top: 15vh; - right: 50px; z-index: 1000; background-color:#61518f; color:#ffffff; @@ -382,28 +382,39 @@ body{ margin-left: auto; margin-right: auto; margin-bottom: 0.5rem; + transition: 0.5s; + transition-timing-function: 'ease-in'; +} + +#nearYouDesktopToggleButton.desktop.inactive { + right: 5vw; +} + +#nearYouDesktopToggleButton.desktop.active { + right: 45vw; } #nearYouDesktopToggleButton.mobile { display: none; } -#nearYouMobileLine.mobile { +#nearYouMobileOverlay.mobile > #nearYouMobileLine { display: block; margin-top: 0.5rem; width: 10%; } -#nearYouMobileLine.mobile.active { +#nearYouMobileOverlay.mobile.active > #nearYouMobileLine { display: none; } -#nearYouMobileLine.desktop { +#nearYouMobileOverlay.desktop > #nearYouMobileLine { display: none; } #nearYouMobileTopText { margin-top: 0.5rem; + padding-bottom: 2rem; } #nearYouMobileP { diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index 7f39c1b..b4b7bd6 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -71,13 +71,10 @@ var Overlay = L.Class.extend({ switchToMobile: function () { this.currentlyMobile = true; this.closeDesktopSidebar(); - console.log("SWITCHTOMOBILE"); this._overlayElement.classList.remove('desktop'); this._overlayElement.classList.add('mobile'); this._desktopOpenButton.classList.remove('desktop'); this._desktopOpenButton.classList.add('mobile'); - this._line.classList.remove('desktop'); - this._line.classList.add('mobile'); this.addTouchEventListeners(); }, @@ -89,8 +86,8 @@ var Overlay = L.Class.extend({ this._overlayElement.classList.add('desktop'); this._desktopOpenButton.classList.remove('mobile'); this._desktopOpenButton.classList.add('desktop'); - this._line.classList.remove('mobile'); - this._line.classList.add('desktop'); + + this._overlayElement.style = ""; this.removeTouchEventListeners(); }, @@ -98,8 +95,10 @@ var Overlay = L.Class.extend({ openMobileOverlay: function () { this._overlayElement.classList.add('active'); this._overlayElement.classList.remove('inactive'); - this._line.classList.add('active'); - this._line.classList.remove('inactive'); + this._desktopOpenButton.classList.add('active'); + this._desktopOpenButton.classList.remove('inactive'); + + this._desktopOpenButton.textContent = "Hide Stickers"; // This styling needs to be in the javascript because it needs to override the onTouchMove function this._overlayElement.style.bottom = "0"; @@ -114,8 +113,11 @@ var Overlay = L.Class.extend({ closeMobileOverlay: function () { this._overlayElement.classList.add('inactive'); this._overlayElement.classList.remove('active'); - this._line.classList.add('inactive'); - this._line.classList.remove('active'); + this._desktopOpenButton.classList.add('inactive'); + this._desktopOpenButton.classList.remove('active'); + + this._desktopOpenButton.textContent = "Show Stickers"; + this.isActive = false; // This styling needs to be in the javascript because it needs to override the onTouchMove function @@ -129,8 +131,10 @@ var Overlay = L.Class.extend({ openDesktopSidebar: function () { this._overlayElement.classList.add('active'); this._overlayElement.classList.remove('inactive'); - this._line.classList.add('active'); - this._line.classList.remove('inactive'); + this._desktopOpenButton.classList.add('active'); + this._desktopOpenButton.classList.remove('inactive'); + + this._desktopOpenButton.textContent = "Hide Stickers"; if (!this.isActive) { this.getNearYouData(); @@ -141,8 +145,10 @@ var Overlay = L.Class.extend({ closeDesktopSidebar: function () { this._overlayElement.classList.add('inactive'); this._overlayElement.classList.remove('active'); - this._line.classList.add('inactive'); - this._line.classList.remove('active'); + this._desktopOpenButton.classList.add('inactive'); + this._desktopOpenButton.classList.remove('active'); + + this._desktopOpenButton.textContent = "Show Stickers"; this.isActive = false; let stickerDivs = document.querySelectorAll('.stickerDiv'); @@ -199,7 +205,7 @@ var Overlay = L.Class.extend({ oldOverlay.parentNode.replaceChild(newOverlay, oldOverlay); this._overlayElement = newOverlay; this._line = this._overlayElement.querySelector("#nearYouMobileLine"); - this._desktopOpenButton = this.overlayElement.querySelector("#nearYouDesktopToggleButton"); + this._desktopOpenButton = document.querySelector("#nearYouDesktopToggleButton"); }, onTouchStart: function (e) { @@ -220,10 +226,8 @@ var Overlay = L.Class.extend({ const snapThreshold = -this._overlayHeight * SNAP_THRESHOLD; // Snap when dragged beyond SNAP_THRESHOLD% of the overlay height if (parseInt(this._overlayElement.style.bottom) < snapThreshold) { - console.log("closing overlay"); this.closeMobileOverlay(); } else { - console.log("opening overlay"); this.openMobileOverlay(); } }, From 2f0d9735b0c42dc0eeffa26b24da5a36b9001eaf Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Tue, 12 Nov 2024 21:31:24 +0100 Subject: [PATCH 4/6] Removed commented out lines --- static/css/home.css | 5 ----- static/js/nearYouOverlay.js | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/static/css/home.css b/static/css/home.css index 7f40cf9..f2d7b71 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -343,26 +343,21 @@ body{ } #nearYouMobileOverlay.desktop.active { - /* width: 500px; */ left: 60vw; margin-left: 0; } #nearYouMobileOverlay.desktop.inactive { - /* width: 0; */ - /* margin-left: -500px; */ left: 100vw; } #nearYouMobileOverlay.mobile.active { - /* top: 0; */ bottom: 0; border-radius: 0px 0px 0px 0px; overflow-y: auto; } #nearYouMobileOverlay.mobile.inactive { - /* top: 90%; */ bottom: -90%; border-radius: 15px 15px 0px 0px; overflow-y: hidden; diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index b4b7bd6..1ba3f13 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -234,7 +234,7 @@ var Overlay = L.Class.extend({ handleGeolocationError: function (error) { console.error(`Geolocation error: ${error.message}`); - alert("Geolocation is not supported by this browser."); + alert(`Geolocation error: ${error.message}.`); }, handleFetchError: function (error, url) { From a1351cf79371b36d7d5fbd970e1f60e493932948 Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Fri, 22 Nov 2024 17:17:51 +0100 Subject: [PATCH 5/6] Renamed 'nearYouMobileOverlay' to 'nearYouOverlay', renamed 'nearYouMobileTopText' to 'nearYouTopText' --- static/css/home.css | 29 +++++++++++------------------ static/js/nearYouOverlay.js | 4 ++-- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/static/css/home.css b/static/css/home.css index c10e1d0..d75c45f 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -310,8 +310,8 @@ body{ /* background-color:#be0202; */ } -/* nearYouMobileOverlay */ -#nearYouMobileOverlay.mobile { +/* nearYouOverlay */ +#nearYouOverlay.mobile { position: fixed; z-index: 999; bottom: -90%; @@ -330,7 +330,7 @@ body{ box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.5); } -#nearYouMobileOverlay.desktop { +#nearYouOverlay.desktop { height: 90vh; width: 40vw; position: fixed; @@ -347,22 +347,22 @@ body{ transition-timing-function: 'ease-in'; } -#nearYouMobileOverlay.desktop.active { +#nearYouOverlay.desktop.active { left: 60vw; margin-left: 0; } -#nearYouMobileOverlay.desktop.inactive { +#nearYouOverlay.desktop.inactive { left: 100vw; } -#nearYouMobileOverlay.mobile.active { +#nearYouOverlay.mobile.active { bottom: 0; border-radius: 0px 0px 0px 0px; overflow-y: auto; } -#nearYouMobileOverlay.mobile.inactive { +#nearYouOverlay.mobile.inactive { bottom: -90%; border-radius: 15px 15px 0px 0px; overflow-y: hidden; @@ -398,32 +398,25 @@ body{ display: none; } -#nearYouMobileOverlay.mobile > #nearYouMobileLine { +#nearYouOverlay.mobile > #nearYouMobileLine { display: block; margin-top: 0.5rem; width: 10%; } -#nearYouMobileOverlay.mobile.active > #nearYouMobileLine { +#nearYouOverlay.mobile.active > #nearYouMobileLine { display: none; } -#nearYouMobileOverlay.desktop > #nearYouMobileLine { +#nearYouOverlay.desktop > #nearYouMobileLine { display: none; } -#nearYouMobileTopText { +#nearYouTopText { margin-top: 0.5rem; padding-bottom: 2rem; } -#nearYouMobileP { - padding: 0 2rem; - opacity: 0; - transition: opacity 0.8s; - transition-timing-function: 'ease-in'; -} - /* sticker divs styling */ .stickerDiv { display: flex; diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index 1ba3f13..b4c674a 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -29,12 +29,12 @@ var Overlay = L.Class.extend({ // Create overlay structure createOverlayElement: function () { const overlayElement = document.createElement('div'); - overlayElement.id = 'nearYouMobileOverlay'; + overlayElement.id = 'nearYouOverlay'; this._line = this.createElement('img', 'nearYouMobileLine', { src: './static/img/line.svg' }); overlayElement.appendChild(this._line); - const titleText = this.createElement('h1', 'nearYouMobileTopText', { textContent: "Stickers near you" }); + const titleText = this.createElement('h1', 'nearYouTopText', { textContent: "Stickers near you" }); overlayElement.appendChild(titleText); for (let i = 0; i < 10; i++) { From 454d27a27bd4f9ebbd6f1f377695b96664380110 Mon Sep 17 00:00:00 2001 From: ArondenOuden Date: Fri, 22 Nov 2024 22:42:29 +0100 Subject: [PATCH 6/6] Refactored the opening and closing functions. It is now one function with that receives arguments --- static/js/nearYouOverlay.js | 107 +++++++++++++++++------------------- 1 file changed, 49 insertions(+), 58 deletions(-) diff --git a/static/js/nearYouOverlay.js b/static/js/nearYouOverlay.js index b4c674a..1a60807 100644 --- a/static/js/nearYouOverlay.js +++ b/static/js/nearYouOverlay.js @@ -4,7 +4,7 @@ const OVERLAY_HIDE_LIMIT = 0.8; // Limit to 80% below screen const STICKER_REVEAL_DELAY = 400; // Delay between sticker reveal animations var Overlay = L.Class.extend({ - // Overylay constructor + // Overlay constructor initialize: function (selector, options) { this.isActive = false; this.currentlyMobile = isMobile(); @@ -92,70 +92,64 @@ var Overlay = L.Class.extend({ this.removeTouchEventListeners(); }, - openMobileOverlay: function () { - this._overlayElement.classList.add('active'); - this._overlayElement.classList.remove('inactive'); - this._desktopOpenButton.classList.add('active'); - this._desktopOpenButton.classList.remove('inactive'); - - this._desktopOpenButton.textContent = "Hide Stickers"; - - // This styling needs to be in the javascript because it needs to override the onTouchMove function - this._overlayElement.style.bottom = "0"; - - if (!this.isActive) { + toggleOverlay: function ({ isOpen, isMobile }) { + const activeClass = 'active'; + const inactiveClass = 'inactive'; + + // Update overlay classes + this._overlayElement.classList.toggle(activeClass, isOpen); + this._overlayElement.classList.toggle(inactiveClass, !isOpen); + + // Update button classes + this._desktopOpenButton.classList.toggle(activeClass, isOpen); + this._desktopOpenButton.classList.toggle(inactiveClass, !isOpen); + + // Update button text + this._desktopOpenButton.textContent = isOpen ? "Hide Stickers" : "Show Stickers"; + + // For mobile, set the bottom style for drag behavior + if (isMobile) { + this._overlayElement.style.bottom = isOpen ? "0" : "-90%"; + } + + // Reset scroll and remove revealed stickers when closing + if (!isOpen) { + this._overlayElement.scrollTo(0, 0); + const stickerDivs = document.querySelectorAll('.stickerDiv'); + stickerDivs.forEach(div => div.classList.remove('revealed')); + } + + // Fetch data only when opening and inactive + if (isOpen && !this.isActive) { this.getNearYouData(); } - - this.isActive = true; + + // Update activity state + this.isActive = isOpen; }, - + + openMobileOverlay: function () { + this.toggleOverlay({ isOpen: true, isMobile: true }); + console.log("openMobileOverlay"); + }, + closeMobileOverlay: function () { - this._overlayElement.classList.add('inactive'); - this._overlayElement.classList.remove('active'); - this._desktopOpenButton.classList.add('inactive'); - this._desktopOpenButton.classList.remove('active'); - - this._desktopOpenButton.textContent = "Show Stickers"; - - this.isActive = false; - - // This styling needs to be in the javascript because it needs to override the onTouchMove function - this._overlayElement.style.bottom = "-90%"; - - this._overlayElement.scrollTo(0, 0); - let stickerDivs = document.querySelectorAll('.stickerDiv'); - stickerDivs.forEach(div => div.classList.remove('revealed')); + this.toggleOverlay({ isOpen: false, isMobile: true }); + console.log("closeMobileOverlay"); }, - + openDesktopSidebar: function () { - this._overlayElement.classList.add('active'); - this._overlayElement.classList.remove('inactive'); - this._desktopOpenButton.classList.add('active'); - this._desktopOpenButton.classList.remove('inactive'); - - this._desktopOpenButton.textContent = "Hide Stickers"; - - if (!this.isActive) { - this.getNearYouData(); - } - this.isActive = true; + this.toggleOverlay({ isOpen: true, isMobile: false }); + console.log("openDesktopSidebar"); }, - + closeDesktopSidebar: function () { - this._overlayElement.classList.add('inactive'); - this._overlayElement.classList.remove('active'); - this._desktopOpenButton.classList.add('inactive'); - this._desktopOpenButton.classList.remove('active'); - - this._desktopOpenButton.textContent = "Show Stickers"; - - this.isActive = false; - let stickerDivs = document.querySelectorAll('.stickerDiv'); - stickerDivs.forEach(div => div.classList.remove('revealed')); + this.toggleOverlay({ isOpen: false, isMobile: false }); + console.log("closeDesktopSidebar"); }, + - // Helper to create elements with attributes + // Helper function to create elements with attributes createElement: function (tagName, id, attributes = {}) { const element = document.createElement(tagName); element.id = id; @@ -197,9 +191,6 @@ var Overlay = L.Class.extend({ removeTouchEventListeners: function () { const self = this; - // this._overlayElement.removeEventListener('touchstart', this.onTouchStart.bind(self)); - // this._overlayElement.removeEventListener('touchmove', this.onTouchMove.bind(self)); - // this._overlayElement.removeEventListener('touchend', this.onTouchEnd.bind(self)); var oldOverlay = this._overlayElement; var newOverlay = oldOverlay.cloneNode(true); oldOverlay.parentNode.replaceChild(newOverlay, oldOverlay);