font-family select added

dist/assets/a-doc-editor2.css

@@ -27,15 +27,23 @@
     background: green;
     border: 1px solid yelow;
     border-radius: 3px;
-    padding: 2px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 4px;
+    padding-right: 4px;
     margin: 4px;
 }
 .page-list {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
     overflow-x: auto;
-    background: blue;
+    background: #858585;
+    gap: 20px;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
 .page-list canvas {
     background-color: #fff;

dist/assets/a-doc-editor2.js

 let isModule = (typeof module != 'undefined') ? true : false
 if (!isModule) console.log('Browser Environment')
 var ADocEditor = function (customConfig) {
-    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj={};
+    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj = {}, fontList=[], headerToolbar=[];
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
@@ -9,8 +9,8 @@ var ADocEditor = function (customConfig) {
         pageSetup: { size: "A4" }, zoom: 1,
     }
     var pageList = []
-    function initialize(){
-        configuration = JSON.parse( JSON.stringify(defaultConfig) )
+    function initialize() {
+        configuration = JSON.parse(JSON.stringify(defaultConfig))
         container = customConfig.container
         shadow = container.attachShadow({ mode: "open" })
 
@@ -18,12 +18,7 @@ var ADocEditor = function (customConfig) {
 <div class="scale"></div>
 <div class="header">
     <div class="toolbar">
-        <select class="item">
-            <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 class="item" adc="font-select">
         </select>
     </div>
 </div>
@@ -44,14 +39,17 @@ var ADocEditor = function (customConfig) {
             <option value="0.9">90%</option>
             <option value="1" selected>100%</option>
         </select>
+        <span class="item">Words : 0</span>
+        <span class="item">Sentences : 0</span>
+        <span class="item">Pages : 1</span>
     </div>
 </div>
         `;
 
 
-        let styleSheets = customConfig?.styleSheet?.length?customConfig.styleSheet:[]
-        styleSheets.splice(0,0,  "/assets/a-doc-editor2.css")
-        for ( let i=0; i<styleSheets.length; i++ ){
+        let styleSheets = customConfig?.styleSheet?.length ? customConfig.styleSheet : []
+        styleSheets.splice(0, 0, "/assets/a-doc-editor2.css")
+        for (let i = 0; i < styleSheets.length; i++) {
             let link = document.createElement('link')
             link.setAttribute('rel', 'stylesheet');
             link.setAttribute('href', styleSheets[i]);
@@ -69,51 +67,97 @@ var ADocEditor = function (customConfig) {
         }
 
 
-        !( function zoomHandles(){
+        !(function zoomHandles() {
             let zoomSelect = shadow.querySelector('[adc="zoom"]')
-            zoomSelect.addEventListener( 'change', (e)=>{
+            zoomSelect.addEventListener('change', (e) => {
                 configuration.zoom = Number(e.target.value)
                 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)
     }
-    function reConfigure(newConfig){
-        if (newConfig?.size && paperSizes[ newConfig?.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
-        else if ( newConfig?.width && newConfig?.height ){
+    function reConfigure(newConfig) {
+        if (newConfig?.size && paperSizes[newConfig?.size]) { configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
+        else if (newConfig?.width && newConfig?.height) {
             configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
         }
         else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
-        
-        if (typeof window == 'object'){
-            configuration.pageSetup.multipler = configuration.pageSetup.mmHeight/configuration.pageSetup.mmWidth
+
+        if (typeof window == 'object') {
+            configuration.pageSetup.multipler = configuration.pageSetup.mmHeight / configuration.pageSetup.mmWidth
             configuration.pageSetup.pxWidth = 2480
-            configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler)
-        }else{
+            configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth * configuration.pageSetup.multipler)
+        } else {
             configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
             configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth
         }
-        
-        if (configuration.zoom){
-            configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth*configuration.zoom
-            configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight*configuration.zoom
+
+        if (configuration.zoom) {
+            configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth * 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`
         }
 
         let scale = shadow.querySelector('.scale')
         scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
         let rect = scale.getBoundingClientRect()
-        pxMmRatio = rect.width/100;
+        pxMmRatio = rect.width / 100;
 
         return configuration
     }
 
-    function createNewPage(index){
+    function createNewPage(index) {
         let pageObj = {
             canvas: null,
             firstDataIndex: null,
@@ -121,19 +165,72 @@ var ADocEditor = function (customConfig) {
             lastDataIndex: null,
             lastCharIndex: null
         }
-        if (!isModule){
+        if (!isModule) {
             pageObj.canvas = document.createElement('canvas')
+            pageObj.canvas.setAttribute('tabIndex', '-1')
             pageObj.canvas.width = configuration.pageSetup.pxWidth
             pageObj.canvas.height = configuration.pageSetup.pxHeight
-            pageList.push( pageObj )
+            pageList.push(pageObj)
             pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
-            shadow.querySelector('.page-list').append( pageObj.canvas )
+            shadow.querySelector('.page-list').append(pageObj.canvas)
         }
     }
+
+
+    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()

dist/index.html

@@ -11,7 +11,7 @@
 
     <style>
         body {
-            background: #aaa;
+            background:cadetblue
         }
         #user-container-for-editor{
             margin: 20px;