1 | (function ($) {
|
2 | $(document).ready(function() {
|
3 |
|
4 |
|
5 | $.fn.reverse = [].reverse;
|
6 |
|
7 |
|
8 | $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
9 | var $this = $(this);
|
10 | openFABMenu($this);
|
11 | });
|
12 | $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
13 | var $this = $(this);
|
14 | closeFABMenu($this);
|
15 | });
|
16 |
|
17 |
|
18 | $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
|
19 | var $this = $(this);
|
20 | var $menu = $this.parent();
|
21 | if ($menu.hasClass('active')) {
|
22 | closeFABMenu($menu);
|
23 | } else {
|
24 | openFABMenu($menu);
|
25 | }
|
26 | });
|
27 |
|
28 | });
|
29 |
|
30 | $.fn.extend({
|
31 | openFAB: function() {
|
32 | var $this = $(this);
|
33 | openFABMenu($this);
|
34 | },
|
35 | closeFAB: function() {
|
36 | closeFABMenu($this);
|
37 | }
|
38 | });
|
39 |
|
40 |
|
41 | var openFABMenu = function (btn) {
|
42 | $this = btn;
|
43 | if ($this.hasClass('active') === false) {
|
44 |
|
45 |
|
46 | var horizontal = $this.hasClass('horizontal');
|
47 | var offsetY, offsetX;
|
48 |
|
49 | if (horizontal === true) {
|
50 | offsetX = 40;
|
51 | } else {
|
52 | offsetY = 40;
|
53 | }
|
54 |
|
55 | $this.addClass('active');
|
56 | $this.find('ul .btn-floating').velocity(
|
57 | { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
|
58 | { duration: 0 });
|
59 |
|
60 | var time = 0;
|
61 | $this.find('ul .btn-floating').reverse().each( function () {
|
62 | $(this).velocity(
|
63 | { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
|
64 | { duration: 80, delay: time });
|
65 | time += 40;
|
66 | });
|
67 | }
|
68 | };
|
69 |
|
70 | var closeFABMenu = function (btn) {
|
71 | $this = btn;
|
72 |
|
73 | var horizontal = $this.hasClass('horizontal');
|
74 | var offsetY, offsetX;
|
75 |
|
76 | if (horizontal === true) {
|
77 | offsetX = 40;
|
78 | } else {
|
79 | offsetY = 40;
|
80 | }
|
81 |
|
82 | $this.removeClass('active');
|
83 | var time = 0;
|
84 | $this.find('ul .btn-floating').velocity("stop", true);
|
85 | $this.find('ul .btn-floating').velocity(
|
86 | { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
|
87 | { duration: 80 }
|
88 | );
|
89 | };
|
90 |
|
91 |
|
92 | }( jQuery ));
|