@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
331 lines (300 loc) • 12.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coral.Masonry</title>
<script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const markup = document.body.querySelectorAll('.markup');
for (var i = 0; i < markup.length; i++) {
const code = markup[i].innerHTML;
const id = 'markup-code-' + i;
markup[i].insertAdjacentHTML('afterend',
'<div style="margin:10px 0">' +
'<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' +
'<pre hidden>' +
'<code id="'+ id +'" class="html">' +
'</code>' +
'</pre>' +
'</div>');
document.getElementById(id).textContent = code;
}
window.hljs.initHighlightingOnLoad();
});
</script>
<link rel="stylesheet" href="../css/coral.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = '../js/coral.js';
script.dataset.coralIcons = '../resources/';
document.head.appendChild(script);
});
</script>
</head>
<body class="coral--lightest">
<main class="u-coral-margin">
<div style="position:absolute;top:16px;right:16px;">
<strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong>
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a>
<strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong>
<a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
<a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
</div>
<h1 class="coral-Heading--XXL">Masonry</h1>
<h2 class="coral-Heading--M">Usage notes</h2>
<hr class="coral-Divider--L">
<p class="coral-Body--M u-coral-padding-vertical">
A Masonry displays items in a waterfall grid, usually used with cards.
</p>
<div class="markup">
<style>
coral-masonry {
border: 1px dashed #ccc;
border-radius: 4px;
margin: 1rem;
padding: 0.5rem;
}
coral-masonry.is-complete > coral-masonry-item.is-beforeInserting:first-child {
/* Set top to padding height for a straight transition */
transform: translate(-200%, 0.5rem);
}
coral-masonry-item {
margin: 0.5rem;
}
coral-masonry article {
padding: 0.5rem;
width: 100%;
height: 100%;
box-sizing: border-box;
}
coral-masonry img {
max-width: 100%;
}
[coral-masonry-draghandle]:before {
content: "⠿";
}
</style>
<label>
ariaGrid
<span id="ariaGrid">
<a href="#" class="coral-Link">off</a> |
<a href="#" class="coral-Link">on</a> |
</span>
</label>
<br>
<label>
Selection mode
<span id="selection">
<a href="#" class="coral-Link">none</a> |
<a href="#" class="coral-Link">single</a> |
<a href="#" class="coral-Link">multiple</a>
</span>
</label>
<br>
<label>
Layout
<span id="layout">
<a href="#" class="coral-Link">fixed-centered</a> |
<a href="#" class="coral-Link">fixed-spread</a> |
<a href="#" class="coral-Link">variable</a> |
<a href="#" class="coral-Link">dashboard</a>
</span>
</label>
<br>
<label>
Column width
<input type="number" style="width:40px;background:transparent;border:none;" name="columnWidth">
</label>
<br>
<label>
Items
<a href="#" class="coral-Link prepend" data-count="1">prepend 1</a> |
<a href="#" class="coral-Link prepend" data-count="10">prepend 10</a> |
<a href="#" class="coral-Link append" data-count="1">append 1</a> |
<a href="#" class="coral-Link append" data-count="10">append 10</a> |
<a href="#" class="coral-Link append" data-count="100">append 100</a> |
</label>
<i>(double click on item to remove it)</i>
<div>
<coral-masonry orderable id="masonry" layout="fixed-centered" columnwidth="250" aria-label="Masonry" ariagrid="on">
<coral-masonry-item class="coral-Well">
<article>
<span coral-masonry-draghandle></span>
With image
<img src="https://via.placeholder.com/600x300" alt="600 × 300" />
</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>
<span coral-masonry-draghandle></span>
card
<br>card
</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well" colspan="2">
<article>
<span coral-masonry-draghandle></span>
card
<br>card
<br>card
</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>
<span coral-masonry-draghandle></span>
card
<br>card
<br>card
<br>card
</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well" colspan="2">
<article>card
<br>card
<br>card
<br>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>card
<br>card
<br>card
<br>card
<br>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well" colspan="2">
<article>card
<br>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>card
<br>card
<br>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well" colspan="2">
<article>card
<br>card
<br>card
<br>card
<br>card</article>
</coral-masonry-item>
<coral-masonry-item class="coral-Well">
<article>card
<br>card
<br>card
<br>card
<br>card
<br>card</article>
</coral-masonry-item>
</coral-masonry>
</div>
<script>
window.addEventListener('load', function() {
let uid = 0;
function getUID() {
return 'coral-masonry-' + uid++;
}
const masonry = document.getElementById('masonry');
masonry.items.getAll().forEach(function (item) {
const article = item.querySelector('article');
article.setAttribute('role', 'presentation');
if (!item.id) {
item.id = getUID();
}
article.id = article.id || item.id + '-content';
});
const ariaGridSelector = document.getElementById('ariaGrid');
ariaGridSelector.addEventListener('click', function(event) {
masonry.setAttribute('ariagrid', event.target.textContent);
});
const layoutSelector = document.getElementById('layout');
layoutSelector.addEventListener('click', function(event) {
masonry.setAttribute('layout', event.target.textContent);
});
const selectionSelector = document.getElementById('selection');
selectionSelector.addEventListener('click', function(event) {
masonry.setAttribute('selectionmode', event.target.textContent);
});
const columnWidthSelector = document.querySelector('[name=columnWidth]');
columnWidthSelector.value = masonry.getAttribute('columnwidth');
columnWidthSelector.addEventListener('input', function() {
masonry.setAttribute('columnwidth', this.value);
});
masonry.on('dblclick', 'coral-masonry-item', function(event) {
event.matchedTarget.remove();
});
document.addEventListener('click', function(event) {
const prepend = event.target.matches('.prepend');
if (prepend) {
let count = event.target.dataset.count;
for (let i = 0; i < count; i++) {
masonry.items.add(createItem(), masonry.items.first());
}
}
});
document.addEventListener('click', function(event) {
const append = event.target.matches('.append');
if (append) {
const startTime = Date.now();
const count = event.target.dataset.count;
for (let i = 0; i < count; i++) {
masonry.items.add(createItem());
}
window.requestAnimationFrame(function() {
console.log('Appending time:', Date.now() - startTime);
});
}
});
let image = false;
function createItem() {
image = !image;
return image ? createImageItem() : createTextItem();
}
function randomSize() {
return (2 + Math.round(Math.random() * 4)) * 100;
}
function createImageItem() {
const id = getUID();
const contentId = id + '-content';
const width = randomSize();
const height = randomSize();
const url = 'https://via.placeholder.com/' + width + 'x' + height;
const item = document.createElement('coral-masonry-item');
item.id = id;
item.classList.add('coral-Well');
item.content.innerHTML = '<img id="' + contentId + '" alt="' + width + ' × ' + height + '" src="' + url + '" style="width: ' + (width / 2) + 'px; height: ' + (height / 2) + 'px;">';
return item;
}
function createTextItem() {
const id = getUID();
const contentId = id + '-content';
const rows = 1 + Math.round(Math.random() * 6);
const html = new Array(rows + 1).join('card<br>').slice(0, -4);
const item = document.createElement('coral-masonry-item');
item.id = id;
item.classList.add('coral-Well');
item.content.innerHTML = '<article role="presentation" id="' + contentId + '">' + html + '</article>';
return item;
}
});
</script>
</div>
</main>
</body>
</html>