src/materialize/materialize.js
function(btn) {
    if (btn.attr('data-open') === "true") {
      return;
    }

    var offsetX, offsetY, scaleFactor;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var btnRect = btn[0].getBoundingClientRect();
    var anchor = btn.find('> a').first();
    var menu = btn.find('> ul').first();
    var backdrop = $('<div class="fab-backdrop"></div>');
    var fabColor = anchor.css('background-color');
    anchor.append(backdrop);

    offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
    offsetY = windowHeight - btnRect.bottom;
    scaleFactor = windowWidth / backdrop.width();
    btn.attr('data-origin-bottom', btnRect.bottom);
    btn.attr('data-origin-left', btnRect.left);
    btn.attr('data-origin-width', btnRect.width);

    // Set initial state
    btn.addClass('active');
    btn.attr('data-open', true);
    btn.css({
      'text-align': 'center',
      width: '100%',
      bottom: 0,
      left: 0,
      transform: 'translateX(' + offsetX + 'px)',
      transition: 'none'
    });
    anchor.css({
      transform: 'translateY(' + -offsetY + 'px)',
      transition: 'none'
    });
    backdrop.css({
      'background-color': fabColor
    });


    setTimeout(function() {
      btn.css({
        transform: '',
        transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
      });
      anchor.css({
        overflow: 'visible',
        transform: '',
        transition: 'transform .2s'
      });

      setTimeout(function() {
        btn.css({
          overflow: 'hidden',
          'background-color': fabColor
        });
        backdrop.css({
          transform: 'scale(' + scaleFactor + ')',
          transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
        });
        menu.find('> li > a').css({
          opacity: 1
        });

        // Scroll to close.
        $(window).on('scroll.fabToolbarClose', function() {
          toolbarToFAB(btn);
          $(window).off('scroll.fabToolbarClose');
          $(document).off('click.fabToolbarClose');
        });

        $(document).on('click.fabToolbarClose', function(e) {
          if (!$(e.target).closest(menu).length) {
            toolbarToFAB(btn);
            $(window).off('scroll.fabToolbarClose');
            $(document).off('click.fabToolbarClose');
          }
        });
      }, 100);
    }, 0);
  }
function(btn) {
    if (btn.attr('data-open') === "true") {
      return;
    }

    var offsetX, offsetY, scaleFactor;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var btnRect = btn[0].getBoundingClientRect();
    var anchor = btn.find('> a').first();
    var menu = btn.find('> ul').first();
    var backdrop = $('<div class="fab-backdrop"></div>');
    var fabColor = anchor.css('background-color');
    anchor.append(backdrop);

    offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
    offsetY = windowHeight - btnRect.bottom;
    scaleFactor = windowWidth / backdrop.width();
    btn.attr('data-origin-bottom', btnRect.bottom);
    btn.attr('data-origin-left', btnRect.left);
    btn.attr('data-origin-width', btnRect.width);

    // Set initial state
    btn.addClass('active');
    btn.attr('data-open', true);
    btn.css({
      'text-align': 'center',
      width: '100%',
      bottom: 0,
      left: 0,
      transform: 'translateX(' + offsetX + 'px)',
      transition: 'none'
    });
    anchor.css({
      transform: 'translateY(' + -offsetY + 'px)',
      transition: 'none'
    });
    backdrop.css({
      'background-color': fabColor
    });


    setTimeout(function() {
      btn.css({
        transform: '',
        transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
      });
      anchor.css({
        overflow: 'visible',
        transform: '',
        transition: 'transform .2s'
      });

      setTimeout(function() {
        btn.css({
          overflow: 'hidden',
          'background-color': fabColor
        });
        backdrop.css({
          transform: 'scale(' + scaleFactor + ')',
          transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
        });
        menu.find('> li > a').css({
          opacity: 1
        });

        // Scroll to close.
        $(window).on('scroll.fabToolbarClose', function() {
          toolbarToFAB(btn);
          $(window).off('scroll.fabToolbarClose');
          $(document).off('click.fabToolbarClose');
        });

        $(document).on('click.fabToolbarClose', function(e) {
          if (!$(e.target).closest(menu).length) {
            toolbarToFAB(btn);
            $(window).off('scroll.fabToolbarClose');
            $(document).off('click.fabToolbarClose');
          }
        });
      }, 100);
    }, 0);
  }
function ( btn ) { if ( btn . attr ( 'data-open' ) === "true" ) { return ; } var offsetX , offsetY , scaleFactor ; var windowWidth = window . innerWidth ; var windowHeight = window . innerHeight ; var btnRect = btn [ 0 ] . getBoundingClientRect ( ) ; var anchor = btn . find ( '> a' ) . first ( ) ; var menu = btn . find ( '> ul' ) . first ( ) ; var backdrop = $ ( '<div class="fab-backdrop"></div>' ) ; var fabColor = anchor . css ( 'background-color' ) ; anchor . append ( backdrop ) ; offsetX = btnRect . left - ( windowWidth / 2 ) + ( btnRect . width / 2 ) ; offsetY = windowHeight - btnRect . bottom ; scaleFactor = windowWidth / backdrop . width ( ) ; btn . attr ( 'data-origin-bottom' , btnRect . bottom ) ; btn . attr ( 'data-origin-left' , btnRect . left ) ; btn . attr ( 'data-origin-width' , btnRect . width ) ; // Set initial state btn . addClass ( 'active' ) ; btn . attr ( 'data-open' , true ) ; btn . css ( { 'text-align' : 'center' , width : '100%' , bottom : 0 , left : 0 , transform : 'translateX(' + offsetX + 'px)' , transition : 'none' } ) ; anchor . css ( { transform : 'translateY(' + - offsetY + 'px)' , transition : 'none' } ) ; backdrop . css ( { 'background-color' : fabColor } ) ; setTimeout ( function ( ) { btn . css ( { transform : '' , transition : 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s' } ) ; anchor . css ( { overflow : 'visible' , transform : '' , transition : 'transform .2s' } ) ; setTimeout ( function ( ) { btn . css ( { overflow : 'hidden' , 'background-color' : fabColor } ) ; backdrop . css ( { transform : 'scale(' + scaleFactor + ')' , transition : 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)' } ) ; menu . find ( '> li > a' ) . css ( { opacity : 1 } ) ; // Scroll to close. $ ( window ) . on ( 'scroll.fabToolbarClose' , function ( ) { toolbarToFAB ( btn ) ; $ ( window ) . off ( 'scroll.fabToolbarClose' ) ; $ ( document ) . off ( 'click.fabToolbarClose' ) ; } ) ; $ ( document ) . on ( 'click.fabToolbarClose' , function ( e ) { if ( ! $ ( e . target ) . closest ( menu ) . length ) { toolbarToFAB ( btn ) ; $ ( window ) . off ( 'scroll.fabToolbarClose' ) ; $ ( document ) . off ( 'click.fabToolbarClose' ) ; } } ) ; } , 100 ) ; } , 0 ) ; }
Transform FAB into toolbar
@param  {Object}  object jQuery object
Transform FAB into toolbar