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 internal from '../ons/internal/index.js';
|
21 | import SwipeReveal from '../ons/internal/swipe-reveal.js';
|
22 | import AnimatorFactory from '../ons/internal/animator-factory.js';
|
23 | import NavigatorAnimator from './ons-navigator/animator.js';
|
24 | import IOSSlideNavigatorAnimator from './ons-navigator/ios-slide-animator.js';
|
25 | import IOSLiftNavigatorAnimator from './ons-navigator/ios-lift-animator.js';
|
26 | import IOSFadeNavigatorAnimator from './ons-navigator/ios-fade-animator.js';
|
27 | import MDSlideNavigatorAnimator from './ons-navigator/md-slide-animator.js';
|
28 | import MDLiftNavigatorAnimator from './ons-navigator/md-lift-animator.js';
|
29 | import MDFadeNavigatorAnimator from './ons-navigator/md-fade-animator.js';
|
30 | import NoneNavigatorAnimator from './ons-navigator/none-animator.js';
|
31 | import platform from '../ons/platform.js';
|
32 | import contentReady from '../ons/content-ready.js';
|
33 | import BaseElement from './base/base-element.js';
|
34 | import deviceBackButtonDispatcher from '../ons/internal/device-back-button-dispatcher.js';
|
35 | import {PageLoader, defaultPageLoader, instantPageLoader} from '../ons/page-loader.js';
|
36 |
|
37 | const _animatorDict = {
|
38 | 'default': function () { return platform.isAndroid() ? MDFadeNavigatorAnimator : IOSSlideNavigatorAnimator; },
|
39 | 'slide': function () { return platform.isAndroid() ? MDSlideNavigatorAnimator : IOSSlideNavigatorAnimator; },
|
40 | 'lift': function () { return platform.isAndroid() ? MDLiftNavigatorAnimator : IOSLiftNavigatorAnimator; },
|
41 | 'fade': function () { return platform.isAndroid() ? MDFadeNavigatorAnimator : IOSFadeNavigatorAnimator; },
|
42 | 'slide-ios': IOSSlideNavigatorAnimator,
|
43 | 'slide-md': MDSlideNavigatorAnimator,
|
44 | 'lift-ios': IOSLiftNavigatorAnimator,
|
45 | 'lift-md': MDLiftNavigatorAnimator,
|
46 | 'fade-ios': IOSFadeNavigatorAnimator,
|
47 | 'fade-md': MDFadeNavigatorAnimator,
|
48 | 'none': NoneNavigatorAnimator
|
49 | };
|
50 |
|
51 | const rewritables = {
|
52 | |
53 |
|
54 |
|
55 |
|
56 | ready(navigatorElement, callback) {
|
57 | callback();
|
58 | }
|
59 | };
|
60 |
|
61 | const verifyPageElement = el => (el.nodeName !== 'ONS-PAGE') && util.throw( 'Only page elements can be children of navigator');
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | export default class NavigatorElement extends BaseElement {
|
115 |
|
116 | |
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | |
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | |
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 | |
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 | |
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | |
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 | |
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 | |
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 | |
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | |
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 | |
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 | |
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 | get animatorFactory() {
|
269 | return this._animatorFactory;
|
270 | }
|
271 |
|
272 | constructor() {
|
273 | super();
|
274 |
|
275 | this._isRunning = false;
|
276 | this._initialized = false;
|
277 | this._pageLoader = defaultPageLoader;
|
278 | this._pageMap = new WeakMap();
|
279 |
|
280 | this._updateAnimatorFactory();
|
281 | }
|
282 |
|
283 | |
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 | get pageLoader() {
|
291 | return this._pageLoader;
|
292 | }
|
293 |
|
294 | set pageLoader(pageLoader) {
|
295 | if (!(pageLoader instanceof PageLoader)) {
|
296 | util.throwPageLoader();
|
297 | }
|
298 | this._pageLoader = pageLoader;
|
299 | }
|
300 |
|
301 | _getPageTarget() {
|
302 | return this._page || this.getAttribute('page');
|
303 | }
|
304 |
|
305 | |
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 | get page() {
|
313 | return this._page;
|
314 | }
|
315 |
|
316 | set page(page) {
|
317 | this._page = page;
|
318 | }
|
319 |
|
320 | connectedCallback() {
|
321 | this.onDeviceBackButton = this._onDeviceBackButton.bind(this);
|
322 |
|
323 | if (!platform.isAndroid() || this.getAttribute('swipeable') === 'force') {
|
324 | let swipeAnimator;
|
325 |
|
326 | this._swipe = new SwipeReveal({
|
327 | element: this,
|
328 | getThreshold: () => Math.max(0.2, parseFloat(this.getAttribute('swipe-threshold')) || 0),
|
329 |
|
330 | swipeMax: () => {
|
331 | const ratio = 1;
|
332 | const animationOptions = { duration: swipeAnimator.durationSwipe, timing: swipeAnimator.timingSwipe };
|
333 | this._onSwipe && this._onSwipe(ratio, animationOptions);
|
334 | util.triggerElementEvent(this, 'swipe', { ratio, animationOptions });
|
335 | this[this.swipeMax ? 'swipeMax' : 'popPage']({ animator: swipeAnimator, swipeToPop: true });
|
336 | swipeAnimator = null;
|
337 | },
|
338 | swipeMid: (distance, width) => {
|
339 | const ratio = distance / width;
|
340 | this._onSwipe && this._onSwipe(ratio);
|
341 | util.triggerElementEvent(this, 'swipe', { ratio });
|
342 | swipeAnimator.translate(distance, width, this.topPage.previousElementSibling, this.topPage);
|
343 | },
|
344 | swipeMin: () => {
|
345 | const ratio = 0;
|
346 | const animationOptions = { duration: swipeAnimator.durationRestore, timing: swipeAnimator.timingSwipe };
|
347 | this._onSwipe && this._onSwipe(ratio, animationOptions);
|
348 | util.triggerElementEvent(this, 'swipe', { ratio, animationOptions });
|
349 | swipeAnimator.restore(this.topPage.previousElementSibling, this.topPage);
|
350 | swipeAnimator = null;
|
351 | },
|
352 |
|
353 | ignoreSwipe: (event, distance) => {
|
354 |
|
355 | if (!this._isRunning && this.children.length > 1) {
|
356 |
|
357 |
|
358 | const area = parseInt(this.getAttribute('swipe-target-width') || 25, 10);
|
359 | if (event.gesture.direction === 'right' && area > distance) {
|
360 |
|
361 |
|
362 | const isBB = el => /ons-back-button/i.test(el.tagName);
|
363 | if (!isBB(event.target) && !util.findParent(event.target, isBB, p => /ons-page/i.test(p.tagName))) {
|
364 |
|
365 |
|
366 | const animation = (this.topPage.pushedOptions || {}).animation || this.animatorFactory._animation;
|
367 | const Animator = _animatorDict[animation] instanceof Function
|
368 | ? _animatorDict[animation].call()
|
369 | : _animatorDict[animation];
|
370 |
|
371 | if (typeof Animator !== 'undefined' && Animator.swipeable) {
|
372 | swipeAnimator = new Animator();
|
373 | return false;
|
374 | }
|
375 | }
|
376 | }
|
377 | }
|
378 |
|
379 | return true;
|
380 | }
|
381 | });
|
382 |
|
383 | this.attributeChangedCallback('swipeable');
|
384 | }
|
385 |
|
386 | if (this._initialized) {
|
387 | return;
|
388 | }
|
389 |
|
390 | this._initialized = true;
|
391 |
|
392 | const deferred = util.defer();
|
393 | this.loaded = deferred.promise;
|
394 |
|
395 | rewritables.ready(this, () => {
|
396 | const show = !util.hasAnyComponentAsParent(this);
|
397 | const options = { animation: 'none', show };
|
398 |
|
399 | if (this.pages.length === 0 && this._getPageTarget()) {
|
400 | this.pushPage(this._getPageTarget(), options).then(() => deferred.resolve());
|
401 | } else if (this.pages.length > 0) {
|
402 | for (var i = 0; i < this.pages.length; i++) {
|
403 | verifyPageElement(this.pages[i]);
|
404 | }
|
405 |
|
406 | if (this.topPage) {
|
407 | contentReady(this.topPage, () =>
|
408 | setTimeout(() => {
|
409 | deferred.resolve();
|
410 | show && this.topPage._show();
|
411 | this._updateLastPageBackButton();
|
412 | }, 0)
|
413 | );
|
414 | }
|
415 | } else {
|
416 | contentReady(this, () => {
|
417 | if (this.pages.length === 0 && this._getPageTarget()) {
|
418 | this.pushPage(this._getPageTarget(), options).then(() => deferred.resolve());
|
419 | } else {
|
420 | deferred.resolve();
|
421 | }
|
422 | });
|
423 | }
|
424 | });
|
425 | }
|
426 |
|
427 | _updateAnimatorFactory() {
|
428 | this._animatorFactory = new AnimatorFactory({
|
429 | animators: _animatorDict,
|
430 | baseClass: NavigatorAnimator,
|
431 | baseClassName: 'NavigatorAnimator',
|
432 | defaultAnimation: this.getAttribute('animation')
|
433 | });
|
434 | }
|
435 |
|
436 | disconnectedCallback() {
|
437 | this._backButtonHandler.destroy();
|
438 | this._backButtonHandler = null;
|
439 |
|
440 | this._swipe && this._swipe.dispose();
|
441 | this._swipe = null;
|
442 | }
|
443 |
|
444 | static get observedAttributes() {
|
445 | return ['animation', 'swipeable'];
|
446 | }
|
447 |
|
448 | attributeChangedCallback(name, last, current) {
|
449 | switch (name) {
|
450 | case 'animation':
|
451 | this._updateAnimatorFactory();
|
452 | break;
|
453 | case 'swipeable':
|
454 | this._swipe && this._swipe.update();
|
455 | break;
|
456 | }
|
457 | }
|
458 |
|
459 | |
460 |
|
461 |
|
462 |
|
463 |
|
464 |
|
465 |
|
466 |
|
467 |
|
468 |
|
469 |
|
470 |
|
471 |
|
472 |
|
473 |
|
474 |
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 |
|
491 | popPage(options = {}) {
|
492 | ({options} = this._preparePageAndOptions(null, options));
|
493 |
|
494 | if (util.isInteger(options.times) && options.times > 1) {
|
495 | this._removePages(options.times);
|
496 | }
|
497 |
|
498 | const popUpdate = () => new Promise((resolve) => {
|
499 | this._pageLoader.unload(this.pages[this.pages.length - 1]);
|
500 | resolve();
|
501 | });
|
502 |
|
503 | return this._popPage(options, popUpdate);
|
504 | }
|
505 |
|
506 | _popPage(options, update = () => Promise.resolve()) {
|
507 | if (this._isRunning) {
|
508 | return Promise.reject('popPage is already running.');
|
509 | }
|
510 |
|
511 | if (this.pages.length <= 1) {
|
512 | return Promise.reject('ons-navigator\'s page stack is empty.');
|
513 | }
|
514 |
|
515 | if (this._emitPrePopEvent()) {
|
516 | return Promise.reject('Canceled in prepop event.');
|
517 | }
|
518 |
|
519 | const length = this.pages.length;
|
520 |
|
521 | this._isRunning = true;
|
522 |
|
523 | this.pages[length - 2].updateBackButton((length - 2) > 0);
|
524 |
|
525 | return new Promise(resolve => {
|
526 | const leavePage = this.pages[length - 1];
|
527 | const enterPage = this.pages[length - 2];
|
528 |
|
529 | options = util.extend({}, this.options || {}, options);
|
530 |
|
531 | if (options.data) {
|
532 | enterPage.data = util.extend({}, enterPage.data || {}, options.data || {});
|
533 | }
|
534 |
|
535 | const done = () => {
|
536 | update().then(() => {
|
537 | this._isRunning = false;
|
538 |
|
539 | enterPage._show();
|
540 | util.triggerElementEvent(this, 'postpop', {
|
541 | leavePage,
|
542 | enterPage,
|
543 | navigator: this,
|
544 | swipeToPop: !!options.swipeToPop,
|
545 | onsBackButton: !!options.onsBackButton
|
546 | });
|
547 |
|
548 | options.callback && options.callback(enterPage);
|
549 |
|
550 | resolve(enterPage);
|
551 | });
|
552 | };
|
553 |
|
554 | leavePage._hide();
|
555 | enterPage.style.display = '';
|
556 |
|
557 | const animator = options.animator || this._animatorFactory.newAnimator(options);
|
558 | animator.pop(this.pages[length - 2], this.pages[length - 1], done);
|
559 | }).catch(() => this._isRunning = false);
|
560 | }
|
561 |
|
562 |
|
563 | |
564 |
|
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 |
|
573 |
|
574 |
|
575 |
|
576 |
|
577 |
|
578 |
|
579 |
|
580 |
|
581 |
|
582 |
|
583 |
|
584 |
|
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 |
|
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 |
|
600 |
|
601 | pushPage(page, options = {}) {
|
602 | ({page, options} = this._preparePageAndOptions(page, options));
|
603 |
|
604 | const prepare = pageElement => {
|
605 | verifyPageElement(pageElement);
|
606 | this._pageMap.set(pageElement, page);
|
607 | pageElement = util.extend(pageElement, {
|
608 | data: options.data
|
609 | });
|
610 | pageElement.style.visibility = 'hidden';
|
611 | };
|
612 |
|
613 | if (options.pageHTML) {
|
614 | return this._pushPage(options, () => new Promise(resolve => {
|
615 | instantPageLoader.load({page: options.pageHTML, parent: this, params: options.data}, pageElement => {
|
616 | prepare(pageElement);
|
617 | resolve();
|
618 | });
|
619 | }));
|
620 | }
|
621 |
|
622 | return this._pushPage(options, () => new Promise(resolve => {
|
623 | this._pageLoader.load({page, parent: this, params: options.data}, pageElement => {
|
624 | prepare(pageElement);
|
625 | resolve();
|
626 | }, error => {
|
627 | this._isRunning = false;
|
628 | throw error;
|
629 | });
|
630 | }));
|
631 | }
|
632 |
|
633 | _pushPage(options = {}, update = () => Promise.resolve()) {
|
634 | if (this._isRunning) {
|
635 | return Promise.reject('pushPage is already running.');
|
636 | }
|
637 |
|
638 | if (this._emitPrePushEvent()) {
|
639 | return Promise.reject('Canceled in prepush event.');
|
640 | }
|
641 |
|
642 | this._isRunning = true;
|
643 |
|
644 | const animationOptions = this.animationOptions;
|
645 | options = util.extend({}, this.options || {}, {animationOptions}, options);
|
646 |
|
647 | const animator = this._animatorFactory.newAnimator(options);
|
648 |
|
649 | return update().then(() => {
|
650 | const pageLength = this.pages.length;
|
651 |
|
652 | const enterPage = this.pages[pageLength - 1];
|
653 | const leavePage = options.leavePage || this.pages[pageLength - 2];
|
654 |
|
655 | verifyPageElement(enterPage);
|
656 |
|
657 | enterPage.updateBackButton(pageLength > (options._replacePage ? 2 : 1));
|
658 |
|
659 | enterPage.pushedOptions = util.extend({}, enterPage.pushedOptions || {}, options || {});
|
660 | enterPage.data = util.extend({}, enterPage.data || {}, options.data || {});
|
661 | enterPage.unload = enterPage.unload || options.unload;
|
662 |
|
663 | return new Promise(resolve => {
|
664 | const done = () => {
|
665 | this._isRunning = false;
|
666 |
|
667 | options.show !== false && setImmediate(() => enterPage._show());
|
668 | util.triggerElementEvent(this, 'postpush', {leavePage, enterPage, navigator: this});
|
669 |
|
670 | if (leavePage) {
|
671 | leavePage.style.display = 'none';
|
672 | }
|
673 |
|
674 | options.callback && options.callback(enterPage);
|
675 |
|
676 | resolve(enterPage);
|
677 | };
|
678 |
|
679 | enterPage.style.visibility = '';
|
680 | if (leavePage) {
|
681 | leavePage._hide();
|
682 | animator.push(enterPage, leavePage, done);
|
683 | } else {
|
684 | done();
|
685 | }
|
686 | });
|
687 | }).catch((error) => {
|
688 | this._isRunning = false;
|
689 | throw error;
|
690 | });
|
691 | }
|
692 |
|
693 | |
694 |
|
695 |
|
696 |
|
697 |
|
698 |
|
699 |
|
700 |
|
701 |
|
702 |
|
703 | replacePage(page, options = {}) {
|
704 | return this.pushPage(page, options)
|
705 | .then(resolvedValue => {
|
706 | if (this.pages.length > 1) {
|
707 | this._pageLoader.unload(this.pages[this.pages.length - 2]);
|
708 | }
|
709 | this._updateLastPageBackButton();
|
710 |
|
711 | return Promise.resolve(resolvedValue);
|
712 | });
|
713 | }
|
714 |
|
715 | |
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 |
|
726 |
|
727 |
|
728 | insertPage(index, page, options = {}) {
|
729 | ({page, options} = this._preparePageAndOptions(page, options));
|
730 | index = this._normalizeIndex(index);
|
731 |
|
732 | if (index >= this.pages.length) {
|
733 | return this.pushPage(page, options);
|
734 | }
|
735 |
|
736 | page = typeof options.pageHTML === 'string' ? options.pageHTML : page;
|
737 | const loader = typeof options.pageHTML === 'string' ? instantPageLoader : this._pageLoader;
|
738 |
|
739 | return new Promise(resolve => {
|
740 | loader.load({page, parent: this}, pageElement => {
|
741 | verifyPageElement(pageElement);
|
742 | this._pageMap.set(pageElement, page);
|
743 | pageElement = util.extend(pageElement, {
|
744 | data: options.data,
|
745 | pushedOptions: options
|
746 | });
|
747 |
|
748 | options.animationOptions = util.extend(
|
749 | {},
|
750 | this.animationOptions,
|
751 | options.animationOptions || {}
|
752 | );
|
753 |
|
754 | pageElement.style.display = 'none';
|
755 | this.insertBefore(pageElement, this.pages[index]);
|
756 | this.topPage.updateBackButton(true);
|
757 |
|
758 | setTimeout(() => {
|
759 | pageElement = null;
|
760 | resolve(this.pages[index]);
|
761 | }, 1000 / 60);
|
762 | });
|
763 | });
|
764 | }
|
765 |
|
766 | |
767 |
|
768 |
|
769 |
|
770 |
|
771 |
|
772 |
|
773 |
|
774 |
|
775 |
|
776 |
|
777 |
|
778 |
|
779 | removePage(index, options = {}) {
|
780 | index = this._normalizeIndex(index);
|
781 |
|
782 | if (index < this.pages.length - 1) {
|
783 | return new Promise(resolve => {
|
784 | const leavePage = this.pages[index];
|
785 | const enterPage = this.topPage;
|
786 |
|
787 | this._pageMap.delete(leavePage);
|
788 | this._pageLoader.unload(leavePage);
|
789 | if (this.pages.length === 1) {
|
790 | this.topPage.updateBackButton(false);
|
791 | }
|
792 |
|
793 | resolve(enterPage);
|
794 | });
|
795 | } else {
|
796 | return this.popPage(options);
|
797 | }
|
798 | }
|
799 |
|
800 | |
801 |
|
802 |
|
803 |
|
804 |
|
805 |
|
806 |
|
807 |
|
808 |
|
809 |
|
810 |
|
811 |
|
812 |
|
813 | resetToPage(page, options = {}) {
|
814 | ({page, options} = this._preparePageAndOptions(page, options));
|
815 |
|
816 | if (!options.animator && !options.animation && !options.pop) {
|
817 | options.animation = 'none';
|
818 | }
|
819 |
|
820 | if (!options.page && !options.pageHTML && this._getPageTarget()) {
|
821 | page = options.page = this._getPageTarget();
|
822 | }
|
823 |
|
824 | if (options.pop) {
|
825 | this._removePages();
|
826 | return this.insertPage(0, page, { data: options.data })
|
827 | .then(() => this.popPage(options));
|
828 | }
|
829 |
|
830 |
|
831 | const callback = options.callback;
|
832 | options.callback = newPage => {
|
833 | this._removePages();
|
834 | newPage.updateBackButton(false);
|
835 | callback && callback(newPage);
|
836 | };
|
837 |
|
838 | return this.pushPage(page, options);
|
839 | }
|
840 |
|
841 | |
842 |
|
843 |
|
844 |
|
845 |
|
846 |
|
847 |
|
848 |
|
849 |
|
850 |
|
851 |
|
852 |
|
853 |
|
854 | bringPageTop(item, options = {}) {
|
855 | if (['number', 'string'].indexOf(typeof item) === -1) {
|
856 | util.throw('First argument must be a page name or the index of an existing page. You supplied ' + item);
|
857 | }
|
858 | const index = typeof item === 'number' ? this._normalizeIndex(item) : this._lastIndexOfPage(item);
|
859 | const page = this.pages[index];
|
860 |
|
861 | if (index < 0) {
|
862 | return this.pushPage(item, options);
|
863 | }
|
864 | ({options} = this._preparePageAndOptions(page, options));
|
865 |
|
866 | if (index === this.pages.length - 1) {
|
867 | return Promise.resolve(page);
|
868 | }
|
869 | if (!page) {
|
870 | util.throw('Failed to find item ' + item);
|
871 | }
|
872 | if (this._isRunning) {
|
873 | return Promise.reject('pushPage is already running.');
|
874 | }
|
875 | if (this._emitPrePushEvent()) {
|
876 | return Promise.reject('Canceled in prepush event.');
|
877 | }
|
878 |
|
879 | page.style.display = '';
|
880 | page.style.visibility = 'hidden';
|
881 | page.parentNode.appendChild(page);
|
882 | return this._pushPage(options);
|
883 | }
|
884 |
|
885 | _preparePageAndOptions(page, options = {}) {
|
886 | if (typeof options != 'object') {
|
887 | util.throw('options must be an object. You supplied ' + options);
|
888 | }
|
889 |
|
890 | if ((page === null || page === undefined) && options.page) {
|
891 | page = options.page;
|
892 | }
|
893 |
|
894 | options = util.extend({}, this.options || {}, options, {page});
|
895 |
|
896 | return {page, options};
|
897 | }
|
898 |
|
899 | _removePages(times) {
|
900 | const pages = this.pages;
|
901 | let until = times === undefined ? 0 : pages.length - times;
|
902 | until = until < 0 ? 1 : until;
|
903 |
|
904 | for (let i = pages.length - 2; i >= until; i--) {
|
905 | this._pageMap.delete(pages[i]);
|
906 | this._pageLoader.unload(pages[i]);
|
907 | }
|
908 | }
|
909 |
|
910 | _updateLastPageBackButton() {
|
911 | const index = this.pages.length - 1;
|
912 | if (index >= 0) {
|
913 | this.pages[index].updateBackButton(index > 0);
|
914 | }
|
915 | }
|
916 |
|
917 | _normalizeIndex(index) {
|
918 | return index >= 0 ? index : Math.abs(this.pages.length + index) % this.pages.length;
|
919 | }
|
920 |
|
921 | _onDeviceBackButton(event) {
|
922 | if (this.pages.length > 1) {
|
923 | this.popPage();
|
924 | } else {
|
925 | event.callParentHandler();
|
926 | }
|
927 | }
|
928 |
|
929 | _lastIndexOfPage(pageName) {
|
930 | let index;
|
931 | for (index = this.pages.length - 1; index >= 0; index--) {
|
932 | if (pageName === this._pageMap.get(this.pages[index])) {
|
933 | break;
|
934 | }
|
935 | }
|
936 | return index;
|
937 | }
|
938 |
|
939 | _emitPreEvent(name, data = {}) {
|
940 | let isCanceled = false;
|
941 |
|
942 | util.triggerElementEvent(this, 'pre' + name, util.extend({
|
943 | navigator: this,
|
944 | currentPage: this.pages[this.pages.length - 1],
|
945 | cancel: () => isCanceled = true
|
946 | }, data));
|
947 |
|
948 | return isCanceled;
|
949 | }
|
950 |
|
951 | _emitPrePushEvent() {
|
952 | return this._emitPreEvent('push');
|
953 | }
|
954 |
|
955 | _emitPrePopEvent() {
|
956 | const l = this.pages.length;
|
957 | return this._emitPreEvent('pop', {
|
958 | leavePage: this.pages[l - 1],
|
959 | enterPage: this.pages[l - 2]
|
960 | });
|
961 | }
|
962 |
|
963 |
|
964 | _createPageElement(templateHTML) {
|
965 | const pageElement = util.createElement(internal.normalizePageHTML(templateHTML));
|
966 | verifyPageElement(pageElement);
|
967 | return pageElement;
|
968 | }
|
969 |
|
970 | |
971 |
|
972 |
|
973 |
|
974 |
|
975 |
|
976 |
|
977 | get onDeviceBackButton() {
|
978 | return this._backButtonHandler;
|
979 | }
|
980 |
|
981 | set onDeviceBackButton(callback) {
|
982 | if (this._backButtonHandler) {
|
983 | this._backButtonHandler.destroy();
|
984 | }
|
985 |
|
986 | this._backButtonHandler = deviceBackButtonDispatcher.createHandler(this, callback);
|
987 | }
|
988 |
|
989 | |
990 |
|
991 |
|
992 |
|
993 |
|
994 |
|
995 |
|
996 |
|
997 | get topPage() {
|
998 | let last = this.lastElementChild;
|
999 | while (last && last.tagName !== 'ONS-PAGE') { last = last.previousElementSibling; }
|
1000 | return last;
|
1001 | }
|
1002 |
|
1003 | |
1004 |
|
1005 |
|
1006 |
|
1007 |
|
1008 |
|
1009 |
|
1010 |
|
1011 | get pages() {
|
1012 | return util.arrayFrom(this.children)
|
1013 | .filter(element => element.tagName === 'ONS-PAGE');
|
1014 | }
|
1015 |
|
1016 | |
1017 |
|
1018 |
|
1019 |
|
1020 |
|
1021 |
|
1022 |
|
1023 | get onSwipe() {
|
1024 | return this._onSwipe;
|
1025 | }
|
1026 |
|
1027 | set onSwipe(value) {
|
1028 | if (value && !(value instanceof Function)) {
|
1029 | util.throw('"onSwipe" must be a function');
|
1030 | }
|
1031 | this._onSwipe = value;
|
1032 | }
|
1033 |
|
1034 | |
1035 |
|
1036 |
|
1037 |
|
1038 |
|
1039 |
|
1040 |
|
1041 |
|
1042 | |
1043 |
|
1044 |
|
1045 |
|
1046 |
|
1047 |
|
1048 |
|
1049 |
|
1050 |
|
1051 |
|
1052 |
|
1053 | |
1054 |
|
1055 |
|
1056 |
|
1057 |
|
1058 |
|
1059 |
|
1060 |
|
1061 | |
1062 |
|
1063 |
|
1064 |
|
1065 |
|
1066 |
|
1067 |
|
1068 |
|
1069 | get options() {
|
1070 | return this._options;
|
1071 | }
|
1072 | set options(object) {
|
1073 | this._options = object;
|
1074 | }
|
1075 |
|
1076 | get animationOptions() {
|
1077 | return this.hasAttribute('animation-options') ?
|
1078 | AnimatorFactory.parseAnimationOptionsString(this.getAttribute('animation-options')) : {};
|
1079 | }
|
1080 |
|
1081 | set animationOptions(value) {
|
1082 | if (value === undefined || value === null) {
|
1083 | this.removeAttribute('animation-options');
|
1084 | } else {
|
1085 | this.setAttribute('animation-options', JSON.stringify(value));
|
1086 | }
|
1087 | }
|
1088 |
|
1089 | set _isRunning(value) {
|
1090 | this.setAttribute('_is-running', value ? 'true' : 'false');
|
1091 | }
|
1092 | get _isRunning() {
|
1093 | return JSON.parse(this.getAttribute('_is-running'));
|
1094 | }
|
1095 |
|
1096 | _show() {
|
1097 | this.loaded.then(() => this.topPage && this.topPage._show());
|
1098 | }
|
1099 |
|
1100 | _hide() {
|
1101 | this.topPage && this.topPage._hide();
|
1102 | }
|
1103 |
|
1104 | _destroy() {
|
1105 | for (let i = this.pages.length - 1; i >= 0; i--) {
|
1106 | this._pageLoader.unload(this.pages[i]);
|
1107 | }
|
1108 |
|
1109 | this.remove();
|
1110 | }
|
1111 |
|
1112 | |
1113 |
|
1114 |
|
1115 |
|
1116 | static registerAnimator(name, Animator) {
|
1117 | if (!(Animator.prototype instanceof NavigatorAnimator)) {
|
1118 | util.throwAnimator('Navigator');
|
1119 | }
|
1120 |
|
1121 | _animatorDict[name] = Animator;
|
1122 | }
|
1123 |
|
1124 | static get animators() {
|
1125 | return _animatorDict;
|
1126 | }
|
1127 |
|
1128 | static get NavigatorAnimator() {
|
1129 | return NavigatorAnimator;
|
1130 | }
|
1131 |
|
1132 | static get events() {
|
1133 | return ['prepush', 'postpush', 'prepop', 'postpop', 'swipe'];
|
1134 | }
|
1135 |
|
1136 | static get rewritables() {
|
1137 | return rewritables;
|
1138 | }
|
1139 | }
|
1140 |
|
1141 | onsElements.Navigator = NavigatorElement;
|
1142 | customElements.define('ons-navigator', NavigatorElement);
|