ava-pwar
Version:
Web component that generates markup from manifest
389 lines (354 loc) • 15.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>xtal-siema demo</title>
</head>
<body>
<div>
<h3>Basic xtal-siema demo</h3>
<div>
<wired-button data-jump="-1">Previous</wired-button>
<wired-button data-jump="1">Next</wired-button>
</div>
<p-d on="click" if="wired-button" to="{pageJump:target.dataset.jump}"></p-d>
<xtal-siema attr-for-selected="preview">
<div class="openingSlide">
<div class="textDesc">
Web Component links of interest
</div>
</div>
<div>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">The status of Shadow DOM was changed from "Under Consideration" to "In
Development" <a href="https://t.co/lPpHQCZj40">https://t.co/lPpHQCZj40</a></p>— Edge Platform
Updates (@MSEdgeUpdates) <a href="https://twitter.com/MSEdgeUpdates/status/1049404077501833218?ref_src=twsrc%5Etfw">October
8, 2018</a>
</blockquote>
</div>
<xtal-link-preview href="">
<div>
<a href="https://www.chromestatus.com/metrics/feature/timeline/popularity/1689" target="blank">Custom Element
Usage</a>
</div>
</xtal-link-preview>
<div>
<blockquote class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">If you folks were still looking for a reason to use <a href="https://twitter.com/hashtag/WebComponents?src=hash&ref_src=twsrc%5Etfw">#WebComponents</a>
for real, here is one: The more you delegate to the browser, the smallest your app can be! <a href="https://twitter.com/hashtag/useThePlatform?src=hash&ref_src=twsrc%5Etfw">#useThePlatform</a><br>Demos:
<a href="https://t.co/5eo8NrxZQb">https://t.co/5eo8NrxZQb</a> <br>Repo: <a href="https://t.co/dWlM4Hsz4P">https://t.co/dWlM4Hsz4P</a>
<a href="https://t.co/63riTOsbzV">pic.twitter.com/63riTOsbzV</a></p>— Julien Renaux (@julienrenaux) <a
href="https://twitter.com/julienrenaux/status/1049212830367539200?ref_src=twsrc%5Etfw">October 8, 2018</a>
</blockquote>
</div>
<xtal-link-preview href="https://leanpub.com/web-component-essentials">
<div class="loader">
New Book
</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.pluralsight.com/courses/vanilla-web-components-practical-guide">
<div class="loader">
PluralSight
</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.sencha.com/blog/sencha-roadmap-update/">
<div class="loader">
ExtJS 7
</div>
</xtal-link-preview>
<xtal-link-preview href="https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/">
<div class="loader">
Firefox Web Component Debugging
</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.xoriant.com/blog/big-data-analytics/turbocharge-data-science-workbench.html">
<div class="loader">
Data Science WCs
</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.npmjs.com/package/@wcfactory/cli">
<div class="loader">
WCFactory
</div>
</xtal-link-preview>
<xtal-link-preview href="https://blog.mastykarz.nl/web-components-sharepoint-framework/">
<div class="loader">
Web Components in Sharepoint
</div>
</xtal-link-preview>
<xtal-link-preview href="https://boltdesignsystem.com/">
<div class="loader">Bolt Design System</div>
</xtal-link-preview>
<xtal-link-preview href="https://frontendnews.io/editions/2018-08-15-simple-camera-component">
<div class="loader">Camera Component</div>
</xtal-link-preview>
<xtal-link-preview href="https://medium.com/@lucamezzalira/a-night-experimenting-with-lit-html-585a8c69892a">
<div class="loader">night-lit</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/TeamHive/stencil-shimmer">
<div class="loader">Stencil Shimmer</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/css-doodle/css-doodle">
<div class="loader">CSS Doodle</div>
</xtal-link-preview>
<xtal-link-preview href="https://vaadin.com/directory">
<div class="loader">Vaadin Directory</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/RHelements">
<div class="loader">RHElements</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/material-components/material-components-web-components">
<div class="loader">Material Web Components</div>
</xtal-link-preview>
<xtal-link-preview href="https://ni.github.io/design-system/elements/buttons/">
<div class="loader">Fuse Design Systems</div>
</xtal-link-preview>
<xtal-link-preview href="https://stencilcomponents.com/">
<div class="loader">Stencil Components</div>
</xtal-link-preview>
<xtal-link-preview href="https://bendyworks.com/blog/build-a-web-component-with-nutmeg">
<div class="loader">
Nutmeg
</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/UpperCod/Atomico">
<div class="loader">Atomico</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/slimjs">
<div class="loader">SlimJS</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/skatejs/skatejs/">
<div class="loader">SkateJS</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.predix-ui.com/">
<div class="loader">Predix Components</div>
</xtal-link-preview>
<xtal-link-preview href="https://ciampo.github.io/macro-carousel/demo/">
<div class="loader">macro-carousel</div>
</xtal-link-preview>
<xtal-link-preview href="https://medium.com/@valdrinkoshi/performant-expand-collapse-animations-93d99e80f7f">
<div class="loader">Expand/Collapse Animations</div>
</xtal-link-preview>
<xtal-link-preview href="https://festify.github.io/ken-burns-carousel/">
<div class="loader">Ken Burns Slide Show</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/splitinfinities/lottie-wc">
<div class="loader">Lottie Animations</div>
</xtal-link-preview>
<xtal-link-preview href="https://onsen.io">
<div class="loader">Onsen UI</div>
</xtal-link-preview>
<xtal-link-preview href="https://blogs.oracle.com/developers/announcing-oracle-jet-40-and-web-components">
<div class="loader">Oracle Jet</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.ampproject.org">
<div class="loader">AMP</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/theonion/bulbs-elements">
<div class="loader">America's Finest News Source</div>
</xtal-link-preview>
<xtal-link-preview href="https://elix.org/">
<div class="loader">elix</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/skatejs/sk-router">
<div class="loader">SkateJS Router</div>
</xtal-link-preview>
<xtal-link-preview href="http://blog.htmltreegrid.com/post/Best-WebComponents-DataGrid-DataTable.aspx">
<div class="loader">HTML Treegrid</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.predix-ui.com/">
<div class="loader">Predix</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/x-tag">
<div class="loader">x-tag</div>
</xtal-link-preview>
<xtal-link-preview href="https://bgrins.github.io/xbl-analysis/">
<div class="loader">
XBL => CE
</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Polymer/lit-html/tree/master/demo">
<div class="loader">lit-html</div>
</xtal-link-preview>
<xtal-link-preview href="https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210">
<div class="loader">@mikeal</div>
</xtal-link-preview>
<xtal-link-preview href="https://developers.google.com/web/fundamentals/web-components/examples/">
<div class="loader">Best Practices Examples</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Comcast/polaris">
<div class="loader">Polaris</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/QuinntyneBrown/ce-carousel">
<div class="loader">cd-carousel</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-fetch">
<div class="loader">Stencil fetch</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-payment">
<div class="loader">Stencil Payment</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/mappmechanic/awesome-stenciljs">
<div class="loader">Awesome Stencil</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-voice2text">
<div class="loader">Stencil Voice2Text</div>
</xtal-link-preview>
<xtal-link-preview href="https://stackblitz.com/edit/angular-ce-poc-material-v2">
<div class="loader">Angular material elements</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/tanepiper/mm-components">
<div class="loader">Music Markup components</div>
</xtal-link-preview>
<xtal-link-preview href="https://aframe.io/">
<div class="loader">A-frame Web VR</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/PolymerLabs/amp-viewer/blob/master/amp-viewer.js">
<div class="loader">Amp Viewer</div>
</xtal-link-preview>
<xtal-link-preview href="https://twittercommunity.com/t/announcing-twitter-status-and-twitter-user-web-components-for-displaying-tweets-and-users/100433?u=abraham">
<div class="loader">Twitter components</div>
</xtal-link-preview>
<xtal-link-preview href="https://jpmorganchase.github.io/perspective/">
<div class="loader">JPMorgan Chase Perspecitve</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/dabeng/OrgChart-Webcomponents">
<div class="loader">Org Charts</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/dsolimando/hnpwa-mobileelements/tree/pagination/www/lib">
<div class="loader">HNPWA Mobile Elements</div>
</xtal-link-preview>
<xtal-link-preview href="http://handsontable.github.io/hot-table/">
<div class="loader">Polymer Element wrapper for Handsontable</div>
</xtal-link-preview>
<xtal-link-preview href="https://medium.com/samsung-internet-dev/making-a-simple-gamepad-web-component-23b2ac262f56">
<div class="loader">Gamepad Web Component</div>
</xtal-link-preview>
</xtal-siema>
<p-d-x on="fetch-complete-changed" to="{href:target.href;innerText:target.title}" skip-init></p-d-x>
<a target="_blank">link</a>
<style>
xtal-siema{
max-width: 600px;
width:100%;
}
xtal-siema div{
height:99%;
}
xtal-link-preview:not([fetch-complete]) {
display: none;
}
a:not([href]) {
display: none;
}
a{
display:block;
margin-top:30px;
}
xtal-link-preview,
.openingSlide {
display:flex;
flex-direction: column;
height: 200px;
text-align: center;
}
xtal-link-preview {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
height: 100%;
width: 100%;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
/* On mouse-over, add a deeper shadow */
xtal-link-preview:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
xtal-link-preview>div {
display: flex;
height: 100%;
padding: 5px;
}
xtal-link-preview img {
object-fit: scale-down;
}
@media (min-width: 800px) {
xtal-siema{
height: 200px;
}
xtal-link-preview>div {
flex-direction: row-reverse;
justify-content: space-around;
}
xtal-link-preview img {
align-self: stretch;
filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3))
drop-shadow(0px 0px 10px rgba(0,0,0,.3));
}
}
@media (max-width: 800px) {
xtal-link-preview>div {
flex-direction: column-reverse;
align-items: center;
justify-content: center;
}
xtal-siema{
height: 300px;
}
xtal-link-preview img {
border: 1px solid #ccc;
}
}
xtal-link-preview>div>details summary::-webkit-details-marker {
display: none;
}
xtal-link-preview>div>details>summary {
margin-top: 5px;
font-weight: 800;
}
xtal-link-preview>div>details p {
text-align: left;
margin-left: 5px;
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
.textDesc {
display:flex;
flex-direction: column;
justify-content: center;
}
.loader {
display:flex;
position: relative;
top: calc(50% - 40px);
left: calc(50% - 40px);
border: 16px solid #f3f3f3;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/xtal-siema@0.0.20/xtal-siema.iife.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/wired-elements@0.8.2/dist/wired-elements.bundled.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/xtal-link-preview@0.0.31/xtal-link-preview.iife.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.61/p-d.p-d-x.p-u.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
</html>