@zumer/orbit 1.4.8 → 1.4.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -111
- package/dist/orbit.css +3 -3
- package/dist/orbit.js +61 -86
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +4 -4
- package/package.json +2 -2
package/dist/orbit.min.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* orbit
|
|
3
|
-
* v.1.4.
|
|
3
|
+
* v.1.4.10
|
|
4
4
|
* Author Juan Martin Muda - Zumerlab
|
|
5
5
|
* License MIT
|
|
6
6
|
*/
|
|
7
|
-
(()=>{var
|
|
7
|
+
(()=>{var x=class extends HTMLElement{constructor(){super()}getCommonAttributes(t){let r=parseFloat(getComputedStyle(t).getPropertyValue("r")||0),e=parseFloat(getComputedStyle(t).getPropertyValue("--o-orbit-number")||1),n=parseFloat(getComputedStyle(t).getPropertyValue("--o-size-ratio")||1),o=parseFloat(getComputedStyle(t).getPropertyValue("--o-stroke-width")||1),i=t.getAttribute("shape")||"none",g=r/e*n-o+.3,s=r>0?g/2*100/r/2:0,a=0;t.classList.contains("outer-orbit")?a=s:t.classList.contains("quarter-outer-orbit")?a=s*-.5:t.classList.contains("inner-orbit")?a=s*-1:t.classList.contains("quarter-inner-orbit")&&(a=s*.5);let h=50+a;return{orbitRadius:r,arcHeight:g,realRadius:h,arcAngle:0,shape:i,arcHeightPercentage:s,orbitNumber:e,size:n,strokeWidth:o}}getProgressAngle(t,r,e=100){return r/e*t}getControlPoint(t,r,e,n,o="clockwise"){let i=(t+e)/2,g=(r+n)/2,s=e-t,a=n-r;return o==="clockwise"?{xc:i+a*.4,yc:g-s*.4}:{xc:i-a*.4,yc:g+s*.4}}arcPoint(t,r,e=0,n=0){let o=t+e,i=r+n*Math.PI/180;return{x:50+o*Math.cos(i),y:50+o*Math.sin(i)}}calculateCommonArcParameters(t,r,e,n,o,i,g,s=0){let a=Math.PI/2,h=t*Math.PI/180,c=r+e,l=r-e!==0?r-e:r,u=(s+i*1.25)/n/c,p=(s+i*1.25)/n/l,d=u-a,$=h-u-a,P=p-a,y=h-p-a,A=this.arcPoint(c,d),v=this.arcPoint(c,$),S=this.arcPoint(l,P),k=this.arcPoint(l,y),w=t<=180?0:1;return{upperArcStart:A,upperArcEnd:v,innerArcStart:S,innerArcEnd:k,largeArcFlag:w,bigRadius:c,smallRadius:l,radius:r,upperAngleStart:d,upperAngleEnd:$,innerAngleStart:P,innerAngleEnd:y}}generatePathData(t,r,e,n){let o="";switch(t){case"rounded":o=this.generateRoundedPath(r,e,n);break;case"circle":case"circle-a":case"bullet":o=this.generateCirclePath(r,t);break;case"circle-b":o=this.generateCircleBPath(r,e,n);break;case"arrow":o=this.generateArrowPath(r,n);break;case"backslash":case"slash":o=this.generateSlashPath(r,t,n);break;case"zigzag":o=this.generateZigzagPath(r,e,n);break;default:o=this.generateDefaultPath(r)}return o}generateRoundedPath(t,r,e){let{upperArcStart:n,upperArcEnd:o,innerArcStart:i,innerArcEnd:g,bigRadius:s,smallRadius:a,largeArcFlag:h}=t,c=r<10?5:r<5?2.5:10,l=this.arcPoint(s,t.upperAngleStart,0,c/e),u=this.arcPoint(s,t.upperAngleEnd,0,-c/e),p=this.arcPoint(a,t.innerAngleStart,0,c/e),d=this.arcPoint(a,t.innerAngleEnd,0,-c/e),$=this.arcPoint(s,t.upperAngleStart,-(c/2)/e,0),P=this.arcPoint(s,t.upperAngleEnd,-(c/2)/e,0),y=this.arcPoint(a,t.innerAngleStart,c/2/e,0),A=this.arcPoint(a,t.innerAngleEnd,c/2/e,0),v=this.getControlPoint(u.x,u.y,P.x,P.y),S=this.getControlPoint(A.x,A.y,d.x,d.y),k=this.getControlPoint(p.x,p.y,y.x,y.y),w=this.getControlPoint($.x,$.y,l.x,l.y),f=`M ${l.x},${l.y} A ${s},${s} 0 ${h} 1 ${u.x},${u.y}`;return f+=`Q ${v.xc},${v.yc} ${P.x},${P.y} L ${A.x},${A.y}`,f+=`Q ${S.xc},${S.yc} ${d.x},${d.y}`,f+=`A ${a},${a} 0 ${h} 0 ${p.x},${p.y}`,f+=`Q ${k.xc},${k.yc} ${y.x},${y.y} L ${$.x},${$.y}`,f+=` Q ${w.xc},${w.yc} ${l.x},${l.y}`,f+=" Z",f}generateCirclePath(t,r){let{upperArcStart:e,upperArcEnd:n,innerArcStart:o,innerArcEnd:i,bigRadius:g,smallRadius:s,largeArcFlag:a}=t,h=`M ${e.x},${e.y} A ${g},${g} 0 ${a} 1 ${n.x},${n.y}`;return h+=` A 1,1 0 0 1 ${i.x},${i.y} `,h+=` A ${s},${s} 0 ${a} 0 ${o.x},${o.y}`,h+=` A 1,1 0 0 ${r==="circle"||r==="circle-a"?1:0} ${e.x},${e.y} `,h+=" Z",h}generateCircleBPath(t,r,e){let{upperAngleStart:n,upperAngleEnd:o,innerAngleStart:i,innerAngleEnd:g,bigRadius:s,smallRadius:a,largeArcFlag:h}=t,c=r*1.36,l=this.arcPoint(s,n,0,c/e),u=this.arcPoint(s,o,0,-c/e),p=this.arcPoint(a,i,0,c/e),d=this.arcPoint(a,g,0,-c/e),$=`M ${l.x},${l.y} A ${s},${s} 0 ${h} 1 ${u.x},${u.y}`;return $+=` A 1,1 0 0 1 ${d.x},${d.y} `,$+=` A ${a},${a} 0 ${h} 0 ${p.x},${p.y}`,$+=` A 1,1 0 0 1 ${l.x},${l.y} `,$+=" Z",$}generateArrowPath(t,r){let{upperArcStart:e,upperArcEnd:n,innerArcStart:o,innerArcEnd:i,bigRadius:g,smallRadius:s,largeArcFlag:a,radius:h}=t,c=this.arcPoint(h,t.upperAngleEnd,0,24/r/2),l=this.arcPoint(h,t.upperAngleStart,0,24/r/2),u=`M ${e.x},${e.y} A ${g},${g} 0 ${a} 1 ${n.x},${n.y}`;return u+=`L ${c.x} ${c.y}`,u+=`L ${i.x} ${i.y}`,u+=`A ${s},${s} 0 ${a} 0 ${o.x}, ${o.y}`,u+=`L ${l.x} ${l.y}`,u+="Z",u}generateSlashPath(t,r,e){let{upperAngleStart:n,upperAngleEnd:o,innerAngleStart:i,innerAngleEnd:g,bigRadius:s,smallRadius:a,largeArcFlag:h}=t,c=this.arcPoint(s,n,0,r==="backslash"?0:24/e/2),l=this.arcPoint(s,o,0,r==="backslash"?0:24/e/2),u=this.arcPoint(a,i,0,r==="backslash"?24/e/2:0),p=this.arcPoint(a,g,0,r==="backslash"?24/e/2:0),d=`M ${c.x},${c.y} A ${s},${s} 0 ${h} 1 ${l.x},${l.y}`;return d+=`L ${p.x} ${p.y}`,d+=`A ${a},${a} 0 ${h} 0 ${u.x}, ${u.y}`,d+="Z",d}generateZigzagPath(t,r,e){let{upperArcStart:n,upperArcEnd:o,innerArcStart:i,innerArcEnd:g,bigRadius:s,smallRadius:a,largeArcFlag:h,radius:c}=t,l=r/e/2,u=this.arcPoint(c,t.upperAngleStart,-l,3),p=this.arcPoint(c,t.upperAngleStart,0,0),d=this.arcPoint(c,t.upperAngleStart,l,3),$=this.arcPoint(c,t.innerAngleEnd,l,3),P=this.arcPoint(c,t.innerAngleEnd,0,0),y=this.arcPoint(c,t.innerAngleEnd,-l,3),A=`M ${n.x},${n.y} A ${s},${s} 0 ${h} 1 ${o.x},${o.y}`;return A+=`L ${$.x} ${$.y}`,A+=`L ${P.x} ${P.y}`,A+=`L ${y.x} ${y.y}`,A+=`L ${g.x} ${g.y}`,A+=`A ${a},${a} 0 ${h} 0 ${i.x}, ${i.y}`,A+=`L ${u.x} ${u.y}`,A+=`L ${p.x} ${p.y}`,A+=`L ${d.x} ${d.y}`,A+="Z",A}generateDefaultPath(t){let{upperArcStart:r,upperArcEnd:e,innerArcStart:n,innerArcEnd:o,bigRadius:i,smallRadius:g,largeArcFlag:s}=t,a=`M ${r.x},${r.y} A ${i},${i} 0 ${s} 1 ${e.x},${e.y}`;return a+=`L ${o.x} ${o.y}`,a+=`A ${g},${g} 0 ${s} 0 ${n.x}, ${n.y}`,a+="Z",a}};var m=class extends x{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
8
8
|
<style>
|
|
9
9
|
:host {
|
|
10
10
|
--o-fill: var(--o-gray-light);
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
49
49
|
<path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
50
50
|
</svg>
|
|
51
|
-
`}connectedCallback(){this.update(),this.setupObserver()}setupObserver(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.
|
|
51
|
+
`}connectedCallback(){this.update(),this.setupObserver()}setupObserver(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.getAttributes(),r=this.calculateArcParameters(t,!0),e=this.calculateArcParameters(t,!1);this.shadowRoot.querySelector(".progress-bg").setAttribute("d",r),this.shadowRoot.querySelector(".progress-bar").setAttribute("d",e)}getAttributes(){let t=super.getCommonAttributes(this),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),n=parseFloat(this.getAttribute("max"))||100;return{...t,range:r,progress:e,maxValue:n}}getProgressAngle(t,r){let{range:e,progress:n,maxValue:o}=t;return r?(o-1e-5)/o*e:n/o*e}calculateArcParameters(t,r){let{shape:e,realRadius:n,arcHeightPercentage:o,orbitNumber:i,strokeWidth:g,arcHeight:s}=t,a=this.getProgressAngle(t,r),h=super.calculateCommonArcParameters(a,n,o,i,e,g,s);return super.generatePathData(e,h,s,i)}};var C=document.createElement("template");C.innerHTML=`
|
|
52
52
|
<style>
|
|
53
53
|
:host {
|
|
54
54
|
--o-fill: var(--o-gray-light);
|
|
@@ -93,4 +93,4 @@
|
|
|
93
93
|
<textPath href="#orbitPath" alignment-baseline="middle"></textPath>
|
|
94
94
|
</text>
|
|
95
95
|
</svg>
|
|
96
|
-
`;var E=class extends
|
|
96
|
+
`;var E=class extends x{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(C.content.cloneNode(!0))}connectedCallback(){this.update(),this.setupObservers()}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.textObserver&&this.textObserver.disconnect()}setupObservers(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let t=this.shadowRoot.querySelector("textPath");t.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}update(){let t=this.getAttributes(),{length:r,fontSize:e,textAnchor:n,fitRange:o}=t,i=this.shadowRoot.querySelector("#orbitPath"),g=this.shadowRoot.querySelector("#orbitShape"),s=this.shadowRoot.querySelector("textPath");g.setAttribute("d",this.calculateArcParameters(t).dShape),i.setAttribute("d",this.calculateTextArcParameters(t).dPath),n==="start"?(s.setAttribute("startOffset","0%"),s.setAttribute("text-anchor","start")):n==="middle"?(s.setAttribute("startOffset","50%"),s.setAttribute("text-anchor","middle")):n==="end"&&(s.setAttribute("startOffset","100%"),s.setAttribute("text-anchor","end")),o&&s.parentElement.setAttribute("textLength",i.getTotalLength()),s.parentElement.style.fontSize=`calc(${e} * (100 / (${r}) * (12 / var(--o-orbit-number)))`,s.textContent=this.textContent}getAttributes(){let t=super.getCommonAttributes(this),r,e=this.hasAttribute("flip")||this.classList.contains("flip"),n=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,o=parseFloat(getComputedStyle(this).getPropertyValue("--o-force"))||100,i=this.getAttribute("text-anchor")||"middle",g=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),s=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),a=parseFloat(this.getAttribute("value")),h=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"))||1;if(a){r=super.getProgressAngle(s,a);let c=this.previousElementSibling,l=c?parseFloat(getComputedStyle(c).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",l+r),l>=0&&e&&this.style.setProperty("--o-angle-composite",parseFloat(l)+"deg"),l>0&&!e&&this.style.setProperty("--o-angle-composite",parseFloat(l)+"deg")}else{let c=getComputedStyle(this).getPropertyValue("--o-angle");r=this.calcularExpresionCSS(c)}return{...t,gap:h,arcAngle:r,flip:e,fitRange:n,length:o,fontSize:g,textAnchor:i}}calculateArcParameters(t){let{arcAngle:r,realRadius:e,arcHeightPercentage:n,orbitNumber:o,shape:i,strokeWidth:g,arcHeight:s,gap:a}=t,h=super.calculateCommonArcParameters(r,e,n,o,i,g,s,a);return{dShape:super.generatePathData(i,h,s,o)}}calculateTextArcParameters(t){let{arcAngle:r,realRadius:e,gap:n,flip:o}=t,i=n*.5,g=o?0:1,s=r<=180?0:1,a=50+e*Math.cos((-90+i)*(Math.PI/180)),h=50+e*Math.sin((-90+i)*(Math.PI/180)),c=50+e*Math.cos((r-90-i)*Math.PI/180),l=50+e*Math.sin((r-90-i)*Math.PI/180),[u,p,d,$]=o?[c,l,a,h]:[a,h,c,l];return{dPath:`M ${u},${p} A ${e},${e} 0 ${s} ${g} ${d},${$}`}}calcularExpresionCSS(t){let r=t.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(r){let e=parseFloat(r[1]),n=parseInt(r[2])-parseInt(r[3]);if(!isNaN(e)&&!isNaN(n)&&n!==0)return e/n}return 0}};var R={resize(b){let t=document.querySelector(b);if(!t){console.error("Orbit.resize: element not found:",b);return}let r=o=>{t.querySelectorAll(".gravity-spot").forEach(i=>{i.style.setProperty("--o-force-ratio",String(o/500))})},e=t.offsetWidth||t.getBoundingClientRect().width;e>0?r(e):requestAnimationFrame(()=>{e=t.offsetWidth||t.getBoundingClientRect().width,e>0&&r(e)}),new ResizeObserver(o=>{for(let i of o)i.contentRect.width>0&&r(i.contentRect.width)}).observe(t)}};customElements.get("o-progress")||customElements.define("o-progress",m);customElements.get("o-arc")||customElements.define("o-arc",E);window.Orbit=R;})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zumer/orbit",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.10",
|
|
4
4
|
"description": "Orbit is a CSS framework for radial interfaces",
|
|
5
5
|
"main": "./dist/orbit.js",
|
|
6
6
|
"exports": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"homepage": "https://github.com/zumerlab/orbit#readme",
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"esbuild": "^0.
|
|
42
|
+
"esbuild": "^0.25.12",
|
|
43
43
|
"sass": "^1.77.0"
|
|
44
44
|
}
|
|
45
45
|
}
|