Skip to content

A
a-doc-editor
Commit 01295e1a by ramdayalmunda
Options

some feature added for headers

parent 71818282
Showing with 214 additions and 42 deletions
dist/assets/a-doc-editor.css
......@@ -12,7 +12,8 @@
hidden {
display: none;
}
canvas:focus-visible{
canvas:focus-visible {
outline: unset;
}
......@@ -38,7 +39,7 @@ canvas:focus-visible{
background-color: goldenrod;
}
.toolbar [adc-type="menu-item"]:hover [adc-type="menu-options"] {
.toolbar [adc-type="menu-item"].hover [adc-type="menu-options"] {
opacity: 1;
z-index: 10;
pointer-events: auto;
......@@ -57,7 +58,7 @@ canvas:focus-visible{
.toolbar .item {
position: relative;
background: #408640;
background: white;
border: 1px solid gray;
border-radius: 3px;
padding-top: 2px;
......@@ -71,10 +72,12 @@ canvas:focus-visible{
.popover {
position: absolute;
padding: 5px;
background-color: gray;
background-color: #fff;
border: 1px solid purple;
opacity: 0;
pointer-events: none;
text-align: center;
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.4);
}
.popover.show {
......@@ -84,7 +87,8 @@ canvas:focus-visible{
}
.toolbar .item:hover {
background: #5fad5f;
background: white;
animation: shineAnimation 1s infinite alternate;
}
[adc-type="popover"] {
......@@ -110,6 +114,59 @@ canvas:focus-visible{
background-color: #f5c468;
}
.content-area {
display: flex;
overflow-x: auto;
overflow-y: hidden;
}
.content-area .left-sidebar{
width: 200px;
background-color:#408640;
padding: 5px;
}
.content-area .right-sidebar{
width: 200px;
background-color: #f5c468;
padding: 5px;
}
.content-area .left-sidebar,
.content-area .page-list,
.content-area .right-sidebar{
flex-shrink: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
text-wrap: nowrap;
transition: 0.5s;
margin-top: 0;
}
.left-sidebar .toggle-btn,
.right-sidebar .toggle-btn{
display: block;
position: static;
top: 0;
width: 100%;
text-align: center;
}
.left-sidebar .content,
.right-sidebar .content{
opacity: 1;
position: relative;
left: 0%;
transition: 0.5s;
}
.left-sidebar.hide,
.right-sidebar.hide{
width: 50px;
}
.left-sidebar.hide .content,
.right-sidebar.hide .content{
opacity: 0;
}
.page-list {
position: relative;
display: block;
......@@ -126,7 +183,8 @@ canvas:focus-visible{
height: auto;
display: block;
position: relative;
margin: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.footer {
......@@ -134,4 +192,16 @@ canvas:focus-visible{
display: block;
width: 100%;
background-color: red;
}
@keyframes shineAnimation {
0% {
background: #fff;
}
50% {
background: #ddd;
}
100% {
background: #fff;
}
}
\ No newline at end of file
dist/assets/a-doc-editor.js
......@@ -8,6 +8,13 @@ var ADocEditor = function (customConfig) {
}
const letters = { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e", "5": "f", "6": "g", "7": "h", "8": "i", "9": "j", "a": "k", "b": "l", "c": "m", "d": "n", "e": "o", "f": "p", "g": "q", "h": "r", "i": "s", "j": "t", "k": "u", "l": "v", "m": "w", "n": "x", "o": "y", "p": "z" }
const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
const styleList = [
{ name: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false },
{ name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false },
{ name: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false },
{ name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false },
]
var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1,
format: {
......@@ -47,7 +54,11 @@ var ADocEditor = function (customConfig) {
pageIndex: 0,
caretSize: config.style.fontSize,
previousCaret: null,
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
style: null,
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
}
}
var pageList = []
var pageScrollingDiv = null
......@@ -86,8 +97,8 @@ var ADocEditor = function (customConfig) {
<div class="item" adc="list-handler" adc-target="list-popover">
<span>L</span>
<div class="popover" adc="list-popover" adc-type="popover">
<div class="option" adc-toggle="listing-option" value="1">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="option" adc-toggle="listing-option" value="0">1. Numbers</div>
<div class="option" adc-toggle="popover" value="1">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="option" adc-toggle="popover" value="0">1. Numbers</div>
</div>
</div>
<div class="item">
......@@ -95,9 +106,28 @@ var ADocEditor = function (customConfig) {
<input type="number" adc="font-size-input" class="small-input">
<button adc="font-size-change" class="small-btn" value="+1">+</button>
</div>
<div class="item" adc="style-handler" adc-target="style-popover" style="width: 150px;">
<span>Normal Text</span>
<div class="popover" adc="style-popover" adc-type="popover">
<div class="option" adc-toggle="popover" value="1">Normal Text</div>
<div class="option" adc-toggle="popover" value="0">Header 1</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="left-sidebar hide">
<button class="toggle-btn" adc="toggle-left-sidebar">X</button>
<div class="content" adc="left-sidebar-content"></div>
</div>
<div class="page-list" adc="page-list"></div>
<div class="right-sidebar hide">
<button class="toggle-btn" adc="toggle-right-sidebar">X</button>
<div class="content" adc="right-sidebar-content"></div>
</div>
</div>
<div class="page-list" adc="page-list"></div>
<div class="footer">
<div class="toolbar">
......@@ -146,7 +176,7 @@ var ADocEditor = function (customConfig) {
htmlObj = {
header: shadow.querySelector('.header'),
pageList: shadow.querySelector('page-list')
pageList: shadow.querySelector('[adc="page-list"]')
}
pageScrollingDiv = shadow.querySelector('[adc="page-list"]')
......@@ -178,7 +208,7 @@ var ADocEditor = function (customConfig) {
})()
!(function handleList() {
let listItems = shadow.querySelectorAll('[adc-toggle="listing-option"]')
let listItems = shadow.querySelectorAll('[adc-toggle="popover"]')
let popover = shadow.querySelector('[adc-type="popover"]')
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', (e) => {
......@@ -202,7 +232,7 @@ var ADocEditor = function (customConfig) {
!(function fontSizeHandler() {
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = caretData.style.fontSize
fontSizeInput.value = (caretData?.style?caretData:config).style.fontSize
let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
fontSizeChangers.forEach(btn => {
btn.addEventListener('click', (e) => {
......@@ -254,6 +284,45 @@ var ADocEditor = function (customConfig) {
.addEventListener('click', printDoc)
})()
!(function styleHandler(){
let stylePopup = shadow.querySelector('[adc="style-popover"]')
stylePopup.innerHTML = ""
styleList.forEach( (style, s)=>{
let option = document.createElement('div')
option.setAttribute('class', 'option')
option.setAttribute('adc-toggle', "popover")
option.append(style.name)
option.style.fontFamily = style.fontFamily
option.style.fontSize = `${style.fontSize}pt`
option.style.color = style.fontColor
stylePopup.append(option)
option.addEventListener('click', (e)=>{
stylePopup.classList.remove('show')
if (caretData.activeData){
caretData.activeData.style = { ...style }
reRenderCanvas()
focusOnPage()
}
})
} )
})()
!(function sidebarsHandlers(){
let leftSidebar = shadow.querySelector('.left-sidebar')
let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]')
toggleLeft.addEventListener('click', ()=>{
leftSidebar.classList.toggle('hide')
})
let rightSidebar = shadow.querySelector('.right-sidebar')
let toggleRight = shadow.querySelector('[adc="toggle-right-sidebar"]')
toggleRight.addEventListener('click', ()=>{
rightSidebar.classList.toggle('hide')
toggleRight.scrollIntoView({behavior: 'smooth'})
})
})()
reConfigure(customConfig)
reRenderCanvas()
addGlobalEvents()
......@@ -292,7 +361,7 @@ var ADocEditor = function (customConfig) {
let pageIndex = 0
if (!pageList.length) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
shadow.querySelector('.page-list').append(pageList[pageIndex].el)
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el)
}
......@@ -364,8 +433,9 @@ var ADocEditor = function (customConfig) {
}
}
for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[c]
lineObj.maxFontSize = (lineObj.maxFontSize < dataBlock?.formatedText?.[c].fontSize) ? dataBlock?.formatedText?.[c].fontSize : lineObj.maxFontSize
let style = dataBlock?.formatedText?.[c].style
if (!style) style = { ...config.style }
lineObj.maxFontSize = (lineObj.maxFontSize < style.fontSize) ? style.fontSize : lineObj.maxFontSize
if (/\s/.test(dataBlock.plainContent[c])) {
// condition to check if a blank character is found.
......@@ -376,9 +446,13 @@ var ADocEditor = function (customConfig) {
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
dataBlock.formatedText[c] = {
...config.style,
...style,
width: charWidth
style: {
...config.style,
...style,
},
dimension: {
width: charWidth,
},
}
// // if with the current char the string could not fit on one line
......@@ -483,16 +557,16 @@ var ADocEditor = function (customConfig) {
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
if (char) {
let style = setData.formatedText[c]
let style = setData.formatedText[c].style
ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio * mmPtRatio}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}`
ctx.fillText(char, x, y)
setData.formatedText[c].x = x
setData.formatedText[c].y = y
setData.formatedText[c].dimension.x = x
setData.formatedText[c].dimension.y = y
ctx.restore()
if (setData.formatedText[c]?.width) {
x += setData.formatedText[c]?.width
if (setData.formatedText[c]?.dimension?.width) {
x += setData.formatedText[c]?.dimension?.width
}
}
}
......@@ -605,7 +679,10 @@ var ADocEditor = function (customConfig) {
// ***** DISPLAYABLE TEXT **** //
e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style)
let style = caretData.style
style = style?style:null
console.log(style)
caretData.activeData.formatedText.splice(caretData.index, 0, { style : style, dimension: {} })
++caretData.index
}
else if (e.key == 'ArrowLeft') {
......@@ -658,9 +735,9 @@ var ADocEditor = function (customConfig) {
if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio * mmPtRatio))) {
let dataSet = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
if ((cursor.x >= dataSet.formatedText[c].x) && (cursor.x <= (dataSet.formatedText[c].width + dataSet.formatedText[c].x))) {
if ((cursor.x >= dataSet.formatedText[c]?.dimension?.x) && (cursor.x <= (dataSet.formatedText[c]?.dimension?.width + dataSet.formatedText[c]?.dimension?.x))) {
caretData.activeData = dataSet
if (cursor.x <= dataSet.formatedText[c].x + dataSet.formatedText[c].width / 2) {
if (cursor.x <= dataSet.formatedText[c]?.dimension?.x + dataSet.formatedText[c]?.dimension?.width / 2) {
caretData.index = c
} else {
caretData.index = c + 1
......@@ -686,7 +763,7 @@ var ADocEditor = function (customConfig) {
const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width;
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
placeCaret({ x: pxX, y: pxY })
let style = caretData.activeData.formatedText[caretData.index]
let style = caretData.activeData.formatedText[caretData.index]?.style
if (style) caretData.style = {
...caretData.style,
fontSize: style.fontSize,
......@@ -825,7 +902,7 @@ var ADocEditor = function (customConfig) {
}
function changeFontFamily() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
if (fontFamilyDropdown) fontFamilyDropdown.value = caretData.style.fontFamily
if (fontFamilyDropdown) fontFamilyDropdown.value = (caretData?.style?caretData:config).style.fontFamily
}
}
......@@ -836,8 +913,9 @@ var ADocEditor = function (customConfig) {
}
function addGlobalEvents(e) {
shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler)
shadow.addEventListener('mousedown', globalMouseDownHandler)
shadow.addEventListener('mouseover', globalMouseOverHandler)
}
function globalMouseDownHandler(e) {
var elem = e.target
......@@ -856,6 +934,23 @@ var ADocEditor = function (customConfig) {
}
function globalMouseOverHandler(e){
let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]')
menuItems.forEach( item => item.classList.remove('hover') )
let hoverElem
let elem = e?.target
while(elem){
if (elem?.getAttribute?.('adc-type')=='menu-item' ){
hoverElem = elem;
break
}
elem = elem.parentNode
}
if (hoverElem){
hoverElem.classList.add('hover')
}
}
function renderCaret(toLoop) {
clearTimeout(caretData.timeout)
......@@ -875,14 +970,15 @@ var ADocEditor = function (customConfig) {
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth
let y = (config.format.margin) * pxMmRatio
let height = caretData.style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let height = (caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let width = height / 10
let charData = caretData.activeData.formatedText[caretData.index - 1]
let charDimension = caretData.activeData.formatedText[caretData.index - 1]?.dimension
if (lineObj) {
x = (charData ? (charData.x + charData.width) : x)
if (charData) {
y = charData.y - (caretData.style.fontSize * pxMmRatio * mmPtRatio)
x = (charDimension ? (charDimension.x + charDimension.width) : x)
if (charDimension) {
y = charDimension.y - ((caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio)
} else {
if (prevLine && prevLine.pageIndex != lineObj.pageIndex) {
y = (config.format.margin) * pxMmRatio
......@@ -914,7 +1010,7 @@ var ADocEditor = function (customConfig) {
if (thisPage != focussedPage) {
lastFocussedPage = thisPage
focussedPage = thisPage
focusOnPage()
// focusOnPage()
}
ctx.restore()
......@@ -939,6 +1035,7 @@ var ADocEditor = function (customConfig) {
}
function newDocument(e) {
globalMouseOverHandler(); // to hide the menu when clicked
caretData.blink = true
dataList = [
{
......@@ -961,7 +1058,11 @@ var ADocEditor = function (customConfig) {
pageIndex: 0,
caretSize: config.style.fontSize,
previousCaret: null,
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
style: { ...dataList[0].style },
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
},
}
pageList = []
shadow.querySelector('[adc="page-list"').innerHTML = ""
......@@ -1058,7 +1159,7 @@ var ADocEditor = function (customConfig) {
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
let fontObj = fontList.find(item => item.name == dataSet.formatedText[c].fontFamily)
let fontObj = fontList.find(item => item.name == dataSet.formatedText[c]?.style?.fontFamily)
let font = embeddedFonts[fontObj.name]
if (!font) {
const fontBytes = fontObj.fontBytes
......@@ -1066,13 +1167,13 @@ var ADocEditor = function (customConfig) {
embeddedFonts[fontObj.name] = font
}
x = dataSet.formatedText[c].x / (pxMmRatio * mmPtRatio); // X-coordinate
y = pageHeight - dataSet.formatedText[c].y / (pxMmRatio * mmPtRatio); // Y-coordinate
x = dataSet.formatedText[c]?.dimension?.x / (pxMmRatio * mmPtRatio); // X-coordinate
y = pageHeight - dataSet.formatedText[c]?.style?.y / (pxMmRatio * mmPtRatio); // Y-coordinate
page.drawText(dataSet.plainContent[c], {
x, y, font,
size: dataSet.formatedText[c].fontSize,
color: rgb(...getRgb(dataSet.formatedText[c].fontColor))
size: dataSet.formatedText[c]?.style?.fontSize,
color: rgb(...getRgb(dataSet.formatedText[c]?.style.fontColor))
});
}
......
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