350 lines
9 KiB
HTML
350 lines
9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
|
</head>
|
|
<style>
|
|
* {
|
|
font-family: sans;
|
|
box-sizing:border-box;
|
|
}
|
|
body,html{
|
|
background-color:#ffa;
|
|
margin:0;
|
|
padding:0;
|
|
width:100vw;
|
|
height:100vh;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.infinityScroll{
|
|
height:50vh;
|
|
overflow:scroll;
|
|
position:relative;
|
|
}
|
|
|
|
/* disable pinch-zoom*/
|
|
:root {
|
|
touch-action: pan-x pan-y;
|
|
height: 100%
|
|
}
|
|
|
|
.monthview {
|
|
background-color:rgba(255,255,255,0.5);
|
|
border:2px solid rgba(0,0,0,0.5);
|
|
border-radius: 10%;
|
|
margin:5px;
|
|
min-height: 20vw;
|
|
/*margin:5px;*/
|
|
/* scroll-snap-align: center;*/
|
|
overflow:hidden;
|
|
transition: all 0s ease-in-out;
|
|
}
|
|
|
|
.weekview {
|
|
background-color:rgba(255,255,255,0.5);
|
|
border:2px solid rgba(0,0,0,0.5);
|
|
border-radius: 10%;
|
|
margin:5px;
|
|
min-height: 20vw;
|
|
/*margin:5px;*/
|
|
/* scroll-snap-align: center;*/
|
|
overflow:hidden;
|
|
transition: all 0s ease-in-out;
|
|
}
|
|
|
|
.dayview {
|
|
background-color:rgba(255,255,255,0.5);
|
|
border:2px solid rgba(0,0,0,0.5);
|
|
border-radius: 10%;
|
|
margin:5px;
|
|
min-height: 20vw;
|
|
/*margin:5px;*/
|
|
/* scroll-snap-align: center;*/
|
|
overflow:hidden;
|
|
transition: all 0s ease-in-out;
|
|
}
|
|
|
|
.dayview > .label{
|
|
background-color:#a44;
|
|
color:#ffa;
|
|
padding:.2cm;
|
|
font-size:.7cm;
|
|
text-align:center;
|
|
}
|
|
.label{
|
|
background-color:#a44;
|
|
color:#fff;
|
|
font-size:1cm;
|
|
text-align:center;
|
|
}
|
|
|
|
.monthview > .days{
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.weekview > .days{
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
.dayview > .hours{
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.hours > div {
|
|
text-align:center;
|
|
height: 2cm;
|
|
align:content;
|
|
border:1px solid grey;
|
|
}
|
|
|
|
.days div {
|
|
text-align:center;
|
|
height: 2cm;
|
|
align:content;
|
|
border:1px solid grey;
|
|
}
|
|
|
|
.weekend{
|
|
color:red;
|
|
background-color:white;
|
|
}
|
|
|
|
#settingsDiv{
|
|
background-color: #faa;
|
|
position: absolute;
|
|
top:0;
|
|
left:300vw;
|
|
height:100vh;
|
|
overflow:scroll;
|
|
}
|
|
#daysDiv{
|
|
/*background: linear-gradient(white,#aaf);*/
|
|
background-color: #afa;
|
|
position: absolute;
|
|
top:0;
|
|
left:200vw;
|
|
|
|
}
|
|
#weeksDiv{
|
|
/*background: linear-gradient(white,#aaf);*/
|
|
background-color: #aaf;
|
|
position: absolute;
|
|
top:0;
|
|
left:100vw;
|
|
|
|
}
|
|
#settingsDiv,#daysDiv, #weeksDiv, #monthsDiv{
|
|
box-sizing:border-box;
|
|
margin:0;
|
|
scroll-snap-align: start;
|
|
height:100vh;
|
|
overflow:scroll;
|
|
margin:0;
|
|
width:100vw;
|
|
}
|
|
|
|
|
|
.orig{
|
|
box-shadow: 0 0 10px grey;
|
|
}
|
|
|
|
#all{
|
|
scroll-snap-type: x mandatory;
|
|
width:100vw;
|
|
overflow-x:scroll;
|
|
overflow-y:hidden;
|
|
height:100vh;
|
|
position:relative;
|
|
}
|
|
|
|
|
|
</style>
|
|
<body>
|
|
<div id="all">
|
|
<div id="monthsDiv" class="infinityScroll"></div>
|
|
<div id="weeksDiv" class="infinityScroll"></div>
|
|
<div id="daysDiv" class="infinityScroll"></div>
|
|
<div id="settingsDiv">
|
|
<button style="padding:1cm;font-size:1cm;margin:1cm;" onclick='window.counti=window.counti|| 1; window.counti++;preout.textContent+="\n"+myJavaScriptInterface.androidNotification("message"+Date.now(),"title",window.counti);'>test notification</button>
|
|
<pre id="preout"></pre>
|
|
</div>
|
|
<
|
|
</div>
|
|
|
|
<script>
|
|
|
|
//firstMon = new Date(Date.UTC(2017,0,4)); firstMon.setUTCDate(firstMon.getUTCDate()-((firstMon.getUTCDay()+6)%7));
|
|
Date.prototype.getWeekNumber = function(){
|
|
var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
|
|
var dayNum = d.getUTCDay() || 7;
|
|
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
|
|
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
|
|
return Math.ceil((((d - yearStart) / 86400000) + 1)/7)
|
|
};
|
|
|
|
window.addEventListener("load",()=>{
|
|
// document.body.innerHTML="fuck";
|
|
// alert("this is shit");
|
|
// debugger;
|
|
var locale = window.navigator.userLanguage || window.navigator.language || "en";
|
|
|
|
function createMonthView(date = new Date()){
|
|
var monthviewDiv = document.createElement("div")
|
|
monthviewDiv.className = "monthview";
|
|
var labelDiv = document.createElement("div");
|
|
labelDiv.textContent = date.toLocaleString(locale,{"month":"long","year":"numeric"})
|
|
labelDiv.className = "label"
|
|
monthviewDiv.appendChild(labelDiv);
|
|
var daysDiv = document.createElement("div");
|
|
daysDiv.className="days";
|
|
monthviewDiv.appendChild(daysDiv);
|
|
var day = new Date(date);
|
|
day.setDate(1);
|
|
while(day.getMonth() == date.getMonth()){
|
|
var dayDiv = document.createElement("div");
|
|
dayDiv.className = "day";
|
|
var column = day.getDay() || 7;
|
|
column = column == 0 ? 7: column;
|
|
if(column>=6){
|
|
dayDiv.classList.add("weekend");
|
|
}
|
|
dayDiv.style.gridColumn = column;
|
|
dayDiv.textContent = day.getDate();
|
|
daysDiv.appendChild(dayDiv);
|
|
day.setDate(day.getDate()+1);
|
|
}
|
|
return monthviewDiv;
|
|
}
|
|
|
|
function createMonthViewItem(index){
|
|
var mdate = new Date();
|
|
mdate.setMonth(mdate.getMonth()+index);
|
|
var monthViewItem=createMonthView(mdate);
|
|
monthViewItem.nnindex=index;
|
|
return monthViewItem;
|
|
}
|
|
|
|
function createWeekView(date = new Date()){
|
|
var weekviewDiv = document.createElement("div")
|
|
weekviewDiv.className = "weekview";
|
|
var labelDiv = document.createElement("div");
|
|
labelDiv.innerHTML = date.toLocaleString(locale,{"month":"long","year":"numeric"})+"<br>KW "+date.getWeekNumber();
|
|
labelDiv.className = "label"
|
|
weekviewDiv.appendChild(labelDiv);
|
|
var daysDiv = document.createElement("div");
|
|
daysDiv.className="days";
|
|
weekviewDiv.appendChild(daysDiv);
|
|
var day = new Date(date);
|
|
day.setDate(day.getDate()-(day.getDay()+6)%7);
|
|
for(var i=0;i<7;i++)
|
|
{
|
|
var dayDiv = document.createElement("div");
|
|
dayDiv.className = "day";
|
|
var column = day.getDay();
|
|
column = column == 0 ? 7: column;
|
|
if(column>=6){
|
|
dayDiv.classList.add("weekend");
|
|
}
|
|
//dayDiv.style.gridColumn = column;
|
|
dayDiv.textContent = day.getDate()
|
|
daysDiv.appendChild(dayDiv);
|
|
day.setDate(day.getDate()+1);
|
|
}
|
|
return weekviewDiv;
|
|
}
|
|
|
|
function createWeekViewItem(index){
|
|
var mdate = new Date();
|
|
mdate.setDate(mdate.getDate()+7*index);
|
|
var weekViewItem=createWeekView(mdate);
|
|
weekViewItem.nnindex=index;
|
|
return weekViewItem;
|
|
}
|
|
|
|
|
|
function createDayView(date = new Date()){
|
|
var dayviewDiv = document.createElement("div")
|
|
dayviewDiv.className = "dayview";
|
|
var labelDiv = document.createElement("div");
|
|
labelDiv.innerHTML = date.toLocaleString(locale,{"day":"numeric","month":"long","year":"numeric"})
|
|
labelDiv.className = "label"
|
|
dayviewDiv.appendChild(labelDiv);
|
|
var hoursDiv = document.createElement("div");
|
|
hoursDiv.className="hours";
|
|
dayviewDiv.appendChild(hoursDiv);
|
|
for(var hour=0;hour<24;hour+=2)
|
|
{
|
|
var hourDiv = document.createElement("div");
|
|
hourDiv.className = "hour";
|
|
hourDiv.textContent = ("0"+hour).slice(-2)+":00";
|
|
hoursDiv.appendChild(hourDiv);
|
|
}
|
|
return dayviewDiv;
|
|
}
|
|
|
|
function createDayViewItem(index){
|
|
var mdate = new Date();
|
|
mdate.setDate(mdate.getDate()+index);
|
|
var dayViewItem=createDayView(mdate);
|
|
dayViewItem.nnindex=index;
|
|
return dayViewItem;
|
|
}
|
|
|
|
|
|
function makeInfinityScroll(element,createItem){
|
|
var item;
|
|
//setup initial set of items
|
|
for(var i = -3; i< 3; i++){
|
|
item = createItem(i);
|
|
element.appendChild(item);
|
|
}
|
|
element.children[3].scrollIntoView({block:"center"});
|
|
// setup "infinity" scroll handling
|
|
element.addEventListener("scroll",()=>{
|
|
if(element.scrollUpdateSchedule!=1){
|
|
element.scrollUpdateSchedule=1;
|
|
requestAnimationFrame(()=>{
|
|
element.scrollUpdateSchedule=0;
|
|
if(element.scrollTop < 3* element.clientHeight)
|
|
{
|
|
var firstElementChildIndex = element.firstElementChild.nnindex || 0
|
|
item = createItem(firstElementChildIndex - 1);
|
|
element.insertBefore(item,element.firstElementChild);
|
|
|
|
while(element.scrollHeight>50*element.clientHeight){
|
|
element.lastElementChild.remove();
|
|
}
|
|
}
|
|
if(element.scrollTop > element.scrollHeight - 4* element.clientHeight)
|
|
{
|
|
var lastElementChildIndex = element.lastElementChild.nnindex || 0
|
|
item = createItem(lastElementChildIndex + 1);
|
|
element.appendChild(item)
|
|
|
|
while(element.scrollHeight>50*element.clientHeight){
|
|
element.firstElementChild.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},false);
|
|
}
|
|
|
|
makeInfinityScroll(document.querySelector("#monthsDiv"),createMonthViewItem);
|
|
makeInfinityScroll(document.querySelector("#weeksDiv"),createWeekViewItem);
|
|
makeInfinityScroll(document.querySelector("#daysDiv"),createDayViewItem);
|
|
|
|
},false);
|
|
|
|
window.addEventListener("error",(error)=>{ document.body.innerHTML = "<h1>error</h1><pre>" + error.filename + "\nline:" + error.lineno + "\n"+error.message +"</pre>"; },false);
|
|
</script>
|
|
</body>
|
|
</html>
|