1 files changed, 217 insertions, 0 deletions
diff --git a/rannak/mangud/uliopilane/utlused/main.js b/rannak/mangud/uliopilane/utlused/main.js
new file mode 100644
index 0000000..07b8d27
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/main.js
@@ -0,0 +1,217 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+// Detecting part
+const isMobile = function(){
+    const match = window.matchMedia('(pointer:coarse)');
+    return (match && match.matches)
+}
+console.log(`${isMobile() ? 'mobile' : 'not mobile'}`);
+
+// Global Variables for Mobile
+let originalX = 0;
+let originalY = 0;
+let counter = 0;
+let itemAppend = null;
+
+if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') {
+
+    const draggableElements = document.querySelectorAll(".draggable");
+    const droppableElements = document.querySelectorAll(".droppable");
+    
+    draggableElements.forEach(elem => {
+	elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data
+	// elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged
+	// elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete
+    });
+    
+    droppableElements.forEach(elem => {
+	elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target
+	elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone
+	elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target
+	elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target
+    });
+    
+    // Drag and Drop Functions //
+    
+    //Events fired on the drag target
+    function dragStart(event) {
+	event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value
+    }
+    
+    //Events fired on the drop target
+    function dragEnter(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.target.classList.add("droppable-hover");
+	}
+    }
+    
+    function dragOver(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.preventDefault(); // Prevent default to allow drop
+	}
+    }
+    
+    function dragLeave(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.target.classList.remove("droppable-hover");
+	}
+    }
+    
+    
+    function drop(event) {
+
+	event.preventDefault(); // This is in order to prevent the browser default handling of the data
+	event.target.classList.remove("droppable-hover");
+	const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method
+	const droppableElementData = event.target.getAttribute("data-draggable-id");
+	const isCorrectMatching = draggableElementData === droppableElementData;
+
+	if(isCorrectMatching) {
+	    const draggableElement = document.getElementById(draggableElementData);
+	    event.target.classList.add("dropped");
+	    // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: 
+	    event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color;
+	    draggableElement.classList.add("dragged");
+	    draggableElement.setAttribute("draggable", "false");
+	    event.target.insertAdjacentHTML("afterbegin", `<i class="fas fa-${draggableElementData}"></i>`);
+	    
+	    counter++;
+		console.log("counter:", counter)
+	    if (counter == 6){
+            const btn = document.querySelector(".moveOn");
+            btn.disabled = false;
+            localStorage.setItem("roll", "Üliõpilase");
+            btn.onclick = () => location.href = "../../../endPage";
+	    }
+	} // If isCorrectMatchingEnd
+  }  // Drop Func End
+
+}  // If Desktop End
+
+
+//If mobile
+
+else{
+
+	const empty = Array.from(document.querySelectorAll('.empty'));
+	const drags = document.querySelectorAll('.drag');
+
+	drags.forEach(drag => {
+		drag.addEventListener('pointerdown', pointerDown);
+		drag.addEventListener('pointermove', pointerMove);
+		drag.addEventListener('pointerup', pointerUp);
+	})
+	
+	
+	// Function when start touch
+	function pointerDown(e){
+		e.preventDefault();
+
+		let remVal = parseInt(getComputedStyle(document.documentElement).fontSize);
+		originalTop  =	e.target.getBoundingClientRect().top - 2*remVal;
+		originalLeft =	e.target.getBoundingClientRect().left - remVal;
+	}
+	
+	
+	// Function while movin
+	function pointerMove(e){
+		e.preventDefault();
+
+		//Scrolling Part
+		if (window.innerHeight - e.screenY < 600){
+			window.scrollBy({ 
+				top: 100, // could be negative value
+				behavior: 'smooth' 
+			});
+		}
+		
+		else if (e.clientY < 200){
+			window.scrollBy({ 
+				top: -100, // could be negative value
+				behavior: 'smooth' 
+			});
+		}
+
+		nimi = e.target;
+		if (!nimi.classList.contains('done')){
+			
+			nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`;
+			nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`;
+			
+			empty.map(item => {
+				if (
+					nimi.getBoundingClientRect().top    + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom &&
+						nimi.getBoundingClientRect().right  - nimi.offsetWidth / 2 > item.getBoundingClientRect().left &&
+						nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top &&
+						nimi.getBoundingClientRect().left   + nimi.offsetWidth / 2 < item.getBoundingClientRect().right
+				) {
+					item.classList.add('active');
+					itemAppend = item;
+				}
+				else {
+					item.classList.remove('active');
+				}
+			}); //empty.map loop end
+		} 
+		
+		// if currentDrag has class done
+		else{
+			console.log("has class done")
+		}
+		
+	}
+	
+	
+	// Function if touch is stopped
+	function pointerUp(e){
+		e.preventDefault();
+
+		if (itemAppend != null){
+			
+			if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) {
+				this.classList.add('done')
+				this.parentElement.classList.add('done')
+				itemAppend.classList.add('done');
+				itemAppend.classList.remove('active');
+				
+				this.style.top = `${originalTop}px`;
+				this.style.left = `${originalLeft}px`;
+				//this.innerHTML="";
+				
+				counter++;
+				console.log("counter:", counter)
+				if (counter == 6){
+                    const btn = document.querySelector(".moveOn");
+                    btn.disabled = false;
+                    btn.onclick = () => location.href = "#";
+				}
+				
+			}
+			else {
+				
+				this.style.top = `${originalTop}px`;
+				this.style.left = `${originalLeft}px`;
+				this.parentElement.appendChild(this);
+				itemAppend.classList.remove('active');
+			}
+		}
+		else {
+			this.style.top = `${originalTop}px`;
+			this.style.left = `${originalLeft}px`;
+			console.log("FakAp");
+		}  // PointerUp Func End
+
+		window.scroll({ 
+			top: 0,
+			left: 0, 
+			behavior: 'smooth' 
+		});
+	}
+
+
+} // If mobile End