From aead3b3fed1f55b94881d0b441289a4477255249 Mon Sep 17 00:00:00 2001 From: Iago Veloso Date: Sun, 25 Jun 2017 15:31:49 +0100 Subject: [PATCH] Updating jquery.hoverdir --- .../static/radioco/js/jquery.hoverdir.js | 384 ++++++++++-------- .../static/radioco/js/jquery.hoverdir.min.js | 1 + 2 files changed, 212 insertions(+), 173 deletions(-) create mode 100755 radioco/apps/radioco/static/radioco/js/jquery.hoverdir.min.js diff --git a/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.js b/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.js index aa59c11..353b215 100755 --- a/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.js +++ b/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.js @@ -1,220 +1,258 @@ /** - * jquery.hoverdir.js v1.1.0 + * jQuery.Hoverdir + * + * Modified version of https://github.com/codrops/DirectionAwareHoverEffect + * + * Modifications: + * - Removed CSS3 transitions and Modernizr requirements. + * - Applied CSS classes for improved flexibility via CSS. + * + * @copyright 2015 WebMan - Oliver Juhas, www.webmandesign.eu + * + * @link https://github.com/webmandesign/jquery.hoverdir + * + * @version 1.1.2 + */ + +/** + * jquery.hoverdir.js v1.1.2 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php - * + * * Copyright 2012, Codrops * http://www.codrops.com */ -;( function( $, window, undefined ) { - + +( function( factory ) { + + + 'use strict'; - $.HoverDir = function( options, element ) { - + + + if ( typeof define === 'function' && define.amd ) { + define( ['jquery'], factory ); + } else if ( typeof exports !== 'undefined' ) { + module.exports = factory( require( 'jquery' ) ); + } else { + factory( jQuery ); + } + + + +} )( function( $ ) { + + + + 'use strict'; + + + + function Hoverdir( element, options ) { + this.$el = $( element ); - this._init( options ); - }; + // Set options - // the options - $.HoverDir.defaults = { - speed : 300, - easing : 'ease', - hoverDelay : 0, - inverse : false - }; + this.options = $.extend( true, {}, this.defaults, options ); - $.HoverDir.prototype = { - - _init : function( options ) { - - // options - this.options = $.extend( true, {}, $.HoverDir.defaults, options ); - // transition properties - this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing; - // support for CSS transitions - this.support = Modernizr.csstransitions; - // load the events - this._loadEvents(); + // All classes that plugin generates + + this.allClasses = { + from : this.options.fromPrefix + 'top ' + this.options.fromPrefix + 'right ' + this.options.fromPrefix + 'bottom ' + this.options.fromPrefix + 'left', + to : this.options.toPrefix + 'top ' + this.options.toPrefix + 'right ' + this.options.toPrefix + 'bottom ' + this.options.toPrefix + 'left' + }; + + // Load the events + + this._loadEvents(); + } // /Hoverdir + + + + Hoverdir.prototype = { + + defaults : { + fromPrefix : 'out-', + toPrefix : 'in-' }, + + constructor : Hoverdir, + + + _loadEvents : function() { - var self = this; - - this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) { - - var $el = $( this ), - $hoverElem = $el.find( 'div' ), - direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ), - styleCSS = self._getStyle( direction ); - - if( event.type === 'mouseenter' ) { - - $hoverElem.hide().css( styleCSS.from ); - clearTimeout( self.tmhover ); - - self.tmhover = setTimeout( function() { - - $hoverElem.show( 0, function() { - - var $el = $( this ); - if( self.support ) { - $el.css( 'transition', self.transitionProp ); - } - self._applyAnimation( $el, styleCSS.to, self.options.speed ); - - } ); - - - }, self.options.hoverDelay ); - - } - else { - - if( self.support ) { - $hoverElem.css( 'transition', self.transitionProp ); - } - clearTimeout( self.tmhover ); - self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed ); - + this.$el.on( 'mouseenter.hoverdir mouseleave.hoverdir', $.proxy( function( event ) { + + var fromPrefix = this.options.fromPrefix, + toPrefix = this.options.toPrefix, + direction = this._getDir( { x : event.pageX, y : event.pageY } ), + CSSclass = this._getClass( direction ); + + if ( event.type === 'mouseenter' ) { + + this.$el + .removeClass( this.allClasses.from ) + .addClass( toPrefix + CSSclass ) + .siblings() + .removeClass( this.allClasses.to ); + + } else { + + this.$el + .removeClass( this.allClasses.to ) + .addClass( fromPrefix + CSSclass ) + .siblings() + .removeClass( this.allClasses.from ); + } - - } ); + + }, this ) ); }, - // credits : http://stackoverflow.com/a/3647634 - _getDir : function( $el, coordinates ) { - - // the width and height of the current div - var w = $el.width(), - h = $el.height(), - - // calculate the x and y to get an angle to the center of the div from that x and y. - // gets the x value relative to the center of the DIV and "normalize" it - x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ), - y = ( coordinates.y - $el.offset().top - ( h/2 )) * ( h > w ? ( w/h ) : 1 ), - - // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123); - // first calculate the angle of the point, - // add 180 deg to get rid of the negative values - // divide by 90 to get the quadrant - // add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/ - direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4; - + + + + /** + * Get the direction when the event is triggered. + * Credits : http://stackoverflow.com/a/3647634 + * + * @param {Object} coordinates + * + * @return {Interger} + */ + _getDir : function( coordinates ) { + + // The width and height of the current div + + var w = this.$el.width(), + h = this.$el.height(), + + // Calculate the x and y to get an angle to the center of the div from that x and y. + // Gets the x value relative to the center of the DIV and "normalize" it + + x = ( coordinates.x - this.$el.offset().left - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ), + y = ( coordinates.y - this.$el.offset().top - ( h / 2 ) ) * ( h > w ? ( w / h ) : 1 ), + + // The angle and the direction from where the mouse came in/went out clockwise (TRBL=0123); + // first calculate the angle of the point, + // add 180 deg to get rid of the negative values + // divide by 90 to get the quadrant + // add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left). + + direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90 ) + 3 ) % 4; + return direction; - + }, - _getStyle : function( direction ) { - - var fromStyle, toStyle, - slideFromTop = { left : '0px', top : '-100%' }, - slideFromBottom = { left : '0px', top : '100%' }, - slideFromLeft = { left : '-100%', top : '0px' }, - slideFromRight = { left : '100%', top : '0px' }, - slideTop = { top : '0px' }, - slideLeft = { left : '0px' }; - + + + + /** + * Return a class based on cursor direction + */ + _getClass : function( direction ) { + + var CSSclass; + switch( direction ) { case 0: - // from top - fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom; - toStyle = slideTop; + CSSclass = 'top'; break; case 1: - // from right - fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft; - toStyle = slideLeft; + CSSclass = 'right'; break; case 2: - // from bottom - fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop; - toStyle = slideTop; + CSSclass = 'bottom'; break; case 3: - // from left - fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight; - toStyle = slideLeft; + CSSclass = 'left'; break; - }; - - return { from : fromStyle, to : toStyle }; - + } + + return CSSclass; + }, - // apply a transition or fallback to jquery animate based on Modernizr.csstransitions support - _applyAnimation : function( el, styleCSS, speed ) { - $.fn.applyStyle = this.support ? $.fn.css : $.fn.animate; - el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) ); + + + /** + * Setting options for plugin binding + */ + setOptions : function (options) { + + this.options = $.extend( true, {}, this.defaults, this.options, options ); }, - }; - - var logError = function( message ) { - if ( window.console ) { - window.console.error( message ); - + /** + * Unbinds the plugin + */ + destroy : function () { + + this.$el.off( 'mouseenter.hoverdir mouseleave.hoverdir' ); + this.$el.data( 'hoverdir', null ); + + }, + + + + /** + * Bind the plugin + */ + rebuild : function (options) { + + if ( typeof options === 'object' ) { + this.setOptions( options ); + } + + this._loadEvents(); + } }; - - $.fn.hoverdir = function( options ) { - - var instance = $.data( this, 'hoverdir' ); - - if ( typeof options === 'string' ) { - - var args = Array.prototype.slice.call( arguments, 1 ); - - this.each(function() { - - if ( !instance ) { - - logError( "cannot call methods on hoverdir prior to initialization; " + - "attempted to call method '" + options + "'" ); - return; - - } - - if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { - logError( "no such method '" + options + "' for hoverdir instance" ); - return; - - } - - instance[ options ].apply( instance, args ); - - }); - - } - else { - - this.each(function() { - - if ( instance ) { - - instance._init(); - - } - else { - instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) ); - + + $.fn.hoverdir = function( option, parameter ) { + + return this.each( function() { + + var data = $( this ).data( 'hoverdir' ), + options = typeof option === 'object' && option; + + // Initialize hoverdir. + + if ( ! data ) { + data = new Hoverdir( this, options ); + $( this ).data( 'hoverdir', data ); + } + + // Call hoverdir method. + + if ( typeof option === 'string' ) { + data[ option ]( parameter ); + + if ( option === 'destroy' ) { + $( this ).data( 'hoverdir', false ); } + } + + } ); - }); - - } - - return instance; - }; - -} )( jQuery, window ); + + + + $.fn.hoverdir.Constructor = Hoverdir; + + + +} ); \ No newline at end of file diff --git a/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.min.js b/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.min.js new file mode 100755 index 0000000..1f1ed95 --- /dev/null +++ b/radioco/apps/radioco/static/radioco/js/jquery.hoverdir.min.js @@ -0,0 +1 @@ +!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(b,c){this.$el=a(b),this.options=a.extend(!0,{},this.defaults,c),this.allClasses={from:this.options.fromPrefix+"top "+this.options.fromPrefix+"right "+this.options.fromPrefix+"bottom "+this.options.fromPrefix+"left",to:this.options.toPrefix+"top "+this.options.toPrefix+"right "+this.options.toPrefix+"bottom "+this.options.toPrefix+"left"},this._loadEvents()}b.prototype={defaults:{fromPrefix:"out-",toPrefix:"in-"},constructor:b,_loadEvents:function(){this.$el.on("mouseenter.hoverdir mouseleave.hoverdir",a.proxy(function(a){var b=this.options.fromPrefix,c=this.options.toPrefix,d=this._getDir({x:a.pageX,y:a.pageY}),e=this._getClass(d);"mouseenter"===a.type?this.$el.removeClass(this.allClasses.from).addClass(c+e).siblings().removeClass(this.allClasses.to):this.$el.removeClass(this.allClasses.to).addClass(b+e).siblings().removeClass(this.allClasses.from)},this))},_getDir:function(a){var b=this.$el.width(),c=this.$el.height(),d=(a.x-this.$el.offset().left-b/2)*(b>c?c/b:1),e=(a.y-this.$el.offset().top-c/2)*(c>b?b/c:1),f=Math.round((Math.atan2(e,d)*(180/Math.PI)+180)/90+3)%4;return f},_getClass:function(a){var b;switch(a){case 0:b="top";break;case 1:b="right";break;case 2:b="bottom";break;case 3:b="left"}return b},setOptions:function(b){this.options=a.extend(!0,{},this.defaults,this.options,b)},destroy:function(){this.$el.off("mouseenter.hoverdir mouseleave.hoverdir"),this.$el.data("hoverdir",null)},rebuild:function(a){"object"==typeof a&&this.setOptions(a),this._loadEvents()}},a.fn.hoverdir=function(c,d){return this.each(function(){var e=a(this).data("hoverdir"),f="object"==typeof c&&c;e||(e=new b(this,f),a(this).data("hoverdir",e)),"string"==typeof c&&(e[c](d),"destroy"===c&&a(this).data("hoverdir",!1))})},a.fn.hoverdir.Constructor=b}); \ No newline at end of file