diff options
Diffstat (limited to 'rannak/mangud/uliopilane')
-rw-r--r-- | rannak/mangud/uliopilane/utlused/index.html | 2 | ||||
-rw-r--r-- | rannak/mangud/uliopilane/utlused/main.js | 136 | ||||
-rw-r--r-- | rannak/mangud/uliopilane/utlused/utlused.css | 11 |
3 files changed, 12 insertions, 137 deletions
diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html index 3619059..54c9548 100644 --- a/rannak/mangud/uliopilane/utlused/index.html +++ b/rannak/mangud/uliopilane/utlused/index.html @@ -79,7 +79,7 @@ </div> <div class="empty "> - <div class="drag draggable" draggable="true" style="color: #141414;" id="lauristin"> Marju Lauristin </div> + <div class="drag draggable" draggable="true" style="color: #F28C28;" id="lauristin"> Marju Lauristin </div> </div> diff --git a/rannak/mangud/uliopilane/utlused/main.js b/rannak/mangud/uliopilane/utlused/main.js index 07b8d27..653fb54 100644 --- a/rannak/mangud/uliopilane/utlused/main.js +++ b/rannak/mangud/uliopilane/utlused/main.js @@ -5,20 +5,8 @@ document.addEventListener('DOMContentLoaded', () => { -// 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"); @@ -91,127 +79,3 @@ if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { } // 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 diff --git a/rannak/mangud/uliopilane/utlused/utlused.css b/rannak/mangud/uliopilane/utlused/utlused.css index 41b2ad0..3d967a9 100644 --- a/rannak/mangud/uliopilane/utlused/utlused.css +++ b/rannak/mangud/uliopilane/utlused/utlused.css @@ -168,3 +168,14 @@ button:disabled{ .draggable.dragged:hover { opacity: 0.1; } + + + + +/* Responssivness */ + +@media screen and (min-width: 1600px) { + .container { + margin-top: 4% !important; + } +} |