2020-12-30 07:49:49 +01:00
|
|
|
let preview = null;
|
|
|
|
|
2020-12-29 13:16:54 +01:00
|
|
|
window.onload = function () {
|
|
|
|
const previewButton = document.querySelector("input#_live_preview");
|
2020-12-29 20:04:51 +01:00
|
|
|
previewButton.addEventListener("click", openPreviewPopup);
|
2020-12-29 13:16:54 +01:00
|
|
|
};
|
|
|
|
window.onbeforeunload = function () {
|
|
|
|
if (preview !== null) {
|
|
|
|
preview.close();
|
|
|
|
}
|
|
|
|
};
|
2020-12-29 20:04:51 +01:00
|
|
|
|
|
|
|
function openPreviewPopup(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
const params = "width=800,height=1000,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes";
|
|
|
|
if (preview !== null) {
|
|
|
|
preview.close();
|
|
|
|
}
|
|
|
|
preview = window.open("about:blank", "Preview", params);
|
|
|
|
setTimeout(loadPreview, 1000);
|
|
|
|
setupLivePreview();
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadPreview() {
|
|
|
|
const id = Number(window.location.pathname.match(/\d+/)[0]);
|
2020-12-29 21:47:37 +01:00
|
|
|
const body = prepareBody();
|
2020-12-29 20:04:51 +01:00
|
|
|
fetch(`/api/render/${id}/`, {method: "POST", body: body})
|
2020-12-30 07:49:49 +01:00
|
|
|
.then(response => {
|
|
|
|
return response.text();
|
|
|
|
})
|
|
|
|
.then(value => {
|
|
|
|
preview.document.open("text/html", "replace");
|
|
|
|
preview.document.write(value);
|
|
|
|
preview.document.close();
|
2020-12-29 20:04:51 +01:00
|
|
|
})
|
2020-12-30 07:49:49 +01:00
|
|
|
.catch(console.error);
|
2020-12-29 20:04:51 +01:00
|
|
|
}
|
|
|
|
|
2020-12-29 21:47:37 +01:00
|
|
|
function prepareBody() {
|
|
|
|
const body = new FormData();
|
|
|
|
const inputs = [
|
|
|
|
{
|
|
|
|
selector: "#id_content",
|
|
|
|
property: "value",
|
|
|
|
to: "content",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
selector: "input[name=csrfmiddlewaretoken]",
|
|
|
|
property: "value",
|
|
|
|
to: "csrfmiddlewaretoken",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
selector: "#id_has_code",
|
|
|
|
property: "checked",
|
|
|
|
to: "has_code",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
selector: "#id_title",
|
|
|
|
property: "value",
|
|
|
|
to: "title",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
selector: "#id_custom_css",
|
|
|
|
property: "value",
|
|
|
|
to: "custom_css",
|
|
|
|
},
|
|
|
|
];
|
|
|
|
for (const input of inputs) {
|
|
|
|
const element = document.querySelector(input.selector);
|
|
|
|
body.set(input.to, element[input.property]);
|
|
|
|
}
|
2021-03-06 14:43:04 +01:00
|
|
|
const tagIds = Array.from(document.querySelector("#id_tags").selectedOptions).map(option => option.value).join();
|
|
|
|
body.set("tag_ids", tagIds);
|
2020-12-29 21:47:37 +01:00
|
|
|
return body;
|
|
|
|
}
|
|
|
|
|
2020-12-29 20:04:51 +01:00
|
|
|
function setupLivePreview() {
|
|
|
|
const debouncedLoadPreview = debounce(loadPreview, 500);
|
2020-12-29 21:47:37 +01:00
|
|
|
|
|
|
|
function listener(event) {
|
2020-12-29 20:04:51 +01:00
|
|
|
event.preventDefault();
|
|
|
|
debouncedLoadPreview();
|
2020-12-29 21:47:37 +01:00
|
|
|
}
|
|
|
|
const ids = ["id_content", "id_title", "id_has_code", "id_custom_css"];
|
|
|
|
for (const id of ids) {
|
|
|
|
const element = document.getElementById(id);
|
|
|
|
element.addEventListener("input", listener);
|
|
|
|
}
|
2020-12-29 20:04:51 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a function, that, as long as it continues to be invoked, will not
|
|
|
|
* be triggered. The function will be called after it stops being called for
|
|
|
|
* `wait` milliseconds.
|
|
|
|
*/
|
|
|
|
function debounce(func, wait) {
|
|
|
|
let timeout;
|
|
|
|
return function () {
|
|
|
|
const context = this, args = arguments;
|
|
|
|
const later = function () {
|
|
|
|
timeout = null;
|
|
|
|
func.apply(context, args);
|
|
|
|
};
|
|
|
|
clearTimeout(timeout);
|
|
|
|
timeout = setTimeout(later, wait);
|
|
|
|
};
|
|
|
|
}
|