SVL Popout Buttons Blog Snippets

controllerjs

angular.module('starter.controllers', ['svl.popout'])
.controller('MainCtrl', function($scope, $ionicPopover,svlPopoutDelegate) {

  $scope.toggled = false;
  $scope.radOffset = -Math.PI/4;
  $scope.radStep = Math.PI/8;

  $scope.showPopout = function($event){
    if ($scope.toggled){
        svlPopoutDelegate.hide();
    } else {
      svlPopoutDelegate.show($event);
    }

    $scope.toggled = !$scope.toggled;
  }
});

delegate.js

.factory('svlPopoutDelegate', function(){
  var del = {};
  var fakeFunctions = ['show','hide'];
  angular.forEach(fakeFunctions, function(fn){
    del[fn] = function(){return true;}
  });
  return del;
});

hide.js

svlPopoutDelegate.hide = function(){
  element.addClass('hidden');
  translate(element, -1000,-1000);
  angular.forEach(buttons, function(btn){
    translate(btn.element, -1000, -1000);
  });
}

show.js

svlPopoutDelegate.show = function($event){

  element.removeClass('hidden');

  var offsetObjects = document.getElementsByClassName('has-header');
  var totalOffsetHeight = 0;
  var totalOffsetWidth = element[0].scrollWidth/2;

  angular.forEach(offsetObjects, function(el){
    totalOffsetHeight += el.offsetTop + element[0].scrollHeight/2;
  });

  var coords = ionic.tap.pointerCoord($event);
  coords.y -= totalOffsetHeight;
  coords.x -= totalOffsetWidth;

  translate(element, coords.x,coords.y);

  //Make the buttonOffsetDistance and
  var buttonOffsetDistance = scope.centerOffset || 50;
  var radOffset = scope.radOffset || 0;

  angular.forEach(buttons, function(btn){

    translate(btn.element,0,0,0);

    var btnHeight = btn.element[0].scrollHeight/2;
    var btnWidth = btn.element[0].scrollWidth/2;

    $timeout(function(){

      var x = Math.round(Math.sin(radOffset)*(buttonOffsetDistance)-btnWidth);
      var y = Math.round(Math.cos(radOffset)*(-buttonOffsetDistance));

      translate(btn.element, x, y, 0.25);
      radOffset += scope.radStep || Math.PI/4;

    },0);

  });

}

style.css

.circleButton{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid black;
  height: 30px;
  width: 30px;
  text-align: center;
  display: inline-table;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 2px #888888;
  cursor: pointer;
}
.circleButton i{
  display: block;
}
.hidden{
  display: none !important;
}

svlPopoutButtonsDirective.js

.directive('svlPopoutButton', function(){
  return {
    require: '^svlPopoutButtons',
    restrict: 'E',
    transclude: true,
    scope: {},
    link: function(scope, element, attrs, buttonCtrl){

      element.css('position','absolute');

      var btn = {scope: scope, element: element};
      buttonCtrl.addButton(btn);

    },
    template: "<div class='circleButton' ng-transclude></div>"
  }
})

svlPopoutButtonsDirectiveSnip.js

angular.module('svl.popout',[])
.directive('svlPopoutButtons', function(svlPopoutDelegate, $timeout){

  var buttons = [];

  return {
    restrict: 'E',
    transclude: true,
    scope: {
      centerOffset: '=',
      radOffset: '=',
      radStep: '='
    },
    controller: function($scope){
      this.addButton = function(button){
        buttons.push(button);
      }
    },
    link: function(scope, element, attrs){
    },
    template: "<div class='circleButton' ng-transclude></div>"
  }
})

view.html

<ion-view view-title="main">
  <ion-content  ng-click="showPopout($event)">
    <h1>Tap Anywhere</h1>
    <svl-popout-buttons>
      <svl-popout-button ng-click="test1()">
        <i class="icon ion-heart"></i>
      </svl-popout-button>
      <svl-popout-button ng-click="test2()">
        <i class="icon ion-wrench"></i>
      </svl-popout-button>
      <svl-popout-button>
        <i class="icon ion-erlenmeyer-flask"></i>
      </svl-popout-button>
      <svl-popout-button ng-click="test3()">
        <i class="icon ion-pizza"></i>
      </svl-popout-button>
      <svl-popout-button>
        <i class="icon ion-beer"></i>
      </svl-popout-button>
      <svl-popout-button>
        <i class="icon ion-leaf"></i>
      </svl-popout-button>
      <svl-popout-button>
        <i class="icon ion-nuclear"></i>
      </svl-popout-button>
      <svl-popout-button>
        <i class="ion-flame"></i>
      </svl-popout-button>
    </svl-popout-buttons>
  </ion-content>
</ion-view>