implement tab drag & drop

This commit is contained in:
Jakob Ketterl 2023-05-16 03:25:25 +02:00
parent 94c4a901a2
commit 1fefc13310
4 changed files with 37 additions and 2 deletions

View file

@ -0,0 +1,32 @@
$.fn.profileList = function() {
this.each(function () {
var $profileList = $(this);
var $profiles = $profileList.find('.profile');
$profiles.attr('draggable', 'true');
$profiles.find('a').attr('draggable', 'false');
var $profileEl;
var originalIndex;
$profileList.on('dragstart', '.profile', function(event){
$profileEl = $(event.originalEvent.target);
originalIndex = $profileEl.index();
event.originalEvent.dataTransfer.effectAllowed = 'move';
event.originalEvent.dataTransfer.setData('application/x-profile', $profileEl.data('profile-id'));
}).on('dragenter', function(event) {
event.preventDefault();
var $target = $(event.target).closest('.profile');
if ($profileEl.index() < $target.index()) {
$profileEl.insertAfter($target);
} else {
$profileEl.insertBefore($target);
}
}).on('dragover', function(event) {
event.preventDefault();
}).on('dragend', function(event) {
if (event.originalEvent.dataTransfer.dropEffect === 'none') {
// drag was aborted - restore original position
$profileEl.remove().insertBefore($profileList.children().eq(originalIndex));
}
$profileEl = undefined;
});
});
}

View file

@ -9,4 +9,5 @@ $(function(){
$('#scheduler').schedulerInput();
$('.exponential-input').exponentialInput();
$('.device-log-messages').logMessages();
$('.profile-tabs').profileList();
});

View file

@ -159,6 +159,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
"lib/settings/SchedulerInput.js",
"lib/settings/ExponentialInput.js",
"lib/settings/LogMessages.js",
"lib/settings/ProfileList.js",
"settings.js",
],
}

View file

@ -128,7 +128,7 @@ class SdrFormController(SettingsFormController, metaclass=ABCMeta):
def render_tabs(self):
return """
<ul class="nav nav-tabs">
<ul class="nav nav-tabs profile-tabs">
<li class="nav-item">
<a class="nav-link {device_active}" href="{device_link}">{device_name}</a>
</li>
@ -145,10 +145,11 @@ class SdrFormController(SettingsFormController, metaclass=ABCMeta):
new_profile_link="{}settings/sdr/{}/newprofile".format(self.get_document_root(), quote(self.device_id)),
profile_tabs="".join(
"""
<li class="nav-item">
<li class="nav-item profile" data-profile-id="{profile_id}">
<a class="nav-link {profile_active}" href="{profile_link}">{profile_name}</a>
</li>
""".format(
profile_id=profile["id"],
profile_link="{}settings/sdr/{}/profile/{}".format(
self.get_document_root(), quote(self.device_id), quote(profile["id"])
),