LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    
    
    
    
      
      
      
      



    
        
    
    
      
A Material design style menu with fast action buttons.
  1. Click to open the menu
  2. Use mouse/touch to spin the buttons (drag on different direction)
CSS
/*
* Mixins
*/
body {
  background: url(http://rats-funnybone.com/wp-content/uploads/2013/08/aura-background-large-1.jpg) no-repeat;
  background-size: 100%;
}

.fab-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform: scale(2);
  transform: scale(2);
  position: absolute;
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
  z-index: 99;
  padding: 20px;
}
.fab-menu.fab-menu-left {
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
}
.fab-menu.fab-menu-right {
  top: auto;
  right: 0;
  left: auto;
  bottom: 0;
}
.fab-menu .fab-menu-button {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 101;
}

.fab-menu-items {
  /**
   * @see http://hugogiraudel.com/2013/04/02/items-on-circle/
   */
  z-index: 99;
  position: absolute;
  width: 168px;
  height: 168px;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  list-style: none;
}
.fab-menu.active .fab-menu-items {
  display: block;
}
.fab-menu-items > li {
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  display: block;
  position: absolute;
  width: 56px;
  height: 56px;
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
}

.fab-menu-overlay {
  -webkit-transition: all 0.2s ease 0.2s;
  transition: all 0.2s ease 0.2s;
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  z-index: 98;
}
.fab-menu-overlay.active {
  display: block;
}
JS
angular.module('fabMenu', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  .directive('fabMenu', function($timeout, $ionicGesture) {

    var options = {
        baseAngle: 270,
        rotationAngle: 30,
        distance: 112,
        animateInOut: 'all', // can be slide, rotate, all
      },
      buttons = [],
      buttonContainers = [],
      buttonsContainer = null,
      lastDragTime = 0,
      currentX = 0,
      currentY = 0,
      previousSpeed     = 15,

      init = function() {

        buttons = document.getElementsByClassName('fab-menu-button-item');
        buttonContainers = document.querySelectorAll('.fab-menu-items > li');
        buttonsContainer = document.getElementsByClassName('fab-menu-items');

        for (var i = 0; i < buttonContainers.length; i++) {

          var button = buttonContainers.item(i);
          var angle = (options.baseAngle + (options.rotationAngle * i));
          button.style.transform = "rotate(" + options.baseAngle + "deg) translate(0px) rotate(-" + options.baseAngle + "deg) scale(0)";
          button.style.WebkitTransform = "rotate(" + options.baseAngle + "deg) translate(0px) rotate(-" + options.baseAngle + "deg) scale(0)";
          button.setAttribute('angle', '' + angle);
        }
      },

      animateButtonsIn = function() {
        for (var i = 0; i < buttonContainers.length; i++) {

          var button = buttonContainers.item(i);
          var angle = button.getAttribute('angle');
          button.style.transform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
          button.style.WebkitTransform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
        }
      },
      animateButtonsOut = function() {
        for (var i = 0; i < buttonContainers.length; i++) {

          var button = buttonContainers.item(i);
          var angle = (options.baseAngle + (options.rotationAngle * i));
          button.setAttribute('angle', '' + angle);
          button.style.transform = "rotate(" + options.baseAngle + "deg) translate(0px) rotate(-" + options.baseAngle + "deg) scale(0)";
          button.style.WebkitTransform = "rotate(" + options.baseAngle + "deg) translate(0px) rotate(-" + options.baseAngle + "deg) scale(0)";
        }
      },

      rotateButtons = function(direction, speed) {

        // still looking for a better solution to handle the rotation speed
        // the direction will be used to define the angle calculation

        // max speed value is 25 // can change this :)
        // used previousSpeed to reduce the speed diff on each tick
        speed = (speed > 15) ? 15 : speed;
        speed = (speed + previousSpeed) / 2;
        previousSpeed = speed; 
        
        var moveAngle = (direction * speed);

        // if first item is on top right or last item on bottom left, move no more
        if ((parseInt(buttonContainers.item(0).getAttribute('angle')) + moveAngle >= 285 && direction > 0) ||
          (parseInt(buttonContainers.item(buttonContainers.length - 1).getAttribute('angle')) + moveAngle <= 345 && direction < 0)
        ) {
          return;
        }

        for (var i = 0; i < buttonContainers.length; i++) {

          var button = buttonContainers.item(i),
            angle = parseInt(button.getAttribute('angle'));

          angle = angle + moveAngle;

          button.setAttribute('angle', '' + angle);

          button.style.transform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
          button.style.WebkitTransform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
        }
      },

      endRotateButtons = function() {

        for (var i = 0; i < buttonContainers.length; i++) {

          var button = buttonContainers.item(i),
            angle = parseInt(button.getAttribute('angle')),
            diff = angle % options.rotationAngle;
          // Round the angle to realign the elements after rotation ends
          angle = diff > options.rotationAngle / 2 ? angle + options.rotationAngle - diff : angle - diff;

          button.setAttribute('angle', '' + angle);

          button.style.transform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
          button.style.WebkitTransform = "rotate(" + angle + "deg) translate(" + options.distance + "px) rotate(-" + angle + "deg) scale(1)";
        }
      };

    return {
      templateUrl: "templates/fab-menu.html",
      link: function(scope) {
        console.info("fab-menu :: link");

        init();

        scope.fabMenu = {
          active: false
        };

        var menuItems = angular.element(buttonsContainer);

        $ionicGesture.on('touch', function(event) {

          console.log('drag starts', event);
          lastDragTime = 0;
          currentX = event.gesture.deltaX;
          currentY = event.gesture.deltaY;
          previousSpeed = 0;

        }, menuItems)

        $ionicGesture.on('release', function(event) {
          console.log('drag ends');
          endRotateButtons();
        }, menuItems);

        $ionicGesture.on('drag', function(event) {

          if (event.gesture.timeStamp - lastDragTime > 100) {

            var direction = 1,
              deltaX = event.gesture.deltaX - currentX,
              deltaY = event.gesture.deltaY - currentY,
              delta = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY));

            if ((deltaX <= 0 && deltaY <= 0) || (deltaX <= 0 && Math.abs(deltaX) > Math.abs(deltaY))) {
              direction = -1;
            } else if ((deltaX >= 0 && deltaY >= 0) || (deltaY <= 0 && Math.abs(deltaX) < Math.abs(deltaY))) {
              direction = 1;
            }

            rotateButtons(direction, delta);

            lastDragTime = event.gesture.timeStamp;
            currentX = event.gesture.deltaX;
            currentY = event.gesture.deltaY;
          }
        }, menuItems);

        scope.fabMenuToggle = function() {

          if (scope.fabMenu.active) { // Close Menu
            animateButtonsOut();
          } else { // Open Menu
            animateButtonsIn();
          }
          scope.fabMenu.active = !scope.fabMenu.active;
        }

      }
    }
  })
Host Instantly Drag and Drop Website Builder

 

Description

A Material design style menu with fast action buttons.
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID