307 lines
9.2 KiB
JavaScript
307 lines
9.2 KiB
JavaScript
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||
|
|
|
||
|
|
import warning from 'warning';
|
||
|
|
import invariant from 'invariant';
|
||
|
|
import { createLocation, locationsAreEqual } from './LocationUtils';
|
||
|
|
import { addLeadingSlash, stripLeadingSlash, stripTrailingSlash, hasBasename, stripBasename, createPath } from './PathUtils';
|
||
|
|
import createTransitionManager from './createTransitionManager';
|
||
|
|
import { canUseDOM, addEventListener, removeEventListener, getConfirmation, supportsGoWithoutReloadUsingHash } from './DOMUtils';
|
||
|
|
|
||
|
|
var HashChangeEvent = 'hashchange';
|
||
|
|
|
||
|
|
var HashPathCoders = {
|
||
|
|
hashbang: {
|
||
|
|
encodePath: function encodePath(path) {
|
||
|
|
return path.charAt(0) === '!' ? path : '!/' + stripLeadingSlash(path);
|
||
|
|
},
|
||
|
|
decodePath: function decodePath(path) {
|
||
|
|
return path.charAt(0) === '!' ? path.substr(1) : path;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
noslash: {
|
||
|
|
encodePath: stripLeadingSlash,
|
||
|
|
decodePath: addLeadingSlash
|
||
|
|
},
|
||
|
|
slash: {
|
||
|
|
encodePath: addLeadingSlash,
|
||
|
|
decodePath: addLeadingSlash
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var getHashPath = function getHashPath() {
|
||
|
|
// We can't use window.location.hash here because it's not
|
||
|
|
// consistent across browsers - Firefox will pre-decode it!
|
||
|
|
var href = window.location.href;
|
||
|
|
var hashIndex = href.indexOf('#');
|
||
|
|
return hashIndex === -1 ? '' : href.substring(hashIndex + 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var pushHashPath = function pushHashPath(path) {
|
||
|
|
return window.location.hash = path;
|
||
|
|
};
|
||
|
|
|
||
|
|
var replaceHashPath = function replaceHashPath(path) {
|
||
|
|
var hashIndex = window.location.href.indexOf('#');
|
||
|
|
|
||
|
|
window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + '#' + path);
|
||
|
|
};
|
||
|
|
|
||
|
|
var createHashHistory = function createHashHistory() {
|
||
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||
|
|
|
||
|
|
invariant(canUseDOM, 'Hash history needs a DOM');
|
||
|
|
|
||
|
|
var globalHistory = window.history;
|
||
|
|
var canGoWithoutReload = supportsGoWithoutReloadUsingHash();
|
||
|
|
|
||
|
|
var _props$getUserConfirm = props.getUserConfirmation,
|
||
|
|
getUserConfirmation = _props$getUserConfirm === undefined ? getConfirmation : _props$getUserConfirm,
|
||
|
|
_props$hashType = props.hashType,
|
||
|
|
hashType = _props$hashType === undefined ? 'slash' : _props$hashType;
|
||
|
|
|
||
|
|
var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
|
||
|
|
|
||
|
|
var _HashPathCoders$hashT = HashPathCoders[hashType],
|
||
|
|
encodePath = _HashPathCoders$hashT.encodePath,
|
||
|
|
decodePath = _HashPathCoders$hashT.decodePath;
|
||
|
|
|
||
|
|
|
||
|
|
var getDOMLocation = function getDOMLocation() {
|
||
|
|
var path = decodePath(getHashPath());
|
||
|
|
|
||
|
|
warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path "' + path + '" to begin with "' + basename + '".');
|
||
|
|
|
||
|
|
if (basename) path = stripBasename(path, basename);
|
||
|
|
|
||
|
|
return createLocation(path);
|
||
|
|
};
|
||
|
|
|
||
|
|
var transitionManager = createTransitionManager();
|
||
|
|
|
||
|
|
var setState = function setState(nextState) {
|
||
|
|
_extends(history, nextState);
|
||
|
|
|
||
|
|
history.length = globalHistory.length;
|
||
|
|
|
||
|
|
transitionManager.notifyListeners(history.location, history.action);
|
||
|
|
};
|
||
|
|
|
||
|
|
var forceNextPop = false;
|
||
|
|
var ignorePath = null;
|
||
|
|
|
||
|
|
var handleHashChange = function handleHashChange() {
|
||
|
|
var path = getHashPath();
|
||
|
|
var encodedPath = encodePath(path);
|
||
|
|
|
||
|
|
if (path !== encodedPath) {
|
||
|
|
// Ensure we always have a properly-encoded hash.
|
||
|
|
replaceHashPath(encodedPath);
|
||
|
|
} else {
|
||
|
|
var location = getDOMLocation();
|
||
|
|
var prevLocation = history.location;
|
||
|
|
|
||
|
|
if (!forceNextPop && locationsAreEqual(prevLocation, location)) return; // A hashchange doesn't always == location change.
|
||
|
|
|
||
|
|
if (ignorePath === createPath(location)) return; // Ignore this change; we already setState in push/replace.
|
||
|
|
|
||
|
|
ignorePath = null;
|
||
|
|
|
||
|
|
handlePop(location);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var handlePop = function handlePop(location) {
|
||
|
|
if (forceNextPop) {
|
||
|
|
forceNextPop = false;
|
||
|
|
setState();
|
||
|
|
} else {
|
||
|
|
var action = 'POP';
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (ok) {
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
} else {
|
||
|
|
revertPop(location);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var revertPop = function revertPop(fromLocation) {
|
||
|
|
var toLocation = history.location;
|
||
|
|
|
||
|
|
// TODO: We could probably make this more reliable by
|
||
|
|
// keeping a list of paths we've seen in sessionStorage.
|
||
|
|
// Instead, we just default to 0 for paths we don't know.
|
||
|
|
|
||
|
|
var toIndex = allPaths.lastIndexOf(createPath(toLocation));
|
||
|
|
|
||
|
|
if (toIndex === -1) toIndex = 0;
|
||
|
|
|
||
|
|
var fromIndex = allPaths.lastIndexOf(createPath(fromLocation));
|
||
|
|
|
||
|
|
if (fromIndex === -1) fromIndex = 0;
|
||
|
|
|
||
|
|
var delta = toIndex - fromIndex;
|
||
|
|
|
||
|
|
if (delta) {
|
||
|
|
forceNextPop = true;
|
||
|
|
go(delta);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Ensure the hash is encoded properly before doing anything else.
|
||
|
|
var path = getHashPath();
|
||
|
|
var encodedPath = encodePath(path);
|
||
|
|
|
||
|
|
if (path !== encodedPath) replaceHashPath(encodedPath);
|
||
|
|
|
||
|
|
var initialLocation = getDOMLocation();
|
||
|
|
var allPaths = [createPath(initialLocation)];
|
||
|
|
|
||
|
|
// Public interface
|
||
|
|
|
||
|
|
var createHref = function createHref(location) {
|
||
|
|
return '#' + encodePath(basename + createPath(location));
|
||
|
|
};
|
||
|
|
|
||
|
|
var push = function push(path, state) {
|
||
|
|
warning(state === undefined, 'Hash history cannot push state; it is ignored');
|
||
|
|
|
||
|
|
var action = 'PUSH';
|
||
|
|
var location = createLocation(path, undefined, undefined, history.location);
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (!ok) return;
|
||
|
|
|
||
|
|
var path = createPath(location);
|
||
|
|
var encodedPath = encodePath(basename + path);
|
||
|
|
var hashChanged = getHashPath() !== encodedPath;
|
||
|
|
|
||
|
|
if (hashChanged) {
|
||
|
|
// We cannot tell if a hashchange was caused by a PUSH, so we'd
|
||
|
|
// rather setState here and ignore the hashchange. The caveat here
|
||
|
|
// is that other hash histories in the page will consider it a POP.
|
||
|
|
ignorePath = path;
|
||
|
|
pushHashPath(encodedPath);
|
||
|
|
|
||
|
|
var prevIndex = allPaths.lastIndexOf(createPath(history.location));
|
||
|
|
var nextPaths = allPaths.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
|
||
|
|
|
||
|
|
nextPaths.push(path);
|
||
|
|
allPaths = nextPaths;
|
||
|
|
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
} else {
|
||
|
|
warning(false, 'Hash history cannot PUSH the same path; a new entry will not be added to the history stack');
|
||
|
|
|
||
|
|
setState();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var replace = function replace(path, state) {
|
||
|
|
warning(state === undefined, 'Hash history cannot replace state; it is ignored');
|
||
|
|
|
||
|
|
var action = 'REPLACE';
|
||
|
|
var location = createLocation(path, undefined, undefined, history.location);
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (!ok) return;
|
||
|
|
|
||
|
|
var path = createPath(location);
|
||
|
|
var encodedPath = encodePath(basename + path);
|
||
|
|
var hashChanged = getHashPath() !== encodedPath;
|
||
|
|
|
||
|
|
if (hashChanged) {
|
||
|
|
// We cannot tell if a hashchange was caused by a REPLACE, so we'd
|
||
|
|
// rather setState here and ignore the hashchange. The caveat here
|
||
|
|
// is that other hash histories in the page will consider it a POP.
|
||
|
|
ignorePath = path;
|
||
|
|
replaceHashPath(encodedPath);
|
||
|
|
}
|
||
|
|
|
||
|
|
var prevIndex = allPaths.indexOf(createPath(history.location));
|
||
|
|
|
||
|
|
if (prevIndex !== -1) allPaths[prevIndex] = path;
|
||
|
|
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var go = function go(n) {
|
||
|
|
warning(canGoWithoutReload, 'Hash history go(n) causes a full page reload in this browser');
|
||
|
|
|
||
|
|
globalHistory.go(n);
|
||
|
|
};
|
||
|
|
|
||
|
|
var goBack = function goBack() {
|
||
|
|
return go(-1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var goForward = function goForward() {
|
||
|
|
return go(1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var listenerCount = 0;
|
||
|
|
|
||
|
|
var checkDOMListeners = function checkDOMListeners(delta) {
|
||
|
|
listenerCount += delta;
|
||
|
|
|
||
|
|
if (listenerCount === 1) {
|
||
|
|
addEventListener(window, HashChangeEvent, handleHashChange);
|
||
|
|
} else if (listenerCount === 0) {
|
||
|
|
removeEventListener(window, HashChangeEvent, handleHashChange);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var isBlocked = false;
|
||
|
|
|
||
|
|
var block = function block() {
|
||
|
|
var prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||
|
|
|
||
|
|
var unblock = transitionManager.setPrompt(prompt);
|
||
|
|
|
||
|
|
if (!isBlocked) {
|
||
|
|
checkDOMListeners(1);
|
||
|
|
isBlocked = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return function () {
|
||
|
|
if (isBlocked) {
|
||
|
|
isBlocked = false;
|
||
|
|
checkDOMListeners(-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
return unblock();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
var listen = function listen(listener) {
|
||
|
|
var unlisten = transitionManager.appendListener(listener);
|
||
|
|
checkDOMListeners(1);
|
||
|
|
|
||
|
|
return function () {
|
||
|
|
checkDOMListeners(-1);
|
||
|
|
unlisten();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
var history = {
|
||
|
|
length: globalHistory.length,
|
||
|
|
action: 'POP',
|
||
|
|
location: initialLocation,
|
||
|
|
createHref: createHref,
|
||
|
|
push: push,
|
||
|
|
replace: replace,
|
||
|
|
go: go,
|
||
|
|
goBack: goBack,
|
||
|
|
goForward: goForward,
|
||
|
|
block: block,
|
||
|
|
listen: listen
|
||
|
|
};
|
||
|
|
|
||
|
|
return history;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default createHashHistory;
|