finish preview in editor
This commit is contained in:
Reorx
parent
582d629057
commit
50e9624133
|
|
@ -12,6 +12,7 @@
|
|||
"@json-editor/json-editor": "^2.9.0-beta.1",
|
||||
"ajv": "^8.12.0",
|
||||
"ajv-formats": "^2.1.1",
|
||||
"cash-dom": "^8.1.3",
|
||||
"dayjs": "^1.11.7",
|
||||
"ejs": "^3.1.8",
|
||||
"iconify-icon": "^1.0.3",
|
||||
|
|
@ -868,6 +869,11 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/cash-dom": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cash-dom/-/cash-dom-8.1.3.tgz",
|
||||
"integrity": "sha512-+W6A9GrgH6do57T/2QLlobr8Q3nwvRoLf74HQRu8zFsyP8hBAjg0RJsubIP+uoV7MYknnugrEdEW5HHH0hJB7Q=="
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
|
|
@ -3844,6 +3850,11 @@
|
|||
"get-intrinsic": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"cash-dom": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cash-dom/-/cash-dom-8.1.3.tgz",
|
||||
"integrity": "sha512-+W6A9GrgH6do57T/2QLlobr8Q3nwvRoLf74HQRu8zFsyP8hBAjg0RJsubIP+uoV7MYknnugrEdEW5HHH0hJB7Q=="
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"@json-editor/json-editor": "^2.9.0-beta.1",
|
||||
"ajv": "^8.12.0",
|
||||
"ajv-formats": "^2.1.1",
|
||||
"cash-dom": "^8.1.3",
|
||||
"dayjs": "^1.11.7",
|
||||
"ejs": "^3.1.8",
|
||||
"iconify-icon": "^1.0.3",
|
||||
|
|
|
|||
|
|
@ -15,10 +15,17 @@
|
|||
<div>Editor</div>
|
||||
</div>
|
||||
<div class="editor-toc"></div>
|
||||
<div class="app-actions">
|
||||
<button id="fn-show-preview">Show Preview</button>
|
||||
<button id="fn-show-json">Show JSON</button>
|
||||
<button id="fn-download-json">Download JSON</button>
|
||||
<button id="fn-download-html">Download HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle column editor-container"></div>
|
||||
<div class="right column">
|
||||
<div class="editor-output code-block"></div>
|
||||
<div class="output-json code-block" style="display: none;"></div>
|
||||
<iframe class="output-html" src="/editor/preview.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import 'iconify-icon'; // import only
|
||||
|
||||
import $ from 'cash-dom';
|
||||
import objectPath from 'object-path';
|
||||
|
||||
import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor';
|
||||
|
||||
import * as exampleData from '../../sample.resume.json';
|
||||
import { saveCVJSON } from '../lib/store';
|
||||
import {
|
||||
createElement,
|
||||
traverseDownObject,
|
||||
|
|
@ -100,8 +102,29 @@ editor.on('ready',() => {
|
|||
})
|
||||
})
|
||||
|
||||
const $outputJSON = $('.output-json')
|
||||
const $outputHTML = $('.output-html')
|
||||
|
||||
// listen to change
|
||||
const elOutput = document.querySelector('.editor-output')
|
||||
editor.on('change', () => {
|
||||
elOutput.textContent = JSON.stringify(editor.getValue(), null, 2)
|
||||
console.log('on editor change')
|
||||
const cvJSON = JSON.stringify(editor.getValue(), null, 2)
|
||||
$outputJSON.text(cvJSON)
|
||||
|
||||
// save to localstorage
|
||||
saveCVJSON(cvJSON)
|
||||
})
|
||||
|
||||
// actions
|
||||
const $btnShowPreview = $('#fn-show-preview')
|
||||
const $btnShowJSON = $('#fn-show-json')
|
||||
|
||||
$btnShowPreview.on('click', () => {
|
||||
$outputJSON.hide()
|
||||
$outputHTML.show()
|
||||
})
|
||||
|
||||
$btnShowJSON.on('click', () => {
|
||||
$outputHTML.hide()
|
||||
$outputJSON.show()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cv-container"></div>
|
||||
|
||||
<script src="preview.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import {
|
||||
getCVData,
|
||||
getCVSavedTime,
|
||||
} from '../lib/store';
|
||||
import { applyThemeTo } from '../themer';
|
||||
|
||||
const themeName = 'default'
|
||||
const elCV = document.querySelector('.cv-container')
|
||||
|
||||
applyThemeTo(themeName, elCV, getCVData())
|
||||
|
||||
const savedTime = getCVSavedTime()
|
||||
console.log('preview loaded', Date.now())
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (savedTime != getCVSavedTime()) {
|
||||
clearInterval(interval)
|
||||
location.reload()
|
||||
}
|
||||
}, 1000)
|
||||
|
|
@ -42,7 +42,6 @@ body {
|
|||
}
|
||||
.right {
|
||||
background-color: #eee;
|
||||
padding: var(--gap);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,6 +66,15 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.output-html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.output-json {
|
||||
padding: var(--gap);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export const getIconSVG = function(name, { dom }) {
|
|||
...svgAttributesBase,
|
||||
...renderData.attributes,
|
||||
};
|
||||
console.log('attrs', svgAttributesBase, renderData.attributes)
|
||||
|
||||
// Generate SVG
|
||||
const svgAttributesStr = Object.keys(svgAttributes)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
export const storeKeys = {
|
||||
cvJSON: 'cvJSON',
|
||||
cvSavedTime: 'cvSavedTime',
|
||||
}
|
||||
|
||||
export function saveCVJSON(str) {
|
||||
localStorage.setItem(storeKeys.cvJSON, str)
|
||||
localStorage.setItem(storeKeys.cvSavedTime, Date.now())
|
||||
}
|
||||
|
||||
export function getCVData() {
|
||||
const v = localStorage.getItem(storeKeys.cvJSON)
|
||||
if (!v) return
|
||||
return JSON.parse(v)
|
||||
}
|
||||
|
||||
export function getCVSavedTime() {
|
||||
return localStorage.getItem(storeKeys.cvSavedTime)
|
||||
}
|
||||
|
|
@ -1,13 +1,7 @@
|
|||
import * as exampleData from '../data/rxresume-converted.json';
|
||||
import { reformatDate } from './lib/date';
|
||||
import { applyThemeTo } from './themer';
|
||||
|
||||
const elCV = document.querySelector('.cv-container')
|
||||
|
||||
|
||||
applyThemeTo('default', {
|
||||
cv: exampleData,
|
||||
fn: {
|
||||
reformatDate,
|
||||
}
|
||||
}, elCV)
|
||||
applyThemeTo('default', elCV, exampleData)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import ejs from 'ejs';
|
||||
|
||||
import { reformatDate } from '../lib/date';
|
||||
|
||||
const themes = {}
|
||||
|
||||
const themeNames = ['reorx']
|
||||
|
|
@ -28,15 +30,20 @@ export function getTheme(name) {
|
|||
return themes[name]
|
||||
}
|
||||
|
||||
export function render(template, data, options) {
|
||||
return ejs.render(template, data, options)
|
||||
export function renderTheme(template, data, options) {
|
||||
return ejs.render(template, {
|
||||
cv: data,
|
||||
fn: {
|
||||
reformatDate,
|
||||
}
|
||||
}, options)
|
||||
}
|
||||
|
||||
const cvStyleId = 'cv-style'
|
||||
|
||||
export function applyThemeTo(name, data, el) {
|
||||
export function applyThemeTo(name, el, data) {
|
||||
const theme = getTheme(name)
|
||||
el.innerHTML = render(theme.template, data)
|
||||
el.innerHTML = renderTheme(theme.template, data)
|
||||
|
||||
let elStyle = document.getElementById(cvStyleId)
|
||||
if (!elStyle) {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export default defineConfig({
|
|||
input: {
|
||||
main: resolve(rootDir, 'index.html'),
|
||||
editor: resolve(rootDir, 'editor/index.html'),
|
||||
editorPreview: resolve(rootDir, 'editor/preview.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue