From 1e35a6ce5ef8193c60879968444734aa76d8df9a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 May 2019 17:03:09 +0100
Subject: [PATCH] Fix sidebar separator draggable

---
 .../editor-client/src/js/ui/sidebar.js        | 185 +++++++++---------
 1 file changed, 94 insertions(+), 91 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
index 4fb041cbf..bda764533 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@@ -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) {