inifinte scroll calender
This commit is contained in:
parent
cdd0ac3531
commit
eef403f0cb
1 changed files with 242 additions and 137 deletions
|
|
@ -5,6 +5,28 @@
|
|||
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
font-family: sans;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
body,html{
|
||||
margin:0;
|
||||
padding:0
|
||||
}
|
||||
|
||||
.infinityScroll{
|
||||
height:50vh;
|
||||
overflow:scroll;
|
||||
border:1px solid red;
|
||||
position:relative;
|
||||
}
|
||||
.space{
|
||||
background:linear-gradient(white, blue);
|
||||
height:300%;
|
||||
opacity:0.5;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
* {
|
||||
font-family: sans;
|
||||
}
|
||||
|
|
@ -20,10 +42,10 @@ body{
|
|||
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;
|
||||
min-height: 20vw;
|
||||
/*margin:5px;*/
|
||||
/* scroll-snap-align: center;*/
|
||||
overflow:hidden;
|
||||
}
|
||||
.label{
|
||||
|
|
@ -32,153 +54,236 @@ body{
|
|||
font-size:10vw;
|
||||
text-align:center;
|
||||
}
|
||||
.weekdays,.days{
|
||||
|
||||
.days{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.weekdays{
|
||||
height: 1cm;
|
||||
}
|
||||
|
||||
.weekdays div, .days div {
|
||||
.days div {
|
||||
text-align:center;
|
||||
height: 2cm;
|
||||
align:content;
|
||||
border:1px solid grey;
|
||||
}
|
||||
|
||||
|
||||
#mainDiv{
|
||||
box-sizing:border-box;
|
||||
margin:0;
|
||||
/* scroll-snap-type: y mandatory;*/
|
||||
height:100vh;
|
||||
overflow:scroll;
|
||||
border: 1px solid red;
|
||||
margin:0;
|
||||
width:100vw;
|
||||
}
|
||||
.orig{
|
||||
|
||||
border: 3px solid blue;
|
||||
}
|
||||
.weekend{
|
||||
color:red;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div style="margin:0;scroll-snap-type: y mandatory;height:90vh;overflow:scroll;border: 1px solid red">
|
||||
<div class="monthview">
|
||||
<div class="label">Februar 2025</div>
|
||||
<div class="weekdays">
|
||||
<div>Mo</div>
|
||||
<div>Di</div>
|
||||
<div>Mi</div>
|
||||
<div>Do</div>
|
||||
<div>Fr</div>
|
||||
<div>Sa</div>
|
||||
<div>So</div>
|
||||
</div>
|
||||
<div class="days">
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="monthview">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mainDiv" class="infinityScroll"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("error",(error)=>{
|
||||
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||
error.filename +
|
||||
"\nline:" + error.lineno +
|
||||
"\n"+error.message +"</pre>";
|
||||
},false);
|
||||
// goals:
|
||||
// 1. no/huge limits
|
||||
// 1.1. scroll basis is a number (and hence scroll can continues as long as number can increase/descrease)
|
||||
// 2. both directions
|
||||
// 3. resetability
|
||||
|
||||
window.addEventListener("load",()=>{
|
||||
var count = localStorage.getItem("app-opened-count")|| 0;
|
||||
count++;
|
||||
localStorage.setItem("app-opened-count",count);
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = "Javascript works! (app was opened " + count + " times)";
|
||||
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
||||
document.body.appendChild(h2);
|
||||
},false);
|
||||
|
||||
// answers
|
||||
// todo: at center of scroll will be a div containing the number
|
||||
// todo: onnce scrolling settled, the position reached is the new center
|
||||
|
||||
// questions
|
||||
// Q1: what is to be scrolled ?
|
||||
// A1: elements that are set to `.infinityScroll` class
|
||||
// Q2: how is the scroll to infinity implemented (exponential stuff)
|
||||
|
||||
window.addEventListener("load",()=>{
|
||||
|
||||
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);
|
||||
// mainDiv.appendChild(monthviewDiv);
|
||||
monthviewDiv.scrollIntoView();
|
||||
// var weekendDiv = document.createElement("div");
|
||||
// weekendDiv.className = "weekend";
|
||||
// daysDiv.appendChild(weekendDiv);
|
||||
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();
|
||||
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 makeInfinityScroll(element){
|
||||
element.nn=element.nn||{"position":0};
|
||||
var mdate;
|
||||
//var before = document.createElement("div");
|
||||
//var after = document.createElement("div");
|
||||
//after.style.backgroundColor="blue";
|
||||
//var center = document.createElement("div");
|
||||
//before.className = after.className = "space";
|
||||
//after.style.background="linear-gradient(yellow,red)";
|
||||
//center.textContent="center "+element.nn.position;
|
||||
//center.style.border="1px solid red";
|
||||
//center = createMonthView();
|
||||
//center.nnindex=0;
|
||||
//element.appendChild(after);
|
||||
|
||||
for(var i = -3; i< 3; i++){
|
||||
mdate = new Date();
|
||||
mdate.setMonth(mdate.getMonth()+i);
|
||||
var nextMonth=createMonthView(mdate);
|
||||
nextMonth.nnindex=i;
|
||||
element.appendChild(nextMonth);
|
||||
nextMonth.classList.add('orig');
|
||||
}
|
||||
|
||||
element.children[3].scrollIntoView({block:"center"});
|
||||
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
//console.log(element.firstChild,element.firstChild.nnindex);
|
||||
var beforeind=0;
|
||||
console.log("fc",element,element.firstChild);
|
||||
if(element.firstChild.nnindex){
|
||||
beforeind = element.firstChild.nnindex
|
||||
}
|
||||
mdate = new Date();
|
||||
mdate.setMonth(mdate.getMonth()+beforeind-1);
|
||||
var newBefore = createMonthView(mdate);
|
||||
newBefore.nnindex=beforeind-1;
|
||||
// newBefore.className="space";
|
||||
console.log("prio "+element.scrollTop,""+element.scrollHeight,element.clientHeight);
|
||||
// var savscrolltop = element.scrollTop;
|
||||
element.insertBefore(newBefore,element.firstChild);
|
||||
// element.scrollTop=savscrolltop-newBefore.clientHeight;
|
||||
|
||||
// var beforeind=0;
|
||||
// console.log("fc",element,element.firstChild);
|
||||
// if(element.firstChild.nnindex){
|
||||
// beforeind = element.firstChild.nnindex
|
||||
// }
|
||||
// mdate = new Date();
|
||||
// mdate.setMonth(mdate.getMonth()+beforeind-1);
|
||||
// var newBefore = createMonthView(mdate);
|
||||
// newBefore.nnindex=beforeind-1;
|
||||
//// newBefore.className="space";
|
||||
// console.log("prio "+element.scrollTop,""+element.scrollHeight,element.clientHeight);
|
||||
// var savscrolltop = element.scrollTop;
|
||||
// element.insertBefore(newBefore,element.firstChild);
|
||||
// element.scrollTop=savscrolltop-newBefore.clientHeight;
|
||||
//
|
||||
// console.log("POST "+element.scrollTop,""+element.scrollHeight,element.clientHeight);
|
||||
//
|
||||
},100000);
|
||||
|
||||
|
||||
element.addEventListener("scroll",()=>{
|
||||
if(element.scrollUpdateSchedule!=1){
|
||||
element.scrollUpdateSchedule=1;
|
||||
|
||||
requestAnimationFrame(()=>{
|
||||
element.scrollUpdateSchedule=0;
|
||||
//if(element.scrollTop/element.scrollHeight < 0.2){
|
||||
// console.log("ch",element.clientHeight,element.scrollTop);
|
||||
if(element.scrollTop < 3* element.clientHeight)
|
||||
{
|
||||
console.log(element.scrollTop)
|
||||
//console.log(element.firstChild,element.firstChild.nnindex);
|
||||
var beforeind=0;
|
||||
if(element.firstChild.nnindex){
|
||||
beforeind = element.firstChild.nnindex
|
||||
}
|
||||
mdate = new Date();
|
||||
mdate.setMonth(mdate.getMonth()+beforeind-1);
|
||||
var newBefore = createMonthView(mdate);
|
||||
newBefore.nnindex=beforeind-1;
|
||||
// newBefore.className="space";
|
||||
console.log("prio"+element.scrollTop,element.scrollHeight);
|
||||
element.insertBefore(newBefore,element.firstChild);
|
||||
console.log("POST"+element.scrollTop,element.scrollHeight);
|
||||
|
||||
// while(element.scrollHeight>200*element.clientHeight){
|
||||
// element.children[element.children.length-1].remove();
|
||||
// console.log("REMOVED"+element.scrollTop);
|
||||
// }
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
},false);
|
||||
}
|
||||
/////-- if(element.scrollTop > element.scrollHeight - 4 * element.clientHeight)
|
||||
/////-- {
|
||||
/////-- //var afterind = element.children[element.children.length].nnindex || 0;
|
||||
/////-- var afterind=0;
|
||||
/////-- if(element.children[element.children.length-1].nnindex){
|
||||
/////-- afterind = element.children[element.children.length-1].nnindex;
|
||||
/////-- }
|
||||
/////-- var newAfter = document.createElement("div");
|
||||
/////--// newBefore.className="space";
|
||||
/////-- newAfter.innerHTML=new Array(200).fill("a").map((a,i)=>{return afterind+"-"+i;}).join("<br>");
|
||||
/////-- newAfter.nnindex=afterind+1;
|
||||
/////-- console.log("prio"+element.scrollTop);
|
||||
/////-- element.appendChild(newAfter);
|
||||
/////-- console.log("POST"+element.scrollTop);
|
||||
/////--
|
||||
/////--
|
||||
/////--// while(element.scrollHeight>200*element.clientHeight){
|
||||
/////--// element.children[0].remove();
|
||||
/////--// console.log("REMOVED"+element.scrollTop);
|
||||
/////--// }
|
||||
/////--
|
||||
/////--
|
||||
/////-- }
|
||||
/////--// console.log(Date.now(),"Udpate",element.scrollTop);
|
||||
/////-- console.log(Date.now(),"Udpate",element.scrollTop/element.scrollHeight,"AAA",element.scrollTop,">",element.scrollHeight - 4 * element.clientHeight,element.scrollHeight);
|
||||
/////-- element.scrollUpdateSchedule=0;
|
||||
/////-- });
|
||||
/////-- }
|
||||
// console.log(element.scrollTop);
|
||||
// },false);
|
||||
// }
|
||||
|
||||
document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
|
||||
|
||||
},false);
|
||||
|
||||
window.addEventListener("error",(error)=>{ document.body.innerHTML = "<h1>error</h1><pre>" + error.filename + "\nline:" + error.lineno + "\n"+error.message +"</pre>"; },false);
|
||||
</script>
|
||||
<script src='pinch.js'></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue