Skip to content

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

font size on toolbar added

parent fe7d63bf
Showing with 80 additions and 41 deletions
dist/assets/a-doc-editor.css
......@@ -24,9 +24,11 @@
border-radius: 5px;
height: 300px;
overflow: auto;
top: 100%;
}
.a-doc-editor .dropdown-list.show {
display: block;
width: max-content;
}
.a-doc-editor .dropdown-list .dropdown-option{
padding: 10px;
......@@ -40,9 +42,18 @@
display:flex;
}
.a-doc-editor .header .option{
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.137);
padding: 1px;
display: flex;
}
.a-doc-editor .header button{
width: 25px;
}
.a-doc-editor .header .option input{
width: 25px;
}
.a-doc-editor .header .option:hover{
padding: 1px;
background-color: white;
......
dist/assets/a-doc-editor.js
......@@ -21,6 +21,8 @@ var ADocEditor = function (customConfig) {
var fontFamily = null;
var fontFamilyDropdown = null
var fontList = []
var fontSize;
var defaultConfig = {
element: "",
pageSetup: {
......@@ -108,13 +110,15 @@ var ADocEditor = function (customConfig) {
<div class="option">Help</div>
</div>
<div class="option-bar">
<div class="option">File</div>
<div class="option">File</div>
<div class="option">File</div>
<div class="option">
<div class="dropdown-label" adc-target="#${fontFamilyDropdownId}"></div>
<div class="dropdown-label" adc-target="#${fontFamilyDropdownId}" style="min-width:180px"></div>
<div class="dropdown-list" id="${fontFamilyDropdownId}" adc-type="dropdown"></div>
</div>
<div class="option">
<button adc-action="font-size-minus">-</button>
<input adc-action="font-size-set"/>
<button adc-action="font-size-plus">+</button>
</div>
</div>
</div>
......@@ -144,44 +148,44 @@ var ADocEditor = function (customConfig) {
</div>
`;
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/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri')
addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
container.innerHTML = htmlSetup
container.append(styleTag)
......@@ -200,11 +204,15 @@ var ADocEditor = function (customConfig) {
rightSidebar.classList.toggle('hide')
})
fontFamily = container.querySelector(`[adc-target="#${fontFamilyDropdownId}"]`)
bindGlobalEvents()
fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
fontFamilyDropdown.addEventListener('click', changeFontFamily)
reRenderFontDropdown()
fontSize = container.querySelector('[adc-action="font-size-set"]')
bindGlobalEvents()
}
......@@ -315,7 +323,7 @@ var ADocEditor = function (customConfig) {
width: charWidth
}
lineObj.maxFontSize = style.fontSize
lineObj.maxFontSize = (!lineObj.maxFontSize)?style.fontSize:( style.fontSize>lineObj.maxFontSize?style.fontSize:lineObj.maxFontSize )
// lineObj.fontSize = style.fontSize
tempLineWidth += charWidth
if (tempLineWidth <= maxLineWidth) {
......@@ -355,7 +363,7 @@ var ADocEditor = function (customConfig) {
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
let x = 0
let y = (config.format.margin * config.pageSetup.canvasMultiplier)
let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2)
let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2); // this is the height of writable area; so this excludes the margin from top and bottom.
for (let l = 0; l < lines.length; l++) {
x = (config.format.margin * config.pageSetup.canvasMultiplier);
......@@ -574,7 +582,7 @@ var ADocEditor = function (customConfig) {
else if (e.key.length == 1 || e.keyCode == 32) { // these are printable characters key
e.preventDefault()
caretData.style.fontFamily = fontFamily.innerText
caretData.style.fontSize = Number(fontSize.value)
caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
......@@ -706,8 +714,8 @@ var ADocEditor = function (customConfig) {
function embedFont(name) {
return new Promise((res, rej) => {
let fontObj = fontList.find(item => item.name == name)
let url = fontObj.paths.find( item => item.slice(-4)=='.ttf' )
if(!url) fontObj.paths[0]
let url = fontObj.paths.find(item => item.slice(-4) == '.ttf')
if (!url) fontObj.paths[0]
fetch(url)
.then(async (data) => {
let arrayBuffer = await data.arrayBuffer()
......@@ -836,7 +844,7 @@ var ADocEditor = function (customConfig) {
// // these are methods related to the toolbar items
function changeFontFamily(e) {
if (e){
if (e) {
caretData.style.fontFamily = e.target.innerText
caretData.styleModified = false
if (lastFocusCanvas) {
......@@ -845,12 +853,24 @@ var ADocEditor = function (customConfig) {
if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontFamily = e.target.innerText
}
}else{
} else {
let labels = container.querySelectorAll(`[adc-target="#${fontFamilyDropdown.id}"]`)
labels.forEach( item => item.innerText = caretData.style.fontFamily )
labels.forEach(item => item.innerText = caretData.style.fontFamily)
}
}
function changeFontSize(change){
fontSize.value = change
caretData.style.fontSize = change
if (lastFocusCanvas) {
lastFocusCanvas.focus({ preventScroll: true })
}
if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontSize = change
}
}
function reRenderFontDropdown() {
if (fontFamilyDropdown) {
......@@ -870,35 +890,43 @@ var ADocEditor = function (customConfig) {
}
function bindGlobalEvents(){
function bindGlobalEvents() {
let options = container.querySelectorAll('[adc-target]')
options.forEach( option=>{
options.forEach(option => {
let target = container.querySelector(option.getAttribute('adc-target'))
option.innerText = target?.children?.[0]?.innerText?target?.children?.[0]?.innerText:''
} )
option.innerText = target?.children?.[0]?.innerText ? target?.children?.[0]?.innerText : ''
})
fontSize.value = caretData.style.fontSize
container.addEventListener('click', (e)=>{
if (e.target.getAttribute('adc-type')=='option'){
container.addEventListener('click', (e) => {
if (e.target.getAttribute('adc-type') == 'option') {
let parent = e.target.parentElement
let labelList = container.querySelectorAll(`[adc-target="#${parent.id}"]`)
labelList.forEach( item=> {
labelList.forEach(item => {
item.innerText = e.target.innerText
} )
})
closeAllExcept()
}else{
} else {
let target = container.querySelector(e.target.getAttribute('adc-target'))
closeAllExcept(target)
}
function closeAllExcept(except){
if (e.target.getAttribute('adc-action')=='font-size-minus'){
changeFontSize(Number(fontSize.value)-1)
}
if (e.target.getAttribute('adc-action')=='font-size-plus'){
changeFontSize(Number(fontSize.value)+1)
}
function closeAllExcept(except) {
let dropdownLists = container.querySelectorAll('[adc-type="dropdown"]')
dropdownLists.forEach( item => {
if (item==except){
dropdownLists.forEach(item => {
if (item == except) {
item.classList.toggle('show')
}
else item.classList.remove('show')
} )
})
}
})
......
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