IntenseWebs/gantry5
3
0
Fork 0
mirror of https://github.com/gantry/gantry5.git synced 2026-08-19 01:15:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added opening/closing classnames for offcanvas behavior (#390)

Browse Source
This commit is contained in:
Djamil Legato
2015-05-29 17:44:14 -07:00
parent d5c6af940a
commit 863f52de91
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/common/application/offcanvas/index.js
+8 -3
View File
@@ -50,6 +50,8 @@ var Offcanvas = new prime({
touch: true, touch: true,
openClass: 'g-offcanvas-open', openClass: 'g-offcanvas-open',
openingClass: 'g-offcanvas-opening',
closingClass: 'g-offcanvas-closing',
overlayClass: 'g-nav-overlay' overlayClass: 'g-nav-overlay'
}, },
@@ -181,9 +183,8 @@ var Offcanvas = new prime({
if (this.opened) { return this; } 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; this.overlay[0].style.opacity = 1;
@@ -194,6 +195,7 @@ var Offcanvas = new prime({
setTimeout(bind(function() { setTimeout(bind(function() {
var panel = this.panel[0]; var panel = this.panel[0];
this.htmlEl.removeClass(this.options.openingClass);
panel.style.transition = panel.style['-webkit-transition'] = ''; panel.style.transition = panel.style['-webkit-transition'] = '';
}, this), this.options.duration); }, this), this.options.duration);
@@ -209,6 +211,8 @@ var Offcanvas = new prime({
if (!this.opened && !this.opening) { return this; } if (!this.opened && !this.opening) { return this; }
if (this.panel !== element && this.dragging) { return false; } if (this.panel !== element && this.dragging) { return false; }
this.htmlEl.addClass(this.options.closingClass);
this.overlay[0].style.opacity = 0; this.overlay[0].style.opacity = 0;
this._setTransition(); this._setTransition();
@@ -219,6 +223,7 @@ var Offcanvas = new prime({
var panel = this.panel[0]; var panel = this.panel[0];
this.htmlEl.removeClass(this.options.openClass); this.htmlEl.removeClass(this.options.openClass);
this.htmlEl.removeClass(this.options.closingClass);
panel.style.transition = panel.style['-webkit-transition'] = ''; panel.style.transition = panel.style['-webkit-transition'] = '';
}, this), this.options.duration); }, this), this.options.duration);
assets/common/js/main.js
Vendored
+8 -3
View File
@@ -368,6 +368,8 @@ var Offcanvas = new prime({
touch: true, touch: true,
openClass: 'g-offcanvas-open', openClass: 'g-offcanvas-open',
openingClass: 'g-offcanvas-opening',
closingClass: 'g-offcanvas-closing',
overlayClass: 'g-nav-overlay' overlayClass: 'g-nav-overlay'
}, },
@@ -499,9 +501,8 @@ var Offcanvas = new prime({
if (this.opened) { return this; } 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; this.overlay[0].style.opacity = 1;
@@ -512,6 +513,7 @@ var Offcanvas = new prime({
setTimeout(bind(function() { setTimeout(bind(function() {
var panel = this.panel[0]; var panel = this.panel[0];
this.htmlEl.removeClass(this.options.openingClass);
panel.style.transition = panel.style['-webkit-transition'] = ''; panel.style.transition = panel.style['-webkit-transition'] = '';
}, this), this.options.duration); }, this), this.options.duration);
@@ -527,6 +529,8 @@ var Offcanvas = new prime({
if (!this.opened && !this.opening) { return this; } if (!this.opened && !this.opening) { return this; }
if (this.panel !== element && this.dragging) { return false; } if (this.panel !== element && this.dragging) { return false; }
this.htmlEl.addClass(this.options.closingClass);
this.overlay[0].style.opacity = 0; this.overlay[0].style.opacity = 0;
this._setTransition(); this._setTransition();
@@ -537,6 +541,7 @@ var Offcanvas = new prime({
var panel = this.panel[0]; var panel = this.panel[0];
this.htmlEl.removeClass(this.options.openClass); this.htmlEl.removeClass(this.options.openClass);
this.htmlEl.removeClass(this.options.closingClass);
panel.style.transition = panel.style['-webkit-transition'] = ''; panel.style.transition = panel.style['-webkit-transition'] = '';
}, this), this.options.duration); }, this), this.options.duration);