Fixed Angular related issue with SVG Plugin.
https://github.com/thednp/kute.js/issues/29
This commit is contained in:
thednp
parent
7873233e39
commit
4faa433429
|
|
@ -1,164 +1,169 @@
|
|||
//returns browser prefix
|
||||
function getPrefix() {
|
||||
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
|
||||
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
|
||||
|
||||
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
|
||||
div = null;
|
||||
}
|
||||
|
||||
// generate a random number within a given range
|
||||
function random(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
// vendor prefix handle
|
||||
var prefix = getPrefix(), // prefix
|
||||
prefixRequired = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
|
||||
transformProperty = prefixRequired ? prefix + 'Transform' : 'transform';
|
||||
|
||||
// the variables
|
||||
var container = document.getElementById('container'),
|
||||
easing = 'easingQuadraticInOut',
|
||||
tweens = [];
|
||||
|
||||
function createTest(count, property, engine, repeat) {
|
||||
var update;
|
||||
for (var i = 0; i < count; i++) {
|
||||
var div = document.createElement('div'),
|
||||
windowHeight = document.documentElement.clientHeight - 10,
|
||||
left = random(-200, 200),
|
||||
toLeft = random(-200, 200),
|
||||
top = Math.round(Math.random() * parseInt(windowHeight)),
|
||||
background = 'rgb('+parseInt(random(0, 255))+','+parseInt(random(0, 255))+','+parseInt(random(0, 255))+')',
|
||||
fromValues, toValues, fn = i===count-1 ? complete : null;
|
||||
repeat = parseInt(repeat);
|
||||
(function (){
|
||||
"use strict";
|
||||
//returns browser prefix
|
||||
function getPrefix() {
|
||||
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
|
||||
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
|
||||
|
||||
div.className = 'line';
|
||||
div.style.top = top + 'px';
|
||||
div.style.backgroundColor = background;
|
||||
|
||||
if (property==='left') {
|
||||
div.style.left = left + 'px';
|
||||
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
|
||||
toValues = { left: toLeft }
|
||||
} else {
|
||||
div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
|
||||
if (engine==="kute"){
|
||||
fromValues = { translateX: left }
|
||||
toValues = { translateX: toLeft }
|
||||
} else if ((engine==="gsap") || (engine==="tween")) {
|
||||
fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
|
||||
toValues = { x: toLeft }
|
||||
}
|
||||
}
|
||||
|
||||
container.appendChild(div);
|
||||
|
||||
// perf test
|
||||
if (engine==='kute') {
|
||||
tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
|
||||
} else if (engine==='gsap') {
|
||||
if (property==="left"){
|
||||
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
|
||||
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
|
||||
div = null;
|
||||
}
|
||||
|
||||
// generate a random number within a given range
|
||||
function random(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
// vendor prefix handle
|
||||
var prefix = getPrefix(), // prefix
|
||||
prefixRequired = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
|
||||
transformProperty = prefixRequired ? prefix + 'Transform' : 'transform';
|
||||
|
||||
// the variables
|
||||
var container = document.getElementById('container'),
|
||||
easing = 'easingQuadraticInOut',
|
||||
tweens = [];
|
||||
|
||||
function createTest(count, property, engine, repeat) {
|
||||
"use strict";
|
||||
var update;
|
||||
for (var i = 0; i < count; i++) {
|
||||
var div = document.createElement('div'),
|
||||
windowHeight = document.documentElement.clientHeight - 10,
|
||||
left = random(-200, 200),
|
||||
toLeft = random(-200, 200),
|
||||
top = Math.round(Math.random() * parseInt(windowHeight)),
|
||||
background = 'rgb('+parseInt(random(0, 255))+','+parseInt(random(0, 255))+','+parseInt(random(0, 255))+')',
|
||||
fromValues, toValues, fn = i===count-1 ? complete : null;
|
||||
repeat = parseInt(repeat);
|
||||
|
||||
div.className = 'line';
|
||||
div.style.top = top + 'px';
|
||||
div.style.backgroundColor = background;
|
||||
|
||||
if (property==='left') {
|
||||
div.style.left = left + 'px';
|
||||
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
|
||||
toValues = { left: toLeft }
|
||||
} else {
|
||||
TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
|
||||
div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
|
||||
if (engine==="kute"){
|
||||
fromValues = { translateX: left }
|
||||
toValues = { translateX: toLeft }
|
||||
} else if ((engine==="gsap") || (engine==="tween")) {
|
||||
fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
|
||||
toValues = { x: toLeft }
|
||||
}
|
||||
}
|
||||
} else if (engine==='tween') {
|
||||
|
||||
|
||||
if (property==="left"){
|
||||
update = updateLeft;
|
||||
} else if (property==="translateX"){
|
||||
update = updateTranslate;
|
||||
}
|
||||
container.appendChild(div);
|
||||
|
||||
// perf test
|
||||
if (engine==='kute') {
|
||||
tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
|
||||
} else if (engine==='gsap') {
|
||||
if (property==="left"){
|
||||
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
|
||||
} else {
|
||||
TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
|
||||
}
|
||||
} else if (engine==='tween') {
|
||||
|
||||
|
||||
if (property==="left"){
|
||||
update = updateLeft;
|
||||
} else if (property==="translateX"){
|
||||
update = updateTranslate;
|
||||
}
|
||||
|
||||
tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
|
||||
}
|
||||
}
|
||||
if (engine==='tween') {
|
||||
animate();
|
||||
function animate( time ) {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update( time );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function complete(){
|
||||
document.getElementById('info').style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
tweens = [];
|
||||
}
|
||||
|
||||
|
||||
function updateLeft(){
|
||||
this.div.style['left'] = this.left+'px';
|
||||
}
|
||||
|
||||
function updateTranslate(){
|
||||
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
|
||||
}
|
||||
|
||||
//some button toggle
|
||||
var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
|
||||
|
||||
for (var i=0; i<l; i++) {
|
||||
var g = btnGroups[i], links = g.querySelectorAll('a'), ll = links.length;
|
||||
for (var j=0; j<ll; j++) {
|
||||
links[j].onclick = function() {
|
||||
"use strict";
|
||||
var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
|
||||
b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
|
||||
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// the start button handle
|
||||
document.getElementById('start').addEventListener('click', buildObjects, false);
|
||||
|
||||
function buildObjects(){
|
||||
var c = document.querySelector('[data-count]'), e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
|
||||
p = document.querySelector('[data-property]'), ct = c && document.querySelector('[data-count]').getAttribute('data-count'),
|
||||
count = ct ? parseInt(ct) : null,
|
||||
engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
|
||||
repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
|
||||
property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
|
||||
warning = document.createElement('DIV');
|
||||
|
||||
tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
|
||||
}
|
||||
}
|
||||
if (engine==='tween') {
|
||||
animate();
|
||||
function animate( time ) {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update( time );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function complete(){
|
||||
document.getElementById('info').style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
tweens = [];
|
||||
}
|
||||
|
||||
|
||||
function updateLeft(){
|
||||
this.div.style['left'] = this.left+'px';
|
||||
}
|
||||
|
||||
function updateTranslate(){
|
||||
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
|
||||
}
|
||||
|
||||
//some button toggle
|
||||
var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
|
||||
|
||||
for (var i=0; i<l; i++) {
|
||||
var g = btnGroups[i], links = g.querySelectorAll('a'), ll = links.length;
|
||||
for (var j=0; j<ll; j++) {
|
||||
links[j].onclick = function() {
|
||||
var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
|
||||
b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
|
||||
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// the start button handle
|
||||
document.getElementById('start').addEventListener('click', buildObjects, false);
|
||||
|
||||
function buildObjects(){
|
||||
var c = document.querySelector('[data-count]'), e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
|
||||
p = document.querySelector('[data-property]'), ct = c && document.querySelector('[data-count]').getAttribute('data-count'),
|
||||
count = ct ? parseInt(ct) : null,
|
||||
engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
|
||||
repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
|
||||
property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
|
||||
warning = document.createElement('DIV');
|
||||
|
||||
warning.className = 'text-warning padding lead';
|
||||
container.innerHTML = '';
|
||||
if (count && engine && property && repeat) {
|
||||
if (engine === 'gsap') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
}
|
||||
|
||||
createTest(count,property,engine,repeat);
|
||||
// since our engines don't do sync, we make it our own here
|
||||
if (engine==='tween'||engine==='kute') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
start();
|
||||
}
|
||||
} else {
|
||||
|
||||
if (!count && !property && !repeat && !engine){
|
||||
warning.innerHTML = 'We are missing all the settings here.';
|
||||
warning.className = 'text-warning padding lead';
|
||||
container.innerHTML = '';
|
||||
if (count && engine && property && repeat) {
|
||||
if (engine === 'gsap') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
}
|
||||
|
||||
createTest(count,property,engine,repeat);
|
||||
// since our engines don't do sync, we make it our own here
|
||||
if (engine==='tween'||engine==='kute') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
start();
|
||||
}
|
||||
} else {
|
||||
warning.innerHTML = 'Now missing<br>';
|
||||
warning.innerHTML += !engine ? '- engine<br>' : '';
|
||||
warning.innerHTML += !property ? '- property<br>' : '';
|
||||
warning.innerHTML += !repeat ? '- repeat<br>' : '';
|
||||
warning.innerHTML += !count ? '- count<br>' : '';
|
||||
}
|
||||
|
||||
container.appendChild(warning);
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
var now = window.performance.now(), count = tweens.length;
|
||||
for (var t =0; t<count; t++){
|
||||
tweens[t].start(now+count/16)
|
||||
}
|
||||
}
|
||||
if (!count && !property && !repeat && !engine){
|
||||
warning.innerHTML = 'We are missing all the settings here.';
|
||||
} else {
|
||||
warning.innerHTML = 'Now missing<br>';
|
||||
warning.innerHTML += !engine ? '- engine<br>' : '';
|
||||
warning.innerHTML += !property ? '- property<br>' : '';
|
||||
warning.innerHTML += !repeat ? '- repeat<br>' : '';
|
||||
warning.innerHTML += !count ? '- count<br>' : '';
|
||||
}
|
||||
|
||||
container.appendChild(warning);
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
var now = window.performance.now(), count = tweens.length;
|
||||
for (var t =0; t<count; t++){
|
||||
tweens[t].start(now+count/16)
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
|
@ -47,31 +47,31 @@
|
|||
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
'use strict';
|
||||
|
||||
var K = window.KUTE, S = S || {}, p,
|
||||
_svg = K.selector('path') || K.selector('svg'),
|
||||
_svg = document.querySelector('svg'),
|
||||
_ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
|
||||
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
|
||||
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
|
||||
|
|
|
|||
2
dist/kute-svg.min.js
vendored
2
dist/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -23,7 +23,7 @@
|
|||
'use strict';
|
||||
|
||||
var K = window.KUTE, S = S || {}, p,
|
||||
_svg = K.selector('path') || K.selector('svg'),
|
||||
_svg = document.querySelector('svg'),
|
||||
_ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
|
||||
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
|
||||
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
|
||||
|
|
|
|||
Loading…
Reference in a new issue