Skip to content

A
a-doc-editor
Commit 940f5e70 by ramdayalmunda
Options

fixes like cursor, e nter, backspace, width, numbering count and font size

parent 632d63be
Showing with 193 additions and 55 deletions
dist/assets/a-doc-editor.css
......@@ -9,6 +9,10 @@
justify-content: flex-start;
}
hidden {
display: none;
}
.header {
position: relative;
display: block;
......@@ -21,7 +25,31 @@
width: 100%;
background: pink;
display: flex;
gap: 10px;
}
.toolbar [adc-type="menu-options"] {
position: absolute;
opacity: 0;
pointer-events: none;
border-radius: 5px;
background-color: goldenrod;
}
.toolbar [adc-type="menu-item"]:hover [adc-type="menu-options"] {
opacity: 1;
z-index: 10;
pointer-events: auto;
}
.toolbar [adc-type="menu-options"] [adc-type="sub-menu"] {
border-radius: 5px;
min-width: 100px;
padding: 5px;
background-color: goldenrod;
}
.toolbar [adc-type="menu-options"] [adc-type="sub-menu"]:hover {
background-color: gold;
}
.toolbar .item {
......@@ -36,7 +64,8 @@
margin: 4px;
cursor: pointer;
}
.popover{
.popover {
position: absolute;
padding: 5px;
background-color: gray;
......@@ -44,32 +73,40 @@
opacity: 0;
pointer-events: none;
}
.popover.show{
.popover.show {
opacity: 1;
pointer-events: auto;
z-index: 10;
}
.toolbar .item:hover {
background: #5fad5f;
}
[adc-type="popover"] {
pointer-events: none;
}
.small-input {
width: 50px;
}
.small-btn {
width: 25px;
}
.option {
border: 1px solid black;
padding: 5px;
margin: 5px;
border-radius: 4px;
}
.option:hover {
background-color: #f5c468;
}
.page-list {
position: relative;
display: block;
......
dist/assets/a-doc-editor.js
......@@ -5,8 +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"] ];
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: {
......@@ -60,6 +60,25 @@ var ADocEditor = function (customConfig) {
htmlStr = /*html*/`
<div class="header">
<div class="toolbar">
<div class="item" adc-target="file-menu" adc-type="menu-item">
<span>File</span>
<div adc="file-menu" adc-type="menu-options">
<div adc-type="sub-menu" adc-action="new-file">New</div>
<div adc-type="sub-menu" adc-action="open-file">Open</div>
<div adc-type="sub-menu" adc-action="save-file">Save</div>
</div>
</div>
<div class="item" adc-target="help-menu" adc-type="menu-item">
<span>Help</span>
<div adc="help-menu" adc-type="menu-options">
<div adc-type="sub-menu" adc-action="about">About</div>
<div adc-type="sub-menu" adc-action="tutorial">Tutorial</div>
</div>
</div>
</div>
<div class="toolbar">
<select class="item" adc="font-select"></select>
<div class="item" adc="list-handler" adc-target="list-popover">
......@@ -102,6 +121,10 @@ var ADocEditor = function (customConfig) {
<span class="item">Pages : 1</span>
</div>
</div>
<hidden>
<a adc="download-link">
<input adc="open-file" type="file" accept=".json"/>
</hidden>
`;
......@@ -155,13 +178,13 @@ var ADocEditor = function (customConfig) {
!(function handleList() {
let listItems = shadow.querySelectorAll('[adc-toggle="listing-option"]')
let popover = shadow.querySelector('[adc-type="popover"]')
for(let i=0; i<listItems.length; i++){
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', (e) => {
let value = Number(e.target.getAttribute('value'))
value = value?value:0
value = value ? value : 0
if (caretData.activeData) {
caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle==value) ? 0 : 1
if (caretData.activeData.type==1){
caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle == value) ? 0 : 1
if (caretData.activeData.type == 1) {
caretData.activeData.listStyle = value
}
changeListStyle()
......@@ -175,25 +198,25 @@ var ADocEditor = function (customConfig) {
}
})()
!(function fontSizeHandler(){
!(function fontSizeHandler() {
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = caretData.style.fontSize
let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
fontSizeChangers.forEach( btn => {
btn.addEventListener( 'click',(e)=>{
fontSizeChangers.forEach(btn => {
btn.addEventListener('click', (e) => {
let change = Number(e.target.getAttribute('value'))
change = change?change:0
change = change ? change : 0
change = caretData.style.fontSize + change
change = change?change:config.style.fontSize
change = change ? change : config.style.fontSize
caretData.style.fontSize = change
fontSizeInput.value = change
focusOnPage()
} )
} )
})
})
function changeFontEvent(e){
let value = Number( e.target.value )
value = value?value:config.style.fontSize
function changeFontEvent(e) {
let value = Number(e.target.value)
value = value ? value : config.style.fontSize
caretData.style.fontSize = value
if (e?.key == 'Enter') focusOnPage()
}
......@@ -202,6 +225,30 @@ var ADocEditor = function (customConfig) {
})()
!(function menuHandler() {
shadow.querySelector('[adc-action="new-file"]')
.addEventListener('click', newDocument)
shadow.querySelector('[adc-action="save-file"]')
.addEventListener('click', downloadJSON)
let openFileInput = shadow.querySelector('[adc="open-file"]')
openFileInput.addEventListener('change', (e) => {
let file = e.target?.files?.[0]
if (file) {
const reader = new FileReader()
reader.onload = function (e) {
const fileContent = e.target.result;
let jsonData = JSON.parse(fileContent)
setDocumentData(jsonData)
};
reader.readAsText(file);
}
})
shadow.querySelector('[adc-action="open-file"]')
.addEventListener('click', () => { openFileInput.click() })
})()
reConfigure(customConfig)
reRenderCanvas()
addGlobalEvents()
......@@ -313,7 +360,7 @@ 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
lineObj.maxFontSize = (lineObj.maxFontSize < dataBlock?.formatedText?.[c].fontSize) ? dataBlock?.formatedText?.[c].fontSize : lineObj.maxFontSize
if (/\s/.test(dataBlock.plainContent[c])) {
// condition to check if a blank character is found.
......@@ -346,10 +393,10 @@ var ADocEditor = function (customConfig) {
lineObj = new getLineObj()
lineObj.maxLineWidth = maxLineWidth
lineObj.maxFontSize = style.fontSize
if (dataBlock.type == 1){
if (dataBlock.type == 1) {
lineObj.tabWidth = tabWidth
lineObj.tabCount = dataBlock.tabCount
}else{
} else {
maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
lineObj.tabWidth = 0
lineObj.tabCount = 0
......@@ -444,9 +491,9 @@ var ADocEditor = function (customConfig) {
function convertToLetter(num) {
num = (num-1).toString(26)
num = (num - 1).toString(26)
let label = ""
for(let i=0;i<num.length;i++) label+= letters[num[i]]
for (let i = 0; i < num.length; i++) label += letters[num[i]]
return label
}
......@@ -535,9 +582,9 @@ var ADocEditor = function (customConfig) {
if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (caretData.activeData.tabCount) {
if (caretData.activeData.type==1){
if (caretData.activeData.type == 1) {
caretData.activeData.type = 0
}else{
} else {
caretData.activeData.tabCount--
}
}
......@@ -568,10 +615,10 @@ var ADocEditor = function (customConfig) {
}
dataObj.plainContent = caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0,caretData.index)
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index)
dataObj.formatedText = caretData.activeData.formatedText.splice(caretData.index)
let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id )
dataList.splice( activeDataIndex+1, 0, dataObj )
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
dataList.splice(activeDataIndex + 1, 0, dataObj)
if (e.ctrlKey || e.metaKey) dataObj.newPage = true
caretData.index = 0
......@@ -665,7 +712,8 @@ var ADocEditor = function (customConfig) {
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
placeCaret({ x: pxX, y: pxY })
let style = caretData.activeData.formatedText[caretData.index]
if (style) caretData.style = { ...caretData.style,
if (style) caretData.style = {
...caretData.style,
fontSize: style.fontSize,
}
shadow.querySelector('[adc="font-size-input"]').value = caretData.style.fontSize
......@@ -682,16 +730,16 @@ var ADocEditor = function (customConfig) {
}
}
function changeListStyle(){
let activeDataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
let d = activeDataIndex-1
function changeListStyle() {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let d = activeDataIndex - 1
while( dataList?.[d]?.type==1){
while (dataList?.[d]?.type == 1) {
dataList[d].listStyle = caretData.activeData.listStyle
--d
}
d = activeDataIndex+1
while(dataList?.[d]?.type==1){
d = activeDataIndex + 1
while (dataList?.[d]?.type == 1) {
dataList[d].listStyle = caretData.activeData.listStyle
++d
}
......@@ -793,11 +841,11 @@ var ADocEditor = function (customConfig) {
let charData = caretData.activeData.formatedText[caretData.index - 1]
if (lineObj) {
x = (charData?(charData.x+charData.width):x)
if(charData){
y = charData.y - (caretData.style.fontSize*pxMmRatio)
}else{
y = lineObj.y - (lineObj.maxFontSize*pxMmRatio)
x = (charData ? (charData.x + charData.width) : x)
if (charData) {
y = charData.y - (caretData.style.fontSize * pxMmRatio)
} else {
y = lineObj.y - (lineObj.maxFontSize * pxMmRatio)
}
}
......@@ -836,28 +884,83 @@ var ADocEditor = function (customConfig) {
}
}
var returnObj = {
getDocumentData(){
let activeDataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
function newDocument(e) {
caretData.blink = true
dataList = [
{
id: ++counter,
type: 0,
formatedText: [],
plainContent: "",
tabCount: 0,
style: { ...config.style },
listItemNumber: 0,
},
]
caretData = {
activeData: dataList[0],
index: 0,
timeout: null,
timeoutDuration: 800,
blink: true,
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) },
}
pageList = []
shadow.querySelector('[adc="page-list"').innerHTML = ""
reRenderCanvas()
}
function downloadJSON() {
let data = compressDocJSON()
let jsonString = JSON.stringify(data)
const blob = new Blob([jsonString], { type: 'application/json' });
const a = shadow.querySelector('[adc="download-link"');
a.download = 'saved-data.json';
a.href = URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
}
function compressDocJSON() {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let returnObj = {
config: JSON.parse( JSON.stringify(config) ),
content: JSON.parse( JSON.stringify(dataList) ),
caretData: JSON.parse( JSON.stringify(caretData) )
config: JSON.parse(JSON.stringify(config)),
content: JSON.parse(JSON.stringify(dataList)),
caretData: JSON.parse(JSON.stringify(caretData))
}
delete returnObj.caretData.activeData
delete returnObj.caretData.previousCaret
returnObj.caretData.activeDataIndex = activeDataIndex
returnObj.compressed = true
return returnObj
}
},
setDocumentData(data){
function setDocumentData(data) {
// might need to change some configuration
dataList = JSON.parse( JSON.stringify( data.content ) )
config = JSON.parse( JSON.stringify( data.config ) )
caretData = JSON.parse( JSON.stringify( data.caretData ) )
dataList = JSON.parse(JSON.stringify(data.content))
config = JSON.parse(JSON.stringify(data.config))
caretData = JSON.parse(JSON.stringify(data.caretData))
caretData.activeData = dataList[data.caretData.activeDataIndex]
caretData.blink = false
reRenderCanvas()
}
var returnObj = {
getDocumentData() {
return compressDocJSON()
},
setDocumentData,
addFonts,
getConfiguration() { return JSON.parse(JSON.stringify(config)) },
getPages() {
......@@ -866,9 +969,7 @@ var ADocEditor = function (customConfig) {
return pagesToReturn
},
log() {
console.log('dataList', dataList)
console.log('lines', lines)
console.log('caretData', caretData)
console.log(compressDocJSON())
},
focusOnPage,
}
......
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