ProjectB/projectb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WORK AREA-SV

Browse Source
This commit is contained in:
Sharath 2023-11-22 10:20:58 +05:30
parent 0d655d7898
commit 52fefb53d7
4 changed files with 1197 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
addform.html
View File

@ -56,9 +56,10 @@
<script src="./node_modules/quill-resize-module/dist/resize.js"></script> <script src="./node_modules/quill-resize-module/dist/resize.js"></script>
<link rel="stylesheet" href="./node_modules/quill-resize-module/dist/resize.css"> <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> <style>
/* body { */ /* body { */
@ -168,6 +169,7 @@
transition: height 0.5s ease; transition: height 0.5s ease;
} }
math-field{ math-field{
border-radius: 6px; border-radius: 6px;
font-size:18px; font-size:18px;
@ -182,7 +184,7 @@
float: right; float: right;
text-align: -webkit-right; text-align: -webkit-right;
} }
</style> </style>
@ -240,7 +242,7 @@
#sidebar-wrapper { #sidebar-wrapper {
min-height: 100vh; min-height: 100vh;
flex-basis:20%; flex-basis:21%;
width:300px; width:300px;
margin-left: -15rem; margin-left: -15rem;
transition: margin 0.25s ease-out; transition: margin 0.25s ease-out;
@ -357,6 +359,37 @@
color: #bf303b; color: #bf303b;
/* background: #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 { .menu-symbol {
position:absolute; position:absolute;
right:0; right:0;
@ -391,8 +424,6 @@
</style> </style>
</style>
<style> <style>
/* Styles for the overlay background */ /* Styles for the overlay background */
.overlay { .overlay {
@ -536,15 +567,133 @@ h1.title{
font-weight: 400; font-weight: 400;
color: #1d3557; color: #1d3557;
padding-bottom: 10px; padding-bottom: 10px;
} }
</style> </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> </head>
<body> <body>
<!-- loder --> <!-- loder -->
<div class="loader-wrapper"> <div class="loader-wrapper">
<div class="loader"></div> <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="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="#" 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> <li><a href="#" id="editPreview" ><img class="addPageMenu" src="assets/images/preview.svg" alt="">Preview</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -577,6 +727,7 @@ h1.title{
</div> </div>
<button class="menu-symbol1" id="sidebarToggle1"></button> <button class="menu-symbol1" id="sidebarToggle1"></button>
<button class="work-area"id="sidebarToggle2"></button>
<!-- QuestionPapper Container start --> <!-- QuestionPapper Container start -->
<div class="d-flex" id="wrapper"> <div class="d-flex" id="wrapper">
<!-- Sidebar--> <!-- Sidebar-->
@ -587,7 +738,209 @@ h1.title{
</div> </div>
</div> </div>
<!-- sidebar end --> <!-- 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"> <div class="container">
@ -779,6 +1132,7 @@ h1.title{
<!-- RTC Hide and Show Script --> <!-- RTC Hide and Show Script -->
<script src="rtc_hide_and_show.js"></script> <script src="rtc_hide_and_show.js"></script>
<!-- <script src="QuestionPaperPreview.js"></script> -->
<!-- decrypt --> <!-- decrypt -->
<script src="decode.js"></script> <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"); // var questionPaperDiv = $(".QuestionPaperClass");
if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) { // if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) {
$('.ql-toolbar').hide(); // $('.ql-toolbar').hide();
} // }
}); // });
document.addEventListener('DOMContentLoaded', function () { 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',{ var quill = new Quill('#ql-editor',{
theme:'snow', theme:'snow',
module:{ module:{
@ -1093,7 +1463,9 @@ rtc_hide_and_show(setitem);
}); });
var Question_description_Div = $("#Question_description"); var Question_description_Div = $("#Question_description");
console.log("Question_description_Div",Question_description_Div);
var Question_description_previousDiv = Question_description_Div.prev(); var Question_description_previousDiv = Question_description_Div.prev();
console.log("Question_description_previousDiv",Question_description_previousDiv);
Question_description_previousDiv.attr("id", "Question_description_rtc"); Question_description_previousDiv.attr("id", "Question_description_rtc");
var questionDescriptionRtc = 'Question_description_rtc'; var questionDescriptionRtc = 'Question_description_rtc';
$('#Question_description').focus(function() { $('#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'); var checkboxElement = document.createElement('input');
checkboxElement.type = 'checkbox'; checkboxElement.type = 'checkbox';

802
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -32,6 +32,7 @@
"jquery-ui": "^1.13.2", "jquery-ui": "^1.13.2",
"jsdom": "^22.1.0", "jsdom": "^22.1.0",
"mathjax": "^3.2.2", "mathjax": "^3.2.2",
"mathjax-node": "^2.1.1",
"mathlive": "^0.95.5", "mathlive": "^0.95.5",
"quill": "^1.3.7", "quill": "^1.3.7",
"quill-image-resize": "^3.0.9", "quill-image-resize": "^3.0.9",

4
rtc_hide_and_show.js
View File

@ -1,18 +1,16 @@
function rtc_hide_and_show(rtcid) { function rtc_hide_and_show(rtcid) {
// console.log('show id :'+rtcid)
var id = localStorage.getItem('rtc'); var id = localStorage.getItem('rtc');
var hideid = document.getElementById(id); var hideid = document.getElementById(id);
// console.log('hide id :' + id) // console.log('hide id :' + id)
$(hideid).hide(); $(hideid).hide();
var showid = document.getElementById(rtcid); var showid = document.getElementById(rtcid);
console.log('hide id :' + id)
$(showid).show(); $(showid).show();
localStorage.setItem('rtc',rtcid); localStorage.setItem('rtc',rtcid);
}; };
function add_button_hide_and_show(BtnID){ function add_button_hide_and_show(BtnID){
// console.log('show id :'+BtnID) // console.log('show id :'+BtnID)