Your IP : 216.73.216.175
(function ($, anim) {
'use strict';
let _defaults = {
direction: 'top',
hoverEnabled: true,
toolbarEnabled: false
};
$.fn.reverse = [].reverse;
/**
* @class
*
*/
class FloatingActionButton extends Component {
/**
* Construct FloatingActionButton instance
* @constructor
* @param {Element} el
* @param {Object} options
*/
constructor(el, options) {
super(FloatingActionButton, el, options);
this.el.M_FloatingActionButton = this;
/**
* Options for the fab
* @member FloatingActionButton#options
* @prop {Boolean} [direction] - Direction fab menu opens
* @prop {Boolean} [hoverEnabled=true] - Enable hover vs click
* @prop {Boolean} [toolbarEnabled=false] - Enable toolbar transition
*/
this.options = $.extend({}, FloatingActionButton.defaults, options);
this.isOpen = false;
this.$anchor = this.$el.children('a').first();
this.$menu = this.$el.children('ul').first();
this.$floatingBtns = this.$el.find('ul .btn-floating');
this.$floatingBtnsReverse = this.$el.find('ul .btn-floating').reverse();
this.offsetY = 0;
this.offsetX = 0;
if (this.options.direction === 'top') {
this.$el.addClass('direction-top');
this.offsetY = 40;
} else if (this.options.direction === 'right') {
this.$el.addClass('direction-right');
this.offsetX = -40;
} else if (this.options.direction === 'bottom') {
this.$el.addClass('direction-bottom');
this.offsetY = -40;
} else {
this.$el.addClass('direction-left');
this.offsetX = 40;
}
this._setupEventHandlers();
}
static get defaults() {
return _defaults;
}
static init(els, options) {
return super.init(this, els, options);
}
/**
* Get Instance
*/
static getInstance(el) {
let domElem = !!el.jquery ? el[0] : el;
return domElem.M_FloatingActionButton;
}
/**
* Teardown component
*/
destroy() {
this._removeEventHandlers();
this.el.M_FloatingActionButton = undefined;
}
/**
* Setup Event Handlers
*/
_setupEventHandlers() {
this._handleFABClickBound = this._handleFABClick.bind(this);
this._handleOpenBound = this.open.bind(this);
this._handleCloseBound = this.close.bind(this);
if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
this.el.addEventListener('mouseenter', this._handleOpenBound);
this.el.addEventListener('mouseleave', this._handleCloseBound);
} else {
this.el.addEventListener('click', this._handleFABClickBound);
}
}
/**
* Remove Event Handlers
*/
_removeEventHandlers() {
if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
this.el.removeEventListener('mouseenter', this._handleOpenBound);
this.el.removeEventListener('mouseleave', this._handleCloseBound);
} else {
this.el.removeEventListener('click', this._handleFABClickBound);
}
}
/**
* Handle FAB Click
*/
_handleFABClick() {
if (this.isOpen) {
this.close();
} else {
this.open();
}
}
/**
* Handle Document Click
* @param {Event} e
*/
_handleDocumentClick(e) {
if (!$(e.target).closest(this.$menu).length) {
this.close();
}
}
/**
* Open FAB
*/
open() {
if (this.isOpen) {
return;
}
if (this.options.toolbarEnabled) {
this._animateInToolbar();
} else {
this._animateInFAB();
}
this.isOpen = true;
}
/**
* Close FAB
*/
close() {
if (!this.isOpen) {
return;
}
if (this.options.toolbarEnabled) {
window.removeEventListener('scroll', this._handleCloseBound, true);
document.body.removeEventListener('click', this._handleDocumentClickBound, true);
this._animateOutToolbar();
} else {
this._animateOutFAB();
}
this.isOpen = false;
}
/**
* Classic FAB Menu open
*/
_animateInFAB() {
this.$el.addClass('active');
let time = 0;
this.$floatingBtnsReverse.each((el) => {
anim({
targets: el,
opacity: 1,
scale: [.4, 1],
translateY: [this.offsetY, 0],
translateX: [this.offsetX, 0],
duration: 275,
delay: time,
easing: 'easeInOutQuad'
});
time += 40;
});
}
/**
* Classic FAB Menu close
*/
_animateOutFAB() {
this.$floatingBtnsReverse.each((el) => {
anim.remove(el);
anim({
targets: el,
opacity: 0,
scale: .4,
translateY: this.offsetY,
translateX: this.offsetX,
duration: 175,
easing: 'easeOutQuad',
complete: () => {
this.$el.removeClass('active');
}
});
});
}
/**
* Toolbar transition Menu open
*/
_animateInToolbar() {
let scaleFactor;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let btnRect = this.el.getBoundingClientRect();
let backdrop = $('<div class="fab-backdrop"></div>');
let fabColor = this.$anchor.css('background-color');
this.$anchor.append(backdrop);
this.offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
this.offsetY = windowHeight - btnRect.bottom;
scaleFactor = windowWidth / backdrop[0].clientWidth;
this.btnBottom = btnRect.bottom;
this.btnLeft = btnRect.left;
this.btnWidth = btnRect.width;
// Set initial state
this.$el.addClass('active');
this.$el.css({
'text-align': 'center',
width: '100%',
bottom: 0,
left: 0,
transform: 'translateX(' + this.offsetX + 'px)',
transition: 'none'
});
this.$anchor.css({
transform: 'translateY(' + -this.offsetY + 'px)',
transition: 'none'
});
backdrop.css({
'background-color': fabColor
});
setTimeout(() => {
this.$el.css({
transform: '',
transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
});
this.$anchor.css({
overflow: 'visible',
transform: '',
transition: 'transform .2s'
});
setTimeout(() => {
this.$el.css({
overflow: 'hidden',
'background-color': fabColor
});
backdrop.css({
transform: 'scale(' + scaleFactor + ')',
transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
});
this.$menu.children('li').children('a').css({
opacity: 1
});
// Scroll to close.
this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
window.addEventListener('scroll', this._handleCloseBound, true);
document.body.addEventListener('click', this._handleDocumentClickBound, true);
}, 100);
}, 0);
}
/**
* Toolbar transition Menu close
*/
_animateOutToolbar() {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let backdrop = this.$el.find('.fab-backdrop');
let fabColor = this.$anchor.css('background-color');
this.offsetX = this.btnLeft - (windowWidth / 2) + (this.btnWidth / 2);
this.offsetY = windowHeight - this.btnBottom;
// Hide backdrop
this.$el.removeClass('active');
this.$el.css({
'background-color': 'transparent',
transition: 'none'
});
this.$anchor.css({
transition: 'none'
});
backdrop.css({
transform: 'scale(0)',
'background-color': fabColor
});
this.$menu.children('li').children('a').css({
opacity: ''
});
setTimeout(() => {
backdrop.remove();
// Set initial state.
this.$el.css({
'text-align': '',
width: '',
bottom: '',
left: '',
overflow: '',
'background-color': '',
transform: 'translate3d(' + -this.offsetX + 'px,0,0)'
});
this.$anchor.css({
overflow: '',
transform: 'translate3d(0,' + this.offsetY + 'px,0)'
});
setTimeout(() => {
this.$el.css({
transform: 'translate3d(0,0,0)',
transition: 'transform .2s'
});
this.$anchor.css({
transform: 'translate3d(0,0,0)',
transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
});
}, 20);
}, 200);
}
}
M.FloatingActionButton = FloatingActionButton;
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(FloatingActionButton, 'floatingActionButton', 'M_FloatingActionButton');
}
}(cash, M.anime));