mirror of
https://github.com/YunoHost-Apps/spip_ynh.git
synced 2024-09-03 20:25:59 +02:00
710 lines
15 KiB
JavaScript
710 lines
15 KiB
JavaScript
/*
|
|
* jQuery.twinkle 0.2
|
|
* http://larsjung.de/twinkle
|
|
*
|
|
* provided under the terms of the MIT License
|
|
*/
|
|
|
|
( function( $ ) {
|
|
|
|
|
|
var TwinkleEvent = function ( offX, offY, element, posX, posY ) {
|
|
|
|
this.offset = { "left": offX, "top": offY };
|
|
this.element = element;
|
|
this.position = { "left": posX, "top": posY };
|
|
};
|
|
|
|
|
|
var Twinkler = function () {
|
|
|
|
this.defaults = {
|
|
"widthRatio": 0.5,
|
|
"heightRatio": 0.5,
|
|
"delay": 0,
|
|
"gap": 0,
|
|
"effect": "splash",
|
|
"effectOptions": undefined
|
|
};
|
|
this.effects = {};
|
|
|
|
|
|
this.twinkle = function ( event, options ) {
|
|
|
|
var settings = $.extend( {}, this.defaults, options );
|
|
|
|
var effect = this.effects[settings.effect];
|
|
if ( effect !== undefined ) {
|
|
event.element = event.element || "body";
|
|
effect.run( event, settings.effectOptions );
|
|
};
|
|
};
|
|
|
|
|
|
this.twinkleAtElement = function ( htmlElement, options ) {
|
|
|
|
var settings = $.extend( {}, this.defaults, options );
|
|
|
|
var $ele = $( htmlElement );
|
|
|
|
var off = $ele.offset();
|
|
var offX = off.left + $ele.outerWidth( true ) * settings.widthRatio;
|
|
var offY = off.top + $ele.outerHeight( true ) * settings.heightRatio;
|
|
|
|
var pos = $ele.position();
|
|
var posX = pos.left + $ele.outerWidth( true ) * settings.widthRatio;
|
|
var posY = pos.top + $ele.outerHeight( true ) * settings.heightRatio;
|
|
|
|
var event = new TwinkleEvent( offX, offY, htmlElement, posX, posY );
|
|
|
|
this.twinkle( event, options );
|
|
};
|
|
|
|
|
|
this.twinkleAtElements = function ( htmlElements, options ) {
|
|
|
|
var THIS = this;
|
|
var settings = $.extend( {}, this.defaults, options );
|
|
|
|
var delay = settings.delay;
|
|
$( htmlElements ).each( function () {
|
|
var htmlElement = this;
|
|
setTimeout( function () {
|
|
THIS.twinkleAtElement( htmlElement, options );
|
|
}, delay );
|
|
delay += settings.gap;
|
|
} );
|
|
};
|
|
};
|
|
|
|
|
|
|
|
var twinkler = new Twinkler();
|
|
var namespace = "twinkle";
|
|
|
|
|
|
var globals = {
|
|
|
|
twinkle: function ( element, left, top, options ) {
|
|
|
|
var event = new TwinkleEvent( 0, 0, element, left, top );
|
|
twinkler.twinkle( event, options );
|
|
return globals;
|
|
},
|
|
|
|
add: function ( effect ) {
|
|
|
|
if ( twinkler.effects[effect.id] === undefined ) {
|
|
twinkler.effects[effect.id] = effect;
|
|
};
|
|
return globals;
|
|
},
|
|
|
|
remove: function ( effect ) {
|
|
|
|
if ( twinkler.effects[effect.id] !== undefined ) {
|
|
delete twinkler.effects[effect.id];
|
|
};
|
|
return globals;
|
|
}
|
|
};
|
|
|
|
|
|
var methods = {
|
|
|
|
twinkle: function ( options ) {
|
|
|
|
twinkler.twinkleAtElements( this, options );
|
|
return this;
|
|
}
|
|
};
|
|
|
|
|
|
$[namespace] = globals;
|
|
$.fn[namespace] = function( method ) {
|
|
|
|
if ( methods[method] ) {
|
|
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
|
|
} else if ( method === undefined || method instanceof Object ) {
|
|
return methods.twinkle.apply( this, arguments );
|
|
} else {
|
|
$.error( "Method " + method + " does not exist on jQuery." + namespace );
|
|
};
|
|
};
|
|
|
|
|
|
} )( jQuery );
|
|
|
|
|
|
/*
|
|
* jQuery.twinkle 0.2
|
|
* CSS Effects
|
|
* http://larsjung.de/twinkle
|
|
*
|
|
* provided under the terms of the MIT License
|
|
*/
|
|
|
|
( function( $ ) {
|
|
|
|
|
|
function animation( css, event, settings ) {
|
|
|
|
var $dot = $( "<div />" ).css( css ).appendTo( event.element );
|
|
|
|
var fadeIn = function() {
|
|
$dot.animate(
|
|
{
|
|
"left": event.position.left - settings.radius * 0.5,
|
|
"top": event.position.top - settings.radius * 0.5,
|
|
"width": settings.radius,
|
|
"height": settings.radius,
|
|
"opacity": 1
|
|
},
|
|
settings.duration * 0.5,
|
|
"linear",
|
|
fadeOut
|
|
);
|
|
};
|
|
var fadeOut = function () {
|
|
$dot.animate(
|
|
{
|
|
"left": event.position.left - settings.radius,
|
|
"top": event.position.top - settings.radius,
|
|
"width": settings.radius * 2,
|
|
"height": settings.radius * 2,
|
|
"opacity": 0
|
|
},
|
|
settings.duration * 0.5,
|
|
"linear",
|
|
cleanUp
|
|
);
|
|
};
|
|
var cleanUp = function () {
|
|
$dot.remove();
|
|
};
|
|
|
|
fadeIn();
|
|
};
|
|
|
|
|
|
var SplashEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 300,
|
|
"duration": 1000
|
|
};
|
|
|
|
this.id = "splash-css";
|
|
|
|
this.run = function ( event, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var css = {
|
|
"position": "absolute",
|
|
"z-index": 1000,
|
|
"display": "block",
|
|
"border-radius": settings.radius,
|
|
"background-color": settings.color,
|
|
"box-shadow": "0 0 30px " + settings.color,
|
|
"left": event.position.left,
|
|
"top": event.position.top,
|
|
"width": 0,
|
|
"height": 0,
|
|
"opacity": 0.4
|
|
};
|
|
|
|
animation( css, event, settings );
|
|
};
|
|
};
|
|
|
|
|
|
var DropEffect = function () {
|
|
|
|
var drops = new DropsEffect();
|
|
|
|
this.id = "drop-css";
|
|
|
|
this.run = function ( event, options ) {
|
|
|
|
drops.run( event, $.extend( options, { count: 1 } ) );
|
|
};
|
|
};
|
|
|
|
|
|
var DropsEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 300,
|
|
"duration": 1000,
|
|
"width": 2,
|
|
"count": 3,
|
|
"delay": 300
|
|
};
|
|
|
|
this.id = "drops-css";
|
|
|
|
this.run = function ( event, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var css = {
|
|
"position": "absolute",
|
|
"z-index": 1000,
|
|
"display": "block",
|
|
"border-radius": settings.radius,
|
|
"border": "" + settings.width + "px solid " + settings.color,
|
|
"left": event.position.left,
|
|
"top": event.position.top,
|
|
"width": 0,
|
|
"height": 0,
|
|
"opacity": 0.4
|
|
};
|
|
|
|
var delay = 0;
|
|
for ( var i = 0; i < settings.count; i++ ) {
|
|
setTimeout( function () {
|
|
animation( css, event, settings );
|
|
}, delay );
|
|
delay += settings.delay;
|
|
};
|
|
};
|
|
};
|
|
|
|
|
|
$.twinkle.add( new SplashEffect() );
|
|
$.twinkle.add( new DropEffect() );
|
|
$.twinkle.add( new DropsEffect() );
|
|
|
|
|
|
} )( jQuery );
|
|
|
|
|
|
/*
|
|
* jQuery.twinkle 0.2
|
|
* Canvas Effects
|
|
* http://larsjung.de/twinkle
|
|
*
|
|
* provided under the terms of the MIT License
|
|
*/
|
|
|
|
( function( $ ) {
|
|
|
|
|
|
var Interpolator = function ( values ) {
|
|
|
|
var equiDist = function( values ) {
|
|
|
|
var dist = 1 / ( values.length - 1 );
|
|
var points = [];
|
|
for ( var i = 0; i < values.length; i++ ) {
|
|
points.push( { x: dist * i , y: values[i] } );
|
|
};
|
|
return points;
|
|
};
|
|
|
|
var interpolate = function ( p1, p2, x ) {
|
|
|
|
var m = ( p2.y - p1.y ) / ( p2.x - p1.x );
|
|
var y = p1.y + m * ( x - p1.x );
|
|
return y;
|
|
};
|
|
|
|
var findSection = function ( x ) {
|
|
|
|
for ( var i = 0; i < points.length; i++ ) {
|
|
|
|
if ( i === 0 ) {
|
|
continue;
|
|
};
|
|
|
|
var prev = points[i-1];
|
|
var current = points[i];
|
|
if ( x >= prev.x && x <= current.x ) {
|
|
return [ prev, current ];
|
|
};
|
|
};
|
|
return undefined;
|
|
};
|
|
|
|
var points = equiDist( values );
|
|
|
|
this.get = function ( x ) {
|
|
|
|
x = Math.max( 0, Math.min( 1, x ) );
|
|
var secPts = findSection( x );
|
|
return interpolate( secPts[0], secPts[1], x );
|
|
};
|
|
|
|
};
|
|
Interpolator.scale = function ( x, scale, offset ) {
|
|
|
|
scale = scale || 1;
|
|
offset = offset || 0;
|
|
x = ( x - offset ) / scale;
|
|
return x >= 0 && x <= 1 ? x : undefined;
|
|
};
|
|
|
|
|
|
var FrameEvent = function ( ctx, frac, millis ) {
|
|
|
|
this.ctx = ctx;
|
|
this.frac = frac;
|
|
this.millis = millis;
|
|
};
|
|
|
|
|
|
var CanvasEffect = function ( twinkleEvent, width, height, frame ) {
|
|
|
|
this.element = twinkleEvent.element;
|
|
this.x = twinkleEvent.position.left;
|
|
this.y = twinkleEvent.position.top;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.frame = frame;
|
|
this.$canvas = undefined;
|
|
this.ctx = undefined;
|
|
|
|
this.init = function () {
|
|
|
|
var css = {
|
|
"position": "absolute",
|
|
"z-index": 1000,
|
|
"display": "block",
|
|
"left": this.x - this.width * 0.5,
|
|
"top": this.y - this.height * 0.5,
|
|
"width": this.width,
|
|
"height": this.height
|
|
};
|
|
|
|
this.$canvas = $( "<canvas width='" + this.width + "' height='" + this.height + "' />" ).css( css ).appendTo( this.element );
|
|
this.ctx = new Ctx( this.$canvas.get( 0 ).getContext( "2d" ) );
|
|
};
|
|
|
|
this.destroy = function () {
|
|
|
|
this.$canvas.remove();
|
|
this.$canvas = undefined;
|
|
this.ctx = undefined;
|
|
};
|
|
|
|
this.run = function ( duration, fps ) {
|
|
|
|
this.init();
|
|
|
|
var THIS = this;
|
|
var frameCount = duration / 1000 * fps;
|
|
var delta = 1 / frameCount;
|
|
for ( var i = 0; i < frameCount + 1; i++ ) {
|
|
( function ( frac ) {
|
|
setTimeout( function () {
|
|
if ( THIS.ctx ) {
|
|
THIS.frame( new FrameEvent( THIS.ctx, frac, duration * frac ) );
|
|
};
|
|
}, duration * frac );
|
|
} )( i * delta );
|
|
};
|
|
|
|
setTimeout( $.proxy( this.destroy, this ), duration );
|
|
};
|
|
|
|
};
|
|
|
|
|
|
var Path = function ( ctx ) {
|
|
|
|
var context = ctx.context;
|
|
context.beginPath();
|
|
|
|
this.circle = function ( x, y, radius ) {
|
|
|
|
context.arc( x, y, radius, 0, 2 * Math.PI, false );
|
|
return this;
|
|
};
|
|
|
|
this.stroke = function ( strokeWidth, strokeStyle ) {
|
|
|
|
context.lineWidth = strokeWidth;
|
|
context.strokeStyle = strokeStyle;
|
|
context.stroke();
|
|
return ctx;
|
|
};
|
|
|
|
this.fill = function ( fillStyle ) {
|
|
|
|
context.fillStyle = fillStyle;
|
|
context.fill();
|
|
return ctx;
|
|
};
|
|
|
|
this.draw = function ( strokeWidth, strokeStyle, fillStyle ) {
|
|
|
|
this.stroke( strokeWidth, strokeStyle );
|
|
this.fill( fillStyle );
|
|
return ctx;
|
|
};
|
|
};
|
|
|
|
|
|
var Ctx = function ( context ) {
|
|
|
|
this.context = context;
|
|
this.width = $( context.canvas ).width();
|
|
this.height = $( context.canvas ).height();
|
|
|
|
this.clear = function () {
|
|
|
|
this.resetTransform();
|
|
this.context.clearRect( 0, 0, this.width, this.height );
|
|
return this;
|
|
};
|
|
|
|
this.resetTransform = function () {
|
|
|
|
this.context.setTransform( 1, 0, 0, 1, 0, 0 );
|
|
return this;
|
|
};
|
|
|
|
this.translate = function ( x, y ) {
|
|
|
|
this.context.translate( x, y );
|
|
return this;
|
|
};
|
|
|
|
this.rotate = function ( alpha ) {
|
|
|
|
this.context.rotate( Math.PI * alpha / 180 );
|
|
return this;
|
|
};
|
|
|
|
this.opacity = function ( opacity ) {
|
|
|
|
this.context.globalAlpha = opacity;
|
|
return this;
|
|
};
|
|
|
|
this.path = function () {
|
|
|
|
return new Path( this );
|
|
};
|
|
};
|
|
|
|
|
|
|
|
var SplashEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 300,
|
|
"duration": 1000
|
|
};
|
|
|
|
this.id = "splash";
|
|
|
|
this.run = function ( twinkleEvent, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var size = settings.radius * 2;
|
|
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
|
|
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
|
|
var frame = function ( frameEvent ) {
|
|
|
|
var radius = radiusIpl.get( frameEvent.frac );
|
|
var opacity = opacityIpl.get( frameEvent.frac );
|
|
|
|
this.ctx
|
|
.clear()
|
|
.opacity( opacity )
|
|
.path()
|
|
.circle( this.width * 0.5, this.height * 0.5, radius )
|
|
.fill( settings.color );
|
|
};
|
|
|
|
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
|
|
};
|
|
};
|
|
|
|
$.twinkle.add( new SplashEffect() );
|
|
|
|
|
|
|
|
var DropEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 300,
|
|
"duration": 1000,
|
|
"width": 2
|
|
};
|
|
|
|
this.id = "drop";
|
|
|
|
this.run = function ( twinkleEvent, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var size = settings.radius * 2;
|
|
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
|
|
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
|
|
var frame = function ( frameEvent ) {
|
|
|
|
var radius = radiusIpl.get( frameEvent.frac );
|
|
var opacity = opacityIpl.get( frameEvent.frac );
|
|
|
|
this.ctx
|
|
.clear()
|
|
.opacity( opacity )
|
|
.path()
|
|
.circle( this.width * 0.5, this.height * 0.5, radius )
|
|
.stroke( settings.width, settings.color );
|
|
};
|
|
|
|
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
|
|
};
|
|
};
|
|
|
|
$.twinkle.add( new DropEffect() );
|
|
|
|
|
|
|
|
var DropsEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 300,
|
|
"duration": 1000,
|
|
"width": 2,
|
|
"count": 3,
|
|
"delay": 100
|
|
};
|
|
|
|
this.id = "drops";
|
|
|
|
this.run = function ( twinkleEvent, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var size = settings.radius * 2;
|
|
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
|
|
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
|
|
var scale = ( settings.duration - ( settings.count - 1 ) * settings.delay ) / settings.duration;
|
|
var offset = settings.delay / settings.duration;
|
|
|
|
var frame = function ( frameEvent ) {
|
|
|
|
this.ctx.clear();
|
|
for ( var i = 0; i < settings.count; i++ ) {
|
|
var frac = Interpolator.scale( frameEvent.frac, scale, offset * i );
|
|
|
|
if ( frac !== undefined ) {
|
|
var radius = radiusIpl.get( frac );
|
|
var opacity = opacityIpl.get( frac );
|
|
this.ctx
|
|
.opacity( opacity )
|
|
.path()
|
|
.circle( this.width * 0.5, this.height * 0.5, radius )
|
|
.stroke( settings.width, settings.color );
|
|
};
|
|
};
|
|
};
|
|
|
|
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
|
|
};
|
|
};
|
|
|
|
$.twinkle.add( new DropsEffect() );
|
|
|
|
|
|
|
|
var PulseEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 100,
|
|
"duration": 3000
|
|
};
|
|
|
|
this.id = "pulse";
|
|
|
|
this.run = function ( twinkleEvent, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var size = settings.radius * 2;
|
|
var opacityIpl = new Interpolator( [ 0, 1, 0.6, 1, 0.6, 1, 0 ] );
|
|
var radiusIpl = new Interpolator( [ 0, settings.radius, settings.radius * 0.6, settings.radius, settings.radius * 0.6, settings.radius, 0 ] );
|
|
var frame = function ( frameEvent ) {
|
|
|
|
var x = this.width * 0.5;
|
|
var y = this.height * 0.5;
|
|
var radius = radiusIpl.get( frameEvent.frac );
|
|
var opacity = opacityIpl.get( frameEvent.frac );
|
|
|
|
this.ctx
|
|
.clear()
|
|
.opacity( opacity )
|
|
.path()
|
|
.circle( this.width * 0.5, this.height * 0.5, radius )
|
|
.fill( settings.color );
|
|
};
|
|
|
|
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
|
|
};
|
|
};
|
|
|
|
$.twinkle.add( new PulseEffect() );
|
|
|
|
|
|
|
|
var OrbitEffect = function () {
|
|
|
|
var defaults = {
|
|
"color": "rgba(255,0,0,0.5)",
|
|
"radius": 100,
|
|
"duration": 3000,
|
|
"satellites": 10,
|
|
"satellitesRadius": 10,
|
|
"circulations": 1.5
|
|
};
|
|
|
|
this.id = "orbit";
|
|
|
|
this.run = function ( twinkleEvent, options ) {
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
var size = settings.radius * 2;
|
|
var opacityIpl = new Interpolator( [ 0.4, 1, 1, 0.4 ] );
|
|
var r = settings.radius - settings.satellitesRadius;
|
|
var radiusIpl = new Interpolator( [ 0, r, r, 0 ] );
|
|
var frame = function ( frameEvent ) {
|
|
|
|
var radius = radiusIpl.get( frameEvent.frac );
|
|
var opacity = opacityIpl.get( frameEvent.frac );
|
|
var bog = Math.PI * 2 * settings.circulations * frameEvent.frac;
|
|
|
|
this.ctx
|
|
.clear()
|
|
.opacity( opacity )
|
|
.translate( this.width * 0.5, this.height * 0.5 );
|
|
|
|
var path = this.ctx.path();
|
|
for ( var i = 0; i < settings.satellites; i++ ) {
|
|
|
|
bog += Math.PI * 2 / settings.satellites;
|
|
var x = Math.cos( bog ) * radius;
|
|
var y = Math.sin( bog ) * radius;
|
|
path.circle( x, y, settings.satellitesRadius );
|
|
};
|
|
path.fill( settings.color );
|
|
};
|
|
|
|
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
|
|
};
|
|
};
|
|
|
|
$.twinkle.add( new OrbitEffect() );
|
|
|
|
|
|
|
|
} )( jQuery );
|
|
|
|
|
|
|
|
|