Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polymer 3 Support #28

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Polymer 3 Support #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7193cc0
updated component to work with polymer 3
jobizzness May 21, 2018
286f0dd
included styles
jobizzness May 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 34 additions & 14 deletions demo/all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,26 @@
<script>
Polymer = {dom: 'shadow'};
</script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../iron-swiper.html">
<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="../iron-swiper.js"></script>

<link rel="import" href="../icons.html">
<script type="module" src="../icons.js"></script>

<custom-style>
<!-- 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('div');

$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
html {
--iron-swiper-slide-background-color: white;
Expand Down Expand Up @@ -54,10 +65,16 @@
}
}
</style>
</custom-style>
</custom-style>`;

document.body.appendChild($_documentContainer);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<script type="module">
const $_documentContainer = document.createElement('div');

$_documentContainer.innerHTML = `<div class="vertical-section-container centered">

<h3>Default demo</h3>
<demo-snippet>
Expand All @@ -73,7 +90,7 @@ <h3>Default demo</h3>
<h3>Navigation demo</h3>
<demo-snippet>
<template>
<iron-swiper navigation-buttons>
<iron-swiper navigation-buttons="">
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
Expand All @@ -84,7 +101,7 @@ <h3>Navigation demo</h3>
<h3>Pagination demo</h3>
<demo-snippet>
<template>
<iron-swiper pagination>
<iron-swiper pagination="">
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
Expand All @@ -95,7 +112,7 @@ <h3>Pagination demo</h3>
<h3>Vertical Slider demo</h3>
<demo-snippet>
<template>
<iron-swiper pagination options='{"direction":"vertical"}'>
<iron-swiper pagination="" options="{&quot;direction&quot;:&quot;vertical&quot;}">
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
Expand All @@ -106,7 +123,7 @@ <h3>Vertical Slider demo</h3>
<h3>Vertical Slider demo</h3>
<demo-snippet>
<template>
<iron-swiper pagination options='{"spaceBetween":30}'>
<iron-swiper pagination="" options="{&quot;spaceBetween&quot;:30}">
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
Expand All @@ -124,7 +141,7 @@ <h3>Thumb Gallery demo</h3>
<div>Slide #2</div>
<div>Slide #3</div>
</iron-swiper>
<iron-swiper class="thumbs" selected="{{sel}}" slide-to-clicked-slide slides-per-view="auto" options='{"slidesPerView":"auto", "centered-slides":true, "spaceBetween":10,"touchRatio":0.2}'>
<iron-swiper class="thumbs" selected="{{sel}}" slide-to-clicked-slide="" slides-per-view="auto" options="{&quot;slidesPerView&quot;:&quot;auto&quot;, &quot;centered-slides&quot;:true, &quot;spaceBetween&quot;:10,&quot;touchRatio&quot;:0.2}">
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
Expand All @@ -134,6 +151,9 @@ <h3>Thumb Gallery demo</h3>
</template>
</demo-snippet>

</div>
</div>`;

document.body.appendChild($_documentContainer);
</script>
</body>
</html>
52 changes: 31 additions & 21 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,41 @@

<title>iron-swiper demo</title>

<script>
Polymer = {dom: 'shadow'};
</script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../iron-swiper.html">
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '@polymer/iron-demo-helpers/demo-snippet';
</script>
<script type="module" src="../iron-swiper.js"></script>

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</custom-style>
<!-- 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
-->
<custom-style>
<style is="custom-style"
include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic iron-swiper demo</h3>
<demo-snippet>
<template>
<iron-swiper loop a11y keyboard pagination pagination-clickable>
<img src="./sample.jpg">
<img src="./sample.jpg">
<img src="./sample.jpg">
</iron-swiper>
</template>
</demo-snippet>
</div>
<h3>Basic iron-swiper demo</h3>
<demo-snippet>
<template>
<iron-swiper loop="" a11y="" keyboard="" pagination="" pagination-clickable="">
<img src="./sample.jpg">
<img src="./sample.jpg">
<img src="./sample.jpg">
</iron-swiper>
</template>
</demo-snippet>
</div>

</body>
</html>
38 changes: 29 additions & 9 deletions demo/selected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,36 @@
<script>
Polymer = {dom: 'shadow'};
</script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../iron-swiper.html">
<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="../iron-swiper.js"></script>

<custom-style>
<!-- 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('div');

$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</custom-style>`;

document.body.appendChild($_documentContainer);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<script type="module">
const $_documentContainer = document.createElement('div');

$_documentContainer.innerHTML = `<div class="vertical-section-container centered">

<h3>Thumbs Gallery With Two-way Control</h3>
<demo-snippet>
Expand All @@ -37,7 +54,7 @@ <h3>Selected: [[sel]]</h3>
<img src="./sample.jpg">
<a href="https://google.com"><img src="./sample.jpg"></a>
</iron-swiper>
<iron-swiper selected="{{sel}}" class="bottom" touch-ratio="0.2" slide-to-clicked-slide centered-slides slides-per-view="auto">
<iron-swiper selected="{{sel}}" class="bottom" touch-ratio="0.2" slide-to-clicked-slide="" centered-slides="" slides-per-view="auto">
<img src="./sample.jpg" style="width: 100px;">
<img src="./sample.jpg" style="width: 100px;">
<img src="./sample.jpg" style="width: 100px;">
Expand All @@ -49,6 +66,9 @@ <h3>Selected: [[sel]]</h3>
</dom-bind>
</template>
</demo-snippet>
</div>
</div>`;

document.body.appendChild($_documentContainer);
</script>
</body>
</html>
9 changes: 0 additions & 9 deletions icons.html
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
const $_documentContainer = document.createElement('div');
$_documentContainer.setAttribute('style', 'display: none;');

$_documentContainer.innerHTML = `<iron-iconset-svg size="24" name="iron-swiper">
<svg><defs>
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
<g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g>
</defs></svg>
</iron-iconset-svg>`;

document.head.appendChild($_documentContainer);
25 changes: 14 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>iron-swiper</title>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh"
content="0;url=demo/" />
<title>iron-swiper</title>
</head>

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<body>
<!--
Visit demo/index.html to see live examples of your element running.
This page will automatically redirect you there when run in the browser
with `polymer serve`.
-->
</body>

<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="iron-swiper.html"></iron-component-page>
</body>
</html>
</html>
Loading