Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/favicon.ico

Created December 22, 2016 06:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattborn/f46f48c0144cf3089042f2e088ec3267 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattborn/f46f48c0144cf3089042f2e088ec3267 to your computer and use it in GitHub Desktop.
Download ZIP
Everything
Raw
readme.md
  • A list of weeks.

Basic Needs

  1. Food
  2. Clothing
  3. Shelter

Biblical Needs

  1. Jesus
  2. Others
  3. Money
Raw
index.html
<!doctype html>
<html>
<head>
<title>Everything is a list.</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="scripts.js"></script>
<!-- <script src="tests.js"></script> -->
</body>
</html>
Raw
scripts.js
const today = moment();
const thisYear = today.year();
const shortYear = (thisYear +'').slice('-2');
const thisWeek = today.isoWeek();
const thisDay = today.format('YYYY[W]WWE');
let current = thisYear;
function leadingZeroPlusOne (n) {
return ('0'+ (n + 1)).slice(-2);
}
function getWeeksArr (year) {
const numWeeks = moment([year]).isoWeeksInYear();
let weeks = [];
_.range(numWeeks).forEach(function (w) {
let days = {};
_.range(7).forEach(function (d) {
const day = year +'W'+ leadingZeroPlusOne(w) + (d + 1);
days[day] = {
unix: moment(day).format('X'),
};
});
weeks.push(days);
});
return weeks;
}
function render (year) {
// cache two-digit year and clear everything
var yr = (year +'').slice('-2');
document.body.innerHTML = '';
// add week rows
const weeks = getWeeksArr(year);
weeks.forEach(function (week, i) {
const wk = leadingZeroPlusOne(i);
const yrwk = yr + wk;
const row = document.createElement('div');
row.className = 'week';
if (yrwk == shortYear + thisWeek) {
row.className += ' current';
}
const title = document.createElement('h2');
title.className = 'week-title';
title.innerText = yrwk;
row.appendChild(title);
const days = document.createElement('div');
days.className = 'days';
for (day in week) {
let d = document.createElement('div');
d.className = 'day';
if (day == thisDay) {
d.className += ' current';
}
d.innerText = moment(day).format('ddd D MMM');
days.appendChild(d);
}
row.appendChild(days);
document.body.appendChild(row);
});
// scroll to current week
$('body').animate({
scrollTop: $('.week.current').offset().top +'px',
}, 150);
}
render(current);
document.onkeydown = function (e) {
// left
if (e.which === 37) {
current--;
render(current);
}
// right
if (e.which === 39) {
current++;
render(current);
}
};
Raw
styles.css
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
body {
color: #444;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif; /* smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide */
-webkit-font-smoothing: antialiased;
line-height: 1;
padding: 24px;
}
.week {
border-top: 1px solid #ddd;
color: #999;
margin-bottom: 1em;
}
.week.current { color: inherit; }
.week-title {
font-weight: normal;
letter-spacing: .1em;
margin: 8px 0;
text-transform: uppercase;
}
.days {
display: flex;
min-height: 10em;
}
.week.current .days { min-height: 20em; }
.day {
border-left: 1px solid #ddd;
cursor: pointer;
flex: 1;
padding: 8px;
}
.day.current { color: #0ad; }
.day:hover { background: #f8f8f8; }
Raw
tests.js
const test_start = 1986;
let test_years = {};
let test_days = [];
function weeksInYear (year) {
return Math.max(moment('12-31-'+ year).isoWeek(), moment('12-24-'+ year).isoWeek());
}
function compareWeek (date) {
return {
format: moment(date).format('llll'),
iso: moment(date).format('GGGG WW E'),
locale: moment(date).format('gggg ww e'),
};
}
_.range(60).forEach(function (y) {
const year = test_start + y;
const locale = moment(year +'-01-01').weeksInYear() === 53;
const iso = moment(year +'-01-01').isoWeeksInYear() === 53;
const which = iso ? 'iso' : 'locale';
if (locale && iso) { alert(year); }
test_years[year] = locale || iso ? 53 +' ('+ which +')' : 52;
test_days.push(compareWeek(year +'001'));
test_days.push(compareWeek(year +'003'));
test_days.push(compareWeek(year +'363'));
test_days.push(compareWeek(year +'365'));
console.log(getFirstDayOfYear(year));
});
// console.log('Years', test_years);
// console.log('Days', test_days);
// Decision: use ISO because it makes math easier
//en.wikipedia.org/wiki/ISO_week_date#Advantages
let test_current = moment().year();
function render (year) {
const numDays = moment([year]).isLeapYear() ? 366 : 365;
let days = [];
_.range(numDays).forEach(function (n) {
const ordinal = ('00'+ (n + 1)).slice(-3);
days.push(moment(year + ordinal).format('GGGGWWE'));
});
// console.log(year, days);
}
render(test_current);
document.onkeydown = function (e) {
// left
if (e.which === 37) {
test_current--;
render(test_current);
}
// right
if (e.which === 39) {
test_current++;
render(test_current);
}
};
// try to find the first day of the iso week year
function manualLogs () {
// console.log(moment('2011-01-01').format('GGGGWWE'));
console.log(moment('2011-01-03').format('GGGGWWE'));
// console.log(moment('2012-01-01').format('GGGGWWE'));
console.log(moment('2012-01-02').format('GGGGWWE'));
console.log(moment('2012-12-31').format('GGGGWWE'));
// console.log(moment('2013-01-01').format('GGGGWWE'));
console.log(moment('2013-12-30').format('GGGGWWE'));
// console.log(moment('2014-01-01').format('GGGGWWE'));
console.log(moment('2014-12-29').format('GGGGWWE'));
// console.log(moment('2015-01-01').format('GGGGWWE'));
// console.log(moment('2016-01-01').format('GGGGWWE'));
console.log(moment('2016-01-04').format('GGGGWWE'));
// console.log(moment('2017-01-01').format('GGGGWWE'));
console.log(moment('2017-01-02').format('GGGGWWE'));
console.log(moment('2018-01-01').format('GGGGWWE'));
console.log(moment('2018-12-31').format('GGGGWWE'));
// console.log(moment('2019-01-01').format('GGGGWWE'));
console.log(moment('2019-12-30').format('GGGGWWE'));
// console.log(moment('2020-01-01').format('GGGGWWE'));
}
// manualLogs();
function getFirstDayOfYear (year) {
// const start = moment(year +'-01-01').subtract(3, 'd');
// _.range(7).forEach(function (i) {
// const day = start.add(i, 'd').format('GGGGWWE');
// if (day.slice(-3) === '011') {
// console.log(day);
// }
// });
return moment(year +'W011').format('llll');
}
// various utility functions
function getWeeksArr (year) {
const numWeeks = moment([year]).isoWeeksInYear();
let weeks = [];
_.range(numWeeks).forEach(function (w) {
const week = ('0'+ (w + 1)).slice(-2);
weeks.push(_.range(7).map(function (d) {
const day = year +'W'+ week + (d + 1);
return {
locale: moment(day).format('llll'),
iso: day,
};
}));
});
return weeks;
}
function getWeeksObj (year) {
const init = Date.now();
const numWeeks = moment([year]).isoWeeksInYear();
let weeks = {};
_.range(numWeeks).forEach(function (w) {
const week = ('0'+ (w + 1)).slice(-2);
let days = {};
_.range(7).forEach(function (d) {
const day = year +'W'+ week + (d + 1);
days[day] = {
unix: moment(day).format('X'),
};
});
weeks[week] = days;
});
console.log('getWeeksObj took '+ (Date.now() - init) +'ms');
return weeks;
// problem: when a for..in tries to loop through this, the padded numbers will be at the end e.g. …51, 52, 01, 02… :(
}
function getDaysArr (year) {
const numWeeks = moment([year]).isoWeeksInYear();
const numDays = numWeeks === 53 ? 371 : 364;
let days = [];
_.range(numWeeks).forEach(function (w) {
const week = ('0'+ (w + 1)).slice(-2);
_.range(7).forEach(function (d) {
const day = year +'W'+ week + (d + 1);
days.push({
locale: moment(day).format('llll'),
iso: day,
});
});
});
return days;
}
function getDaysObj (year) {
const numWeeks = moment([year]).isoWeeksInYear();
const numDays = numWeeks === 53 ? 371 : 364;
let days = {};
_.range(numWeeks).forEach(function (w) {
const week = ('0'+ (w + 1)).slice(-2);
_.range(7).forEach(function (d) {
const day = year +'W'+ week + (d + 1);
days[day] = moment(day).format('llll');
});
});
return days;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment