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 8cbf61c commit 4f0081d
Show file tree
Hide file tree
Showing 13 changed files with 226 additions and 145 deletions.
67 changes: 49 additions & 18 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.

156 changes: 78 additions & 78 deletions examples/analog-watch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,17 @@
<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="spoke outer-orbit grow-4x angle-76"></div>
<div class="spoke 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 class="spoke" style="background-color: red;"></div>
<div class="spoke"></div>
<div class="spoke"></div>
</div>
<div class="orbit-7 ">
<o-text >Orbit ffff f f fs sf curved text!</o-text>
<o-label >Orbit ffff f f fs sf curved text!</o-label>

</div>
<div class="orbit-8">
Expand All @@ -66,66 +66,66 @@
</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 class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
<div class="spoke inner-orbit reduce-50"></div>
</div>
<div class="orbit-5 ">
<div class="satellite">
Expand Down Expand Up @@ -176,38 +176,38 @@
<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 class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></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="segment" 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="segment">
<div class="capsule stable">
bien
</div>
</div>
<div class="vector is-polygon"> <div class="capsule stable">
<div class="segment"> <div class="capsule stable">
hghg flip
</div></div>
<div class="vector is-polygon">
<div class="segment">
<div class="capsule stable">
todo jamon turn-left
</div>
</div>
<div class="vector is-polygon">
<div class="segment">
<div class=" capsule stable">
1chu turn-right
</div>
</div>
<div class="vector is-polygon">
<div class="segment">
<div class="capsule stable">
chauu flip
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/orbit.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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'
import { OrbitLabel } from './web-components/orbit-label.js'

customElements.define('o-progress', OrbitProgress)
customElements.define('o-sector', OrbitSector)
customElements.define('o-text', OrbitText)
customElements.define('o-label', OrbitLabel)
8 changes: 5 additions & 3 deletions src/orbit.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
@import './scss/_orbital-zone.scss';
@import './scss/_orbit-class.scss';
@import './scss/_satellite.scss';
@import './scss/_vector.scss';
@import './scss/_spoke.scss';
@import './scss/_segment.scss';
@import './scss/_sector.scss';
@import './scss/_curved-text.scss';
@import './scss/_label.scss';
@import './scss/_progress.scss';
@import './scss/_radial-layout.scss';
@import './scss/_utilities.scss';
Expand All @@ -25,4 +26,5 @@
@import './scss/_satellite_theme.scss';
@import './scss/_sector_theme.scss';
@import './scss/_progress_theme.scss';
@import './scss/_vector_theme.scss';
@import './scss/_spoke_theme.scss';
@import './scss/_segment_theme.scss';
12 changes: 6 additions & 6 deletions src/scss/_curved-text.scss → src/scss/_label.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@use './variables' as *;
/*!
## <o-text>
## <o-label>
See o-text docs in web-component file.
See o-label docs in web-component file.
*/
o-text {
o-label {
--o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
container-name: otext;
display: flex;
Expand All @@ -20,15 +20,15 @@ o-text {
transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
}

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

o-text svg text {
o-label svg text {
color: rgb(110, 110, 110);
font-size: 8px;
font-weight: 100;
Expand Down
4 changes: 2 additions & 2 deletions src/scss/_orbit-class.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ Please see **Radial Layout section**.
* 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
* 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
Expand Down
12 changes: 6 additions & 6 deletions src/scss/_radial-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,23 @@ There are some modifiers to adjust orbit child distribution:
}
}

/* Satellites, sectors, text and vectors layout */
/* Satellites, sectors, label, segment, and spokes layout */
@for $i from 1 through $max-orbiters {
:nth-child(#{$i} of .vector.is-polygon){
:nth-child(#{$i} of .segment){
--o-orbit-child-number: #{$i - 2}; // Uses - 1 to start from 0 deg.
}
}

@for $i from 1 through $max-orbiters {
:nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-sector), :nth-child(#{$i} of .vector) ,:nth-child(#{$i} of o-text) {
:nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-sector), :nth-child(#{$i} of .spoke) ,:nth-child(#{$i} of o-label) {
--o-orbit-child-number: #{$i - 1}; // Uses - 1 to start from 0 deg.
}
}

@for $i from 1 through $max-orbiters {
.orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)),
[class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector),
> :nth-child(#{$i} of o-text)) {
.orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke)),
[class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .segment),
> :nth-child(#{$i} of o-label)) {
--o-angle: calc(var(--o-range) / #{$i});
}
}
55 changes: 55 additions & 0 deletions src/scss/_segment.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/*!
## .spoke
This class renders a perpendicular segment along an orbit. By default there are 24 spokes per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`.
### Customization
It has some special classes and css variables to customize it:
- Class utility `.range-*`: Default '360deg'
- Class utility `.from-*`: Default '0deg'
- Class utility `.grow-*x`: To increase size according number of orbits. Default 1.
- Class utility `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1.
- Class utility `.inner-orbit`: To place `.spoke` just below its orbit
- Class utility `.outer-orbit`: To place `.spoke` just above its orbit
- CSS styles. User can customize `.spoke` by adding CSS properties to it.
### Usage
```html
<div class="orbit">
<div class="spoke"><div>
<div class="spoke x5"><div> <!-- 50% of orbit radius -->
<div class="spoke x01"><div> <!-- 1% of orbit radius -->
<div class="spoke"><div>
</div>
```
**Important:** `.spoke` can only be placed into a parent `.orbit` or `.orbit-*`
*/

.segment {
container-name: segment;
--o-angle-composite: (var(--o-angle) * var(--o-orbit-child-number) var(--o-offset, + 270deg)) * var(--o-direction, 1);
--o-y: calc(var(--o-radius) * sin(90deg - var(--o-angle) / 2));
--o-transform: rotate( calc(var(--o-from) + var(--o-angle-composite)))
translate(0, var(--o-y));
width: calc(var(--o-radius) * cos(90deg - var(--o-angle) / 2) * 2);
position: absolute;
padding: 0;
transform: var(--o-transform);
height: 1px; /*use vars latter */
pointer-events: none;
border: none;
background: rgb(0, 0, 0);
}

.segment.outer-orbit{
--o-y: calc(var(--o-radius));
width: calc(var(--o-radius) * tan(var(--o-angle) / 2) * 2);
/* cateto adyacente = cateto opuesto * tan(angulo) */
}

7 changes: 7 additions & 0 deletions src/scss/_segment_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
.segment theme
*/
.segment {
border: none;
background: rgb(0, 0, 0);
}
Loading

0 comments on commit 4f0081d

Please sign in to comment.