Commit fe7d63bf by ramdayalmunda

now font-family will be visible when choosing

parent dd41c6a6
...@@ -11,10 +11,33 @@ ...@@ -11,10 +11,33 @@
.a-doc-editor .header { .a-doc-editor .header {
overflow: auto;
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 3px; padding: 3px;
cursor:default cursor:default;
}
.a-doc-editor .dropdown-list {
display: none;
position: absolute;
z-index: 100;
background-color: #f5f5f5;
padding: 5px;
border-radius: 5px;
height: 300px;
overflow: auto;
}
.a-doc-editor .dropdown-list.show {
display: block;
}
.a-doc-editor .dropdown-list .dropdown-option{
padding: 10px;
border-radius: 5px;
}
.a-doc-editor .dropdown-list .dropdown-option:hover{
background: #91d8bd;
}
.a-doc-editor .header .option-bar{
display:flex;
} }
.a-doc-editor .header .option{ .a-doc-editor .header .option{
border-bottom: 1px solid rgba(0, 0, 0, 0.137); border-bottom: 1px solid rgba(0, 0, 0, 0.137);
......
...@@ -18,6 +18,7 @@ var ADocEditor = function (customConfig) { ...@@ -18,6 +18,7 @@ var ADocEditor = function (customConfig) {
var footerComponent = null var footerComponent = null
var leftSidebar = null var leftSidebar = null
var rightSidebar = null var rightSidebar = null
var fontFamily = null;
var fontFamilyDropdown = null var fontFamilyDropdown = null
var fontList = [] var fontList = []
var defaultConfig = { var defaultConfig = {
...@@ -74,6 +75,7 @@ var ADocEditor = function (customConfig) { ...@@ -74,6 +75,7 @@ var ADocEditor = function (customConfig) {
x: config.format.margin, x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4), y: config.format.margin + (3 * config.style.fontSize / 4),
previousCaret: null, previousCaret: null,
style: { ...dataSet[0].style },
} }
var renderInProgress = false; var renderInProgress = false;
...@@ -101,25 +103,19 @@ var ADocEditor = function (customConfig) { ...@@ -101,25 +103,19 @@ var ADocEditor = function (customConfig) {
<div class="a-doc-editor" id="${mainComponentId}"> <div class="a-doc-editor" id="${mainComponentId}">
<div class="header" id="${headerComponentId}"> <div class="header" id="${headerComponentId}">
<div class="option-bar"> <div class="option-bar">
<span class="option">File</span> <div class="option">File</div>
<span class="option">Edit</span> <div class="option">Edit</div>
<span class="option">Insert</span> <div class="option">Help</div>
<span class="option">Help</span>
</div> </div>
<div class="option-bar"> <div class="option-bar">
<span class="option">Search</span> <div class="option">File</div>
<span class="option">Undo</span> <div class="option">File</div>
<span class="option">Redo</span> <div class="option">File</div>
<span class="option">Heading</span> <div class="option">
<span class="option"> <div class="dropdown-label" adc-target="#${fontFamilyDropdownId}"></div>
<select id="${fontFamilyDropdownId}"></select> <div class="dropdown-list" id="${fontFamilyDropdownId}" adc-type="dropdown"></div>
</span> </div>
<span class="option">Font Size</span>
<span class="option">Bold</span>
<span class="option">Italic</span>
<span class="option">Undeline</span>
<span class="option">Font Color</span>
<span class="option">Highlight Color</span>
</div> </div>
</div> </div>
<div class="body"> <div class="body">
...@@ -203,9 +199,12 @@ var ADocEditor = function (customConfig) { ...@@ -203,9 +199,12 @@ var ADocEditor = function (customConfig) {
mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => { mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
rightSidebar.classList.toggle('hide') rightSidebar.classList.toggle('hide')
}) })
fontFamily = container.querySelector(`[adc-target="#${fontFamilyDropdownId}"]`)
bindGlobalEvents()
fontFamilyDropdown = document.getElementById(fontFamilyDropdownId) fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
fontFamilyDropdown.addEventListener('change', changeFontFamily) fontFamilyDropdown.addEventListener('click', changeFontFamily)
reRenderFontDropdown() reRenderFontDropdown()
} }
...@@ -574,8 +573,7 @@ var ADocEditor = function (customConfig) { ...@@ -574,8 +573,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 = fontFamily.innerText
caretData.style.fontFamily = fontFamilyDropdown.value
caretData.activeData.formatedText[caretData.index] = { ...caretData.style } caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
...@@ -838,13 +836,18 @@ var ADocEditor = function (customConfig) { ...@@ -838,13 +836,18 @@ var ADocEditor = function (customConfig) {
// // 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 if (e){
caretData.style.fontFamily = e.target.innerText
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.innerText
}
}else{
let labels = container.querySelectorAll(`[adc-target="#${fontFamilyDropdown.id}"]`)
labels.forEach( item => item.innerText = caretData.style.fontFamily )
} }
} }
...@@ -853,12 +856,51 @@ var ADocEditor = function (customConfig) { ...@@ -853,12 +856,51 @@ var ADocEditor = function (customConfig) {
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('div')
optionTag.setAttribute('adc-type', 'option')
optionTag.setAttribute('class', 'dropdown-option')
optionTag.setAttribute('value', font.name) optionTag.setAttribute('value', font.name)
optionTag.innerHTML = font.name optionTag.style.fontFamily = font.name
optionTag.value = font.name
optionTag.innerText = font.name
fontFamilyDropdown.append(optionTag) fontFamilyDropdown.append(optionTag)
}) })
} }
changeFontFamily()
}
function bindGlobalEvents(){
let options = container.querySelectorAll('[adc-target]')
options.forEach( option=>{
let target = container.querySelector(option.getAttribute('adc-target'))
option.innerText = target?.children?.[0]?.innerText?target?.children?.[0]?.innerText:''
} )
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=> {
item.innerText = e.target.innerText
} )
closeAllExcept()
}else{
let target = container.querySelector(e.target.getAttribute('adc-target'))
closeAllExcept(target)
}
function closeAllExcept(except){
let dropdownLists = container.querySelectorAll('[adc-type="dropdown"]')
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