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 autoStyle from '../ons/autostyle.js';
|
21 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
22 | import BaseElement from './base/base-element.js';
|
23 |
|
24 | const defaultClassName = 'list';
|
25 | const scheme = {'': 'list--*'};
|
26 |
|
27 | /**
|
28 | * @element ons-list
|
29 | * @category list
|
30 | * @modifier inset
|
31 | * [en]Inset list that doesn't cover the whole width of the parent.[/en]
|
32 | * [ja]親要素の画面いっぱいに広がらないリストを表示します。[/ja]
|
33 | * @modifier noborder
|
34 | * [en]A list with no borders at the top and bottom.[/en]
|
35 | * [ja]リストの上下のボーダーが無いリストを表示します。[/ja]
|
36 | * @description
|
37 | * [en]Component to define a list, and the container for ons-list-item(s).[/en]
|
38 | * [ja]リストを表現するためのコンポーネント。ons-list-itemのコンテナとして使用します。[/ja]
|
39 | * @seealso ons-list-item
|
40 | * [en]ons-list-item component[/en]
|
41 | * [ja]ons-list-itemコンポーネント[/ja]
|
42 | * @seealso ons-list-header
|
43 | * [en]ons-list-header component[/en]
|
44 | * [ja]ons-list-headerコンポーネント[/ja]
|
45 | * @seealso ons-lazy-repeat
|
46 | * [en]ons-lazy-repeat component[/en]
|
47 | * [ja]ons-lazy-repeatコンポーネント[/ja]
|
48 | * @codepen yxcCt
|
49 | * @tutorial vanilla/Reference/list
|
50 | * @example
|
51 | * <ons-list>
|
52 | * <ons-list-header>Header Text</ons-list-header>
|
53 | * <ons-list-item>Item</ons-list-item>
|
54 | * <ons-list-item>Item</ons-list-item>
|
55 | * </ons-list>
|
56 | */
|
57 | export default class ListElement extends BaseElement {
|
58 |
|
59 | /**
|
60 | * @attribute modifier
|
61 | * @type {String}
|
62 | * @description
|
63 | * [en]The appearance of the list.[/en]
|
64 | * [ja]リストの表現を指定します。[/ja]
|
65 | */
|
66 |
|
67 | constructor() {
|
68 | super();
|
69 |
|
70 | this._compile();
|
71 | }
|
72 |
|
73 | _compile() {
|
74 | autoStyle.prepare(this);
|
75 | this.classList.add(defaultClassName);
|
76 | ModifierUtil.initModifier(this, scheme);
|
77 | }
|
78 |
|
79 | static get observedAttributes() {
|
80 | return ['modifier', 'class'];
|
81 | }
|
82 |
|
83 | attributeChangedCallback(name, last, current) {
|
84 | switch (name) {
|
85 | case 'class':
|
86 | util.restoreClass(this, defaultClassName, scheme);
|
87 | break;
|
88 | case 'modifier':
|
89 | ModifierUtil.onModifierChanged(last, current, this, scheme);
|
90 | break;
|
91 | }
|
92 | }
|
93 | }
|
94 |
|
95 | onsElements.List = ListElement;
|
96 | customElements.define('ons-list', ListElement);
|