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-header';
|
25 | const scheme = {'': 'list-header--*'};
|
26 |
|
27 | /**
|
28 | * @element ons-list-header
|
29 | * @category list
|
30 | * @description
|
31 | * [en]Header element for list items. Must be put inside the `<ons-list>` component.[/en]
|
32 | * [ja]リスト要素に使用するヘッダー用コンポーネント。ons-listと共に使用します。[/ja]
|
33 | * @seealso ons-list
|
34 | * [en]The `<ons-list>` component[/en]
|
35 | * [ja]ons-listコンポーネント[/ja]
|
36 | * @seealso ons-list-item
|
37 | * [en]The `<ons-list-item>` component[/en]
|
38 | * [ja]ons-list-itemコンポーネント[/ja]
|
39 | * @codepen yxcCt
|
40 | * @tutorial vanilla/Reference/list
|
41 | * @modifier material
|
42 | * [en]Display a Material Design list header.[/en]
|
43 | * [ja][/ja]
|
44 | * @example
|
45 | * <ons-list>
|
46 | * <ons-list-header>Header Text</ons-list-header>
|
47 | * <ons-list-item>Item</ons-list-item>
|
48 | * <ons-list-item>Item</ons-list-item>
|
49 | * </ons-list>
|
50 | */
|
51 | export default class ListHeaderElement extends BaseElement {
|
52 |
|
53 | /**
|
54 | * @attribute modifier
|
55 | * @type {String}
|
56 | * @description
|
57 | * [en]The appearance of the list header.[/en]
|
58 | * [ja]ヘッダーの表現を指定します。[/ja]
|
59 | */
|
60 |
|
61 | constructor() {
|
62 | super();
|
63 |
|
64 | this._compile();
|
65 | }
|
66 |
|
67 | _compile() {
|
68 | autoStyle.prepare(this);
|
69 | this.classList.add(defaultClassName);
|
70 | ModifierUtil.initModifier(this, scheme);
|
71 | }
|
72 |
|
73 | static get observedAttributes() {
|
74 | return ['modifier', 'class'];
|
75 | }
|
76 |
|
77 | attributeChangedCallback(name, last, current) {
|
78 | switch (name) {
|
79 | case 'class':
|
80 | util.restoreClass(this, defaultClassName, scheme);
|
81 | break;
|
82 | case 'modifier':
|
83 | ModifierUtil.onModifierChanged(last, current, this, scheme);
|
84 | break;
|
85 | }
|
86 | }
|
87 | }
|
88 |
|
89 | onsElements.ListHeader = ListHeaderElement;
|
90 | customElements.define('ons-list-header', ListHeaderElement);
|