Compare commits
2 commits
031e6c00bd
...
28e1c4304b
| Author | SHA1 | Date | |
|---|---|---|---|
| 28e1c4304b | |||
| 59abe2e50b |
1 changed files with 154 additions and 84 deletions
|
|
@ -12,7 +12,10 @@
|
|||
body,html{
|
||||
background-color:#ffa;
|
||||
margin:0;
|
||||
padding:0
|
||||
padding:0;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.infinityScroll{
|
||||
|
|
@ -21,11 +24,6 @@ overflow:scroll;
|
|||
position:relative;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: sans;
|
||||
}
|
||||
|
||||
|
||||
/* disable pinch-zoom*/
|
||||
:root {
|
||||
touch-action: pan-x pan-y;
|
||||
|
|
@ -41,21 +39,40 @@ position:relative;
|
|||
/*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;
|
||||
}
|
||||
|
||||
.label{
|
||||
background-color:#a44;
|
||||
color:#fff;
|
||||
font-size:10vw;
|
||||
font-size:1cm;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.days{
|
||||
.monthview > .days{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.weekview > .days{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.days div {
|
||||
text-align:center;
|
||||
height: 2cm;
|
||||
|
|
@ -67,25 +84,57 @@ position:relative;
|
|||
background-color:white;
|
||||
}
|
||||
|
||||
#mainDiv{
|
||||
#weeksDiv{
|
||||
/*background: linear-gradient(white,#aaf);*/
|
||||
background-color: #aaf;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:100vw;
|
||||
|
||||
}
|
||||
#weeksDiv, #monthsDiv{
|
||||
box-sizing:border-box;
|
||||
margin:0;
|
||||
/* scroll-snap-type: y mandatory;*/
|
||||
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="mainDiv" class="infinityScroll"></div>
|
||||
<div id="all">
|
||||
<div id="monthsDiv" class="infinityScroll"></div>
|
||||
<div id="weeksDiv" class="infinityScroll"></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",()=>{
|
||||
|
||||
var locale = window.navigator.userLanguage || window.navigator.language || "en";
|
||||
|
|
@ -100,10 +149,46 @@ window.addEventListener("load",()=>{
|
|||
var daysDiv = document.createElement("div");
|
||||
daysDiv.className="days";
|
||||
monthviewDiv.appendChild(daysDiv);
|
||||
monthviewDiv.scrollIntoView();
|
||||
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();
|
||||
|
|
@ -111,80 +196,65 @@ window.addEventListener("load",()=>{
|
|||
if(column>=6){
|
||||
dayDiv.classList.add("weekend");
|
||||
}
|
||||
dayDiv.style.gridColumn = column;
|
||||
//dayDiv.style.gridColumn = column;
|
||||
dayDiv.textContent = day.getDate()
|
||||
daysDiv.appendChild(dayDiv);
|
||||
day.setDate(day.getDate()+1);
|
||||
}
|
||||
return monthviewDiv;
|
||||
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 makeInfinityScroll(element){
|
||||
element.nn=element.nn||{"position":0};
|
||||
var mdate;
|
||||
|
||||
function makeInfinityScroll(element,createItem){
|
||||
var item;
|
||||
//setup initial set of items
|
||||
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');
|
||||
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 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;
|
||||
element.insertBefore(newBefore,element.firstChild);
|
||||
var firstElementChildIndex = element.firstElementChild.nnindex || 0
|
||||
item = createItem(firstElementChildIndex - 1);
|
||||
element.insertBefore(item,element.firstElementChild);
|
||||
|
||||
while(element.scrollHeight>50*element.clientHeight){
|
||||
element.lastChild.remove();
|
||||
element.lastElementChild.remove();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if(element.scrollTop > element.scrollHeight - 4* element.clientHeight)
|
||||
{
|
||||
var afterind=0;
|
||||
if(element.lastChild.nnindex){
|
||||
afterind = element.lastChild.nnindex
|
||||
}
|
||||
mdate = new Date();
|
||||
mdate.setMonth(mdate.getMonth()+afterind+1);
|
||||
var newAfter = createMonthView(mdate);
|
||||
newAfter.nnindex=afterind+1;
|
||||
element.appendChild(newAfter);
|
||||
var lastElementChildIndex = element.lastElementChild.nnindex || 0
|
||||
item = createItem(lastElementChildIndex + 1);
|
||||
element.appendChild(item)
|
||||
|
||||
while(element.scrollHeight>50*element.clientHeight){
|
||||
element.firstChild.remove();
|
||||
element.firstElementChild.remove();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
},false);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
|
||||
makeInfinityScroll(document.querySelector("#monthsDiv"),createMonthViewItem);
|
||||
makeInfinityScroll(document.querySelector("#weeksDiv"),createWeekViewItem);
|
||||
// document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
|
||||
|
||||
},false);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue