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 ModifierUtil from '../ons/internal/modifier-util.js';
|
22 | import BaseElement from './base/base-element.js';
|
23 | import {PageLoader, defaultPageLoader} from '../ons/page-loader.js';
|
24 | import contentReady from '../ons/content-ready.js';
|
25 |
|
26 | const rewritables = {
|
27 | /**
|
28 | * @param {Element} element
|
29 | * @param {Function} callback
|
30 | */
|
31 | ready(element, callback) {
|
32 | setImmediate(callback);
|
33 | }
|
34 | };
|
35 |
|
36 | /**
|
37 | * @element ons-splitter-content
|
38 | * @category menu
|
39 | * @description
|
40 | * [en]
|
41 | * The `<ons-splitter-content>` element is used as a child element of `<ons-splitter>`.
|
42 | *
|
43 | * It contains the main content of the page while `<ons-splitter-side>` contains the list.
|
44 | * [/en]
|
45 | * [ja]ons-splitter-content要素は、ons-splitter要素の子要素として利用します。[/ja]
|
46 | * @codepen rOQOML
|
47 | * @tutorial vanilla/Reference/splitter
|
48 | * @guide fundamentals.html#managing-pages
|
49 | * [en]Managing multiple pages.[/en]
|
50 | * [ja]複数のページを管理する[/ja]
|
51 | * @seealso ons-splitter
|
52 | * [en]The `<ons-splitter>` component is the parent element.[/en]
|
53 | * [ja]ons-splitterコンポーネント[/ja]
|
54 | * @seealso ons-splitter-side
|
55 | * [en]The `<ons-splitter-side>` component contains the menu.[/en]
|
56 | * [ja]ons-splitter-sideコンポーネント[/ja]
|
57 | * @example
|
58 | * <ons-splitter>
|
59 | * <ons-splitter-content>
|
60 | * ...
|
61 | * </ons-splitter-content>
|
62 | *
|
63 | * <ons-splitter-side side="left" width="80%" collapse>
|
64 | * ...
|
65 | * </ons-splitter-side>
|
66 | * </ons-splitter>
|
67 | */
|
68 | export default class SplitterContentElement extends BaseElement {
|
69 |
|
70 | /**
|
71 | * @attribute page
|
72 | * @type {String}
|
73 | * @description
|
74 | * [en]
|
75 | * The url of the content page. If this attribute is used the content will be loaded from a `<template>` tag or a remote file.
|
76 | *
|
77 | * It is also possible to put `<ons-page>` element as a child of the element.
|
78 | * [/en]
|
79 | * [ja]ons-splitter-content要素に表示するページのURLを指定します。[/ja]
|
80 | */
|
81 |
|
82 | constructor() {
|
83 | super();
|
84 |
|
85 | this._page = null;
|
86 | this._pageLoader = defaultPageLoader;
|
87 |
|
88 | contentReady(this, () => {
|
89 | rewritables.ready(this, () => {
|
90 | const page = this._getPageTarget();
|
91 |
|
92 | if (page) {
|
93 | this.load(page);
|
94 | }
|
95 | });
|
96 | });
|
97 | }
|
98 |
|
99 | connectedCallback() {
|
100 | if (!util.match(this.parentNode, 'ons-splitter')) {
|
101 | util.throw('"ons-splitter-content" must have "ons-splitter" as parent');
|
102 | }
|
103 | }
|
104 |
|
105 | _getPageTarget() {
|
106 | return this._page || this.getAttribute('page');
|
107 | }
|
108 |
|
109 | disconnectedCallback() {}
|
110 |
|
111 | static get observedAttributes() {
|
112 | return [];
|
113 | }
|
114 |
|
115 | attributeChangedCallback(name, last, current) {
|
116 | }
|
117 |
|
118 | /**
|
119 | * @property page
|
120 | * @type {HTMLElement}
|
121 | * @description
|
122 | * [en]The page to load in the splitter content.[/en]
|
123 | * [ja]この要素内に表示するページを指定します。[/ja]
|
124 | */
|
125 | get page() {
|
126 | return this._page;
|
127 | }
|
128 |
|
129 | /**
|
130 | * @param {*} page
|
131 | */
|
132 | set page(page) {
|
133 | this._page = page;
|
134 | }
|
135 |
|
136 | get _content() {
|
137 | return this.children[0];
|
138 | }
|
139 |
|
140 | /**
|
141 | * @property pageLoader
|
142 | * @type {Function}
|
143 | * @description
|
144 | * [en]Page element loaded in the splitter content.[/en]
|
145 | * [ja]この要素内に表示するページを指定します。[/ja]
|
146 | */
|
147 | get pageLoader() {
|
148 | return this._pageLoader;
|
149 | }
|
150 |
|
151 | set pageLoader(loader) {
|
152 | if (!(loader instanceof PageLoader)) {
|
153 | util.throwPageLoader();
|
154 | }
|
155 | this._pageLoader = loader;
|
156 | }
|
157 |
|
158 | /**
|
159 | * @method load
|
160 | * @signature load(page, [options])
|
161 | * @param {String} page, [options]
|
162 | * [en]Page URL. Can be either an HTML document or an `<template>` id.[/en]
|
163 | * [ja]pageのURLか、`<template>`で宣言したテンプレートのid属性の値を指定します。[/ja]
|
164 | * @param {Object} [options]
|
165 | * @param {Function} [options.callback]
|
166 | * @description
|
167 | * [en]Show the page specified in `page` in the content.[/en]
|
168 | * [ja]指定したURLをメインページを読み込みます。[/ja]
|
169 | * @return {Promise}
|
170 | * [en]Resolves to the new `<ons-page>` element[/en]
|
171 | * [ja]`<ons-page>`要素を解決するPromiseオブジェクトを返します。[/ja]
|
172 | */
|
173 | load(page, options = {}) {
|
174 | this._page = page;
|
175 | const callback = options.callback || function() {};
|
176 |
|
177 | return new Promise(resolve => {
|
178 | let oldContent = this._content || null;
|
179 |
|
180 | this._pageLoader.load({page, parent: this}, pageElement => {
|
181 | if (oldContent) {
|
182 | this._pageLoader.unload(oldContent);
|
183 | oldContent = null;
|
184 | }
|
185 |
|
186 | setImmediate(() => this._show());
|
187 |
|
188 | callback(pageElement);
|
189 | resolve(pageElement);
|
190 | });
|
191 | });
|
192 | }
|
193 |
|
194 | _show() {
|
195 | if (this._content) {
|
196 | this._content._show();
|
197 | }
|
198 | }
|
199 |
|
200 | _hide() {
|
201 | if (this._content) {
|
202 | this._content._hide();
|
203 | }
|
204 | }
|
205 |
|
206 | _destroy() {
|
207 | if (this._content) {
|
208 | this._pageLoader.unload(this._content);
|
209 | }
|
210 | this.remove();
|
211 | }
|
212 |
|
213 | static get rewritables() {
|
214 | return rewritables;
|
215 | }
|
216 | }
|
217 |
|
218 | onsElements.SplitterContent = SplitterContentElement;
|
219 | customElements.define('ons-splitter-content', SplitterContentElement);
|