From 2d4eb8313f8ca35783edb94c8578424960974f59 Mon Sep 17 00:00:00 2001 From: Suzanne Soy Date: Sun, 11 Apr 2021 02:56:29 +0100 Subject: [PATCH] back button works on the way back but not forward anymore... --- 3d.css | 21 +++++++++++++++++++ index.html | 8 +++++--- target-within-shim.js | 16 ++++++++++----- test.css | 48 ++++++++++++++++++++++++++++++++----------- 4 files changed, 73 insertions(+), 20 deletions(-) diff --git a/3d.css b/3d.css index 3529c47..9c9bcec 100644 --- a/3d.css +++ b/3d.css @@ -35,6 +35,27 @@ html, body { width: 100%; height: 100%; overflow: hidden; } background: blue; } + .css3d :hover { opacity: 0.7; } + + .css3d #a { pointer-events: none; } + .css3d #a * { pointer-events: all; } + .css3d #a:target { pointer-events: all; } + .css3d #a:hover { pointer-events: all; width: 70%; } + .css3d #a2 { left: 70%; } + .css3d #detector { + z-index: 1000; position: absolute; top: 0; bottom: 0; height: 0; width: 100%; height: 100%; + background: transparent; border: 10px solid rgba(100,1,0,0.4); + pointer-events: painted; +} +.css3d #detector:hover { + left: -100%; + transition: none; +} +.css3d #detector { + left: 100%; + transition: left 60s step-end; +} + .css3d iframe { width: 50%; height: 50%; } .css3d div:focus-within { diff --git a/index.html b/index.html index 9b5f5f0..14c291a 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

Procedural Designer

Latest version of my Ph.D draft

-
-
+
+
+ → Enter ←
Hello world diff --git a/target-within-shim.js b/target-within-shim.js index 76f79b7..f6524d2 100644 --- a/target-within-shim.js +++ b/target-within-shim.js @@ -6,20 +6,26 @@ function toggle(element, className, enable) { element.className = newcls.join(' '); } -function targetWithin(id, enable) { +function reverseAncestorsAndSelf(id) { + ancestorsAndSelf = []; if (id) { for (var e = document.getElementById(id); e; e = e.parentElement) { - toggle(e, 'target-within', enable) + ancestorsAndSelf[ancestorsAndSelf.length] = e; } } + return ancestorsAndSelf.reverse(); } -var current_hash = window.location.hash.substr(1); +var current_hash = ''; function hashChange() { - targetWithin(current_hash, false); + var oldElements = reverseAncestorsAndSelf(current_hash); current_hash = window.location.hash.substr(1); - targetWithin(current_hash, true); + var newElements = reverseAncestorsAndSelf(current_hash); + var i = 0; + while (i < oldElements.length && i < newElements.length && oldElements[i] == newElements[i]) { i++; } + for (var j = i; j < oldElements.length; j++) { toggle(oldElements[j], 'target-within', false); } + for (var j = i; j < newElements.length; j++) { toggle(newElements[j], 'target-within', true); } } window.addEventListener('load', hashChange, false); diff --git a/test.css b/test.css index ba4e2f6..b2aaad0 100644 --- a/test.css +++ b/test.css @@ -135,15 +135,43 @@ html, body { height: 100%; } position: absolute; top: 0; bottom: 0; left:0; right: 0; display: flex; align-items: center; justify-content: center; transition: background 0.6s, translate 2s, left step-start 1s; transform-style: preserve-3d; } .go::before { position: absolute; content: ''; left: 0; right: 0; height: 1.5em; z-index: -1; - background: white; transition: background 0.2s; } + background: blueviolet; transition: background 0.2s; } .go:hover::before { background: rgba(255, 255, 255, 0.6); } .go:hover { background: rgba(255, 255, 255, 0.1); } -:target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } -.target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } -:target-within > .go::before { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; } -.target-within > .go::before { background: rgba(255, 255, 255, 0.0); } -:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; } -.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; } +:target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } +.target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } +:target-within > .go::before { opacity: 0.6; background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; } +.target-within:target > .go::before { + transition: background 0.6s linear, transform linear 1s, left 1s step-end, opacity 0.6s linear; + background: red; color: black; mask-image: none; border: thin solid black; + padding: 0; top: 0; left: -9999vmin; right: unset; + position: fixed; width: auto; height: auto; + content: '← back' attr(href); + opacity: 0; +} +:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; } +.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; } +.target-within:not(:target) > .go::before { + animation: 1s anim 1s; + transition: background 0.6s, transform 1s, left 1s step-end; + background: red; color: black; mask-image: none; border: thin solid black; + padding: 0; top: 0; left: -9999vmin; right: unset; + position: fixed; width: auto; height: auto; + content: '← back' attr(href); + opacity: 0.9; +} +@keyframes anim { + 0% { opacity: 0; } + 100% { opacity: 0.9; } +} +@keyframes animout { + 0% { opacity: 0.9; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} +/** { transition: all 2s step-end 1000s !important; }*/ + +.target-within:not(:target) > .go { /*font-size: 1%;*/ width: 0; height: 0; border: none; background: none; color: transparent; outline: none; } .go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* don't go to 100% because the easing goes beyond the value */ } .go::after { --width: 10; /* vmin */ @@ -209,10 +237,6 @@ html, body { height: 100%; } */ } -@keyframes trans { - 0% { background: rgba(214, 93, 184, 0.719); } - } - .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;} .scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } .scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } @@ -224,7 +248,7 @@ html, body { height: 100%; } .object:target-within:before { opacity: 1; } .object.target-within:before { opacity: 1; } .object:before { - content: "← back"; + content: normal;/*"← back"; for hover only*/ border: thin solid brown; background: white; z-index: 999;