Plaan — № 10

index.html

<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>

plaan-10.markdown

Plaan — № 10

A Pen by ffoodd on CodePen.

License.

script.js

(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" class="no-margin" step="1" min="1" value="${y}" max="${rows}" id="${label}-y"/>
							</p>
							<p class="no-margin">
								<label for="${label}-x">Colonne</label>
								<input type="number" class="no-margin" step="1" min="1" 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';
					const label = input.id.split('-');
					const value = localStorage.getItem(label[0]);
          let result  = {
            name: name
          };

          if (value !== null) {
            result = JSON.parse(value);

            if (result[axis] !== undefined) {
              item.style.setProperty(`--${axis}`, result[axis]);
              input.value = result[axis];
            }
          }
					
					input.addEventListener('input', event => {
						const position = event.target.value;
						const stored = localStorage.getItem(label[0]);
            if (stored !== null) {
              result = JSON.parse(stored);
            }
						result[axis] = position;
          	item.style.setProperty(`--${axis}`, position);
						localStorage.setItem(label[0], JSON.stringify(result));
					}, false);
				});
			}
		);
	});
})();

style.css

[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;
}

styles

<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" />