1 | import { h } from '@stencil/core';
|
2 | import createHistory from '../../utils/createBrowserHistory';
|
3 | import createHashHistory from '../../utils/createHashHistory';
|
4 | import ActiveRouter from '../../global/active-router';
|
5 | const getLocation = (location, root) => {
|
6 |
|
7 | const pathname = location.pathname.indexOf(root) == 0 ?
|
8 | '/' + location.pathname.slice(root.length) :
|
9 | location.pathname;
|
10 | return Object.assign({}, location, { pathname });
|
11 | };
|
12 | const HISTORIES = {
|
13 | 'browser': createHistory,
|
14 | 'hash': createHashHistory
|
15 | };
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | export class Router {
|
22 | constructor() {
|
23 | this.root = '/';
|
24 | this.historyType = 'browser';
|
25 |
|
26 |
|
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 |
|
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 | }
|