materialize fab downwards

materialize_fab_downwards.js

// Patches https://github.com/Dogfalo/materialize/blob/b03030ed5c5ea2018424e2b6a73084f65e8ec63d/js/buttons.js
// minor changes here, search for `downwards`

(function ($) {
  angular.element(document).ready(function() {
    // jQuery reverse
    $.fn.reverse = [].reverse;

    // unbind existing handlers
    angular.element(document).off('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)');
    angular.element(document).off('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a');    
    
    // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
    angular.element(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function() {
      var $this = angular.element(this);
      openFABMenu($this);
    });

    // Toggle-on-click behaviour.
    angular.element(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function() {
      var $this = angular.element(this);
      var $menu = $this.parent();
      if ($menu.hasClass('active')) {
        closeFABMenu($menu);
      } else {
        openFABMenu($menu);
      }
    });

  });

  $.fn.extend({
    openFAB: function() {
      openFABMenu(angular.element(this));
    },
    closeFAB: function() {
      closeFABMenu(angular.element(this));
    }
  });


  var openFABMenu = function (btn) {
    var $this = btn;
    if ($this.hasClass('active') === false) {

      // Get direction option
      var horizontal = $this.hasClass('horizontal');

      var downwards = $this.hasClass('downwards');

      var offsetY, offsetX;

      if (horizontal === true) {
        offsetX = 40;
      } else {
        offsetY = 40;
      }

      var listItems = $this.find('ul .btn-floating');

      $this.addClass('active');
      listItems.velocity(
        { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
        { duration: 0 });

      var time = 0;

      if (!downwards) {
        listItems = listItems.reverse();
      }

      listItems.each( function () {
        angular.element(this).velocity(
          { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
          { duration: 80, delay: time });
        time += 40;
      });
    }
  };

  var closeFABMenu = function (btn) {
    var $this = btn;
    // Get direction option
    var horizontal = $this.hasClass('horizontal');
    var offsetY, offsetX;

    if (horizontal === true) {
      offsetX = 40;
    } else {
      offsetY = 40;
    }

    $this.removeClass('active');
    $this.find('ul .btn-floating').velocity("stop", true);
    $this.find('ul .btn-floating').velocity(
      { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
      { duration: 80 }
    );
  };


}( jQuery ));


// Apply additonal css:
// .fixed-action-btn {

//   &.non-fixed {
//     position: static;
//     display: inline-block;
//     z-index: 1;
//   }

//   &.relativ {
//     position: relative;
//     display: inline-block;
//     right: auto;
//     left: auto;
//     z-index: 1;
//   }

//   &.downwards {
//     ul {
//       position: static;
//       bottom: inherit;
//       top: inherit;
//       margin-top: 15px;
//     }
//   }
// }



// Use in html like
var html = `
<div class="fixed-action-btn downwards non-fixed right fab-btn">
  <a class="btn-floating btn-large red accent-2">
    <i class="material-icons">menu</i>
  </a>
  <ul>
    <li>
      <a class="btn-floating blue-grey lighten-4"><i class="material-icons teal-text text-darken-3">edit</i></a>
    </li>
  </ul>
</div>`