Skip to content

A
a-doc-editor
Commit 9db9b45e by ramdayalmunda
Options

header changes

parent 01295e1a
Showing with 82 additions and 45 deletions
dist/assets/a-doc-editor.css
......@@ -119,20 +119,22 @@ canvas:focus-visible {
overflow-x: auto;
overflow-y: hidden;
}
.content-area .left-sidebar{
.content-area .left-sidebar {
width: 200px;
background-color:#408640;
background-color: #408640;
padding: 5px;
}
.content-area .right-sidebar{
.content-area .right-sidebar {
width: 200px;
background-color: #f5c468;
padding: 5px;
}
.content-area .left-sidebar,
.content-area .page-list,
.content-area .right-sidebar{
.content-area .right-sidebar {
flex-shrink: 0;
height: 100%;
overflow-x: hidden;
......@@ -143,15 +145,16 @@ canvas:focus-visible {
}
.left-sidebar .toggle-btn,
.right-sidebar .toggle-btn{
.right-sidebar .toggle-btn {
display: block;
position: static;
top: 0;
width: 100%;
text-align: center;
}
.left-sidebar .content,
.right-sidebar .content{
.right-sidebar .content {
opacity: 1;
position: relative;
left: 0%;
......@@ -159,14 +162,15 @@ canvas:focus-visible {
}
.left-sidebar.hide,
.right-sidebar.hide{
.right-sidebar.hide {
width: 50px;
}
.left-sidebar.hide .content,
.right-sidebar.hide .content{
.right-sidebar.hide .content {
opacity: 0;
}
.page-list {
position: relative;
display: block;
......@@ -185,6 +189,7 @@ canvas:focus-visible {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 2px;
}
.footer {
......@@ -198,10 +203,26 @@ canvas:focus-visible {
0% {
background: #fff;
}
50% {
background: #ddd;
}
100% {
background: #fff;
}
}
*::-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
let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment')
var ADocEditor = function (customConfig) {
var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [];
const mmPtRatio = 254 / 720; // this is used for font size
var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 },
......@@ -10,11 +10,15 @@ var ADocEditor = function (customConfig) {
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: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#f00", bold: false, italic: false },
{ name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#0f0", 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 },
{ name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#00f", bold: false, italic: false },
]
const styleName = { };
styleList.forEach( (sty, s)=> { styleName[sty.name] = s } )
var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1,
format: {
......@@ -54,7 +58,7 @@ var ADocEditor = function (customConfig) {
pageIndex: 0,
caretSize: config.style.fontSize,
previousCaret: null,
style: null,
style: { type: "Normal Text" },
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
......@@ -123,10 +127,10 @@ var ADocEditor = function (customConfig) {
</div>
<div class="page-list" adc="page-list"></div>
<div class="right-sidebar hide">
<!-- <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>
<div class="footer">
......@@ -191,13 +195,17 @@ var ADocEditor = function (customConfig) {
!(function fontSelectHandle() {
let fontSelect = shadow.querySelector('[adc="font-select"]')
headerToolbar.push(fontSelect)
let caretStyle = getFullStyle(caretData.style)
fontSelect.value = caretStyle.fontFamily
fontSelect.addEventListener('change', (e) => {
if (e.target.value){
caretData.style = {
...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/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
......@@ -232,7 +240,8 @@ var ADocEditor = function (customConfig) {
!(function fontSizeHandler() {
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = (caretData?.style?caretData:config).style.fontSize
let caretStyle = getFullStyle(caretData.style)
fontSizeInput.value = caretStyle.fontSize
let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
fontSizeChangers.forEach(btn => {
btn.addEventListener('click', (e) => {
......@@ -314,12 +323,12 @@ var ADocEditor = function (customConfig) {
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'})
})
// 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'})
// })
})()
......@@ -433,8 +442,7 @@ var ADocEditor = function (customConfig) {
}
}
for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[c].style
if (!style) style = { ...config.style }
let style = getFullStyle(dataBlock?.formatedText?.[c].style)
lineObj.maxFontSize = (lineObj.maxFontSize < style.fontSize) ? style.fontSize : lineObj.maxFontSize
if (/\s/.test(dataBlock.plainContent[c])) {
......@@ -445,15 +453,7 @@ var ADocEditor = function (customConfig) {
}
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
dataBlock.formatedText[c] = {
style: {
...config.style,
...style,
},
dimension: {
width: charWidth,
},
}
dataBlock.formatedText[c].dimension.width = charWidth
// // if with the current char the string could not fit on one line
if (tempLineWidth + charWidth > maxLineWidth) {
......@@ -541,9 +541,10 @@ var ADocEditor = function (customConfig) {
// this is to render the numbering and bullets etc
if (lines[l].dataType == 1) {
let setStyle = getFullStyle(setData.style)
ctx.save()
ctx.font = `${setData.style.fontSize * pxMmRatio * mmPtRatio}px ${setData.style.fontFamily}`
ctx.fillStyle = `${setData.style.fontColor}`
ctx.font = `${setStyle.fontSize * pxMmRatio * mmPtRatio}px ${setStyle.fontFamily}`
ctx.fillStyle = `${setStyle.fontColor}`
let label = getLabel(lines[l].dataIndex)
let labelWidth = ctx.measureText(label).width
labelWidth += mmPtRatio * pxMmRatio * 5
......@@ -557,7 +558,7 @@ 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].style
let style = getFullStyle(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}`
......@@ -681,7 +682,6 @@ var ADocEditor = function (customConfig) {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
let style = caretData.style
style = style?style:null
console.log(style)
caretData.activeData.formatedText.splice(caretData.index, 0, { style : style, dimension: {} })
++caretData.index
}
......@@ -768,7 +768,9 @@ var ADocEditor = function (customConfig) {
...caretData.style,
fontSize: style.fontSize,
}
shadow.querySelector('[adc="font-size-input"]').value = caretData.style.fontSize
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) {
......@@ -886,7 +888,7 @@ var ADocEditor = function (customConfig) {
}
function reRenderFontDropdown() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]')
if (fontFamilyDropdown) {
fontFamilyDropdown.innerHTML = ""
fontList.forEach((font, i) => {
......@@ -901,8 +903,9 @@ var ADocEditor = function (customConfig) {
}
function changeFontFamily() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
if (fontFamilyDropdown) fontFamilyDropdown.value = (caretData?.style?caretData:config).style.fontFamily
let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]')
let caretStyle = getFullStyle(caretData.style)
if (fontFamilyDropdown) fontFamilyDropdown.value = caretStyle.fontFamily
}
}
......@@ -951,6 +954,17 @@ var ADocEditor = function (customConfig) {
}
}
function getFullStyle(refStyle){
let style = { }
if (refStyle.type){
style = { ...styleList[styleName[refStyle.type] ] }
}
style = { ...style, ...refStyle }
style = JSON.parse( JSON.stringify(style) )
if (Object.keys(style).length > 1) delete style.type
return style
}
function renderCaret(toLoop) {
clearTimeout(caretData.timeout)
......@@ -971,14 +985,15 @@ var ADocEditor = function (customConfig) {
let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth
let y = (config.format.margin) * pxMmRatio
let height = (caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let caretStyle = getFullStyle(caretData.style)
let height = caretStyle.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let width = height / 10
let charDimension = caretData.activeData.formatedText[caretData.index - 1]?.dimension
if (lineObj) {
x = (charDimension ? (charDimension.x + charDimension.width) : x)
if (charDimension) {
y = charDimension.y - ((caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio)
y = charDimension.y - (caretStyle.fontSize * pxMmRatio * mmPtRatio)
} else {
if (prevLine && prevLine.pageIndex != lineObj.pageIndex) {
y = (config.format.margin) * pxMmRatio
......
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