fragmented 3.1.3 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -12
- package/bin/main.js +1 -1
- package/example.js +78 -33
- package/lib/constants.js +17 -4
- package/lib/example.js +8 -5
- package/lib/fragmented.js +42 -18
- package/lib/index.js +4 -1
- package/package.json +1 -1
- package/src/constants.js +2 -0
- package/src/example.js +9 -5
- package/src/fragmented.js +55 -21
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Relates to URL hash fragments.
|
|
4
4
|
|
|
5
|
-
Fragmented allows your application to affect and be affected by the hash fragment of the URL in the browser's address bar. Changes to the fragment are invisible to the server whilst being included in the browser's history. For this reason fragments are useful to single page applications that need the back and forward buttons to work for them
|
|
5
|
+
Fragmented allows your application to affect and be affected by the hash fragment of the URL in the browser's address bar. Changes to the fragment are invisible to the server whilst being included in the browser's history. For this reason fragments are useful to single page applications that need the back and forward buttons to work for them without triggering Ajax requests and the like.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Fragmented provides a global [`fragment`](https://github.com/djalbat/Fragmented/blob/master/es6/fragmented.js) variable which corresponds to the aforementioned hash fragment in the browser's address bar and the value of which the application can get or set. It also provides `onFragmentChange` and `offFragmentChange` functions so that handlers can be registered and unregistered.
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -42,7 +42,7 @@ One last thing to bear in mind is that this package is included by way of a rela
|
|
|
42
42
|
|
|
43
43
|
## Usage
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
In order to make use of the global `fragmented` variable you only need to import the package:
|
|
46
46
|
|
|
47
47
|
```
|
|
48
48
|
import "fragmented";
|
|
@@ -60,39 +60,43 @@ To set the fragment:
|
|
|
60
60
|
fragment = "test";
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
When you set the fragment like this any handlers will be called.
|
|
64
|
+
|
|
65
|
+
To register and unregister handlers:
|
|
64
66
|
|
|
65
67
|
```
|
|
66
68
|
const { onFragmentChange, offFragmentChange } = fragment;
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
const fragmentChangeHandler = () {
|
|
69
71
|
console.log(fragment)
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
onFragmentChange(fragmentChangeHandler);
|
|
73
75
|
|
|
74
|
-
|
|
76
|
+
...
|
|
77
|
+
|
|
78
|
+
offFragmentChange(fragmentChangeHandler);
|
|
75
79
|
```
|
|
76
80
|
|
|
77
|
-
Note that
|
|
81
|
+
Note that handlers are invoked whenever the `fragment` variable is set. If you do not want this behaviour, in other words you want to be able to change the fragment in the address bar without your handlers being invoked, you can to this with an additional `setFragment()` function as follows:
|
|
78
82
|
|
|
79
83
|
```
|
|
80
84
|
const { setFragment } = fragment;
|
|
81
85
|
|
|
82
|
-
setFragment("test"); //
|
|
86
|
+
setFragment("test"); // handlers won't be invoked
|
|
83
87
|
```
|
|
84
88
|
|
|
85
|
-
Also note that the `fragment` variable is an instance of the `String` object, rather than a string primitive, in order that properties on it can be defined. So use `==` rather than `===` if equating it to a string primitive.
|
|
89
|
+
Also note that the `fragment` variable is an instance of the `String` object, rather than a string primitive, in order that properties on it can be defined. So use `==` rather than `===` if equating it to a string primitive. And note that if you use a `switch` statement, which uses strict equality, you will need to explicitly coerce the `fragment` variable to a string primitive before passing it in.
|
|
86
90
|
|
|
87
|
-
|
|
91
|
+
By the way, you can import these functions more conventionally if you think that destructuring the global `fragment` variable is a bit too cute:
|
|
88
92
|
|
|
89
93
|
```
|
|
90
|
-
import { getFragment, setFragment, onFragmentChange, offFragmentChange } from "fragmented";
|
|
94
|
+
import { getFragment, setFragment, resetFragment, onFragmentChange, offFragmentChange } from "fragmented";
|
|
91
95
|
|
|
92
96
|
...
|
|
93
97
|
```
|
|
94
98
|
|
|
95
|
-
Finally
|
|
99
|
+
Finally, the `resetFrageent()` function does as its name suggests, essentially removing the fragment altogether.
|
|
96
100
|
|
|
97
101
|
## Building
|
|
98
102
|
|
package/bin/main.js
CHANGED
|
@@ -6,7 +6,7 @@ const { createLiveReloadHandler } = require("lively-cli");
|
|
|
6
6
|
|
|
7
7
|
const server = express(), ///
|
|
8
8
|
staticRouter = express.static("."),
|
|
9
|
-
liveReloadHandler = createLiveReloadHandler("./
|
|
9
|
+
liveReloadHandler = createLiveReloadHandler("./example.js");
|
|
10
10
|
|
|
11
11
|
server.use(staticRouter);
|
|
12
12
|
|
package/example.js
CHANGED
|
@@ -7,34 +7,48 @@
|
|
|
7
7
|
return module.exports;
|
|
8
8
|
};
|
|
9
9
|
|
|
10
|
-
// lib/
|
|
11
|
-
var
|
|
10
|
+
// lib/eventTypes.js
|
|
11
|
+
var require_eventTypes = __commonJS((exports) => {
|
|
12
12
|
"use strict";
|
|
13
13
|
Object.defineProperty(exports, "__esModule", {
|
|
14
14
|
value: true
|
|
15
15
|
});
|
|
16
|
-
Object.defineProperty(exports, "
|
|
16
|
+
Object.defineProperty(exports, "HASHCHANGE_EVENT_TYPE", {
|
|
17
17
|
enumerable: true,
|
|
18
18
|
get: function() {
|
|
19
|
-
return
|
|
19
|
+
return HASHCHANGE_EVENT_TYPE;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
-
var
|
|
22
|
+
var HASHCHANGE_EVENT_TYPE = "hashchange";
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
// lib/
|
|
26
|
-
var
|
|
25
|
+
// lib/constants.js
|
|
26
|
+
var require_constants = __commonJS((exports) => {
|
|
27
27
|
"use strict";
|
|
28
28
|
Object.defineProperty(exports, "__esModule", {
|
|
29
29
|
value: true
|
|
30
30
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
function _export(target, all) {
|
|
32
|
+
for (var name in all)
|
|
33
|
+
Object.defineProperty(target, name, {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: all[name]
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
_export(exports, {
|
|
39
|
+
EMPTY_STRING: function() {
|
|
40
|
+
return EMPTY_STRING;
|
|
41
|
+
},
|
|
42
|
+
FRAGMENT: function() {
|
|
43
|
+
return FRAGMENT;
|
|
44
|
+
},
|
|
45
|
+
HASH: function() {
|
|
46
|
+
return HASH;
|
|
35
47
|
}
|
|
36
48
|
});
|
|
37
|
-
var
|
|
49
|
+
var HASH = "#";
|
|
50
|
+
var FRAGMENT = "fragment";
|
|
51
|
+
var EMPTY_STRING = "";
|
|
38
52
|
});
|
|
39
53
|
|
|
40
54
|
// lib/fragmented.js
|
|
@@ -60,17 +74,21 @@
|
|
|
60
74
|
onFragmentChange: function() {
|
|
61
75
|
return onFragmentChange;
|
|
62
76
|
},
|
|
77
|
+
resetFragment: function() {
|
|
78
|
+
return resetFragment;
|
|
79
|
+
},
|
|
63
80
|
setFragment: function() {
|
|
64
81
|
return setFragment;
|
|
65
82
|
}
|
|
66
83
|
});
|
|
67
|
-
var _constants = require_constants();
|
|
68
84
|
var _eventTypes = require_eventTypes();
|
|
85
|
+
var _constants = require_constants();
|
|
69
86
|
function getFragment() {
|
|
70
87
|
var hash = getHash(), fragment2 = new String(hash);
|
|
71
88
|
Object.assign(fragment2, {
|
|
72
89
|
getFragment,
|
|
73
90
|
setFragment,
|
|
91
|
+
resetFragment,
|
|
74
92
|
onFragmentChange,
|
|
75
93
|
offFragmentChange
|
|
76
94
|
});
|
|
@@ -78,10 +96,10 @@
|
|
|
78
96
|
}
|
|
79
97
|
function setFragment(fragment2) {
|
|
80
98
|
var silently = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
|
|
81
|
-
var hash = fragment2;
|
|
82
99
|
if (silently) {
|
|
83
100
|
window.removeEventListener(eventType, hashChangeListener);
|
|
84
101
|
}
|
|
102
|
+
var hash = fragment2;
|
|
85
103
|
window.location.hash = hash;
|
|
86
104
|
if (silently) {
|
|
87
105
|
setTimeout(function() {
|
|
@@ -89,17 +107,25 @@
|
|
|
89
107
|
}, 0);
|
|
90
108
|
}
|
|
91
109
|
}
|
|
110
|
+
function resetFragment() {
|
|
111
|
+
var silently = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
|
|
112
|
+
var fragment2 = _constants.EMPTY_STRING;
|
|
113
|
+
setFragment(fragment2, silently);
|
|
114
|
+
var href = location.href;
|
|
115
|
+
var index = href.indexOf(_constants.HASH);
|
|
116
|
+
if (index !== -1) {
|
|
117
|
+
var start = 0, end = index;
|
|
118
|
+
href = href.substring(start, end);
|
|
119
|
+
history.replaceState({}, _constants.EMPTY_STRING, href);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
92
122
|
function onFragmentChange(fragmentChangeHandler) {
|
|
93
|
-
|
|
123
|
+
addFragmentChangeEventListener(fragmentChangeHandler);
|
|
94
124
|
}
|
|
95
125
|
function offFragmentChange(fragmentChangeHandler) {
|
|
96
|
-
|
|
97
|
-
if (index > -1) {
|
|
98
|
-
var start = index, deleteCount = 1;
|
|
99
|
-
fragmentChangeHandlers.splice(start, deleteCount);
|
|
100
|
-
}
|
|
126
|
+
removeFragmentChangeEventListener(fragmentChangeHandler);
|
|
101
127
|
}
|
|
102
|
-
Object.defineProperty(
|
|
128
|
+
Object.defineProperty(globalThis, _constants.FRAGMENT, {
|
|
103
129
|
get: function get() {
|
|
104
130
|
var fragment2 = getFragment();
|
|
105
131
|
return fragment2;
|
|
@@ -112,19 +138,31 @@
|
|
|
112
138
|
var eventType = _eventTypes.HASHCHANGE_EVENT_TYPE;
|
|
113
139
|
var fragmentChangeHandlers = [];
|
|
114
140
|
window.addEventListener(eventType, hashChangeListener);
|
|
115
|
-
function hashChangeListener(event) {
|
|
116
|
-
var hash = getHash(), fragment2 = hash;
|
|
117
|
-
fragmentChangeHandlers.forEach(function(fragmentChangeHandler) {
|
|
118
|
-
fragmentChangeHandler(event, fragment2);
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
141
|
function getHash() {
|
|
122
|
-
var
|
|
123
|
-
var hash =
|
|
142
|
+
var location1 = window.location;
|
|
143
|
+
var hash = location1.hash;
|
|
124
144
|
var start = 1;
|
|
125
145
|
hash = hash.substring(start);
|
|
126
146
|
return hash;
|
|
127
147
|
}
|
|
148
|
+
function hashChangeListener(event) {
|
|
149
|
+
var hash = getHash(), element = window, fragment2 = hash;
|
|
150
|
+
callFragmentChangeHandlers(event, element, fragment2);
|
|
151
|
+
}
|
|
152
|
+
function callFragmentChangeHandlers(event, element, fragment2) {
|
|
153
|
+
fragmentChangeHandlers.forEach(function(fragmentChangeHandler) {
|
|
154
|
+
fragmentChangeHandler(event, element, fragment2);
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
function addFragmentChangeEventListener(fragmentChangeHandler) {
|
|
158
|
+
fragmentChangeHandlers.push(fragmentChangeHandler);
|
|
159
|
+
return fragmentChangeHandler;
|
|
160
|
+
}
|
|
161
|
+
function removeFragmentChangeEventListener(fragmentChangeHandler) {
|
|
162
|
+
var index = fragmentChangeHandlers.indexOf(fragmentChangeHandler), start = index, deleteCount = 1;
|
|
163
|
+
fragmentChangeHandlers.splice(start, deleteCount);
|
|
164
|
+
return fragmentChangeHandler;
|
|
165
|
+
}
|
|
128
166
|
});
|
|
129
167
|
|
|
130
168
|
// lib/index.js
|
|
@@ -150,6 +188,9 @@
|
|
|
150
188
|
onFragmentChange: function() {
|
|
151
189
|
return _fragmented.onFragmentChange;
|
|
152
190
|
},
|
|
191
|
+
resetFragment: function() {
|
|
192
|
+
return _fragmented.resetFragment;
|
|
193
|
+
},
|
|
153
194
|
setFragment: function() {
|
|
154
195
|
return _fragmented.setFragment;
|
|
155
196
|
}
|
|
@@ -164,15 +205,19 @@
|
|
|
164
205
|
value: true
|
|
165
206
|
});
|
|
166
207
|
require_lib();
|
|
208
|
+
var resetFragment = fragment.resetFragment;
|
|
167
209
|
var onFragmentChange = fragment.onFragmentChange;
|
|
168
|
-
var offFragmentChange = fragment.offFragmentChange;
|
|
169
210
|
onFragmentChange(fragmentChangeHandler);
|
|
170
|
-
console.log(fragment);
|
|
211
|
+
console.log("Initially: '".concat(fragment, "'."));
|
|
171
212
|
fragment = "test";
|
|
172
213
|
function fragmentChangeHandler() {
|
|
173
|
-
console.log(fragment);
|
|
214
|
+
console.log("Changed to '".concat(fragment, "'."));
|
|
174
215
|
}
|
|
216
|
+
window.addEventListener("click", function() {
|
|
217
|
+
var silently = false;
|
|
218
|
+
resetFragment(silently);
|
|
219
|
+
});
|
|
175
220
|
});
|
|
176
221
|
require_example();
|
|
177
222
|
})();
|
|
178
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
223
|
+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3JjL2V2ZW50VHlwZXMuanMiLCAic3JjL2NvbnN0YW50cy5qcyIsICJzcmMvZnJhZ21lbnRlZC5qcyIsICJzcmMvaW5kZXguanMiLCAic3JjL2V4YW1wbGUuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbIlwidXNlIHN0cmljdFwiO1xuXG5leHBvcnQgY29uc3QgSEFTSENIQU5HRV9FVkVOVF9UWVBFID0gXCJoYXNoY2hhbmdlXCI7XG4iLCAiXCJ1c2Ugc3RyaWN0XCI7XG5cbmV4cG9ydCBjb25zdCBIQVNIID0gXCIjXCI7XG5leHBvcnQgY29uc3QgRlJBR01FTlQgPSBcImZyYWdtZW50XCI7XG5leHBvcnQgY29uc3QgRU1QVFlfU1RSSU5HID0gXCJcIjsiLCAiXCJ1c2Ugc3RyaWN0XCI7XG5cbmltcG9ydCB7IEhBU0hDSEFOR0VfRVZFTlRfVFlQRSB9IGZyb20gXCIuL2V2ZW50VHlwZXNcIjtcbmltcG9ydCB7IEhBU0gsIEZSQUdNRU5ULCBFTVBUWV9TVFJJTkcgfSBmcm9tIFwiLi9jb25zdGFudHNcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldEZyYWdtZW50KCkge1xuICBjb25zdCBoYXNoID0gZ2V0SGFzaCgpLFxuICAgICAgICBmcmFnbWVudCA9IG5ldyBTdHJpbmcoaGFzaCk7ICAvLy9cblxuICBPYmplY3QuYXNzaWduKGZyYWdtZW50LCB7XG4gICAgZ2V0RnJhZ21lbnQsXG4gICAgc2V0RnJhZ21lbnQsXG4gICAgcmVzZXRGcmFnbWVudCxcbiAgICBvbkZyYWdtZW50Q2hhbmdlLFxuICAgIG9mZkZyYWdtZW50Q2hhbmdlXG4gIH0pO1xuXG4gIHJldHVybiBmcmFnbWVudDtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHNldEZyYWdtZW50KGZyYWdtZW50LCBzaWxlbnRseSA9IHRydWUpIHtcbiAgaWYgKHNpbGVudGx5KSB7XG4gICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoZXZlbnRUeXBlLCBoYXNoQ2hhbmdlTGlzdGVuZXIpO1xuICB9XG5cbiAgY29uc3QgaGFzaCA9IGZyYWdtZW50OyAgLy8vXG5cbiAgd2luZG93LmxvY2F0aW9uLmhhc2ggPSBoYXNoO1xuXG4gIGlmIChzaWxlbnRseSkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoZXZlbnRUeXBlLCBoYXNoQ2hhbmdlTGlzdGVuZXIpO1xuICAgIH0sIDApO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiByZXNldEZyYWdtZW50KHNpbGVudGx5ID0gdHJ1ZSkge1xuICBjb25zdCBmcmFnbWVudCA9IEVNUFRZX1NUUklORztcblxuICBzZXRGcmFnbWVudChmcmFnbWVudCwgc2lsZW50bHkpO1xuXG4gIGxldCB7IGhyZWYgfSA9IGxvY2F0aW9uO1xuXG4gIGNvbnN0IGluZGV4ID0gaHJlZi5pbmRleE9mKEhBU0gpO1xuXG4gIGlmIChpbmRleCAhPT0gLTEpIHtcbiAgICBjb25zdCBzdGFydCA9IDAsXG4gICAgICAgICAgZW5kID0gaW5kZXg7ICAvLy9cblxuICAgIGhyZWYgPSBocmVmLnN1YnN0cmluZyhzdGFydCwgZW5kKTsgLy8vXG5cbiAgICBoaXN0b3J5LnJlcGxhY2VTdGF0ZSh7fSwgRU1QVFlfU1RSSU5HLCBocmVmKTtcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gb25GcmFnbWVudENoYW5nZShmcmFnbWVudENoYW5nZUhhbmRsZXIpIHtcbiAgYWRkRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyKGZyYWdtZW50Q2hhbmdlSGFuZGxlcik7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBvZmZGcmFnbWVudENoYW5nZShmcmFnbWVudENoYW5nZUhhbmRsZXIpIHtcbiAgcmVtb3ZlRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyKGZyYWdtZW50Q2hhbmdlSGFuZGxlcik7XG59XG5cbk9iamVjdC5kZWZpbmVQcm9wZXJ0eShnbG9iYWxUaGlzLCBGUkFHTUVOVCwge1xuICBnZXQ6IGZ1bmN0aW9uKCkge1xuICAgIGNvbnN0IGZyYWdtZW50ID0gZ2V0RnJhZ21lbnQoKTtcblxuICAgIHJldHVybiBmcmFnbWVudDtcbiAgfSxcblxuICBzZXQ6IGZ1bmN0aW9uKGZyYWdtZW50KSB7XG4gICAgY29uc3Qgc2lsZW50bHkgPSBmYWxzZTtcblxuICAgIHNldEZyYWdtZW50KGZyYWdtZW50LCBzaWxlbnRseSk7XG4gIH1cbn0pO1xuXG5jb25zdCBldmVudFR5cGUgPSBIQVNIQ0hBTkdFX0VWRU5UX1RZUEUsXG4gICAgICBmcmFnbWVudENoYW5nZUhhbmRsZXJzID0gW107XG5cbndpbmRvdy5hZGRFdmVudExpc3RlbmVyKGV2ZW50VHlwZSwgaGFzaENoYW5nZUxpc3RlbmVyKTtcblxuZnVuY3Rpb24gZ2V0SGFzaCgpIHtcbiAgY29uc3QgeyBsb2NhdGlvbiB9ID0gd2luZG93O1xuXG4gIGxldCB7IGhhc2ggfSA9IGxvY2F0aW9uO1xuXG4gIGNvbnN0IHN0YXJ0ID0gMTtcblxuICBoYXNoID0gaGFzaC5zdWJzdHJpbmcoc3RhcnQpO1xuXG4gIHJldHVybiBoYXNoO1xufVxuXG5mdW5jdGlvbiBoYXNoQ2hhbmdlTGlzdGVuZXIoZXZlbnQpIHtcbiAgY29uc3QgaGFzaCA9IGdldEhhc2goKSxcbiAgICAgICAgZWxlbWVudCA9IHdpbmRvdywgLy8vXG4gICAgICAgIGZyYWdtZW50ID0gaGFzaDsgIC8vL1xuXG4gIGNhbGxGcmFnbWVudENoYW5nZUhhbmRsZXJzKGV2ZW50LCBlbGVtZW50LCBmcmFnbWVudCk7XG59XG5cbmZ1bmN0aW9uIGNhbGxGcmFnbWVudENoYW5nZUhhbmRsZXJzKGV2ZW50LCBlbGVtZW50LCBmcmFnbWVudCkge1xuICBmcmFnbWVudENoYW5nZUhhbmRsZXJzLmZvckVhY2goKGZyYWdtZW50Q2hhbmdlSGFuZGxlcikgPT4ge1xuICAgIGZyYWdtZW50Q2hhbmdlSGFuZGxlcihldmVudCwgZWxlbWVudCwgZnJhZ21lbnQpO1xuICB9KTtcbn1cblxuZnVuY3Rpb24gYWRkRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyKGZyYWdtZW50Q2hhbmdlSGFuZGxlcikge1xuICBmcmFnbWVudENoYW5nZUhhbmRsZXJzLnB1c2goZnJhZ21lbnRDaGFuZ2VIYW5kbGVyKTtcblxuICByZXR1cm4gZnJhZ21lbnRDaGFuZ2VIYW5kbGVyO1xufVxuXG5mdW5jdGlvbiByZW1vdmVGcmFnbWVudENoYW5nZUV2ZW50TGlzdGVuZXIoZnJhZ21lbnRDaGFuZ2VIYW5kbGVyKSB7XG4gIGNvbnN0IGluZGV4ID0gZnJhZ21lbnRDaGFuZ2VIYW5kbGVycy5pbmRleE9mKGZyYWdtZW50Q2hhbmdlSGFuZGxlciksXG4gICAgICAgIHN0YXJ0ID0gaW5kZXgsICAvLy9cbiAgICAgICAgZGVsZXRlQ291bnQgPSAxO1xuXG4gIGZyYWdtZW50Q2hhbmdlSGFuZGxlcnMuc3BsaWNlKHN0YXJ0LCBkZWxldGVDb3VudCk7XG5cbiAgcmV0dXJuIGZyYWdtZW50Q2hhbmdlSGFuZGxlcjtcbn1cbiIsICJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IFwiLi9mcmFnbWVudGVkXCI7XG5cbmV4cG9ydCB7IGdldEZyYWdtZW50LCBzZXRGcmFnbWVudCwgcmVzZXRGcmFnbWVudCwgb25GcmFnbWVudENoYW5nZSwgb2ZmRnJhZ21lbnRDaGFuZ2UgfSBmcm9tIFwiLi9mcmFnbWVudGVkXCI7XG5cbiIsICJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IFwiLi9pbmRleFwiOyAvLy9cblxuY29uc3QgeyByZXNldEZyYWdtZW50LCBvbkZyYWdtZW50Q2hhbmdlIH0gPSBmcmFnbWVudDtcblxub25GcmFnbWVudENoYW5nZShmcmFnbWVudENoYW5nZUhhbmRsZXIpO1xuXG5jb25zb2xlLmxvZyhgSW5pdGlhbGx5OiAnJHtmcmFnbWVudH0nLmApXG5cbmZyYWdtZW50ID0gXCJ0ZXN0XCI7XG5cbmZ1bmN0aW9uIGZyYWdtZW50Q2hhbmdlSGFuZGxlcigpIHtcbiAgY29uc29sZS5sb2coYENoYW5nZWQgdG8gJyR7ZnJhZ21lbnR9Jy5gKVxufVxuXG53aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0+IHtcbiAgY29uc3Qgc2lsZW50bHkgPSBmYWxzZTtcblxuICByZXNldEZyYWdtZW50KHNpbGVudGx5KTtcbn0pOyJdLAogICJtYXBwaW5ncyI6ICI7Ozs7Ozs7Ozs7QUFBQTs7Ozs7bUNBRWEseUJBQUE7OztlQUFBOzs7QUFBTixRQUFNLHdCQUF3Qjs7OztBQ0ZyQzs7Ozs7Ozs7Ozs7OztNQUlhLGNBQVksV0FBQTtlQUFaOztNQURBLFVBQVEsV0FBQTtlQUFSOztNQURBLE1BQUksV0FBQTtlQUFKOzs7QUFBTixRQUFNLE9BQU87QUFDYixRQUFNLFdBQVc7QUFDakIsUUFBTSxlQUFlOzs7O0FDSjVCOzs7Ozs7Ozs7Ozs7O01BS2dCLGFBQVcsV0FBQTtlQUFYOztNQXNEQSxtQkFBaUIsV0FBQTtlQUFqQjs7TUFKQSxrQkFBZ0IsV0FBQTtlQUFoQjs7TUFuQkEsZUFBYSxXQUFBO2VBQWI7O01BaEJBLGFBQVcsV0FBQTtlQUFYOzs7OztBQWZULDJCQUFTO0FBQ2QsVUFBTSxPQUFPLFdBQ1AsWUFBVyxJQUFJLE9BQU87QUFFNUIsYUFBTyxPQUFPLFdBQVU7UUFDdEI7UUFDQTtRQUNBO1FBQ0E7UUFDQTs7QUFHRixhQUFPOztBQUdGLHlCQUFxQixXQUFRO1VBQUUsV0FBQSxVQUFBLFNBQUEsS0FBQSxVQUFBLE9BQUEsU0FBQSxVQUFBLEtBQVc7QUFDL0MsVUFBSSxVQUFVO0FBQ1osZUFBTyxvQkFBb0IsV0FBVzs7QUFHeEMsVUFBTSxPQUFPO0FBRWIsYUFBTyxTQUFTLE9BQU87QUFFdkIsVUFBSSxVQUFVO0FBQ1osbUJBQVcsV0FBQTtBQUNULGlCQUFPLGlCQUFpQixXQUFXO1dBQ2xDOzs7QUFJQSw2QkFBUztVQUFjLFdBQUEsVUFBQSxTQUFBLEtBQUEsVUFBQSxPQUFBLFNBQUEsVUFBQSxLQUFXO0FBQ3ZDLFVBQU0sWUFBVyxXQUFBO0FBRWpCLGtCQUFZLFdBQVU7QUFFdEIsVUFBTSxPQUFTLFNBQVQ7QUFFTixVQUFNLFFBQVEsS0FBSyxRQUFRLFdBQUE7QUFFM0IsVUFBSSxVQUFVLElBQUk7QUFDaEIsWUFBTSxRQUFRLEdBQ1IsTUFBTTtBQUVaLGVBQU8sS0FBSyxVQUFVLE9BQU87QUFFN0IsZ0JBQVEsYUFBYSxJQUFJLFdBQUEsY0FBYzs7O0FBSXBDLDhCQUEwQix1QkFBcUI7QUFDcEQscUNBQStCOztBQUcxQiwrQkFBMkIsdUJBQXFCO0FBQ3JELHdDQUFrQzs7QUFHcEMsV0FBTyxlQUFlLFlBQVksV0FBQSxVQUFVO01BQzFDLEtBQUssZUFBTDtBQUNFLFlBQU0sWUFBVztBQUVqQixlQUFPOztNQUdULEtBQUssYUFBUyxXQUFRO0FBQ3BCLFlBQU0sV0FBVztBQUVqQixvQkFBWSxXQUFVOzs7QUFJMUIsUUFBTSxZQUFZLFlBQUE7QUFBbEIsUUFDTSx5QkFBeUI7QUFFL0IsV0FBTyxpQkFBaUIsV0FBVztBQUVuQyx1QkFBUztBQUNQLFVBQVEsWUFBYSxPQUFiO0FBRVIsVUFBTSxPQUFTLFVBQVQ7QUFFTixVQUFNLFFBQVE7QUFFZCxhQUFPLEtBQUssVUFBVTtBQUV0QixhQUFPOztBQUdULGdDQUE0QixPQUFLO0FBQy9CLFVBQU0sT0FBTyxXQUNQLFVBQVUsUUFDVixZQUFXO0FBRWpCLGlDQUEyQixPQUFPLFNBQVM7O0FBRzdDLHdDQUFvQyxPQUFPLFNBQVMsV0FBUTtBQUMxRCw2QkFBdUIsUUFBUSxTQUFDLHVCQUFBO0FBQzlCLDhCQUFzQixPQUFPLFNBQVM7OztBQUkxQyw0Q0FBd0MsdUJBQXFCO0FBQzNELDZCQUF1QixLQUFLO0FBRTVCLGFBQU87O0FBR1QsK0NBQTJDLHVCQUFxQjtBQUM5RCxVQUFNLFFBQVEsdUJBQXVCLFFBQVEsd0JBQ3ZDLFFBQVEsT0FDUixjQUFjO0FBRXBCLDZCQUF1QixPQUFPLE9BQU87QUFFckMsYUFBTzs7Ozs7QUN6SFQ7Ozs7Ozs7Ozs7Ozs7TUFJUyxhQUFXLFdBQUE7ZUFBWCxZQUFBOztNQUEyRCxtQkFBaUIsV0FBQTtlQUFqQixZQUFBOztNQUFsQixrQkFBZ0IsV0FBQTtlQUFoQixZQUFBOztNQUFmLGVBQWEsV0FBQTtlQUFiLFlBQUE7O01BQWIsYUFBVyxXQUFBO2VBQVgsWUFBQTs7Ozs7OztBQ0p0Qjs7Ozs7O0FBSUEsUUFBUSxnQkFBb0MsU0FBcEM7QUFBUixRQUF1QixtQkFBcUIsU0FBckI7QUFFdkIscUJBQWlCO0FBRWpCLFlBQVEsSUFBSyxlQUF1QixPQUFULFVBQVM7QUFFcEMsZUFBVztBQUVYLHFDQUFTO0FBQ1AsY0FBUSxJQUFLLGVBQXVCLE9BQVQsVUFBUzs7QUFHdEMsV0FBTyxpQkFBaUIsU0FBUyxXQUFBO0FBQy9CLFVBQU0sV0FBVztBQUVqQixvQkFBYzs7OyIsCiAgIm5hbWVzIjogW10KfQo=
|
package/lib/constants.js
CHANGED
|
@@ -2,12 +2,25 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
EMPTY_STRING: function() {
|
|
13
|
+
return EMPTY_STRING;
|
|
14
|
+
},
|
|
15
|
+
FRAGMENT: function() {
|
|
8
16
|
return FRAGMENT;
|
|
17
|
+
},
|
|
18
|
+
HASH: function() {
|
|
19
|
+
return HASH;
|
|
9
20
|
}
|
|
10
21
|
});
|
|
22
|
+
var HASH = "#";
|
|
11
23
|
var FRAGMENT = "fragment";
|
|
24
|
+
var EMPTY_STRING = "";
|
|
12
25
|
|
|
13
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
26
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jb25zdGFudHMuanMiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5cbmV4cG9ydCBjb25zdCBIQVNIID0gXCIjXCI7XG5leHBvcnQgY29uc3QgRlJBR01FTlQgPSBcImZyYWdtZW50XCI7XG5leHBvcnQgY29uc3QgRU1QVFlfU1RSSU5HID0gXCJcIjsiXSwibmFtZXMiOlsiRU1QVFlfU1RSSU5HIiwiRlJBR01FTlQiLCJIQVNIIl0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyIsIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7SUFJYUEsWUFBWTtlQUFaQTs7SUFEQUMsUUFBUTtlQUFSQTs7SUFEQUMsSUFBSTtlQUFKQTs7O0FBQU4sSUFBTUEsT0FBTztBQUNiLElBQU1ELFdBQVc7QUFDakIsSUFBTUQsZUFBZSJ9
|
package/lib/example.js
CHANGED
|
@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
5
|
require("./index");
|
|
6
|
-
var
|
|
6
|
+
var resetFragment = fragment.resetFragment, onFragmentChange = fragment.onFragmentChange;
|
|
7
7
|
onFragmentChange(fragmentChangeHandler);
|
|
8
|
-
console.log(fragment);
|
|
8
|
+
console.log("Initially: '".concat(fragment, "'."));
|
|
9
9
|
fragment = "test";
|
|
10
|
-
// offFragmentChange(fragmentChangeHandler);
|
|
11
10
|
function fragmentChangeHandler() {
|
|
12
|
-
console.log(fragment);
|
|
11
|
+
console.log("Changed to '".concat(fragment, "'."));
|
|
13
12
|
}
|
|
13
|
+
window.addEventListener("click", function() {
|
|
14
|
+
var silently = false;
|
|
15
|
+
resetFragment(silently);
|
|
16
|
+
});
|
|
14
17
|
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9leGFtcGxlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5pbXBvcnQgXCIuL2luZGV4XCI7IC8vL1xuXG5jb25zdCB7IHJlc2V0RnJhZ21lbnQsIG9uRnJhZ21lbnRDaGFuZ2UgfSA9IGZyYWdtZW50O1xuXG5vbkZyYWdtZW50Q2hhbmdlKGZyYWdtZW50Q2hhbmdlSGFuZGxlcik7XG5cbmNvbnNvbGUubG9nKGBJbml0aWFsbHk6ICcke2ZyYWdtZW50fScuYClcblxuZnJhZ21lbnQgPSBcInRlc3RcIjtcblxuZnVuY3Rpb24gZnJhZ21lbnRDaGFuZ2VIYW5kbGVyKCkge1xuICBjb25zb2xlLmxvZyhgQ2hhbmdlZCB0byAnJHtmcmFnbWVudH0nLmApXG59XG5cbndpbmRvdy5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgKCkgPT4ge1xuICBjb25zdCBzaWxlbnRseSA9IGZhbHNlO1xuXG4gIHJlc2V0RnJhZ21lbnQoc2lsZW50bHkpO1xufSk7Il0sIm5hbWVzIjpbInJlc2V0RnJhZ21lbnQiLCJmcmFnbWVudCIsIm9uRnJhZ21lbnRDaGFuZ2UiLCJmcmFnbWVudENoYW5nZUhhbmRsZXIiLCJjb25zb2xlIiwibG9nIiwid2luZG93IiwiYWRkRXZlbnRMaXN0ZW5lciIsInNpbGVudGx5Il0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7OzsiLCJtYXBwaW5ncyI6IkFBQUE7Ozs7UUFFTztBQUVQLElBQVFBLGdCQUFvQ0MsU0FBcENELGVBQWVFLG1CQUFxQkQsU0FBckJDO0FBRXZCQSxpQkFBaUJDO0FBRWpCQyxRQUFRQyxHQUFHLENBQUMsQUFBQyxlQUF1QixPQUFUSixVQUFTO0FBRXBDQSxXQUFXO0FBRVgsU0FBU0U7SUFDUEMsUUFBUUMsR0FBRyxDQUFDLEFBQUMsZUFBdUIsT0FBVEosVUFBUztBQUN0QztBQUVBSyxPQUFPQyxnQkFBZ0IsQ0FBQyxTQUFTO0lBQy9CLElBQU1DLFdBQVc7SUFFakJSLGNBQWNRO0FBQ2hCIn0=
|
package/lib/fragmented.js
CHANGED
|
@@ -18,17 +18,21 @@ _export(exports, {
|
|
|
18
18
|
onFragmentChange: function() {
|
|
19
19
|
return onFragmentChange;
|
|
20
20
|
},
|
|
21
|
+
resetFragment: function() {
|
|
22
|
+
return resetFragment;
|
|
23
|
+
},
|
|
21
24
|
setFragment: function() {
|
|
22
25
|
return setFragment;
|
|
23
26
|
}
|
|
24
27
|
});
|
|
25
|
-
var _constants = require("./constants");
|
|
26
28
|
var _eventTypes = require("./eventTypes");
|
|
29
|
+
var _constants = require("./constants");
|
|
27
30
|
function getFragment() {
|
|
28
31
|
var hash = getHash(), fragment = new String(hash); ///
|
|
29
32
|
Object.assign(fragment, {
|
|
30
33
|
getFragment: getFragment,
|
|
31
34
|
setFragment: setFragment,
|
|
35
|
+
resetFragment: resetFragment,
|
|
32
36
|
onFragmentChange: onFragmentChange,
|
|
33
37
|
offFragmentChange: offFragmentChange
|
|
34
38
|
});
|
|
@@ -36,10 +40,10 @@ function getFragment() {
|
|
|
36
40
|
}
|
|
37
41
|
function setFragment(fragment) {
|
|
38
42
|
var silently = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
|
|
39
|
-
var hash = fragment; ///
|
|
40
43
|
if (silently) {
|
|
41
44
|
window.removeEventListener(eventType, hashChangeListener);
|
|
42
45
|
}
|
|
46
|
+
var hash = fragment; ///
|
|
43
47
|
window.location.hash = hash;
|
|
44
48
|
if (silently) {
|
|
45
49
|
setTimeout(function() {
|
|
@@ -47,17 +51,25 @@ function setFragment(fragment) {
|
|
|
47
51
|
}, 0);
|
|
48
52
|
}
|
|
49
53
|
}
|
|
54
|
+
function resetFragment() {
|
|
55
|
+
var silently = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
|
|
56
|
+
var fragment = _constants.EMPTY_STRING;
|
|
57
|
+
setFragment(fragment, silently);
|
|
58
|
+
var href = location.href;
|
|
59
|
+
var index = href.indexOf(_constants.HASH);
|
|
60
|
+
if (index !== -1) {
|
|
61
|
+
var start = 0, end = index; ///
|
|
62
|
+
href = href.substring(start, end); ///
|
|
63
|
+
history.replaceState({}, _constants.EMPTY_STRING, href);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
50
66
|
function onFragmentChange(fragmentChangeHandler) {
|
|
51
|
-
|
|
67
|
+
addFragmentChangeEventListener(fragmentChangeHandler);
|
|
52
68
|
}
|
|
53
69
|
function offFragmentChange(fragmentChangeHandler) {
|
|
54
|
-
|
|
55
|
-
if (index > -1) {
|
|
56
|
-
var start = index, deleteCount = 1;
|
|
57
|
-
fragmentChangeHandlers.splice(start, deleteCount);
|
|
58
|
-
}
|
|
70
|
+
removeFragmentChangeEventListener(fragmentChangeHandler);
|
|
59
71
|
}
|
|
60
|
-
Object.defineProperty(
|
|
72
|
+
Object.defineProperty(globalThis, _constants.FRAGMENT, {
|
|
61
73
|
get: function get() {
|
|
62
74
|
var fragment = getFragment();
|
|
63
75
|
return fragment;
|
|
@@ -69,18 +81,30 @@ Object.defineProperty(window, _constants.FRAGMENT, {
|
|
|
69
81
|
});
|
|
70
82
|
var eventType = _eventTypes.HASHCHANGE_EVENT_TYPE, fragmentChangeHandlers = [];
|
|
71
83
|
window.addEventListener(eventType, hashChangeListener);
|
|
72
|
-
function hashChangeListener(event) {
|
|
73
|
-
var hash = getHash(), fragment = hash; ///
|
|
74
|
-
fragmentChangeHandlers.forEach(function(fragmentChangeHandler) {
|
|
75
|
-
fragmentChangeHandler(event, fragment);
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
84
|
function getHash() {
|
|
79
|
-
var
|
|
80
|
-
var hash =
|
|
85
|
+
var location1 = window.location;
|
|
86
|
+
var hash = location1.hash;
|
|
81
87
|
var start = 1;
|
|
82
88
|
hash = hash.substring(start);
|
|
83
89
|
return hash;
|
|
84
90
|
}
|
|
91
|
+
function hashChangeListener(event) {
|
|
92
|
+
var hash = getHash(), element = window, fragment = hash; ///
|
|
93
|
+
callFragmentChangeHandlers(event, element, fragment);
|
|
94
|
+
}
|
|
95
|
+
function callFragmentChangeHandlers(event, element, fragment) {
|
|
96
|
+
fragmentChangeHandlers.forEach(function(fragmentChangeHandler) {
|
|
97
|
+
fragmentChangeHandler(event, element, fragment);
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
function addFragmentChangeEventListener(fragmentChangeHandler) {
|
|
101
|
+
fragmentChangeHandlers.push(fragmentChangeHandler);
|
|
102
|
+
return fragmentChangeHandler;
|
|
103
|
+
}
|
|
104
|
+
function removeFragmentChangeEventListener(fragmentChangeHandler) {
|
|
105
|
+
var index = fragmentChangeHandlers.indexOf(fragmentChangeHandler), start = index, deleteCount = 1;
|
|
106
|
+
fragmentChangeHandlers.splice(start, deleteCount);
|
|
107
|
+
return fragmentChangeHandler;
|
|
108
|
+
}
|
|
85
109
|
|
|
86
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
110
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9mcmFnbWVudGVkLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5pbXBvcnQgeyBIQVNIQ0hBTkdFX0VWRU5UX1RZUEUgfSBmcm9tIFwiLi9ldmVudFR5cGVzXCI7XG5pbXBvcnQgeyBIQVNILCBGUkFHTUVOVCwgRU1QVFlfU1RSSU5HIH0gZnJvbSBcIi4vY29uc3RhbnRzXCI7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRGcmFnbWVudCgpIHtcbiAgY29uc3QgaGFzaCA9IGdldEhhc2goKSxcbiAgICAgICAgZnJhZ21lbnQgPSBuZXcgU3RyaW5nKGhhc2gpOyAgLy8vXG5cbiAgT2JqZWN0LmFzc2lnbihmcmFnbWVudCwge1xuICAgIGdldEZyYWdtZW50LFxuICAgIHNldEZyYWdtZW50LFxuICAgIHJlc2V0RnJhZ21lbnQsXG4gICAgb25GcmFnbWVudENoYW5nZSxcbiAgICBvZmZGcmFnbWVudENoYW5nZVxuICB9KTtcblxuICByZXR1cm4gZnJhZ21lbnQ7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBzZXRGcmFnbWVudChmcmFnbWVudCwgc2lsZW50bHkgPSB0cnVlKSB7XG4gIGlmIChzaWxlbnRseSkge1xuICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKGV2ZW50VHlwZSwgaGFzaENoYW5nZUxpc3RlbmVyKTtcbiAgfVxuXG4gIGNvbnN0IGhhc2ggPSBmcmFnbWVudDsgIC8vL1xuXG4gIHdpbmRvdy5sb2NhdGlvbi5oYXNoID0gaGFzaDtcblxuICBpZiAoc2lsZW50bHkpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKGV2ZW50VHlwZSwgaGFzaENoYW5nZUxpc3RlbmVyKTtcbiAgICB9LCAwKTtcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gcmVzZXRGcmFnbWVudChzaWxlbnRseSA9IHRydWUpIHtcbiAgY29uc3QgZnJhZ21lbnQgPSBFTVBUWV9TVFJJTkc7XG5cbiAgc2V0RnJhZ21lbnQoZnJhZ21lbnQsIHNpbGVudGx5KTtcblxuICBsZXQgeyBocmVmIH0gPSBsb2NhdGlvbjtcblxuICBjb25zdCBpbmRleCA9IGhyZWYuaW5kZXhPZihIQVNIKTtcblxuICBpZiAoaW5kZXggIT09IC0xKSB7XG4gICAgY29uc3Qgc3RhcnQgPSAwLFxuICAgICAgICAgIGVuZCA9IGluZGV4OyAgLy8vXG5cbiAgICBocmVmID0gaHJlZi5zdWJzdHJpbmcoc3RhcnQsIGVuZCk7IC8vL1xuXG4gICAgaGlzdG9yeS5yZXBsYWNlU3RhdGUoe30sIEVNUFRZX1NUUklORywgaHJlZik7XG4gIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIG9uRnJhZ21lbnRDaGFuZ2UoZnJhZ21lbnRDaGFuZ2VIYW5kbGVyKSB7XG4gIGFkZEZyYWdtZW50Q2hhbmdlRXZlbnRMaXN0ZW5lcihmcmFnbWVudENoYW5nZUhhbmRsZXIpO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gb2ZmRnJhZ21lbnRDaGFuZ2UoZnJhZ21lbnRDaGFuZ2VIYW5kbGVyKSB7XG4gIHJlbW92ZUZyYWdtZW50Q2hhbmdlRXZlbnRMaXN0ZW5lcihmcmFnbWVudENoYW5nZUhhbmRsZXIpO1xufVxuXG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZ2xvYmFsVGhpcywgRlJBR01FTlQsIHtcbiAgZ2V0OiBmdW5jdGlvbigpIHtcbiAgICBjb25zdCBmcmFnbWVudCA9IGdldEZyYWdtZW50KCk7XG5cbiAgICByZXR1cm4gZnJhZ21lbnQ7XG4gIH0sXG5cbiAgc2V0OiBmdW5jdGlvbihmcmFnbWVudCkge1xuICAgIGNvbnN0IHNpbGVudGx5ID0gZmFsc2U7XG5cbiAgICBzZXRGcmFnbWVudChmcmFnbWVudCwgc2lsZW50bHkpO1xuICB9XG59KTtcblxuY29uc3QgZXZlbnRUeXBlID0gSEFTSENIQU5HRV9FVkVOVF9UWVBFLFxuICAgICAgZnJhZ21lbnRDaGFuZ2VIYW5kbGVycyA9IFtdO1xuXG53aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihldmVudFR5cGUsIGhhc2hDaGFuZ2VMaXN0ZW5lcik7XG5cbmZ1bmN0aW9uIGdldEhhc2goKSB7XG4gIGNvbnN0IHsgbG9jYXRpb24gfSA9IHdpbmRvdztcblxuICBsZXQgeyBoYXNoIH0gPSBsb2NhdGlvbjtcblxuICBjb25zdCBzdGFydCA9IDE7XG5cbiAgaGFzaCA9IGhhc2guc3Vic3RyaW5nKHN0YXJ0KTtcblxuICByZXR1cm4gaGFzaDtcbn1cblxuZnVuY3Rpb24gaGFzaENoYW5nZUxpc3RlbmVyKGV2ZW50KSB7XG4gIGNvbnN0IGhhc2ggPSBnZXRIYXNoKCksXG4gICAgICAgIGVsZW1lbnQgPSB3aW5kb3csIC8vL1xuICAgICAgICBmcmFnbWVudCA9IGhhc2g7ICAvLy9cblxuICBjYWxsRnJhZ21lbnRDaGFuZ2VIYW5kbGVycyhldmVudCwgZWxlbWVudCwgZnJhZ21lbnQpO1xufVxuXG5mdW5jdGlvbiBjYWxsRnJhZ21lbnRDaGFuZ2VIYW5kbGVycyhldmVudCwgZWxlbWVudCwgZnJhZ21lbnQpIHtcbiAgZnJhZ21lbnRDaGFuZ2VIYW5kbGVycy5mb3JFYWNoKChmcmFnbWVudENoYW5nZUhhbmRsZXIpID0+IHtcbiAgICBmcmFnbWVudENoYW5nZUhhbmRsZXIoZXZlbnQsIGVsZW1lbnQsIGZyYWdtZW50KTtcbiAgfSk7XG59XG5cbmZ1bmN0aW9uIGFkZEZyYWdtZW50Q2hhbmdlRXZlbnRMaXN0ZW5lcihmcmFnbWVudENoYW5nZUhhbmRsZXIpIHtcbiAgZnJhZ21lbnRDaGFuZ2VIYW5kbGVycy5wdXNoKGZyYWdtZW50Q2hhbmdlSGFuZGxlcik7XG5cbiAgcmV0dXJuIGZyYWdtZW50Q2hhbmdlSGFuZGxlcjtcbn1cblxuZnVuY3Rpb24gcmVtb3ZlRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyKGZyYWdtZW50Q2hhbmdlSGFuZGxlcikge1xuICBjb25zdCBpbmRleCA9IGZyYWdtZW50Q2hhbmdlSGFuZGxlcnMuaW5kZXhPZihmcmFnbWVudENoYW5nZUhhbmRsZXIpLFxuICAgICAgICBzdGFydCA9IGluZGV4LCAgLy8vXG4gICAgICAgIGRlbGV0ZUNvdW50ID0gMTtcblxuICBmcmFnbWVudENoYW5nZUhhbmRsZXJzLnNwbGljZShzdGFydCwgZGVsZXRlQ291bnQpO1xuXG4gIHJldHVybiBmcmFnbWVudENoYW5nZUhhbmRsZXI7XG59XG4iXSwibmFtZXMiOlsiZ2V0RnJhZ21lbnQiLCJvZmZGcmFnbWVudENoYW5nZSIsIm9uRnJhZ21lbnRDaGFuZ2UiLCJyZXNldEZyYWdtZW50Iiwic2V0RnJhZ21lbnQiLCJoYXNoIiwiZ2V0SGFzaCIsImZyYWdtZW50IiwiU3RyaW5nIiwiT2JqZWN0IiwiYXNzaWduIiwic2lsZW50bHkiLCJ3aW5kb3ciLCJyZW1vdmVFdmVudExpc3RlbmVyIiwiZXZlbnRUeXBlIiwiaGFzaENoYW5nZUxpc3RlbmVyIiwibG9jYXRpb24iLCJzZXRUaW1lb3V0IiwiYWRkRXZlbnRMaXN0ZW5lciIsIkVNUFRZX1NUUklORyIsImhyZWYiLCJpbmRleCIsImluZGV4T2YiLCJIQVNIIiwic3RhcnQiLCJlbmQiLCJzdWJzdHJpbmciLCJoaXN0b3J5IiwicmVwbGFjZVN0YXRlIiwiZnJhZ21lbnRDaGFuZ2VIYW5kbGVyIiwiYWRkRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyIiwicmVtb3ZlRnJhZ21lbnRDaGFuZ2VFdmVudExpc3RlbmVyIiwiZGVmaW5lUHJvcGVydHkiLCJnbG9iYWxUaGlzIiwiRlJBR01FTlQiLCJnZXQiLCJzZXQiLCJIQVNIQ0hBTkdFX0VWRU5UX1RZUEUiLCJmcmFnbWVudENoYW5nZUhhbmRsZXJzIiwiZXZlbnQiLCJlbGVtZW50IiwiY2FsbEZyYWdtZW50Q2hhbmdlSGFuZGxlcnMiLCJmb3JFYWNoIiwicHVzaCIsImRlbGV0ZUNvdW50Iiwic3BsaWNlIl0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7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
|
package/lib/index.js
CHANGED
|
@@ -18,10 +18,13 @@ _export(exports, {
|
|
|
18
18
|
onFragmentChange: function() {
|
|
19
19
|
return _fragmented.onFragmentChange;
|
|
20
20
|
},
|
|
21
|
+
resetFragment: function() {
|
|
22
|
+
return _fragmented.resetFragment;
|
|
23
|
+
},
|
|
21
24
|
setFragment: function() {
|
|
22
25
|
return _fragmented.setFragment;
|
|
23
26
|
}
|
|
24
27
|
});
|
|
25
28
|
var _fragmented = require("./fragmented");
|
|
26
29
|
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IFwiLi9mcmFnbWVudGVkXCI7XG5cbmV4cG9ydCB7IGdldEZyYWdtZW50LCBzZXRGcmFnbWVudCwgcmVzZXRGcmFnbWVudCwgb25GcmFnbWVudENoYW5nZSwgb2ZmRnJhZ21lbnRDaGFuZ2UgfSBmcm9tIFwiLi9mcmFnbWVudGVkXCI7XG5cbiJdLCJuYW1lcyI6WyJnZXRGcmFnbWVudCIsIm9mZkZyYWdtZW50Q2hhbmdlIiwib25GcmFnbWVudENoYW5nZSIsInJlc2V0RnJhZ21lbnQiLCJzZXRGcmFnbWVudCJdLCJyYW5nZU1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7OztJQUlTQSxXQUFXO2VBQVhBLHVCQUFXOztJQUFnREMsaUJBQWlCO2VBQWpCQSw2QkFBaUI7O0lBQW5DQyxnQkFBZ0I7ZUFBaEJBLDRCQUFnQjs7SUFBL0JDLGFBQWE7ZUFBYkEseUJBQWE7O0lBQTFCQyxXQUFXO2VBQVhBLHVCQUFXOzs7MEJBRjFCIn0=
|
package/package.json
CHANGED
package/src/constants.js
CHANGED
package/src/example.js
CHANGED
|
@@ -2,16 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
import "./index"; ///
|
|
4
4
|
|
|
5
|
-
const {
|
|
5
|
+
const { resetFragment, onFragmentChange } = fragment;
|
|
6
6
|
|
|
7
7
|
onFragmentChange(fragmentChangeHandler);
|
|
8
8
|
|
|
9
|
-
console.log(fragment)
|
|
9
|
+
console.log(`Initially: '${fragment}'.`)
|
|
10
10
|
|
|
11
11
|
fragment = "test";
|
|
12
12
|
|
|
13
|
-
// offFragmentChange(fragmentChangeHandler);
|
|
14
|
-
|
|
15
13
|
function fragmentChangeHandler() {
|
|
16
|
-
console.log(fragment)
|
|
14
|
+
console.log(`Changed to '${fragment}'.`)
|
|
17
15
|
}
|
|
16
|
+
|
|
17
|
+
window.addEventListener("click", () => {
|
|
18
|
+
const silently = false;
|
|
19
|
+
|
|
20
|
+
resetFragment(silently);
|
|
21
|
+
});
|
package/src/fragmented.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { FRAGMENT } from "./constants";
|
|
4
3
|
import { HASHCHANGE_EVENT_TYPE } from "./eventTypes";
|
|
4
|
+
import { HASH, FRAGMENT, EMPTY_STRING } from "./constants";
|
|
5
5
|
|
|
6
6
|
export function getFragment() {
|
|
7
7
|
const hash = getHash(),
|
|
@@ -10,6 +10,7 @@ export function getFragment() {
|
|
|
10
10
|
Object.assign(fragment, {
|
|
11
11
|
getFragment,
|
|
12
12
|
setFragment,
|
|
13
|
+
resetFragment,
|
|
13
14
|
onFragmentChange,
|
|
14
15
|
offFragmentChange
|
|
15
16
|
});
|
|
@@ -18,12 +19,12 @@ export function getFragment() {
|
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
export function setFragment(fragment, silently = true) {
|
|
21
|
-
const hash = fragment; ///
|
|
22
|
-
|
|
23
22
|
if (silently) {
|
|
24
23
|
window.removeEventListener(eventType, hashChangeListener);
|
|
25
24
|
}
|
|
26
25
|
|
|
26
|
+
const hash = fragment; ///
|
|
27
|
+
|
|
27
28
|
window.location.hash = hash;
|
|
28
29
|
|
|
29
30
|
if (silently) {
|
|
@@ -33,22 +34,34 @@ export function setFragment(fragment, silently = true) {
|
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
export function
|
|
37
|
-
|
|
38
|
-
}
|
|
37
|
+
export function resetFragment(silently = true) {
|
|
38
|
+
const fragment = EMPTY_STRING;
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
setFragment(fragment, silently);
|
|
41
|
+
|
|
42
|
+
let { href } = location;
|
|
43
|
+
|
|
44
|
+
const index = href.indexOf(HASH);
|
|
42
45
|
|
|
43
|
-
if (index
|
|
44
|
-
const start =
|
|
45
|
-
|
|
46
|
+
if (index !== -1) {
|
|
47
|
+
const start = 0,
|
|
48
|
+
end = index; ///
|
|
46
49
|
|
|
47
|
-
|
|
50
|
+
href = href.substring(start, end); ///
|
|
51
|
+
|
|
52
|
+
history.replaceState({}, EMPTY_STRING, href);
|
|
48
53
|
}
|
|
49
54
|
}
|
|
50
55
|
|
|
51
|
-
|
|
56
|
+
export function onFragmentChange(fragmentChangeHandler) {
|
|
57
|
+
addFragmentChangeEventListener(fragmentChangeHandler);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export function offFragmentChange(fragmentChangeHandler) {
|
|
61
|
+
removeFragmentChangeEventListener(fragmentChangeHandler);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
Object.defineProperty(globalThis, FRAGMENT, {
|
|
52
65
|
get: function() {
|
|
53
66
|
const fragment = getFragment();
|
|
54
67
|
|
|
@@ -67,23 +80,44 @@ const eventType = HASHCHANGE_EVENT_TYPE,
|
|
|
67
80
|
|
|
68
81
|
window.addEventListener(eventType, hashChangeListener);
|
|
69
82
|
|
|
83
|
+
function getHash() {
|
|
84
|
+
const { location } = window;
|
|
85
|
+
|
|
86
|
+
let { hash } = location;
|
|
87
|
+
|
|
88
|
+
const start = 1;
|
|
89
|
+
|
|
90
|
+
hash = hash.substring(start);
|
|
91
|
+
|
|
92
|
+
return hash;
|
|
93
|
+
}
|
|
94
|
+
|
|
70
95
|
function hashChangeListener(event) {
|
|
71
96
|
const hash = getHash(),
|
|
97
|
+
element = window, ///
|
|
72
98
|
fragment = hash; ///
|
|
73
99
|
|
|
100
|
+
callFragmentChangeHandlers(event, element, fragment);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function callFragmentChangeHandlers(event, element, fragment) {
|
|
74
104
|
fragmentChangeHandlers.forEach((fragmentChangeHandler) => {
|
|
75
|
-
fragmentChangeHandler(event, fragment);
|
|
105
|
+
fragmentChangeHandler(event, element, fragment);
|
|
76
106
|
});
|
|
77
107
|
}
|
|
78
108
|
|
|
79
|
-
function
|
|
80
|
-
|
|
109
|
+
function addFragmentChangeEventListener(fragmentChangeHandler) {
|
|
110
|
+
fragmentChangeHandlers.push(fragmentChangeHandler);
|
|
81
111
|
|
|
82
|
-
|
|
112
|
+
return fragmentChangeHandler;
|
|
113
|
+
}
|
|
83
114
|
|
|
84
|
-
|
|
115
|
+
function removeFragmentChangeEventListener(fragmentChangeHandler) {
|
|
116
|
+
const index = fragmentChangeHandlers.indexOf(fragmentChangeHandler),
|
|
117
|
+
start = index, ///
|
|
118
|
+
deleteCount = 1;
|
|
85
119
|
|
|
86
|
-
|
|
120
|
+
fragmentChangeHandlers.splice(start, deleteCount);
|
|
87
121
|
|
|
88
|
-
return
|
|
89
|
-
}
|
|
122
|
+
return fragmentChangeHandler;
|
|
123
|
+
}
|
package/src/index.js
CHANGED