Skip to content

A
a-doc-editor
Commit eb8354a1 by ramdayalmunda
Options

font-family select added

parent 12418c04
Showing with 147 additions and 42 deletions
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;
......
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