add orbiters programatically

This commit is contained in:
Ray Elliott 2022-07-19 11:13:49 +01:00
parent 9ec3321850
commit cc3c68254d
5 changed files with 42 additions and 193 deletions

View File

@ -1,20 +1,25 @@
import { useSelect } from '@wordpress/data';
import { useSelect, dispatch } from '@wordpress/data';
import {useState, createElement} from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { getSaveElement } from '@wordpress/blocks';
import { getSaveElement, createBlock } from '@wordpress/blocks';
import "./editor.scss";
import Orbital from './orbital.js';
import Orbiter from './orbiter.js';
export default function Edit( { attributes, setAttributes, clientId }) {
const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId));
const [count, setCount] = useState(attributes.primaries.length);
const [count, setCount] = useState(innerBlocks.length);
const onCountChange = (value) => {
if (value > count) {
const orbiter = createBlock('red-block/red-orbiter');
const index = count;
dispatch('core/editor').insertBlock(orbiter, index, clientId);
}
setCount(value);
}
@ -35,7 +40,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
}
return (
<Orbital primary={primary} secondary={secondary}/>
<Orbiter primary={primary} secondary={secondary}/>
)
});
@ -52,7 +57,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
</InspectorControls>
<div {...useBlockProps()}>
<ul className={`orbitals clockwise count-${count}`}>{viewList}</ul>
<ul className={`orbiters clockwise count-${count}`}>{viewList}</ul>
<div className="inner-content">
<div className="image-hover">

View File

@ -1,7 +1,7 @@
export default function Orbital({ primary, secondary }) {
export default function Orbiter({ primary, secondary }) {
return (
<li className="orbital bg bg--red pulse">
<div className="orbital-content content-center anti-clockwise">
<li className="orbiter bg bg--red pulse">
<div className="orbiter-content content-center anti-clockwise">
<div className="feature">
<div className="feature-item primary">{primary}</div>
<div className="feature-item secondary">{secondary}</div>

12
src/orbiter.js Normal file
View File

@ -0,0 +1,12 @@
export default function Orbital({ primary, secondary }) {
return (
<li className="orbital bg bg--red pulse">
<div className="orbital-content content-center anti-clockwise">
<div className="feature">
<div className="feature-item primary">{primary}</div>
<div className="feature-item secondary">{secondary}</div>
</div>
</div>
</li>
);
}

View File

@ -23,11 +23,13 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
* @return {WPElement} Element to render.
*/
export default function save({ attributes }) {
const blockProps = useBlockProps.save();
const blockProps = useBlockProps.save({
className: "pulse",
});
return (
<div {...blockProps}>
<ul className={`orbitals clockwise count-${attributes.primaries.length}`}>
<ul className={`orbiters clockwise count-${attributes.primaries.length}`}>
<InnerBlocks.Content />
</ul>

View File

@ -12,9 +12,7 @@
--radius: 14em;
--duration__rotation: 50s;
--duration__pulse: 1.5s;
--duration__image-hover: 0.3s;
--duration__feature-hover: 0.3s;
position: relative;
width: 80vw;
@ -34,11 +32,11 @@
list-style: none;
}
.orbitals {
--count__orbitals: 4;
.orbiters {
--count__orbiters: 4;
@for $i from 1 through 12 {
&.count-#{$i} {
--count__orbitals: #{$i};
--count__orbiters: #{$i};
}
}
@ -49,10 +47,10 @@
top: 50%;
}
.orbital {
.orbiter {
position: absolute;
width: var(--width__orbital);
height: var(--width__orbital);
width: var(--width__orbiter);
height: var(--width__orbiter);
border-radius: 50%;
left: 50%;
top: 50%;
@ -62,9 +60,9 @@
);
}
.orbital {
.orbiter {
/* --angle must be in radians so multiply by 2 * pi */
--angle: calc(6.2831853036 * var(--index) / var(--count__orbitals));
--angle: calc(6.2831853036 * var(--index) / var(--count__orbiters));
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
--sin-term1: var(--angle);
@ -160,7 +158,7 @@
}
}
.orbital-content {
.orbiter-content {
width: 100%;
height: 100%;
}
@ -188,14 +186,14 @@
inset: 0;
object-fit: cover;
&:last-child {
&:nth-child(2) {
transition: opacity var(--duration__image-hover);
opacity: 0;
}
}
&:hover > .img {
&:last-child {
&:nth-child(2) {
opacity: 1;
}
}
@ -208,106 +206,13 @@
align-items: center;
}
.bg {
&::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
transition: background-color var(--duration__feature-hover);
}
}
.bg--red {
&::before {
background-color: rgba(255, 200, 200);
}
&:hover::before {
background-color: rgba(255, 150, 150);
}
}
.bg--green {
&::before {
background-color: rgba(200, 255, 200);
}
&:hover::before {
background-color: rgba(150, 255, 150);
}
}
.bg--blue {
&::before {
background-color: rgba(200, 200, 255);
}
&:hover::before {
background-color: rgba(150, 150, 255);
}
}
.feature {
position: relative;
width: 100%;
height: 100%;
text-align: center;
& > *[class*=' wp-block-'],
& > *[class^='wp-block-'],
& > .feature-item {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity var(--duration__feature-hover);
&:first-child {
opacity: 1;
}
&:last-child {
opacity: 0;
}
}
&:hover {
& > *[class*=' wp-block-'],
& > *[class^='wp-block-'],
& > .feature-item {
&:first-child {
opacity: 0;
}
&:last-child {
opacity: 1;
}
}
}
}
.orbitals:hover {
.orbiters:hover {
&.clockwise,
& .anti-clockwise {
animation-play-state: paused;
}
}
.orbital.pulse:hover {
&::before {
animation-play-state: paused;
}
}
.clockwise {
animation: rotate var(--duration__rotation) linear infinite running;
}
@ -316,55 +221,6 @@
animation: rotate var(--duration__rotation) reverse linear infinite running;
}
.pulse {
&::before {
animation: pulse var(--duration__pulse) alternate ease-in-out infinite
running;
}
&:nth-child(2) {
&::before {
animation-delay: 2s;
}
}
&:nth-child(3) {
&::before {
animation-delay: 0.4s;
}
}
&:nth-child(4) {
&::before {
animation-delay: 1.5s;
}
}
&:nth-child(5) {
&::before {
animation-delay: 0.7s;
}
}
&:nth-child(6) {
&::before {
animation-delay: 0.2s;
}
}
&:nth-child(7) {
&::before {
animation-delay: 1.1s;
}
}
&:nth-child(8) {
&::before {
animation-delay: 0.4s;
}
}
}
@keyframes rotate {
from {
transform: rotate(0);
@ -373,30 +229,4 @@
transform: rotate(360deg);
}
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
}
body.wp-admin .wp-block-red-block-red-orbital {
.clockwise {
animation-play-state: paused;
}
.anti-clockwise {
animation-play-state: paused;
}
.pulse {
&::before {
animation: rotate var(--duration__rotation) reverse linear infinite
running;
}
}
}