Skip to content

A
a-doc-editor
Commit ffbf9ad5 by ramdayalmunda
Options

added woff2 files for smaller file size

parent 1db5502d
Showing with 66 additions and 67 deletions
dist/assets/a-doc-editor.js
...@@ -150,25 +150,24 @@ var ADocEditor = function (customConfig) { ...@@ -150,25 +150,24 @@ var ADocEditor = function (customConfig) {
`; `;
console.log(); console.log();
addFonts(["./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter') addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
addFonts(["./assets/fonts/calibri-regular.ttf"], 'Calibri') addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri')
addFonts(["./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat') addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2","./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
//////addFonts(["./assets/fonts/DancingScript-VariableFont_wght.ttf"], 'Dancing Script'); // this font is not working with pdf-lib addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2","./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner') addFonts(["./assets/fonts/IndieFlower-Regular.woff2","./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
addFonts(["./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower') addFonts(["./assets/fonts/Kanit-Regular.woff2","./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
addFonts(["./assets/fonts/Kanit-Regular.ttf"], 'Kanit') addFonts(["./assets/fonts/Kenia-Regular.woff2","./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
addFonts(["./assets/fonts/Kenia-Regular.ttf"], 'Kenia') addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
addFonts(["./assets/fonts/Lato-Regular.ttf"], 'Lato') addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
addFonts(["./assets/fonts/Lora-Regular.ttf"], 'Lora') addFonts(["./assets/fonts/Macondo-Regular.woff2","./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
addFonts(["./assets/fonts/Macondo-Regular.ttf"], 'Macondo') addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
addFonts(["./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather') addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
addFonts(["./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/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans') addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
addFonts(["./assets/fonts/Pacifico-Regular.woff","./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico') addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
addFonts(["./assets/fonts/Poppins-Regular.ttf"], 'Poppins') addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
addFonts(["./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik') addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
addFonts(["./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu') addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
addFonts(["./assets/fonts/WorkSans-VariableFont_wght.ttf"], 'Work Sans')
container.innerHTML = htmlSetup container.innerHTML = htmlSetup
container.append(styleTag) container.append(styleTag)
...@@ -187,7 +186,7 @@ var ADocEditor = function (customConfig) { ...@@ -187,7 +186,7 @@ var ADocEditor = function (customConfig) {
rightSidebar.classList.toggle('hide') rightSidebar.classList.toggle('hide')
}) })
fontFamilyDropdown = document.getElementById(fontFamilyDropdownId) fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
fontFamilyDropdown.addEventListener( 'change', changeFontFamily ) fontFamilyDropdown.addEventListener('change', changeFontFamily)
reRenderFontDropdown() reRenderFontDropdown()
let generatePDFBtn = document.querySelector('[a-doc-editor-action]') let generatePDFBtn = document.querySelector('[a-doc-editor-action]')
generatePDFBtn.addEventListener('click', generatePDF) generatePDFBtn.addEventListener('click', generatePDF)
...@@ -451,9 +450,9 @@ var ADocEditor = function (customConfig) { ...@@ -451,9 +450,9 @@ var ADocEditor = function (customConfig) {
// Alpha channel remains unchanged (data[i + 3]) // Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, rectX, rectY); ctx.putImageData(imageData, rectX, rectY);
} }
if (characterData){ if (characterData) {
caretData.style = { ...characterData } caretData.style = { ...characterData }
}else{ } else {
caretData.style = { ...caretData.activeData.style } caretData.style = { ...caretData.activeData.style }
} }
...@@ -515,7 +514,7 @@ var ADocEditor = function (customConfig) { ...@@ -515,7 +514,7 @@ var ADocEditor = function (customConfig) {
if (e.shiftKey && (e.ctrlKey || e.metaKey)) { if (e.shiftKey && (e.ctrlKey || e.metaKey)) {
return return
} }
else if (e.keyCode==16){ // only shift key else if (e.keyCode == 16) { // only shift key
return return
} }
// ctr+shift combination // ctr+shift combination
...@@ -559,7 +558,7 @@ var ADocEditor = function (customConfig) { ...@@ -559,7 +558,7 @@ var ADocEditor = function (customConfig) {
} }
else if (e.key.length == 1 || e.keyCode == 32) { // these are printable characters key else if (e.key.length == 1 || e.keyCode == 32) { // these are printable characters key
e.preventDefault() e.preventDefault()
caretData.style.fontFamily = fontFamilyDropdown.value caretData.style.fontFamily = fontFamilyDropdown.value
caretData.activeData.formatedText[caretData.index] = { ...caretData.style } caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
...@@ -685,24 +684,24 @@ var ADocEditor = function (customConfig) { ...@@ -685,24 +684,24 @@ var ADocEditor = function (customConfig) {
async function generatePDF(file) { async function generatePDF(file) {
let embededFonts = {} let embededFonts = {}
// Create a new PDFDocument // Create a new PDFDocument
const pdfDoc = await PDFDocument.create() const pdfDoc = await PDFDocument.create()
function embedFont( name ){ function embedFont(name) {
return new Promise( (res, rej)=>{ return new Promise((res, rej) => {
let fontObj = fontList.find( item => item.name == name ) let fontObj = fontList.find(item => item.name == name)
console.log(fontObj) console.log(fontObj)
fetch( fontObj.paths[0] ) fetch(fontObj.paths[0])
.then( async(data)=>{ .then(async (data) => {
let arrayBuffer = await data.arrayBuffer() let arrayBuffer = await data.arrayBuffer()
embededFonts[name] = await pdfDoc.embedFont(arrayBuffer) embededFonts[name] = await pdfDoc.embedFont(arrayBuffer)
res( embededFonts[name] ) res(embededFonts[name])
} ).catch((err)=>{ }).catch((err) => {
rej(err) rej(err)
}) })
} ) })
} }
// register font-kit // register font-kit
pdfDoc.registerFontkit(fontkit) pdfDoc.registerFontkit(fontkit)
...@@ -739,11 +738,11 @@ var ADocEditor = function (customConfig) { ...@@ -739,11 +738,11 @@ var ADocEditor = function (customConfig) {
...config.style, ...config.style,
...setData.style ...setData.style
} }
if (!embededFonts[style.fontFamily]) await embedFont( style.fontFamily ) if (!embededFonts[style.fontFamily]) await embedFont(style.fontFamily)
page.drawText( `${lines[l].listIndex + 1}.` , { page.drawText(`${lines[l].listIndex + 1}.`, {
x: numberX/config.pageSetup.canvasMultiplier, x: numberX / config.pageSetup.canvasMultiplier,
y: (config.pageSetup.canvasHeight-y)/config.pageSetup.canvasMultiplier, y: (config.pageSetup.canvasHeight - y) / config.pageSetup.canvasMultiplier,
size: (style.fontSize*config.pageSetup.fontMultiplier)/config.pageSetup.canvasMultiplier, size: (style.fontSize * config.pageSetup.fontMultiplier) / config.pageSetup.canvasMultiplier,
font: embededFonts[style.fontFamily], font: embededFonts[style.fontFamily],
color: rgb(0, 0, 0), color: rgb(0, 0, 0),
}) })
...@@ -757,11 +756,11 @@ var ADocEditor = function (customConfig) { ...@@ -757,11 +756,11 @@ var ADocEditor = function (customConfig) {
let char = setData?.plainContent[c] let char = setData?.plainContent[c]
if (char) { if (char) {
let style = setData.formatedText[c] let style = setData.formatedText[c]
if (!embededFonts[style.fontFamily]) await embedFont( style.fontFamily ) if (!embededFonts[style.fontFamily]) await embedFont(style.fontFamily)
page.drawText( dataSet[lines[l].dataSetIndex].plainContent[c] , { page.drawText(dataSet[lines[l].dataSetIndex].plainContent[c], {
x: style.x/config.pageSetup.canvasMultiplier, x: style.x / config.pageSetup.canvasMultiplier,
y:( config.pageSetup.canvasHeight-style.y)/config.pageSetup.canvasMultiplier, y: (config.pageSetup.canvasHeight - style.y) / config.pageSetup.canvasMultiplier,
size: (style.fontSize*config.pageSetup.fontMultiplier)/config.pageSetup.canvasMultiplier, size: (style.fontSize * config.pageSetup.fontMultiplier) / config.pageSetup.canvasMultiplier,
font: embededFonts[style.fontFamily], font: embededFonts[style.fontFamily],
color: rgb(0, 0, 0), color: rgb(0, 0, 0),
}) })
...@@ -787,8 +786,8 @@ var ADocEditor = function (customConfig) { ...@@ -787,8 +786,8 @@ var ADocEditor = function (customConfig) {
document.body.removeChild(downloadLink) document.body.removeChild(downloadLink)
} }
function addFonts(paths, name){ function addFonts(paths, name) {
if (typeof paths == 'string') paths = [ paths ] if (typeof paths == 'string') paths = [paths]
let fontObj = { let fontObj = {
paths: [], paths: [],
name: name, name: name,
...@@ -796,52 +795,52 @@ var ADocEditor = function (customConfig) { ...@@ -796,52 +795,52 @@ var ADocEditor = function (customConfig) {
if (!isModule) { if (!isModule) {
let linkString = '' let linkString = ''
for(let i=0; i<paths.length; i++){ for (let i = 0; i < paths.length; i++) {
let format = paths[i].split('.'); let format = paths[i].split('.');
format = format[format.length-1] format = format[format.length - 1]
fontObj.paths.push( paths[i] ) fontObj.paths.push(paths[i])
linkString += `url(${paths[i]}) format("${format=='ttf'?'truetype':format}")${(i>=paths.length-1)?'':',\n'}` linkString += `url(${paths[i]}) format("${format == 'ttf' ? 'truetype' : format}")${(i >= paths.length - 1) ? '' : ',\n'}`
} }
const customFont = new FontFace(`${name}`, `${linkString}`); const customFont = new FontFace(`${name}`, `${linkString}`);
customFont.load() customFont.load()
.then( (loadedFont)=>{ .then((loadedFont) => {
document.fonts.add(loadedFont); document.fonts.add(loadedFont);
loadedFont.loaded.then( ()=>{ loadedFont.loaded.then(() => {
fontList.push(fontObj) fontList.push(fontObj)
reRenderFontDropdown() reRenderFontDropdown()
} ) })
} ) })
} }
} }
// // these are methods related to the toolbar items // // these are methods related to the toolbar items
function changeFontFamily(e){ function changeFontFamily(e) {
caretData.style.fontFamily = e.target.value caretData.style.fontFamily = e.target.value
caretData.styleModified = false caretData.styleModified = false
if (lastFocusCanvas){ if (lastFocusCanvas) {
lastFocusCanvas.focus({ preventScroll: true }) lastFocusCanvas.focus({ preventScroll: true })
} }
if (!caretData.activeData.plainContent.length){ if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontFamily = e.target.value caretData.activeData.style.fontFamily = e.target.value
} }
} }
function reRenderFontDropdown(){ function reRenderFontDropdown() {
if (fontFamilyDropdown){ if (fontFamilyDropdown) {
fontFamilyDropdown.innerHTML = "" fontFamilyDropdown.innerHTML = ""
fontList.forEach( (font,i)=>{ fontList.forEach((font, i) => {
let optionTag = document.createElement('option') let optionTag = document.createElement('option')
optionTag.setAttribute('value', font.name) optionTag.setAttribute('value', font.name)
optionTag.innerHTML = font.name optionTag.innerHTML = font.name
fontFamilyDropdown.append(optionTag) fontFamilyDropdown.append(optionTag)
} ) })
} }
} }
...@@ -851,7 +850,7 @@ var ADocEditor = function (customConfig) { ...@@ -851,7 +850,7 @@ var ADocEditor = function (customConfig) {
clearInterval(caretData.interval) clearInterval(caretData.interval)
} }
function getContent(){ function getContent() {
return JSON.parse(JSON.stringify(dataSet)) return JSON.parse(JSON.stringify(dataSet))
} }
......
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