Commit 074e50ab authored by alain's avatar alain 🐙
Browse files

the layers component..

parent 2e70198a
...@@ -6,7 +6,6 @@ const Layers = () => { ...@@ -6,7 +6,6 @@ const Layers = () => {
const handleClick = (e, layer) => { const handleClick = (e, layer) => {
e.stopPropagation(); e.stopPropagation();
console.log(layer)
setActive(layer) setActive(layer)
} }
...@@ -25,62 +24,83 @@ const Layers = () => { ...@@ -25,62 +24,83 @@ const Layers = () => {
} }
} }
`} `}
render={data => ( render={ data => {
<section> const mainLayer = parseInt(active[0])
console.log(mainLayer)
console.log(active)
return (
<section id="layers">
<h1>Layers</h1> <h1>Layers</h1>
<div className="row columns-2"> <div className="row columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}> <div className="column" onClick={e => { handleClick(e, "0") }}>
<svg id="layers" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330.35 501.94"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330.35 501.94">
<g id="foundation-layer-idle" className={`${active === "1" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "1")}> <g id="foundation-layer-idle"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
onClick={e => handleClick(e, "1")}
role="button"
aria-label="Learn more about the Foundation Layer">
<polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" /> <polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" />
<polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" /> <polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" />
<polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" /> <polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" />
</g> </g>
<g id="foundation-layer-active" className={`${active === "1" ? 'active' : 'inactive'}`}> <g id="foundation-layer-active"
<g> className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
<g onClick={e => handleClick(e, "1.1")}>
<polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" /> <polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" />
<polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" /> <polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" />
<polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" /> <polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" />
</g> </g>
<g> <g onClick={e => handleClick(e, "1.2")}>
<polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" /> <polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" />
<polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" /> <polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" />
<polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" /> <polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" />
</g> </g>
<g> <g onClick={e => handleClick(e, "1.3")}>
<polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" /> <polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" />
<polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" /> <polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" />
<polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" /> <polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" />
</g> </g>
<g> <g onClick={e => handleClick(e, "1.4")}>
<polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" /> <polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" />
<polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" /> <polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" />
<polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" /> <polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" />
</g> </g>
</g> </g>
<g id="design-layer-idle" className={`${active === "2" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "2")}> <g id="design-layer-idle"
className={`clickable ${mainLayer === 2 ? 'inactive' : 'idle'} ${mainLayer >= 1 && mainLayer < 2 ? "up" : null} ${mainLayer >= 3 ? "down" : null}`}
onClick={e => handleClick(e, "2")}>
<polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" /> <polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" />
<polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" /> <polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" />
<polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" /> <polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" />
</g> </g>
{/* <g id="tech-layer-idle" className={`${active === "3" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "3")}> <g id="tech-layer-idle"
className={`${mainLayer < 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${active !== "0" && mainLayer >= 1 && mainLayer < 3 ? "up" : null}`}
onClick={e => handleClick(e, "3")}>
<polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" /> <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
<polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" /> <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
<polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" /> <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
</g> */} </g>
<g id="tech-layer-idle" className={`${active === "3" ? 'active1' : 'idle1'}`}> <g id="tech-layer-idle"
<g id="contexts-layers-idle" className={`${active === "3.2" ? 'inactive' : 'idle '}`} onClick={e => handleClick(e, "3.1")}> className={`${mainLayer < 3 ? 'inactive' : ''} ${active === "3" ? 'idle' : ''}`}>
<g id="contexts-layers-idle"
className={`clickable ${active === "3.2" ? 'idle' : ''} ${active === "3.1" ? 'inactive' : ''}`}
onClick={e => handleClick(e, "3.1")}>
<polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" /> <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
<polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" /> <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
<polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" /> <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
</g> </g>
<g id="tech-layers-idle" className={`${active === "3.1" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "3.2")}> <g id="tech-layers-idle"
className={`clickable ${active === "3.1" ? 'idle' : ''} ${active === "3.2" ? 'inactive' : ''}`}
onClick={e => handleClick(e, "3.2")}>
<polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" /> <polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" />
<polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" /> <polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" />
<polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" /> <polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" />
</g> </g>
</g> </g>
<g id="design-layer-active" className={`${active === "2" ? 'active' : 'inactive'}`}> <g id="design-layer-active"
className={`${active === "2" ? 'active' : 'inactive'}`}>
<g> <g>
<polygon className="t-l" points="72.23 367.71 58.14 359.52 57.31 66.06 71.4 74.26 72.23 367.71" /> <polygon className="t-l" points="72.23 367.71 58.14 359.52 57.31 66.06 71.4 74.26 72.23 367.71" />
<polygon className="t-r" points="84.01 8.19 109.71 52.14 96.94 59.51 97.77 352.97 72.23 367.71 71.4 74.26 58.63 81.63 84.01 8.19" /> <polygon className="t-r" points="84.01 8.19 109.71 52.14 96.94 59.51 97.77 352.97 72.23 367.71 71.4 74.26 58.63 81.63 84.01 8.19" />
...@@ -103,7 +123,8 @@ const Layers = () => { ...@@ -103,7 +123,8 @@ const Layers = () => {
</g> </g>
</g> </g>
<g id="context-layers-active" className={`${active === "3.1" ? 'active' : 'inactive'}`}> <g id="context-layers-active"
className={`${active === "3.1" ? 'active' : 'inactive'}`}>
<g> <g>
<polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" /> <polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" />
<polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" /> <polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" />
...@@ -131,7 +152,8 @@ const Layers = () => { ...@@ -131,7 +152,8 @@ const Layers = () => {
<polygon className="y-r" points="329.87 129.6 329.83 144.27 165.51 239.76 165.56 225.09 329.87 129.6" /> <polygon className="y-r" points="329.87 129.6 329.83 144.27 165.51 239.76 165.56 225.09 329.87 129.6" />
<polygon className="y-l" points="165.56 225.09 165.51 239.76 0.13 144.27 0.17 129.6 165.56 225.09" /> <polygon className="y-l" points="165.56 225.09 165.51 239.76 0.13 144.27 0.17 129.6 165.56 225.09" />
</g> </g>
<g id="tech-layers-active" className={`${active === "3.2" ? 'active' : 'inactive'}`}> <g id="tech-layers-active"
className={`${active === "3.2" ? 'active' : 'inactive'}`}>
<g> <g>
<polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" /> <polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" />
<polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" /> <polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" />
...@@ -152,7 +174,7 @@ const Layers = () => { ...@@ -152,7 +174,7 @@ const Layers = () => {
<polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" /> <polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" />
<polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" /> <polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" />
</g> </g>
<g> <g onClick={e => handleClick(e, "3.2.1")}>
<polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" /> <polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" />
<polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" /> <polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" />
<polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" /> <polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" />
...@@ -206,6 +228,14 @@ const Layers = () => { ...@@ -206,6 +228,14 @@ const Layers = () => {
</svg> </svg>
</div> </div>
<div className="column"> <div className="column">
<ul id="layer-list">
{ data.allStrapiLayer.nodes.map(layer =>
<li key={layer.id} className={`depth-${layer.order.length} ${layer.order === active ? "current" : null}`} onClick={e => handleClick(e, layer.order)}>
{layer.title}
</li>
)}
</ul>
{ data.allStrapiLayer.nodes.filter(layer => layer.order === active).map(layer => ( { data.allStrapiLayer.nodes.filter(layer => layer.order === active).map(layer => (
<div key={layer.id}> <div key={layer.id}>
<h3>{layer.title}</h3> <h3>{layer.title}</h3>
...@@ -215,7 +245,8 @@ const Layers = () => { ...@@ -215,7 +245,8 @@ const Layers = () => {
</div> </div>
</div> </div>
</section> </section>
)} )
}}
/> />
) )
} }
......
import React, { useRef, useEffect } from "react" import React, { useRef, useEffect } from "react"
import { graphql, Link } from "gatsby" import { graphql } from "gatsby"
import gsap, { Power1 } from 'gsap'; import gsap, { Power1 } from 'gsap';
import { MotionPathPlugin } from "gsap/MotionPathPlugin"; import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
......
#layers { #layers {
width: 100%;
max-width: 320px; p {
//pointer-events: none; font-size: 1rem;
}
svg {
width: 100%;
max-width: 320px;
//pointer-events: none;
}
g { g {
pointer-events: none; pointer-events: none;
...@@ -16,6 +23,10 @@ ...@@ -16,6 +23,10 @@
&.dotted { stroke: #000; stroke-dasharray: 12; } &.dotted { stroke: #000; stroke-dasharray: 12; }
} }
.clickable {
cursor: pointer;
}
.inactive { .inactive {
opacity: 0; opacity: 0;
...@@ -26,9 +37,39 @@ ...@@ -26,9 +37,39 @@
.idle { .idle {
opacity: 0.3; opacity: 0.3;
&:hover {
opacity: 0.6;
}
} }
}
#layer-list {
list-style: none;
margin: 0 -5rem 0 1rem;
padding: 0 0 0 0.5rem;
float: right;
border-left: 0.25rem solid black;
li {
&:hover { text-decoration: underline; }
&.current { font-weight: 700; }
&.depth-1 { padding-left: 0; }
&.depth-3 { padding-left: 0.5rem; }
&.depth-5 { padding-left: 1rem; }
}
}
g {
transition: all 100ms ease;
}
g.down {
transform: translateY(76px);
}
g.up {
transform: translateY(-76px);
}
}
.w-u { fill: #b5b5b5; stroke: #b5b5b5; } .w-u { fill: #b5b5b5; stroke: #b5b5b5; }
.w-r { fill: #e3e3e3; stroke: #e3e3e3; } .w-r { fill: #e3e3e3; stroke: #e3e3e3; }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment