/* * * Copyright (c) 2014 Daniele Lenares (https://github.com/Ryuk87) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version 0.5.1 * */ (function ( $ ) { $.goup = function(user_params) { /* Default Params */ var params = $.extend({ location : 'right', locationOffset : 20, bottomOffset : 10, containerRadius : 6, containerClass : 'goup-container', arrowClass : 'goup-arrow', alwaysVisible : false, trigger: 500, entryAnimation : 'fade', goupSpeed : 'slow', hideUnderWidth : 500, containerColor : '#063261', arrowColor : '#fff', title : '', titleAsText : false, titleAsTextClass : 'goup-text' }, user_params); /* */ $('body').append(''); var container = $('.'+params.containerClass); $(container).html('
'); var arrow = $('.'+params.arrowClass); /* Parameters check */ var location = params.location; if (location != 'right' && location != 'left') { location = 'right'; } var locationOffset = params.locationOffset; if (locationOffset < 0) { locationOffset = 0; } var bottomOffset = params.bottomOffset; if (bottomOffset < 0) { bottomOffset = 0; } var containerRadius = params.containerRadius if (containerRadius < 0) { containerRadius = 0; } var trigger = params.trigger; if (trigger < 0) { trigger = 0; } var hideUnderWidth = params.hideUnderWidth; if (hideUnderWidth < 0) { hideUnderWidth = 0; } var checkColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; if (checkColor.test(params.containerColor)) { var containerColor = params.containerColor; } else { var containerColor = '#3879D9'; } if (checkColor.test(params.arrowColor)) { var arrowColor = params.arrowColor; } else { var arrowColor = '#fff'; } if (params.title === '') { params.titleAsText = false; } /* */ /* Container Style */ var containerStyle = {}; containerStyle = { position : 'fixed', width : 40, height : 40, background : containerColor, cursor: 'pointer' }; containerStyle['bottom'] = bottomOffset; containerStyle[location] = locationOffset; containerStyle['border-radius'] = containerRadius; $(container).css(containerStyle); if (!params.titleAsText) { $(container).attr('title', params.title); } else { $('body').append('
'+params.title+'
'); var textContainer = $('.'+params.titleAsTextClass); $(textContainer).attr('style', $(container).attr('style')); $(textContainer).css('background','transparent') .css('width',80) .css('height','auto') .css('text-align','center') .css(location,locationOffset - 20); var containerNewBottom = $(textContainer).height() + 10; $(container).css('bottom', '+='+containerNewBottom+'px'); } /* Arrow Style */ var arrowStyle = {}; arrowStyle = { width : 0, height : 0, margin : '0 auto', 'padding-top' : 13, 'border-style' : 'solid', 'border-width' : '0 10px 10px 10px', 'border-color' : 'transparent transparent '+arrowColor+' transparent' }; $(arrow).css(arrowStyle); /* */ /* Trigger Hide under a certain width */ var isHidden = false; $(window).resize(function(){ if ($(window).outerWidth() <= hideUnderWidth) { isHidden = true; do_animation($(container), 'hide', params.entryAnimation); if (textContainer) do_animation($(textContainer), 'hide', params.entryAnimation); } else { isHidden = false; $(window).trigger('scroll'); } }); /* If i load the page under a certain width, i don't have the event 'resize' */ if ($(window).outerWidth() <= hideUnderWidth) { isHidden = true; $(container).hide(); if (textContainer) $(textContainer).hide(); } /* Trigger show event */ if (!params.alwaysVisible) { $(window).scroll(function(){ if ($(window).scrollTop() >= trigger && !isHidden) { do_animation($(container), 'show', params.entryAnimation); if (textContainer) do_animation($(textContainer), 'show', params.entryAnimation); } if ($(window).scrollTop() < trigger && !isHidden) { do_animation($(container), 'hide', params.entryAnimation); if (textContainer) do_animation($(textContainer), 'hide', params.entryAnimation); } }); } else { do_animation($(container), 'show', params.entryAnimation); if (textContainer) do_animation($(textContainer), 'show', params.entryAnimation); } /* If i load the page and the scroll is over the trigger, i don't have immediately the event 'scroll' */ if ($(window).scrollTop() >= trigger && !isHidden) { do_animation($(container), 'show', params.entryAnimation); if (textContainer) do_animation($(textContainer), 'show', params.entryAnimation); } /* Click event */ $(container).on('click', function(){ $('html,body').animate({ scrollTop: 0 }, params.goupSpeed); return false; }); $(textContainer).on('click', function(){ $('html,body').animate({ scrollTop: 0 }, params.goupSpeed); return false; }); }; /* Private function for the animation */ function do_animation(obj, type, animation) { if (type == 'show') { switch(animation) { case 'fade': obj.fadeIn(); break; case 'slide': obj.slideDown(); break; default: obj.fadeIn(); } } else { switch(animation) { case 'fade': obj.fadeOut(); break; case 'slide': obj.slideUp(); break; default: obj.fadeOut(); } } } }( jQuery ));