@kano/web-components
Version:
Shared web-components for the Kano ecosystem.
136 lines (123 loc) • 5.31 kB
HTML
<html>
<head>
<title>kano-particle-burst demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
<script type="module" src="../../../../@polymer/paper-slider/paper-slider.js"></script>
<script type="module" src="../kano-particle-burst.js"></script>
<script type="module" src="./particle-fountain-demo.js"></script>
<script type="module" src="./particle-big-love-demo.js"></script>
<!-- FIXME(polymer-modulizer):
These imperative modules that innerHTML your HTML are
a hacky way to be sure that any mixins in included style
modules are ready before any elements that reference them are
instantiated, otherwise the CSS @apply mixin polyfill won't be
able to expand the underlying CSS custom properties.
See: https://github.com/Polymer/polymer-modulizer/issues/154
-->
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.setAttribute('style', 'display: none;');
$_documentContainer.innerHTML = `<style is="custom-style" include="demo-pages-shared-styles">
.party-bus{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
position: relative;
border-bottom: 1px solid #f0f0f0;
}
.party-bus h1{
display: block;
position: absolute;
top: 0px;
left: 10px;
font-size: 64px;
margin: 0;
font-family: "helvetica-neue", helvetica, arial, sans-serif;
}
.fountain-container{
height: 100px;
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.fountain-settings{
z-index: 1;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
border: 1px solid #f0f0f0;
padding: 40px;
text-align: center;
font-family: "helvetica-neue", helvetica, arial, sans-serif;
font-size: 10px;
margin-top: 70px;
}
paper-slider.fountain{
--paper-slider-active-color: #ff9933;
--paper-slider-knob-color: #ffBB11;
--paper-slider-container-color: #333;
}
</style>`;
document.head.appendChild($_documentContainer.content);
</script>
</head>
<body>
<!-- <div class="vertical-section-container centered"> -->
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<div class="party-bus">
<h1>balloon</h1>
<kano-particle-burst-demo></kano-particle-burst-demo>
</div>`;
document.body.appendChild($_documentContainer.content);
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<div class="party-bus">
<h1>fountain</h1>
<div class="fountain-container">
<particle-fountain-demo number-particles="5"></particle-fountain-demo>
</div>
<div class="fountain-settings">
<p>Number of particles</p>
<paper-slider class="fountain" id="particleCount" min="0" max="50" value="5"></paper-slider>
<p>Size of particles</p>
<paper-slider class="fountain" id="particleSize" min="0" max="50" value="10"></paper-slider>
</div>
</div>`;
document.body.appendChild($_documentContainer.content);
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<div class="party-bus">
<h1>love</h1>
<particle-big-love-demo></particle-big-love-demo>
</div>`;
document.body.appendChild($_documentContainer.content);
</script>
<!-- </div> -->
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/paper-slider/paper-slider.js';
import '../kano-particle-burst.js';
import './particle-fountain-demo.js';
import './particle-big-love-demo.js';
var particleCount = document.querySelector('#particleCount');
particleCount.addEventListener('immediate-value-change', function() {
document.querySelector('particle-fountain-demo').setAttribute('number-particles', particleCount.immediateValue);
});
var particleSize = document.querySelector('#particleSize');
particleSize.addEventListener('immediate-value-change', function() {
document.querySelector('particle-fountain-demo').setAttribute('max-particle-size', particleSize.immediateValue);
});
</script>
</body>
</html>