Skip to content

Commit

Permalink
Update main.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@benhatsor
benhatsor authored Oct 14, 2020
1 parent aea69d1 commit ef579db
Showing 1 changed file with 114 additions and 121 deletions.
235 changes: 114 additions & 121 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,35 @@
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];
var y = [20];

var currentIndex = 0;

function open(index) {
function openFrame(index) {
currentIndex = index;

document.querySelector('.draggable').style.left = x[currentIndex] + 'px';
Expand All @@ -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);
Expand All @@ -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)
}
}
Expand All @@ -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)
}
}
}
Expand All @@ -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;
}`;
Expand All @@ -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;
Expand Down Expand Up @@ -207,36 +219,27 @@ 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 => {
if (currentIndex != 0) {
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"});
}
})

Expand All @@ -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(' ', '-');
Expand All @@ -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) } };

0 comments on commit ef579db

Please sign in to comment.