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 internal from '../ons/internal/index.js';
|
21 | import autoStyle from '../ons/autostyle.js';
|
22 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
23 | import BaseElement from './base/base-element.js';
|
24 | import contentReady from '../ons/content-ready.js';
|
25 |
|
26 | const defaultClassName = 'toolbar';
|
27 |
|
28 | const scheme = {
|
29 | '': 'toolbar--*',
|
30 | '.toolbar__left': 'toolbar--*__left',
|
31 | '.toolbar__center': 'toolbar--*__center',
|
32 | '.toolbar__right': 'toolbar--*__right'
|
33 | };
|
34 |
|
35 | /**
|
36 | * @element ons-toolbar
|
37 | * @category page
|
38 | * @modifier material
|
39 | * [en]Material Design toolbar.[/en]
|
40 | * [ja][/ja]
|
41 | * @modifier transparent
|
42 | * [en]Transparent toolbar.[/en]
|
43 | * [ja]透明な背景を持つツールバーを表示します。[/ja]
|
44 | * @modifier cover-content
|
45 | * [en]Displays the toolbar on top of the page's content. Should be combined with `transparent` modifier.[/en]
|
46 | * [ja][/ja]
|
47 | * @modifier noshadow
|
48 | * [en]Toolbar without shadow.[/en]
|
49 | * [ja]ツールバーに影を付けずに表示します。[/ja]
|
50 | * @description
|
51 | * [en]
|
52 | * Toolbar component that can be used with navigation.
|
53 | *
|
54 | * Left, center and right containers can be specified by class names.
|
55 | *
|
56 | * This component will automatically display as a Material Design toolbar when running on Android devices.
|
57 | * [/en]
|
58 | * [ja]ナビゲーションで使用するツールバー用コンポーネントです。クラス名により、左、中央、右のコンテナを指定できます。[/ja]
|
59 | * @codepen aHmGL
|
60 | * @tutorial vanilla/Reference/toolbar
|
61 | * @guide compilation.html#toolbar-compilation [en]Adding a toolbar[/en][ja]ツールバーの追加[/ja]
|
62 | * @seealso ons-bottom-toolbar
|
63 | * [en]The `<ons-bottom-toolbar>` displays a toolbar on the bottom of the page.[/en]
|
64 | * [ja]ons-bottom-toolbarコンポーネント[/ja]
|
65 | * @seealso ons-back-button
|
66 | * [en]The `<ons-back-button>` component displays a back button inside the toolbar.[/en]
|
67 | * [ja]ons-back-buttonコンポーネント[/ja]
|
68 | * @seealso ons-toolbar-button
|
69 | * [en]The `<ons-toolbar-button>` component displays a toolbar button inside the toolbar.[/en]
|
70 | * [ja]ons-toolbar-buttonコンポーネント[/ja]
|
71 | * @example
|
72 | * <ons-page>
|
73 | * <ons-toolbar>
|
74 | * <div class="left">
|
75 | * <ons-back-button>
|
76 | * Back
|
77 | * </ons-back-button>
|
78 | * </div>
|
79 | * <div class="center">
|
80 | * Title
|
81 | * </div>
|
82 | * <div class="right">
|
83 | * <ons-toolbar-button>
|
84 | * <ons-icon icon="md-menu"></ons-icon>
|
85 | * </ons-toolbar-button>
|
86 | * </div>
|
87 | * </ons-toolbar>
|
88 | * </ons-page>
|
89 | */
|
90 |
|
91 | export default class ToolbarElement extends BaseElement {
|
92 |
|
93 | /**
|
94 | * @attribute inline
|
95 | * @initonly
|
96 | * @description
|
97 | * [en]Display the toolbar as an inline element.[/en]
|
98 | * [ja]ツールバーをインラインに置きます。スクロール領域内にそのまま表示されます。[/ja]
|
99 | */
|
100 |
|
101 | /**
|
102 | * @attribute static
|
103 | * @description
|
104 | * [en]Static toolbars are not animated by `ons-navigator` when pushing or popping pages. This can be useful to improve performance in some situations.[/en]
|
105 | * [ja][/ja]
|
106 | */
|
107 |
|
108 | /**
|
109 | * @property static
|
110 | * @type {Boolean}
|
111 | * @description
|
112 | * [en]Static toolbars are not animated by `ons-navigator` when pushing or popping pages. This can be useful to improve performance in some situations.[/en]
|
113 | * [ja][/ja]
|
114 | */
|
115 |
|
116 | /**
|
117 | * @attribute modifier
|
118 | * @description
|
119 | * [en]The appearance of the toolbar.[/en]
|
120 | * [ja]ツールバーの表現を指定します。[/ja]
|
121 | */
|
122 |
|
123 | /**
|
124 | * @property visible
|
125 | * @description
|
126 | * [en]Whether the toolbar is shown or not.[/en]
|
127 | * [ja][/ja]
|
128 | */
|
129 |
|
130 | constructor() {
|
131 | super();
|
132 |
|
133 | this._visible = true;
|
134 |
|
135 | contentReady(this, () => {
|
136 | this._compile();
|
137 | });
|
138 | }
|
139 |
|
140 | static get observedAttributes() {
|
141 | return ['modifier', 'class'];
|
142 | }
|
143 |
|
144 | attributeChangedCallback(name, last, current) {
|
145 | switch (name) {
|
146 | case 'class':
|
147 | util.restoreClass(this, defaultClassName, scheme);
|
148 | break;
|
149 | case 'modifier':
|
150 | ModifierUtil.onModifierChanged(last, current, this, scheme);
|
151 | break;
|
152 | }
|
153 | }
|
154 |
|
155 | /**
|
156 | * @method setVisibility
|
157 | * @signature setVisibility(visible)
|
158 | * @param {Boolean} visible
|
159 | * [en]Set to true to show the toolbar, false to hide it[/en]
|
160 | * [ja][/ja]
|
161 | * @description
|
162 | * [en]Shows the toolbar if visible is true, otherwise hides it.[/en]
|
163 | * [ja][/ja]
|
164 | */
|
165 | setVisibility(visible) {
|
166 | contentReady(this, () => {
|
167 | this._visible = visible;
|
168 |
|
169 | this.style.display = visible ? '' : 'none';
|
170 |
|
171 | if (this.parentNode) {
|
172 | const siblingBackground = util.findChild(this.parentNode, '.page__background');
|
173 | if (siblingBackground) {
|
174 | siblingBackground.style.top = visible ? null : 0;
|
175 | }
|
176 |
|
177 | const siblingContent = util.findChild(this.parentNode, '.page__content');
|
178 | if (siblingContent) {
|
179 | siblingContent.style.top = visible ? null : 0;
|
180 | }
|
181 | }
|
182 | });
|
183 | }
|
184 |
|
185 | /**
|
186 | * @method show
|
187 | * @signature show()
|
188 | * @description
|
189 | * [en]Show the toolbar.[/en]
|
190 | * [ja][/ja]
|
191 | */
|
192 | show() {
|
193 | this.setVisibility(true);
|
194 | }
|
195 |
|
196 | /**
|
197 | * @method hide
|
198 | * @signature hide()
|
199 | * @description
|
200 | * [en]Hide the toolbar.[/en]
|
201 | * [ja][/ja]
|
202 | */
|
203 | hide() {
|
204 | this.setVisibility(false);
|
205 | }
|
206 |
|
207 | get visible() {
|
208 | return this._visible;
|
209 | }
|
210 |
|
211 | set visible(value) {
|
212 | this.setVisibility(value);
|
213 | }
|
214 |
|
215 | /**
|
216 | * @return {HTMLElement}
|
217 | */
|
218 | _getToolbarLeftItemsElement() {
|
219 | return this.querySelector('.left') || internal.nullElement;
|
220 | }
|
221 |
|
222 | /**
|
223 | * @return {HTMLElement}
|
224 | */
|
225 | _getToolbarCenterItemsElement() {
|
226 | return this.querySelector('.center') || internal.nullElement;
|
227 | }
|
228 |
|
229 | /**
|
230 | * @return {HTMLElement}
|
231 | */
|
232 | _getToolbarRightItemsElement() {
|
233 | return this.querySelector('.right') || internal.nullElement;
|
234 | }
|
235 |
|
236 | /**
|
237 | * @return {HTMLElement}
|
238 | */
|
239 | _getToolbarBackButtonLabelElement() {
|
240 | return this.querySelector('ons-back-button .back-button__label') || internal.nullElement;
|
241 | }
|
242 |
|
243 | /**
|
244 | * @return {HTMLElement}
|
245 | */
|
246 | _getToolbarBackButtonIconElement() {
|
247 | return this.querySelector('ons-back-button .back-button__icon') || internal.nullElement;
|
248 | }
|
249 |
|
250 | _compile() {
|
251 | autoStyle.prepare(this);
|
252 | this.classList.add(defaultClassName);
|
253 | this._ensureToolbarItemElements();
|
254 | ModifierUtil.initModifier(this, scheme);
|
255 | }
|
256 |
|
257 | _ensureToolbarItemElements() {
|
258 | for (let i = this.childNodes.length - 1; i >= 0 ; i--) {
|
259 | // case of not element
|
260 | if (this.childNodes[i].nodeType != 1) {
|
261 | this.removeChild(this.childNodes[i]);
|
262 | }
|
263 | }
|
264 |
|
265 | const center = this._ensureToolbarElement('center');
|
266 | center.classList.add('toolbar__title');
|
267 |
|
268 | if (this.children.length !== 1 || !this.children[0].classList.contains('center')) {
|
269 | const left = this._ensureToolbarElement('left');
|
270 | const right = this._ensureToolbarElement('right');
|
271 |
|
272 | if (this.children[0] !== left || this.children[1] !== center || this.children[2] !== right) {
|
273 | this.appendChild(left);
|
274 | this.appendChild(center);
|
275 | this.appendChild(right);
|
276 | }
|
277 | }
|
278 | }
|
279 |
|
280 | _ensureToolbarElement(name) {
|
281 | if (util.findChild(this, '.toolbar__' + name)) {
|
282 | const element = util.findChild(this, '.toolbar__' + name);
|
283 | element.classList.add(name);
|
284 | return element;
|
285 | }
|
286 |
|
287 | const element = util.findChild(this, '.' + name) || util.create('.' + name);
|
288 | element.classList.add('toolbar__' + name);
|
289 |
|
290 | return element;
|
291 | }
|
292 | }
|
293 |
|
294 | util.defineBooleanProperties(ToolbarElement, ['static']);
|
295 |
|
296 | onsElements.Toolbar = ToolbarElement;
|
297 | customElements.define('ons-toolbar', ToolbarElement);
|