mirror of https://github.com/istio/istio.io.git
92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
(function ($) {
|
|
$(document).ready(function() {
|
|
|
|
// jQuery reverse
|
|
$.fn.reverse = [].reverse;
|
|
|
|
// Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
|
|
$(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
|
var $this = $(this);
|
|
openFABMenu($this);
|
|
});
|
|
$(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
|
var $this = $(this);
|
|
closeFABMenu($this);
|
|
});
|
|
|
|
// Toggle-on-click behaviour.
|
|
$(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
|
|
var $this = $(this);
|
|
var $menu = $this.parent();
|
|
if ($menu.hasClass('active')) {
|
|
closeFABMenu($menu);
|
|
} else {
|
|
openFABMenu($menu);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
$.fn.extend({
|
|
openFAB: function() {
|
|
openFABMenu($(this));
|
|
},
|
|
closeFAB: function() {
|
|
closeFABMenu($(this));
|
|
}
|
|
});
|
|
|
|
|
|
var openFABMenu = function (btn) {
|
|
$this = btn;
|
|
if ($this.hasClass('active') === false) {
|
|
|
|
// Get direction option
|
|
var horizontal = $this.hasClass('horizontal');
|
|
var offsetY, offsetX;
|
|
|
|
if (horizontal === true) {
|
|
offsetX = 40;
|
|
} else {
|
|
offsetY = 40;
|
|
}
|
|
|
|
$this.addClass('active');
|
|
$this.find('ul .btn-floating').velocity(
|
|
{ scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
|
|
{ duration: 0 });
|
|
|
|
var time = 0;
|
|
$this.find('ul .btn-floating').reverse().each( function () {
|
|
$(this).velocity(
|
|
{ opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
|
|
{ duration: 80, delay: time });
|
|
time += 40;
|
|
});
|
|
}
|
|
};
|
|
|
|
var closeFABMenu = function (btn) {
|
|
$this = btn;
|
|
// Get direction option
|
|
var horizontal = $this.hasClass('horizontal');
|
|
var offsetY, offsetX;
|
|
|
|
if (horizontal === true) {
|
|
offsetX = 40;
|
|
} else {
|
|
offsetY = 40;
|
|
}
|
|
|
|
$this.removeClass('active');
|
|
var time = 0;
|
|
$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 ));
|