Commit 6398a96e by ramdayalmunda

font color option added on toolbar

parent 35ca9764
......@@ -53,7 +53,23 @@
.a-doc-editor .header .option input{
width: 25px;
}
.a-doc-editor .header .option .font-color{
display: flex;
flex-direction: column;
text-align: center;
}
.a-doc-editor .header .option .color-bar{
display: block;
width: 20px;
height: 8px;
background-color: green;
}
.a-doc-editor .header .option .font-color input{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.a-doc-editor .header .option:hover{
padding: 1px;
background-color: white;
......
......@@ -22,6 +22,8 @@ var ADocEditor = function (customConfig) {
var fontFamilyDropdown = null
var fontList = []
var fontSize;
var fontColor;
var fontColorLabel;
var fullScreenLoadingOverlay;
var defaultConfig = {
......@@ -121,6 +123,14 @@ var ADocEditor = function (customConfig) {
<button adc-action="font-size-plus">+</button>
</div>
<div class="option">
<div class="font-color">
<span>A</span>
<span class="color-bar" adc-label="font-color"></span>
<input type="color" adc-action="font-color">
</div>
</div>
</div>
</div>
<div class="body">
......@@ -210,6 +220,9 @@ var ADocEditor = function (customConfig) {
reRenderFontDropdown()
fontSize = container.querySelector('[adc-action="font-size-set"]')
fontColor = container.querySelector('[adc-action="font-color"]')
fontColor.addEventListener('input', changeFontColor)
fontColorLabel = container.querySelector('[adc-label="font-color"]')
fullScreenLoadingOverlay = document.createElement('div')
fullScreenLoadingOverlay.innerText = 'Loading...'
......@@ -588,6 +601,7 @@ var ADocEditor = function (customConfig) {
e.preventDefault()
caretData.style.fontFamily = fontFamily.innerText
caretData.style.fontSize = Number(fontSize.value)
caretData.style.fontColor = fontColor.value
caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
......@@ -853,9 +867,7 @@ var ADocEditor = function (customConfig) {
if (e) {
caretData.style.fontFamily = e.target.innerText
caretData.styleModified = false
if (lastFocusCanvas) {
lastFocusCanvas.focus({ preventScroll: true })
}
focusLastCanvas()
if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontFamily = e.target.innerText
}
......@@ -868,15 +880,29 @@ var ADocEditor = function (customConfig) {
function changeFontSize(change){
fontSize.value = change
caretData.style.fontSize = change
if (lastFocusCanvas) {
lastFocusCanvas.focus({ preventScroll: true })
}
focusLastCanvas()
if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontSize = change
}
}
function changeFontColor(e){
fontColorLabel.style.backgroundColor = e.target.value
caretData.style.fontColor = e.target.value
focusLastCanvas()
if (!caretData.activeData.plainContent.length) {
caretData.activeData.style.fontColor = e.target.value
}
}
function focusLastCanvas(){
if (!lastFocusCanvas) lastFocusCanvas = canvasList[0].el
if (lastFocusCanvas) {
lastFocusCanvas.focus({ preventScroll: true })
}
}
function reRenderFontDropdown() {
if (fontFamilyDropdown) {
......@@ -904,6 +930,8 @@ var ADocEditor = function (customConfig) {
option.innerText = target?.children?.[0]?.innerText ? target?.children?.[0]?.innerText : ''
})
fontSize.value = caretData.style.fontSize
fontColor.value = caretData.style.fontColor
fontColorLabel.style.backgroundColor = caretData.style.fontColor
container.addEventListener('click', (e) => {
if (e.target.getAttribute('adc-type') == 'option') {
......
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