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

Offcanvas now adds an option to switch between CSS3 and CSS2 animations, CSS3 being default and the most optimized and fast. An HTML class is also added as CSS hook

Browse Source
This commit is contained in:
Djamil Legato
2015-11-12 17:38:15 -08:00
parent 04a9899b86
commit 9d22a9af3d
5 changed files with 108 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/common/application/offcanvas/index.js
+50 -13
View File
@@ -48,6 +48,7 @@ var Offcanvas = new prime({
},
padding: 0,
touch: true,
css3: true,
openClass: 'g-offcanvas-open',
openingClass: 'g-offcanvas-opening',
@@ -83,8 +84,9 @@ var Offcanvas = new prime({
if (!this.panel || !this.offcanvas) { return false; }
var swipe = this.offcanvas.data('g-offcanvas-swipe');
this.setOptions({ touch: !!(swipe !== null ? parseInt(swipe) : 1) });
var swipe = this.offcanvas.data('g-offcanvas-swipe'),
css3 = this.offcanvas.data('g-offcanvas-css3');
this.setOptions({ touch: !!(swipe !== null ? parseInt(swipe) : 1), css3: !!(css3 !== null ? parseInt(css3) : 1) });
if (!this.options.padding) {
this.offcanvas[0].style.display = 'block';
@@ -96,6 +98,8 @@ var Offcanvas = new prime({
this.tolerance = typeof this.options.tolerance == 'function' ? this.options.tolerance.call(this, this.options.padding) : this.options.tolerance;
this.htmlEl.addClass('g-offcanvas-' + (this.options.css3 ? 'css3' : 'css2'));
this.attach();
this._checkTogglers();
@@ -191,6 +195,11 @@ var Offcanvas = new prime({
this.overlay[0].style.opacity = 1;
if (this.options.css3) {
// for translate3d
this.panel[0].style[this.getOffcanvasPosition()] = 'inherit';
}
this._setTransition();
this._translateXTo((this.bodyEl.hasClass('g-offcanvas-right') ? -1 : 1) * this.options.padding);
this.opened = true;
@@ -199,7 +208,7 @@ var Offcanvas = new prime({
var panel = this.panel[0];
this.htmlEl.removeClass(this.options.openingClass);
panel.style.transition = panel.style['-webkit-transition'] = '';
panel.style.transition = panel.style[prefix.css + 'transition'] = '';
}, this), this.options.duration);
return this;
@@ -227,7 +236,9 @@ var Offcanvas = new prime({
this.htmlEl.removeClass(this.options.openClass);
this.htmlEl.removeClass(this.options.closingClass);
panel.style.transition = panel.style['-webkit-transition'] = '';
panel.style.transition = panel.style[prefix.css + 'transition'] = '';
panel.style.transform = panel.style[prefix.css + 'transform'] = '';
panel.style[this.getOffcanvasPosition()] = '';
}, this), this.options.duration);
@@ -241,18 +252,35 @@ var Offcanvas = new prime({
return this[this.opened ? 'close' : 'open'](event, element);
},
getOffcanvasPosition: function() {
return this.bodyEl.hasClass('g-offcanvas-right') ? 'right' : 'left';
},
_setTransition: function() {
var panel = this.panel[0];
panel.style[prefix.css + 'transition'] = panel.style.transition = 'left ' + this.options.duration + 'ms ' + this.options.effect + ', right ' + this.options.duration + 'ms ' + this.options.effect;
if (this.options.css3) {
// for translate3d
panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
} else {
// left/right transition
panel.style[prefix.css + 'transition'] = panel.style.transition = 'left ' + this.options.duration + 'ms ' + this.options.effect + ', right ' + this.options.duration + 'ms ' + this.options.effect;
}
},
_translateXTo: function(x) {
var panel = this.panel[0],
placement = (this.bodyEl.hasClass('g-offcanvas-right') ? 'right' : 'left');
placement = this.getOffcanvasPosition();
this.offset.x.current = x;
panel.style[placement] = Math.abs(x) + 'px';
if (this.options.css3) {
// for translate3d
panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
} else {
// left/right transition
panel.style[placement] = Math.abs(x) + 'px';
}
},
_bodyScroll: function() {
@@ -290,11 +318,15 @@ var Offcanvas = new prime({
_touchMove: function(event) {
if (isScrolling || this.preventOpen || !event.touches) { return; }
if (this.options.css3) {
this.panel[0].style[this.getOffcanvasPosition()] = 'inherit';
}
var placement = (this.bodyEl.hasClass('g-offcanvas-right') ? 'right' : 'left'),
var placement = this.getOffcanvasPosition(),
diffX = clamp(event.touches[0].clientX - this.offset.x.start, -this.options.padding, this.options.padding),
translateX = this.offset.x.current = diffX,
diffY = Math.abs(event.touches[0].pageY - this.offset.y.start),
diffY = Math.abs(event.touches[0].pageY - this.offset.y.start),
offset = placement == 'right' ? -1 : 1,
overlayOpacity;
if (Math.abs(translateX) > this.options.padding) { return; }
@@ -314,16 +346,21 @@ var Offcanvas = new prime({
}
if ((placement == 'left' && diffX <= 0) || (placement == 'right' && diffX >= 0)) {
var norm = placement == 'left' ? 1 : -1;
translateX = diffX + (norm * this.options.padding);
translateX = diffX + (offset * this.options.padding);
this.opening = false;
}
overlayOpacity = mapNumber(Math.abs(translateX), 0, this.options.padding, 0, 1);
this.panel[0].style[placement] = Math.abs(translateX) + 'px';
this.overlay[0].style.opacity = overlayOpacity;
if (this.options.css3) {
// for translate3d
this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
} else {
// left/right transition
this.panel[0].style[placement] = Math.abs(translateX) + 'px';
}
this.moved = true;
}
},