[Docs] Use replaceState API when demo code changes (#710)
In the current demo, every time the code in the left panel is changed, the new code is stored in the URL hash, which pushes a new history entry. This effectively "breaks" the back button. This change calls `history.replaceState` instead, so a single click of the back button will return the browser to whatever page was open before navigating to the demo.master
parent
74fb4a43b1
commit
eda26398e5
|
@ -131,6 +131,20 @@ function getOptions() {
|
||||||
return options;
|
return options;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function replaceHash(hash) {
|
||||||
|
if (
|
||||||
|
typeof URL === "function" &&
|
||||||
|
typeof history === "object" &&
|
||||||
|
typeof history.replaceState === "function"
|
||||||
|
) {
|
||||||
|
var url = new URL(location);
|
||||||
|
url.hash = hash;
|
||||||
|
history.replaceState(null, null, url);
|
||||||
|
} else {
|
||||||
|
location.hash = hash;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function format() {
|
function format() {
|
||||||
var options = getOptions();
|
var options = getOptions();
|
||||||
[docEditor, outputEditor].forEach(function(editor) {
|
[docEditor, outputEditor].forEach(function(editor) {
|
||||||
|
@ -146,7 +160,7 @@ function format() {
|
||||||
Object.assign({content: inputEditor.getValue(), options: options})
|
Object.assign({content: inputEditor.getValue(), options: options})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
location.hash = value;
|
replaceHash(value);
|
||||||
var res;
|
var res;
|
||||||
try {
|
try {
|
||||||
res = prettier.format(inputEditor.getValue(), options);
|
res = prettier.format(inputEditor.getValue(), options);
|
||||||
|
|
Loading…
Reference in New Issue