Moved resize functionality into the project manager

thomaswilburn · Jul 31, 2016 · 2a8197e · 2a8197e
1 parent 321e001
commit 2a8197e
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 83 deletions.
diff --git a/css/project.less b/css/project.less
@@ -23,6 +23,11 @@
 
   &.resizing {
     transition: none;
+    cursor: col-resize;
+
+    a {
+      cursor: col-resize;
+    }
   }
 
   //display: none;
@@ -154,7 +159,7 @@
   }
 }
 
-.project-resizer-wrapper {
+.project-resizer {
   .autohide & {
     display: none;
   }
@@ -163,23 +168,6 @@
   height: 100%;
   right: 0;
   top: 0;
-
   width: 16px;
-
-  .project-resizer {
-    &:extend(.project-resizer-wrapper);
-    width: 6px;
-    visibility: hidden;
-    pointer-events: none;
-    // a delay so the cursor does not flicker
-    transition-delay: 0.2s;
-  }
-
-  &:hover {
-    .project-resizer {
-      visibility: visible;
-      cursor: col-resize;
-      pointer-events: auto;
-    }
-  }
+  cursor: col-resize;
 }
diff --git a/js/ui/projectManager.js b/js/ui/projectManager.js
@@ -118,6 +118,10 @@ define([
       reader.readEntries(collect);
     }
   };
+
+  // min / max sidebar width
+  var MIN_WIDTH = 100;
+  var MAX_WIDTH = 500;
 
   // The Project Manager actually handles rendering and interfacing with the rest
   // of the code. Commands are bound to a singleton instance, but it's technically
@@ -129,10 +133,10 @@ define([
     this.expanded = {};
     this.project = null;
     this.projectFile = null;
+    this.resizing = false;
 
     if (element) {
       this.setElement(element);
-      setupSidebarResize(element, document);
     }
 
     this.loading = false;
@@ -354,6 +358,61 @@ define([
         }
         editor.focus();
       });
+
+      // make sure width is not set in element `style`
+      this.element.style.width = null;
+
+      var handle = this.element.find('.project-resizer');
+
+      this.startResize = this.startResize.bind(this);
+      this.stopResize = this.stopResize.bind(this);
+      this.resize = this.resize.bind(this);
+
+      handle.on('mousedown', this.startResize);
+
+    },
+
+
+    startResize: function (e) {
+      // do not resize when 'autohide' is on
+      if (this.element.hasClass('autohide')) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      this.element.addClass('resizing');
+      this.resizing = true;
+
+      document.on('mousemove', this.resize);
+      document.on('mouseup', this.stopResize);
+    },
+
+    resize: function (e) {
+      if (!this.resizing) return;
+
+      var mouseX = e.pageX;
+      if (mouseX > MIN_WIDTH && mouseX < MAX_WIDTH) {
+        this.element.style.width = e.pageX + 8 + 'px';
+      }
+    },
+
+    stopResize: function (e) {
+      if (!this.resizing) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      this.element.removeClass('resizing');
+      this.resizing = false;
+
+      document.off('mousemove', this.resize);
+      document.off('mouseup', this.stopResize);
+
+      //Ace doesn't know about non-window resize events
+      //moving the panel will screw up its dimensions
+      setTimeout(function() {
+        editor.resize();
+      }, 100);
     },
 
     openFile: function(path, c) {
@@ -512,67 +571,11 @@ define([
 
     getPaths: function() {
       return Object.keys(this.pathMap);
-    }
+    },
+
+
   };
 
-  // Resize sidebar
-  // min / max sidebar width
-  var MIN_WIDTH = 100;
-  var MAX_WIDTH = 500;
-
-  function setupSidebarResize(element, document) {
-    // Sidebar resizing
-    var isResizing = false;
-    // make sure width is not set in element `style`
-    element.style.width = null;
-
-    var $projectResizer = element.find('.project-resizer');
-
-    var startSidebarResize = function (evt) {
-      // do not resize when 'autohide' is on
-      if (element.hasClass('autohide')) return;
-
-      evt.preventDefault();
-      evt.stopPropagation();
-
-      element.addClass('resizing');
-      isResizing = true;
-
-      document.on('mousemove', doSidebarResize);
-      document.on('mouseup', stopSidebarResize);
-    };
-
-    var doSidebarResize = function (evt) {
-      if (!isResizing) return;
-
-      var mouseX = evt.pageX;
-      if (mouseX > MIN_WIDTH && mouseX < MAX_WIDTH) {
-        element.style.width = evt.pageX + 'px';
-      }
-    };
-
-    var stopSidebarResize = function (evt) {
-      if (!isResizing) return;
-
-      evt.preventDefault();
-      evt.stopPropagation();
-
-      element.removeClass('resizing');
-      isResizing = false;
-
-      document.off('mousemove', doSidebarResize);
-      document.off('mouseup', stopSidebarResize);
-
-      //Ace doesn't know about non-window resize events
-      //moving the panel will screw up its dimensions
-      setTimeout(function() {
-        editor.resize();
-      }, 100);
-    };
-
-    $projectResizer.on('mousedown', startSidebarResize);
-  }
-
   var pm = new ProjectManager(document.find(".project"));
   command.on("project:add-dir", pm.addDirectory.bind(pm));
   command.on("project:remove-all", pm.removeAllDirectories.bind(pm));

diff --git a/main.html b/main.html
@@ -26,9 +26,7 @@
           <span class="i18n">loading</span>
           <div class="progress"></div>
         </div>
-        <div class="project-resizer-wrapper">
-          <div class="project-resizer"></div>
-        </div>
+        <div class="project-resizer"></div>
       </div>
 
       <div class="editing">

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Caret",
   "description": "Professional text editing for Chrome and Chrome OS",
-  "version": "1.6.21",
+  "version": "1.6.22",
   "manifest_version": 2,
   "default_locale": "en",
   "icons": {