100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
const DesktopApps = document.querySelectorAll('.windowIcon');
|
|
var AppGrid = null;
|
|
var XtileSize;
|
|
var YtileSize;
|
|
var XTiles;
|
|
var YTiles;
|
|
function SetUp(){
|
|
for (i = 0; i < DesktopApps.length; i++) {
|
|
DragIcon(DesktopApps[i])
|
|
}
|
|
}
|
|
function CalculateGrid(){
|
|
|
|
XtileSize = DesktopApps[0].offsetWidth + (DesktopApps[0].offsetWidth/12);
|
|
YtileSize = DesktopApps[0].offsetHeight + (DesktopApps[0].offsetHeight/12);
|
|
console.log(XtileSize + " " + YtileSize);
|
|
|
|
XTiles = Math.round(innerWidth / XtileSize);
|
|
YTiles = Math.round((innerHeight - document.querySelector('.hotbarWrapper').offsetHeight) / YtileSize);
|
|
console.log(XTiles + " " + YTiles);
|
|
|
|
var iteratorX = 0;
|
|
var iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
|
|
console.log(iteratorY);
|
|
for (i = 0; i < DesktopApps.length; i++) {
|
|
if (iteratorY >= YTiles) {
|
|
iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
|
|
iteratorX++;
|
|
}
|
|
DesktopApps[i].style.top = (((4 + (YtileSize * iteratorY))/innerHeight)*100) + "vh";
|
|
DesktopApps[i].style.left = (((4 + (XtileSize * iteratorX))/innerWidth)*100) + "vw";
|
|
iteratorY++;
|
|
}
|
|
}
|
|
function calculatePosition(AppIcon, startPosX, startPosY) {
|
|
var valid = true
|
|
Xpos = Math.round(AppIcon.offsetLeft / XtileSize);
|
|
Ypos = Math.round(AppIcon.offsetTop / YtileSize);
|
|
for (var j = 0; j < DesktopApps.length; j++) {
|
|
if (DesktopApps[j].offsetLeft === 4 + (Xpos * XtileSize)
|
|
&& DesktopApps[j].offsetTop === 4 + (Ypos * YtileSize)) {
|
|
valid = false;
|
|
}
|
|
}
|
|
if (valid === false) {
|
|
AppIcon.style.top = ((startPosY/innerHeight)*100) + "vh";
|
|
AppIcon.style.left = ((startPosX/innerWidth)*100) + "vw";
|
|
AppIcon.style.left = startPosX + "px";
|
|
AppIcon.style.top = startPosY + "px";
|
|
} else {
|
|
AppIcon.style.top = (((4 + (Ypos * YtileSize))/innerHeight)*100) + "vh";
|
|
AppIcon.style.left = (((4 + (Xpos * XtileSize))/innerWidth)*100) + "vw";
|
|
}
|
|
}
|
|
|
|
function DragIcon(AppIcon){
|
|
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, startposX = AppIcon.offsetLeft, startposY = AppIcon.offsetTop;
|
|
AppIcon.addEventListener('mousedown', mouseDown);
|
|
function mouseDown(e) {
|
|
startposX = AppIcon.offsetLeft;
|
|
startposY = AppIcon.offsetTop;
|
|
AppIcon.style.zIndex = 125;
|
|
e.preventDefault();
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('mouseup', mouseUp);
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
}
|
|
function mouseMove(e){
|
|
e.preventDefault();
|
|
pos1 = pos3 - e.clientX;
|
|
pos2 = pos4 - e.clientY;
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
if (AppIcon.offsetTop < window.innerHeight) {
|
|
AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
|
|
}
|
|
else if( pos2 >= 0){
|
|
AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
|
|
}
|
|
if (AppIcon.offsetLeft + (AppIcon.clientWidth/2) + 3< window.innerWidth) {
|
|
AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
|
|
}
|
|
else if(pos1 >= 0) {
|
|
AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
|
|
}
|
|
}
|
|
function mouseUp(e) {
|
|
document.removeEventListener('mousemove', mouseMove);
|
|
document.removeEventListener('mouseup', mouseUp);
|
|
document.removeEventListener('touchend', mouseUp);
|
|
AppIcon.style.zIndex = 105;
|
|
calculatePosition(AppIcon, startposX, startposY);
|
|
startposX = AppIcon.offsetLeft;
|
|
startposY = AppIcon.offsetTop
|
|
}
|
|
}
|
|
|
|
|