1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
/**
* Material floating button
* By: Nobita
* Repo and docs: https://github.com/nobitagit/material-floating-button
*
* License: MIT
*/
;(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' );
})( window, document );
|
