Skip to content

A
a-doc-editor
Commit f5d9a42e by ramdayalmunda
Options

added custom dropdown feature and handled heading sections

parent 9db9b45e
Showing with 246 additions and 144 deletions
dist/assets/a-doc-editor.css
...@@ -84,6 +84,7 @@ canvas:focus-visible { ...@@ -84,6 +84,7 @@ canvas:focus-visible {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
z-index: 10; z-index: 10;
animation: shineAnimation 1s infinite alternate;
} }
.toolbar .item:hover { .toolbar .item:hover {
...@@ -120,16 +121,14 @@ canvas:focus-visible { ...@@ -120,16 +121,14 @@ canvas:focus-visible {
overflow-y: hidden; overflow-y: hidden;
} }
.content-area .left-sidebar { .content-area .left-sidebar,
width: 200px;
background-color: #408640;
padding: 5px;
}
.content-area .right-sidebar { .content-area .right-sidebar {
max-width: 200px;
width: 200px; width: 200px;
background-color: #f5c468; background-color: #408640;
padding: 5px; padding: 5px;
white-space: nowrap; /* Prevent text wrapping */
text-overflow: ellipsis; /* Add ellipsis ( ... ) */
} }
.content-area .left-sidebar, .content-area .left-sidebar,
...@@ -138,7 +137,7 @@ canvas:focus-visible { ...@@ -138,7 +137,7 @@ canvas:focus-visible {
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: hidden;
text-wrap: nowrap; text-wrap: nowrap;
transition: 0.5s; transition: 0.5s;
margin-top: 0; margin-top: 0;
...@@ -156,8 +155,6 @@ canvas:focus-visible { ...@@ -156,8 +155,6 @@ canvas:focus-visible {
.left-sidebar .content, .left-sidebar .content,
.right-sidebar .content { .right-sidebar .content {
opacity: 1; opacity: 1;
position: relative;
left: 0%;
transition: 0.5s; transition: 0.5s;
} }
...@@ -179,6 +176,7 @@ canvas:focus-visible { ...@@ -179,6 +176,7 @@ canvas:focus-visible {
background: #858585; background: #858585;
gap: 20px; gap: 20px;
align-items: center; align-items: center;
overflow-x: hidden;
} }
.page-list canvas { .page-list canvas {
...@@ -198,31 +196,49 @@ canvas:focus-visible { ...@@ -198,31 +196,49 @@ canvas:focus-visible {
width: 100%; width: 100%;
background-color: red; background-color: red;
} }
.toolbar .item ul.dropdown {
position: absolute;
max-height: 300px;
width: max-content;
min-width: 100px;
padding: 0;
border: 1px #000 solid;
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
z-index: 2;
display: none;
background: white;
}
.toolbar .item ul.dropdown.show
{
display: block;
}
.toolbar .item ul.dropdown li{
padding: 5pt;
width: 100%;
}
.toolbar .item ul.dropdown li:hover,
.toolbar .item ul.dropdown li.selected {
background: #09f;
}
li.init {
cursor: pointer;
}
a#submit {
z-index: 1;
}
@keyframes shineAnimation { @keyframes shineAnimation {
0% { 0% {
background: #fff; background: #fff;
} }
50% {
background: #ddd;
}
100% { 100% {
background: #fff; background: #eee;
} }
}
*::-webkit-scrollbar {
background: transparent;
}
*::-webkit-scrollbar-track {
background-color: #00000022;
border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
background: #7dbbb3;
border-radius: 5px;
} }
\ No newline at end of file
dist/assets/a-doc-editor.js
...@@ -9,15 +9,20 @@ var ADocEditor = function (customConfig) { ...@@ -9,15 +9,20 @@ 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 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 romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
const styleList = [ const textStyleList = [
{ name: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#f00", bold: false, italic: false }, { type: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false, spaces: 10 },
{ name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#0f0", bold: false, italic: false }, { type: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false, spaces: 0 },
{ name: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false }, { type: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false, spaces: 4 },
{ name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#00f", bold: false, italic: false }, { type: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false, spaces: 2 },
]
const styleName = {};
textStyleList.forEach((sty, s) => { styleName[sty.type] = s })
const listStyles = [
{ type: "Number", value: 0 },
{ type: "Bullet", value: 1 },
] ]
const styleName = { };
styleList.forEach( (sty, s)=> { styleName[sty.name] = s } )
var defaultConfig = { var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1, pageSetup: { size: "A4" }, zoom: 1,
...@@ -28,11 +33,12 @@ var ADocEditor = function (customConfig) { ...@@ -28,11 +33,12 @@ var ADocEditor = function (customConfig) {
tabWidth: 10, // mm tabWidth: 10, // mm
}, },
style: { style: {
fontSize: 11, // this is in pt // 1pt = 1/72 inch // 1pt = 254/72 mm type: textStyleList[0].type,
fontFamily: 'Calibri', // fontSize: 11, // this is in pt // 1pt = 1/72 inch // 1pt = 254/72 mm
bold: false, // fontFamily: 'Calibri',
italic: false, // bold: false,
fontColor: "#f01" // italic: false,
// fontColor: "#f01",
}, },
} }
config = JSON.parse(JSON.stringify(defaultConfig)) config = JSON.parse(JSON.stringify(defaultConfig))
...@@ -97,31 +103,21 @@ var ADocEditor = function (customConfig) { ...@@ -97,31 +103,21 @@ var ADocEditor = function (customConfig) {
</div> </div>
<div class="toolbar"> <div class="toolbar">
<select class="item" adc="font-select"></select>
<div class="item" adc="list-handler" adc-target="list-popover"> <div class="item" adc="font-family"></div>
<span>L</span> <div class="item" adc="list-style"></div>
<div class="popover" adc="list-popover" adc-type="popover">
<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"> <div class="item">
<button adc="font-size-change" class="small-btn" value="-1">-</button> <button adc="font-size-change" class="small-btn" value="-1">-</button>
<input type="number" adc="font-size-input" class="small-input"> <input type="number" adc="font-size-input" class="small-input">
<button adc="font-size-change" class="small-btn" value="+1">+</button> <button adc="font-size-change" class="small-btn" value="+1">+</button>
</div> </div>
<div class="item" adc="style-handler" adc-target="style-popover" style="width: 150px;"> <div class="item" adc="style-handler"></div>
<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> </div>
<div class="content-area"> <div class="content-area">
<div class="left-sidebar hide"> <div class="left-sidebar">
<button class="toggle-btn" adc="toggle-left-sidebar">X</button> <button class="toggle-btn" adc="toggle-left-sidebar">X</button>
<div class="content" adc="left-sidebar-content"></div> <div class="content" adc="left-sidebar-content"></div>
</div> </div>
...@@ -194,19 +190,6 @@ var ADocEditor = function (customConfig) { ...@@ -194,19 +190,6 @@ var ADocEditor = function (customConfig) {
})() })()
!(function fontSelectHandle() { !(function fontSelectHandle() {
let fontSelect = shadow.querySelector('[adc="font-select"]')
let caretStyle = getFullStyle(caretData.style)
fontSelect.value = caretStyle.fontFamily
fontSelect.addEventListener('change', (e) => {
if (e.target.value){
caretData.style = {
...caretStyle,
fontFamily: e.target.value,
}
delete caretData.style.type
focusOnPage()
}
})
addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad') addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter') addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant') addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
...@@ -216,26 +199,42 @@ var ADocEditor = function (customConfig) { ...@@ -216,26 +199,42 @@ var ADocEditor = function (customConfig) {
})() })()
!(function handleList() { !(function handleList() {
let listItems = shadow.querySelectorAll('[adc-toggle="popover"]') // handle list
let popover = shadow.querySelector('[adc-type="popover"]') let listStyleElem = shadow.querySelector('[adc="list-style"]')
for (let i = 0; i < listItems.length; i++) { listStyleElem.innerHTML = ""
listItems[i].addEventListener('click', (e) => {
let value = Number(e.target.getAttribute('value')) let selection = document.createElement('span')
value = value ? value : 0 selection.setAttribute('value', null)
selection.setAttribute('adc-type', 'selection')
selection.innerHTML = "[List-Style]"
listStyleElem.append(selection)
let ul = document.createElement('ul')
ul.setAttribute('class', 'dropdown')
listStyleElem.append(ul)
listStyles.forEach(item => {
let option = document.createElement('li')
option.setAttribute('value', item.value)
option.innerHTML = item.type
ul.append(option)
option.addEventListener('click', (e) => {
if (caretData.activeData) { if (caretData.activeData) {
caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle == value) ? 0 : 1 caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle == item.value) ? 0 : 1
if (caretData.activeData.type == 1) { if (caretData.activeData.type == 1) {
caretData.activeData.listStyle = value caretData.activeData.listStyle = item.value
} else {
e.stopPropagation()
ul.classList.remove('show')
selection.innerHTML = "[List-Style]"
} }
changeListStyle() changeListStyle()
caretData.blink = false caretData.blink = false
reRenderCanvas() reRenderCanvas()
popover.classList.remove('show')
focusOnPage() focusOnPage()
} }
}) })
} })
})() })()
!(function fontSizeHandler() { !(function fontSizeHandler() {
...@@ -245,11 +244,18 @@ var ADocEditor = function (customConfig) { ...@@ -245,11 +244,18 @@ var ADocEditor = function (customConfig) {
let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]') let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
fontSizeChangers.forEach(btn => { fontSizeChangers.forEach(btn => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
let caretStyle = getFullStyle(caretData.style)
let change = Number(e.target.getAttribute('value')) let change = Number(e.target.getAttribute('value'))
change = change ? change : 0 change = change ? change : 0
change = caretData.style.fontSize + change change = caretStyle.fontSize + change
change = change ? change : config.style.fontSize change = change ? change : caretStyle.fontSize
caretData.style.fontSize = change
caretData.style = {
...caretStyle,
fontSize: change,
}
delete caretData.style.type
fontSizeInput.value = change fontSizeInput.value = change
focusOnPage() focusOnPage()
}) })
...@@ -257,8 +263,13 @@ var ADocEditor = function (customConfig) { ...@@ -257,8 +263,13 @@ var ADocEditor = function (customConfig) {
function changeFontEvent(e) { function changeFontEvent(e) {
let value = Number(e.target.value) let value = Number(e.target.value)
let caretStyle = getFullStyle(caretData.style)
value = value ? value : config.style.fontSize value = value ? value : config.style.fontSize
caretData.style.fontSize = value caretData.style = {
...caretStyle,
fontSize: value,
}
delete caretData.style.type
if (e?.key == 'Enter') focusOnPage() if (e?.key == 'Enter') focusOnPage()
} }
fontSizeInput.addEventListener('keydown', changeFontEvent) fontSizeInput.addEventListener('keydown', changeFontEvent)
...@@ -293,33 +304,49 @@ var ADocEditor = function (customConfig) { ...@@ -293,33 +304,49 @@ var ADocEditor = function (customConfig) {
.addEventListener('click', printDoc) .addEventListener('click', printDoc)
})() })()
!(function styleHandler(){ !(function styleHandler() {
let stylePopup = shadow.querySelector('[adc="style-popover"]') let textStyleElem = shadow.querySelector('[adc="style-handler"]')
stylePopup.innerHTML = "" textStyleElem.innerHTML = ""
styleList.forEach( (style, s)=>{
let option = document.createElement('div') let selectionElem = document.createElement('span')
option.setAttribute('class', 'option') selectionElem.setAttribute('adc-type', 'selection')
option.setAttribute('adc-toggle', "popover") if (caretData.style.type) selectionElem.innerHTML = caretData.style.type
option.append(style.name) else selectionElem.innerHTML = "[CUSTOM]"
textStyleElem.append(selectionElem)
let ul = document.createElement('ul')
ul.setAttribute('class', 'dropdown')
textStyleElem.append(ul)
textStyleList.forEach((style, s) => {
let option = document.createElement('li')
option.setAttribute('value', style.type)
option.append(style.type)
option.style.fontFamily = style.fontFamily option.style.fontFamily = style.fontFamily
option.style.fontSize = `${style.fontSize}pt` option.style.fontSize = `${style.fontSize}pt`
option.style.color = style.fontColor option.style.color = style.fontColor
stylePopup.append(option) ul.append(option)
option.addEventListener('click', (e)=>{ option.addEventListener('click', (e) => {
stylePopup.classList.remove('show') if (caretData.activeData) {
if (caretData.activeData){ caretData.activeData.style = { type: style.type }
caretData.activeData.style = { ...style } for (let c = 0; c < caretData.activeData.formatedText.length; c++) {
caretData.activeData.formatedText[c].style = { type: style.type }
}
reRenderCanvas() reRenderCanvas()
focusOnPage() focusOnPage()
caretData.style = { type: style.type }
caretData.blink = false
renderCaret(true)
} }
setupHeaders()
}) })
} ) })
})() })()
!(function sidebarsHandlers(){ !(function sidebarsHandlers() {
let leftSidebar = shadow.querySelector('.left-sidebar') let leftSidebar = shadow.querySelector('.left-sidebar')
let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]') let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]')
toggleLeft.addEventListener('click', ()=>{ toggleLeft.addEventListener('click', () => {
leftSidebar.classList.toggle('hide') leftSidebar.classList.toggle('hide')
}) })
...@@ -336,6 +363,8 @@ var ADocEditor = function (customConfig) { ...@@ -336,6 +363,8 @@ var ADocEditor = function (customConfig) {
reRenderCanvas() reRenderCanvas()
addGlobalEvents() addGlobalEvents()
} }
function reConfigure(newConfig) { function reConfigure(newConfig) {
if (newConfig?.size && paperSizes[newConfig?.size]) { config.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } } if (newConfig?.size && paperSizes[newConfig?.size]) { config.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
else if (newConfig?.width && newConfig?.height) { else if (newConfig?.width && newConfig?.height) {
...@@ -387,6 +416,7 @@ var ADocEditor = function (customConfig) { ...@@ -387,6 +416,7 @@ var ADocEditor = function (customConfig) {
lines = [] lines = []
setupHeaders(); // this is async function //
calculateTextSizeAndPosition() calculateTextSizeAndPosition()
renderLines() renderLines()
caretData.previousCaret = null caretData.previousCaret = null
...@@ -396,7 +426,7 @@ var ADocEditor = function (customConfig) { ...@@ -396,7 +426,7 @@ var ADocEditor = function (customConfig) {
let d = 0, c = 0; let d = 0, c = 0;
function getLineObj() { function getLineObj() {
let newLineObj = { let newLineObj = {
...config.style, ...getFullStyle(config.style),
x: 0, // this is the starting point x; it will change based on the tabNumber x: 0, // this is the starting point x; it will change based on the tabNumber
y: 0, // this is the starting y coordinate; it will change based on the max font size y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "", plainContent: "",
...@@ -667,6 +697,7 @@ var ADocEditor = function (customConfig) { ...@@ -667,6 +697,7 @@ var ADocEditor = function (customConfig) {
dataObj.plainContent = caretData.activeData.plainContent.slice(caretData.index) 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) dataObj.formatedText = caretData.activeData.formatedText.splice(caretData.index)
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id) let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
dataList.splice(activeDataIndex + 1, 0, dataObj) dataList.splice(activeDataIndex + 1, 0, dataObj)
...@@ -674,6 +705,10 @@ var ADocEditor = function (customConfig) { ...@@ -674,6 +705,10 @@ var ADocEditor = function (customConfig) {
caretData.index = 0 caretData.index = 0
caretData.activeData = dataObj caretData.activeData = dataObj
if (dataObj.type == 0) dataObj.tabCount = 0 if (dataObj.type == 0) dataObj.tabCount = 0
if (!dataObj.formatedText.length){
caretData.style = { type: textStyleList[0].type }
caretData.activeData.style = { type: textStyleList[0].type }
}
// dataList.push(dataObj) // dataList.push(dataObj)
} }
else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
...@@ -681,8 +716,8 @@ var ADocEditor = function (customConfig) { ...@@ -681,8 +716,8 @@ var ADocEditor = function (customConfig) {
e.preventDefault() e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
let style = caretData.style let style = caretData.style
style = style?style:null style = style ? style : null
caretData.activeData.formatedText.splice(caretData.index, 0, { style : style, dimension: {} }) caretData.activeData.formatedText.splice(caretData.index, 0, { style: style, dimension: {} })
++caretData.index ++caretData.index
} }
else if (e.key == 'ArrowLeft') { else if (e.key == 'ArrowLeft') {
...@@ -764,13 +799,15 @@ var ADocEditor = function (customConfig) { ...@@ -764,13 +799,15 @@ var ADocEditor = function (customConfig) {
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height; const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
placeCaret({ x: pxX, y: pxY }) placeCaret({ x: pxX, y: pxY })
let style = caretData.activeData.formatedText[caretData.index]?.style let style = caretData.activeData.formatedText[caretData.index]?.style
if (style) caretData.style = { if (style){
...caretData.style, caretData.style = { ...style }
fontSize: style.fontSize, let fullStyle = getFullStyle(style)
let fontInput = shadow.querySelector('[adc="font-size-input"]')
if (caretData?.style?.fontSize) fontInput.value = fullStyle.fontSize
else if (style?.fontSize) fontInput.value = fullStyle.fontSize
caretData.blink = false
renderCaret(true)
} }
let fontInput = shadow.querySelector('[adc="font-size-input"]')
if (caretData?.style?.fontSize) fontInput.value = caretData.style.fontSize
else if (style?.fontSize) fontInput.value = style.fontSize
} }
} }
function onFocusHandler(e) { function onFocusHandler(e) {
...@@ -888,24 +925,39 @@ var ADocEditor = function (customConfig) { ...@@ -888,24 +925,39 @@ var ADocEditor = function (customConfig) {
} }
function reRenderFontDropdown() { function reRenderFontDropdown() {
let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]') let fontFamilyDropdown = shadow.querySelector('[adc="font-family"]')
if (fontFamilyDropdown) { if (fontFamilyDropdown) {
fontFamilyDropdown.innerHTML = "" fontFamilyDropdown.innerHTML = ""
let selectionOption = document.createElement('span')
selectionOption.setAttribute('adc-type', 'selection')
let caretStyle = getFullStyle(caretData.style)
selectionOption.innerHTML = caretStyle.fontFamily
fontFamilyDropdown.append(selectionOption)
let ul = document.createElement('ul')
ul.setAttribute('class', 'dropdown')
fontFamilyDropdown.append(ul)
fontList.forEach((font, i) => { fontList.forEach((font, i) => {
let optionTag = document.createElement('option') let optionTag = document.createElement('li')
optionTag.setAttribute('value', font.name) optionTag.setAttribute('value', font.name)
optionTag.style.fontFamily = font.name optionTag.style.fontFamily = font.name
optionTag.innerText = font.name optionTag.innerText = font.name
fontFamilyDropdown.append(optionTag) ul.append(optionTag)
optionTag.addEventListener('click', () => {
let caretStyle = getFullStyle(caretData.style)
caretData.style = {
...caretStyle,
fontFamily: font.name,
}
delete caretData.style.type
focusOnPage()
// selectionOption.style.fontFamily = font.name
})
}) })
// selectionOption.style.fontFamily = caretStyle.fontFamily
} }
changeFontFamily()
}
function changeFontFamily() {
let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]')
let caretStyle = getFullStyle(caretData.style)
if (fontFamilyDropdown) fontFamilyDropdown.value = caretStyle.fontFamily
} }
} }
...@@ -917,50 +969,65 @@ var ADocEditor = function (customConfig) { ...@@ -917,50 +969,65 @@ var ADocEditor = function (customConfig) {
function addGlobalEvents(e) { function addGlobalEvents(e) {
shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler) shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler)
shadow.addEventListener('mousedown', globalMouseDownHandler) // shadow.addEventListener('mousedown', globalMouseDownHandler)
shadow.addEventListener('click', globalClickDownHandler)
shadow.addEventListener('mouseover', globalMouseOverHandler) shadow.addEventListener('mouseover', globalMouseOverHandler)
} }
function globalMouseDownHandler(e) { function globalClickDownHandler(e) {
var elem = e.target
var targetId = elem.getAttribute('adc-target') // these is to handle the dropdown items
if (elem.getAttribute('adc-type') == 'popover') { return } let target;
while (!targetId && elem) { let elem = e.target
elem = elem.parentNode let selection
if (elem?.getAttribute?.('adc-type') == 'popover') return if (elem?.tagName == 'LI') {
targetId = elem?.getAttribute?.('adc-target') selection = elem?.textContent
} }
let allPopovers = shadow.querySelectorAll('[adc-type="popover"]') while (elem) {
allPopovers.forEach(item => { if (elem?.tagName == 'DIV' && elem?.classList?.contains('item')) {
if (item.getAttribute('adc') == targetId) item.classList.toggle('show') target = elem.querySelector('ul.dropdown');
else item.classList.remove('show') break;
}
elem = elem?.parentNode
}
if (target) {
if (selection) {
let selectionOption = elem.querySelector('[adc-type="selection"]')
selectionOption.innerHTML = selection
}
target?.classList?.toggle('show')
}
let ulElem = shadow.querySelectorAll('ul.dropdown')
ulElem.forEach(item => {
if (target != item) item?.classList?.remove('show')
}) })
} }
function globalMouseOverHandler(e){ function globalMouseOverHandler(e) {
let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]') let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]')
menuItems.forEach( item => item.classList.remove('hover') ) menuItems.forEach(item => item.classList.remove('hover'))
let hoverElem let hoverElem
let elem = e?.target let elem = e?.target
while(elem){ while (elem) {
if (elem?.getAttribute?.('adc-type')=='menu-item' ){ if (elem?.getAttribute?.('adc-type') == 'menu-item') {
hoverElem = elem; hoverElem = elem;
break break
} }
elem = elem.parentNode elem = elem.parentNode
} }
if (hoverElem){ if (hoverElem) {
hoverElem.classList.add('hover') hoverElem.classList.add('hover')
} }
} }
function getFullStyle(refStyle){ function getFullStyle(refStyle) {
let style = { } let style = {}
if (refStyle.type){ if (refStyle.type) {
style = { ...styleList[styleName[refStyle.type] ] } style = { ...textStyleList[styleName[refStyle.type]] }
} }
style = { ...style, ...refStyle } style = { ...style, ...refStyle }
style = JSON.parse( JSON.stringify(style) ) style = JSON.parse(JSON.stringify(style))
if (Object.keys(style).length > 1) delete style.type if (Object.keys(style).length > 1) delete style.type
return style return style
} }
...@@ -1073,7 +1140,7 @@ var ADocEditor = function (customConfig) { ...@@ -1073,7 +1140,7 @@ var ADocEditor = function (customConfig) {
pageIndex: 0, pageIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
previousCaret: null, previousCaret: null,
style: { ...dataList[0].style }, style: { ...dataList[0].style },
dimension: { dimension: {
x: config.format.margin, x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4) y: config.format.margin + (3 * config.style.fontSize / 4)
...@@ -1222,6 +1289,26 @@ var ADocEditor = function (customConfig) { ...@@ -1222,6 +1289,26 @@ var ADocEditor = function (customConfig) {
link.click(); link.click();
} }
async function setupHeaders(){
let headerList = shadow.querySelector('[adc="left-sidebar-content"]')
headerList.innerHTML = ""
for(let d=0; d<dataList.length; d++){
let styleIndex = textStyleList.findIndex( item => item.type == dataList[d]?.style?.type )
if (styleIndex>0 && dataList[d].plainContent.length){
let headingItem = document.createElement('div')
headingItem.innerHTML = dataList[d].plainContent
headingItem.innerHTML = "&nbsp;".repeat(textStyleList[styleIndex].spaces)+headingItem.innerHTML
headerList.append(headingItem)
let headingStyle = getFullStyle(dataList[d].style)
headingItem.style.fontSize = `${headingStyle.fontSize/1.2}pt`
headingItem.style.width = '100%'
headingItem.style.whiteSpace = 'nowrap'
headingItem.style.overflow = "hidden"
headingItem.style.textOverflow = "ellipsis"
}
}
}
var returnObj = { var returnObj = {
getDocumentData() { getDocumentData() {
return compressDocJSON() return compressDocJSON()
......
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