96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
let hasSmallNav = false;
|
|
let containerWidth = document.getElementById("container").clientWidth - 40;//subtract small nav
|
|
let main = document.querySelector(".main");
|
|
let preview = document.getElementById("preview");
|
|
let previewIframe = preview?.querySelector("iframe");
|
|
let previewSeparator = document.getElementById("preview-separator");
|
|
let featuredImage = document.getElementById("featured-image-thumb");
|
|
let previewResponsive = document.querySelector(".preview-responsive");
|
|
let previewUrl = document.querySelector("[data-v-post-content-url], [data-v-product-content-url]")?.getAttribute("href");
|
|
let titleElement;
|
|
let contentElement;
|
|
let imageElement;
|
|
|
|
document.getElementById("btn-preview")?.addEventListener("change", function(e) {
|
|
main.style.width = "";
|
|
preview.style.width = "";
|
|
previewSeparator.style.left = "";
|
|
let icon = this.labels.item(0);
|
|
icon.classList.toggle("close");
|
|
icon = icon.querySelector("i");
|
|
previewResponsive.classList.toggle("d-none");
|
|
|
|
if (document.getElementById("container").classList.contains("preview")) {
|
|
document.getElementById("container").classList.remove("preview");
|
|
if (!hasSmallNav) {
|
|
document.getElementById("container").classList.remove("small-nav");
|
|
}
|
|
|
|
icon.setAttribute("class", "icon-eye-outline");
|
|
} else {
|
|
if (!previewIframe.src) previewIframe.src = previewUrl + "?r=true&preview=true";
|
|
document.getElementById("container").classList.add("preview");
|
|
hasSmallNav = document.getElementById("container").classList.contains("small-nav");
|
|
document.getElementById("container").classList.add("small-nav");
|
|
|
|
|
|
icon.setAttribute("class", "icon-close-outline");
|
|
|
|
}
|
|
});
|
|
|
|
featuredImage?.addEventListener('load', function(e) {
|
|
if (imageElement) {
|
|
let src = featuredImage.getAttribute("src");
|
|
if (src.indexOf("placeholder.svg") > 0) {
|
|
src = "";
|
|
}
|
|
imageElement.src = src;
|
|
}
|
|
});
|
|
|
|
function previewViewport(btn) {
|
|
preview.setAttribute("class", btn.dataset.view);
|
|
}
|
|
|
|
document.getElementById("zoom")?.addEventListener('change', function(e) {
|
|
let scale = "";
|
|
let height = "";
|
|
if (this.value != "100") {
|
|
scale = "scale(" + this.value + "%)";
|
|
height = ((100 / this.value) * 100) + "%";
|
|
}
|
|
preview.style.transform = scale;
|
|
preview.style.height = height;
|
|
});
|
|
|
|
previewIframe?.addEventListener('load', function(e) {
|
|
titleElement = previewIframe.contentDocument.querySelector("[data-v-component-post] [data-v-post-name], [data-v-component-product] [data-v-product-name]");
|
|
contentElement = previewIframe.contentDocument.querySelector("[data-v-component-post] [data-v-post-content], [data-v-component-product] [data-v-product-content]");
|
|
imageElement = previewIframe.contentDocument.querySelector("[data-v-component-post] [data-v-post-image], [data-v-component-product] [data-v-product-main-image]");
|
|
});
|
|
|
|
let isDown = false;
|
|
previewSeparator?.addEventListener('mousedown', function(e) {
|
|
if (e.which == 1) {//left click
|
|
isDown = true;
|
|
previewSeparator.classList.add("active");
|
|
}
|
|
}, true);
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
isDown = false;
|
|
previewSeparator.classList.remove("active");
|
|
}, true);
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
if (isDown) {
|
|
previewSeparator.style.left = (e.clientX - 6) + "px";
|
|
delay(function () {
|
|
let width = (containerWidth - e.clientX);
|
|
main.style.width = (e.clientX - 40) + "px"
|
|
preview.style.width = (width + 40) + "px"
|
|
}, 100);
|
|
}
|
|
});
|