Skip to content

A
a-doc-editor
Commit 08459ade by ramdayalmunda
Options

added numbering in list system

parent 5cc0cc1b
Showing with 116 additions and 58 deletions
dist/assets/a-doc-editor2.js
......@@ -5,6 +5,8 @@ var ADocEditor = function (customConfig) {
var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 },
}
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"] ];
var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1,
format: {
......@@ -145,24 +147,26 @@ var ADocEditor = function (customConfig) {
})()
!(function handleList(){
!(function handleList() {
let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
let popover = shadow.querySelector('[adc-type="popover"]')
toggleNumber.addEventListener('click', (e)=>{
if (caretData.activeData){
caretData.activeData.type = caretData.activeData.type==1?0:1
caretData.blink=false
toggleNumber.addEventListener('click', (e) => {
if (caretData.activeData) {
caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
caretData.activeData.listStyle = 0
caretData.blink = false
reRenderCanvas()
popover.classList.remove('show')
focusOnPage()
}
})
toggleBullet.addEventListener('click', (e)=>{
if (caretData.activeData){
caretData.activeData.type = caretData.activeData.type==1?0:1
caretData.blink=false
toggleBullet.addEventListener('click', (e) => {
if (caretData.activeData) {
caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
caretData.activeData.listStyle = 1
caretData.blink = false
reRenderCanvas()
popover.classList.remove('show')
focusOnPage()
......@@ -257,23 +261,23 @@ var ADocEditor = function (customConfig) {
// to calculate the lines
let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
let tabWidth = ( (dataBlock.type==1?1:0)+ dataBlock.tabCount)*config.format.tabWidth*pxMmRatio
let tabWidth = ((dataBlock.type == 1 ? 1 : 0) + dataBlock.tabCount) * config.format.tabWidth * pxMmRatio
lineObj.tabWidth = tabWidth
maxLineWidth -= tabWidth
lineObj.dataType = dataBlock.type
let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
let tempWordWidth = 0
if (dataBlock.type==1){
let previousBlock = dataList[d-1]
if (!previousBlock || previousBlock?.type!=1) dataBlock.listItemNumber = 1
if (dataBlock.type == 1) {
let previousBlock = dataList[d - 1]
if (!previousBlock || previousBlock?.type != 1) dataBlock.listItemNumber = 1
else if (previousBlock.tabCount == dataBlock.tabCount) {
dataBlock.listItemNumber = previousBlock.listItemNumber+1
} else{
dataBlock.listItemNumber = previousBlock.listItemNumber + 1
} else {
dataBlock.listItemNumber = 1
let olderBlockIndex = d-1
while(dataList?.[olderBlockIndex]?.type==1 && dataList?.[olderBlockIndex]?.tabCount>=dataBlock.tabCount){
if ( dataList?.[olderBlockIndex]?.tabCount==dataBlock.tabCount ){
dataBlock.listItemNumber = dataList?.[olderBlockIndex].listItemNumber+1
let olderBlockIndex = d - 1
while (dataList?.[olderBlockIndex]?.type == 1 && dataList?.[olderBlockIndex]?.tabCount >= dataBlock.tabCount) {
if (dataList?.[olderBlockIndex]?.tabCount == dataBlock.tabCount) {
dataBlock.listItemNumber = dataList?.[olderBlockIndex].listItemNumber + 1
break;
}
--olderBlockIndex;
......@@ -298,10 +302,10 @@ var ADocEditor = function (customConfig) {
}
// // if with the current char the string could not fit on one line
if (tempLineWidth + charWidth > maxLineWidth){
if (tempLineWidth + charWidth > maxLineWidth) {
// cannot add this// new line should be added//
if (tempWordWidth+charWidth>=maxLineWidth){
if (tempWordWidth + charWidth >= maxLineWidth) {
// this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line.
wordEndIndex = c
......@@ -314,15 +318,15 @@ var ADocEditor = function (customConfig) {
lineObj = new getLineObj()
maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
lineObj.maxLineWidth = maxLineWidth
if (dataBlock.type==1) lineObj.tabWidth = tabWidth
if (dataBlock.type == 1) lineObj.tabWidth = tabWidth
else lineObj.tabWidth = 0
if (dataBlock.type==1) lineObj.tabCount = dataBlock.tabCount
if (dataBlock.type == 1) lineObj.tabCount = dataBlock.tabCount
else lineObj.tabCount = 0
lineObj.charStartIndex = wordEndIndex + 1
lineObj.charEndIndex = wordEndIndex + 1
tempLineWidth = tempWordWidth
}
else{
else {
// if the char can fit in the same line. then it is well and good
tempLineWidth += charWidth
tempWordWidth += charWidth
......@@ -347,6 +351,7 @@ var ADocEditor = function (customConfig) {
}
function renderLines() {
console.clear()
let x = 0, y = config.format.margin * pxMmRatio;
for (let l = 0; l < lines.length; l++) {
let setData = dataList[lines[l].dataIndex]
......@@ -358,14 +363,14 @@ var ADocEditor = function (customConfig) {
ctx.save()
// this is to render the numbering and bullets etc
if (lines[l].dataType==1){
if (lines[l].dataType == 1) {
ctx.save()
ctx.font = `${setData.style.fontSize * pxMmRatio}px ${setData.style.fontFamily}`
ctx.fillStyle = `${setData.style.fontColor}`
let label = `${setData.listItemNumber?setData.listItemNumber:'X'}.`
let label = getLabel(lines[l].dataIndex)
let labelWidth = ctx.measureText(label).width
labelWidth+=pxMmRatio*5
ctx.fillText(label, x-labelWidth, y)
labelWidth += pxMmRatio * 5
ctx.fillText(label, x - labelWidth, y)
ctx.restore()
}
......@@ -393,6 +398,58 @@ var ADocEditor = function (customConfig) {
return
}
function getLabel(dataIndex) {
let label = "x."
if (dataList[dataIndex].listStyle == 0) { // 1. a. i.
let tabCount = dataList[dataIndex].tabCount
tabCount = tabCount ? tabCount : 0
if (tabCount % 3 == 0) label = `${dataList[dataIndex].listItemNumber}.`
else if (tabCount % 3 == 1) label = `${convertToLetter(dataList[dataIndex].listItemNumber)}.`
else label = `${convertToRoman(dataList[dataIndex].listItemNumber).toLowerCase()}.`
}
else if (dataList[dataIndex].listStyle == 0) { // >
label = `>`
}
function convertToLetter(num) {
num = (num-1).toString(26)
let label = ""
for(let i=0;i<num.length;i++) label+= letters[num[i]]
return label
}
function convertToRoman(num) {
let result = '';
let divisor = 1000;
for (let i = 3; i >= 0; i--) {
const digit = Math.floor(num / divisor);
num %= divisor;
divisor /= 10;
if (digit > 0) {
if (digit === 9) {
result += romanNumerals[i][3];
} else if (digit >= 5) {
result += romanNumerals[i][2];
result += romanNumerals[i][0].repeat(digit - 5);
} else if (digit === 4) {
result += romanNumerals[i][1];
} else {
result += romanNumerals[i][0].repeat(digit);
}
}
}
return result;
}
return label
}
function getCharacterWidth(char, style) {
let canvas = pageList[0].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
......@@ -437,24 +494,24 @@ var ADocEditor = function (customConfig) {
function keydownHandler(e) {
if (e.altKey) return
else if (e.key=='Tab'){
else if (e.key == 'Tab') {
e.preventDefault()
manageIndentation(e.shiftKey?-1:1)
}else if ([']','['].includes(e.key) && e.ctrlKey){
manageIndentation( e.key=='['?-1:1 )
manageIndentation(e.shiftKey ? -1 : 1)
} else if ([']', '['].includes(e.key) && e.ctrlKey) {
manageIndentation(e.key == '[' ? -1 : 1)
}
else if (e.key == 'Backspace') {
if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (caretData.activeData.tabCount){
if (caretData.activeData.tabCount) {
caretData.activeData.tabCount--
}
else if (activeDataIndex > 0) {
if ( caretData.activeData.type == 0 ){
if (!caretData.activeData.plainContent.length){ dataList.splice( activeDataIndex, 1 ) }
if (caretData.activeData.type == 0) {
if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) }
caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length
}else if ( caretData.activeData.type==1 ){
} else if (caretData.activeData.type == 1) {
caretData.activeData.type = 0
}
}
......@@ -470,13 +527,14 @@ var ADocEditor = function (customConfig) {
type: caretData.activeData.type,
formatedText: [],
plainContent: "",
listStyle: caretData.activeData.listStyle,
tabCount: caretData.activeData.tabCount,
style: { ...caretData.activeData.style }
}
if (e.ctrlKey || e.metaKey) dataObj.newPage = true
caretData.index = 0
caretData.activeData = dataObj
if (dataObj.type==0) dataObj.tabCount = 0
if (dataObj.type == 0) dataObj.tabCount = 0
dataList.push(dataObj)
}
else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
......@@ -489,10 +547,10 @@ var ADocEditor = function (customConfig) {
else if (e.key == 'ArrowLeft') {
if (caretData.index) {
--caretData.index
}else{
let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
if (dataIndex>0){
caretData.activeData = dataList[dataIndex-1]
} else {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (dataIndex > 0) {
caretData.activeData = dataList[dataIndex - 1]
caretData.index = caretData.activeData.plainContent.length
}
}
......@@ -500,10 +558,10 @@ var ADocEditor = function (customConfig) {
else if (e.key == 'ArrowRight') {
if (caretData.index < caretData.activeData.plainContent.length) {
++caretData.index
}else{
let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
if (dataList[dataIndex+1]){
caretData.activeData = dataList[dataIndex+1]
} else {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (dataList[dataIndex + 1]) {
caretData.activeData = dataList[dataIndex + 1]
caretData.index = 0
}
}
......@@ -515,10 +573,10 @@ var ADocEditor = function (customConfig) {
console.log('Down')
}
function manageIndentation(value){
function manageIndentation(value) {
caretData.activeData.tabCount += value
if (caretData.activeData.tabCount<0) caretData.activeData.tabCount = 0
else if (caretData.activeData.tabCount>5 ) caretData.activeData.tabCount = 5
if (caretData.activeData.tabCount < 0) caretData.activeData.tabCount = 0
else if (caretData.activeData.tabCount > 5) caretData.activeData.tabCount = 5
return true
}
......@@ -644,20 +702,20 @@ var ADocEditor = function (customConfig) {
shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
shadow.addEventListener('mousedown', globalMouseDownHandler)
}
function globalMouseDownHandler(e){
function globalMouseDownHandler(e) {
var elem = e.target
var targetId = elem.getAttribute('adc-target')
if (elem.getAttribute('adc-type')=='popover'){ return }
while(!targetId && elem){
if (elem.getAttribute('adc-type') == 'popover') { return }
while (!targetId && elem) {
elem = elem.parentNode
if (elem?.getAttribute?.('adc-type')=='popover') return
if (elem?.getAttribute?.('adc-type') == 'popover') return
targetId = elem?.getAttribute?.('adc-target')
}
let allPopovers = shadow.querySelectorAll('[adc-type="popover"]')
allPopovers.forEach( item=> {
if ( item.getAttribute('adc')==targetId ) item.classList.toggle('show')
allPopovers.forEach(item => {
if (item.getAttribute('adc') == targetId) item.classList.toggle('show')
else item.classList.remove('show')
} )
})
}
......@@ -712,10 +770,10 @@ var ADocEditor = function (customConfig) {
}
return
}
function focusOnPage(){
function focusOnPage() {
caretData.blink = false
if (!lastFocussedPage) lastFocussedPage = pageList[0].el
if (lastFocussedPage){
if (lastFocussedPage) {
const scrollTop = pageScrollingDiv.scrollTop
lastFocussedPage.focus()
pageScrollingDiv.scrollTop = scrollTop
......@@ -730,7 +788,7 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas
return pagesToReturn
},
log(){
log() {
console.log('dataList', dataList)
console.log('lines', lines)
console.log('caretData', caretData)
......
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