UNPKG

5.67 kBJavaScriptView Raw
1import { h } from '@stencil/core';
2import createHistory from '../../utils/createBrowserHistory';
3import createHashHistory from '../../utils/createHashHistory';
4import ActiveRouter from '../../global/active-router';
5const getLocation = (location, root) => {
6 // Remove the root URL if found at beginning of string
7 const pathname = location.pathname.indexOf(root) == 0 ?
8 '/' + location.pathname.slice(root.length) :
9 location.pathname;
10 return Object.assign({}, location, { pathname });
11};
12const HISTORIES = {
13 'browser': createHistory,
14 'hash': createHashHistory
15};
16/**
17 * @name Router
18 * @module ionic
19 * @description
20 */
21export class Router {
22 constructor() {
23 this.root = '/';
24 this.historyType = 'browser';
25 // A suffix to append to the page title whenever
26 // it's updated through RouteTitle
27 this.titleSuffix = '';
28 this.routeViewsUpdated = (options = {}) => {
29 if (this.history && options.scrollToId && this.historyType === 'browser') {
30 const elm = this.history.win.document.getElementById(options.scrollToId);
31 if (elm) {
32 return elm.scrollIntoView();
33 }
34 }
35 this.scrollTo(options.scrollTopOffset || this.scrollTopOffset);
36 };
37 }
38 componentWillLoad() {
39 this.history = HISTORIES[this.historyType](this.el.ownerDocument.defaultView);
40 this.history.listen((location) => {
41 location = getLocation(location, this.root);
42 this.location = location;
43 });
44 this.location = getLocation(this.history.location, this.root);
45 }
46 scrollTo(scrollToLocation) {
47 const history = this.history;
48 if (scrollToLocation == null || this.isServer || !history) {
49 return;
50 }
51 if (history.action === 'POP' && Array.isArray(history.location.scrollPosition)) {
52 return this.queue.write(() => {
53 if (history && history.location && Array.isArray(history.location.scrollPosition)) {
54 history.win.scrollTo(history.location.scrollPosition[0], history.location.scrollPosition[1]);
55 }
56 });
57 }
58 // okay, the frame has passed. Go ahead and render now
59 return this.queue.write(() => {
60 history.win.scrollTo(0, scrollToLocation);
61 });
62 }
63 render() {
64 if (!this.location || !this.history) {
65 return;
66 }
67 const state = {
68 historyType: this.historyType,
69 location: this.location,
70 titleSuffix: this.titleSuffix,
71 root: this.root,
72 history: this.history,
73 routeViewsUpdated: this.routeViewsUpdated
74 };
75 return (h(ActiveRouter.Provider, { state: state },
76 h("slot", null)));
77 }
78 static get is() { return "stencil-router"; }
79 static get properties() { return {
80 "root": {
81 "type": "string",
82 "mutable": false,
83 "complexType": {
84 "original": "string",
85 "resolved": "string",
86 "references": {}
87 },
88 "required": false,
89 "optional": false,
90 "docs": {
91 "tags": [],
92 "text": ""
93 },
94 "attribute": "root",
95 "reflect": false,
96 "defaultValue": "'/'"
97 },
98 "historyType": {
99 "type": "string",
100 "mutable": false,
101 "complexType": {
102 "original": "HistoryType",
103 "resolved": "\"browser\" | \"hash\"",
104 "references": {
105 "HistoryType": {
106 "location": "import",
107 "path": "../../global/interfaces"
108 }
109 }
110 },
111 "required": false,
112 "optional": false,
113 "docs": {
114 "tags": [],
115 "text": ""
116 },
117 "attribute": "history-type",
118 "reflect": false,
119 "defaultValue": "'browser'"
120 },
121 "titleSuffix": {
122 "type": "string",
123 "mutable": false,
124 "complexType": {
125 "original": "string",
126 "resolved": "string",
127 "references": {}
128 },
129 "required": false,
130 "optional": false,
131 "docs": {
132 "tags": [],
133 "text": ""
134 },
135 "attribute": "title-suffix",
136 "reflect": false,
137 "defaultValue": "''"
138 },
139 "scrollTopOffset": {
140 "type": "number",
141 "mutable": false,
142 "complexType": {
143 "original": "number",
144 "resolved": "number | undefined",
145 "references": {}
146 },
147 "required": false,
148 "optional": true,
149 "docs": {
150 "tags": [],
151 "text": ""
152 },
153 "attribute": "scroll-top-offset",
154 "reflect": false
155 }
156 }; }
157 static get contextProps() { return [{
158 "name": "isServer",
159 "context": "isServer"
160 }, {
161 "name": "queue",
162 "context": "queue"
163 }]; }
164 static get states() { return {
165 "location": {},
166 "history": {}
167 }; }
168 static get elementRef() { return "el"; }
169}