Tooltips, onclick events and transitions

README.md

@@ -7,24 +7,59 @@ Material style floating action button with jQuery.
 
 Install via bower:
 
-```
-$ bower install jquery-fab
+``` bash
+bower install jquery-fab
 ```
 
 Create a div to wrap the FAB:
 
-```
+``` html
 <div id="wrapper"></div>
 ```
 
 Call the jqueryFab function:
 
-```
-$('#wrapper').jqueryFab(links, options);
+``` javascript
+
+var buttons = [
+            //The button at index 0 is the main button
+            {
+                "bgcolor":"#2980b9",
+                "icon":"+"
+            },
+            //Starting from index 1 buttons are on the hide/show menu
+            {
+                "href":"http://www.example.com",
+                "bgcolor":"#f1c40f",
+                "color":"fffff",
+                "icon":"<i class='fa fa-pencil'></i>",
+                "target":"_blank",
+                "title": "Link 1"
+            },
+            {
+                "href":"http://www.example.com",
+                "bgcolor":"#2ecc71",
+                "color":"#fffff",
+                "target":"_blank",
+                "icon":"<i class='fa fa-comment'></i>",
+                "title": "Link 2"
+            },
+            {
+                "bgcolor":"#e74c3c",
+                "color":"#fffff",
+                "icon":"A",
+                "onclick": function(){alert("You have pressed the fab A!")},
+                "title": "Alert"
+            }
+        ];
+        var options = {
+            rotate: true
+        };
+        $('#wrapper').jqueryFab(buttons, options);
 ```
 
-There's an example on the page [jquery-fab.html](https://github.com/jeffersonrpn/jquery-fab/blob/master/jquery-fab.html).
+There's an example on the page [jquery-fab.html](https://cdn.rawgit.com/robertsLando/jquery-fab/f9c854ef/jquery-fab.html).
 
 ## Copyright and license
 
-The license is available within the repository in the [LICENSE](https://github.com/jeffersonrpn/jquery-fab/blob/master/LICENSE.md) file.
+The license is available within the repository in the [LICENSE](https://github.com/jeffersonrpn/jquery-fab/blob/master/LICENSE.md) file.

dist/css/jquery-fab.css

@@ -16,41 +16,62 @@
   pointer-events:none;
 }
 .jfab_btns_wrapper{
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
   right:0;
   bottom:75px;
   position:absolute;
-  display:none;
   -webkit-transition: opacity 0.3s ease-in;
-       -moz-transition: opacity 0.3s ease-in;
-        -ms-transition: opacity 0.3s ease-in;
-         -o-transition: opacity 0.3s ease-in;
-            transition: opacity 0.3s ease-in;
+  -moz-transition: opacity 0.3s ease-in;
+  -ms-transition: opacity 0.3s ease-in;
+  -o-transition: opacity 0.3s ease-in;
+  transition: opacity 0.3s ease-in;
   pointer-events:all;
 }
-.jfab_btns_wrapper.show{
-  display:block;
-  opacity: 1;
+
+.jfab_btns_wrapper .sub_fab{
+  margin-bottom: 12px;
+  margin-right: 26px;
+  float: right;
+  display: inherit;
+  justify-content: flex-end;
+  align-items:center;
+  -webkit-align-items: center;
 }
-.jfab_btns_wrapper button{
+.jfab_btns_wrapper .sub_fab button{
   width:40px;
   height:40px;
   border-radius:100%;
   background:#e74c3c;
-  margin-bottom:12px;
-  margin-right:26px;
   padding:0;
   border:none;
   outline:none;
   color:#ffffff;
   font-size: 19px;
+  vertical-align: middle;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  transition:.3s;  
+  transition:.3s;
   pointer-events:all;
   cursor: pointer;
 }
-.jfab_btns_wrapper button:hover{
+.jfab_btns_wrapper .sub_fab button:hover{
   box-shadow: 0 3px 6px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.46);
 }
+.jfab_btns_wrapper .sub_fab span.sub_fab_title{
+  display: none;
+  cursor: default;
+  margin-right: 10px;
+  text-align: right;
+  padding: 3px 5px;
+  border-radius: 5px;
+  background: #3d3d3d;
+  opacity: 0.7;
+  color: #ddd;
+}
 button.jfab_main_btn{
   background-color:#e74c3c;
   width:60px;
@@ -66,21 +87,27 @@ button.jfab_main_btn{
   border:none;
   outline:none;
   color:#ffffff;
-  font-size:24px;
+  font-size: 30px;
+  vertical-align: middle;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  transition:.3s;  
+  transition:.3s;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   cursor: pointer;
   pointer-events:all;
 }
 button:hover.jfab_main_btn{
   box-shadow: 0 3px 6px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.46);
 }
-.jfab_main_btn span{
-  transition:.5s;
-}
+
 .jfab_main_btn.rotate {
   transform:rotate(45deg);
   -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
-}
+}
+
+.scale-transition { transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; }
+
+.scale-transition.scale-out {
+  transform: scale(0);
+  transition: transform 0.2s !important;
+}

dist/js/jquery-fab.js

@@ -10,47 +10,52 @@
     if(!$.jfab){
         $.jfab = new Object();
     };
-
-    $.jfab.fab = function(el, links, options){
-        var
-            base = this,
-            mainBtn,
-            subBtns;
-
+
+    $.jfab.fab = function(el, buttons, options){
+        var base = this;
+
         // Access to jQuery and DOM versions of element
         base.$el = $(el);
         base.el = el;
         base.$el.data("kc.fab", base);
         base.$el.addClass("jfab_wrapper");
-        var toogleAnimation = function(e){
-            if ($(this).attr('data-link-href').length > 0){
-                if ($(this).attr('data-link-target')){
-                    window.open($(this).attr('data-link-href'), $(this).attr('data-link-target'));
-                }else{
-                    window.location.href = $(this).attr('data-link-href');
-                }
-            }
-            subBtns.animate({
-                opacity: "toggle",
-                height: "toggle"
-            }, 200);
+
+        var toogleAnimation = function(){
+            base.subBtns.toggleClass('scale-out');
+            base.$el.find('.sub_fab_title').toggle();
             if (options.rotate) {
-                mainBtn.toggleClass('rotate');
+                base.mainBtn.toggleClass('rotate');
             }
         };
         var hide = function(e){
-            subBtns.animate({
-                opacity: "hide",
-                height: "hide"
-            }, 100);
+            base.subBtns.addClass('scale-out');
+            base.$el.find('.sub_fab_title').hide();
+
             if (options.rotate) {
-                mainBtn.removeClass('rotate');
+                base.mainBtn.removeClass('rotate');
+            }
+        };
+        var doAction = function(index){
+            if(index == 0)
+                toogleAnimation();
+
+            var button = buttons[index];
+            if(button){
+                if (button.href){
+                    if (button.target){
+                        window.open(button.href, button.target);
+                    }else{
+                        window.location.href = button.href;
+                    }
+                }else if(button.onclick instanceof Function){
+                    button.onclick();
+                }
             }
         };
 
         base.init = function(){
-            if (typeof( links ) === "undefined" || links === null){
-                links = [
+            if (typeof( buttons ) === "undefined" || buttons === null){
+                buttons = [
                     {
                         "url":null,
                         "bgcolor":"#e74c3c",
@@ -64,24 +69,41 @@
                 };
             }
             base.options = $.extend({},$.jfab.fab.defaultOptions, options);
-            base.links = links;
-            if (base.links.length > 0){
-                mainBtnLink = base.links[0];
-                colorStyle = (mainBtnLink.color)? "color:"+mainBtnLink.color+";" : "";
-                bgColorStyle = (mainBtnLink.bgcolor)? "background-color:"+mainBtnLink.bgcolor+";" : "";
-                mainBtnLinkHtml = "<button data-link-href='"+((mainBtnLink.url)?mainBtnLink.url:"")+"' data-link-target='"+((mainBtnLink.target)?mainBtnLink.target:"")+"'' class='jfab_main_btn' style='"+bgColorStyle+"'><span style='"+colorStyle+"'>"+mainBtnLink.icon+"</span></button>";
-
-                subBtnsHtml = "";
-                base.links.shift();
-                /* Loop through the remaining links array */
-                for (var i = 0; i < base.links.length; i++) {
-                    colorStyle = (base.links[i].color)? "color:"+base.links[i].color+";" : "";
-                    bgColorStyle = (base.links[i].bgcolor)? "background-color:"+base.links[i].bgcolor+";" : "";
-                    subBtnsHtml += "<div><button data-link-href='"+(base.links[i].url?base.links[i].url:"")+"' data-link-target='"+((base.links[i].target)?base.links[i].target:"")+"' class='sub_fab_btn' style='"+bgColorStyle+"'><span style='"+colorStyle+"'>"+base.links[i].icon+"</span></button></div>";
-
+            base.buttons = buttons;
+            if (base.buttons.length > 0){
+
+                var subBtns = $("<div class='jfab_btns_wrapper'></div>");
+
+                /* Loop through the remaining buttons array */
+                for (var i = 0; i < base.buttons.length; i++) {
+                    var colorStyle = (base.buttons[i].color)? "color:"+base.buttons[i].color+";" : "";
+                    var bgColorStyle = (base.buttons[i].bgcolor)? "background-color:"+base.buttons[i].bgcolor+";" : "";
+                    var button = $("<button style='"+bgColorStyle+"'><span style='"+colorStyle+"'>"+base.buttons[i].icon+"</span></button>");
+
+                    button.data('index', i);
+
+                    button.click(function(e){
+                        doAction($(this).data('index'));
+                    });
+
+                    if(i==0){
+                        button.addClass('jfab_main_btn');
+                        button.focusout(function(){setTimeout(hide, 200)});
+                        base.$el.append(button);
+                        base.mainBtn = button;
+                    }else{
+                        button.addClass('sub_fab_btn scale-transition scale-out');
+                        button = $('<div class="sub_fab"></div>').append(button);
+
+                        if(base.buttons[i].title)
+                            button.prepend('<span class="sub_fab_title">'+base.buttons[i].title+'</span>');
+
+                        subBtns.prepend(button);
+                    }
                 }
-                subBtnsHtml = "<div class='jfab_btns_wrapper'>"+subBtnsHtml+"</div>";
-                base.$el.append(subBtnsHtml).append(mainBtnLinkHtml);
+
+                base.$el.prepend(subBtns);
+                base.subBtns = base.$el.find('.sub_fab_btn');
 
             }else{
                 if (typeof console == "undefined") {
@@ -91,33 +113,20 @@
                         }
                     };
                 }
-                console.log("Invalid links array param");
+                console.log("Invalid buttons array param");
             }
-            mainBtn = base.$el.find(".jfab_main_btn");
-            subBtns = base.$el.find(".jfab_btns_wrapper");
-
-            mainBtn.click(toogleAnimation);
-            mainBtn.focusout(hide);
 
-            subBtns.find('.sub_fab_btn').on('mousedown', function(e){
-                if ($(this).attr('data-link-href').length > 0){
-                    if ($(this).attr('data-link-target')){
-                        window.open($(this).attr('data-link-href'), $(this).attr('data-link-target'));
-                    }else{
-                        window.location.href = $(this).attr('data-link-href');
-                    }
-                }
-            });
         };
+
         base.init();
     };
-    
+
     $.jfab.fab.defaultOptions = {};
-    
-    $.fn.jqueryFab = function(links, options){
+
+    $.fn.jqueryFab = function(buttons, options){
         return this.each(function(){
-            (new $.jfab.fab(this, links, options));
+            (new $.jfab.fab(this, buttons, options));
         });
     };
-    
+
 })(jQuery);