lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-13 16:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

MVC/ Form dialogs - make dialogs draggable. closes https://github.com/opnsense/core/issues/6947

Browse Source 
It's a bit of an experiment, but being able to drag the modal is practical sometimes. This commit attaches mouse events to drag on the header of the model so we can move the modal offset, when reopening the same it resets back to its starting position.
This commit is contained in:
Ad Schellevis 2023-10-24 18:21:46 +02:00
parent c225e122eb
commit 2f1996cc05
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/opnsense/www/js/opnsense_bootgrid_plugin.js
View File

@ -268,12 +268,38 @@ $.fn.UIBootgrid = function (params) {
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_' + editDlg);
if ($('#'+editDlg).hasClass('modal')) {
// show dialog
$('#'+editDlg).modal({backdrop: 'static', keyboard: false});
let target = $('#'+editDlg);
if (target.hasClass('modal')) {
// show dialog and hook draggable event on first show
target.modal({backdrop: 'static', keyboard: false});
if (!target.hasClass('modal_draggable')) {
target.addClass('modal_draggable');
let height=0, width=0, ypos=0, xpos=0;
let this_header = target.find('.modal-header');
this_header.css("cursor","move");
this_header.on('mousedown', function(e){
this_header.addClass("drag");
height = target.outerHeight();
width = target.outerWidth();
ypos = target.offset().top + height - e.pageY;
xpos = target.offset().left + width - e.pageX;
});
$(document.body).on('mousemove', function(e){
let itop = e.pageY + ypos - height;
let ileft = e.pageX + xpos - width;
if (this_header.hasClass("drag")){
target.offset({top: itop, left: ileft});
}
}).on('mouseup mouseleave', function(e){
this_header.removeClass("drag");
});
} else {
// reset to starting position (remove drag distance)
target.css('top', '').css('left', '');
}
} else {
// when edit dialog isn't a modal, fire click event
$('#'+editDlg).click();
target.click();
}
if (this_grid.onBeforeRenderDialog) {