From 863f52de9153a7c8e6fd86544486a8ff548dad46 Mon Sep 17 00:00:00 2001
From: Djamil Legato <djamil@djamil.it>
Date: Fri, 29 May 2015 17:44:14 -0700
Subject: [PATCH] Added opening/closing classnames for offcanvas behavior
 (#390)

---
 assets/common/application/offcanvas/index.js | 11 ++++++++---
 assets/common/js/main.js                     | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/assets/common/application/offcanvas/index.js b/assets/common/application/offcanvas/index.js
index 705ff56d5..3a331e90c 100644
--- a/assets/common/application/offcanvas/index.js
+++ b/assets/common/application/offcanvas/index.js
@@ -50,6 +50,8 @@ var Offcanvas = new prime({
         touch: true,
 
         openClass: 'g-offcanvas-open',
+        openingClass: 'g-offcanvas-opening',
+        closingClass: 'g-offcanvas-closing',
         overlayClass: 'g-nav-overlay'
     },
 
@@ -181,9 +183,8 @@ var Offcanvas = new prime({
 
         if (this.opened) { return this; }
 
-        if (!this.htmlEl.hasClass(this.options.openClass)) {
-            this.htmlEl.addClass(this.options.openClass);
-        }
+        this.htmlEl.addClass(this.options.openClass);
+        this.htmlEl.addClass(this.options.openingClass);
 
         this.overlay[0].style.opacity = 1;
 
@@ -194,6 +195,7 @@ var Offcanvas = new prime({
         setTimeout(bind(function() {
             var panel = this.panel[0];
 
+            this.htmlEl.removeClass(this.options.openingClass);
             panel.style.transition = panel.style['-webkit-transition'] = '';
         }, this), this.options.duration);
 
@@ -209,6 +211,8 @@ var Offcanvas = new prime({
         if (!this.opened && !this.opening) { return this; }
         if (this.panel !== element && this.dragging) { return false; }
 
+        this.htmlEl.addClass(this.options.closingClass);
+
         this.overlay[0].style.opacity = 0;
 
         this._setTransition();
@@ -219,6 +223,7 @@ var Offcanvas = new prime({
             var panel = this.panel[0];
 
             this.htmlEl.removeClass(this.options.openClass);
+            this.htmlEl.removeClass(this.options.closingClass);
             panel.style.transition = panel.style['-webkit-transition'] = '';
         }, this), this.options.duration);
 
diff --git a/assets/common/js/main.js b/assets/common/js/main.js
index 089cd7cdb..8522e7ec5 100644
--- a/assets/common/js/main.js
+++ b/assets/common/js/main.js
@@ -368,6 +368,8 @@ var Offcanvas = new prime({
         touch: true,
 
         openClass: 'g-offcanvas-open',
+        openingClass: 'g-offcanvas-opening',
+        closingClass: 'g-offcanvas-closing',
         overlayClass: 'g-nav-overlay'
     },
 
@@ -499,9 +501,8 @@ var Offcanvas = new prime({
 
         if (this.opened) { return this; }
 
-        if (!this.htmlEl.hasClass(this.options.openClass)) {
-            this.htmlEl.addClass(this.options.openClass);
-        }
+        this.htmlEl.addClass(this.options.openClass);
+        this.htmlEl.addClass(this.options.openingClass);
 
         this.overlay[0].style.opacity = 1;
 
@@ -512,6 +513,7 @@ var Offcanvas = new prime({
         setTimeout(bind(function() {
             var panel = this.panel[0];
 
+            this.htmlEl.removeClass(this.options.openingClass);
             panel.style.transition = panel.style['-webkit-transition'] = '';
         }, this), this.options.duration);
 
@@ -527,6 +529,8 @@ var Offcanvas = new prime({
         if (!this.opened && !this.opening) { return this; }
         if (this.panel !== element && this.dragging) { return false; }
 
+        this.htmlEl.addClass(this.options.closingClass);
+
         this.overlay[0].style.opacity = 0;
 
         this._setTransition();
@@ -537,6 +541,7 @@ var Offcanvas = new prime({
             var panel = this.panel[0];
 
             this.htmlEl.removeClass(this.options.openClass);
+            this.htmlEl.removeClass(this.options.closingClass);
             panel.style.transition = panel.style['-webkit-transition'] = '';
         }, this), this.options.duration);