diff --git a/lib/vara.min.js b/lib/vara.min.js index 19e084d..28925ab 100644 --- a/lib/vara.min.js +++ b/lib/vara.min.js @@ -1 +1 @@ -"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}var Vara=function(a,b,c,d){var e=this;this.elementName=a,this.textsInit=[],"string"==typeof c?this.textsInit.push({text:c}):"object"==_typeof(c)&&(this.textsInit=c),this.texts=this.textsInit,this.properties=d||{},this.properties.textAlign=this.properties.textAlign||"left",this.letterSpacing=0,this.element=document.querySelector(this.elementName),this.fontSource=b,this.characters={},this.drawnCharacters={},this.totalPathLength=0,this.fontSize=24,this.frameRate=1e3/30,this.prevDuration=0,this.completed=!1,this.ready=function(a){e.readyF=a},this.animationEnd=function(a){e.animationEndF=a},this.svg=this.createNode("svg",{width:"100%"}),this.element.appendChild(this.svg),this.font=document.createElement("object"),this.getSVGData()};Vara.prototype.createNode=function(a,b){for(var c in a=document.createElementNS("http://www.w3.org/2000/svg",a),b)a.setAttributeNS(null,c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()}),b[c]);return a},Vara.prototype.getSVGData=function(){var a=this,b=new XMLHttpRequest;b.open("GET",this.fontSource,!0),b.onreadystatechange=function(){4==b.readyState&&200==b.status&&(a.contents=JSON.parse(b.responseText),a.characters=JSON.parse(b.responseText).c,a.preCreate(),a.createText())},b.send(null)},Vara.prototype.preCreate=function(){(function(){return"function"!=typeof NodeList.prototype.forEach&&void(NodeList.prototype.forEach=Array.prototype.forEach)})(),this.questionMark=this.characters[63]==null?{paths:[{w:8.643798828125,h:14.231731414794922,my:22.666500004827977,mx:0,pw:28.2464542388916,d:"m 0,0 c -2,-6.01,5,-8.64,8,-3.98,2,4.09,-7,8.57,-7,11.85"},{w:1.103759765625,h:1.549820899963379,my:8.881500004827977,mx:1,pw:4.466640472412109,d:"m 0,0 a 0.7592,0.7357,0,0,1,0,0.735,0.7592,0.7357,0,0,1,-1,-0.735,0.7592,0.7357,0,0,1,1,-0.738,0.7592,0.7357,0,0,1,0,0.738 z"}],w:8.643798828125}:this.characters[63],this.space={paths:[{d:"M0,0 l"+this.contents.p.space+" 0",mx:0,my:0,w:this.contents.p.space,h:0}],w:this.contents.p.space};for(var a=this.analyseWidth(),b=0;ba.my-d.getBBox().y?z:a.my-d.getBBox().y,0==c&&(A=z),d.style.opacity=0,d.style.strokeDasharray=d.getTotalLength()+" "+(d.getTotalLength()+2),d.style.strokeDashoffset=d.getTotalLength()+1}),l.push(D);var d=D.getBBox().x*a,F=this.texts[k].letterSpacing;"object"===_typeof(F)&&(F=F[C]===void 0?F.global===void 0?0:F.global:F[C]),D.getBBox().width=r){0==A&&(n=!0);var C=B;" "==z[B]||n||(C=z.slice(0,C+1).search(/\S+$/)),y.push(C),w=t+w-A}else c+=q,w+=q;s.push(y)}e.push(s)}return g.parentNode.removeChild(g),h.parentNode.removeChild(h),{width:c,breakPoints:e}},Vara.prototype.setPosition=function(a,b,c){var c=c==null?{x:!1,y:!1}:c;c.x=c.x!=null&&c.x,c.y=c.y!=null&&c.y;var d=a.transform.baseVal.consolidate().matrix,e=d.e,f=d.f;b.x!=null&&(c.x?e+=b.x:e=b.x),b.y!=null&&(c.y?f+=b.y:f=b.y-a.getBBox().y);var g=this.svg.createSVGTransform();g.setTranslate(e,f),a.transform.baseVal.replaceItem(g,0)},"undefined"==typeof module?window.Vara=Vara:module.exports=Vara; \ No newline at end of file +"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}var Vara=function(a,b,c,d){var e=this;this.elementName=a,this.textsInit=[],"string"==typeof c?this.textsInit.push({text:c}):"object"==_typeof(c)&&(this.textsInit=c),this.texts=this.textsInit,this.properties=d||{},this.properties.textAlign=this.properties.textAlign||"left",this.letterSpacing=0,this.element=document.querySelector(this.elementName),this.fontSource=b,this.characters={},this.drawnCharacters={},this.totalPathLength=0,this.fontSize=24,this.frameRate=1e3/30,this.prevDuration=0,this.completed=!1,this.ready=function(a){e.readyF=a},this.animationEnd=function(a){e.animationEndF=a},this.svg=this.createNode("svg",{width:"100%"}),this.element.appendChild(this.svg),this.font=document.createElement("object"),this.getSVGData()};Vara.prototype.createNode=function(a,b){for(var c in a=document.createElementNS("http://www.w3.org/2000/svg",a),b)a.setAttributeNS(null,c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()}),b[c]);return a},Vara.prototype.getSVGData=function(){var a=this,b=new XMLHttpRequest;b.open("GET",this.fontSource,!0),b.onreadystatechange=function(){4==b.readyState&&200==b.status&&(a.contents=JSON.parse(b.responseText),a.characters=JSON.parse(b.responseText).c,a.preCreate(),a.createText())},b.send(null)},Vara.prototype.preCreate=function(){(function(){return"function"!=typeof NodeList.prototype.forEach&&void(NodeList.prototype.forEach=Array.prototype.forEach)})(),this.questionMark=this.characters[63]==null?{paths:[{w:8.643798828125,h:14.231731414794922,my:22.666500004827977,mx:0,pw:28.2464542388916,d:"m 0,0 c -2,-6.01,5,-8.64,8,-3.98,2,4.09,-7,8.57,-7,11.85"},{w:1.103759765625,h:1.549820899963379,my:8.881500004827977,mx:1,pw:4.466640472412109,d:"m 0,0 a 0.7592,0.7357,0,0,1,0,0.735,0.7592,0.7357,0,0,1,-1,-0.735,0.7592,0.7357,0,0,1,1,-0.738,0.7592,0.7357,0,0,1,0,0.738 z"}],w:8.643798828125}:this.characters[63],this.space={paths:[{d:"M0,0 l"+this.contents.p.space+" 0",mx:0,my:0,w:this.contents.p.space,h:0}],w:this.contents.p.space};for(var a=this.analyseWidth(),b=0;ba.my-d.getBBox().y?z:a.my-d.getBBox().y,0==c&&(A=z),d.style.opacity=0,d.style.strokeDasharray=d.getTotalLength()+" "+(d.getTotalLength()+2),d.style.strokeDashoffset=d.getTotalLength()+1}),l.push(D);var d=D.getBBox().x*a,F=this.texts[k].letterSpacing;"object"===_typeof(F)&&(F=F[C]===void 0?F.global===void 0?0:F.global:F[C]),D.getBBox().width=r){0==A&&(n=!0);var C=B;" "==z[B]||n||(C=z.slice(0,C+1).search(/\S+$/)),y.push(C),w=t+w-A}else c+=q,w+=q;s.push(y)}e.push(s)}return g.parentNode.removeChild(g),h.parentNode.removeChild(h),{width:c,breakPoints:e}},Vara.prototype.setPosition=function(a,b,c){var c=c==null?{x:!1,y:!1}:c;c.x=c.x!=null&&c.x,c.y=c.y!=null&&c.y;var d=a.transform.baseVal.consolidate().matrix,e=d.e,f=d.f;b.x!=null&&(c.x?e+=b.x:e=b.x),b.y!=null&&(c.y?f+=b.y:f=b.y-a.getBBox().y);var g=this.svg.createSVGTransform();g.setTranslate(e,f),a.transform.baseVal.replaceItem(g,0)},"undefined"==typeof module?window.Vara=Vara:module.exports=Vara; \ No newline at end of file diff --git a/src/vara.js b/src/vara.js index 1fe1568..998f5ac 100644 --- a/src/vara.js +++ b/src/vara.js @@ -431,8 +431,10 @@ Vara.prototype.draw = function (id, dur) { setTimeout(function () { _this.drawnCharacters[id].characters.forEach(function (i) { i.querySelectorAll("path").forEach(function (j) { + // iOS below 16.4 add "px" to strokeDashoffset, therefore making the returned value NaN + var pureStrokeDashoffset = ("" + j.style.strokeDashoffset + "").replace("px", ""); var currentDuration = - (parseFloat(j.style.strokeDashoffset) / pathLength) * duration; + (parseFloat(pureStrokeDashoffset) / pathLength) * duration; j.style.opacity = 1; _this.animate(j, currentDuration, delay, 0); delay += currentDuration; @@ -467,7 +469,9 @@ Vara.prototype.animate = function (elem, duration, delay, final) { final = Number(final) || 0; setTimeout(function () { var start = new Date().getTime(); - var initial = parseFloat(elem.style.strokeDashoffset); + // iOS below 16.4 add "px" to strokeDashoffset, therefore making the returned value NaN + var pureStrokeDashoffset = ("" + elem.style.strokeDashoffset + "").replace("px", ""); + var initial = parseFloat(pureStrokeDashoffset); var timer = setInterval(function () { var step = Math.min(1, (new Date().getTime() - start) / duration); var x = initial + step * (final - initial); diff --git a/src/vara.min.js b/src/vara.min.js index 19e084d..28925ab 100644 --- a/src/vara.min.js +++ b/src/vara.min.js @@ -1 +1 @@ -"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}var Vara=function(a,b,c,d){var e=this;this.elementName=a,this.textsInit=[],"string"==typeof c?this.textsInit.push({text:c}):"object"==_typeof(c)&&(this.textsInit=c),this.texts=this.textsInit,this.properties=d||{},this.properties.textAlign=this.properties.textAlign||"left",this.letterSpacing=0,this.element=document.querySelector(this.elementName),this.fontSource=b,this.characters={},this.drawnCharacters={},this.totalPathLength=0,this.fontSize=24,this.frameRate=1e3/30,this.prevDuration=0,this.completed=!1,this.ready=function(a){e.readyF=a},this.animationEnd=function(a){e.animationEndF=a},this.svg=this.createNode("svg",{width:"100%"}),this.element.appendChild(this.svg),this.font=document.createElement("object"),this.getSVGData()};Vara.prototype.createNode=function(a,b){for(var c in a=document.createElementNS("http://www.w3.org/2000/svg",a),b)a.setAttributeNS(null,c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()}),b[c]);return a},Vara.prototype.getSVGData=function(){var a=this,b=new XMLHttpRequest;b.open("GET",this.fontSource,!0),b.onreadystatechange=function(){4==b.readyState&&200==b.status&&(a.contents=JSON.parse(b.responseText),a.characters=JSON.parse(b.responseText).c,a.preCreate(),a.createText())},b.send(null)},Vara.prototype.preCreate=function(){(function(){return"function"!=typeof NodeList.prototype.forEach&&void(NodeList.prototype.forEach=Array.prototype.forEach)})(),this.questionMark=this.characters[63]==null?{paths:[{w:8.643798828125,h:14.231731414794922,my:22.666500004827977,mx:0,pw:28.2464542388916,d:"m 0,0 c -2,-6.01,5,-8.64,8,-3.98,2,4.09,-7,8.57,-7,11.85"},{w:1.103759765625,h:1.549820899963379,my:8.881500004827977,mx:1,pw:4.466640472412109,d:"m 0,0 a 0.7592,0.7357,0,0,1,0,0.735,0.7592,0.7357,0,0,1,-1,-0.735,0.7592,0.7357,0,0,1,1,-0.738,0.7592,0.7357,0,0,1,0,0.738 z"}],w:8.643798828125}:this.characters[63],this.space={paths:[{d:"M0,0 l"+this.contents.p.space+" 0",mx:0,my:0,w:this.contents.p.space,h:0}],w:this.contents.p.space};for(var a=this.analyseWidth(),b=0;ba.my-d.getBBox().y?z:a.my-d.getBBox().y,0==c&&(A=z),d.style.opacity=0,d.style.strokeDasharray=d.getTotalLength()+" "+(d.getTotalLength()+2),d.style.strokeDashoffset=d.getTotalLength()+1}),l.push(D);var d=D.getBBox().x*a,F=this.texts[k].letterSpacing;"object"===_typeof(F)&&(F=F[C]===void 0?F.global===void 0?0:F.global:F[C]),D.getBBox().width=r){0==A&&(n=!0);var C=B;" "==z[B]||n||(C=z.slice(0,C+1).search(/\S+$/)),y.push(C),w=t+w-A}else c+=q,w+=q;s.push(y)}e.push(s)}return g.parentNode.removeChild(g),h.parentNode.removeChild(h),{width:c,breakPoints:e}},Vara.prototype.setPosition=function(a,b,c){var c=c==null?{x:!1,y:!1}:c;c.x=c.x!=null&&c.x,c.y=c.y!=null&&c.y;var d=a.transform.baseVal.consolidate().matrix,e=d.e,f=d.f;b.x!=null&&(c.x?e+=b.x:e=b.x),b.y!=null&&(c.y?f+=b.y:f=b.y-a.getBBox().y);var g=this.svg.createSVGTransform();g.setTranslate(e,f),a.transform.baseVal.replaceItem(g,0)},"undefined"==typeof module?window.Vara=Vara:module.exports=Vara; \ No newline at end of file +"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}var Vara=function(a,b,c,d){var e=this;this.elementName=a,this.textsInit=[],"string"==typeof c?this.textsInit.push({text:c}):"object"==_typeof(c)&&(this.textsInit=c),this.texts=this.textsInit,this.properties=d||{},this.properties.textAlign=this.properties.textAlign||"left",this.letterSpacing=0,this.element=document.querySelector(this.elementName),this.fontSource=b,this.characters={},this.drawnCharacters={},this.totalPathLength=0,this.fontSize=24,this.frameRate=1e3/30,this.prevDuration=0,this.completed=!1,this.ready=function(a){e.readyF=a},this.animationEnd=function(a){e.animationEndF=a},this.svg=this.createNode("svg",{width:"100%"}),this.element.appendChild(this.svg),this.font=document.createElement("object"),this.getSVGData()};Vara.prototype.createNode=function(a,b){for(var c in a=document.createElementNS("http://www.w3.org/2000/svg",a),b)a.setAttributeNS(null,c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()}),b[c]);return a},Vara.prototype.getSVGData=function(){var a=this,b=new XMLHttpRequest;b.open("GET",this.fontSource,!0),b.onreadystatechange=function(){4==b.readyState&&200==b.status&&(a.contents=JSON.parse(b.responseText),a.characters=JSON.parse(b.responseText).c,a.preCreate(),a.createText())},b.send(null)},Vara.prototype.preCreate=function(){(function(){return"function"!=typeof NodeList.prototype.forEach&&void(NodeList.prototype.forEach=Array.prototype.forEach)})(),this.questionMark=this.characters[63]==null?{paths:[{w:8.643798828125,h:14.231731414794922,my:22.666500004827977,mx:0,pw:28.2464542388916,d:"m 0,0 c -2,-6.01,5,-8.64,8,-3.98,2,4.09,-7,8.57,-7,11.85"},{w:1.103759765625,h:1.549820899963379,my:8.881500004827977,mx:1,pw:4.466640472412109,d:"m 0,0 a 0.7592,0.7357,0,0,1,0,0.735,0.7592,0.7357,0,0,1,-1,-0.735,0.7592,0.7357,0,0,1,1,-0.738,0.7592,0.7357,0,0,1,0,0.738 z"}],w:8.643798828125}:this.characters[63],this.space={paths:[{d:"M0,0 l"+this.contents.p.space+" 0",mx:0,my:0,w:this.contents.p.space,h:0}],w:this.contents.p.space};for(var a=this.analyseWidth(),b=0;ba.my-d.getBBox().y?z:a.my-d.getBBox().y,0==c&&(A=z),d.style.opacity=0,d.style.strokeDasharray=d.getTotalLength()+" "+(d.getTotalLength()+2),d.style.strokeDashoffset=d.getTotalLength()+1}),l.push(D);var d=D.getBBox().x*a,F=this.texts[k].letterSpacing;"object"===_typeof(F)&&(F=F[C]===void 0?F.global===void 0?0:F.global:F[C]),D.getBBox().width=r){0==A&&(n=!0);var C=B;" "==z[B]||n||(C=z.slice(0,C+1).search(/\S+$/)),y.push(C),w=t+w-A}else c+=q,w+=q;s.push(y)}e.push(s)}return g.parentNode.removeChild(g),h.parentNode.removeChild(h),{width:c,breakPoints:e}},Vara.prototype.setPosition=function(a,b,c){var c=c==null?{x:!1,y:!1}:c;c.x=c.x!=null&&c.x,c.y=c.y!=null&&c.y;var d=a.transform.baseVal.consolidate().matrix,e=d.e,f=d.f;b.x!=null&&(c.x?e+=b.x:e=b.x),b.y!=null&&(c.y?f+=b.y:f=b.y-a.getBBox().y);var g=this.svg.createSVGTransform();g.setTranslate(e,f),a.transform.baseVal.replaceItem(g,0)},"undefined"==typeof module?window.Vara=Vara:module.exports=Vara; \ No newline at end of file