diff --git a/README.md b/README.md index 523a31d..27f5b0d 100644 --- a/README.md +++ b/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
``` 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":"", + "target":"_blank", + "title": "Link 1" + }, + { + "href":"http://www.example.com", + "bgcolor":"#2ecc71", + "color":"#fffff", + "target":"_blank", + "icon":"", + "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. \ No newline at end of file +The license is available within the repository in the [LICENSE](https://github.com/jeffersonrpn/jquery-fab/blob/master/LICENSE.md) file. diff --git a/dist/css/jquery-fab.css b/dist/css/jquery-fab.css index 031925e..22c38e1 100644 --- a/dist/css/jquery-fab.css +++ b/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,9 +87,10 @@ 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; @@ -76,11 +98,16 @@ button.jfab_main_btn{ 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); -} \ No newline at end of file +} + +.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; +} diff --git a/dist/js/jquery-fab.js b/dist/js/jquery-fab.js index 1422484..790360f 100644 --- a/dist/js/jquery-fab.js +++ b/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 = ""; - - 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 += "
"; - + base.buttons = buttons; + if (base.buttons.length > 0){ + + var subBtns = $("
"); + + /* 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.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 = $('
').append(button); + + if(base.buttons[i].title) + button.prepend(''+base.buttons[i].title+''); + + subBtns.prepend(button); + } } - subBtnsHtml = "
"+subBtnsHtml+"
"; - 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); diff --git a/dist/js/jquery-fab.min.js b/dist/js/jquery-fab.min.js index 94a293a..5c524cc 100644 --- a/dist/js/jquery-fab.min.js +++ b/dist/js/jquery-fab.min.js @@ -1,9 +1 @@ -/* - * Copyright 2015 - * Released under the MIT license - * https://github.com/jeffersonrpn/jquery-fab/blob/master/LICENSE.md - * - * @author: Jefferson Neves - * @version: 0.1.0 - */ -!function(t){t.jfab||(t.jfab=new Object),t.jfab.fab=function(n,a,i){var l,o,e=this;e.$el=t(n),e.el=n,e.$el.data("kc.fab",e),e.$el.addClass("jfab_wrapper");var r=function(){t(this).attr("data-link-href").length>0&&(t(this).attr("data-link-target")?window.open(t(this).attr("data-link-href"),t(this).attr("data-link-target")):window.location.href=t(this).attr("data-link-href")),o.animate({opacity:"toggle",height:"toggle"},200),i.rotate&&l.toggleClass("rotate")},s=function(){o.animate({opacity:"hide",height:"hide"},100),i.rotate&&l.removeClass("rotate")};e.init=function(){if(("undefined"==typeof a||null===a)&&(a=[{url:null,bgcolor:"#e74c3c",icon:"+"}]),("undefined"==typeof i||null===i)&&(i={rotate:!1}),e.options=t.extend({},t.jfab.fab.defaultOptions,i),e.links=a,e.links.length>0){mainBtnLink=e.links[0],colorStyle=mainBtnLink.color?"color:"+mainBtnLink.color+";":"",bgColorStyle=mainBtnLink.bgcolor?"background-color:"+mainBtnLink.bgcolor+";":"",mainBtnLinkHtml="",subBtnsHtml="",e.links.shift();for(var n=0;n";subBtnsHtml="
"+subBtnsHtml+"
",e.$el.append(subBtnsHtml).append(mainBtnLinkHtml)}else"undefined"==typeof console&&(window.console={log:function(t){alert(t)}}),console.log("Invalid links array param");l=e.$el.find(".jfab_main_btn"),o=e.$el.find(".jfab_btns_wrapper"),l.click(r),l.focusout(s),o.find(".sub_fab_btn").on("mousedown",function(){t(this).attr("data-link-href").length>0&&(t(this).attr("data-link-target")?window.open(t(this).attr("data-link-href"),t(this).attr("data-link-target")):window.location.href=t(this).attr("data-link-href"))})},e.init()},t.jfab.fab.defaultOptions={},t.fn.jqueryFab=function(n,a){return this.each(function(){new t.jfab.fab(this,n,a)})}}(jQuery); \ No newline at end of file +(function(a){if(!a.jfab){a.jfab=new Object()}a.jfab.fab=function(e,f,b){var h=this;h.$el=a(e);h.el=e;h.$el.data("kc.fab",h);h.$el.addClass("jfab_wrapper");var g=function(){h.subBtns.toggleClass("scale-out");h.$el.find(".sub_fab_title").toggle();if(b.rotate){h.mainBtn.toggleClass("rotate")}};var c=function(i){h.subBtns.addClass("scale-out");h.$el.find(".sub_fab_title").hide();if(b.rotate){h.mainBtn.removeClass("rotate")}};var d=function(i){if(i==0){g()}var j=f[i];if(j){if(j.href){if(j.target){window.open(j.href,j.target)}else{window.location.href=j.href}}else{if(j.onclick instanceof Function){j.onclick()}}}};h.init=function(){if(typeof(f)==="undefined"||f===null){f=[{url:null,bgcolor:"#e74c3c",icon:"+"}]}if(typeof(b)==="undefined"||b===null){b={rotate:false}}h.options=a.extend({},a.jfab.fab.defaultOptions,b);h.buttons=f;if(h.buttons.length>0){var n=a("
");for(var l=0;l"+h.buttons[l].icon+"");k.data("index",l);k.click(function(i){d(a(this).data("index"))});if(l==0){k.addClass("jfab_main_btn");k.focusout(function(){setTimeout(c,200)});h.$el.append(k);h.mainBtn=k}else{k.addClass("sub_fab_btn scale-transition scale-out");k=a('
').append(k);if(h.buttons[l].title){k.prepend(''+h.buttons[l].title+"")}n.prepend(k)}}h.$el.prepend(n);h.subBtns=h.$el.find(".sub_fab_btn")}else{if(typeof console=="undefined"){window.console={log:function(i){alert(i)}}}console.log("Invalid buttons array param")}};h.init()};a.jfab.fab.defaultOptions={};a.fn.jqueryFab=function(c,b){return this.each(function(){(new a.jfab.fab(this,c,b))})}})(jQuery); \ No newline at end of file diff --git a/jquery-fab.html b/jquery-fab.html index 89974e0..947e935 100644 --- a/jquery-fab.html +++ b/jquery-fab.html @@ -17,33 +17,37 @@ var links = [ { "bgcolor":"#2980b9", - "icon":"" + "icon":"+" }, { - "url":"http://www.example.com", + "href":"http://www.example.com", "bgcolor":"#f1c40f", "color":"fffff", "icon":"", - "target":"_blank" + "target":"_blank", + "title": "Link 1" }, { - "url":"http://www.example.com", + "href":"http://www.example.com", "bgcolor":"#2ecc71", "color":"#fffff", - "icon":"" + "target":"_blank", + "icon":"", + "title": "Link 2" }, { - "url":"#anchor", "bgcolor":"#e74c3c", "color":"#fffff", - "icon":"A" + "icon":"A", + "onclick": function(){alert("You have pressed the fab A!")}, + "title": "Alert" } ]; var options = { - rotate: false + rotate: true }; $('#wrapper').jqueryFab(links, options); }) - \ No newline at end of file +