Never allow range handles to overlap.

onedesign · Feb 5, 2017 · 07b7b1c · 07b7b1c
1 parent deddc97
commit 07b7b1c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/anim_panel.js b/anim_panel.js
@@ -637,17 +637,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	  };
 
 	  var _updateRangePositions = function() {
+	    _updateRangeStartPosition();
+	    _updateRangeEndPosition();
+	  };
+
+	  var _updateRangeStartPosition = function() {
 	    var startPosition = _getRangeHandlePositionFromTime(self.loopIn);
-	    var endPosition = _getRangeHandlePositionFromTime(self.loopOut);
 	    var rangeStartEl = self.sliderRangeStartEl;
-	    var rangeEndEl = self.sliderRangeEndEl;
-
 	    self.draggableStart.position.x = startPosition;
 	    rangeStartEl.style.left = startPosition + 'px';
+	  }
 
+	  var _updateRangeEndPosition = function() {
+	    var endPosition = _getRangeHandlePositionFromTime(self.loopOut);
+	    var rangeEndEl = self.sliderRangeEndEl;
 	    self.draggableEnd.position.x = endPosition;
 	    rangeEndEl.style.left = endPosition + 'px';
-	  };
+	  }
 
 	  var _setLoopDefaults = function(evt) {
 	    self.loopIn = 0;
@@ -708,7 +714,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 
 	  self.setLoopIn = function(time) {
-	    if (time >= self.loopOut) time = self.loopOut - 0.1;
+	    if (time >= self.loopOut) {
+	      self.setLoopOut(time + 0.1);
+	      _updateRangeEndPosition();
+	    }
 	    if (time < 0) time = 0;
 	    localStorage.setItem('loopIn', time);
 	    self.loopIn = time;
@@ -717,7 +726,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  };
 
 	  self.setLoopOut = function(time) {
-	    if (time <= self.loopIn) time = self.loopIn + 0.1;
+	    if (time <= self.loopIn) {
+	      self.setLoopIn(time - 0.1);
+	      _updateRangeStartPosition();
+	    };
 	    if (time > timeline.totalDuration()) time = timeline.totalDuration();
 	    localStorage.setItem('loopOut', time);
 	    self.loopOut = time;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anim-panel",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A utility panel to make working with Greensock Animation Platform timeline animations easier.",
   "repository": {
     "type": "git",

diff --git a/src/modules/progress.js b/src/modules/progress.js
@@ -179,17 +179,23 @@ module.exports = function(timeline, options) {
   };
 
   var _updateRangePositions = function() {
+    _updateRangeStartPosition();
+    _updateRangeEndPosition();
+  };
+
+  var _updateRangeStartPosition = function() {
     var startPosition = _getRangeHandlePositionFromTime(self.loopIn);
-    var endPosition = _getRangeHandlePositionFromTime(self.loopOut);
     var rangeStartEl = self.sliderRangeStartEl;
-    var rangeEndEl = self.sliderRangeEndEl;
-
     self.draggableStart.position.x = startPosition;
     rangeStartEl.style.left = startPosition + 'px';
+  }
 
+  var _updateRangeEndPosition = function() {
+    var endPosition = _getRangeHandlePositionFromTime(self.loopOut);
+    var rangeEndEl = self.sliderRangeEndEl;
     self.draggableEnd.position.x = endPosition;
     rangeEndEl.style.left = endPosition + 'px';
-  };
+  }
 
   var _setLoopDefaults = function(evt) {
     self.loopIn = 0;
@@ -250,7 +256,10 @@ module.exports = function(timeline, options) {
   }
 
   self.setLoopIn = function(time) {
-    if (time >= self.loopOut) time = self.loopOut - 0.1;
+    if (time >= self.loopOut) {
+      self.setLoopOut(time + 0.1);
+      _updateRangeEndPosition();
+    }
     if (time < 0) time = 0;
     localStorage.setItem('loopIn', time);
     self.loopIn = time;
@@ -259,7 +268,10 @@ module.exports = function(timeline, options) {
   };
 
   self.setLoopOut = function(time) {
-    if (time <= self.loopIn) time = self.loopIn + 0.1;
+    if (time <= self.loopIn) {
+      self.setLoopIn(time - 0.1);
+      _updateRangeStartPosition();
+    };
     if (time > timeline.totalDuration()) time = timeline.totalDuration();
     localStorage.setItem('loopOut', time);
     self.loopOut = time;