update

zumerlab · Jul 20, 2024 · 15dade5 · 15dade5
1 parent ea5628f
commit 15dade5
Show file tree

Hide file tree

Showing 23 changed files with 619 additions and 447 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/generic.html b/examples/generic.html
@@ -1,162 +1,25 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html>
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="../assets/css/orbit.min.css"
-      type="text/css"
-      defer
-    />
-    <title>Orbit</title>
-    <style>
-      body {
-        font-family: 'Lucida Sans', Verdana, sans-serif;
-        background-color: darkslategray;
-      }
 
-      dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.352);
-      }
-      .container {
-        margin-top: 150px;
-      }
-    </style>
   </head>
+
   <body>
-    <div class="container">
-      <div class="core">
-        <div class="orbiter sm" style="transform: translate(-50%, -50%)"></div>
-      </div>
+    <div id="container"></div>
+<script type="module">
+  import { createPlayground } from 'https://unpkg.com/livecodes@latest';
 
-      <div class="orbit">
-        <div class="orbit limit-180">
-          <div class="sector"></div>
-          <div class="sector"></div>
-          <div class="sector"></div>
-          <div class="sector"></div>
-        </div>
-        <div class="orbit limit-180">
-          <div class="orbiter sm lower">w</div>
-          <div class="orbiter sm lower">w</div>
-          <div class="orbiter sm lower">w</div>
-          <button id="dialogb" class="orbiter sm">open dialog</button>
-        </div>
-      </div>
+  const config = {
+  lite: true,
+  tools: {
+      status: "none",
+    },
+    mode: "simple",
+
+};
 
-      <div class="orbit limit-270">
-        <div class="orbiter md">
-          <div class="content">
-            hola <br />
-            45
-          </div>
-          <div class="content" style="overflow: visible">
-            <div class="label offset-45" style="position: absolute">
-              <div class="content">
-                Tactic sat intel <br />
-                45
-              </div>
-            </div>
-          </div>
-
-          <div class="orbit">
-            <div class="sector"></div>
-            <div class="sector"></div>
-            <div class="sector"></div>
-            <div class="sector"></div>
-            <div class="sector"></div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-45">
-            <div class="content">
-              Tactic sat intel <br />
-              45
-            </div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-90">
-            <div class="content">
-              Tactic sat intel <br />
-              90
-            </div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="content" style="overflow: visible">
-            <div class="label offset-135">
-              <div class="content">
-                Tactic sat intel <br />
-                135
-              </div>
-            </div>
-          </div>
-
-          <div class="orbit size-1">
-            <div class="orbiter sm" style="background-color: burlywood">a</div>
-            <div class="orbiter sm" style="background-color: burlywood">d</div>
-            <div class="orbiter sm" style="background-color: burlywood"></div>
-            <div class="orbiter sm" style="background-color: burlywood">
-              <div class="label offset-135">
-                <div class="content">
-                  Tactic sat intel <br />
-                  135
-                </div>
-              </div>
-            </div>
-            <div class="orbiter sm" style="background-color: burlywood"></div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-180">
-            <div class="content">
-              Tactic sat intel <br />
-              180
-            </div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-225">
-            <div class="content">
-              Tactic sat intel <br />
-              225
-            </div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-270">
-            <div class="content">
-              Tactic sat intel <br />
-              270
-            </div>
-          </div>
-        </div>
-        <div class="orbiter md">
-          <div class="label offset-315">
-            <div class="content">
-              Tactic sat intel <br />
-              315
-            </div>
-          </div>
-        </div>
-      </div>
-      <dialog id="dialog" class="orb" style="width: 200px; height: 200px">
-        esto modal es
-      </dialog>
-    </div>
+createPlayground('#container', { config });
+</script>
   </body>
-  <script>
-    ;(function () {
-      var updateButton = document.getElementById('dialogb')
-
-      var favDialog = document.getElementById('dialog')
-
-      // Update button opens a modal dialog
-      updateButton.addEventListener('click', function () {
-        favDialog.showModal()
-      })
-    })()
-  </script>
-</html>
+</html>
diff --git a/examples/watch.html b/examples/watch.html
@@ -573,18 +573,30 @@
         </div>
       </div>
     </div>
+    <div class="orbit-5">
+
+      <o-sector shape="circle" class="gap-9"></o-sector>
+      <o-sector shape="zigzag" class="gap-9"></o-sector>
+    </div>
+    <div class="orbit-6">
+      <o-progress value="45" max="123" shape="circle" bg-color="yellow"></o-progress>
+    </div>
     <!-- big clock -->
     <div class="orbit-0 clock">
-      <div class="spoke outer-orbit hour xh">
-        <img src="../assets/hours.png" width="78">
-      </div>
       <div class="spoke outer-orbit minute xm">
         <img src="../assets/minutes.png" width="132">
       </div>
+      <div class="spoke outer-orbit hour xh">
+        <img src="../assets/hours.png" width="78">
+      </div>
       <div class="satellite at-center center">
       </div>
     </div>
   </div>
+  <!-- <script type="module" defer>
+    import {Orbit} from '../src/js/orbit-resize.js'
+    Orbit.resize('body')
+  </script> -->
   <script>
     function analogWatch() {
       // Get the current time

diff --git a/notes.md b/notes.md
@@ -1,5 +1,4 @@
-OK rows: rings OR orbits
-
+- OK rows: rings OR orbit
 - OK columns: sectors relates to angles. quadrants... cordinal points... > ARCS
 - OK offset angle: importantes para saber desde donde empieza
 - OK arc: importante para estabelcer tamano del arco 90° o 360° x ej. DESAMBIGUAR
@@ -250,3 +249,36 @@ penssar en algo tipo span sectors, orbiters
 //
 //
 //
+
+
+### TODO
+* Fix orbit-0 ok by adding ortbit-nth 0.1  OK
+* Add center position for vector, satellite  OK
+* 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
+= 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
+* 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
+* add gooey
+* textLength y space. 
+* el gap en label no anda super duper con texto invertido
+* agregar quarters a secto, label, progress
+* dar vuelta texto camniando 1 por 0.. meterlo en function
+* ver orbit reduce que no anda del todo bien , tmpoco en label
+* a los sectors y progress ver de meter otras linecaps tipo >
+- ver algop ara labels... tipo https://www.benchling.com/
+* reset styles to avoid conflcits
+- create basic theme
+- volver a chequear documentacion
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "build": "npx @zumerbox/build",
     "doc:scss": "npx @zumerbox/doc-extractor src/orbit.scss -folder docs-one-scss -scss-imports -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss",
     "doc:scssx": "npx @zumerbox/doc-extractor src/scss -folder docs-scss-mutiple -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss",
-    "doc:js": "npx @zumerbox/doc-extractor src/web-components -folder docs-js-mutiple  -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/web-components"
+    "doc:js": "npx @zumerbox/doc-extractor src/js -folder docs-js-mutiple  -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/web-components"
   },
   "repository": {
     "type": "git",

diff --git a/src/js/orbit-label.js b/src/js/orbit-label.js
@@ -13,17 +13,20 @@ function calcularExpresionCSS(cssExpression) {
 /*! 
 ## o-label
 
-`<o-label>` is a standard web-component for rendering a radial slices or pies. 
+`<o-label>` is a standard web-component for rendering curved text. 
 By default there are 24 sector per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`.
 
 It has some special attributes and css variables to customize it:
-  - Attribute `sector-color`: To set a color for sector. Default `orange`
+  - Attribute `label-color`: To set a text color for label. Default `black`
+  - Attribute `bg-color`: To set a background color for label. Default `none`
 
   - Class `.gap-*` applied on `.orbit` or `.orbit-*` or in `<o-label>`: to set gap space. Default '0'
-  - Class utility `.range-*` applied on `.orbit` or `.orbit-*`: Default '360deg'
-  - Class utility `.from-*` applied on `.orbit` or `.orbit-*`: Default '0deg'
-  - Class utility `.inner-orbit`: To place `o-label` just below its orbit
-  - Class utility `.outer-orbit-orbit`: To place `o-label` just above its orbit
+  - utility class `.range-*` applied on `.orbit` or `.orbit-*`: Default '360deg'
+  - utility class `.from-*` applied on `.orbit` or `.orbit-*`: Default '0deg'
+  - utility class `.inner-orbit`: To place `o-label` just below its orbit
+  - utility class `.outer-orbit-orbit`: To place `o-label` just above its orbit
+  - Utility class `.quarter-inner-orbit`: To place `o-sector` a 25% into its orbit.
+  - Utility class `.quarter-outer-orbit`: To place `o-sector` a 25% outer its orbit.
 
   - CSS styles. User can customize `o-label` by adding CSS properties to `o-label path`
   
@@ -35,11 +38,8 @@ It has some special attributes and css variables to customize it:
 ### Usage
 
 ```html
-<div class="orbit range-180"> 
-  <o-label />
-  <o-label class="gap-5" />
-  <o-label class="gap-10" />
-  <o-label class="gap-5" />
+<div class="orbit"> 
+  <o-label>Hello World!</o-label>
 </div>
 ```
 */
@@ -62,8 +62,6 @@ export class OrbitLabel extends HTMLElement {
   //  });
    // textoObserver.observe(this, { childList: true, subtree: true });
 
-
-
   }
   update() {
     const svg = this.createSVGElement();
@@ -79,8 +77,6 @@ export class OrbitLabel extends HTMLElement {
 }
 
 
-
-
   createSVGElement() {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
     svg.setAttribute('viewBox', '0 0 100 100')
@@ -136,9 +132,6 @@ createTextPath(pathId, path) {
     text.setAttribute('textLength', path.getTotalLength());
   }
 
-
-
-
   textPath.textContent = this.textContent; 
 
   text.appendChild(textPath);
@@ -226,5 +219,5 @@ getAttributes() {
         d = `M ${startX},${startY} A ${radiusX},${radiusY} 0 ${largeArcFlag} 1 ${endX},${endY}`;
     }
     return { startX, startY, endX, endY, largeArcFlag, d };
-}
+  }
 }