From ef579db4b6e27e79076e60ab2ad4fd73c7250653 Mon Sep 17 00:00:00 2001
From: Bar Hatsor <34835685+barhatsor@users.noreply.github.com>
Date: Wed, 14 Oct 2020 09:10:00 +0300
Subject: [PATCH] Update main.js

---
 main.js | 235 +++++++++++++++++++++++++++-----------------------------
 1 file changed, 114 insertions(+), 121 deletions(-)

diff --git a/main.js b/main.js
index ebd3915..8e827ab 100644
--- a/main.js
+++ b/main.js
@@ -1,75 +1,27 @@
-function makeDraggable(dragItem) {
-  var active = false;
-  var click = false;
-  var currentX;
-  var currentY;
-  var initialX;
-  var initialY;
-  var xOffset = 20;
-  var yOffset = 20;
+var relWidth = 80/document.querySelector('.canvas').clientWidth;
+var relHeight = 80/document.querySelector('.canvas').clientHeight;
 
-  dragItem.addEventListener("touchstart", dragStart, false);
-  dragItem.addEventListener("touchend", dragEnd, false);
-  dragItem.addEventListener("touchmove", drag, false);
-
-  dragItem.addEventListener("mousedown", dragStart, false);
-  dragItem.addEventListener("mouseup", dragEnd, false);
-  dragItem.addEventListener("mousemove", drag, false);
-
-  function dragStart(e) {
-    xOffset = x[currentIndex];
-    yOffset = y[currentIndex];
-
-    if (e.type === "touchstart") {
-      initialX = e.touches[0].clientX - xOffset;
-      initialY = e.touches[0].clientY - yOffset;
-    } else {
-      initialX = e.clientX - xOffset;
-      initialY = e.clientY - yOffset;
-    }
-
-    active = true;
-    click = true;
-  }
-
-  function dragEnd(e) {
-    initialX = currentX;
-    initialY = currentY;
-
-    active = false;
-
-    if (click == true) {
-      console.log('staticClick');
-    }
-  }
-
-  function drag(e) {
-    if (active) {
-      e.preventDefault();
-
-      if (e.type === "touchmove") {
-        currentX = e.touches[0].clientX - initialX;
-        currentY = e.touches[0].clientY - initialY;
-      } else {
-        currentX = e.clientX - initialX;
-        currentY = e.clientY - initialY;
-      }
-
-      xOffset = currentX;
-      yOffset = currentY;
+window.onresize = function() {
+	relWidth = 80/document.querySelector('.canvas').clientWidth;
+  relHeight = 80/document.querySelector('.canvas').clientHeight;
+}
 
-      dragItem.style.left = currentX + 'px';
-      dragItem.style.top = currentY + 'px';
+function moveElem(e) {
+	window.onbeforeunload = function() {
+		return 'Close window?';
+	};
+	
+	var currentX = e.clientX - 55;
+  var currentY = e.clientY - 105;
 
-      x[currentIndex] = currentX;
-      y[currentIndex] = currentY;
+	document.querySelector('.draggable').style.left = currentX + 'px';
+  document.querySelector('.draggable').style.top = currentY + 'px';
 
-      document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.left = currentX / 10 + 'px';
-      document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.top = currentY / 10 + 'px';
+  x[currentIndex] = currentX;
+  y[currentIndex] = currentY;
 
-      click = false;
-    }
-  }
+  document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.left = relWidth * currentX + 'px';
+  document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.top = relHeight * currentY + 'px';
 }
 
 var x = [20];
@@ -77,7 +29,7 @@ var y = [20];
 
 var currentIndex = 0;
 
-function open(index) {
+function openFrame(index) {
   currentIndex = index;
 
   document.querySelector('.draggable').style.left = x[currentIndex] + 'px';
@@ -96,15 +48,9 @@ function open(index) {
   document.querySelectorAll('.frame')[currentIndex].classList.add('open');
 }
 
-document.querySelectorAll('.frame').forEach(function(el, i) {
-  el.addEventListener('click', e => {
-    open(i);
-  })
-})
-
 function create(htmlStr) {
   var frag = document.createDocumentFragment(),
-    temp = document.createElement('div');
+      temp = document.createElement('div');
   temp.innerHTML = htmlStr;
   while (temp.firstChild) {
     frag.appendChild(temp.firstChild);
@@ -124,14 +70,14 @@ function playFrame() {
     }
     if (document.querySelector('.play').classList.contains('playing')) {
       window.setTimeout(function() {
-        open(currentIndex+1);
+        openFrame(currentIndex+1);
         playFrame();
       }, settings.delay*1000)
     }
     else {
       window.setTimeout(function() {
         document.querySelector('.draggable').style.transition = '';
-        open(startFrame);
+        openFrame(startFrame);
       }, settings.delay*1000)
     }
   }
@@ -140,20 +86,22 @@ function playFrame() {
     if (currentIndex < x.length-1) {
       if (document.querySelector('.play').classList.contains('playing')) {
         window.setTimeout(function() {
-          open(currentIndex+1);
+          openFrame(currentIndex+1);
           playFrame();
         }, settings.delay*1000)
       }
       else {
         window.setTimeout(function() {
           document.querySelector('.draggable').style.transition = '';
-          open(startFrame);
+          openFrame(startFrame);
         }, settings.delay*1000)
       }
     }
     else {
-    	document.querySelector('.draggable').style.transition = '';
-      document.querySelector('.play').classList.remove('playing');
+      window.setTimeout(function() {
+        document.querySelector('.draggable').style.transition = '';
+     		 document.querySelector('.play').classList.remove('playing');
+      }, settings.delay*1000)
     }
   }
 }
@@ -166,8 +114,9 @@ function exportAnimation() {
   
 @keyframes `+settings.name.replaceAll(' ', '-')+` {`;
   for (var i = 0; i < x.length; i++) {
-    out += `
-  `+100 / (x.length-1) * i + `% {
+  var percent = x.length > 1 ? 100 / (x.length-1) * i + `%` : `to`;
+  out += `
+  `+percent+` {
     top: `+y[i]+`px;
     left: `+x[i]+`px;
   }`;
@@ -176,6 +125,69 @@ function exportAnimation() {
 }`);
 }
 
+function deleteAnimation() {
+  document.querySelector('.sidebar').innerHTML = '<div class="frame open" onclick="openFrame(0)"><div class="frame-wrapper"><div class="frame-el"></div></div>';
+  settings.name = 'Untitled Animation';
+  document.querySelector('.logo span').innerHTML = settings.name;
+  x = [20];
+  y = [20];
+  openFrame(0);
+}
+
+function importAnimation() {
+	deleteAnimation();
+  
+  var code = document.querySelector('.main .code').innerText;
+  document.querySelector('.main .code').innerText = '';
+  
+  var notabs = code.replaceAll(/  /g,'');
+  var lineArray = notabs.match(/[^\r\n]+/g);
+    
+  settings.name = lineArray[0].replace('@keyframes ', '').replace(' {', '').replaceAll('-', ' ');
+  document.querySelector('.logo span').innerHTML = settings.name;
+
+	for (var i = 0; i < lineArray.length; i++) {
+		lineArray[i] = lineArray[i].replace(/\s/g, '');
+  }
+
+  var topPos = [];
+  var leftPos = [];
+  for (var i = 0; i < lineArray.length; i++) {
+    var property = lineArray[i].substr(0, lineArray[i].indexOf(';'));
+    if (property != '') {
+      if (property.startsWith('top:')) {
+        topPos.push(Number(property.replace('top:', '').replace('px', '')));
+      }
+      if (property.startsWith('left:')) {
+        leftPos.push(Number(property.replace('left:', '').replace('px', '')));
+      }
+    }
+  }
+  
+  x = leftPos;
+  y = topPos;
+  
+  document.querySelector('.sidebar').innerHTML = '';
+  
+  for (var i = 0;i < x.length; i++) {
+  	document.querySelector('.sidebar').innerHTML += '<div class="frame"><div class="frame-wrapper"><div class="frame-el"></div></div></div>';
+    document.querySelectorAll('.frame')[i].children[0].children[0].style.left = relWidth * x[i] + 'px';
+    document.querySelectorAll('.frame')[i].children[0].children[0].style.top = relHeight * y[i] + 'px';
+  }
+  
+  document.querySelectorAll('.frame').forEach(function(el, i) {
+    el.addEventListener('click', e => {
+      openFrane(i);
+    })
+  })
+  
+  openFrame(0);
+  
+  document.querySelector('.main').classList.add('hidden');
+  document.querySelector('.upload-wrapper').classList.add('hidden');
+  document.querySelector('.title-wrapper').classList.remove('hidden');
+}
+
 function copy(text) {
   var textArea = document.createElement("textarea");
   textArea.value = text;
@@ -207,23 +219,17 @@ document.querySelector('.add').addEventListener('click', e => {
   x.splice(currentIndex, 0, x[currentIndex - 1]);
   y.splice(currentIndex, 0, y[currentIndex - 1]);
 
-  var frame = create('<div class="frame open" style="opacity:0"><div class="frame-wrapper"><div class="frame-el"></div></div></div>');
+  var frame = create('<div class="frame open" style="opacity:0" onclick="openFrame('+currentIndex+')"><div class="frame-wrapper"><div class="frame-el"></div></div></div>');
   insertAfter(document.querySelector('.sidebar').children[currentIndex - 1], frame);
   window.setTimeout(function() {
-    document.querySelectorAll('.frame')[currentIndex].style.opacity = 1;
+  	document.querySelectorAll('.frame')[currentIndex].style.opacity = 1;
     document.querySelectorAll('.frame')[currentIndex].scrollIntoView({behavior: "smooth"});
     
-    document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.left = x[currentIndex - 1] / 10 + 'px';
-      document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.top = y[currentIndex - 1] / 10 + 'px';
+    document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.left = relWidth * x[currentIndex - 1] + 'px';
+      document.querySelectorAll('.frame')[currentIndex].children[0].children[0].style.top = relHeight * y[currentIndex - 1] + 'px';
       
-    open(currentIndex);
+    openFrame(currentIndex);
   }, 0);
-
-  document.querySelectorAll('.frame').forEach(function(el, i) {
-    el.addEventListener('click', e => {
-      open(i);
-    })
-  })
 })
 
 document.querySelector('.remove').addEventListener('click', e => {
@@ -231,12 +237,9 @@ document.querySelector('.remove').addEventListener('click', e => {
     x.splice(currentIndex, 1);
     y.splice(currentIndex, 1);
 
-    document.querySelectorAll('.frame')[currentIndex].style.opacity = 0;
-    open(currentIndex - 1);
-    window.setTimeout(function() {
-      document.querySelectorAll('.frame')[currentIndex + 1].remove();
-      document.querySelectorAll('.frame')[currentIndex].scrollIntoView({behavior: "smooth"});
-    }, 200);
+    openFrame(currentIndex - 1);
+    document.querySelectorAll('.frame')[currentIndex + 1].remove();
+    document.querySelectorAll('.frame')[currentIndex].scrollIntoView({behavior: "smooth"});
   }
 })
 
@@ -253,6 +256,10 @@ document.querySelector('.play').addEventListener('click', e => {
 })
 
 document.querySelector('.save').addEventListener('click', e => {
+	window.onbeforeunload = null;
+	
+	document.querySelector('.prompt').innerHTML = '<div class="title"> <p>Export</p> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="close" onclick="document.querySelector(\'.prompt-wrapper\').classList.toggle(\'open\')"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"></path></svg> </div> <a>Place this code somewhere in your website for a fully fledged animation.</a> <br> <span>HTML (or any element with class <span class="code name" style="padding: 2px">---</span>)</span> <div class="code" onclick="copy(this.innerText);this.classList.toggle(\'copy\')"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" class="copy"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"></path></svg>&lt;div class="<span class="name">---</span>"&gt;&lt;/div&gt;</div> <span>CSS</span> <div class="code export" onclick="copy(this.innerText);this.classList.toggle(\'copy\')"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" class="copy"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"></path></svg></div> </div>'
+
 	document.querySelector('.prompt-wrapper').classList.add('open');
   document.querySelectorAll('.name').forEach(name => {
   	name.innerHTML = settings.name.replaceAll(' ', '-');
@@ -261,32 +268,18 @@ document.querySelector('.save').addEventListener('click', e => {
 })
 
 document.querySelector('.new').addEventListener('click', e => {
-  document.querySelector('.sidebar').style.right = '-110px';
-  window.setTimeout(function() {
-    document.querySelector('.sidebar').innerHTML = '<div class="frame open"><div class="frame-wrapper"><div class="frame-el"></div></div>';
-    document.querySelector('.sidebar').style.right = '';
-    x = [20];
-    y = [20];
-    open(0);
-  }, 200);
+	document.querySelector('.prompt').innerHTML = '<div class="content-wrapper"> <div class="title"> <p>Are you sure?</p> </div> <a>This will delete the current animation.</a><div class="buttons"><div class="button second" onclick="document.querySelector(\'.prompt-wrapper\').classList.toggle(\'open\')">No</div><div class="button" onclick="deleteAnimation();document.querySelector(\'.prompt-wrapper\').classList.toggle(\'open\')">Yes</div></div></div>';
+  
+  document.querySelector('.prompt-wrapper').classList.add('open');
 })
 
-function closeWindow() {
-	if (confirm('Close window?')) {
-    close();
-  }
-}
-
-window.onbeforeunload = function() {
-  return 'Close window?';
-};
-
 var settings = {
 	name: 'Untitled Animation',
 	delay: 0.25,
 	replay: false
 };
 
-makeDraggable(document.querySelector('.draggable'));
-
-open(0);
+var down = false;
+document.querySelector('.canvas').onmousedown = function(e) { down = true };
+document.querySelector('.canvas').onmouseup = function(e) { down = false };
+document.querySelector('.canvas').onmousemove = function(e) { if (down) { moveElem(e) } };