buttons.js
2.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
(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 ));