add orbiters programatically
This commit is contained in:
parent
9ec3321850
commit
cc3c68254d
17
src/edit.js
17
src/edit.js
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
194
src/style.scss
194
src/style.scss
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue