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 = 'bottom-bar';
|
25 | const scheme = {'': 'bottom-bar--*'};
|
26 |
|
27 | /**
|
28 | * @element ons-bottom-toolbar
|
29 | * @category page
|
30 | * @description
|
31 | * [en]Toolbar component that is positioned at the bottom of the page. Since bottom toolbars are very versatile elements, `ons-bottom-toolbar` does not provide any specific layout syntax for its children. Modifiers or custom CSS must be used.[/en]
|
32 | * [ja]ページ下部に配置されるツールバー用コンポーネントです。[/ja]
|
33 | * @modifier transparent
|
34 | * [en]Make the toolbar transparent.[/en]
|
35 | * [ja]ツールバーの背景を透明にして表示します。[/ja]
|
36 | * @modifier aligned
|
37 | * [en]Vertically aligns its children and applies flexbox for block elements. `justify-content` CSS rule can be used to change horizontal align.[/en]
|
38 | * [ja]ツールバーの背景を透明にして表示します。[/ja]
|
39 | * @seealso ons-toolbar [en]ons-toolbar component[/en][ja]ons-toolbarコンポーネント[/ja]
|
40 | * @example
|
41 | * <ons-bottom-toolbar>
|
42 | * Content
|
43 | * </ons-bottom-toolbar>
|
44 | */
|
45 | export default class BottomToolbarElement extends BaseElement {
|
46 | /**
|
47 | * @attribute modifier
|
48 | * @type {String}
|
49 | * @description
|
50 | * [en]The appearance of the toolbar.[/en]
|
51 | * [ja]ツールバーの見た目の表現を指定します。[/ja]
|
52 | */
|
53 |
|
54 | constructor() {
|
55 | super();
|
56 |
|
57 | this.classList.add(defaultClassName);
|
58 | ModifierUtil.initModifier(this, scheme);
|
59 | }
|
60 |
|
61 | static get observedAttributes() {
|
62 | return ['modifier', 'class'];
|
63 | }
|
64 |
|
65 | attributeChangedCallback(name, last, current) {
|
66 | switch (name) {
|
67 | case 'class':
|
68 | util.restoreClass(this, defaultClassName, scheme);
|
69 | break;
|
70 | case 'modifier':
|
71 | ModifierUtil.onModifierChanged(last, current, this, scheme);
|
72 | break;
|
73 | }
|
74 | }
|
75 |
|
76 | }
|
77 |
|
78 | onsElements.BottomToolbar = BottomToolbarElement;
|
79 | customElements.define('ons-bottom-toolbar', BottomToolbarElement);
|