Commit 1892d26d by ramdayalmunda

changes in document editor

parent 5c895467
.a-doc-editor { .a-doc-editor {
background: #6fc; background: #777;
}
.a-doc-editor canvas {
background: #fff;
}
.a-doc-editor canvas:focus-visible {
outline: red auto 1px;
} }
\ No newline at end of file
let isModule = (typeof module !='undefined')?true:false let isModule = (typeof module != 'undefined') ? true : false
var ADocEditor = function(customConfig){ var ADocEditor = function (customConfig) {
var container = null
var mainComponent = null
var defaultConfig = {
element: "",
pageSetup: {
width: 210,
height: 297,
},
format: {
background: "#fff",
margin: 20,
border: "",
}
}
var config = null;
var canvasList = []
var dataSet = [
{
type: "text",
plainContent: "Hello World"
}
]
var caretData = {
activeData: dataSet[0],
index: dataSet[0].plainContent.length,
interval: null,
blink: false,
}
var renderInProgress = false
return { function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig }
config.pageSetup.canvasMultiplier = Math.round(720 / config.pageSetup.width)
config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width
config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height
if (!config.element) throw "'container' not provided in the config"
if (typeof config.element == 'string') container = document.querySelector(config.element)
if (config.element instanceof HTMLElement) container = config.element
if (!container) throw "undefined"
mainComponent = document.createElement('div')
mainComponent.setAttribute('class', 'a-doc-editor')
container.append(mainComponent)
reRenderPages(dataSet)
caretData.interval = setInterval(() => {
caretData.blink = !caretData.blink
reRenderPages(dataSet, true)
}, 1000)
}
function reRenderPages(dataList, blinking = false) {
console.log('blink', caretData.blink)
if (renderInProgress) return
renderInProgress = true
let canvasIndex = 0
if (!canvasList.length) canvasList[0] = createCanvas()
// to clear the canvases
for (let i = 0; i < canvasList.length; i++) {
let ctx = canvasList[i].getContext('2d')
ctx.clearRect(0, 0, canvasList[i].width, canvasList[i].height)
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvasList[i].width, canvasList[i].height)
}
for (let i = 0; i < dataList.length; i++) {
let canvas = canvasList[canvasIndex]
canvas.setAttribute("tabIndex", -1)
renderText(canvas, dataList[i])
}
function createCanvas() {
let canvas = document.createElement('canvas')
canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler)
mainComponent.append(canvas)
return canvas
}
function renderText(canvas, dataSet) {
let ctx = canvas.getContext('2d')
ctx.save()
let fontSize = 28;
let fontFamily = "Arial"
ctx.font = `${fontSize}px ${fontFamily}`
ctx.fillStyle = `#000`
ctx.fillText(dataSet.plainContent, 0, fontSize * (3 / 4))
ctx.restore()
return true
}
function keydownHandler(e) {
caretData.blink = false
console.log(e)
if (e.keyCode == 32) e.preventDefault()
if (e.key.length == 1 || e.keyCode == 32) {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
++caretData.index
}
else if (e.keyCode == 8) { // backspace
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.index = caretData.index <= 0 ? 0 : caretData.index - 1
}
reRenderPages(dataList)
}
function mousedownHandler(e) {
e.target.focus({ preventScroll: true });
}
renderInProgress = false
}
inititalize(customConfig)
function destory(){
clearInterval(caretData.interval)
}
return {
destory,
} }
} }
......
...@@ -6,9 +6,16 @@ ...@@ -6,9 +6,16 @@
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./assets/a-doc-editor.css"> <link rel="stylesheet" href="./assets/a-doc-editor.css">
<script src="./assets/a-doc-editor.js"></script> <script src="./assets/a-doc-editor.js"></script>
<style>
body {
background: #aaa;
}
</style>
</head> </head>
<body> <body>
<h1>Hello A dOc EdiTor</h1> <h1>Hello World!</h1>
<h2>To create a custom doc editor</h2>
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
<h1>Some other data</h1> <h1>Some other data</h1>
<h1>Random heading </h1> <h1>Random heading </h1>
......
!(async function(){ !(async function(){
let editor = new ADocEditor({ element: "#user-container-for-editor" }) let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
console.log('to run', editor) console.log('to run', editor)
})() })()
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment