Commit 40a9ddfd by ramdayalmunda

added header footer, mainbody, sidebars

parent ee5d9a4e
.a-doc-editor { .a-doc-editor {
background: #777; display: flex;
flex-direction: column;
height: 400px;
} }
.a-doc-editor canvas {
background: #fff;
}
.a-doc-editor canvas:focus-visible { .a-doc-editor canvas:focus-visible {
outline: red auto 1px; 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
...@@ -3,6 +3,11 @@ var ADocEditor = function (customConfig) { ...@@ -3,6 +3,11 @@ var ADocEditor = function (customConfig) {
var counter = 0 var counter = 0
var container = null var container = null
var mainComponent = null var mainComponent = null
var headerComponent = null
var footerComponent = null
var scrollingComponent = null
var leftSidebar = null
var rightSidebar = null
var defaultConfig = { var defaultConfig = {
element: "", element: "",
pageSetup: { pageSetup: {
...@@ -40,8 +45,18 @@ var ADocEditor = function (customConfig) { ...@@ -40,8 +45,18 @@ var ADocEditor = function (customConfig) {
x: 0, x: 0,
y: 21, y: 21,
} }
var renderInProgress = false var renderInProgress = false;
var focusedCanvas = false; var focusedCanvas = false;
var domElement = {
header: {
el: document.createElement('div'),
},
body: {
el: document.createElement('div'),
}
}
function inititalize(customConfig) { function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig } config = { ...defaultConfig, ...customConfig }
...@@ -54,10 +69,43 @@ var ADocEditor = function (customConfig) { ...@@ -54,10 +69,43 @@ var ADocEditor = function (customConfig) {
if (config.element instanceof HTMLElement) container = config.element if (config.element instanceof HTMLElement) container = config.element
if (!container) throw "undefined" if (!container) throw "undefined"
let mainComponentId = `main-${new Date().getTime()}`
mainComponent = document.createElement('div') let headerComponentId = `header-${new Date().getTime()}`
mainComponent.setAttribute('class', 'a-doc-editor') let footerComponentId = `footer-${new Date().getTime()}`
container.append(mainComponent) 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) reRenderPages(dataSet)
// caretData.interval = setInterval(() => { // caretData.interval = setInterval(() => {
...@@ -108,16 +156,16 @@ var ADocEditor = function (customConfig) { ...@@ -108,16 +156,16 @@ var ADocEditor = function (customConfig) {
let words = "" let words = ""
let wordsLength = 0; let wordsLength = 0;
dataSet.formatedText = [] 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 wordEndIndex = i
} }
let style = { ...config.style, ...dataSet?.style?.[i] } let style = { ...config.style, ...dataSet?.style?.[i] }
if (i==0){ if (i == 0) {
y += style.fontSize y += style.fontSize
} }
ctx.save() ctx.save()
...@@ -132,15 +180,15 @@ var ADocEditor = function (customConfig) { ...@@ -132,15 +180,15 @@ var ADocEditor = function (customConfig) {
y: y, y: y,
...style, ...style,
} }
x+= charWidth x += charWidth
if (wordsLength+charWidth<=maxWidth){ if (wordsLength + charWidth <= maxWidth) {
wordsLength+=charWidth wordsLength += charWidth
}else{ } else {
i = wordEndIndex i = wordEndIndex
wordsLength = 0 wordsLength = 0
y+= style.fontSize y += style.fontSize
x=0; x = 0;
wordStartIndex = wordEndIndex wordStartIndex = wordEndIndex
} }
...@@ -148,7 +196,7 @@ var ADocEditor = function (customConfig) { ...@@ -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.save()
ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}` ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor) console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor)
...@@ -170,11 +218,11 @@ var ADocEditor = function (customConfig) { ...@@ -170,11 +218,11 @@ var ADocEditor = function (customConfig) {
// to render caret // to render caret
function renderCaret() { function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true }) let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index-1] let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
let rectX = activeTextData?.x+activeTextData?.width; let rectX = activeTextData?.x + activeTextData?.width;
let rectY = activeTextData?.y-activeTextData?.fontSize; let rectY = activeTextData?.y - activeTextData?.fontSize;
rectX = rectX?rectX:0 rectX = rectX ? rectX : 0
rectY = rectY?rectY:0 rectY = rectY ? rectY : 0
let rectWidth = 2; let rectWidth = 2;
let rectHeight = caretData.caretSize; let rectHeight = caretData.caretSize;
...@@ -199,7 +247,7 @@ var ADocEditor = function (customConfig) { ...@@ -199,7 +247,7 @@ var ADocEditor = function (customConfig) {
canvas.addEventListener('mousedown', mousedownHandler) canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler) canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler) canvas.addEventListener("blur", onBlurHandler)
mainComponent.append(canvas) scrollingComponent.append(canvas)
return canvas return canvas
} }
...@@ -279,10 +327,10 @@ var ADocEditor = function (customConfig) { ...@@ -279,10 +327,10 @@ var ADocEditor = function (customConfig) {
var returnObj = { var returnObj = {
destory, destory,
loadContent: function(data){ loadContent: function (data) {
console.log('to load', JSON.parse( JSON.stringify( dataSet))) console.log('to load', JSON.parse(JSON.stringify(dataSet)))
dataSet = JSON.parse( JSON.stringify(data) ) dataSet = JSON.parse(JSON.stringify(data))
console.log('new Data', JSON.parse( JSON.stringify( dataSet))) console.log('new Data', JSON.parse(JSON.stringify(dataSet)))
caretData.activeData = null caretData.activeData = null
caretData.activeData = dataSet[0] caretData.activeData = dataSet[0]
caretData.index = dataSet[0].plainContent.length caretData.index = dataSet[0].plainContent.length
......
...@@ -14,12 +14,11 @@ ...@@ -14,12 +14,11 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Hello World!</h1>
<h2>To create a custom doc editor</h2> <h2>To create a custom doc editor</h2>
<p>Click on the canvas and start typing</p> <p>Click on the canvas and start typing</p>
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
<h1>Some other data</h1>
<h1>Random heading </h1>
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>
</body> </body>
</html> </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