@zumer/orbit 0.5.0 → 1.0.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/dist/orbit.min.js CHANGED
@@ -1,4 +1,4 @@
1
- (()=>{var p=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
1
+ (()=>{var L=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
2
2
  <style>
3
3
  :host {
4
4
  display: block;
@@ -14,14 +14,14 @@
14
14
  }
15
15
  .progress-bar {
16
16
  fill: transparent;
17
- stroke: var(--o-progress-color);
17
+ stroke: var(--o-color);
18
18
  transition: stroke 0.3s;
19
19
  }
20
20
  .progress-bg {
21
- stroke: var(--o-bg-color, transparent);
21
+ stroke: var(--o-background-color, transparent);
22
22
  }
23
23
  :host(:hover) .progress-bar {
24
- stroke: var(--o-hover-progress-color, var(--o-progress-color));
24
+ stroke: var(--o-hover-color, var(--o-color));
25
25
 
26
26
  }
27
27
  </style>
@@ -30,7 +30,7 @@
30
30
  <path class="progress-bg"></path>
31
31
  <path class="progress-bar"></path>
32
32
  </svg>
33
- `}connectedCallback(){this.update(),new MutationObserver(r=>{r.forEach(e=>{this.update()})}).observe(this,{attributes:!0,childList:!0})}update(){let{shape:t}=this.getAttributes(),r=this.shadowRoot.querySelector("svg"),e=this.createDefs();t!=="none"&&(e.appendChild(this.createMarker("head","end")),e.appendChild(this.createMarker("tail","start")));let s=this.shadowRoot.querySelector(".progress-bg"),o=this.shadowRoot.querySelector(".progress-bar");this.updateArc(s,!0),this.updateArc(o,!1),r.querySelector("defs").replaceWith(e)}createSVGElement(){let t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.setAttribute("viewBox","0 0 100 100"),t.setAttribute("width",this.getAttribute("width")||"100%"),t.setAttribute("height",this.getAttribute("height")||"100%"),t}updateArc(t,r){let{strokeWidth:e,realRadius:s,ellipseX:o,ellipseY:a,progressBarColor:i,progressBgColor:n,maxAngle:c,shape:l}=this.getAttributes(),h=this.getProgressAngle(c,r),{d:u}=this.calculateArcParameters(h,s,o,a);t.setAttribute("d",u),t.setAttribute("stroke",r?n:i),t.setAttribute("fill","transparent"),l!=="none"&&(t.setAttribute("marker-end","url(#head)"),t.setAttribute("marker-start","url(#tail)")),t.setAttribute("stroke-width",e),t.setAttribute("vector-effect","non-scaling-stroke")}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-ellipse-x")||1),s=parseFloat(getComputedStyle(this).getPropertyValue("--o-ellipse-y")||1),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),a=this.getAttribute("shape")||"none",i=this.getAttribute("bar-color"),n=this.getAttribute("bgcolor")||"transparent",c=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),l=c/2*100/t/2,h=l;this.classList.contains("outer-orbit")&&(h=l*2),this.classList.contains("quarter-outer-orbit")&&(h=l*1.75),this.classList.contains("inner-orbit")&&(h=0),this.classList.contains("quarter-inner-orbit")&&(h=l*.75);let u=50+h-l;return{orbitRadius:t,ellipseX:e,ellipseY:s,progress:o,progressBarColor:i,progressBgColor:n,strokeWidth:c,realRadius:u,maxAngle:r,shape:a}}getProgressAngle(t,r){let e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),s=parseFloat(this.getAttribute("max"))||100;return r?(s-1e-5)/s*t:e/s*t}calculateArcParameters(t,r,e,s){let o=r/e,a=r/s,i=50+o*Math.cos(-Math.PI/2),n=50+a*Math.sin(-Math.PI/2),c=50+o*Math.cos((t-90)*Math.PI/180),l=50+a*Math.sin((t-90)*Math.PI/180),h=t<=180?0:1,u=`M ${i},${n} A ${o},${a} 0 ${h} 1 ${c},${l}`;return{startX:i,startY:n,endX:c,endY:l,largeArcFlag:h,d:u}}createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}createMarker(t,r="end"){let{shape:e}=this.getAttributes(),s=document.createElementNS("http://www.w3.org/2000/svg","marker");s.setAttribute("id",t),s.setAttribute("viewBox","0 0 10 10"),r==="start"&&e!=="circle"?s.setAttribute("refX","2"):r==="start"&&e==="circle"?s.setAttribute("refX","5"):s.setAttribute("refX","0.1"),s.setAttribute("refY","5"),s.setAttribute("markerWidth","1"),s.setAttribute("markerHeight","1"),s.setAttribute("orient","auto"),s.setAttribute("markerUnits","strokeWidth"),s.setAttribute("fill","context-stroke");let o=document.createElementNS("http://www.w3.org/2000/svg","path"),a={arrow:{head:"M 0 0 L 2 5 L 0 10 z",tail:"M 2 0 L 0 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},slash:{head:"M 0 0 L 0 0 L 1 5 L 2 10 L 0 10 L 0 5 z",tail:"M 2 0 L 0 0 L 1 5 L 2 10 L 2 10 L 2 5 z"},backslash:{head:"M 0 0 L 2 0 L 1 5 L 0 10 L 0 10 L 0 5 z",tail:"M 2 0 L 2 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},circle:{head:"M 0 0 C 7 0 7 10 0 10 z",tail:"M 6 0 C -1 0 -1 10 6 10 z"},zigzag:{head:"M 1 0 L 0 0 L 0 5 L 0 10 L 1 10 L 2 7 L 1 5 L 2 3 z",tail:"M 0 0 L 2 0 L 2 5 L 2 10 L 0 10 L 1 7 L 0 5 L 1 3 z"}};return r==="end"?o.setAttribute("d",a[e].head):o.setAttribute("d",a[e].tail),s.appendChild(o),s}};var L=document.createElement("template");L.innerHTML=`
33
+ `}connectedCallback(){this.update(),new MutationObserver(r=>{r.forEach(s=>{this.update()})}).observe(this,{attributes:!0,childList:!0})}update(){let{shape:t}=this.getAttributes(),r=this.shadowRoot.querySelector("svg");if(t!=="none"&&t!=="circle"){let o=this.createDefs();o.appendChild(this.createMarker("head","end")),o.appendChild(this.createMarker("tail","start")),r.querySelector("defs").replaceWith(o)}let s=this.shadowRoot.querySelector(".progress-bg"),e=this.shadowRoot.querySelector(".progress-bar");this.updateArc(s,!0),this.updateArc(e,!1)}createSVGElement(){let t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.setAttribute("viewBox","0 0 100 100"),t.setAttribute("width",this.getAttribute("width")||"100%"),t.setAttribute("height",this.getAttribute("height")||"100%"),t}updateArc(t,r){let{strokeWidth:s,realRadius:e,ellipseX:o,ellipseY:a,progressBarColor:h,progressBgColor:i,maxAngle:c,shape:l}=this.getAttributes(),n=this.getProgressAngle(c,r),{d:u}=this.calculateArcParameters(n,e,o,a);t.setAttribute("d",u),t.setAttribute("stroke",r?i:h),t.setAttribute("fill","transparent"),l==="circle"&&t.setAttribute("stroke-linecap","round"),l!=="none"&&l!=="circle"&&CSS.supports("fill","context-stroke")&&(t.setAttribute("marker-end","url(#head)"),t.setAttribute("marker-start","url(#tail)")),t.setAttribute("stroke-width",s),t.setAttribute("vector-effect","non-scaling-stroke")}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),s=parseFloat(getComputedStyle(this).getPropertyValue("--o-ellipse-x")||1),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-ellipse-y")||1),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),a=this.getAttribute("shape")||"none",h=this.getAttribute("bar-color"),i=this.getAttribute("bgcolor")||"transparent",c=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),l=c/2*100/t/2,n=l;this.classList.contains("outer-orbit")&&(n=l*2),this.classList.contains("quarter-outer-orbit")&&(n=l*1.75),this.classList.contains("inner-orbit")&&(n=0),this.classList.contains("quarter-inner-orbit")&&(n=l*.75);let u=50+n-l;return{orbitRadius:t,ellipseX:s,ellipseY:e,progress:o,progressBarColor:h,progressBgColor:i,strokeWidth:c,realRadius:u,maxAngle:r,shape:a}}getProgressAngle(t,r){let s=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),e=parseFloat(this.getAttribute("max"))||100;return r?(e-1e-5)/e*t:s/e*t}calculateArcParameters(t,r,s,e){let o=r/s,a=r/e,h=50+o*Math.cos(-Math.PI/2),i=50+a*Math.sin(-Math.PI/2),c=50+o*Math.cos((t-90)*Math.PI/180),l=50+a*Math.sin((t-90)*Math.PI/180),n=t<=180?0:1,u=`M ${h},${i} A ${o},${a} 0 ${n} 1 ${c},${l}`;return{startX:h,startY:i,endX:c,endY:l,largeArcFlag:n,d:u}}createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}createMarker(t,r="end"){let{shape:s}=this.getAttributes(),e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id",t),e.setAttribute("viewBox","0 0 10 10"),r==="start"&&s!=="circle"?e.setAttribute("refX","2"):r==="start"&&s==="circle"?e.setAttribute("refX","5"):e.setAttribute("refX","0.1"),e.setAttribute("refY","5"),e.setAttribute("markerWidth","1"),e.setAttribute("markerHeight","1"),e.setAttribute("orient","auto"),e.setAttribute("markerUnits","strokeWidth"),e.setAttribute("fill","context-stroke");let o=document.createElementNS("http://www.w3.org/2000/svg","path"),a={arrow:{head:"M 0 0 L 2 5 L 0 10 z",tail:"M 2 0 L 0 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},slash:{head:"M 0 0 L 0 0 L 1 5 L 2 10 L 0 10 L 0 5 z",tail:"M 2 0 L 0 0 L 1 5 L 2 10 L 2 10 L 2 5 z"},backslash:{head:"M 0 0 L 2 0 L 1 5 L 0 10 L 0 10 L 0 5 z",tail:"M 2 0 L 2 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},circle:{head:"M 0 0 C 7 0 7 10 0 10 z",tail:"M 6 0 C -1 0 -1 10 6 10 z"},zigzag:{head:"M 1 0 L 0 0 L 0 5 L 0 10 L 1 10 L 2 7 L 1 5 L 2 3 z",tail:"M 0 0 L 2 0 L 2 5 L 2 10 L 0 10 L 1 7 L 0 5 L 1 3 z"}};return r==="end"?o.setAttribute("d",a[s].head):o.setAttribute("d",a[s].tail),e.appendChild(o),e}};var y=document.createElement("template");y.innerHTML=`
34
34
  <style>
35
35
  :host {
36
36
  display: inline-block;
@@ -41,58 +41,29 @@
41
41
  overflow: visible;
42
42
  pointer-events: none;
43
43
  }
44
- svg * {
45
- pointer-events: stroke;
46
- }
47
- .arc {
48
- stroke: var(--o-arc-color, var(--o-cyan-light));
49
- stroke-width: calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
50
- transition: stroke 0.3s;
51
- }
52
-
53
- :host(:hover) .arc {
54
- stroke: var(--o-hover-arc-color, var(--o-arc-color));
55
-
56
- }
44
+ svg * {
45
+ pointer-events: stroke;
46
+ }
47
+ .arc {
48
+ stroke: var(--o-color, transparent);
49
+ stroke-width: calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
50
+ transition: stroke 0.3s;
51
+ }
52
+ text {
53
+ color: var(--o-text-color, currentcolor);
54
+ }
55
+ :host(:hover) text {
56
+ color: var(--o-hover-text-color, var(--o-text-color));
57
+ }
58
+ :host(:hover) .arc {
59
+ stroke: var(--o-hover-color, var(--o-color));
60
+ }
57
61
  </style>
58
62
  <svg viewBox="0 0 100 100">
59
63
  <defs></defs>
60
- <path class="arc" vector-effect="non-scaling-stroke" fill="transparent"></path>
64
+ <path id="orbitPath" class="arc" vector-effect="non-scaling-stroke" fill="transparent"></path>
65
+ <text>
66
+ <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
67
+ </text>
61
68
  </svg>
62
- `;var g=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(L.content.cloneNode(!0))}connectedCallback(){this.update(),new MutationObserver(r=>{r.forEach(e=>{this.update()})}).observe(this,{attributes:!0,childList:!0})}update(){let{shape:t}=this.getAttributes(),r=this.shadowRoot.querySelector("svg"),e=this.shadowRoot.querySelector("path"),s=this.shadowRoot.querySelector("defs");t!=="none"&&(s.innerHTML="",s.appendChild(this.createMarker("head","end")),s.appendChild(this.createMarker("tail","start")),e.setAttribute("marker-end","url(#head)"),e.setAttribute("marker-start","url(#tail)"));let{realRadius:o,arcColor:a,gap:i}=this.getAttributes(),n=this.calculateAngle(),{d:c}=this.calculateArcParameters(n,o,i);e.setAttribute("d",c),e.setAttribute("stroke",a)}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap")||.001),e=this.getAttribute("shape")||"none",s=this.getAttribute("arc-color"),o=getComputedStyle(this).getPropertyValue("--o-angle"),a=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),i=a/2*100/t/2,n=i;this.classList.contains("outer-orbit")&&(n=i*2),this.classList.contains("quarter-outer-orbit")&&(n=i*1.75),this.classList.contains("inner-orbit")&&(n=0),this.classList.contains("quarter-inner-orbit")&&(n=i*.75);let c=50+n-i,l=v(o);return{orbitRadius:t,strokeWidth:a,realRadius:c,arcColor:s,gap:r,arcAngle:l,shape:e}}calculateAngle(){let{arcAngle:t,gap:r}=this.getAttributes();return t-r}calculateArcParameters(t,r){let e=r/1,s=r/1,o=50+e*Math.cos(-Math.PI/2),a=50+s*Math.sin(-Math.PI/2),i=50+e*Math.cos((t-90)*Math.PI/180),n=50+s*Math.sin((t-90)*Math.PI/180),c=t<=180?0:1,l=`M ${o},${a} A ${e},${s} 0 ${c} 1 ${i},${n}`;return{startX:o,startY:a,endX:i,endY:n,largeArcFlag:c,d:l}}createMarker(t,r="end"){let{shape:e}=this.getAttributes(),s=document.createElementNS("http://www.w3.org/2000/svg","marker");s.setAttribute("id",t),s.setAttribute("viewBox","0 0 10 10"),r==="start"&&e!=="circle"?s.setAttribute("refX","2"):r==="start"&&e==="circle"?s.setAttribute("refX","5"):s.setAttribute("refX","0.1"),s.setAttribute("refY","5"),s.setAttribute("markerWidth","1"),s.setAttribute("markerHeight","1"),s.setAttribute("orient","auto"),s.setAttribute("markerUnits","strokeWidth"),s.setAttribute("fill","context-stroke");let o=document.createElementNS("http://www.w3.org/2000/svg","path"),a={arrow:{head:"M 0 0 L 2 5 L 0 10 z",tail:"M 2 0 L 0 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},slash:{head:"M 0 0 L 0 0 L 1 5 L 2 10 L 0 10 L 0 5 z",tail:"M 2 0 L 0 0 L 1 5 L 2 10 L 2 10 L 2 5 z"},backslash:{head:"M 0 0 L 2 0 L 1 5 L 0 10 L 0 10 L 0 5 z",tail:"M 2 0 L 2 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},circle:{head:"M 0 0 C 7 0 7 10 0 10 z",tail:"M 6 0 C -1 0 -1 10 6 10 z"},zigzag:{head:"M 1 0 L 0 0 L 0 5 L 0 10 L 1 10 L 2 7 L 1 5 L 2 3 z",tail:"M 0 0 L 2 0 L 2 5 L 2 10 L 0 10 L 1 7 L 0 5 L 1 3 z"}};return r==="end"?o.setAttribute("d",a[e].head):o.setAttribute("d",a[e].tail),s.appendChild(o),s}};function v(d){let t=d.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(t){let r=parseFloat(t[1]),e=parseInt(t[2])-parseInt(t[3]);if(!isNaN(r)&&!isNaN(e)&&e!==0)return r/e}}var b=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});let t=document.createElement("template");t.innerHTML=`
63
- <svg viewBox="0 0 100 100" >
64
- <path id="orbitPath" fill="none" vector-effect="non-scaling-stroke"></path>
65
- <text>
66
- <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
67
- </text>
68
- </svg>
69
- <style>
70
- :host {
71
- display: inline-block;
72
-
73
- }
74
- svg {
75
- width: 100%;
76
- height: 100%;
77
- overflow: visible;
78
- pointer-events: none;
79
-
80
- }
81
- svg * {
82
- pointer-events: stroke;
83
- }
84
-
85
- path {
86
- fill: transparent;
87
- stroke: var(--o-text-color);
88
- transition: stroke 0.3s;
89
- }
90
-
91
- :host(:hover) path {
92
- stroke: var(--o-hover-text-color, var(--o-text-color));
93
-
94
- }
95
-
96
-
97
- </style>
98
- `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){this.update(),new MutationObserver(r=>{r.forEach(e=>{this.update()})}).observe(this,{attributes:!0,childList:!0})}update(){let t=this.shadowRoot.getElementById("orbitPath"),r=this.shadowRoot.querySelector("text"),e=this.shadowRoot.querySelector("textPath"),{d:s,strokeWidth:o,lineCap:a}=this.getPathAttributes();t.setAttribute("d",s),t.setAttribute("stroke-width",o),t.setAttribute("stroke-linecap",a);let{length:i,fontSize:n,textAnchor:c,fitRange:l}=this.getTextAttributes();c==="start"?(e.setAttribute("startOffset","0%"),e.setAttribute("text-anchor","start")):c==="middle"?(e.setAttribute("startOffset","50%"),e.setAttribute("text-anchor","middle")):c==="end"&&(e.setAttribute("startOffset","100%"),e.setAttribute("text-anchor","end")),l&&e.parentElement.setAttribute("textLength",t.getTotalLength()),r.style.fontSize=`calc(${n} * (100 / (${i}) * (12 / var(--o-orbit-number) ))`,e.textContent=this.textContent.trim()}getPathAttributes(){let{realRadius:t,gap:r,textBgColor:e,flip:s,lineCap:o,strokeWidth:a}=this.getAttributes(),i=this.calculateAngle(),{d:n}=this.calculateArcParameters(i,t,r,s);return{d:n,strokeWidth:a,textBgColor:e,lineCap:o}}getTextAttributes(){let{length:t,fontSize:r,textAnchor:e,fitRange:s}=this.getAttributes();return{length:t,fontSize:r,textAnchor:e,fitRange:s}}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),r=this.hasAttribute("flip"),e=this.hasAttribute("fit-range"),s=getComputedStyle(this).getPropertyValue("--o-linecap")||"butt",o=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap")||.001),a=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),i=this.getAttribute("text-anchor")||"middle",n=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),c=getComputedStyle(this).getPropertyValue("--o-angle"),l=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),h=l/2*100/t/2,u=h;this.classList.contains("outer-orbit")&&(u=h*2),this.classList.contains("quarter-outer-orbit")&&(u=h*1.75),this.classList.contains("inner-orbit")&&(u=0),this.classList.contains("quarter-inner-orbit")&&(u=h*.75);let m=50+u-h,f=M(c);return{orbitRadius:t,strokeWidth:l,realRadius:m,length:a,fontSize:n,gap:o,textAngle:f,flip:r,textAnchor:i,lineCap:s,fitRange:e}}calculateAngle(){let{textAngle:t,gap:r}=this.getAttributes();return t-r}calculateArcParameters(t,r,e,s){let o=r/1,a=r/1,i,n,c,l,h,u;return s?(i=50-e+o*Math.cos(-Math.PI/2),n=50+a*Math.sin(-Math.PI/2),c=50+o*Math.cos((270-t)*Math.PI/180),l=50+a*Math.sin((270-t)*Math.PI/180),h=t<=180?0:1,u=`M ${i},${n} A ${o},${a} 0 ${h} 0 ${c},${l}`):(i=50+e+o*Math.cos(-Math.PI/2),n=50+a*Math.sin(-Math.PI/2),c=50+o*Math.cos((t-90)*Math.PI/180),l=50+a*Math.sin((t-90)*Math.PI/180),h=t<=180?0:1,u=`M ${i},${n} A ${o},${a} 0 ${h} 1 ${c},${l}`),{startX:i,startY:n,endX:c,endY:l,largeArcFlag:h,d:u}}};function M(d){let t=d.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(t){let r=parseFloat(t[1]),e=parseInt(t[2])-parseInt(t[3]);if(!isNaN(r)&&!isNaN(e)&&e!==0)return r/e}}var A={};A={resize:d=>{let t=document.querySelector(d);if(!t){console.error(`No se encontr\xF3 ning\xFAn elemento con el selector ${d}`);return}new ResizeObserver(e=>{for(let s of e){let{width:o}=s.contentRect,a=t.querySelector(".gravity-spot");a?a.style.setProperty("--o-force",`${o}px`):console.error("No se encontr\xF3 ning\xFAn elemento hijo con la clase .child-element")}}).observe(t)}};customElements.define("o-progress",p);customElements.define("o-arc",g);customElements.define("o-text",b);window.Orbit=A;})();
69
+ `;var A=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(y.content.cloneNode(!0))}connectedCallback(){this.update(),this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(r=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let{shape:t,realRadius:r,gap:s,flip:e}=this.getAttributes(),o=this.shadowRoot.getElementById("orbitPath"),a=this.shadowRoot.querySelector("defs"),h=this.shadowRoot.querySelector("text"),i=this.shadowRoot.querySelector("textPath");t==="circle"&&o.setAttribute("stroke-linecap","round"),t!=="none"&&t!=="circle"&&CSS.supports("fill","context-stroke")&&(a.innerHTML="",a.appendChild(this.createMarker("head","end")),a.appendChild(this.createMarker("tail","start")),o.setAttribute("marker-end","url(#head)"),o.setAttribute("marker-start","url(#tail)"));let{length:c,fontSize:l,textAnchor:n,fitRange:u}=this.getTextAttributes(),p=this.calculateAngle(),{d}=this.calculateArcParameters(p,r,s,e);o.setAttribute("d",d),n==="start"?(i.setAttribute("startOffset","0%"),i.setAttribute("text-anchor","start")):n==="middle"?(i.setAttribute("startOffset","50%"),i.setAttribute("text-anchor","middle")):n==="end"&&(i.setAttribute("startOffset","100%"),i.setAttribute("text-anchor","end")),u&&i.parentElement.setAttribute("textLength",o.getTotalLength()),h.style.fontSize=`calc(${l} * (100 / (${c}) * (12 / var(--o-orbit-number) ))`,i.textContent=this.textContent}getTextAttributes(){let{length:t,fontSize:r,textAnchor:s,fitRange:e}=this.getAttributes();return{length:t,fontSize:r,textAnchor:s,fitRange:e}}getAttributes(){let t=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"))||.001,s=this.getAttribute("shape")||"none",e=this.hasAttribute("flip")||this.classList.contains("flip"),o=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,a=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),h=this.getAttribute("text-anchor")||"middle",i=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),c=parseFloat(this.getAttribute("value")),l=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),n,u;if(c){u=this.getProgressAngle(l,c);let v=this.previousElementSibling,f=v?parseFloat(getComputedStyle(v).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",f+u),f>=0&&e&&this.style.setProperty("--o-angle-composite",parseFloat(f+u)+"deg"),f>0&&!e&&this.style.setProperty("--o-angle-composite",parseFloat(f)+"deg")}else n=getComputedStyle(this).getPropertyValue("--o-angle"),u=k(n);let p=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),d=p/2*100/t/2,b=d;this.classList.contains("outer-orbit")&&(b=d*2),this.classList.contains("quarter-outer-orbit")&&(b=d*1.75),this.classList.contains("inner-orbit")&&(b=0),this.classList.contains("quarter-inner-orbit")&&(b=d*.75);let M=50+b-d;return{orbitRadius:t,strokeWidth:p,realRadius:M,gap:r,arcAngle:u,shape:s,length:a,fontSize:i,flip:e,fitRange:o,textAnchor:h}}calculateAngle(){let{arcAngle:t,gap:r,flip:s}=this.getAttributes();return t}getProgressAngle(t,r){let s=r,e=parseFloat(this.getAttribute("max"))||100;return s/e*t}calculateArcParameters(t,r,s,e){let o=r/1,a=r/1,h,i,c,l,n,u,p=s*.5;return e?(h=50+o*Math.cos((-90-p)*(Math.PI/180)),i=50+a*Math.sin((-90-p)*(Math.PI/180)),c=50+o*Math.cos((270-t+p)*Math.PI/180),l=50+a*Math.sin((270-t+p)*Math.PI/180),n=t<=180?0:1,u=`M ${h},${i} A ${o},${a} 0 ${n} 0 ${c},${l}`):(h=50+o*Math.cos((-90+p)*(Math.PI/180)),i=50+a*Math.sin((-90+p)*(Math.PI/180)),c=50+o*Math.cos((t-90-p)*Math.PI/180),l=50+a*Math.sin((t-90-p)*Math.PI/180),n=t<=180?0:1,u=`M ${h},${i} A ${o},${a} 0 ${n} 1 ${c},${l}`),{d:u}}createMarker(t,r="end"){let{shape:s}=this.getAttributes(),e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id",t),e.setAttribute("viewBox","0 0 10 10"),r==="start"&&s!=="circle"?e.setAttribute("refX","2"):r==="start"&&s==="circle"?e.setAttribute("refX","5"):e.setAttribute("refX","0.1"),e.setAttribute("refY","5"),e.setAttribute("markerWidth","1"),e.setAttribute("markerHeight","1"),e.setAttribute("orient","auto"),e.setAttribute("markerUnits","strokeWidth"),e.setAttribute("fill","context-stroke");let o=document.createElementNS("http://www.w3.org/2000/svg","path"),a={arrow:{head:"M 0 0 L 2 5 L 0 10 z",tail:"M 2 0 L 0 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},slash:{head:"M 0 0 L 0 0 L 1 5 L 2 10 L 0 10 L 0 5 z",tail:"M 2 0 L 0 0 L 1 5 L 2 10 L 2 10 L 2 5 z"},backslash:{head:"M 0 0 L 2 0 L 1 5 L 0 10 L 0 10 L 0 5 z",tail:"M 2 0 L 2 0 L 1 5 L 0 10 L 2 10 L 2 5 z"},circle:{head:"M 0 0 C 7 0 7 10 0 10 z",tail:"M 6 0 C -1 0 -1 10 6 10 z"},zigzag:{head:"M 1 0 L 0 0 L 0 5 L 0 10 L 1 10 L 2 7 L 1 5 L 2 3 z",tail:"M 0 0 L 2 0 L 2 5 L 2 10 L 0 10 L 1 7 L 0 5 L 1 3 z"}};return r==="end"?o.setAttribute("d",a[s].head):o.setAttribute("d",a[s].tail),e.appendChild(o),e}};function k(g){let t=g.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(t){let r=parseFloat(t[1]),s=parseInt(t[2])-parseInt(t[3]);if(!isNaN(r)&&!isNaN(s)&&s!==0)return r/s}}var m={};m={resize:g=>{let t=document.querySelector(g);if(!t){console.error(`Not found: ${g}`);return}new ResizeObserver(s=>{for(let e of s){let{width:o}=e.contentRect,a=t.querySelectorAll(".gravity-spot");a?a.forEach(h=>{let i=getComputedStyle(h).getPropertyValue("--o-force"),c=o/500;h.style.setProperty("--o-force-ratio",`${c}`)}):console.error("No gravity-spot found")}}).observe(t)}};customElements.define("o-progress",L);customElements.define("o-arc",A);window.Orbit=m;})();
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@zumer/orbit",
3
- "version": "0.5.0",
3
+ "version": "1.0.0",
4
4
  "description": "Orbit is a CSS framework for radial interfaces",
5
5
  "main": "./dist/orbit.js",
6
6
  "scripts": {
7
- "build": "npx @zumerbox/build -n orbit -j src/orbit.js -s src/orbit.scss && npm pack",
7
+ "compile": "npx @zumerbox/build -n orbit -j src/orbit.js -s src/orbit.scss",
8
+ "build": "npm run compile && npm pack",
8
9
  "bump": "npx @zumerbox/bump && npx @zumerbox/changelog",
9
10
  "prebuild": "git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
10
11
  },