Skip to content

A
a-doc-editor
Commit 40a9ddfd by ramdayalmunda
Options

added header footer, mainbody, sidebars

parent ee5d9a4e
Showing with 132 additions and 32 deletions
dist/assets/a-doc-editor.css
.a-doc-editor {
background: #777;
display: flex;
flex-direction: column;
height: 400px;
}
.a-doc-editor canvas {
background: #fff;
}
.a-doc-editor canvas:focus-visible {
outline: red auto 1px;
}
.a-doc-editor .header {
overflow: auto;
background-color: #f0f0f0;
}
.a-doc-editor .footer {
overflow: auto;
background-color: #91d8bd;
}
.a-doc-editor .body {
flex: 1;
position: relative;
background-color: #ccc;
}
.a-doc-editor .body .left-sidebar {
position: absolute;
height: 100%;
left: 0;
background-color: #be3737;
}
.a-doc-editor .body .right-sidebar {
position: absolute;
height: 100%;
right: 0;
background-color: #8abe37;
}
.a-doc-editor .body .scrolling-area {
position: absolute;
left: 20%;
right: 20%;
top: 0;
bottom: 0;
background-color: #3756be;
text-align: center;
align-items: center;
overflow: auto;
}
.a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3;
margin-bottom: 10px;
}
.a-doc-editor .body .scrolling-area canvas.page:first-child {
margin-top: 10px;
}
\ No newline at end of file
dist/assets/a-doc-editor.js
......@@ -3,6 +3,11 @@ var ADocEditor = function (customConfig) {
var counter = 0
var container = null
var mainComponent = null
var headerComponent = null
var footerComponent = null
var scrollingComponent = null
var leftSidebar = null
var rightSidebar = null
var defaultConfig = {
element: "",
pageSetup: {
......@@ -40,8 +45,18 @@ var ADocEditor = function (customConfig) {
x: 0,
y: 21,
}
var renderInProgress = false
var renderInProgress = false;
var focusedCanvas = false;
var domElement = {
header: {
el: document.createElement('div'),
},
body: {
el: document.createElement('div'),
}
}
function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig }
......@@ -54,10 +69,43 @@ var ADocEditor = function (customConfig) {
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)
let mainComponentId = `main-${new Date().getTime()}`
let headerComponentId = `header-${new Date().getTime()}`
let footerComponentId = `footer-${new Date().getTime()}`
let scrollingAreaId = `scrolling-area-${new Date().getTime()}`
let leftSidebarId = `left-sidebar-${new Date().getTime()}`
let rightSidebarId = `right-sidebar-${new Date().getTime()}`
let htmlSetup = /*html*/`
<div class="a-doc-editor" id="${mainComponentId}">
<div class="header" id="${headerComponentId}">
<div>Menu bar</div>
<div>Formating tools</div>
<div>Page tools</div>
</div>
<div class="body">
<div class="scrolling-area" id="${scrollingAreaId}">
</div>
<div class="left-sidebar" id="${leftSidebarId}">Left</div>
<div class="right-sidebar" id="${rightSidebarId}">Right</div>
</div>
<div class="footer" id="${footerComponentId}">
<div>Footer Data</div>
</div>
</div>
`
container.innerHTML = htmlSetup
mainComponent = document.getElementById(mainComponentId)
headerComponent = document.getElementById(headerComponentId)
scrollingComponent = document.getElementById(scrollingAreaId)
footerComponent = document.getElementById(footerComponentId)
leftSidebar = document.getElementById(leftSidebarId)
rightSidebar = document.getElementById(rightSidebarId)
// mainComponent = document.createElement('div')
// mainComponent.setAttribute('class', 'a-doc-editor')
// container.append(mainComponent)
reRenderPages(dataSet)
// caretData.interval = setInterval(() => {
......@@ -108,16 +156,16 @@ var ADocEditor = function (customConfig) {
let words = ""
let wordsLength = 0;
dataSet.formatedText = []
for (let i=0; i<dataSet.plainContent.length; i++){
for (let i = 0; i < dataSet.plainContent.length; i++) {
if ( /\s+/.test(dataSet.plainContent[i]) ){
if (/\s+/.test(dataSet.plainContent[i])) {
wordEndIndex = i
}
let style = { ...config.style, ...dataSet?.style?.[i] }
if (i==0){
if (i == 0) {
y += style.fontSize
}
ctx.save()
......@@ -132,15 +180,15 @@ var ADocEditor = function (customConfig) {
y: y,
...style,
}
x+= charWidth
x += charWidth
if (wordsLength+charWidth<=maxWidth){
wordsLength+=charWidth
}else{
if (wordsLength + charWidth <= maxWidth) {
wordsLength += charWidth
} else {
i = wordEndIndex
wordsLength = 0
y+= style.fontSize
x=0;
y += style.fontSize
x = 0;
wordStartIndex = wordEndIndex
}
......@@ -148,7 +196,7 @@ var ADocEditor = function (customConfig) {
}
for (let i=0; i<dataSet.formatedText.length; i++){
for (let i = 0; i < dataSet.formatedText.length; i++) {
ctx.save()
ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor)
......@@ -170,11 +218,11 @@ var ADocEditor = function (customConfig) {
// to render caret
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index-1]
let rectX = activeTextData?.x+activeTextData?.width;
let rectY = activeTextData?.y-activeTextData?.fontSize;
rectX = rectX?rectX:0
rectY = rectY?rectY:0
let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
let rectX = activeTextData?.x + activeTextData?.width;
let rectY = activeTextData?.y - activeTextData?.fontSize;
rectX = rectX ? rectX : 0
rectY = rectY ? rectY : 0
let rectWidth = 2;
let rectHeight = caretData.caretSize;
......@@ -199,7 +247,7 @@ var ADocEditor = function (customConfig) {
canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler)
mainComponent.append(canvas)
scrollingComponent.append(canvas)
return canvas
}
......@@ -279,10 +327,10 @@ var ADocEditor = function (customConfig) {
var returnObj = {
destory,
loadContent: function(data){
console.log('to load', JSON.parse( JSON.stringify( dataSet)))
dataSet = JSON.parse( JSON.stringify(data) )
console.log('new Data', JSON.parse( JSON.stringify( dataSet)))
loadContent: function (data) {
console.log('to load', JSON.parse(JSON.stringify(dataSet)))
dataSet = JSON.parse(JSON.stringify(data))
console.log('new Data', JSON.parse(JSON.stringify(dataSet)))
caretData.activeData = null
caretData.activeData = dataSet[0]
caretData.index = dataSet[0].plainContent.length
......
dist/index.html
......@@ -14,12 +14,11 @@
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>To create a custom doc editor</h2>
<p>Click on the canvas and start typing</p>
<div id="user-container-for-editor"></div>
<h1>Some other data</h1>
<h1>Random heading </h1>
<script type="module" src="./script.js"></script>
</body>
</html>
\ 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