WORK AREA-SV
This commit is contained in:
Sharath
parent
0d655d7898
commit
52fefb53d7
413
addform.html
413
addform.html
@ -56,9 +56,10 @@
|
||||
<script src="./node_modules/quill-resize-module/dist/resize.js"></script>
|
||||
<link rel="stylesheet" href="./node_modules/quill-resize-module/dist/resize.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
<style>
|
||||
|
||||
/* body { */
|
||||
@ -168,6 +169,7 @@
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
|
||||
|
||||
math-field{
|
||||
border-radius: 6px;
|
||||
font-size:18px;
|
||||
@ -182,7 +184,7 @@
|
||||
float: right;
|
||||
text-align: -webkit-right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -240,7 +242,7 @@
|
||||
|
||||
#sidebar-wrapper {
|
||||
min-height: 100vh;
|
||||
flex-basis:20%;
|
||||
flex-basis:21%;
|
||||
width:300px;
|
||||
margin-left: -15rem;
|
||||
transition: margin 0.25s ease-out;
|
||||
@ -357,6 +359,37 @@
|
||||
color: #bf303b;
|
||||
/* background: #bf303b; */
|
||||
}
|
||||
.work-area{
|
||||
background-color: transparent;
|
||||
position: fixed;
|
||||
top:81px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
border-radius: 15%; /* Make the button round */
|
||||
width: 40px; /* Set the width and height of the button */
|
||||
height: 40px;
|
||||
transition: box-shadow 0.3s, background-color 0.3s;
|
||||
color: #bf303b;
|
||||
|
||||
}
|
||||
.work-area1{
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top:-8px;
|
||||
left:-18px;
|
||||
border-width:0;
|
||||
transform:rotate(58deg);
|
||||
transition: box-shadow 0.3s, background-color 0.3s;
|
||||
color: #bf303b;
|
||||
|
||||
}
|
||||
.work-area1::before{
|
||||
content: '\2BC7';
|
||||
font-size: 24px;
|
||||
}
|
||||
.work-area::before{
|
||||
content:'\2630';
|
||||
}
|
||||
.menu-symbol {
|
||||
position:absolute;
|
||||
right:0;
|
||||
@ -391,8 +424,6 @@
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
/* Styles for the overlay background */
|
||||
.overlay {
|
||||
@ -536,15 +567,133 @@ h1.title{
|
||||
font-weight: 400;
|
||||
color: #1d3557;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
z-index: 2;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 20px;
|
||||
color: white;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#messages {
|
||||
max-height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#messageForm {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.message{
|
||||
position: relative;
|
||||
right: 85px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebarToggle2 {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: -7px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-right: 0;
|
||||
transition: margin-right 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-open .content {
|
||||
margin-right: 250px;
|
||||
}
|
||||
|
||||
.sidebar::before {
|
||||
content: '\2BC7'; /* Unicode character for the close arrow (adjust as needed) */
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.work-area::before {
|
||||
content: '\2BC7'; /* Unicode character for the open arrow (adjust as needed) */
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.worksection.ql-snow {
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
border-top: 1px solid #ccc !important;
|
||||
}
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
text-align: left !important;
|
||||
color: black;
|
||||
}
|
||||
.sendMessageButton{
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
padding: 2px 0px;
|
||||
text-transform: capitalize;
|
||||
transition: 0.5s;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
/* margin-top: 5px; */
|
||||
/* background: linear-gradient(to right,#533dfd,#730fd5); */
|
||||
background: linear-gradient(to right,darkred, #BF303B);
|
||||
border: none;
|
||||
/* margin-right: 15px; */
|
||||
width: 85px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- loder -->
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader"></div>
|
||||
@ -568,6 +717,7 @@ h1.title{
|
||||
<li><a href="dashboard.html"><img class="addPageMenu" src="assets/images/home.svg" alt="">Home</a></li>
|
||||
<li><a href="#" class="myBtn" onclick="saveFile()" id="SaveButton"><img class="addPageMenu" src="assets/images/save.svg" alt="">Save</a></li>
|
||||
<li><a href="#" id="editPreview" ><img class="addPageMenu" src="assets/images/preview.svg" alt="">Preview</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -577,6 +727,7 @@ h1.title{
|
||||
</div>
|
||||
|
||||
<button class="menu-symbol1" id="sidebarToggle1"></button>
|
||||
<button class="work-area"id="sidebarToggle2"></button>
|
||||
<!-- QuestionPapper Container start -->
|
||||
<div class="d-flex" id="wrapper">
|
||||
<!-- Sidebar-->
|
||||
@ -587,7 +738,209 @@ h1.title{
|
||||
</div>
|
||||
</div>
|
||||
<!-- sidebar end -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize Quill with your specific configuration
|
||||
var quill = new Quill('#workarea', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: toolbarOptions,
|
||||
clipboard: {
|
||||
matchVisual: true,
|
||||
},
|
||||
ImageResize: {
|
||||
displaySize: true,
|
||||
modules: ['Resize', 'DisplaySize', 'Toolbar']
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
var chat_Div = $("#workarea");
|
||||
var chat_previousDiv = chat_Div.prev();
|
||||
chat_previousDiv.attr("id", "messageInput_rtc");
|
||||
var chatRtc = 'messageInput_rtc';
|
||||
|
||||
$('#workarea').focus(function () {
|
||||
rtc_hide_and_show(chatRtc);
|
||||
});
|
||||
|
||||
document.getElementById('sidebarToggle2').addEventListener('click', function () {
|
||||
var sidebar = document.getElementById('rightSidebar');
|
||||
document.body.classList.toggle('sidebar-open');
|
||||
if (sidebar.style.width === '250px') {
|
||||
sidebar.style.width = '0';
|
||||
} else {
|
||||
sidebar.style.width = '250px';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('sidebarToggle3').addEventListener('click', function () {
|
||||
var sidebar = document.getElementById('rightSidebar');
|
||||
document.body.classList.toggle('sidebar-open');
|
||||
if (sidebar.style.width === '250px') {
|
||||
sidebar.style.width = '0';
|
||||
} else {
|
||||
sidebar.style.width = '250px';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('sendMessageButton').addEventListener('click', function () {
|
||||
sendMessage(quill);
|
||||
});
|
||||
|
||||
document.getElementById('workarea').addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
sendMessage(quill);
|
||||
}
|
||||
});
|
||||
|
||||
// Add Math functionality
|
||||
var mathCheckbox = document.getElementById('Choicemath_messageInput');
|
||||
var mathField = document.getElementById('workarea_math');
|
||||
var richText = document.getElementById('workarea');
|
||||
// Ensure MathQuill field is initially hidden
|
||||
$(mathField).hide();
|
||||
// $(richText1).show();
|
||||
mathCheckbox.addEventListener('change', function () {
|
||||
if (mathCheckbox.checked) {
|
||||
$(mathField).show();
|
||||
$(richText).hide();
|
||||
rtc_hide_and_show(chatRtc);
|
||||
} else {
|
||||
$(mathField).hide();
|
||||
$(richText).show();
|
||||
rtc_hide_and_show(chatRtc);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize Math Field
|
||||
var mathFieldId = 'workarea_math';
|
||||
var mathFieldDiv = document.getElementById(mathFieldId);
|
||||
var mathFieldPreviousDiv = $(mathFieldDiv).prev();
|
||||
var mathRTEId = "workarea_math_rtc";
|
||||
mathFieldPreviousDiv.attr("id", mathRTEId);
|
||||
|
||||
mathFieldDiv.addEventListener('click', function () {
|
||||
var id = localStorage.getItem('rtc');
|
||||
var hideid = document.getElementById(id);
|
||||
$(hideid).hide();
|
||||
$(mathFieldPreviousDiv).show();
|
||||
localStorage.setItem('rtc', mathRTEId);
|
||||
});
|
||||
$(mathFieldPreviousDiv).hide();
|
||||
});
|
||||
|
||||
async function sendMessage(quill) {
|
||||
var workarea = document.getElementById('workarea');
|
||||
var mathField = document.getElementById('workarea_math');
|
||||
var messagesContainer = document.getElementById('messages');
|
||||
console.log("workarea",workarea);
|
||||
console.log("mathField",mathField);
|
||||
console.log("messagesContainer",messagesContainer);
|
||||
|
||||
var content = '';
|
||||
|
||||
// Check if the checkbox is checked
|
||||
if ($('#Choicemath_messageInput').prop('checked')) {
|
||||
// Use MathQuill API to get the math field content
|
||||
var mathFieldContent = mathField.getValue();
|
||||
|
||||
content = await convertToLatex(mathFieldContent);
|
||||
} else {
|
||||
content = quill.root.innerHTML.trim();
|
||||
}
|
||||
|
||||
// Log the content to the console
|
||||
console.log("Message Content: ", content);
|
||||
|
||||
if (content !== '') {
|
||||
|
||||
// var messageElement = document.createElement('div');
|
||||
// messageElement.className = 'message';
|
||||
messagesContainer.innerHTML += content;
|
||||
|
||||
// Append the div to the messagesContainer
|
||||
// messagesContainer.appendChild(messageElement);
|
||||
MathJax.typeset([messagesContainer]);
|
||||
|
||||
if ($('#Choicemath_messageInput').prop('checked')) {
|
||||
// Clear the math field content
|
||||
// mathField.latex('');
|
||||
} else {
|
||||
quill.setText('');
|
||||
}
|
||||
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
}
|
||||
async function convertToLatex(text, mathstatus) {
|
||||
// Parse mathstatus into a boolean
|
||||
const mathStatusBoolean = true
|
||||
// Check if the text contains <p> tags
|
||||
|
||||
console.log("ff")
|
||||
return new Promise(async(resolve, reject) => {
|
||||
|
||||
if (!/<p>|<\/p>/i.test(text)) {
|
||||
console.log('text:' , text)
|
||||
if (mathStatusBoolean) {
|
||||
console.log('text1:' , text)
|
||||
// Use MathJax to convert the text to LaTeX
|
||||
const cov = await MathJax.tex2chtml(text).outerHTML;
|
||||
console.log('cov:' , cov);
|
||||
resolve(cov);
|
||||
//return cov;
|
||||
} else {
|
||||
// Return the text as-is
|
||||
resolve(text);
|
||||
//return text;
|
||||
}
|
||||
} else {
|
||||
console.log("pq")
|
||||
const cov = await MathJax.tex2chtml(text).outerHTML;
|
||||
console.log('cov:' , cov)
|
||||
resolve(cov);
|
||||
//return cov;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="sidebar" id="rightSidebar">
|
||||
<div class="chat-box">
|
||||
<button class="work-area1" id="sidebarToggle3"></button>
|
||||
<h2>Work Area</h2>
|
||||
<div id="messages" class="chat-history" ></div>
|
||||
<form id="messageForm" action="#" method="post" onsubmit="sendMessage(); return false;">
|
||||
<fieldset>
|
||||
<!-- The contentEditable div for Quill -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="richText worksection" id="workarea" contentEditable="true" placeholder="Type your message and press Enter..."></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div>
|
||||
<math-field id="workarea_math" style="width: 100%; " contenteditable="true"></math-field>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-6 items2" style="display: flex; align-items: center;">
|
||||
<input style="width:14px; height:14px; margin-right: 5px;" type="checkbox" id="Choicemath_messageInput"/>
|
||||
<span class="math">Math</span>
|
||||
</div>
|
||||
<div class="col-6" style="display: flex; align-items: center;">
|
||||
<button id="sendMessageButton" class="sendMessageButton" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
@ -779,6 +1132,7 @@ h1.title{
|
||||
|
||||
<!-- RTC Hide and Show Script -->
|
||||
<script src="rtc_hide_and_show.js"></script>
|
||||
<!-- <script src="QuestionPaperPreview.js"></script> -->
|
||||
|
||||
<!-- decrypt -->
|
||||
<script src="decode.js"></script>
|
||||
@ -862,15 +1216,15 @@ $(document).ready(function() {
|
||||
})
|
||||
|
||||
|
||||
$(document).on("click", function (event) {
|
||||
// $(document).on("click", function (event) {
|
||||
|
||||
|
||||
var questionPaperDiv = $(".QuestionPaperClass");
|
||||
if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) {
|
||||
$('.ql-toolbar').hide();
|
||||
}
|
||||
// var questionPaperDiv = $(".QuestionPaperClass");
|
||||
// if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) {
|
||||
// $('.ql-toolbar').hide();
|
||||
// }
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
@ -1062,6 +1416,22 @@ var quill = new Quill('#Question_description', {
|
||||
}
|
||||
});
|
||||
|
||||
// var quill = new Quill('#workarea', {
|
||||
// theme: 'snow',
|
||||
// modules: {
|
||||
// toolbar:{
|
||||
// container:toolbarOptions,
|
||||
// clipboard: {
|
||||
// matchVisual: true,
|
||||
// },
|
||||
// ImageResize:{
|
||||
// displaySize:true,
|
||||
// modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// });
|
||||
|
||||
var quill = new Quill('#ql-editor',{
|
||||
theme:'snow',
|
||||
module:{
|
||||
@ -1093,7 +1463,9 @@ rtc_hide_and_show(setitem);
|
||||
});
|
||||
|
||||
var Question_description_Div = $("#Question_description");
|
||||
console.log("Question_description_Div",Question_description_Div);
|
||||
var Question_description_previousDiv = Question_description_Div.prev();
|
||||
console.log("Question_description_previousDiv",Question_description_previousDiv);
|
||||
Question_description_previousDiv.attr("id", "Question_description_rtc");
|
||||
var questionDescriptionRtc = 'Question_description_rtc';
|
||||
$('#Question_description').focus(function() {
|
||||
@ -1102,6 +1474,13 @@ rtc_hide_and_show(questionDescriptionRtc);
|
||||
|
||||
});
|
||||
|
||||
// var chat_Div = $("#workarea");
|
||||
// var chat_previousDiv = chat_Div.prev();
|
||||
// chat_previousDiv.attr("id", "messageInput_rtc");
|
||||
// var chatRtc = 'messageInput_rtc';
|
||||
// $('#workarea').focus(function() {
|
||||
// rtc_hide_and_show(chatRtc);
|
||||
// });
|
||||
|
||||
var checkboxElement = document.createElement('input');
|
||||
checkboxElement.type = 'checkbox';
|
||||
|
||||
802
package-lock.json
generated
802
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -32,6 +32,7 @@
|
||||
"jquery-ui": "^1.13.2",
|
||||
"jsdom": "^22.1.0",
|
||||
"mathjax": "^3.2.2",
|
||||
"mathjax-node": "^2.1.1",
|
||||
"mathlive": "^0.95.5",
|
||||
"quill": "^1.3.7",
|
||||
"quill-image-resize": "^3.0.9",
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
function rtc_hide_and_show(rtcid) {
|
||||
|
||||
// console.log('show id :'+rtcid)
|
||||
var id = localStorage.getItem('rtc');
|
||||
var hideid = document.getElementById(id);
|
||||
// console.log('hide id :' + id)
|
||||
$(hideid).hide();
|
||||
|
||||
var showid = document.getElementById(rtcid);
|
||||
console.log('hide id :' + id)
|
||||
$(showid).show();
|
||||
localStorage.setItem('rtc',rtcid);
|
||||
|
||||
};
|
||||
|
||||
|
||||
function add_button_hide_and_show(BtnID){
|
||||
|
||||
// console.log('show id :'+BtnID)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user