Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinchox5
tinchox5 committed Jul 20, 2024
1 parent a95bcf8 commit 8cbf61c
Show file tree
Hide file tree
Showing 18 changed files with 696 additions and 86 deletions.
55 changes: 41 additions & 14 deletions assets/css/orbit.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/orbit.min.css.map
View file

Large diffs are not rendered by default.

272 changes: 263 additions & 9 deletions examples/analog-watch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,273 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link

<!-- Centered viewport -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
/>
<link
rel="stylesheet"
href="../assets/css/orbit.min.css"
type="text/css"
defer
/>
<link
rel="stylesheet"
href="../assets/css/orbit-theme.min.css"
type="text/css"
defer
/>
<title>Orbit - container</title>
<title>Orbit - watch</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
[class*='orbit-'] {
border: 1px dashed yellowgreen
}

section {
height: 300px;
border: 1px solid gray;
display: flex;
align-items: center;
justify-content: center;
}
.is-polygon {
text-align: center;

}

</style>

</head>
<body></body>
<body>
<main>
<section id="one">
<div class="orbital-zone" >
<div class="orbit-0">
<div class="vector outer-orbit grow-4x angle-76"></div>
<div class="vector outer-orbit grow-2x"></div>
<div class="satellite reduce-70 at-center"></div>
</div>
<div class="orbit-3">
<div class="vector" style="background-color: red;"></div>
<div class="vector"></div>
<div class="vector"></div>
</div>
<div class="orbit-7 ">
<o-text >Orbit ffff f f fs sf curved text!</o-text>

</div>
<div class="orbit-8">
<o-sector sector-color="red"></o-sector>
<o-sector></o-sector>
<o-sector></o-sector>
<o-sector></o-sector>
<o-sector></o-sector>
</div>

<div class="orbit-5 ">
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
<div class="vector inner-orbit reduce-50"></div>
</div>
<div class="orbit-5 ">
<div class="satellite">
<div class=" capsule stable">
1
</div>
</div>
<div class="satellite">
<div class=" capsule flip">
2
</div>
</div>
<div class="satellite">
<div class=" capsule turn-left">
3
</div>
</div>
<div class="satellite">
<div class=" capsule turn-right">
4
</div>
</div>
<div class="satellite">
<div class=" capsule stable">
5
</div>
</div>
<div class="satellite">6</div>
<div class="satellite">7</div>
<div class="satellite">8</div>
<div class="satellite">9</div>
<div class="satellite">10</div>
<div class="satellite">11</div>
<div class="satellite">12</div>
</div>
</div>
</section>
<section id="two">
<div class="orbital-zone center-left">
<div class="orbit-0">
<div class="satellite reduce-70 at-center"></div>
</div>
<div class="orbit-3">
<o-sector class="gap-2"></o-sector>

</div>
<div class="orbit-4">
<o-progress value="35" max="100" bg-color="gray" class="rounded">progress</o-progress>
</div>
<div class="orbit-5">
<div class="vector"></div>
<div class="vector"></div>
<div class="vector"></div>
<div class="vector"></div>
<div class="vector"></div>
<div class="vector"></div>
</div>
<div class="orbit-6">
<div class="vector is-polygon" style="background-color: rgba(137, 43, 226, 0); border: 3px double green;">
<div class="capsule stable">
hola como estas stable
</div>
</div>
<div class="vector is-polygon">
<div class="capsule stable">
bien
</div>
</div>
<div class="vector is-polygon"> <div class="capsule stable">
hghg flip
</div></div>
<div class="vector is-polygon">
<div class="capsule stable">
todo jamon turn-left
</div>
</div>
<div class="vector is-polygon">
<div class=" capsule stable">
1chu turn-right
</div>
</div>
<div class="vector is-polygon">
<div class="capsule stable">
chauu flip
</div>
</div>
</div>
<div class="orbit-6">
<div class="satellite">1</div>
<div class="satellite"></div>
<div class="satellite"></div>
<div class="satellite">hola
<div class="orbital-zone">
<div class="orbit-1">
<div class="satellite"></div>
<div class="satellite"></div>
<div class="satellite">
<div class="orbital-zone">
<div class="orbit-1">
<div class="satellite inner-orbit reduce-50"></div>
<div class="satellite reduce-50"></div>
<div class="satellite reduce-50"></div>
<div class="satellite reduce-50"></div>
</div>
</div></div>
<div class="satellite"></div>
</div>
</div>
</div>
<div class="satellite"></div>
<div class="satellite"></div>
</div>
<div class="orbit-7">
<o-sector class="gap-2"></o-sector>
</div>

</div>
</section>
</main>

<script type="module" src="../../src/orbit.js"></script>
<script>
function observeParentElement(parentElementSelector) {
const parentElement = document.querySelector(parentElementSelector);

if (!parentElement) {
console.error(`No se encontró ningún elemento con el selector ${parentElementSelector}`);
return;
}
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { width } = entry.contentRect;
const childElement = parentElement.querySelector('.orbital-zone');
if (childElement) {
childElement.style.setProperty('--o-lenght', `${width}px`);
} else {
console.error('No se encontró ningún elemento hijo con la clase .child-element');
}
}
});
resizeObserver.observe(parentElement);
}
//observeParentElement('#one');
//observeParentElement('#two');
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions src/orbit.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { OrbitProgress } from './web-components/orbit-progress.js'
import { OrbitSector } from './web-components/orbit-sector.js'
import { OrbitText } from './web-components/orbit-curved-text.js'

customElements.define('o-progress', OrbitProgress)
customElements.define('o-sector', OrbitSector)
customElements.define('o-text', OrbitText)
1 change: 1 addition & 0 deletions src/orbit.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import './scss/_satellite.scss';
@import './scss/_vector.scss';
@import './scss/_sector.scss';
@import './scss/_curved-text.scss';
@import './scss/_progress.scss';
@import './scss/_radial-layout.scss';
@import './scss/_utilities.scss';
Expand Down
36 changes: 36 additions & 0 deletions src/scss/_curved-text.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@use './variables' as *;
/*!
## <o-text>
See o-text docs in web-component file.
*/
o-text {
--o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
container-name: otext;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: absolute;
pointer-events: none;
width: 100%;
r: var(--o-radius);
stroke-width: calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
}

o-text svg {
pointer-events: none;
overflow: visible!important;
}
o-text svg > * {
pointer-events: stroke;
}

o-text svg text {
color: rgb(110, 110, 110);
font-size: 8px;
font-weight: 100;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
21 changes: 20 additions & 1 deletion src/scss/_orbit-class.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,29 @@ web component that will be hide when orbit is an ellipse. Values range from 0 to
There are some utility classes that are set on orbit element and affect its child radial layout (`.from-*`, `.range-*`).
Please see **Radial Layout section**.
### 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
= 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. falta tema ajuste al path .. con attrib y size
* bug no gap when one sector/text.
* bug alineacion gaps ... 180 on mas de un sector/ text
+ separar vector de constellation... o ray / vector
* ornit-nth cambiar nombre
*/
.orbit, [class*='orbit-'] {
container-name: orbit;
--o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / #{$max-orbits});
--o-diameter: calc(var(--o-orbit-number) * var(--o-lenght) / #{$max-orbits});
--o-radius: calc(var(--o-diameter) / 2);
width: calc(var(--o-diameter) / var(--o-ellipse-x));
height: calc(var(--o-diameter) / var(--o-ellipse-y));
Expand Down
4 changes: 2 additions & 2 deletions src/scss/_orbital-zone.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ Orbital zone is a functional class that groups `.orbit` classes. It serves as a
}

.satellite > .orbital-zone {
/* When nested orbital-zone takes its lenght from the diameter of satellite's orbit */
/* Disabled nested adjusment size. When nested orbital-zone takes its lenght from the diameter of satellite's orbit
--o-lenght: var(--o-diameter);
width: var(--o-lenght);
height: auto;
height: auto;*/
}
4 changes: 2 additions & 2 deletions src/scss/_progress.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ See o-progress docs in web-component file.
o-progress {
container-name: oprogress;
r: var(--o-radius);
stroke-width: calc(var(--o-radius) / var(--orbit-nth) * var(--o-size-ratio, 1));
stroke-width: calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
transform: rotate(var(--o-from));
position: absolute;
display: flex;
Expand All @@ -24,5 +24,5 @@ o-progress.rounded {

o-progress svg {
pointer-events: none;
overflow: visible;
overflow: visible!important;
}
Loading

0 comments on commit 8cbf61c

Please sign in to comment.