Skip to content

Commit

Permalink
hotfix scrolling in iframe
Browse files Browse the repository at this point in the history
  • Loading branch information
Mia committed Oct 23, 2022
1 parent a415ce0 commit 3833b28
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 7 deletions.
2 changes: 1 addition & 1 deletion dist/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9210,7 +9210,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst monaco_editor_1 = __webpack_require__(/*! monaco-editor */ \"include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js\");\nconst default_1 = __webpack_require__(/*! ./default */ \"./src/default.ts\");\nconst marked_1 = __webpack_require__(/*! marked */ \"./node_modules/marked/lib/marked.cjs\");\nconst store = default_1.defaults;\nconst fileTabs = document.getElementById(\"fileTabs\");\nsetTabAsActive(\"markdown\");\nconst editorInstance = monaco_editor_1.editor.create(document.getElementById(\"editor\"), {\n value: store.markdown,\n language: \"markdown\",\n theme: \"vs-dark\",\n});\nwindow.onresize = function () {\n editorInstance.layout();\n};\nconsole.log(\"Hello World\");\nlet iframeHTMLPassive = \"\";\nconst iframe = document.createElement(\"iframe\");\ndocument.getElementById(\"preview\").innerHTML = \"\";\ndocument.getElementById(\"preview\").appendChild(iframe);\nbuildPreview();\nfileTabs.addEventListener(\"click\", (e) => {\n const val = e.target.innerText;\n setTabAsActive(val);\n switch (val) {\n case \"markdown\":\n editorInstance.setValue(store.markdown);\n break;\n case \"html\":\n editorInstance.setValue(store.html);\n break;\n case \"css\":\n editorInstance.setValue(store.css);\n break;\n default:\n break;\n }\n});\nlet loading = false;\neditorInstance.getModel().onDidChangeContent((e) => {\n if (loading)\n return;\n loading = true;\n setTimeout(() => {\n setCurrentFile(editorInstance.getValue());\n buildPreview();\n loading = false;\n }, 1000);\n});\nfunction setCurrentFile(val) {\n const file = getCurrentFile();\n switch (file) {\n case \"markdown\":\n store.markdown = val;\n break;\n case \"html\":\n store.html = val;\n break;\n case \"css\":\n store.css = val;\n break;\n default:\n break;\n }\n monaco_editor_1.editor.setModelLanguage(editorInstance.getModel(), file);\n}\nfunction getCurrentFile() {\n return fileTabs.querySelector(\".active\").innerHTML;\n}\nfunction setTabAsActive(file) {\n const active = fileTabs.querySelector(\".active\");\n if (active)\n active.classList.remove(\"active\");\n const newActive = fileTabs.querySelector(`[data-file='${file}']`);\n newActive.classList.add(\"active\");\n}\nfunction buildPreview() {\n let html = store.html;\n const css = store.css;\n const markdownParsed = marked_1.marked.parse(store.markdown);\n html = html.replace(\"{{css}}\", css);\n html = html.replace(\"{{markdown}}\", markdownParsed);\n iframe.contentWindow.document.write(html);\n iframe.contentWindow.document.close();\n iframeHTMLPassive = html;\n}\ndocument.getElementById(\"save\").addEventListener(\"click\", () => {\n const blob = new Blob([JSON.stringify(store)], { type: \"text/plain\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"store.json\";\n a.click();\n});\ndocument.getElementById(\"html\").addEventListener(\"click\", () => {\n const blob = new Blob([iframeHTMLPassive], { type: \"text/html\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"index.html\";\n a.click();\n});\n\n\n//# sourceURL=webpack://faultier-cv/./src/main.ts?");
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst monaco_editor_1 = __webpack_require__(/*! monaco-editor */ \"include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js\");\nconst default_1 = __webpack_require__(/*! ./default */ \"./src/default.ts\");\nconst marked_1 = __webpack_require__(/*! marked */ \"./node_modules/marked/lib/marked.cjs\");\nconst store = default_1.defaults;\nconst fileTabs = document.getElementById(\"fileTabs\");\nsetTabAsActive(\"markdown\");\nconst editorInstance = monaco_editor_1.editor.create(document.getElementById(\"editor\"), {\n value: store.markdown,\n language: \"markdown\",\n theme: \"vs-dark\",\n});\nwindow.onresize = function () {\n editorInstance.layout();\n};\nconsole.log(\"Hello World\");\nlet iframeHTMLPassive = \"\";\nconst iframe = document.createElement(\"iframe\");\nconst preview = document.getElementById(\"preview\");\npreview.innerHTML = \"\";\npreview.appendChild(iframe);\nbuildPreview();\nfileTabs.addEventListener(\"click\", (e) => {\n const val = e.target.innerText;\n setTabAsActive(val);\n switch (val) {\n case \"markdown\":\n editorInstance.setValue(store.markdown);\n break;\n case \"html\":\n editorInstance.setValue(store.html);\n break;\n case \"css\":\n editorInstance.setValue(store.css);\n break;\n default:\n break;\n }\n});\nlet loading = false;\neditorInstance.getModel().onDidChangeContent((e) => {\n if (loading)\n return;\n loading = true;\n setTimeout(() => {\n setCurrentFile(editorInstance.getValue());\n buildPreview();\n loading = false;\n }, 1000);\n});\nfunction setCurrentFile(val) {\n const file = getCurrentFile();\n switch (file) {\n case \"markdown\":\n store.markdown = val;\n break;\n case \"html\":\n store.html = val;\n break;\n case \"css\":\n store.css = val;\n break;\n default:\n break;\n }\n monaco_editor_1.editor.setModelLanguage(editorInstance.getModel(), file);\n}\nfunction getCurrentFile() {\n return fileTabs.querySelector(\".active\").innerHTML;\n}\nfunction setTabAsActive(file) {\n const active = fileTabs.querySelector(\".active\");\n if (active)\n active.classList.remove(\"active\");\n const newActive = fileTabs.querySelector(`[data-file='${file}']`);\n newActive.classList.add(\"active\");\n}\nfunction buildPreview() {\n let html = store.html;\n const css = store.css;\n const markdownParsed = marked_1.marked.parse(store.markdown);\n html = html.replace(\"{{css}}\", css);\n html = html.replace(\"{{markdown}}\", markdownParsed);\n iframe.contentWindow.document.write(html);\n iframe.contentWindow.document.close();\n iframeHTMLPassive = html;\n}\ndocument.getElementById(\"save\").addEventListener(\"click\", () => {\n const blob = new Blob([JSON.stringify(store)], { type: \"text/plain\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"store.json\";\n a.click();\n});\ndocument.getElementById(\"html\").addEventListener(\"click\", () => {\n const blob = new Blob([iframeHTMLPassive], { type: \"text/html\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"index.html\";\n a.click();\n});\n\n\n//# sourceURL=webpack://faultier-cv/./src/main.ts?");

/***/ }),

Expand Down
7 changes: 5 additions & 2 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@
<style>
html,
body {
display: flex;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-height: 100vh;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 5em auto;
grid-template-columns: 50% 50%;
max-height: 100vh;
max-width: 100vw;
}
#editor,
body > div {
height: 100%;
width: 100%;
overflow: hidden;
}
#head {
grid-column: 1 / 3;
Expand All @@ -45,7 +47,8 @@
margin-left: 3em;
}
#preview {
height: 100%;
height: calc(100% - 2.3em);
overflow: hidden;
}
iframe {
border: none;
Expand Down
7 changes: 5 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@
<style>
html,
body {
display: flex;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-height: 100vh;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 5em auto;
grid-template-columns: 50% 50%;
max-height: 100vh;
max-width: 100vw;
}
#editor,
body > div {
height: 100%;
width: 100%;
overflow: hidden;
}
#head {
grid-column: 1 / 3;
Expand All @@ -45,7 +47,8 @@
margin-left: 3em;
}
#preview {
height: 100%;
height: calc(100% - 2.3em);
overflow: hidden;
}
iframe {
border: none;
Expand Down
5 changes: 3 additions & 2 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ window.onresize = function () {
console.log("Hello World");
let iframeHTMLPassive = "";
const iframe = document.createElement("iframe");
document.getElementById("preview").innerHTML = "";
document.getElementById("preview").appendChild(iframe);
const preview = document.getElementById("preview");
preview.innerHTML = "";
preview.appendChild(iframe);

buildPreview();

Expand Down

0 comments on commit 3833b28

Please sign in to comment.