first commit
This commit is contained in:
330
libraries/framework/vendor/plugins/lazyline/jquery.lazylinepainter-1.5.0.js
vendored
Normal file
330
libraries/framework/vendor/plugins/lazyline/jquery.lazylinepainter-1.5.0.js
vendored
Normal file
@@ -0,0 +1,330 @@
|
||||
/*
|
||||
* Lazy Line Painter
|
||||
* SVG Stroke animation.
|
||||
*
|
||||
* https://github.com/camoconnell/lazy-line-painter
|
||||
* http://www.camoconnell.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
*/
|
||||
|
||||
(function($, window, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var dataKey = 'lazyLinePainter';
|
||||
var methods = {
|
||||
|
||||
/*
|
||||
PUBLIC : SETUP LAZY LINE DATA
|
||||
*/
|
||||
init: function(_options) {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this);
|
||||
var data = $this.data(dataKey);
|
||||
$this.addClass('lazy-line');
|
||||
|
||||
// If the plugin hasn't been initialized yet
|
||||
if (!data) {
|
||||
|
||||
// Collect settings, define defaults
|
||||
var options = $.extend({
|
||||
'width': null,
|
||||
'height': null,
|
||||
'strokeWidth': 2,
|
||||
'strokeColor': '#000',
|
||||
'strokeOverColor': null,
|
||||
'strokeCap': 'round',
|
||||
'strokeJoin': 'round',
|
||||
'strokeOpacity': 1,
|
||||
'arrowEnd': 'none',
|
||||
'strokeDash': null,
|
||||
'onComplete': null,
|
||||
'delay': null,
|
||||
'overrideKey': null,
|
||||
'drawSequential': true,
|
||||
'speedMultiplier': 1
|
||||
}, _options);
|
||||
|
||||
// Set up path information
|
||||
// if overrideKey has been defined - use overrideKey as key within the svgData object.
|
||||
// else - use the elements id as key within the svgData object.
|
||||
var target = options.overrideKey ? options.overrideKey : $this.attr('id').replace('#', '');
|
||||
var w = options.svgData[target].dimensions.width;
|
||||
var h = options.svgData[target].dimensions.height;
|
||||
|
||||
// target stroke path
|
||||
options.svgData = options.svgData[target].strokepath;
|
||||
|
||||
// Create svg element and set dimensions
|
||||
if (options.width === null) {
|
||||
options.width = w;
|
||||
}
|
||||
if (options.height === null) {
|
||||
options.height = h;
|
||||
}
|
||||
var svg = getSVGElement({
|
||||
viewBox: '0 0 ' + w + ' ' + h,
|
||||
preserveAspectRatio: 'xMidYMid'
|
||||
});
|
||||
options.svg = $(svg);
|
||||
$this.append(options.svg);
|
||||
$this.data(dataKey, options);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
PUBLIC : PAINT LAZY LINE DATA
|
||||
*/
|
||||
paint: function() {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.data(dataKey);
|
||||
var init = function() {
|
||||
// Set width / height of container element
|
||||
$this.css({
|
||||
'width': data.width,
|
||||
'height': data.height
|
||||
});
|
||||
|
||||
// Build array of path objects
|
||||
data.paths = [];
|
||||
data.longestDuration = 0;
|
||||
data.playhead = 0;
|
||||
|
||||
// Loop paths
|
||||
for (var i = 0; i < data.svgData.length; i++) {
|
||||
|
||||
var path = getPath(data, i);
|
||||
var length = path.getTotalLength();
|
||||
path.style.strokeDasharray = length + ' ' + length;
|
||||
path.style.strokeDashoffset = length;
|
||||
path.style.display = 'block';
|
||||
path.getBoundingClientRect();
|
||||
|
||||
var duration = data.svgData[i].duration * data.speedMultiplier;
|
||||
if (duration > data.longestDuration) {
|
||||
data.longestDuration = duration;
|
||||
}
|
||||
|
||||
data.paths.push({
|
||||
'duration': duration,
|
||||
'drawStartTime': data.playhead,
|
||||
'path': path,
|
||||
'length': length
|
||||
});
|
||||
data.playhead += duration;
|
||||
}
|
||||
|
||||
data.totalDuration = (data.drawSequential) ? data.playhead : data.longestDuration;
|
||||
data.rAF = requestAnimationFrame(function(timestamp) {
|
||||
draw(timestamp, data);
|
||||
});
|
||||
};
|
||||
|
||||
// if delay isset
|
||||
if (data.delay === null) {
|
||||
init();
|
||||
} else {
|
||||
setTimeout(init, data.delay);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
TOGGLE PAUSE/RESUME ANIMATION
|
||||
*/
|
||||
pauseResume: function() {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var data = $(this).data(dataKey);
|
||||
|
||||
if (!data.paused) {
|
||||
data.paused = true;
|
||||
cancelAnimationFrame(data.rAF);
|
||||
} else {
|
||||
data.paused = false;
|
||||
// resume
|
||||
requestAnimationFrame(function(timestamp) {
|
||||
adjustStartTime(timestamp, data)
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/*
|
||||
ERASE LAZY LINE DATA
|
||||
*/
|
||||
erase: function() {
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
$this.removeData(dataKey);
|
||||
$this.find('svg').empty();
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
DESTROY LAZY LINE DATA & ELEMENT
|
||||
*/
|
||||
destroy: function() {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this);
|
||||
$this.removeData(dataKey);
|
||||
$this.remove();
|
||||
});
|
||||
},
|
||||
/*
|
||||
STAMP LAZY LINE DATA
|
||||
*/
|
||||
stamp: function() {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this),
|
||||
d = $this.data(dataKey);
|
||||
|
||||
var init = function() {
|
||||
|
||||
// Set width / height of container element
|
||||
$this.css({
|
||||
'width': d.width,
|
||||
'height': d.height
|
||||
});
|
||||
|
||||
// Loop paths
|
||||
//$.each(d.svgData, function (i, val) {
|
||||
for (i = 0; i < d.svgData.length; i++) {
|
||||
d.paper.path(d.svgData[i].path).attr(applyStyles(d, d.svgData[i]));
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// if delay isset
|
||||
if (d.delay === null)
|
||||
init();
|
||||
else
|
||||
setTimeout(init, d.delay);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var adjustStartTime = function(timestamp, o) {
|
||||
o.startTime = timestamp - o.elapsed_time;
|
||||
requestAnimationFrame(function(timestamp) {
|
||||
draw(timestamp, o);
|
||||
});
|
||||
}
|
||||
|
||||
var draw = function(timestamp, o) {
|
||||
|
||||
if (o.startTime == null) {
|
||||
o.startTime = timestamp;
|
||||
}
|
||||
o.elapsed_time = timestamp - o.startTime;
|
||||
|
||||
for (var i = 0; i < o.paths.length; i++) {
|
||||
|
||||
var path_elapsed_time;
|
||||
if (o.drawSequential) {
|
||||
path_elapsed_time = o.elapsed_time - o.paths[i].drawStartTime;
|
||||
if (path_elapsed_time < 0) path_elapsed_time = 0;
|
||||
} else {
|
||||
path_elapsed_time = o.elapsed_time;
|
||||
}
|
||||
|
||||
// don't redraw paths that are finished or paths that aren't up yet
|
||||
if (path_elapsed_time < o.paths[i].duration && path_elapsed_time > 0) {
|
||||
var frame_length = path_elapsed_time / o.paths[i].duration * o.paths[i].length;
|
||||
o.paths[i].path.style.strokeDashoffset = o.paths[i].length - frame_length;
|
||||
} else if (path_elapsed_time > o.paths[i].duration) {
|
||||
o.paths[i].path.style.strokeDashoffset = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// whether to continue
|
||||
if (o.elapsed_time < o.totalDuration) {
|
||||
o.rAF = requestAnimationFrame(function(timestamp) {
|
||||
draw(timestamp, o);
|
||||
});
|
||||
} else {
|
||||
if (o.onComplete != null) o.onComplete();
|
||||
}
|
||||
}
|
||||
|
||||
var applyStyles = function(data, value) {
|
||||
|
||||
var styles = {
|
||||
"stroke": (!value.strokeColor) ? data.strokeColor : value.strokeColor,
|
||||
"fill-opacity": 0,
|
||||
"stroke-dasharray": (!value.strokeDash) ? data.strokeDash : value.strokeDash,
|
||||
"stroke-opacity": (!value.strokeOpacity) ? data.strokeOpacity : value.strokeOpacity,
|
||||
"stroke-width": (!value.strokeWidth) ? data.strokeWidth : value.strokeWidth,
|
||||
"stroke-linecap": (!value.strokeCap) ? data.strokeCap : value.strokeCap,
|
||||
"stroke-linejoin": (!value.strokeJoin) ? data.strokeJoin : value.strokeJoin
|
||||
};
|
||||
|
||||
return styles;
|
||||
};
|
||||
|
||||
/*
|
||||
PRIVATE : SET PATH DATA
|
||||
*/
|
||||
var getPath = function(data, i) {
|
||||
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
var $path = $(path);
|
||||
data.svg.append($path);
|
||||
$path.attr(getAttributes(data, data.svgData[i]));
|
||||
return path;
|
||||
};
|
||||
|
||||
/*
|
||||
PRIVATE : GET STYLE DATA
|
||||
*/
|
||||
var getAttributes = function(data, value) {
|
||||
var attributes = {
|
||||
"d": value.path,
|
||||
"stroke": (!value.strokeColor) ? data.strokeColor : value.strokeColor,
|
||||
"fill-opacity": 0,
|
||||
"stroke-dasharray": (!value.strokeDash) ? data.strokeDash : value.strokeDash,
|
||||
"stroke-opacity": (!value.strokeOpacity) ? data.strokeOpacity : value.strokeOpacity,
|
||||
"stroke-width": (!value.strokeWidth) ? data.strokeWidth : value.strokeWidth,
|
||||
"stroke-linecap": (!value.strokeCap) ? data.strokeCap : value.strokeCap,
|
||||
"stroke-linejoin": (!value.strokeJoin) ? data.strokeJoin : value.strokeJoin,
|
||||
"arrow-end": (!value.arrowEnd) ? data.arrowEnd : value.arrowEnd,
|
||||
"markerWidth": "4",
|
||||
"markerHeight": "3",
|
||||
"orient": "auto"
|
||||
};
|
||||
return attributes;
|
||||
};
|
||||
|
||||
/*
|
||||
PRIVATE : GET STYLE DATA
|
||||
*/
|
||||
var getSVGElement = function(attr) {
|
||||
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.setAttributeNS(null, 'viewBox', attr.viewBox);
|
||||
svg.setAttributeNS(null, 'preserveAspectRatio', attr.preserveAspectRatio);
|
||||
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
return svg;
|
||||
};
|
||||
|
||||
$.fn.lazylinepainter = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
} else {
|
||||
// error
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, window);
|
||||
11
libraries/framework/vendor/plugins/lazyline/jquery.lazylinepainter-1.5.0.min.js
vendored
Normal file
11
libraries/framework/vendor/plugins/lazyline/jquery.lazylinepainter-1.5.0.min.js
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
* Lazy Line Painter
|
||||
* SVG Stroke animation.
|
||||
*
|
||||
* https://github.com/camoconnell/lazy-line-painter
|
||||
* http://www.camoconnell.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
*/
|
||||
(function(e,t,n){"use strict";var r="lazyLinePainter";var s={init:function(t){return this.each(function(){var n=e(this);var i=n.data(r);n.addClass("lazy-line");if(!i){var s=e.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeOverColor:null,strokeCap:"round",strokeJoin:"round",strokeOpacity:1,arrowEnd:"none",strokeDash:null,onComplete:null,delay:null,overrideKey:null,drawSequential:true,speedMultiplier:1},t);var o=s.overrideKey?s.overrideKey:n.attr("id").replace("#","");var u=s.svgData[o].dimensions.width;var a=s.svgData[o].dimensions.height;s.svgData=s.svgData[o].strokepath;if(s.width===null){s.width=u}if(s.height===null){s.height=a}var f=c({viewBox:"0 0 "+u+" "+a,preserveAspectRatio:"xMidYMid"});s.svg=e(f);n.append(s.svg);n.data(r,s)}})},paint:function(){return this.each(function(){var t=e(this);var n=t.data(r);var i=function(){t.css({width:n.width,height:n.height});n.paths=[];n.longestDuration=0;n.playhead=0;for(var e=0;e<n.svgData.length;e++){var r=f(n,e);var i=r.getTotalLength();r.style.strokeDasharray=i+" "+i;r.style.strokeDashoffset=i;r.style.display="block";r.getBoundingClientRect();var s=n.svgData[e].duration*n.speedMultiplier;if(s>n.longestDuration){n.longestDuration=s}n.paths.push({duration:s,drawStartTime:n.playhead,path:r,length:i});n.playhead+=s}n.totalDuration=n.drawSequential?n.playhead:n.longestDuration;n.rAF=requestAnimationFrame(function(e){u(e,n)})};if(n.delay===null){i()}else{setTimeout(i,n.delay)}})},pauseResume:function(){return this.each(function(){var t=e(this).data(r);if(!t.paused){t.paused=true;cancelAnimationFrame(t.rAF)}else{t.paused=false;requestAnimationFrame(function(e){o(e,t)})}})},erase:function(){return this.each(function(){var t=e(this);t.removeData(r);t.find("svg").empty()})},destroy:function(){return this.each(function(){var t=e(this);t.removeData(r);t.remove()})},stamp:function(){return this.each(function(){var t=e(this),n=t.data(r);var s=function(){t.css({width:n.width,height:n.height});for(i=0;i<n.svgData.length;i++){n.paper.path(n.svgData[i].path).attr(a(n,n.svgData[i]))}};if(n.delay===null)s();else setTimeout(s,n.delay)})}};var o=function(e,t){t.startTime=e-t.elapsed_time;requestAnimationFrame(function(e){u(e,t)})};var u=function(e,t){if(t.startTime==null){t.startTime=e}t.elapsed_time=e-t.startTime;for(var n=0;n<t.paths.length;n++){var r;if(t.drawSequential){r=t.elapsed_time-t.paths[n].drawStartTime;if(r<0)r=0}else{r=t.elapsed_time}if(r<t.paths[n].duration&&r>0){var i=r/t.paths[n].duration*t.paths[n].length;t.paths[n].path.style.strokeDashoffset=t.paths[n].length-i}else if(r>t.paths[n].duration){t.paths[n].path.style.strokeDashoffset=0}}if(t.elapsed_time<t.totalDuration){t.rAF=requestAnimationFrame(function(e){u(e,t)})}else{if(t.onComplete!=null)t.onComplete()}};var a=function(e,t){var n={stroke:!t.strokeColor?e.strokeColor:t.strokeColor,"fill-opacity":0,"stroke-dasharray":!t.strokeDash?e.strokeDash:t.strokeDash,"stroke-opacity":!t.strokeOpacity?e.strokeOpacity:t.strokeOpacity,"stroke-width":!t.strokeWidth?e.strokeWidth:t.strokeWidth,"stroke-linecap":!t.strokeCap?e.strokeCap:t.strokeCap,"stroke-linejoin":!t.strokeJoin?e.strokeJoin:t.strokeJoin};return n};var f=function(t,n){var r=document.createElementNS("http://www.w3.org/2000/svg","path");var i=e(r);t.svg.append(i);i.attr(l(t,t.svgData[n]));return r};var l=function(e,t){var n={d:t.path,stroke:!t.strokeColor?e.strokeColor:t.strokeColor,"fill-opacity":0,"stroke-dasharray":!t.strokeDash?e.strokeDash:t.strokeDash,"stroke-opacity":!t.strokeOpacity?e.strokeOpacity:t.strokeOpacity,"stroke-width":!t.strokeWidth?e.strokeWidth:t.strokeWidth,"stroke-linecap":!t.strokeCap?e.strokeCap:t.strokeCap,"stroke-linejoin":!t.strokeJoin?e.strokeJoin:t.strokeJoin,"arrow-end":!t.arrowEnd?e.arrowEnd:t.arrowEnd,markerWidth:"4",markerHeight:"3",orient:"auto"};return n};var c=function(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttributeNS(null,"viewBox",e.viewBox);t.setAttributeNS(null,"preserveAspectRatio",e.preserveAspectRatio);t.setAttribute("xmlns","http://www.w3.org/2000/svg");return t};e.fn.lazylinepainter=function(e){if(s[e]){return s[e].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof e==="object"||!e){return s.init.apply(this,arguments)}else{}}})(jQuery,window)
|
||||
25
libraries/framework/vendor/plugins/lazyline/rAF-polyfil.js
vendored
Normal file
25
libraries/framework/vendor/plugins/lazyline/rAF-polyfil.js
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
// make sure requestAnimationFrame and cancelAnimationFrame are defined
|
||||
// polyfill for browsers without native support
|
||||
// by Opera engineer Erik Möller
|
||||
var lastTime = 0;
|
||||
var vendors = ['webkit', 'moz', 'ms', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame =
|
||||
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
}
|
||||
}
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user