Skip to content

Instantly share code, notes, and snippets.

@ffoodd
Created October 6, 2019 09:13
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ffoodd/0b1b6aa0b117c0593de820eeef1a754a to your computer and use it in GitHub Desktop.
Plaan — № 9
<header role="banner" class="sr-only">
<h1>Plan de salle du «&nbsp;Cercle des poètes disparus&nbsp;»</h1>
</header>
<main role="main" id="main">
<ul role="presentation" class="no-list no-margin" id="shadow">
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
</ul>
<ul class="no-list no-margin" id="plan">
<li style="--x:1; --y:2; --span:2;">M. Keating</li>
<li style="--x:7; --y:4;">Neil Perry</li>
<li style="--x:2; --y:4;">Todd Anderson</li>
<li style="--x:5; --y:4;">Knox Overstreet</li>
<li style="--x:4; --y:4;">Charlie Dalton</li>
<li style="--x:3; --y:3;">Richard Cameron</li>
<li style="--x:2; --y:2;">Steven Meeks</li>
<li style="--x:5; --y:3;">Gerard Pitts</li>
<li style="--x:2; --y:3;">Hopkins</li>
<li style="--x:5; --y:1;">Stick</li>
</ul>
</main>
<aside role="complementary">
</aside>
(function () {
'use strict';
const rows = 4;
const cols = 7;
const room = document.getElementById('main');
const plan = document.getElementById('plan');
function createDetails(prop, x, y) {
const label = prop.toLowerCase().replace(' ', '-');
const template = `
<details class="no-margin p-relative">
<summary class="button no-margin">${prop}</summary>
<form class="button no-margin">
<fieldset class="grid-2 no-margin">
<legend>${prop}</legend>
<p class="no-margin">
<label for="${label}-y">Ligne</label>
<input type="number" step="1" min="1" class="no-margin" value="${y}" max="${rows}" id="${label}-y"/>
</p>
<p class="no-margin">
<label for="${label}-x">Colonne</label>
<input type="number" step="1" min="1" class="no-margin" value="${x}" max="${cols}" id="${label}-x"/>
</p>
</fieldset>
</form>
</details>`;
return document.createRange().createContextualFragment(template);
}
document.addEventListener('DOMContentLoaded', () => {
main.style.setProperty('--rows', rows);
main.style.setProperty('--cols', cols);
plan.querySelectorAll('[style]').forEach(
item => {
const name = item.textContent;
const x = item.style.getPropertyValue('--x');
const y = item.style.getPropertyValue('--y');
const details = createDetails(name, x, y);
item.innerHTML = '';
item.append(details);
item.addEventListener('click', event => {
const target = event.target;
const opened = document.querySelectorAll('details[open]');
opened.forEach( detail => {
if (! detail.contains(target) ) {
detail.removeAttribute('open');
}
})
}, false);
item.querySelectorAll('[type="number"]').forEach( input => {
const max = Number(input.getAttribute('max'));
const axis = (max === rows) ? '--y' : '--x';
input.addEventListener('input', event => {
const position = event.target.value;
item.style.setProperty(axis, position);
}, false);
});
}
);
});
})();
[role="main"] {
display: grid;
gap: 1rem;
grid-template: repeat(var(--rows, 4), 1fr) / repeat(var(--cols, 7), 1fr);
height: 100vh;
margin: 0;
max-width: 100vw;
padding: 1rem;
}
[id="plan"] {
display: contents;
}
[id="plan"] [style] {
grid-area: var(--y, 2) / var(--x, 2) / span var(--span, 1) / auto;
}
[id="shadow"] {
display: contents;
}
[id="shadow"] [role="presentation"] {
background: hsla(var(--muted-light), .25);
border-radius: .25rem;
}
@supports not (grid-template-rows: subgrid) {
[id="shadow"] [role="presentation"] {
display: inline-block;
}
[id="shadow"] [role="presentation"]:first-child {
grid-area: 1 / 1;
width: 0;
}
[id="shadow"] [role="presentation"]:last-child {
grid-area: var(--rows) / 1;
width: 0;
}
}
@supports (grid-template-rows: subgrid) {
[id="shadow"] {
display: grid;
gap: 1rem;
grid-area: 1 / 2 / span var(--rows) / span calc(var(--cols) - 1);
grid-template-columns: repeat(calc(var(--cols) - 1), 1fr);
grid-template-rows: subgrid;
}
}
@media screen and (orientation: landscape) {
li {
writing-mode: vertical-lr;
writing-mode: sideways-lr;
}
li,
details {
height: 100%;
margin: auto;
width: 8.75rem;
}
}
@media screen and (orientation: portrait) {
main {
writing-mode: vertical-rl;
}
li {
writing-mode: horizontal-tb;
}
}
details {
border: 0;
height: 100%;
width: 100%;
}
summary {
text-align: center;
}
details > * {
backface-visibility: hidden;
bottom: 0;
height: inherit;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: transform .3s var(--move);
transform: perspective(600px) rotateY(0turn);
width: inherit;
will-change: transform;
}
details > * + * {
transform: perspective(600px) rotateY(.5turn);
writing-mode: initial;
}
details[open] > * {
transform: perspective(600px) rotateY(-.5turn);
}
details[open] > * + * {
animation: none !important;
transform: perspective(600px) rotateY(0turn);
}
details p,
details form {
pointer-events: none;
}
details input,
details label {
font-size: smaller;
pointer-events: auto;
}
details [class*="grid"] {
gap: .5rem;
}
input[type="number"] {
appearance: initial;
width: 6ch;
}
input[type="number"]:valid:focus,
input[type="number"]:invalid:focus {
background-image: none;
}
<link href="https://ffoodd.github.io/sseeeedd/css/styles.min.css" rel="stylesheet" />
<link href="https://ffoodd.github.io/sseeeedd/css/print.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment