first commit

BadUI/ScientificDatePicker/logic.js

@@ -0,0 +1,116 @@
+/*
+  The formula I use is not the scientifically best formula.
+  If you want more correct result use Kepler’s laws.
+  Also I use center of circumcircle of ellipse because
+  orbit of the earth is not too much ellipse, it's almost a circle
+  and Sun is almost in the middle of the circle, you can use center of ellipse
+*/
+
+"use strict"
+
+const earth = document.getElementById("earth")
+const dateButton = document.getElementById("date")
+const datePicker = document.getElementById("datePicker")
+const ellipse = document.getElementById("ellipse")
+
+var isPressing = false
+
+const earthSize = 15
+const horizontalRadius = 150
+const verticalRadius = 73
+const horizontalMargin = 25
+const verticalMargin = 10
+
+var today = new Date()
+var year = today.getFullYear()
+var start = new Date(today.getFullYear(), 0, 0)
+var diff = today - start
+const oneDay = 1000 * 60 * 60 * 24
+var dayNumber = Math.floor(diff / oneDay)
+var date = dateFromDay(dayNumber)
+dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth()+1) + "/" + date.getFullYear()
+
+var angle = 2*Math.asin(((dayNumber-1)/(182.5 + (isLeapyear()?0.5:0)))-1)
+var x = horizontalRadius*Math.cos(angle)
+var y = verticalRadius*Math.sin(angle)
+
+earth.setAttribute("x",horizontalRadius + x - earthSize/2 + horizontalMargin)
+earth.setAttribute("y",verticalRadius - y - earthSize/2 + verticalMargin)
+
+
+earth.addEventListener("mousedown", mousedown)
+earth.addEventListener("touchstart", mousedown)
+
+addEventListener("mousemove", mousemove)
+addEventListener("touchmove", mousemove)
+
+addEventListener("mouseup", mouseup)
+addEventListener("touchend", mouseup)
+
+
+var dateButtonRect = dateButton.getBoundingClientRect()
+datePicker.style.top = dateButtonRect.height + "px"
+datePicker.style.right = 0
+dateButton.style.height = dateButtonRect.height + "px"
+
+function mousedown(e) {
+  isPressing = true
+}
+
+function mousemove(e) {
+  if(!isPressing)
+    return
+  
+  const { clientX, clientY } = e.touches != null ? e.touches[0] : e
+  
+  const rect = ellipse.getBoundingClientRect()
+  const ellipseCenterX = rect.x + rect.width/2 + horizontalMargin
+  const ellipseCenterY = rect.y + rect.height/2 + verticalMargin
+  angle = Math.atan2(ellipseCenterY - clientY, clientX - ellipseCenterX)
+
+  let x = horizontalRadius*Math.cos(angle)
+  let y = verticalRadius*Math.sin(angle)
+
+  earth.setAttribute("x", horizontalRadius + x - earthSize/2 + horizontalMargin)
+  earth.setAttribute("y", verticalRadius - y - earthSize/2 + verticalMargin)
+
+  let oldDate = date
+
+  var dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((angle)/2) + 1) + 1)
+
+  date = dateFromDay(dayNumber)
+
+  if(oldDate.getDate() == 1 && oldDate.getMonth() == 0 && date.getDate() == 31 && date.getMonth() == 11){
+    year--
+  }else if(oldDate.getDate() == 31 && oldDate.getMonth() == 11 && date.getDate() == 1 && date.getMonth() == 0){
+    year++
+  }
+  
+  dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((angle)/2)+1)+1)
+  date = dateFromDay(dayNumber)
+
+  if(date.getTime() > today.getTime()){
+    dateButton.children[0].classList.add("future")
+    dateButton.children[0].innerText = "Fuck you Kyle Reese" // We don't like time travelers!
+  }else{
+    dateButton.children[0].classList.remove("future")
+    dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth() + 1) + "/" + date.getFullYear()
+  }
+}
+
+function dateFromDay(day){
+  var date = new Date(year, 0)
+  return new Date(date.setDate(day))
+}
+
+function mouseup(e) {
+  isPressing = false
+}
+
+function addZero(num){
+  return num<10?"0"+num:num
+}
+
+function isLeapyear(){
+  return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0)
+}