From e4663c28b24e66dada39c8c677d496859479d47c Mon Sep 17 00:00:00 2001
From: aadhavan <aadhavanvalli@gmail.com>
Date: Tue, 12 Dec 2023 09:42:15 +0530
Subject: [PATCH] DRAG&DROP

---
 QuestionPreview.html |  5 +++
 addform.html         | 90 +++++++++++++++++++++++++++++++++++++-------
 html2json.js         |  3 +-
 3 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/QuestionPreview.html b/QuestionPreview.html
index 35baf77..a02654a 100644
--- a/QuestionPreview.html
+++ b/QuestionPreview.html
@@ -51,6 +51,11 @@
 
 	
     <style>
+		.question_Text img{
+			margin-top: 25px;
+		}
+
+
 		.ql-align-right-add{
 			display: flow-root;
 		}
diff --git a/addform.html b/addform.html
index 5ac03cf..f2af17f 100644
--- a/addform.html
+++ b/addform.html
@@ -52,9 +52,22 @@
     <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="./node_modules/mathjax/es5/tex-mml-chtml.js"></script>
+	<link rel="stylesheet" href="assets/css/quillTable.css" type="text/css" media="all" />
 
 	<style>
 		
+		.ql-toolbar .ql-picker.ql-table .ql-picker-item{
+			display: block !important;
+		}
+
+		#ql-picker-options-14{
+			margin: -327px 0px 0px -217px;
+		}
+
+		#ql-picker-options-15{
+			margin: -199px 0px 0px -252px;
+		}
+
 		/* Start custom css for table icon options in RTE editor */
 		.ql-picker.ql-table:nth-of-type(1) .ql-picker-options {
     width: 310px !important;
@@ -875,8 +888,26 @@ var toolbarOptions = [
 					var quill = new Quill('#workarea', {
 						theme: 'snow', 
 						modules: {
-						toolbar: toolbarOptions,
-					}
+							imageResize:{
+								displaySize:true,		
+								modules: [ 'Resize', 'DisplaySize', 'Toolbar' ],
+							},
+							toolbar: {
+							container: toolbarOptions,
+							handlers: {
+								table: function () {
+									// this.quill.getModule('table').insert();
+
+								this.quill.getModule('table').insert();
+								},
+							},
+							},
+							table: {
+							cellSelectionOnClick: true,
+							// Other options for quill1-table module...
+							},
+							keyboard: keyboardOptions,
+						},
 					});
 				
 					var chat_Div = $("#workarea");
@@ -1640,6 +1671,7 @@ function loadXML(xmlFileName) {
 
 // Function for Save the XML File 
 function saveFile(flag=0) {
+	console.log("flag  = ", flag);
     console.log("SaveFile");
 	var title_id = localStorage.getItem('JSON_FOR_EMPTY_QUESTION');
 
@@ -1669,9 +1701,11 @@ function saveFile(flag=0) {
 		const newFileName = FileName.split(".")[0];
 		//if 1 it is used for re-order and redirect to the qn paper itself
 		if (flag==1){
+			// alert("reorder True")
 			savexml(newFileName,reorder=true);
 		//if 0 it is used as nrml save which will redierect to dashboard
 		}else{
+			// alert("reorder Flase")
 			savexml(newFileName);
 		}
 	
@@ -2441,16 +2475,16 @@ function addQuestionGroup(idObj)
 		// console.log(group_question_id);
 
 		addQuestionGroup +=
-		`<div  draggable='true' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
+		`<div  draggable='' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
 			<i id="collapseSubSection_${QuestionGroup_ID}" aria-hidden="true" style=" font-size: 24px; margin-right: 9px; margin-top: 25px;"></i> 
 			<input type="hidden" id="Question_Group_UUID_ID_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.attributes.Id : QuestionGroup_UUID}">
-			<div class="groupsection" draggable='true' id="group_question_${QuestionGroup_ID}">
+			<div class="groupsection" draggable='' id="group_question_${QuestionGroup_ID}">
 				<div class="question-group-linestyle"><img src="assets/images/line2.svg"/></div>
 				<div class="sectionTitle" id="group_question_title_${QuestionGroup_ID}">					
 					<div class="col-lg-12 col-md-12">
 						<div onmouseover="showButtons(this)" id="QuestionGroupButtons_${QuestionGroup_ID}" class="row question element">
-                            <div id="dragHandle" class="drag-handle">
-							<i class="fas fa-grip-horizontal"></i>
+                            <div id="dragHandle" class="drag-handle" >
+							<i class="fas fa-grip-horizontal" draggable="true"></i>
 							</div>
 							<h4 class="QuestionGroup-titleHead">Question Group</h4>
 							<div class="items align-items-center hideondrag">
@@ -2887,10 +2921,10 @@ function groupQuestion(question_id = false, section_id = false , group_question_
 		// console.log(questionIdS);
 		// aa =2
 		groupQuestion += 
-		`<div class="question hidedrag element Question-Border-Top col-lg-12 choiceQuestion" draggable="true"   id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="" onclick="toggleClasses(this); multipleAnswerCheck(this); resetthe_radio(this)" onmouseover="showButtons(this);  ">
+		`<div class="question hidedrag element Question-Border-Top col-lg-12 choiceQuestion" draggable=""   id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="" onclick="toggleClasses(this); multipleAnswerCheck(this); resetthe_radio(this)" onmouseover="showButtons(this);  ">
 			<div class="question-linestyle"><img src="assets/images/${lineImg}"/></div>
 			<div id="dragHandle" class="drag-handle">
-				<i class="fas fa-grip-horizontal"></i>
+				<i class="fas fa-grip-horizontal"  draggable="true"></i>
 			</div>
 			<div class="items hideondrag" style="display: none;">
 				<i onclick="ReArrangeQuestions(event)" class="fa fa-chevron-up up-icon"></i>&nbsp;&nbsp;
@@ -3710,10 +3744,10 @@ var ssa=ss.replace('<p>','').replace('</p>','').replace('<br>','');
 // console.log(ssa);
 
 textQuestion += 
-`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="true"  id="removeAndCloneTextQuestion_${addTextQuestionId}" style="" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
+`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable=""  id="removeAndCloneTextQuestion_${addTextQuestionId}" style="" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
 	<div class="question-linestyle"><img src="assets/images/${lineImg}"/></div>
-	<div id="dragHandle" class="drag-handle">
-		<i class="fas fa-grip-horizontal"></i>
+	<div id="dragHandle" class="drag-handle" >
+		<i class="fas fa-grip-horizontal"  draggable="true"></i>
 	</div>
 
 	<div class="items  align-items-center hideondrag" style="display: none;">
@@ -4682,7 +4716,7 @@ return text;
 
 
 
-<script>
+ <script>
     let draggedItemGroup = null;
     let draggedItemQuestion = null;
     let dropTarget = null;
@@ -4811,7 +4845,10 @@ return text;
 	
         
     });
-</script>
+
+
+
+</script> 
 
 
 <script>
@@ -5296,5 +5333,32 @@ function findInputByValue(value) {
   </script>
 <!-- End the Choice Question Mandatory Check  -->
 
+
+
+  <!-- <script>
+
+	function name(params) {
+		
+		var drags = document.querySelector('.fa-grip-horizontal')
+		var a =drags.parentNode.parentNode
+
+		drags.addEventListener('dragstart', function(event){
+			// a.draggable = true
+
+		})
+
+		drags.addEventListener('dragend', function(event){
+			a.draggable = false
+
+		})
+
+	}
+	setInterval(name, 2000)
+
+	
+	
+  </script> -->
+
+
 </body>
 </html>
diff --git a/html2json.js b/html2json.js
index 905be43..5c16a24 100644
--- a/html2json.js
+++ b/html2json.js
@@ -235,7 +235,7 @@ function html2json() {
 
     $.fn.getSectionData = function(element) {
         // console.log('getSectionData');
-        // console.log(element.id);
+        console.log(element);
         const rand_id = (element.id).split("_").slice(-1)[0];
         // console.log(rand_id);
         // console.log('section_title_text_'+rand_id);
@@ -304,6 +304,7 @@ function html2json() {
     });
 
     console.log((formData));
+    // return false
     // console.log(JSON.stringify(formData, null, 1));
     localStorage.setItem("json", JSON.stringify((formData)));
     console.log(JSON.stringify(formData));