Plaan — № 12

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" id="settings" class="no-padding">
</aside>

plaan-12.markdown

Plaan — № 12

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');
	const settings = document.getElementById('settings');
	
	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);
	}
	
	function createForm() {
    const template = `
			<button type="button" class="no-margin">
          <span aria-hidden="true">&#9881;</span>&nbsp;Réglages
        </button>
        <form>
          <div class="grid-2">
						<a download="plaan.json" class="no-margin">Exporter</a>
          </div>
        </form>`;
		
		return document.createRange().createContextualFragment(template);
	}
	
	document.addEventListener('DOMContentLoaded', () => {
		main.style.setProperty('--rows', rows);
		main.style.setProperty('--cols', cols);
		
		const form = createForm();
		settings.append(form);
		
		const link = document.querySelector('[download]');
		
		if (localStorage.length) {
      link.href = 'data:text/json,' + JSON.stringify(localStorage);
    }
		
		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));
						link.href = 'data:text/json,' + JSON.stringify(localStorage);
					}, 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;
  }
}

aside {
  background: hsl(var(--contrast));
  border: 1px solid hsl(var(--accent));
  border-radius: .25rem;
  clip: rect(0, 2.125rem, 2.125rem, 0);
  left: 1rem;
  position: fixed;
  top: 1rem;
  transition: clip .3s var(--move), box-shadow .3s var(--enter);
  will-change: clip, box-shadow;
}

aside:hover {
	clip: auto;
	box-shadow: 0 0 0 .25rem hsla(var(--accent), .25);
}

aside:focus-within {
	clip: auto;
	box-shadow: 0 0 0 .25rem hsla(var(--accent), .25);
}

 aside button {
	 border-radius: 0 0 .25rem 0;
	 line-height: .875;
	 word-spacing: .5rem;
}

 aside form {
	 padding: 1rem;
}

[download],
[download]:hover,
[download]:focus {
	color: hsl(var(--muted));
	text-decoration: line-through;
}

[download][href] {
  color: hsl(var(--secondary-dark));
  text-decoration: underline;
}

[download][href]:hover,
[download][href]:focus {
	color: hsl(var(--secondary));
}

@supports (clip-path: inset(-.25rem -.25rem -.25rem -.25rem)) {
  aside {
    clip: unset;
    clip-path: inset(0 calc(100% - 2.125rem) calc(100% - 2.125rem) 0);
    transition: clip-path .3s var(--move), box-shadow .3s var(--enter);
    will-change: clip-path, box-shadow;
  }
	
	aside:hover,
  aside:focus-within {
		clip-path: inset(-.25rem -.25rem -.25rem -.25rem);
		box-shadow: 0 0 0 .25rem hsla(var(--accent), .25);
	}
}

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