1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import onsElements from '../ons/elements.js';
|
19 | import util from '../ons/util.js';
|
20 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
21 | import AnimatorFactory from '../ons/internal/animator-factory.js';
|
22 | import OverlaySplitterAnimator from './ons-splitter/overlay-animator.js';
|
23 | import PushSplitterAnimator from './ons-splitter/push-animator.js';
|
24 | import RevealSplitterAnimator from './ons-splitter/reveal-animator.js';
|
25 | import BaseElement from './base/base-element.js';
|
26 | import deviceBackButtonDispatcher from '../ons/internal/device-back-button-dispatcher.js';
|
27 | import contentReady from '../ons/content-ready.js';
|
28 |
|
29 | const _animatorDict = {
|
30 | default: OverlaySplitterAnimator,
|
31 | overlay: OverlaySplitterAnimator,
|
32 | push: PushSplitterAnimator,
|
33 | reveal: RevealSplitterAnimator
|
34 | };
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 | export default class SplitterElement extends BaseElement {
|
74 |
|
75 | _getSide(side) {
|
76 | const element = util.findChild(this, e => {
|
77 | return util.match(e, 'ons-splitter-side') && e.getAttribute('side') === side;
|
78 | });
|
79 | return element;
|
80 | }
|
81 |
|
82 | |
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 | get left() {
|
91 | return this._getSide('left');
|
92 | }
|
93 | |
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | get right() {
|
102 | return this._getSide('right');
|
103 | }
|
104 |
|
105 | |
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | get side() {
|
114 | return util.findChild(this, 'ons-splitter-side');
|
115 | }
|
116 |
|
117 | get _sides() {
|
118 | return [this.left, this.right].filter(e => e);
|
119 | }
|
120 | |
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | get content() {
|
129 | return util.findChild(this, 'ons-splitter-content');
|
130 | }
|
131 |
|
132 | get topPage() {
|
133 | return this.content._content;
|
134 | }
|
135 |
|
136 | get mask() {
|
137 | return util.findChild(this, 'ons-splitter-mask');
|
138 | }
|
139 |
|
140 | |
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 | get onDeviceBackButton() {
|
148 | return this._backButtonHandler;
|
149 | }
|
150 |
|
151 | set onDeviceBackButton(callback) {
|
152 | if (this._backButtonHandler) {
|
153 | this._backButtonHandler.destroy();
|
154 | }
|
155 |
|
156 | this._backButtonHandler = deviceBackButtonDispatcher.createHandler(this, callback);
|
157 | }
|
158 |
|
159 | _onDeviceBackButton(event) {
|
160 | this._sides.some(s => s.isOpen ? s.close() : false) || event.callParentHandler();
|
161 | }
|
162 |
|
163 | _onModeChange(e) {
|
164 | if (e.target.parentNode) {
|
165 | contentReady(this, () => {
|
166 | this._layout();
|
167 | });
|
168 | }
|
169 | }
|
170 |
|
171 | _layout() {
|
172 | this._sides.forEach(side => {
|
173 | if (this.content) {
|
174 | this.content.style[side.side] = side.mode === 'split' ? side.style.width : 0;
|
175 | }
|
176 | });
|
177 | }
|
178 |
|
179 | constructor() {
|
180 | super();
|
181 |
|
182 | this._onModeChange = this._onModeChange.bind(this);
|
183 |
|
184 | contentReady(this, () => {
|
185 | !this.mask && this.appendChild(document.createElement('ons-splitter-mask'));
|
186 | this._layout();
|
187 | });
|
188 | }
|
189 |
|
190 | connectedCallback() {
|
191 | this.onDeviceBackButton = this._onDeviceBackButton.bind(this);
|
192 | this.addEventListener('modechange', this._onModeChange, false);
|
193 | }
|
194 |
|
195 | disconnectedCallback() {
|
196 | this._backButtonHandler.destroy();
|
197 | this._backButtonHandler = null;
|
198 | this.removeEventListener('modechange', this._onModeChange, false);
|
199 | }
|
200 |
|
201 | attributeChangedCallback(name, last, current) {}
|
202 |
|
203 | _show() {
|
204 | util.propagateAction(this, '_show');
|
205 | }
|
206 |
|
207 | _hide() {
|
208 | util.propagateAction(this, '_hide');
|
209 | }
|
210 |
|
211 | _destroy() {
|
212 | util.propagateAction(this, '_destroy');
|
213 | this.remove();
|
214 | }
|
215 |
|
216 | static registerAnimator(name, Animator) {
|
217 | if (!(Animator instanceof SplitterAnimator)) {
|
218 | util.throwAnimator('Splitter');
|
219 | }
|
220 | _animatorDict[name] = Animator;
|
221 | }
|
222 |
|
223 | static get SplitterAnimator() {
|
224 | return SplitterAnimator;
|
225 | }
|
226 |
|
227 | static get animators() {
|
228 | return _animatorDict;
|
229 | }
|
230 | }
|
231 |
|
232 | onsElements.Splitter = SplitterElement;
|
233 | customElements.define('ons-splitter', SplitterElement);
|