@zumer/orbit 0.2.8 → 0.3.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 +21 -0
- package/README.md +42 -34
- package/dist/orbit.css +1814 -34
- package/dist/orbit.js +2 -2
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +3 -3
- package/package.json +3 -3
package/dist/orbit.min.js
CHANGED
|
@@ -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:
|
|
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:i,progressBarColor:a,progressBgColor:n,maxAngle:l,shape:c}=this.getAttributes(),h=this.getProgressAngle(l,r),{d:u}=this.calculateArcParameters(h,s,o,i);t.setAttribute("d",u),t.setAttribute("stroke",r?n:a),t.setAttribute("fill","transparent"),c!=="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),i=this.getAttribute("shape")||"none",a=this.getAttribute("bar-color"),n=this.getAttribute("bgcolor")||"transparent",l=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),c=l/2*100/t/2,h=c;this.classList.contains("outer-orbit")&&(h=c*2),this.classList.contains("quarter-outer-orbit")&&(h=c*1.75),this.classList.contains("inner-orbit")&&(h=0),this.classList.contains("quarter-inner-orbit")&&(h=c*.75);let u=50+h-c;return{orbitRadius:t,ellipseX:e,ellipseY:s,progress:o,progressBarColor:a,progressBgColor:n,strokeWidth:l,realRadius:u,maxAngle:r,shape:i}}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,i=r/s,a=50+o*Math.cos(-Math.PI/2),n=50+i*Math.sin(-Math.PI/2),l=50+o*Math.cos((t-90)*Math.PI/180),c=50+i*Math.sin((t-90)*Math.PI/180),h=t<=180?0:1,u=`M ${a},${n} A ${o},${i} 0 ${h} 1 ${l},${c}`;return{startX:a,startY:n,endX:l,endY:c,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"),i={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",i[e].head):o.setAttribute("d",i[e].tail),s.appendChild(o),s}};var L=document.createElement("template");L.innerHTML=`
|
|
34
34
|
<style>
|
|
35
35
|
:host {
|
|
36
36
|
display: inline-block;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
<defs></defs>
|
|
60
60
|
<path class="slice" vector-effect="non-scaling-stroke" fill="transparent"></path>
|
|
61
61
|
</svg>
|
|
62
|
-
`;var g=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(
|
|
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,sliceColor:i,gap:a}=this.getAttributes(),n=this.calculateAngle(),{d:l}=this.calculateArcParameters(n,o,a);e.setAttribute("d",l),e.setAttribute("stroke",i)}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("slice-color"),o=getComputedStyle(this).getPropertyValue("--o-angle"),i=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),a=i/2*100/t/2,n=a;this.classList.contains("outer-orbit")&&(n=a*2),this.classList.contains("quarter-outer-orbit")&&(n=a*1.75),this.classList.contains("inner-orbit")&&(n=0),this.classList.contains("quarter-inner-orbit")&&(n=a*.75);let l=50+n-a,c=v(o);return{orbitRadius:t,strokeWidth:i,realRadius:l,sliceColor:s,gap:r,sliceAngle:c,shape:e}}calculateAngle(){let{sliceAngle: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),i=50+s*Math.sin(-Math.PI/2),a=50+e*Math.cos((t-90)*Math.PI/180),n=50+s*Math.sin((t-90)*Math.PI/180),l=t<=180?0:1,c=`M ${o},${i} A ${e},${s} 0 ${l} 1 ${a},${n}`;return{startX:o,startY:i,endX:a,endY:n,largeArcFlag:l,d:c}}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"),i={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",i[e].head):o.setAttribute("d",i[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
63
|
<svg viewBox="0 0 100 100" >
|
|
64
64
|
<path id="orbitPath" fill="none" vector-effect="non-scaling-stroke"></path>
|
|
65
65
|
<text>
|
|
@@ -95,4 +95,4 @@
|
|
|
95
95
|
|
|
96
96
|
|
|
97
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:
|
|
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:i}=this.getPathAttributes();t.setAttribute("d",s),t.setAttribute("stroke-width",o),t.setAttribute("stroke-linecap",i);let{length:a,fontSize:n,textAnchor:l,fitRange:c}=this.getTextAttributes();l==="start"?(e.setAttribute("startOffset","0%"),e.setAttribute("text-anchor","start")):l==="middle"?(e.setAttribute("startOffset","50%"),e.setAttribute("text-anchor","middle")):l==="end"&&(e.setAttribute("startOffset","100%"),e.setAttribute("text-anchor","end")),c&&e.parentElement.setAttribute("textLength",t.getTotalLength()),r.style.fontSize=`calc(${n} * (100 / (${a}) * (12 / var(--o-orbit-number) ))`,e.textContent=this.textContent.trim()}getPathAttributes(){let{realRadius:t,gap:r,textBgColor:e,flip:s,lineCap:o,strokeWidth:i}=this.getAttributes(),a=this.calculateAngle(),{d:n}=this.calculateArcParameters(a,t,r,s);return{d:n,strokeWidth:i,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),i=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),a=this.getAttribute("text-anchor")||"middle",n=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),l=getComputedStyle(this).getPropertyValue("--o-angle"),c=parseFloat(getComputedStyle(this).getPropertyValue("stroke-width")||1),h=c/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(l);return{orbitRadius:t,strokeWidth:c,realRadius:m,length:i,fontSize:n,gap:o,textAngle:f,flip:r,textAnchor:a,lineCap:s,fitRange:e}}calculateAngle(){let{textAngle:t,gap:r}=this.getAttributes();return t-r}calculateArcParameters(t,r,e,s){let o=r/1,i=r/1,a,n,l,c,h,u;return s?(a=50-e+o*Math.cos(-Math.PI/2),n=50+i*Math.sin(-Math.PI/2),l=50+o*Math.cos((270-t)*Math.PI/180),c=50+i*Math.sin((270-t)*Math.PI/180),h=t<=180?0:1,u=`M ${a},${n} A ${o},${i} 0 ${h} 0 ${l},${c}`):(a=50+e+o*Math.cos(-Math.PI/2),n=50+i*Math.sin(-Math.PI/2),l=50+o*Math.cos((t-90)*Math.PI/180),c=50+i*Math.sin((t-90)*Math.PI/180),h=t<=180?0:1,u=`M ${a},${n} A ${o},${i} 0 ${h} 1 ${l},${c}`),{startX:a,startY:n,endX:l,endY:c,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,i=t.querySelector(".gravity-spot");i?i.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-slice",g);customElements.define("o-text",b);window.Orbit=A;})();
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zumer/orbit",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "Orbit is a CSS framework for radial interfaces",
|
|
5
5
|
"main": "./dist/orbit.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "npx @zumerbox/build -n orbit -j src/orbit.js -s src/orbit.scss",
|
|
8
8
|
"bump": "npx @zumerbox/bump",
|
|
9
|
-
"postbump": "npx @zumerbox/changelog && git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
|
|
9
|
+
"postbump": "npx @zumerbox/changelog && git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags && npm run build"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
12
|
"README.md",
|