7pm 27 july

NurAktar · Jul 27, 2024 · a0c6248 · a0c6248
1 parent 3cfcc9a
commit a0c6248
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 9 deletions.
diff --git a/desktop b/desktop
@@ -0,0 +1,2 @@
+f1 0,0
+f2 0,1
diff --git a/dragable.js b/dragable.js
@@ -40,4 +40,73 @@ function dragElement(elmnt) {
     document.onmouseup = null;
     document.onmousemove = null;
   }
+}
+
+
+
+
+
+// Make the icon element draggable:
+function dragIcon(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0,eposX = 0, eposY = 0;
+  elmnt.onmousedown = dragMouseDown;
+
+  function dragMouseDown(e) {
+    e = e;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    eposX = elmnt.offsetLeft;
+    eposY = elmnt.offsetTop;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement(e) {
+    // stop moving when mouse button is released:
+    document.onmouseup = null;
+    document.onmousemove = null;
+    //fit icon to grid area
+    console.log(Math.floor((elmnt.offsetLeft-pos1)/80));
+    console.log(Math.floor((elmnt.offsetTop - pos2)/70));
+    elmnt.style.top = Math.floor((e.clientY)/70)*70 + "px";
+    elmnt.style.left = Math.floor((e.clientX)/80)*80 + "px";
+    //testing
+    //elmnt.style.top = (eposY) + "px";
+    //elmnt.style.left = (eposX) + "px";
+  }
+}
+
+const iconNumber = document.getElementsByClassName("icon-container").length;
+let column = Math.ceil(iconNumber/(Math.floor((document.body.scrollHeight-30)/70)));
+let row = Math.floor((document.body.scrollHeight-30)/70);
+console.log(column);
+console.log(row);
+let temp = 0;
+for (let c = 0; c < column; c++) {
+  for (let i = 1; i <= row; i++) {
+    if(i==1){
+      document.getElementById("f"+(i+temp)).style.top = 4+"px";
+    }
+    else{
+      document.getElementById("f"+(i+temp)).style.top = 70*(i-1)+"px";
+    }
+    document.getElementById("f"+(i+temp)).style.left = 80*c+"px";
+  }
+  temp = temp + row;
 }
diff --git a/main-style.css b/main-style.css
@@ -20,6 +20,7 @@ body{
 }
 .icon-container{
     display: flex;
+    position: absolute;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
@@ -227,4 +228,4 @@ body{
 }
 .box:hover{
     box-shadow: 0px 0px 10px -3px;
-}
+}
diff --git a/main.html b/main.html
@@ -23,11 +23,47 @@
             <div class="item">Open in Terminal</div>
             <div class="item">Properties</div>
         </div>
-        <div id="f1" ondblclick="dblclicked_icon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+        <div id="f1" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
             <div class="icon-img" style="background-image: url('image/icon/blue/user-home.ico')"></div>
             <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Home" disabled id="icon_text" class="icon-text">
         </div>
-        <div id="f2" ondblclick="dblclicked_icon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+        <div id="f2" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f3" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f4" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f5" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f6" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f7" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f8" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f9" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f10" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
+            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        </div>
+        <div id="f11" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
             <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
             <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
         </div>

diff --git a/main.js b/main.js
@@ -2,27 +2,33 @@
 var selected_id ="";
 function clicked_icon_field(){
     if(selected_id != ""){
-        document.getElementById(selected_id).style = "background-color:none;";
+        document.getElementById(selected_id).style.backgroundColor = "transparent";
         selected_id = "";
     }
 }
 function clicked_icon(e){
     id = e.id;
-    document.getElementById(id).style="background-color:#ffffff5b;";
+    document.getElementById(id).style.backgroundColor="#ffffff5b";
     selected_id = id;
 }
 function icon_text(e){
-    // id = e.id;
-    // document.getElementById(id).ariaDisabled='True';
+    id = e.id;
+    // alert(id)
+    document.getElementById(id).ariaDisabled='True';
     // alert("clicked");
-    // setTimeout(function run(){alert("hi")},1000);
-    // document.getElementById(id).disabled="false";
+    setTimeout(function run(){
+        document.getElementById(id).disabled="false";
+    },1000);
+
 }
 function enter(event){
     if(event.keyCode === 13){
         id=event.target.id;
         document.getElementById(id).blur();
     }
+    if(event.keyCode === 113){
+        alert("f2");
+    }
 }
 document.addEventListener("dblclick",function(e){e.preventDefault()})