From 67f4cb4ba58d3c26a7dc186b2364c0145b0dc202 Mon Sep 17 00:00:00 2001 From: devzkhalil Date: Tue, 9 Jul 2024 18:32:55 +0600 Subject: [PATCH 1/6] feat: dragging feature added --- src/DebugBar/Resources/debugbar.css | 3 ++ src/DebugBar/Resources/debugbar.js | 84 +++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css index bb6bde4e..50bb0f5a 100644 --- a/src/DebugBar/Resources/debugbar.css +++ b/src/DebugBar/Resources/debugbar.css @@ -1,4 +1,7 @@ /* Hide debugbar when printing a page */ +div.phpdebugbar { + display: none; +} @media print { div.phpdebugbar { display: none; diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index 81d60b8d..b8a367e7 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -1293,4 +1293,88 @@ if (typeof(PhpDebugBar) == 'undefined') { }); + // ============= Handling Dragging Behavior ============ + var storedPosX = localStorage.getItem('phpdebugbarPositionX') || 0; + var screenWidth = $(window).width(); + + $(document).on('click', '.phpdebugbar', function () { + let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed'); + if (!isClosed) { + // Save current position to localStorage when closing the debugbar + storedPosX = localStorage.getItem('phpdebugbarPositionX'); + $('.phpdebugbar').css('left', '0px'); + } else { + // Restore saved position from localStorage when opening the debugbar + localStorage.setItem('phpdebugbarPositionX', storedPosX); + $('.phpdebugbar').css('left', storedPosX + 'px'); + } + }); + + $(document).ready(function () { + // Check local storage for saved position + var savedPosX = localStorage.getItem('phpdebugbarPositionX'); + var phpdebugbarIsOpen = localStorage.getItem('phpdebugbar-open'); + + if (savedPosX !== null && phpdebugbarIsOpen == 0 && screenWidth > savedPosX) { + $('.phpdebugbar').css('left', savedPosX + 'px'); + } + + // Make the phpdebugbar visible after setting the position + $('div.phpdebugbar').css('display', 'block'); + + function startDragging(e) { + // Prevent text selection while dragging + e.preventDefault(); + + // Track initial mouse position and element position + var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX; + var initialPosX = $('.phpdebugbar').position().left; + + // Get the width of the element and the screen + var elementWidth = $('.phpdebugbar').outerWidth(); + + function doDrag(e) { + // Calculate the change in mouse position + var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX; + var deltaX = clientX - initialMouseX; + + // Update the position of the element + var newPosX = initialPosX + deltaX; + + // Ensure the new position is within screen boundaries + if (newPosX < 0) { + newPosX = 0; + } else if (newPosX + elementWidth > screenWidth) { + newPosX = screenWidth - elementWidth; + } + + let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed'); + if (!isClosed) { + $('.phpdebugbar').css('left', '0px'); + return; + } + + $('.phpdebugbar').css('left', newPosX + 'px'); + } + + function stopDragging() { + // Unbind the move and up/end events + $(document).off('mousemove.drag touchmove.drag'); + $(document).off('mouseup.drag touchend.drag'); + + // Save the new position to local storage + var finalPosX = $('.phpdebugbar').position().left; + localStorage.setItem('phpdebugbarPositionX', finalPosX); + } + + // Bind the move and up/end events + $(document).on('mousemove.drag touchmove.drag', doDrag); + $(document).on('mouseup.drag touchend.drag', stopDragging); + } + + // Bind the down/start events + $(document).on('mousedown touchstart', '.phpdebugbar', startDragging); + }); + // ============= End Handling Dragging Behavior ============ + })(PhpDebugBar.$); From 6af81281d85e082a75bfcce359115faa54e0bb8e Mon Sep 17 00:00:00 2001 From: erikn69 Date: Tue, 9 Jul 2024 10:46:33 -0500 Subject: [PATCH 2/6] fix: dragging feature integrated --- src/DebugBar/Resources/debugbar.js | 169 +++++++++++++++-------------- 1 file changed, 85 insertions(+), 84 deletions(-) diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index b8a367e7..e12dc199 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -472,6 +472,12 @@ if (typeof(PhpDebugBar) == 'undefined') { // Reset height to ensure bar is still visible this.setHeight(this.$body.height()); + if (this.isClosed()) { + var restorePos = localStorage.getItem('phpdebugbar-restore-position') || 0; + if (restorePos) { + this.$el.css('left', this.recomputeRestorePositionX(~~restorePos) + 'px'); + } + } }, /** @@ -485,6 +491,7 @@ if (typeof(PhpDebugBar) == 'undefined') { } var self = this; + this.$el.css('display', 'block'); this.$el.appendTo('body'); this.$dragCapture = $('
').addClass(csscls('drag-capture')).appendTo(this.$el); this.$resizehdle = $('
').addClass(csscls('resize-handle')).appendTo(this.$el); @@ -539,6 +546,12 @@ if (typeof(PhpDebugBar) == 'undefined') { self.restore(); }); + // dragging of restore button + this.$restorebtn.on('mousedown touchstart', function (e) { + self.draggingRestoreButtonEvent(e); + e.preventDefault(); + }); + // open button this.$openbtn = $('').addClass(csscls('open-btn')).appendTo(this.$headerRight).hide(); this.$openbtn.click(function() { @@ -829,6 +842,10 @@ if (typeof(PhpDebugBar) == 'undefined') { this.$restorebtn.show(); localStorage.setItem('phpdebugbar-open', '0'); this.$el.addClass(csscls('closed')); + var restorePos = localStorage.getItem('phpdebugbar-restore-position') || 0; + if (restorePos) { + this.$el.css('left', this.recomputeRestorePositionX(~~restorePos) + 'px'); + } this.recomputeBottomOffset(); }, @@ -847,6 +864,10 @@ if (typeof(PhpDebugBar) == 'undefined') { * @this {DebugBar} */ restore: function() { + if (this.$el.hasClass(csscls('dragging'))){ + this.$el.removeClass(csscls('dragging')); + return; + } this.$resizehdle.show(); this.$header.show(); this.$restorebtn.hide(); @@ -858,6 +879,7 @@ if (typeof(PhpDebugBar) == 'undefined') { this.showTab(); } this.$el.removeClass(csscls('closed')); + this.$el.css('left', ''); this.resize(); }, @@ -876,6 +898,69 @@ if (typeof(PhpDebugBar) == 'undefined') { } }, + /** + * allows you to move the revert button so that other components of the page can be displayed + */ + draggingRestoreButtonEvent: function(e) { + var self = this; + // Track initial mouse position and element position + var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX; + var initialPosX = self.$el.position().left; + + function doDrag(e) { + if (! self.isClosed()) { + self.$el.css('left', ''); + return; + } + // Calculate the change in mouse position + var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX; + var deltaX = clientX - initialMouseX; + + // Update the position of the element + var newPosX = initialPosX + deltaX; + + // Ensure the new position is within screen boundaries + newPosX = self.recomputeRestorePositionX(newPosX); + + self.$el.css('left', newPosX + 'px'); + self.$el.addClass(csscls('dragging')); + } + + function stopDragging() { + // Unbind the move and up/end events + $(document).off('mousemove.drag touchmove.drag'); + $(document).off('mouseup.drag touchend.drag'); + + // Save the new position to local storage + var finalPosX = self.$el.position().left; + localStorage.setItem('phpdebugbar-restore-position', finalPosX); + setTimeout(function () { self.$el.removeClass(csscls('dragging')); }, 500); + } + + // Bind the move and up/end events + $(document).on('mousemove.drag touchmove.drag', doDrag); + $(document).on('mouseup.drag touchend.drag', stopDragging); + }, + + /** + * Recomputes the left css property of the restore btn for dragging + * restore button always has to be visible and not be left off the screen + */ + recomputeRestorePositionX: function (posX) { + if (! this.isClosed()) return; + + var screenWidth = $(window).width() + var elementWidth = this.$restorebtn.outerWidth(); + + if (posX <= 0) { + posX = 0; + } else if (posX + elementWidth > screenWidth) { + posX = screenWidth - elementWidth; + } + + return posX; + }, + /** * Sets the data map used by dataChangeHandler to populate * indicators and widgets @@ -1293,88 +1378,4 @@ if (typeof(PhpDebugBar) == 'undefined') { }); - // ============= Handling Dragging Behavior ============ - var storedPosX = localStorage.getItem('phpdebugbarPositionX') || 0; - var screenWidth = $(window).width(); - - $(document).on('click', '.phpdebugbar', function () { - let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed'); - if (!isClosed) { - // Save current position to localStorage when closing the debugbar - storedPosX = localStorage.getItem('phpdebugbarPositionX'); - $('.phpdebugbar').css('left', '0px'); - } else { - // Restore saved position from localStorage when opening the debugbar - localStorage.setItem('phpdebugbarPositionX', storedPosX); - $('.phpdebugbar').css('left', storedPosX + 'px'); - } - }); - - $(document).ready(function () { - // Check local storage for saved position - var savedPosX = localStorage.getItem('phpdebugbarPositionX'); - var phpdebugbarIsOpen = localStorage.getItem('phpdebugbar-open'); - - if (savedPosX !== null && phpdebugbarIsOpen == 0 && screenWidth > savedPosX) { - $('.phpdebugbar').css('left', savedPosX + 'px'); - } - - // Make the phpdebugbar visible after setting the position - $('div.phpdebugbar').css('display', 'block'); - - function startDragging(e) { - // Prevent text selection while dragging - e.preventDefault(); - - // Track initial mouse position and element position - var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX; - var initialPosX = $('.phpdebugbar').position().left; - - // Get the width of the element and the screen - var elementWidth = $('.phpdebugbar').outerWidth(); - - function doDrag(e) { - // Calculate the change in mouse position - var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX; - var deltaX = clientX - initialMouseX; - - // Update the position of the element - var newPosX = initialPosX + deltaX; - - // Ensure the new position is within screen boundaries - if (newPosX < 0) { - newPosX = 0; - } else if (newPosX + elementWidth > screenWidth) { - newPosX = screenWidth - elementWidth; - } - - let isClosed = $('.phpdebugbar').hasClass('phpdebugbar-closed'); - if (!isClosed) { - $('.phpdebugbar').css('left', '0px'); - return; - } - - $('.phpdebugbar').css('left', newPosX + 'px'); - } - - function stopDragging() { - // Unbind the move and up/end events - $(document).off('mousemove.drag touchmove.drag'); - $(document).off('mouseup.drag touchend.drag'); - - // Save the new position to local storage - var finalPosX = $('.phpdebugbar').position().left; - localStorage.setItem('phpdebugbarPositionX', finalPosX); - } - - // Bind the move and up/end events - $(document).on('mousemove.drag touchmove.drag', doDrag); - $(document).on('mouseup.drag touchend.drag', stopDragging); - } - - // Bind the down/start events - $(document).on('mousedown touchstart', '.phpdebugbar', startDragging); - }); - // ============= End Handling Dragging Behavior ============ - })(PhpDebugBar.$); From f0302862f7ebaa4129d3e4cf9bdd09dc88a75616 Mon Sep 17 00:00:00 2001 From: erikn69 Date: Tue, 9 Jul 2024 11:20:13 -0500 Subject: [PATCH 3/6] fix: not unbind other events handlers --- src/DebugBar/Resources/debugbar.css | 7 +++++++ src/DebugBar/Resources/debugbar.js | 10 ++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css index 50bb0f5a..853d5788 100644 --- a/src/DebugBar/Resources/debugbar.css +++ b/src/DebugBar/Resources/debugbar.css @@ -109,6 +109,13 @@ a.phpdebugbar-restore-btn { border-right: 1px solid #ddd; } +.phpdebugbar-dragging a.phpdebugbar-restore-btn { + cursor: move; + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; +} + div.phpdebugbar-resize-handle { display: none; height: 4px; diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index e12dc199..082265c9 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -903,15 +903,13 @@ if (typeof(PhpDebugBar) == 'undefined') { */ draggingRestoreButtonEvent: function(e) { var self = this; + if (! self.isClosed()) return; + // Track initial mouse position and element position var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX; var initialPosX = self.$el.position().left; function doDrag(e) { - if (! self.isClosed()) { - self.$el.css('left', ''); - return; - } // Calculate the change in mouse position var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX; var deltaX = clientX - initialMouseX; @@ -928,8 +926,8 @@ if (typeof(PhpDebugBar) == 'undefined') { function stopDragging() { // Unbind the move and up/end events - $(document).off('mousemove.drag touchmove.drag'); - $(document).off('mouseup.drag touchend.drag'); + $(document).off('mousemove.drag touchmove.drag', doDrag); + $(document).off('mouseup.drag touchend.drag', stopDragging); // Save the new position to local storage var finalPosX = self.$el.position().left; From 7e18c67efa3c2796d9f49846173d99059b77415e Mon Sep 17 00:00:00 2001 From: erikn69 Date: Tue, 9 Jul 2024 12:57:23 -0500 Subject: [PATCH 4/6] fix: default display css --- src/DebugBar/Resources/debugbar.css | 3 --- src/DebugBar/Resources/debugbar.js | 1 - 2 files changed, 4 deletions(-) diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css index 853d5788..81af3d9c 100644 --- a/src/DebugBar/Resources/debugbar.css +++ b/src/DebugBar/Resources/debugbar.css @@ -1,7 +1,4 @@ /* Hide debugbar when printing a page */ -div.phpdebugbar { - display: none; -} @media print { div.phpdebugbar { display: none; diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index 082265c9..3eaa1706 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -491,7 +491,6 @@ if (typeof(PhpDebugBar) == 'undefined') { } var self = this; - this.$el.css('display', 'block'); this.$el.appendTo('body'); this.$dragCapture = $('
').addClass(csscls('drag-capture')).appendTo(this.$el); this.$resizehdle = $('
').addClass(csscls('resize-handle')).appendTo(this.$el); From 5492f99dc05d11df06a4b9df6b9a9a146ada17df Mon Sep 17 00:00:00 2001 From: devzkhalil Date: Sat, 7 Sep 2024 20:19:23 +0600 Subject: [PATCH 5/6] improved: border left & right after drag the snap --- src/DebugBar/Resources/debugbar.js | 90 ++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index 3eaa1706..37bff064 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -897,6 +897,87 @@ if (typeof(PhpDebugBar) == 'undefined') { } }, + /** + * Adjusts the borders of the restore button based on its horizontal position. + * + * This function updates the left and right borders of the restore button + * according to its position relative to the viewport edges: + * + * - If the button's position is at or past the left edge of the viewport, + * the left border is set to 'transparent' to avoid display issues. + * - If the button's position plus its width extends beyond the right edge + * of the viewport, the right border is also set to 'transparent'. + * - Otherwise, both borders are set to '1px solid #ddd' for visibility. + * + * @param {number} posX - The current horizontal position of the restore button. + */ + applyBorders: function (posX) { + var screenWidth = $(window).width(); // Width of the viewport + var elementWidth = this.$el.outerWidth(); // Width of the restore button + + // Determine the border style based on button position + var borderLeft = (posX <= 0) ? '1px solid transparent' : '1px solid #ddd'; + var borderRight = (posX + elementWidth >= screenWidth) ? '1px solid transparent' : '1px solid #ddd'; + + // Apply the calculated borders to the restore button + this.$restorebtn.css('border-left', borderLeft); + this.$restorebtn.css('border-right', borderRight); + }, + + /** + * Saves the current border styles of the restore button to local storage. + * + * This function calculates the left and right border styles of the restore button + * based on its horizontal position within the viewport, then stores these styles + * in local storage for later retrieval: + * + * - If the button's horizontal position (`posX`) is at or past the left edge + * of the viewport, the left border is set to 'transparent' to avoid display issues. + * - If the button's position plus its width extends beyond the right edge of the + * viewport, the right border is also set to 'transparent'. + * - Otherwise, both borders are set to '1px solid #ddd' for visibility. + * + * These border styles are stored in local storage to maintain the button's appearance + * across page reloads and sessions. + * + * @param {number} posX - The current horizontal position of the restore button. + */ + saveBorders: function (posX) { + var screenWidth = $(window).width(); // Width of the viewport + var elementWidth = this.$el.outerWidth(); // Width of the restore button + + // Determine the border style based on button position + var borderLeft = (posX <= 0) ? '1px solid transparent' : '1px solid #ddd'; + var borderRight = (posX + elementWidth >= screenWidth) ? '1px solid transparent' : '1px solid #ddd'; + + // Save the calculated borders to local storage + localStorage.setItem('phpdebugbar-border-left', borderLeft); + localStorage.setItem('phpdebugbar-border-right', borderRight); + }, + + /** + * Restores the border styles of the restore button from local storage. + * + * This function retrieves previously saved border styles for the restore button + * from local storage and applies them to ensure the button's appearance is consistent + * with its last known state: + * + * - The left and right border styles are fetched from local storage. If no saved + * styles are found, default to '1px solid #ddd'. + * + * This helps maintain the button's appearance across page reloads and sessions, + * providing a consistent user experience. + */ + restoreBorders: function () { + // Retrieve the saved border styles from local storage, with a default value if not found + var borderLeft = localStorage.getItem('phpdebugbar-border-left') || '1px solid #ddd'; + var borderRight = localStorage.getItem('phpdebugbar-border-right') || '1px solid #ddd'; + + // Apply the retrieved border styles to the restore button + this.$restorebtn.css('border-left', borderLeft); + this.$restorebtn.css('border-right', borderRight); + }, + /** * allows you to move the revert button so that other components of the page can be displayed */ @@ -930,7 +1011,13 @@ if (typeof(PhpDebugBar) == 'undefined') { // Save the new position to local storage var finalPosX = self.$el.position().left; + localStorage.setItem('phpdebugbar-restore-position', finalPosX); + self.saveBorders(finalPosX); // Save the borders + + // Apply the borders + self.applyBorders(finalPosX); + setTimeout(function () { self.$el.removeClass(csscls('dragging')); }, 500); } @@ -955,6 +1042,9 @@ if (typeof(PhpDebugBar) == 'undefined') { posX = screenWidth - elementWidth; } + // Restore the borders + this.restoreBorders(); + return posX; }, From 624fbce9a014fa9235c0217b4f860208b24ed1a5 Mon Sep 17 00:00:00 2001 From: devzkhalil Date: Sun, 22 Sep 2024 18:22:11 +0600 Subject: [PATCH 6/6] fix: ensure snap/button repositions correctly on window resize --- src/DebugBar/Resources/debugbar.js | 140 ++++++++++++++--------------- 1 file changed, 65 insertions(+), 75 deletions(-) diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index 37bff064..9e055433 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -475,7 +475,7 @@ if (typeof(PhpDebugBar) == 'undefined') { if (this.isClosed()) { var restorePos = localStorage.getItem('phpdebugbar-restore-position') || 0; if (restorePos) { - this.$el.css('left', this.recomputeRestorePositionX(~~restorePos) + 'px'); + this.resizeRestoreButton(); } } }, @@ -843,7 +843,7 @@ if (typeof(PhpDebugBar) == 'undefined') { this.$el.addClass(csscls('closed')); var restorePos = localStorage.getItem('phpdebugbar-restore-position') || 0; if (restorePos) { - this.$el.css('left', this.recomputeRestorePositionX(~~restorePos) + 'px'); + this.resizeRestoreButton(); } this.recomputeBottomOffset(); }, @@ -899,81 +899,35 @@ if (typeof(PhpDebugBar) == 'undefined') { /** * Adjusts the borders of the restore button based on its horizontal position. - * - * This function updates the left and right borders of the restore button + * + * This function updates the left and right borders of the restore button * according to its position relative to the viewport edges: - * + * * - If the button's position is at or past the left edge of the viewport, * the left border is set to 'transparent' to avoid display issues. * - If the button's position plus its width extends beyond the right edge * of the viewport, the right border is also set to 'transparent'. * - Otherwise, both borders are set to '1px solid #ddd' for visibility. - * + * * @param {number} posX - The current horizontal position of the restore button. */ - applyBorders: function (posX) { + applyBorders: function (posX, addSnapSize = false) { var screenWidth = $(window).width(); // Width of the viewport - var elementWidth = this.$el.outerWidth(); // Width of the restore button - // Determine the border style based on button position - var borderLeft = (posX <= 0) ? '1px solid transparent' : '1px solid #ddd'; - var borderRight = (posX + elementWidth >= screenWidth) ? '1px solid transparent' : '1px solid #ddd'; - - // Apply the calculated borders to the restore button - this.$restorebtn.css('border-left', borderLeft); - this.$restorebtn.css('border-right', borderRight); - }, + if(addSnapSize){ + var snapSize = this.$el.outerWidth() // Snap size constant - /** - * Saves the current border styles of the restore button to local storage. - * - * This function calculates the left and right border styles of the restore button - * based on its horizontal position within the viewport, then stores these styles - * in local storage for later retrieval: - * - * - If the button's horizontal position (`posX`) is at or past the left edge - * of the viewport, the left border is set to 'transparent' to avoid display issues. - * - If the button's position plus its width extends beyond the right edge of the - * viewport, the right border is also set to 'transparent'. - * - Otherwise, both borders are set to '1px solid #ddd' for visibility. - * - * These border styles are stored in local storage to maintain the button's appearance - * across page reloads and sessions. - * - * @param {number} posX - The current horizontal position of the restore button. - */ - saveBorders: function (posX) { - var screenWidth = $(window).width(); // Width of the viewport - var elementWidth = this.$el.outerWidth(); // Width of the restore button + // Check if dragged to end/right and adjust position + if (posX + snapSize === screenWidth) { + posX += snapSize; // Adjust position to include snap size + } + } // Determine the border style based on button position var borderLeft = (posX <= 0) ? '1px solid transparent' : '1px solid #ddd'; - var borderRight = (posX + elementWidth >= screenWidth) ? '1px solid transparent' : '1px solid #ddd'; - - // Save the calculated borders to local storage - localStorage.setItem('phpdebugbar-border-left', borderLeft); - localStorage.setItem('phpdebugbar-border-right', borderRight); - }, - - /** - * Restores the border styles of the restore button from local storage. - * - * This function retrieves previously saved border styles for the restore button - * from local storage and applies them to ensure the button's appearance is consistent - * with its last known state: - * - * - The left and right border styles are fetched from local storage. If no saved - * styles are found, default to '1px solid #ddd'. - * - * This helps maintain the button's appearance across page reloads and sessions, - * providing a consistent user experience. - */ - restoreBorders: function () { - // Retrieve the saved border styles from local storage, with a default value if not found - var borderLeft = localStorage.getItem('phpdebugbar-border-left') || '1px solid #ddd'; - var borderRight = localStorage.getItem('phpdebugbar-border-right') || '1px solid #ddd'; + var borderRight = (posX >= screenWidth) ? '1px solid transparent' : '1px solid #ddd'; - // Apply the retrieved border styles to the restore button + // Apply the calculated borders to the restore button this.$restorebtn.css('border-left', borderLeft); this.$restorebtn.css('border-right', borderRight); }, @@ -983,7 +937,7 @@ if (typeof(PhpDebugBar) == 'undefined') { */ draggingRestoreButtonEvent: function(e) { var self = this; - if (! self.isClosed()) return; + if (!self.isClosed()) return; // Track initial mouse position and element position var initialMouseX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX; @@ -1000,6 +954,9 @@ if (typeof(PhpDebugBar) == 'undefined') { // Ensure the new position is within screen boundaries newPosX = self.recomputeRestorePositionX(newPosX); + // Apply the borders + self.applyBorders(newPosX, true); + self.$el.css('left', newPosX + 'px'); self.$el.addClass(csscls('dragging')); } @@ -1009,15 +966,20 @@ if (typeof(PhpDebugBar) == 'undefined') { $(document).off('mousemove.drag touchmove.drag', doDrag); $(document).off('mouseup.drag touchend.drag', stopDragging); - // Save the new position to local storage + // Save the new position as a percentage of screen width var finalPosX = self.$el.position().left; + var screenWidth = $(window).width(); + var snapSize = self.$el.outerWidth() // Snap size constant - localStorage.setItem('phpdebugbar-restore-position', finalPosX); - self.saveBorders(finalPosX); // Save the borders + // Check if dragged to end/right and adjust position + if (finalPosX + snapSize === screenWidth) { + finalPosX += snapSize; // Adjust position to include snap size + } + + var positionPercentage = (finalPosX / screenWidth) * 100; // Store as percentage + + localStorage.setItem('phpdebugbar-restore-position', positionPercentage); - // Apply the borders - self.applyBorders(finalPosX); - setTimeout(function () { self.$el.removeClass(csscls('dragging')); }, 500); } @@ -1031,21 +993,49 @@ if (typeof(PhpDebugBar) == 'undefined') { * restore button always has to be visible and not be left off the screen */ recomputeRestorePositionX: function (posX) { - if (! this.isClosed()) return; + if (!this.isClosed()) return; - var screenWidth = $(window).width() + var screenWidth = $(window).width(); var elementWidth = this.$restorebtn.outerWidth(); - if (posX <= 0) { + // adjust position to ensure it doesn't go out of bounds + if (posX < 0) { posX = 0; } else if (posX + elementWidth > screenWidth) { - posX = screenWidth - elementWidth; + posX = screenWidth - elementWidth; // ensure it doesn't overflow } + return posX; + }, + + /** + * Adjust the restore button's position when the window is resized + */ + resizeRestoreButton: function() { + if (!this.isClosed()) return; + + var self = this; + + // Get the saved position percentage + var positionPercentage = parseFloat(localStorage.getItem('phpdebugbar-restore-position')); + + if (isNaN(positionPercentage)) return; + + // Recalculate the position based on the new screen width + var screenWidth = $(window).width(); + + var elementWidth = this.$restorebtn.outerWidth(); + + // Calculate the new position in pixels + var newPosX = (positionPercentage / 100) * screenWidth; + // Restore the borders - this.restoreBorders(); + this.applyBorders(newPosX); - return posX; + // Ensure the new position is within screen boundaries + newPosX = Math.max(0, Math.min(newPosX, screenWidth - elementWidth)); + + self.$el.css('left', newPosX + 'px'); }, /**