mirror of https://github.com/node-red/node-red.git
Fix sidebar separator draggable
This commit is contained in:
Nick O'Leary
parent
90b167eba1
commit
1e35a6ce5e
|
|
@ -82,104 +82,106 @@ RED.sidebar = (function() {
|
|||
var sidebarSeparator = {};
|
||||
sidebarSeparator.dragging = false;
|
||||
|
||||
$("#red-ui-sidebar-separator").draggable({
|
||||
axis: "x",
|
||||
start:function(event,ui) {
|
||||
sidebarSeparator.closing = false;
|
||||
sidebarSeparator.opening = false;
|
||||
var winWidth = $(window).width();
|
||||
sidebarSeparator.start = ui.position.left;
|
||||
sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
|
||||
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
|
||||
sidebarSeparator.dragging = true;
|
||||
function setupSidebarSeparator() {
|
||||
$("#red-ui-sidebar-separator").draggable({
|
||||
axis: "x",
|
||||
start:function(event,ui) {
|
||||
sidebarSeparator.closing = false;
|
||||
sidebarSeparator.opening = false;
|
||||
var winWidth = $(window).width();
|
||||
sidebarSeparator.start = ui.position.left;
|
||||
sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
|
||||
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
|
||||
sidebarSeparator.dragging = true;
|
||||
|
||||
if (!RED.menu.isSelected("menu-item-sidebar")) {
|
||||
sidebarSeparator.opening = true;
|
||||
var newChartRight = 7;
|
||||
$("#red-ui-sidebar").addClass("closing");
|
||||
if (!RED.menu.isSelected("menu-item-sidebar")) {
|
||||
sidebarSeparator.opening = true;
|
||||
var newChartRight = 7;
|
||||
$("#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-editor-stack").css("right",newChartRight+1);
|
||||
$("#red-ui-sidebar").width(0);
|
||||
RED.menu.setSelected("menu-item-sidebar",true);
|
||||
$("#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");
|
||||
}
|
||||
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-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) {
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSidebar(state) {
|
||||
if (!state) {
|
||||
|
|
@ -208,6 +210,7 @@ RED.sidebar = (function() {
|
|||
}
|
||||
|
||||
function init () {
|
||||
setupSidebarSeparator();
|
||||
sidebar_tabs = RED.tabs.create({
|
||||
element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
|
||||
onchange:function(tab) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue