theoretically successful History.js integration, still WIP (#5)

index.html

@@ -113,7 +113,7 @@ <h2>Where to get it</h2>
 // the view container, any elements therein with a class of
 // 'view' will be a view, and the only default option we're
 // overriding is the duration of the animations.
-$('.views').simpleSlideView({ duration: 250, useHistoryJS: true });
+$('.views').simpleSlideView({ duration: 250, useHistory: true });
 </script>
 
 </body>

lib/simpleslideview.js

@@ -18,7 +18,6 @@
     scrollOnStart: $.scrollTo != null ? 'scrollTo' : false,
     scrollToContainerTop: true,
     maintainViewportHeight: null,
-    useHistoryJS: false,
     dataAttrEvent: 'click',
     dataAttr: {
       push: 'pushview',
@@ -37,7 +36,8 @@
       deferred: 'slideViewDeferred',
       viewChangeStart: 'viewChangeStart',
       viewChangeEnd: 'viewChangeEnd'
-    }
+    },
+    useHistory: null
   };
 
   resetStyles = function(el, styles) {
@@ -81,13 +81,6 @@
       this.$views = typeof this.options.views === 'string' ? this.$container.find(this.options.views) : $(this.options.views);
       this.$activeView = this.options.activeView != null ? $(this.options.activeView) : this.$views.first();
       this.isActive = false;
-      this.activeId = 0;
-      if (this.options.useHistoryJS) {
-        History.pushState({
-          id: this.activeId,
-          index: this.$views.index(this.$activeView)
-        }, '', '');
-      }
       if (this.options.deferOn) {
         this.$container.trigger(this.options.eventNames.deferred);
       } else {
@@ -135,17 +128,17 @@
           }
         });
       }
-      if (this.options.useHistoryJS) {
+      if (this.options.useHistory) {
+        this.historyID = 0;
+        History.replaceState({
+          id: this.historyID,
+          viewIndex: this.$views.index(this.$activeView)
+        }, null, '');
         $(window).on('statechange', function() {
-          var action, state;
-          console.log('statechange');
+          var state;
           state = History.getState();
-          if (state.data.id !== _this.activeId) {
-            console.log(state.data.index);
-            action = state.data.id > _this.activeId ? 'push' : 'pop';
-            _this.activeId = state.data.id;
-            return _this.changeView(_this.$views.get(state.data.index), action, false);
-          }
+          _this.changeView(_this.$views.get(state.data.viewIndex), (state.data.id > _this.historyID ? 'push' : 'pop'), false);
+          return _this.historyID = state.data.id;
         });
       }
       return this.$container.trigger(this.options.eventNames.on);
@@ -180,18 +173,21 @@
       return this.off();
     };
 
-    SimpleSlideView.prototype.changeView = function(targetView, action, pushState) {
+    SimpleSlideView.prototype.changeView = function(targetView, action, useHistory) {
       var $bothViews, $targetView, animateHeight, animateHeightCallback, containerWidth, eventArgs, inAnimProps, outAnimProps, resetProps, top, transformProp, translateAfter, translateBefore,
         _this = this;
       if (action == null) {
         action = 'push';
       }
-      if (pushState == null) {
-        pushState = true;
+      if (useHistory == null) {
+        useHistory = this.options.useHistory;
       }
       eventArgs = [targetView, action];
-      this.$container.trigger(this.options.eventNames.viewChangeStart, eventArgs);
       $targetView = $(targetView);
+      if ($targetView[0] === this.$activeView[0]) {
+        return;
+      }
+      this.$container.trigger(this.options.eventNames.viewChangeStart, eventArgs);
       $bothViews = this.$activeView.add($targetView);
       containerWidth = outerWidth(this.$container);
       outAnimProps = {};
@@ -233,13 +229,6 @@
       }
       animateHeightCallback = function() {
         resetStyles(_this.$container, ['height', 'overflow', 'position', 'width']);
-        if (_this.options.useHistoryJS && pushState) {
-          _this.activeId += 1;
-          History.pushState({
-            id: _this.activeId,
-            index: _this.$views.index($targetView)
-          }, '', '');
-        }
         return _this.$container.trigger(_this.options.eventNames.viewChangeEnd, eventArgs);
       };
       animateHeight = function() {
@@ -270,7 +259,14 @@
       }
       this.$activeView.removeClass(this.options.classNames.activeView);
       $targetView.addClass(this.options.classNames.activeView);
-      return this.$activeView = $targetView;
+      this.$activeView = $targetView;
+      if (useHistory) {
+        this.historyID += 1;
+        return History.pushState({
+          id: this.historyID,
+          viewIndex: this.$views.index(this.$activeView)
+        }, null, '');
+      }
     };
 
     SimpleSlideView.prototype.pushView = function(targetView) {