@zumer/orbit 1.0.0 → 1.1.0
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/LICENSE +1 -1
- package/README.md +9 -5
- package/dist/orbit.css +76 -48
- package/dist/orbit.js +245 -316
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +62 -40
- package/package.json +1 -1
package/dist/orbit.min.js
CHANGED
|
@@ -1,69 +1,91 @@
|
|
|
1
|
-
(()=>{var
|
|
1
|
+
(()=>{var X=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
--o-fill: var(--o-gray-light);
|
|
5
|
+
--o-stroke: var(--o-fill);
|
|
6
|
+
--o-stroke-width: 1;
|
|
7
|
+
--o-back-fill: transparent;
|
|
8
|
+
--o-back-stroke: none;
|
|
9
|
+
--o-back-stroke-width: 1;
|
|
10
|
+
}
|
|
11
|
+
:host(:hover){
|
|
12
|
+
--o-fill: var(--o-gray-light);
|
|
13
|
+
--o-stroke: var(--o-fill);
|
|
14
|
+
--o-stroke-width: 1;
|
|
15
|
+
--o-back-fill: transparent;
|
|
16
|
+
--o-back-stroke: none;
|
|
17
|
+
--o-back-stroke-width: 1;
|
|
18
|
+
}
|
|
19
|
+
svg {
|
|
7
20
|
width: 100%;
|
|
8
21
|
height: 100%;
|
|
9
22
|
overflow: visible;
|
|
10
23
|
pointer-events: none;
|
|
11
24
|
}
|
|
12
25
|
svg * {
|
|
13
|
-
pointer-events:
|
|
26
|
+
pointer-events: visiblePainted;
|
|
14
27
|
}
|
|
15
28
|
.progress-bar {
|
|
16
|
-
fill:
|
|
17
|
-
stroke: var(--o-
|
|
18
|
-
|
|
29
|
+
fill: var(--o-fill);
|
|
30
|
+
stroke: var(--o-stroke);
|
|
31
|
+
stroke-width: var(--o-stroke-width);
|
|
32
|
+
transition: all 0.3s;
|
|
33
|
+
stroke-linejoin: round;
|
|
19
34
|
}
|
|
20
35
|
.progress-bg {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
stroke: var(--o-hover-color, var(--o-color));
|
|
25
|
-
|
|
36
|
+
fill: var(--o-back-fill);
|
|
37
|
+
stroke: var(--o-back-stroke);
|
|
38
|
+
stroke-width: var(--o-back-stroke-width);
|
|
26
39
|
}
|
|
27
40
|
</style>
|
|
28
41
|
<svg viewBox="0 0 100 100">
|
|
29
|
-
<
|
|
30
|
-
<path class="progress-
|
|
31
|
-
<path class="progress-bar"></path>
|
|
42
|
+
<path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
43
|
+
<path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
32
44
|
</svg>
|
|
33
|
-
`}connectedCallback(){this.update(),new MutationObserver(
|
|
45
|
+
`}connectedCallback(){this.update(),this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(s=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.shadowRoot.querySelector(".progress-bg"),s=this.shadowRoot.querySelector(".progress-bar");this.updateArc(t,!0),this.updateArc(s,!1)}updateArc(t,s){let{d:r}=this.calculateArcParameters(s);t.setAttribute("d",r)}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),s=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio")),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),a=this.getAttribute("shape")||"none",c=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),i=(t/s*r-c+.3)/2*100/t/2,n=e,v=parseFloat(this.getAttribute("max"))||100,u;this.classList.contains("outer-orbit")?u=i:this.classList.contains("quarter-outer-orbit")?u=i*-.5:this.classList.contains("inner-orbit")?u=i*-1:this.classList.contains("quarter-inner-orbit")?u=i*.5:u=0;let p=50+u;return{orbitRadius:t,progress:o,strokeWidth:c,realRadius:p,maxAngle:n,maxValue:v,shape:a,arcHeightPercentage:i,orbitNumber:s}}getProgressAngle(t){let{maxAngle:s,progress:r,maxValue:e}=this.getAttributes();return t?(e-1e-5)/e*s:r/e*s}calculateArcParameters(t){let s=this.getProgressAngle(t),{realRadius:r,arcHeightPercentage:e,orbitNumber:o,shape:a,strokeWidth:c}=this.getAttributes(),l=r,i,n,v,u,p,$,b,f,d,m,S,w,A,L,P=Math.PI/2,F=c,C=s*Math.PI/180,h=l+e,g=l-e!==0?l-e:l,R=F*2/o/2/h,V=F*2/o/2/g,I=R-P,y=C-R-P,E=V-P,k=C-V-P;i=50+h*Math.cos(I),n=50+h*Math.sin(I),v=50+h*Math.cos(y),u=50+h*Math.sin(y),S=50+h*Math.cos(y+3*Math.PI/180),A=50+h*Math.sin(y+3*Math.PI/180),$=50+g*Math.cos(E),b=50+g*Math.sin(E),f=50+g*Math.cos(k),d=50+g*Math.sin(k),w=50+g*Math.cos(k+3*Math.PI/180),L=50+g*Math.sin(k+3*Math.PI/180),p=s<=180?0:1;let M=`M ${i},${n} A ${h},${h} 0 ${p} 1 ${v},${u}`;return a==="arrow"&&(M+=`L ${(S+w)/2} ${(A+L)/2} `),(a==="circle"||a==="bullet")&&(M+=`A ${e}, ${e} 0 0 1 ${f},${d} `),M+=`L ${f} ${d}`,M+=`A ${g},${g} 0 ${p} 0 ${$},${b}`,a==="circle"&&(M+=`A ${e}, ${e} 0 0 1 ${i},${n} `),a==="bullet"&&(M+=`A ${e}, ${e} 0 0 0 ${i},${n} `),a==="arrow"&&(M+=`L ${$+3} ${(n+b)/2} `),M+="Z",{d:M}}};var z=document.createElement("template");z.innerHTML=`
|
|
34
46
|
<style>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
47
|
+
:host {
|
|
48
|
+
--o-fill: var(--o-gray-light);
|
|
49
|
+
--o-stroke: var(--o-fill);
|
|
50
|
+
--o-stroke-width: 1;
|
|
51
|
+
--o-color: currentcolor;
|
|
52
|
+
}
|
|
53
|
+
:host(:hover){
|
|
54
|
+
--o-fill: var(--o-gray-light);
|
|
55
|
+
--o-stroke: var(--o-fill);
|
|
56
|
+
--o-stroke-width: 1;
|
|
57
|
+
--o-color: currentcolor;
|
|
58
|
+
}
|
|
59
|
+
svg {
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: 100%;
|
|
62
|
+
overflow: visible;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
}
|
|
44
65
|
svg * {
|
|
45
|
-
pointer-events:
|
|
66
|
+
pointer-events: visiblePainted;
|
|
46
67
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
stroke
|
|
50
|
-
|
|
68
|
+
#orbitShape {
|
|
69
|
+
fill: var(--o-fill);
|
|
70
|
+
stroke: var(--o-stroke);
|
|
71
|
+
stroke-width: var(--o-stroke-width);
|
|
72
|
+
transition: all 0.3s;
|
|
73
|
+
stroke-linejoin: round;
|
|
51
74
|
}
|
|
52
75
|
text {
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
:host(:hover) text {
|
|
56
|
-
color: var(--o-hover-text-color, var(--o-text-color));
|
|
76
|
+
fill: var(--o-color);
|
|
57
77
|
}
|
|
58
|
-
|
|
59
|
-
|
|
78
|
+
#orbitPath {
|
|
79
|
+
fill: transparent;
|
|
80
|
+
stroke: none;
|
|
81
|
+
stroke-width: 0;
|
|
60
82
|
}
|
|
61
83
|
</style>
|
|
62
84
|
<svg viewBox="0 0 100 100">
|
|
63
|
-
<
|
|
64
|
-
<path id="orbitPath"
|
|
85
|
+
<path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
86
|
+
<path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
|
|
65
87
|
<text>
|
|
66
88
|
<textPath href="#orbitPath" alignment-baseline="middle"></textPath>
|
|
67
89
|
</text>
|
|
68
90
|
</svg>
|
|
69
|
-
`;var
|
|
91
|
+
`;var Y=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(z.content.cloneNode(!0))}connectedCallback(){this.update(),this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(s=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let{length:t,fontSize:s,textAnchor:r,fitRange:e}=this.getAttributes(),o=this.shadowRoot.getElementById("orbitPath"),a=this.shadowRoot.getElementById("orbitShape"),c=this.shadowRoot.querySelector("text"),l=this.shadowRoot.querySelector("textPath"),{dShape:i}=this.calculateArcParameters(),{dPath:n}=this.calculateTextArcParameters();a.setAttribute("d",i),o.setAttribute("d",n),r==="start"?(l.setAttribute("startOffset","0%"),l.setAttribute("text-anchor","start")):r==="middle"?(l.setAttribute("startOffset","50%"),l.setAttribute("text-anchor","middle")):r==="end"&&(l.setAttribute("startOffset","100%"),l.setAttribute("text-anchor","end")),e&&l.parentElement.setAttribute("textLength",o.getTotalLength()),c.style.fontSize=`calc(${s} * (100 / (${t}) * (12 / var(--o-orbit-number) ))`,l.textContent=this.textContent}getAttributes(){let t,s,r,e,o,a=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),c=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),l=this.getAttribute("shape")||"none",i=this.hasAttribute("flip")||this.classList.contains("flip"),n=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,v=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),u=this.getAttribute("text-anchor")||"middle",p=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),$=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),b=parseFloat(this.getAttribute("value"));if(b){s=this.getProgressAngle($,b);let w=this.previousElementSibling,A=w?parseFloat(getComputedStyle(w).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",A+s),A>=0&&i&&this.style.setProperty("--o-angle-composite",parseFloat(A)+"deg"),A>0&&!i&&this.style.setProperty("--o-angle-composite",parseFloat(A)+"deg")}else t=getComputedStyle(this).getPropertyValue("--o-angle"),s=H(t);r=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));let f=c/r*e-a+.3,d=f/2*100/c/2,m=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));this.classList.contains("outer-orbit")?o=d:this.classList.contains("quarter-outer-orbit")?o=d*-.5:this.classList.contains("inner-orbit")?o=d*-1:this.classList.contains("quarter-inner-orbit")?o=d*.5:o=0;let S=50+o;return{orbitRadius:c,arcHeight:f,realRadius:S,gap:m,arcAngle:s,shape:l,length:v,fontSize:p,flip:i,fitRange:n,textAnchor:u,arcHeightPercentage:d,innerOuter:o,orbitNumber:r,size:e,strokeWidth:a}}getProgressAngle(t,s){let r=s,e=parseFloat(this.getAttribute("max"))||100;return r/e*t}calculateArcParameters(){let{arcAngle:t,realRadius:s,gap:r,arcHeightPercentage:e,orbitNumber:o,shape:a,strokeWidth:c}=this.getAttributes(),l=s,i,n,v,u,p,$,b,f,d,m,S,w,A,L,P=Math.PI/2,F=c,C=t*Math.PI/180,h=l+e,g=l-e!==0?l-e:l,R=(r*2+F*2)/o/2/h,V=(r*2+F*2)/o/2/g,I=R-P,y=C-R-P,E=V-P,k=C-V-P;return i=50+h*Math.cos(I),n=50+h*Math.sin(I),v=50+h*Math.cos(y),u=50+h*Math.sin(y),S=50+h*Math.cos(y+3*Math.PI/180),A=50+h*Math.sin(y+3*Math.PI/180),$=50+g*Math.cos(E),b=50+g*Math.sin(E),f=50+g*Math.cos(k),d=50+g*Math.sin(k),w=50+g*Math.cos(k+3*Math.PI/180),L=50+g*Math.sin(k+3*Math.PI/180),p=t<=180?0:1,m=`M ${i},${n} A ${h},${h} 0 ${p} 1 ${v},${u}`,a==="arrow"&&(m+=`L ${(S+w)/2} ${(A+L)/2} `),(a==="circle"||a==="bullet")&&(m+=`A ${e}, ${e} 0 0 1 ${f},${d} `),m+=`L ${f} ${d}`,m+=`A ${g},${g} 0 ${p} 0 ${$},${b}`,a==="circle"&&(m+=`A ${e}, ${e} 0 0 1 ${i},${n} `),a==="bullet"&&(m+=`A ${e}, ${e} 0 0 0 ${i},${n} `),a==="arrow"&&(m+=`L ${$+3} ${(n+b)/2} `),m+="Z",{dShape:m}}calculateTextArcParameters(){let{arcAngle:t,realRadius:s,gap:r,flip:e}=this.getAttributes(),o=s,a,c,l,i,n,v,u,p=r*.5;u=e?0:1,n=t<=180?0:1;let $=50+o*Math.cos((-90+p)*(Math.PI/180)),b=50+o*Math.sin((-90+p)*(Math.PI/180)),f=50+o*Math.cos((t-90-p)*Math.PI/180),d=50+o*Math.sin((t-90-p)*Math.PI/180);return e?(a=f,c=d,l=$,i=b):(a=$,c=b,l=f,i=d),v=`M ${a},${c} A ${o},${o} 0 ${n} ${u} ${l},${i}`,{dPath:v}}};function H(x){let t=x.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(t){let s=parseFloat(t[1]),r=parseInt(t[2])-parseInt(t[3]);if(!isNaN(s)&&!isNaN(r)&&r!==0)return s/r}}var O={};O={resize:x=>{let t=document.querySelector(x);if(!t){console.error(`Not found: ${x}`);return}new ResizeObserver(r=>{for(let e of r){let{width:o}=e.contentRect,a=t.querySelectorAll(".gravity-spot");a?a.forEach(c=>{let l=getComputedStyle(c).getPropertyValue("--o-force"),i=o/500;c.style.setProperty("--o-force-ratio",`${i}`)}):console.error("No gravity-spot found")}}).observe(t)}};customElements.get("o-progress")||customElements.define("o-progress",X);customElements.get("o-arc")||customElements.define("o-arc",Y);window.Orbit=O;})();
|