MagicCarousel/magic-carousel.html at master · acarbone/MagicCarousel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-selector/core-selector.html">

<!--
Element providing an all-solution responsive Carousel for the Web.

##### Example

		<magic-carousel></magic-carousel>

@element magic-carousel
@blurb Element providing an all-solution responsive Carousel for the Web.
@status alpha
@homepage http://polymerlabs.github.io/magic-carousel

TODO:
- circular animation without going back
- navigation arrows
- navigation dots
- navigation with swipe
-->
<polymer-element name="magic-carousel" extends="core-selector"
	attributes="transition height selected interval auto transitionDuration arrows dots">
	<template>
		<link rel="stylesheet" href="magic-carousel.css">

		<div class="slides-wrapper slides-wrapper--{{transition}} {{ { 'slides-wrapper--transition': transitionEnabled } | tokenList }}" on-mouseover="{{stopInterval}}" on-mouseout="{{startInterval}}" on-transitionend="{{transitionEnd}}">
			<shadow></shadow>
		</div>
	</template>

	<script>
		Polymer('magic-carousel', {

			transitionDuration: 200,
			transitionEnabled: true,
			interval: 1000,
			height: 300,
			transition: 'slide',
			auto: true,
			selected: 0,
			arrows: true,
			dots: false,

			created: function() {
				this.transitions = ['slide', 'fade'];
			},

			ready: function() {
				this.super();

				var node = this.items[0];
				var clone = node.cloneNode(true);
				node.parentNode.appendChild(clone);
				this.length = this.items.length;

				window.addEventListener('resize', this.adjustSize.bind(this));
				this.adjustSize();
				this.startInterval();
			},

			selectNext: function() {
				this.selected++;
				if (this.selected >= this.length)
					this.selected = 0;
			},

			selectPrev: function() {
				this.selected--;
				if (this.selected < 0)
					this.selected = this.length - 1;
			},

			transitionEnd: function() {
				if (this.selected + 1 == this.length) {
					this.transitionEnabled = false;
					this.selected = 0;

					//todo: better with RAF
					setTimeout(function() {
						this.transitionEnabled = true;
					}.bind(this), 1);
				}
			},

			adjustSize: function() {
				this.width = this.clientWidth;
			},

			startInterval: function() {
				if (!this.auto)
					return false;
				this.intervalID = setInterval(this.selectNext.bind(this), this.interval);
			},

			stopInterval: function() {
				if (!this.auto)
					return false;
				clearInterval(this.intervalID);
			}
		});
	</script>
</polymer-element>