update

zumerlab · Jul 20, 2024 · a3a424b · a3a424b
1 parent c477381
commit a3a424b
Show file tree

Hide file tree

Showing 14 changed files with 200 additions and 133 deletions.
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/examples/analog-watch.html b/examples/analog-watch.html
@@ -41,7 +41,7 @@
   <body>
     <main>
       <section id="one">
-        <div class="orbital-zone"  >
+        <div class="orbit-zone"  >
           <div class="orbit-0">
               <div class="spoke quarter-outer-orbit grow-4x angle-76">
                <img src="../assets/arrow.png" alt="">
@@ -165,7 +165,7 @@
           </div>
       </section>
       <section id="two">
-        <div class="orbital-zone center-left">
+        <div class="orbit-zone center-left">
           <div class="orbit-0">
               <div class="satellite reduce-70 at-center"></div> 
           </div>
@@ -219,12 +219,12 @@
             <div class="satellite"></div>
             <div class="satellite"></div>
             <div class="satellite">hola
-              <div class="orbital-zone">
+              <div class="orbit-zone">
                 <div class="orbit-1">
                   <div class="satellite"></div>
                   <div class="satellite"></div>
                   <div class="satellite">
-                    <div class="orbital-zone">
+                    <div class="orbit-zone">
                     <div class="orbit-1">
                       <div class="satellite inner-orbit reduce-50"></div>
                       <div class="satellite reduce-50"></div>
@@ -249,10 +249,14 @@
 
 
     <script>
+      let one = document.querySelector('#one')
+     // one.style.opacity = 0
     // Function to run when the DOM content is loaded
     const initialize = () => {
     // Call the function with the desired parent element selector
+
       Orbit.resize("#one");
+      // one.style.opacity = 1
     }
     // Wait for the DOMContentLoaded event before initializing
     document.addEventListener('DOMContentLoaded', initialize);

diff --git a/src/js/orbit-label.js b/src/js/orbit-label.js
@@ -86,13 +86,13 @@ export class OrbitLabel extends HTMLElement {
       'http://www.w3.org/2000/svg',
       'path'
     )
-    const { strokeWidth,realRadius,sectorColor, gap } = this.getAttributes()
+    const { strokeWidth,realRadius, gap,labelBgColor} = this.getAttributes()
     const angle = this.calculateAngle()
     const { d } = this.calculateArcParameters(angle, realRadius, gap)
     path.setAttribute('id', pathId)
     path.setAttribute('d', d)
     path.setAttribute('fill', 'none')
-    path.setAttribute('stroke', 'none')
+    path.setAttribute('stroke', labelBgColor)
     path.setAttribute('stroke-width', strokeWidth)
     path.setAttribute('vector-effect', 'non-scaling-stroke')
 
@@ -106,8 +106,9 @@ createTextPath(pathId) {
       'textPath'
   );
 
-  //text.setAttribute('x', '25'); // Adjust as needed
+  const { labelColor} = this.getAttributes()
   textPath.setAttribute('href', `#${pathId}`);
+  textPath.setAttribute('color', `#${labelColor}`);
   textPath.setAttribute('alignment-baseline', 'middle');
   textPath.textContent = this.textContent; // Set the text content here
 
@@ -133,7 +134,9 @@ createTextPath(pathId) {
     const gap = parseFloat(
       getComputedStyle(this).getPropertyValue('--o-gap') || 0.001
     )
-    const sectorColor = this.getAttribute('sector-color') || '#00ff00'
+    const labelColor = this.getAttribute('label-color') || 'black'
+
+    const labelBgColor = this.getAttribute('bg-color') || 'none'
 
     const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle')
     const strokeWidth = parseFloat(
@@ -149,21 +152,22 @@ createTextPath(pathId) {
       innerOuter = 0
     }
     const realRadius = 50 + innerOuter - strokeWithPercentage
-    const sectorAngle = calcularExpresionCSS(rawAngle)
+    const labelAngle = calcularExpresionCSS(rawAngle)
 
     return {
       orbitRadius,
       strokeWidth,
       realRadius,
-      sectorColor,
+      labelColor,
+      labelBgColor,
       gap,
-      sectorAngle
+      labelAngle
     }
   }
 
   calculateAngle() {
-    const { sectorAngle, gap } = this.getAttributes()
-    return sectorAngle - gap
+    const { labelAngle, gap } = this.getAttributes()
+    return labelAngle - gap
   }
 
   calculateArcParameters(angle, realRadius, gap) {

diff --git a/src/orbit.scss b/src/orbit.scss
@@ -2,7 +2,7 @@
     ORBIT CORE
 ==================*/
 @import './scss/_settings.scss';
-@import './scss/_orbital-zone.scss';
+@import './scss/_orbit-zone.scss';
 @import './scss/_orbit-class.scss';
 @import './scss/_satellite.scss';
 @import './scss/_spoke.scss';
@@ -11,6 +11,7 @@
 @import './scss/_label.scss';
 @import './scss/_progress.scss';
 @import './scss/_radial-layout.scss';
+@import './scss/_capsule.scss';
 @import './scss/_utilities.scss';
 
 /*================
@@ -21,7 +22,7 @@
 /*=================
     ORBIT THEME
 ===================*/
-@import './scss/_orbital-zone_theme.scss';
+@import './scss/_orbit-zone_theme.scss';
 @import './scss/_orbit-class_theme.scss';
 @import './scss/_satellite_theme.scss';
 @import './scss/_sector_theme.scss';

diff --git a/src/scss/_capsule.scss b/src/scss/_capsule.scss
@@ -0,0 +1,37 @@
+@use './variables' as *;
+/*!
+## .capsule
+
+Capsule is a class to put content. It can be put into satellites and segments.
+There are some utilties to modify capsule orientation content.
+
+### Usage
+
+```html
+<div class="satellite">
+  <div class="capsule stable">
+    Some text here.
+  </div>
+</div> 
+```
+
+#### Utilities
+
+- `stable`: to mantain content always horizontal. 
+- `turn-left`: to turn content 90deg left
+- `turn-right`: to turn content 90deg right
+- `flip`: to turn content upside-down.
+
+*/
+
+.capsule  {
+  --o-angle-composite: 0deg;
+  display: flex;
+  width: inherit;
+  height: auto;
+  padding: 5px;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  rotate: calc(var(--o-angle-composite));
+}
diff --git a/src/scss/_label_theme.scss b/src/scss/_label_theme.scss
@@ -9,6 +9,5 @@ See o-label docs in web-component file.
 o-label svg text  {
   color: rgb(110, 110, 110);
   font-size: 4px;
-  font-weight: 100;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: inherit;
 }
diff --git a/src/scss/_orbit-class.scss b/src/scss/_orbit-class.scss
@@ -2,15 +2,15 @@
 /*! 
 ## .orbit or .orbit-*
 
-This class renders a circumsference around a .orbital-zone center and allows other elements to be 
+This class renders a circumsference around a .orbit-zone center and allows other elements to be 
 distributed along width. By default there are 12 orbits. The number can be modify with `$max-orbits` var at `_variables.scss`.
 
-**Important:** .orbit or .orbit-* is a direct child element of .orbital-zone.
+**Important:** .orbit or .orbit-* is a direct child element of .orbit-zone.
 
 ### Usage: 
 
 ```html
-<div class="orbital-zone">
+<div class="orbit-zone">
   <div class="orbit"></div>
   <div class="orbit"></div>
 </div>
@@ -34,10 +34,10 @@ distributed along width. By default there are 12 orbits. The number can be modif
 
 - This renders nested orbits around a satellite
   ```html
-  <div class="orbital-zone">
+  <div class="orbit-zone">
     <div class="orbit">
       <div class="satellite">
-        <div class="orbital-zone">
+        <div class="orbit-zone">
           <div class="orbit"></div>
           <div class="orbit"></div>
         </div>
@@ -65,10 +65,10 @@ web component that will be hide when orbit is an ellipse. Values range from 0 to
 **Important**: Ckecking `--o-ellipse-x` and `--o-ellipse-y` doesn't work currently on Firefox and Safari.
 
 ```html
-<div class="orbital-zone" style="--o-ellipse-x: 0.6">
+<div class="orbit-zone" style="--o-ellipse-x: 0.6">
   <div class="orbit">
     <div class="satellite">
-      <div class="orbital-zone">
+      <div class="orbit-zone">
         <div class="orbit"></div>
         <div class="orbit"></div>
       </div>
@@ -87,24 +87,27 @@ Please see **Radial Layout section**.
 * Add .ccv for all orbit child ok
 * correjir sector y progress ok
 * add content radial aligment y 
-  + hacerlo rsponsive llegado el caso al espacio.. ver esto no esta bien del todo
+  * hacerlo rsponsive llegado el caso al espacio.. ver esto no esta bien del todo
 = add slot content para w-c NO HACE X AHORA XQ SE CUBRE CON SATELLITE O TEXT
 * CORREJIR ALINEACION TODO DESDE 0 A LAS 12 OK
 * probar sacar cambio de tamano en nested xq confunde mucho. ok
 * arreglar lenght.... para que sea responsive.. OK con una funcion
 * UN COMPOENENT DE TEXTO CURVO WIP.  text size and color from class style. 
-- eliminar sttributos innecsarios hacerlosmasstndars para progres y sector tb
+* eliminar sttributos innecsarios hacerlosmasstndars para progres y sector tb
 * bug no gap when one sector/text. 
 * bug alineacion gaps ... 180 on mas de un sector/ o-label
 * separar vector de constellation... o vector to spoke / vector.is-poligon to segment
 * ornit-nth cambiar nombre
 * resize orbit as optional function.
 * trabajar con spoke as container... tiene que alinearse siempre a la mitad asi, si tiene una imagen dentro queda
 alineada tambien.
+- add rules to support chek
+- create basic and alternative theme
+- volver a chequear documentacion
 
 
 */
-.orbit, [class*='orbit-'] {
+.orbit, [class*='orbit-']:not(.orbit-zone) {
   container-name: orbit;
   --o-diameter: calc(var(--o-orbit-number) * var(--o-lenght) / #{$max-orbits});
   --o-radius: calc(var(--o-diameter) / 2);

diff --git a/src/scss/_orbit-zone.scss b/src/scss/_orbit-zone.scss
@@ -0,0 +1,43 @@
+/*! 
+## .orbit-zone
+
+orbit zone is a functional class that groups `.orbit` classes. It serves as a container with a length defined once by `--o-length` when the Orbit app is initialized. When the orbit zone is nested within a `.satellite`, its length will depend on the `.satellite`'s `.orbit` diameter.
+
+**Important:** The `orbit-zone` class can only be nested into a `.satellite`.
+
+### Usage
+
+```html
+<div class="orbit-zone">
+  <div class="orbit"></div>
+  <div class="orbit">
+    <div class="satellite">
+      <div class="orbit-zone"> <!-- Nested -->
+        <div class="orbit"></div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+
+*/
+.orbit-zone {
+  container-name: orbitzone;
+  --o-lenght: 500px;
+  width: var(--o-lenght);
+  aspect-ratio: 1;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* To avoid event conflict with other elements */
+  border: none; /* Reset theme to default */
+}
+
+.satellite > .orbit-zone {
+   /* Disabled nested adjusment size. When nested orbit-zone takes its lenght from the diameter of satellite's orbit 
+  --o-lenght: var(--o-diameter);
+  width: var(--o-lenght);
+  height: auto;*/
+}
diff --git a/src/scss/_orbital-zone_theme.scss → src/scss/_orbit-zone_theme.scss b/src/scss/_orbital-zone_theme.scss → src/scss/_orbit-zone_theme.scss
@@ -5,4 +5,5 @@
     Your theme setting here
   }
   
+  
 */
diff --git a/src/scss/_orbital-zone.scss b/src/scss/_orbital-zone.scss
diff --git a/src/scss/_radial-layout.scss b/src/scss/_radial-layout.scss
@@ -16,7 +16,7 @@ Orbit radial layout is the core of Orbit library, offering a flexible, clean and
 
 The mechanism is straightforward:
 
-- `--o-orbit-number` gives a radius that informs where each `orbit` is placed, according to both the `.orbital-zone` length and the maximum number of orbits. For example, with an `.orbital-zone` length of 500px and a maximum of 12 orbits, `orbit-4` will have 166.66 pixels of radius.
+- `--o-orbit-number` gives a radius that informs where each `orbit` is placed, according to both the `.orbit-zone` length and the maximum number of orbits. For example, with an `.orbit-zone` length of 500px and a maximum of 12 orbits, `orbit-4` will have 166.66 pixels of radius.
 
 - According to child number in an orbit, `--o-angle` is calculated (if one orbit has 3 satellites, `--o-angle` is 120deg). Finally, `--o-angle` is multiplied by `--o-orbit-child-numbers`. For example, satellite one will have 120deg, satellite two 240deg, and satellite three 360deg, and each satellite will be placed along its orbit at 166.66px.
 
@@ -32,7 +32,7 @@ There are some modifiers to adjust orbit child distribution:
 
 ```html
 <!-- Example usage of Orbit Radial Layout -->
-<div class="orbital-zone">
+<div class="orbit-zone">
     <div class="orbit-3"></div>
     <div class="orbit-4">
         <div class="satellite"></div>
@@ -97,7 +97,7 @@ There are some modifiers to adjust orbit child distribution:
 
 @for $i from 1 through $max-orbiters {
     .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)), 
-    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)) {
+    [class*='orbit-']:not(.orbit-zone):has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)) {
     --o-angle: calc(var(--o-range) / #{$i});
     }
 }