Skip to content

A
a-doc-editor
Commit 44af4271 by ramdayalmunda
Options

added enter event

parent 6ffd5ec8
Showing with 61 additions and 41 deletions
dist/assets/a-doc-editor.js
......@@ -30,8 +30,22 @@ var ADocEditor = function (customConfig) {
}
var config = null;
var canvasList = []
const dataTypes = [
"paragraph",
]
var dataSet = [
{ id: 1, plainContent: "" }
{
id: 1,
type: 0,
plainContent: "",
style: {
fontSize: 28,
fontFamily: 'Arial',
bold: false,
italic: false,
fontColor: "#1e1f77"
}
}
]
var caretData = {
......@@ -46,17 +60,6 @@ var ADocEditor = function (customConfig) {
y: 21,
}
var renderInProgress = false;
var focusedCanvas = false;
var domElement = {
header: {
el: document.createElement('div'),
},
body: {
el: document.createElement('div'),
}
}
function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig }
......@@ -109,7 +112,7 @@ var ADocEditor = function (customConfig) {
</div>
<div class="sidebar-body"></div>
</div>
<div class="right-sidebar hide" id="${rightSidebarId}">
<div class="right-sidebar" id="${rightSidebarId}">
<div class="toggle-sidebar">
<span>&lrarr;</span>
<span>Comments</span>
......@@ -249,6 +252,7 @@ var ADocEditor = function (customConfig) {
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
if (!activeTextData) activeTextData = caretData.activeData.style
let rectX = activeTextData?.x + activeTextData?.width;
let rectY = activeTextData?.y - activeTextData?.fontSize;
rectX = rectX ? rectX : 0
......@@ -270,7 +274,6 @@ var ADocEditor = function (customConfig) {
}
function createCanvas() {
console.log('pageSetup', config.pageSetup)
let canvas = document.createElement('canvas')
canvas.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth
......@@ -319,7 +322,21 @@ var ADocEditor = function (customConfig) {
e.preventDefault()
}
else if (e.keyCode == 13) { // Enter Key
console.log('Enter')
if (caretData){
if (caretData.activeData.type == 0){ // for plain text // just go to next line
let newLineData = {
type: 0,
plainContent: "",
style: JSON.parse( JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length-1]) )
}
newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0
newLineData.style.width = 0
dataSet.push(newLineData)
caretData.activeData = newLineData
caretData.index = 0
}
}
}
else if (e.key.length == 1 || e.keyCode == 32) {
e.preventDefault()
......@@ -371,6 +388,9 @@ var ADocEditor = function (customConfig) {
caretData.index = dataSet[0].plainContent.length
reRenderPages(dataSet)
},
getContent: function (){
return JSON.parse( JSON.stringify( dataSet ) )
}
}
return returnObj
}
......
dist/index.html
......@@ -18,10 +18,14 @@
</head>
<body>
<div class="body"></div>
<p>Click on the canvas and start typing</p>
<p>Click on the canvas and start typing]
<button onclick="extractData()">Extract</button>
<button onclick="setData()">Set Data</button>
</p>
<div id="user-container-for-editor"></div>
<script type="module" src="./script.js"></script>
<script src="./script.js"></script>
</body>
</html>
\ No newline at end of file
dist/randomDataSet.js deleted 100644 → 0
var tempDocData = [
{
id: `1`,
type: "text",
plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
},
// {
// id: `2`,
// type: "text",
// plainContent: "The drug seekers would come into the emergency room and scream about how much pain they were in. When you told them that you would start elevating their pain with Tylenol or Advil instead of a narcotic they became nasty and combative. They would start telling you what drug and dose they had to have to make their pain tolerable.",
// },
]
export {
tempDocData,
}
\ No newline at end of file
dist/script.js
import { tempDocData } from "./randomDataSet.js"
!(async function(){
let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
var editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
function extractData() {
let data = editor.getContent()
console.log(data)
}
function setData() {
var tempDocData = [
{
id: `1`,
type: "text",
plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
},
]
editor.loadContent(tempDocData)
})()
\ No newline at end of file
}
\ No newline at end of file
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