@lrnwebcomponents/hax-body
Version:
A full on Headless authoring experience as a single tag. The ultimate authoring solution across platforms to win the future.
89 lines (81 loc) • 2.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>HAX: h-a-x Demo</title>
<script>
window.process = window.process || {
env: {
NODE_ENV: "production"
}
};
</script>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@lrnwebcomponents/h-a-x/h-a-x.js';
import("@polymer/polymer/lib/utils/settings.js").then((esModule) => {
esModule.setPassiveTouchGestures(true);
});
</script>
<style>
#bodydiv { padding:100px 300px 100px 100px; }
/** This is mobile layout for controls */
@media screen and (max-width: 800px) {
#bodydiv { padding:100px; }
}
</style>
</head>
<body>
<button id="load">Load file</button>
<h-a-x element-align="right" app-store='{"url": "appstore.json"}'>
<p>Click load file to load some HTML from your file system</p>
</h-a-x>
<script>
let fileHandle;
let loadBtn = document.querySelector("#load");
loadBtn.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
const file = await fileHandle.getFile();
var contents = await file.text();
if (!isHTML(contents)) {
contents = `<p>${contents}</p>`;
}
window.Hax.import(contents);
});
function isHTML(str) {
var a = document.createElement('div');
a.innerHTML = str;
for (var c = a.childNodes, i = c.length; i--; ) {
if (c[i].nodeType == 1) return true;
}
return false;
}
// handle save back to file system
window.addEventListener("hax-save-body-value", async (e) => {
setTimeout(async () => {
const options = {
types: [
{
description: 'Save output',
accept: {
'text/html': ['.html'],
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
// Create a FileSystemWritableFileStream to write to.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(window.HaxStore.instance.activeHaxBody.innerHTML);
// Close the file and write the contents to disk.
await writable.close();
},0);
});
</script>
</body>
</html>