frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Fix sidebar separator draggable

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-02 17:03:09 +01:00
parent 90b167eba1
commit 1e35a6ce5e
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 94 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js vendored
View File

@ -82,104 +82,106 @@ RED.sidebar = (function() {
var sidebarSeparator = {}; var sidebarSeparator = {};
sidebarSeparator.dragging = false; sidebarSeparator.dragging = false;
$("#red-ui-sidebar-separator").draggable({ function setupSidebarSeparator() {
axis: "x", $("#red-ui-sidebar-separator").draggable({
start:function(event,ui) { axis: "x",
sidebarSeparator.closing = false; start:function(event,ui) {
sidebarSeparator.opening = false; sidebarSeparator.closing = false;
var winWidth = $(window).width(); sidebarSeparator.opening = false;
sidebarSeparator.start = ui.position.left; var winWidth = $(window).width();
sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2; sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.dragging = true; sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
sidebarSeparator.dragging = true;
if (!RED.menu.isSelected("menu-item-sidebar")) { if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true; sidebarSeparator.opening = true;
var newChartRight = 7; var newChartRight = 7;
$("#red-ui-sidebar").addClass("closing"); $("#red-ui-sidebar").addClass("closing");
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = $("#red-ui-sidebar").width();
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 3;
}
if (newSidebarWidth > 150) {
if (sidebarSeparator.chartWidth+d < 200) {
ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
d = ui.position.left-sidebarSeparator.start;
newSidebarWidth = sidebarSeparator.width-d;
}
}
if (newSidebarWidth < 150) {
if (!sidebarSeparator.closing) {
$("#red-ui-sidebar").addClass("closing");
sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
newSidebarWidth = 150;
ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
d = ui.position.left-sidebarSeparator.start;
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false;
$("#red-ui-sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#red-ui-workspace").css("right",newChartRight); $("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1); $("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(0); $("#red-ui-sidebar").width(newSidebarWidth);
RED.menu.setSelected("menu-item-sidebar",true);
sidebar_tabs.resize();
RED.events.emit("sidebar:resize");
},
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
$("#red-ui-sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180);
$("#red-ui-workspace").css("right",187);
$("#red-ui-editor-stack").css("right",188);
}
}
$("#red-ui-sidebar-separator").css("left","auto");
$("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
} }
sidebarSeparator.width = $("#red-ui-sidebar").width(); });
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 3;
}
if (newSidebarWidth > 150) { var sidebarControls = $('<div class="red-ui-sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#red-ui-sidebar-separator"));
if (sidebarSeparator.chartWidth+d < 200) { sidebarControls.on("click", function() {
ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
d = ui.position.left-sidebarSeparator.start;
newSidebarWidth = sidebarSeparator.width-d;
}
}
if (newSidebarWidth < 150) {
if (!sidebarSeparator.closing) {
$("#red-ui-sidebar").addClass("closing");
sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
newSidebarWidth = 150;
ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
d = ui.position.left-sidebarSeparator.start;
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false;
$("#red-ui-sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize();
RED.events.emit("sidebar:resize");
},
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
$("#red-ui-sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180);
$("#red-ui-workspace").css("right",187);
$("#red-ui-editor-stack").css("right",188);
}
}
$("#red-ui-sidebar-separator").css("left","auto");
$("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
RED.events.emit("sidebar:resize");
}
});
var sidebarControls = $('<div class="red-ui-sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#red-ui-sidebar-separator"));
sidebarControls.on("click", function() {
sidebarControls.hide();
RED.menu.toggleSelected("menu-item-sidebar");
})
$("#red-ui-sidebar-separator").on("mouseenter", function() {
if (!sidebarSeparator.dragging) {
if (RED.menu.isSelected("menu-item-sidebar")) {
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
} else {
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
}
sidebarControls.toggle("slide", { direction: "right" }, 200);
}
})
$("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
sidebarControls.hide(); sidebarControls.hide();
} RED.menu.toggleSelected("menu-item-sidebar");
}); })
$("#red-ui-sidebar-separator").on("mouseenter", function() {
if (!sidebarSeparator.dragging) {
if (RED.menu.isSelected("menu-item-sidebar")) {
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
} else {
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
}
sidebarControls.toggle("slide", { direction: "right" }, 200);
}
})
$("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
sidebarControls.hide();
}
});
}
function toggleSidebar(state) { function toggleSidebar(state) {
if (!state) { if (!state) {
@ -208,6 +210,7 @@ RED.sidebar = (function() {
} }
function init () { function init () {
setupSidebarSeparator();
sidebar_tabs = RED.tabs.create({ sidebar_tabs = RED.tabs.create({
element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"), element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
onchange:function(tab) { onchange:function(tab) {