b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
122 lines
2.5 KiB
HTML
Executable file
122 lines
2.5 KiB
HTML
Executable file
<head>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
|
|
<title>GaiaContainer Demo</title>
|
|
</head>
|
|
|
|
<script src='../script.js'></script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
div:first-of-type {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
div:first-of-type > * {
|
|
flex: 1;
|
|
}
|
|
|
|
gaia-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
gaia-container.alt {
|
|
flex-flow: row-reverse wrap-reverse;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child:not(.added):not(.dragging) {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child.dragging {
|
|
z-index: 1;
|
|
will-change: transform;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child > div {
|
|
display: inline-block;
|
|
width: 33vw;
|
|
height: 33vw;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child:not(.added):not(.removed) > div {
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child.dragging > div {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
gaia-container > .gaia-container-child.added > div {
|
|
animation-name: added;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
@keyframes added {
|
|
0% { opacity: 0; transform: scale(0.5); }
|
|
100% { opacity: 100%; }
|
|
}
|
|
|
|
gaia-container > .gaia-container-child.removed > div {
|
|
animation-name: removed;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
@keyframes removed {
|
|
45% { transform: scaleY(0.1); }
|
|
55% { transform: scaleY(0.1); }
|
|
100% { transform: scale(0); }
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<button onclick='addBox()'>Add item</button>
|
|
<button onclick='container.classList.toggle("alt"); container.synchronise()'>Toggle layout</button>
|
|
</div>
|
|
|
|
<gaia-container drag-and-drop></gaia-container>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
var container = document.getElementsByTagName('gaia-container')[0];
|
|
|
|
function randomInt(min, max) {
|
|
return Math.floor(Math.random() * (max - min)) + min;
|
|
}
|
|
|
|
function addBox() {
|
|
var element = document.createElement('div');
|
|
|
|
element.style.backgroundColor = 'rgb(' +
|
|
randomInt(100, 200) + ',' +
|
|
randomInt(100, 200) + ',' +
|
|
randomInt(100, 200) + ')';
|
|
|
|
element.onclick = () => {
|
|
container.removeChild(element);
|
|
};
|
|
|
|
var children = container.children;
|
|
var insertBefore = children.length ?
|
|
children[randomInt(0, children.length - 1)] : null
|
|
container.insertBefore(element, insertBefore);
|
|
}
|
|
|
|
var resizeTimeout = null;
|
|
window.onresize = () => {
|
|
if (resizeTimeout !== null) {
|
|
window.clearTimeout(resizeTimeout);
|
|
}
|
|
resizeTimeout = window.setTimeout(() => {
|
|
resizeTimeout = null;
|
|
container.synchronise();
|
|
}, 100);
|
|
}
|
|
</script>
|