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

SECTION MOVE & DRAG AND DROP QN -SV

Browse Source
This commit is contained in:
Sharath 2023-10-20 15:00:31 +05:30
parent 40ef91d150
commit b3b83c0eee
2 changed files with 385 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

430
addform.html
View File

@ -342,6 +342,90 @@
</style>
<style>
/* Styles for the overlay background */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* Initial opacity set to 0 */
transition: background-color 0.3s; /* Add a transition effect for smooth opacity change */
z-index: 1;
}
/* Styles for the popup container */
.popup {
display: none;
position: fixed;
background-color: #c8c8cb;
width: 30%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
z-index: 2;
font-size: larger;
}
.popupbox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 10px;
border-radius: 8px;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.popupbox p{margin: 0;}
.popup-save{
display: flex;
justify-content: flex-end;
}
.popup-save button{
border-radius: 5px;
border-color:#eee;
}
.popupbox q{
align-items: center;
margin-bottom: 16px;
padding: 10px;
border-radius: 8px;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
</style>
<style>
.dropdown {
position: relative;
display: inline-block;
padding:20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 56px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right:12px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
@ -410,6 +494,8 @@
<!-- QuestionPapper Start -->
<div class="row section QuestionPaperClass" id="QuestionPaper">
<!-- QuestionPapper Title Start-->
<div class="question-papper-title element" style="border-top: solid; margin-bottom: 15px;">
@ -500,6 +586,21 @@
<!-- QuestionPapper Container End -->
</div>
<!-- The overlay background -->
<div class="overlay " id="overlay"></div>
<!-- The popup container -->
<div class="popup " id="popup">
<ul id="output" class="">
<div style="margin-bottom: 9px;">Reorder sections</div>
</ul>
<div class="popup-save">
<button onclick="saveFile()" id="closePopupButton">Save</button>
</div>
<!-- <button id="closePopupButton">Close</button> -->
</div>
<div class="copy-right-area">
<div class="copy-left">
@ -574,6 +675,9 @@
<script>
var sidebarWrapper = document.getElementById("questionPaper");
function clearSidebarWrapper() {
@ -715,7 +819,7 @@ function loadXML(xmlFileName) {
}
// Function for Save the XML File
function saveFile() {
function saveFile(flag=0) {
html2json();
json2xml();
@ -725,8 +829,13 @@ function saveFile() {
}else{
const newFileName = FileName.split(".")[0];
savexml(newFileName);
//if 1 it is used for re-order and redirect to the qn paper itself
if (flag=1){
savexml(newFileName,reorder=true);
//if 0 it is used as nrml save which will redierect to dashboard
}else{
savexml(newFileName);
}
}
};
@ -856,6 +965,7 @@ function addSection(title = false, description = false, random_no = false, secti
i = i + 1;
addsection +=
`
<div id="reorder_${sectionRandomID}">
<div class="section-heading">
<i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i>
&nbsp; <!-- Add a space character here -->
@ -864,10 +974,21 @@ function addSection(title = false, description = false, random_no = false, secti
<input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}">
<div class="section restrict-drop" id="section_${sectionRandomID}" >
<div class="sectionTitle" id="section_title_${random_no == false ? text_field_created_time : random_no}">
<div class="nodrop col-lg-12 col-md-12">
<div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" >
<div class="items align-items-center hideondrag" style="display: block;">
<div class="dropdown " id="toggle-menu">
<i class="fa fa-ellipsis-v" style="font-size:20px" aria-hidden="true"></i>
<div class="dropdown-content">
<button id="popupid_${sectionRandomID}" class="showPopupButton">Move</button>
</div>
</div>
</div>
<div class="row" style="text-align:right; width: 100%">
<div class="col-lg-10 col-md-12">
<div class=" button-group align-items-center">
<div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}">
@ -932,6 +1053,7 @@ function addSection(title = false, description = false, random_no = false, secti
</div>
</div>
</div>
</div>
`;
var formContainer = document.getElementById('addNewSection');
@ -945,7 +1067,14 @@ function addSection(title = false, description = false, random_no = false, secti
var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID;
document.getElementById('popupid_'+sectionRandomID).addEventListener('click', function() {
// alert("dd")
// const popup = document.getElementById('popup');
// popup.style.display = 'block';
executeScriptAndDisplayOutput()
});
$('#'+addNewButtonId).on('click', function() {
$('#'+SectionButtonId).toggle();
@ -2532,62 +2661,118 @@ function removeClonedQroupQuestion(index)
let draggedItemGroup = null;
let draggedItemQuestion = null;
let dropTarget = null;
let richTextElements = null;
let questionLabels = null;
// Event listener for .draggable-group elements
document.addEventListener('mousedown', function (e) {
const dragHandle = e.target.closest('.drag-handle');
// Event listener for .drag-handle elements within questions
document.addEventListener('mousedown', function (e) {
const dragHandle = e.target.closest('.drag-handle');
if (dragHandle) {
// If the click is inside a drag handle, find the corresponding .draggable-group
const draggableGroup = dragHandle.closest('.draggable-group');
if (dragHandle) {
// If the click is inside a drag handle, find the corresponding .question
const questionElement = dragHandle.closest('.question');
if (draggableGroup) {
// Initiate the drag operation for the .draggable-group
draggedItemGroup = draggableGroup;
if (questionElement) {
console.log("draggHandle:",dragHandle);
// Initiate the drag operation for the .question
draggedItemQuestion = questionElement;
// Add a dragStart event listener to set data
draggedItemGroup.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', draggedItemGroup.id);
// console.log(draggedItemGroup.id);
// Hide all elements with class "hideondrag"
richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = 'none';
});
});
}
}
});
// Add a dragStart event listener to set data
draggedItemQuestion.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
console.log(draggedItemQuestion.id);
// Event listener for .question elements
document.addEventListener('mousedown', function (e) {
const dragHandle = e.target.closest('.drag-handle');
if (dragHandle) {
// If the click is inside a drag handle, find the corresponding .question
const questionElement = dragHandle.closest('.question');
});
}
}
});
if (questionElement) {
// Initiate the drag operation for the .question
draggedItemQuestion = questionElement;
// document.addEventListener('mousedown', function (e) {
// const dragHandle = e.target.closest('.drag-handle');
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .question
// const questionElement = dragHandle.closest('.groupsection');
// if (questionElement) {
// console.log("draggHandle:",dragHandle);
// // Initiate the drag operation for the .question
// draggedItemQuestion = questionElement;
// // Add a dragStart event listener to set data
// draggedItemQuestion.addEventListener('dragstart', function (e) {
// e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
// console.log(draggedItemQuestion.id);
// });
// }
// }
// });
// document.addEventListener('mousedown', function (e) {
// const dragHandle = e.target.closest('.drag-handle');
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .question
// const questionElement = dragHandle.closest('.groupsection>.question');
// if (questionElement) {
// console.log(questionElement);
// console.log("draggHandle:",dragHandle);
// // Initiate the drag operation for the .question
// draggedItemQuestion = questionElement;
// // Add a dragStart event listener to set data
// draggedItemQuestion.addEventListener('dragstart', function (e) {
// e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
// console.log(draggedItemQuestion.id);
// });
// }
// }
// });
// // Event listener for .draggable-group elements
// document.addEventListener('mousedown', function (e) {
// const dragHandle = e.target.closest('.drag-handle');
// if(groupqnornot){
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .draggable-group
// const draggableGroup = dragHandle.closest('.draggable-group');
// console.log("draggableGroup:",draggableGroup);
// if (draggableGroup) {
// console.log("draggHandle:",dragHandle);
// // Initiate the drag operation for the .draggable-group
// draggedItemGroup = draggableGroup;
// // Add a dragStart event listener to set data
// draggedItemGroup.addEventListener('dragstart', function (e) {
// e.dataTransfer.setData('text/plain', draggedItemGroup.id);
// console.log(draggedItemGroup.id);
// // // Hide all elements with class "hideondrag" in the group
// // const richTextElements = document.querySelectorAll('.hideondrag');
// // richTextElements.forEach((element) => {
// // element.style.display = 'none';
// // });
// });
// }
// }
// }
// });
// Add a dragStart event listener to set data
draggedItemQuestion.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
// Hide all elements with class "hideondrag"
richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = 'none';
});
});
}
}
});
document.addEventListener('dragover', function (e) {
// groupqnornot = true;
// Hide all elements with class "hideondrag" in the question
const richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = 'none';
});
e.preventDefault();
// Allow scrolling while dragging
@ -2619,13 +2804,12 @@ function removeClonedQroupQuestion(index)
if (dropTarget) {
dropTarget.classList.remove('highlight');
}
if (dropTarget.classList.contains('nodrop')) {
// Remove the highlight class when leaving the drop target
dropTarget.classList.remove('highlight');
}
if (dropTarget.classList.contains('nodrop')) {
// Remove the highlight class when leaving the drop target
dropTarget.classList.remove('highlight');
}
});
document.addEventListener('dragend', function () {
// Remove the highlight class from all .draggable-group and .question elements
const highlightedElements = document.querySelectorAll('.draggable-group, .question');
@ -2633,20 +2817,13 @@ function removeClonedQroupQuestion(index)
element.classList.remove('highlight');
});
// Show all elements with class "hideondrag" again for .draggable-group
if (richTextElements) {
richTextElements.forEach((element) => {
element.style.display = '';
});
}
// Show all elements with class "hideondrag" again for .question
if (richTextElements) {
richTextElements.forEach((element) => {
element.style.display = '';
});
}
const richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = '';
});
// Reset variables
dropTarget = null;
draggedItemGroup = null;
draggedItemQuestion = null;
@ -2680,6 +2857,7 @@ function removeClonedQroupQuestion(index)
} else {
console.error('No dragged item or drop target found.');
}
});
</script>
@ -2730,5 +2908,127 @@ function removeClonedQroupQuestion(index)
}
</script>
<script>
// Function to execute the script and display its output in the popup
function executeScriptAndDisplayOutput() {
// Display the popup with the output
const popup = document.getElementById('popup');
popup.style.display = 'block';
// alert('hi');
// Sample JSON data with section names and section IDs
const jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
const reorderpop = document.getElementById('output');
const addsection= document.querySelector('#addNewSection'); // Replace with your actual right list ID
console.log("addsection:",addsection);
// Function to add a section name to the left side
function addSectionName(section) {
v=section.section_title;
// // Remove <p> and </p> tags from the HTML content
v = v.replace(/<p>|<\/p>/g, '');
console.log("v",v);
if (v === '<br>') {
// If the innerHTML is empty, add sample text
v = 'untitled'
// console.log("v",v);
}
console.log("v",v);
const reorderpop_item = document.createElement('li');
// Set the inner HTML of the list item to the section title
reorderpop_item.innerHTML = v;
reorderpop_item.classList.add('reorder-item');
reorderpop_item.classList.add('popupbox');
// Set the "id" attribute with the updated value from JSON data
reorderpop_item.id = 'reorder_' + section.section_id;
const buttons = document.createElement('span');
buttons.innerHTML = `
<span class="fa fa-chevron-up up-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
<span class="fa fa-chevron-down down-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
`;
reorderpop_item.appendChild(buttons);
reorderpop.appendChild(reorderpop_item);
}
// Populate the left side with section names and IDs from JSON data
jsonData.sections.forEach(section => {
addSectionName(section);
});
// Add event listeners to handle reordering
reorderpop.addEventListener('click', (e) => {
if (e.target.classList.contains('up-icon')) {
console.log("up");
const reorderpop_item = e.target.parentElement.parentElement;
const prevItem = reorderpop_item.previousElementSibling;
console.log("reorderpop_item:",reorderpop_item);
console.log("prevItem:",prevItem);
if (prevItem) {
reorderpop.insertBefore(reorderpop_item, prevItem);
// Remove the "reorder_" prefix from the ID
const originalId = reorderpop_item.id;
console.log("originalId",originalId);
const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
console.log("idWithoutPrefix",idWithoutPrefix);
// Get the corresponding element in the right list
const item_to_be_reorderd = document.getElementById('reorder_' +idWithoutPrefix);
console.log("item_to_be_reorderd",item_to_be_reorderd);
// Find the previous element in the right list to determine where to insert
const prevItemInRightSide = item_to_be_reorderd.previousElementSibling;
console.log("prevItemInRightSide",prevItemInRightSide);
// Move the element to the right list
addsection.insertBefore(item_to_be_reorderd, prevItemInRightSide);
}
} else if (e.target.classList.contains('down-icon')) {
console.log("down");
const reorderpop_item = e.target.parentElement.parentElement;
const nextItem = reorderpop_item.nextElementSibling;
console.log("reorderpop_item:",reorderpop_item);
console.log("nextItem:",nextItem);
if (nextItem) {
reorderpop.insertBefore(nextItem, reorderpop_item);
// Add code to update the corresponding element in the right list if needed
const originalId = reorderpop_item.id;
console.log("originalId",originalId);
const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
console.log("idWithoutPrefix",idWithoutPrefix);
const item_to_be_reorderd = document.getElementById('reorder_' + idWithoutPrefix);
console.log("item_to_be_reorderd",item_to_be_reorderd);
const nextItemInRightSide = item_to_be_reorderd.nextElementSibling;
console.log("nextItemInRightSide",nextItemInRightSide);
addsection.insertBefore(nextItemInRightSide,item_to_be_reorderd);
}
}
});
}
// document.getElementById('showPopupButton').addEventListener('click', executeScriptAndDisplayOutput);
// document.getElementById('1').addEventListener('click', function() {
// const popup = document.getElementById('popup');
// popup.style.display = 'none';
// });
// function Sample()
// {
// alert('hi');
// }
</script>
</body>
</html>

20
savexml.js
View File

@ -8,7 +8,7 @@ require('dotenv').config();
//Get the value from .env
const isEncrypted = process.env.ENCRYPTED;
function saveXmlToFile(xmlData, filePath) {
function saveXmlToFile(xmlData, filePath,reorder=false) {
console.log(filePath);
// Check if the file path is provided
if (!filePath) {
@ -31,13 +31,16 @@ function saveXmlToFile(xmlData, filePath) {
}
});
localStorage.clear();
// window.location.href = 'dashboard.html';
if(reorder){
window.location.reload();
}else{
window.location.href = 'dashboard.html';
}
}
function savexml(UserFilename) {
function savexml(UserFilename,reorder=false) {
// Get the XML string from localStorage
var xmlString = localStorage.getItem("xml");
@ -67,8 +70,13 @@ function savexml(UserFilename) {
const xmlfilePath = `${xmlPath}` + xmlfilename;
// const jsonfilePath = process.cwd() + '/xml/' + jsonfilename;
// Call the function to save the XML file
saveXmlToFile(enc, xmlfilePath);
if(reorder){
saveXmlToFile(enc, xmlfilePath,reorder=true);
}else{
// Call the function to save the XML file
saveXmlToFile(enc, xmlfilePath);
}
}