https://shotcut.org/assets/js/jquery.hoverdir.js

1/**
2 * jquery.hoverdir.js v1.1.0
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2012, Codrops
9 * http://www.codrops.com
10 */
11;( function( $, window, undefined ) {
12	
13	'use strict';
14
15	$.HoverDir = function( options, element ) {
16		
17		this.$el = $( element );
18		this._init( options );
19
20	};
21
22	// the options
23	$.HoverDir.defaults = {
24		speed : 300,
25		easing : 'ease',
26		hoverDelay : 0,
27		inverse : false
28	};
29
30	$.HoverDir.prototype = {
31
32		_init : function( options ) {
33			
34			// options
35			this.options = $.extend( true, {}, $.HoverDir.defaults, options );
36			// transition properties
37			this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
38			// support for CSS transitions
39			this.support = Modernizr.csstransitions;
40			// load the events
41			this._loadEvents();
42
43		},
44		_loadEvents : function() {
45
46			var self = this;
47			
48			this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
49				
50				var $el = $( this ),
51					$hoverElem = $el.find( 'div' ),
52					direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
53					styleCSS = self._getStyle( direction );
54				
55				if( event.type === 'mouseenter' ) {
56					
57					$hoverElem.hide().css( styleCSS.from );
58					clearTimeout( self.tmhover );
59
60					self.tmhover = setTimeout( function() {
61						
62						$hoverElem.show( 0, function() {
63							
64							var $el = $( this );
65							if( self.support ) {
66								$el.css( 'transition', self.transitionProp );
67							}
68							self._applyAnimation( $el, styleCSS.to, self.options.speed );
69
70						} );
71						
72					
73					}, self.options.hoverDelay );
74					
75				}
76				else {
77				
78					if( self.support ) {
79						$hoverElem.css( 'transition', self.transitionProp );
80					}
81					clearTimeout( self.tmhover );
82					self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
83					
84				}
85					
86			} );
87
88		},
89		// credits : http://stackoverflow.com/a/3647634
90		_getDir : function( $el, coordinates ) {
91			
92			// the width and height of the current div
93			var w = $el.width(),
94				h = $el.height(),
95
96				// calculate the x and y to get an angle to the center of the div from that x and y.
97				// gets the x value relative to the center of the DIV and "normalize" it
98				x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
99				y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
100			
101				// the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
102				// first calculate the angle of the point,
103				// add 180 deg to get rid of the negative values
104				// divide by 90 to get the quadrant
105				// add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
106				direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
107			
108			return direction;
109			
110		},
111		_getStyle : function( direction ) {
112			
113			var fromStyle, toStyle,
114				slideFromTop = { left : '0px', top : '-100%' },
115				slideFromBottom = { left : '0px', top : '100%' },
116				slideFromLeft = { left : '-100%', top : '0px' },
117				slideFromRight = { left : '100%', top : '0px' },
118				slideTop = { top : '0px' },
119				slideLeft = { left : '0px' };
120			
121			switch( direction ) {
122				case 0:
123					// from top
124					fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
125					toStyle = slideTop;
126					break;
127				case 1:
128					// from right
129					fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
130					toStyle = slideLeft;
131					break;
132				case 2:
133					// from bottom
134					fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
135					toStyle = slideTop;
136					break;
137				case 3:
138					// from left
139					fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
140					toStyle = slideLeft;
141					break;
142			};
143			
144			return { from : fromStyle, to : toStyle };
145					
146		},
147		// apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
148		_applyAnimation : function( el, styleCSS, speed ) {
149
150			$.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
151			el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) );
152
153		},
154
155	};
156	
157	var logError = function( message ) {
158
159		if ( window.console ) {
160
161			window.console.error( message );
162		
163		}
164
165	};
166	
167	$.fn.hoverdir = function( options ) {
168
169		var instance = $.data( this, 'hoverdir' );
170		
171		if ( typeof options === 'string' ) {
172			
173			var args = Array.prototype.slice.call( arguments, 1 );
174			
175			this.each(function() {
176			
177				if ( !instance ) {
178
179					logError( "cannot call methods on hoverdir prior to initialization; " +
180					"attempted to call method '" + options + "'" );
181					return;
182				
183				}
184				
185				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
186
187					logError( "no such method '" + options + "' for hoverdir instance" );
188					return;
189				
190				}
191				
192				instance[ options ].apply( instance, args );
193			
194			});
195		
196		} 
197		else {
198		
199			this.each(function() {
200				
201				if ( instance ) {
202
203					instance._init();
204				
205				}
206				else {
207
208					instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
209				
210				}
211
212			});
213		
214		}
215		
216		return instance;
217		
218	};
219	
220} )( jQuery, window );