1 | /*
|
2 | Copyright 2013-2015 ASIAL CORPORATION
|
3 |
|
4 | Licensed under the Apache License, Version 2.0 (the "License");
|
5 | you may not use this file except in compliance with the License.
|
6 | You may obtain a copy of the License at
|
7 |
|
8 | http://www.apache.org/licenses/LICENSE-2.0
|
9 |
|
10 | Unless required by applicable law or agreed to in writing, software
|
11 | distributed under the License is distributed on an "AS IS" BASIS,
|
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | See the License for the specific language governing permissions and
|
14 | limitations under the License.
|
15 |
|
16 | */
|
17 |
|
18 | import onsElements from '../ons/elements.js';
|
19 | import util from '../ons/util.js';
|
20 | import BaseElement from './base/base-element.js';
|
21 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
22 | const scheme = {'': 'carousel-item--*'};
|
23 |
|
24 | /**
|
25 | * @element ons-carousel-item
|
26 | * @category carousel
|
27 | * @description
|
28 | * [en]
|
29 | * Carousel item component. Used as a child of the `<ons-carousel>` element.
|
30 | * [/en]
|
31 | * [ja][/ja]
|
32 | * @codepen xbbzOQ
|
33 | * @tutorial vanilla/Reference/carousel
|
34 | * @seealso ons-carousel
|
35 | * [en]`<ons-carousel>` components[/en]
|
36 | * [ja]<ons-carousel>コンポーネント[/ja]
|
37 | * @example
|
38 | * <ons-carousel style="width: 100%; height: 200px">
|
39 | * <ons-carousel-item>
|
40 | * ...
|
41 | * </ons-carousel-item>
|
42 | * <ons-carousel-item>
|
43 | * ...
|
44 | * </ons-carousel-item>
|
45 | * </ons-carousel>
|
46 | */
|
47 | export default class CarouselItemElement extends BaseElement {
|
48 |
|
49 | constructor() {
|
50 | super();
|
51 |
|
52 | this.style.width = '100%';
|
53 | ModifierUtil.initModifier(this, scheme);
|
54 | }
|
55 |
|
56 | static get observedAttributes() {
|
57 | return ['modifier'];
|
58 | }
|
59 |
|
60 | attributeChangedCallback(name, last, current) {
|
61 | if (name === 'modifier') {
|
62 | return ModifierUtil.onModifierChanged(last, current, this, scheme);
|
63 | }
|
64 | }
|
65 | }
|
66 |
|
67 | onsElements.CarouselItem = CarouselItemElement;
|
68 | customElements.define('ons-carousel-item', CarouselItemElement);
|