Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

assets/webapps/homescreen.gaiamobile.org/bower_components/gaia-container/examples/basic.html

@@ -0,0 +1,122 @@
+<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>