mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-01-16 13:00:42 +01:00
Code Issues Releases Wiki Activity

Dragging Feature (followup) (#697)

Browse Source 
* feat: dragging feature added

* fix: dragging feature integrated

* fix: not unbind other events handlers

* fix: default display css

* improved: border left & right after drag the snap

* fix: ensure snap/button repositions correctly on window resize

* Add bottom left or right offset

* Tweak click and restore

---------

Co-authored-by: devzkhalil <devzkhalil@gmail.com>
Co-authored-by: erikn69 <erikn_69@hotmail.com>
Co-authored-by: MD Khalil <70958192+devzkhalil@users.noreply.github.com>
This commit is contained in:
Barry vd. Heuvel 2024-12-15 16:21:13 +01:00 committed by GitHub
parent 7be5a75512
commit f622fa5ed5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/DebugBar/Resources/debugbar.css
View File

@ -106,6 +106,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;

168
src/DebugBar/Resources/debugbar.js
View File

@ -435,6 +435,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.activePanelName = null;
this.activeDatasetId = null;
this.hideEmptyTabs = false;
this.restorePosition = localStorage.getItem('phpdebugbar-restore-position');
this.restoreOffset = localStorage.getItem('phpdebugbar-restore-offset') || 0;
this.datesetTitleFormater = new DatasetTitleFormater(this);
this.options.bodyMarginBottomHeight = parseInt($('body').css('margin-bottom'));
try {
@ -484,6 +486,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
// Reset height to ensure bar is still visible
this.setHeight(this.$body.height());
if (this.restorePosition) {
this.resizeRestoreButton();
}
},
/**
@ -551,6 +556,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 = $('<a />').addClass(csscls('open-btn')).appendTo(this.$headerRight).hide();
this.$openbtn.click(function() {
@ -844,6 +855,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$restorebtn.show();
localStorage.setItem('phpdebugbar-open', '0');
this.$el.addClass(csscls('closed'));
if (this.restorePosition) {
this.resizeRestoreButton();
}
this.recomputeBottomOffset();
},
@ -862,6 +876,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();
@ -873,6 +891,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.showTab();
}
this.$el.removeClass(csscls('closed'));
this.$el.css('left', '');
this.resize();
},
@ -891,6 +910,155 @@ 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;
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;
var moved = false;
var target = e.target;
function doDrag(e) {
// Calculate the change in mouse position
var clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
var deltaX = clientX - initialMouseX;
// When not changed, don't
if (deltaX !== 0) {
moved = true;
}
// 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.css('right', 'auto');
self.$el.addClass(csscls('dragging'));
}
function stopDragging() {
// Unbind the move and up/end events
$(document).off('mousemove.drag touchmove.drag', doDrag);
$(document).off('mouseup.drag touchend.drag', stopDragging);
// Check if this was actually a drag instead of a click
if (!moved) {
$(target).trigger('click');
return;
}
// Save the new position as a percentage of screen width
var finalPosX = self.$el.position().left;
var screenWidth = $(window).width();
var positionPercentage = (finalPosX / screenWidth) * 100; // Store as percentage
if (positionPercentage < 10) {
self.restorePosition = 'bottomLeft';
self.restoreOffset = finalPosX;
} else if (positionPercentage > 90) {
self.restorePosition = 'bottomRight';
self.restoreOffset = screenWidth - finalPosX;
} else {
self.restorePosition = 'bottomPercentage';
self.restoreOffset = positionPercentage;
}
localStorage.setItem('phpdebugbar-restore-position', self.restorePosition);
localStorage.setItem('phpdebugbar-restore-offset', self.restoreOffset);
setTimeout(function () {
self.resizeRestoreButton();
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();
// adjust position to ensure it doesn't go out of bounds
if (posX < 0) {
posX = 0;
} else if (posX + elementWidth > screenWidth) {
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 and offset/percentage
var position = this.restorePosition;
var positionOffset = parseFloat(this.restoreOffset);
if (isNaN(positionOffset) || !position){
return;
}
// Recalculate the position based on the new screen width
var screenWidth = $(window).width();
var elementWidth = this.$restorebtn.outerWidth();
var newPosX = positionOffset;
if (position === 'bottomPercentage') {
// Calculate the new position in pixels
newPosX = (positionOffset / 100) * screenWidth;
} else if (position === 'bottomRight') {
newPosX = newPosX - elementWidth
}
// Ensure the new position is within screen boundaries
newPosX = Math.max(0, Math.min(newPosX, screenWidth - elementWidth));
if (position === 'bottomRight') {
// Set the offset
self.$el.css('left', 'auto');
self.$el.css('right', newPosX + 'px');
// Apply the calculated borders to the restore button
this.$restorebtn.css('border-left', '1px solid #ddd');
this.$restorebtn.css('border-right', newPosX > 0 ? '1px solid #ddd' : '1px solid transparent');
} else {
// Set the offset
self.$el.css('left', newPosX + 'px');
self.$el.css('right', 'auto');
// Restore the borders
this.$restorebtn.css('border-right', '1px solid #ddd');
this.$restorebtn.css('border-left', newPosX > 0 ? '1px solid #ddd' : '1px solid transparent');
}
},
/**
* Sets the data map used by dataChangeHandler to populate
* indicators and widgets