/**
* Material floating button
* By: Nobita
* Repo and docs: https://github.com/nobitagit/material-floating-button
*
* License: MIT
*/
// build script hook - don't remove
;(function ( window, document, undefined ) {
'use strict';
/**
* Some defaults
*/
var clickOpt = 'click',
hoverOpt = 'hover',
toggleMethod = 'data-mfb-toggle',
menuState = 'data-mfb-state',
isOpen = 'open',
isClosed = 'closed',
mainButtonClass = 'mfb-component__button--main';
/**
* Internal references
*/
var elemsToClick,
elemsToHover,
mainButton,
target,
currentState;
/**
* For every menu we need to get the main button and attach the appropriate evt.
*/
function attachEvt( elems, evt ){
for( var i = 0, len = elems.length; i < len; i++ ){
mainButton = elems[i].querySelector('.' + mainButtonClass);
mainButton.addEventListener( evt , toggleButton, false);
}
}
/**
* Remove the hover option, set a click toggle and a default,
* initial state of 'closed' to menu that's been targeted.
*/
function replaceAttrs( elems ){
for( var i = 0, len = elems.length; i < len; i++ ){
elems[i].setAttribute( toggleMethod, clickOpt );
elems[i].setAttribute( menuState, isClosed );
}
}
function getElemsByToggleMethod( selector ){
return document.querySelectorAll('[' + toggleMethod + '="' + selector + '"]');
}
/**
* The open/close action is performed by toggling an attribute
* on the menu main element.
*
* First, check if the target is the menu itself. If it's a child
* keep walking up the tree until we found the main element
* where we can toggle the state.
*/
function toggleButton( evt ){
target = evt.target;
while ( target && !target.getAttribute( toggleMethod ) ){
target = target.parentNode;
if(!target) { return; }
}
currentState = target.getAttribute( menuState ) === isOpen ? isClosed : isOpen;
target.setAttribute(menuState, currentState);
}
/**
* On touch enabled devices we assume that no hover state is possible.
* So, we get the menu with hover action configured and we set it up
* in order to make it usable with tap/click.
**/
if ( window.Modernizr && Modernizr.touch ){
elemsToHover = getElemsByToggleMethod( hoverOpt );
replaceAttrs( elemsToHover );
}
elemsToClick = getElemsByToggleMethod( clickOpt );
attachEvt( elemsToClick, 'click' );
// build script hook - don't remove
})( window, document );
|
Download
