Commit eb8354a1 by ramdayalmunda

font-family select added

parent 12418c04
...@@ -27,15 +27,23 @@ ...@@ -27,15 +27,23 @@
background: green; background: green;
border: 1px solid yelow; border: 1px solid yelow;
border-radius: 3px; border-radius: 3px;
padding: 2px; padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
margin: 4px; margin: 4px;
} }
.page-list { .page-list {
position: relative; position: relative;
display: block; display: flex;
flex-direction: column;
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
background: blue; background: #858585;
gap: 20px;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
} }
.page-list canvas { .page-list canvas {
background-color: #fff; background-color: #fff;
......
let isModule = (typeof module != 'undefined') ? true : false let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment') if (!isModule) console.log('Browser Environment')
var ADocEditor = function (customConfig) { var ADocEditor = function (customConfig) {
var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj={}; var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj = {}, fontList=[], headerToolbar=[];
var paperSizes = { var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 }, "A4": { mmWidth: 210, mmHeight: 297 },
} }
...@@ -9,8 +9,8 @@ var ADocEditor = function (customConfig) { ...@@ -9,8 +9,8 @@ var ADocEditor = function (customConfig) {
pageSetup: { size: "A4" }, zoom: 1, pageSetup: { size: "A4" }, zoom: 1,
} }
var pageList = [] var pageList = []
function initialize(){ function initialize() {
configuration = JSON.parse( JSON.stringify(defaultConfig) ) configuration = JSON.parse(JSON.stringify(defaultConfig))
container = customConfig.container container = customConfig.container
shadow = container.attachShadow({ mode: "open" }) shadow = container.attachShadow({ mode: "open" })
...@@ -18,12 +18,7 @@ var ADocEditor = function (customConfig) { ...@@ -18,12 +18,7 @@ var ADocEditor = function (customConfig) {
<div class="scale"></div> <div class="scale"></div>
<div class="header"> <div class="header">
<div class="toolbar"> <div class="toolbar">
<select class="item"> <select class="item" adc="font-select">
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
</select> </select>
</div> </div>
</div> </div>
...@@ -44,14 +39,17 @@ var ADocEditor = function (customConfig) { ...@@ -44,14 +39,17 @@ var ADocEditor = function (customConfig) {
<option value="0.9">90%</option> <option value="0.9">90%</option>
<option value="1" selected>100%</option> <option value="1" selected>100%</option>
</select> </select>
<span class="item">Words : 0</span>
<span class="item">Sentences : 0</span>
<span class="item">Pages : 1</span>
</div> </div>
</div> </div>
`; `;
let styleSheets = customConfig?.styleSheet?.length?customConfig.styleSheet:[] let styleSheets = customConfig?.styleSheet?.length ? customConfig.styleSheet : []
styleSheets.splice(0,0, "/assets/a-doc-editor2.css") styleSheets.splice(0, 0, "/assets/a-doc-editor2.css")
for ( let i=0; i<styleSheets.length; i++ ){ for (let i = 0; i < styleSheets.length; i++) {
let link = document.createElement('link') let link = document.createElement('link')
link.setAttribute('rel', 'stylesheet'); link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', styleSheets[i]); link.setAttribute('href', styleSheets[i]);
...@@ -69,51 +67,97 @@ var ADocEditor = function (customConfig) { ...@@ -69,51 +67,97 @@ var ADocEditor = function (customConfig) {
} }
!( function zoomHandles(){ !(function zoomHandles() {
let zoomSelect = shadow.querySelector('[adc="zoom"]') let zoomSelect = shadow.querySelector('[adc="zoom"]')
zoomSelect.addEventListener( 'change', (e)=>{ zoomSelect.addEventListener('change', (e) => {
configuration.zoom = Number(e.target.value) configuration.zoom = Number(e.target.value)
reConfigure(configuration) reConfigure(configuration)
} ) })
} )() })()
reConfigure( customConfig ) !(function fontSelectHandle() {
let fontSelect = shadow.querySelector('[adc="font-select"]')
headerToolbar.push(fontSelect)
fontSelect.addEventListener('change', (e)=>{
console.log('font', e.target.value)
})
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/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')
})()
reConfigure(customConfig)
createNewPage(0) createNewPage(0)
} }
function reConfigure(newConfig){ function reConfigure(newConfig) {
if (newConfig?.size && paperSizes[ newConfig?.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } } if (newConfig?.size && paperSizes[newConfig?.size]) { configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
else if ( newConfig?.width && newConfig?.height ){ else if (newConfig?.width && newConfig?.height) {
configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height } configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
} }
else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } } else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
if (typeof window == 'object'){ if (typeof window == 'object') {
configuration.pageSetup.multipler = configuration.pageSetup.mmHeight/configuration.pageSetup.mmWidth configuration.pageSetup.multipler = configuration.pageSetup.mmHeight / configuration.pageSetup.mmWidth
configuration.pageSetup.pxWidth = 2480 configuration.pageSetup.pxWidth = 2480
configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler) configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth * configuration.pageSetup.multipler)
}else{ } else {
configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth
} }
if (configuration.zoom){ if (configuration.zoom) {
configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth*configuration.zoom configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth * configuration.zoom
configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight*configuration.zoom configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight * configuration.zoom
} }
for ( let p=0; p<pageList.length; p++ ){ for (let p = 0; p < pageList.length; p++) {
pageList[p].canvas.style.width = `${configuration.pageSetup.uiWidth}mm` pageList[p].canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
} }
let scale = shadow.querySelector('.scale') let scale = shadow.querySelector('.scale')
scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`) scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
let rect = scale.getBoundingClientRect() let rect = scale.getBoundingClientRect()
pxMmRatio = rect.width/100; pxMmRatio = rect.width / 100;
return configuration return configuration
} }
function createNewPage(index){ function createNewPage(index) {
let pageObj = { let pageObj = {
canvas: null, canvas: null,
firstDataIndex: null, firstDataIndex: null,
...@@ -121,21 +165,74 @@ var ADocEditor = function (customConfig) { ...@@ -121,21 +165,74 @@ var ADocEditor = function (customConfig) {
lastDataIndex: null, lastDataIndex: null,
lastCharIndex: null lastCharIndex: null
} }
if (!isModule){ if (!isModule) {
pageObj.canvas = document.createElement('canvas') pageObj.canvas = document.createElement('canvas')
pageObj.canvas.setAttribute('tabIndex', '-1')
pageObj.canvas.width = configuration.pageSetup.pxWidth pageObj.canvas.width = configuration.pageSetup.pxWidth
pageObj.canvas.height = configuration.pageSetup.pxHeight pageObj.canvas.height = configuration.pageSetup.pxHeight
pageList.push( pageObj ) pageList.push(pageObj)
pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm` pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
shadow.querySelector('.page-list').append( pageObj.canvas ) shadow.querySelector('.page-list').append(pageObj.canvas)
} }
} }
var returnObj = { function addFonts(paths, name) {
if (typeof paths == 'string') paths = [paths]
let fontObj = {
paths: [],
name: name,
}
if (!isModule) {
let linkString = ''
for (let i = 0; i < paths.length; i++) {
let format = paths[i].split('.');
format = format[format.length - 1]
fontObj.paths.push(paths[i])
linkString += `url(${paths[i]}) format("${format == 'ttf' ? 'truetype' : format}")${(i >= paths.length - 1) ? '' : ',\n'}`
}
const customFont = new FontFace(`${name}`, `${linkString}`);
customFont.load()
.then((loadedFont) => {
document.fonts.add(loadedFont);
loadedFont.loaded.then(() => {
fontList.push(fontObj)
reRenderFontDropdown()
})
})
}
function reRenderFontDropdown() {
let fontFamilyDropdown = headerToolbar.find( item => item.getAttribute('adc')=='font-select' )
if (fontFamilyDropdown) {
fontFamilyDropdown.innerHTML = ""
fontList.forEach((font, i) => {
let optionTag = document.createElement('option')
optionTag.setAttribute('value', font.name)
optionTag.style.fontFamily = font.name
optionTag.innerText = font.name
fontFamilyDropdown.append(optionTag)
})
}
// changeFontFamily()
}
} }
var returnObj = {
addFonts,
getConfiguration(){ return JSON.parse( JSON.stringify(configuration) ) },
getPages(){
let pagesToReturn = JSON.parse( JSON.stringify( pageList ) )
for ( let i=0; i<pagesToReturn.length; i++ ) pagesToReturn[i].canvas = pageList[i].canvas
return pagesToReturn
},
}
initialize() initialize()
return returnObj return returnObj
} }
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<style> <style>
body { body {
background: #aaa; background:cadetblue
} }
#user-container-for-editor{ #user-container-for-editor{
margin: 20px; margin: 20px;
......
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