mfb.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /**
  2. * Material floating button
  3. * By: Nobita
  4. * Repo and docs: https://github.com/nobitagit/material-floating-button
  5. *
  6. * License: MIT
  7. */
  8. // build script hook - don't remove
  9. ;(function ( window, document, undefined ) {
  10. 'use strict';
  11. /**
  12. * Some defaults
  13. */
  14. var clickOpt = 'click',
  15. hoverOpt = 'hover',
  16. toggleMethod = 'data-mfb-toggle',
  17. menuState = 'data-mfb-state',
  18. isOpen = 'open',
  19. isClosed = 'closed',
  20. mainButtonClass = 'mfb-component__button--main';
  21. /**
  22. * Internal references
  23. */
  24. var elemsToClick,
  25. elemsToHover,
  26. mainButton,
  27. target,
  28. currentState;
  29. /**
  30. * For every menu we need to get the main button and attach the appropriate evt.
  31. */
  32. function attachEvt( elems, evt ){
  33. for( var i = 0, len = elems.length; i < len; i++ ){
  34. mainButton = elems[i].querySelector('.' + mainButtonClass);
  35. mainButton.addEventListener( evt , toggleButton, false);
  36. }
  37. }
  38. /**
  39. * Remove the hover option, set a click toggle and a default,
  40. * initial state of 'closed' to menu that's been targeted.
  41. */
  42. function replaceAttrs( elems ){
  43. for( var i = 0, len = elems.length; i < len; i++ ){
  44. elems[i].setAttribute( toggleMethod, clickOpt );
  45. elems[i].setAttribute( menuState, isClosed );
  46. }
  47. }
  48. function getElemsByToggleMethod( selector ){
  49. return document.querySelectorAll('[' + toggleMethod + '="' + selector + '"]');
  50. }
  51. /**
  52. * The open/close action is performed by toggling an attribute
  53. * on the menu main element.
  54. *
  55. * First, check if the target is the menu itself. If it's a child
  56. * keep walking up the tree until we found the main element
  57. * where we can toggle the state.
  58. */
  59. function toggleButton( evt ){
  60. target = evt.target;
  61. while ( target && !target.getAttribute( toggleMethod ) ){
  62. target = target.parentNode;
  63. if(!target) { return; }
  64. }
  65. currentState = target.getAttribute( menuState ) === isOpen ? isClosed : isOpen;
  66. target.setAttribute(menuState, currentState);
  67. }
  68. /**
  69. * On touch enabled devices we assume that no hover state is possible.
  70. * So, we get the menu with hover action configured and we set it up
  71. * in order to make it usable with tap/click.
  72. **/
  73. if ( window.Modernizr && Modernizr.touch ){
  74. elemsToHover = getElemsByToggleMethod( hoverOpt );
  75. replaceAttrs( elemsToHover );
  76. }
  77. elemsToClick = getElemsByToggleMethod( clickOpt );
  78. attachEvt( elemsToClick, 'click' );
  79. // build script hook - don't remove
  80. })( window, document );