_includes/heatmap.js in jekyll-zeta-0.9.0 vs _includes/heatmap.js in jekyll-zeta-0.9.1
- old
+ new
@@ -1,296 +1,350 @@
+;!(function () {
+ var GDATA = window._G_DATA;
+ if (!GDATA) {
+ GDATA = {}
+ window._G_DATA = GDATA
+ }
-;!function(){
-function date2ymd(t){
- let m = t.getMonth() + 1;
- let d = t.getDate()
- return `${t.getFullYear()}-${m< 10 ? '0' + m : m }-${d<10 ? '0'+d:d}`
-}
+ function date2ymd(t) {
+ let m = t.getMonth() + 1;
+ let d = t.getDate();
+ return `${t.getFullYear()}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
+ }
-const dateEnd = endYear && endYear.length == 4 ? new Date(`${endYear}-12-31`) : new Date();
+ const dateEnd =
+ endYear && endYear.length == 4 ? new Date(`${endYear}-12-31`) : new Date();
-const endStamp = dateEnd.getTime()
-const dayEleId = Math.random().toString(16).substring(2);
-let arr = _allyearurl.split('/');
-arr.pop();
-const jsonUrlBase = arr.join('/')
+ const endStamp = dateEnd.getTime();
+ const dayEleId = Math.random().toString(16).substring(2);
+ let arr = _allyearurl.split("/");
+ arr.pop();
+ const jsonUrlBase = arr.join("/");
+ const ColumnsCount = 53;
+ const RowCount = 7;
+ const DayCount = (ColumnsCount - 1) * RowCount + dateEnd.getDay() + 1;
-const ColumnsCount = 53;
-const RowCount = 7;
-const DayCount = (ColumnsCount - 1) * RowCount + dateEnd.getDay() + 1;
+ let queue = window._y_queue || []
+ window._y_queue = queue;
+
-!function fillData(){
- let year = '' + dateEnd.getFullYear()
- let preYear = '' + (year - 1)
- fetch(_allyearurl)
- .then(r => r.json())
- .then(d=>{
- let yearCfg = d ;
- let arr = []
- if (yearCfg[year]) {
- arr.push(getYearData(year ))
+ function getAllYearCfg(){
+
+
+ if (GDATA['_allYear']) {
+ return GDATA['_allYear'];
}
- if (yearCfg[preYear]) {
- arr.push(getYearData(preYear ))
+ if (window._isFetchAllYearData == 1) {
+ return new Promise(r=>{
+ queue.push(r);
+ })
}
- Promise.all(arr).then(alldata=>{
- let combineData = {};
- let d1 = alldata[0];
- let d2 = alldata[1];
-
- for (const key in d1) {
- if (Object.prototype.hasOwnProperty.call(d1, key)) {
- const element = d1[key];
- let keyNew = 'K1-' + key;
- combineData[keyNew] = element
+
+
+ window._isFetchAllYearData = 1;
+ return fetch(_allyearurl)
+ .then((r) => r.json())
+ .then(d => {
+ window._isFetchAllYearData = 0;
+ if (queue.length) {
+ queue.forEach(calback=>{calback(d)});
+ queue.length = 0;
}
- }
+ GDATA['_allYear'] = d ;return d ;})
+ }
+ !(function fillData() {
+ let year = "" + dateEnd.getFullYear();
+ let preYear = "" + (year - 1);
+ getAllYearCfg()
+ .then((d) => {
+ let yearCfg = d;
+ let arr = [];
+ if (yearCfg[year]) {
+ arr.push(getYearData(year));
+ }
- for (const key in d2) {
- if (Object.prototype.hasOwnProperty.call(d2, key)) {
- const element = d2[key];
- let keyNew = 'K2-' + key;
- combineData[keyNew] = element
+ if (yearCfg[preYear]) {
+ arr.push(getYearData(preYear));
}
- }
+ Promise.all(arr).then((alldata) => {
+ let combineData = {};
+ let d1 = alldata[0];
+ let d2 = alldata[1];
+ for (const key in d1) {
+ if (Object.prototype.hasOwnProperty.call(d1, key)) {
+ const element = d1[key];
+ let keyNew = "K1-" + key;
+ combineData[keyNew] = element;
+ }
+ }
- updateCell(combineData);
- })
- })
+ for (const key in d2) {
+ if (Object.prototype.hasOwnProperty.call(d2, key)) {
+ const element = d2[key];
+ let keyNew = "K2-" + key;
+ combineData[keyNew] = element;
+ }
+ }
- function getIndex(ymd){
- return DayCount - Math.floor((endStamp - new Date(ymd).getTime())/ (24 * 3600000)) -1
- }
+ updateCell(combineData);
+ });
+ });
- function idx2Ymd(idx){
- let t = new Date(endStamp - ( (DayCount - 1) - idx) * 3600000 * 24)
- let m = t.getMonth() + 1
- let d = t.getDate()
- return `${t.getFullYear()}-${m< 10 ? '0' + m : m }-${d<10 ? '0'+d:d}`
- }
+ function getIndex(ymd) {
+ return (
+ DayCount -
+ Math.floor((endStamp - new Date(ymd).getTime()) / (24 * 3600000)) -
+ 1
+ );
+ }
- function updateCell(data){
- if(!data)return
+ function idx2Ymd(idx) {
+ let t = new Date(endStamp - (DayCount - 1 - idx) * 3600000 * 24);
+ let m = t.getMonth() + 1;
+ let d = t.getDate();
+ return `${t.getFullYear()}-${m < 10 ? "0" + m : m}-${
+ d < 10 ? "0" + d : d
+ }`;
+ }
- console.log(data)
+ function updateCell(data) {
+ if (!data) return;
- let daysEle = document.getElementById(dayEleId)
- let dayCells = daysEle.childNodes
- let Map = {}
+ let daysEle = document.getElementById(dayEleId);
+ let dayCells = daysEle.childNodes;
- for (const key in data) {
- if (Object.prototype.hasOwnProperty.call(data, key)) {
- const element = data[key];
- if(Array.isArray(element)){
- element.forEach(e=>{
- if(e.date && e.title && e.url){
- let arr = Map[e.date]
- if (!arr) {
- arr = []
- Map[e.date] = arr
+ let Map = {};
+
+ for (const key in data) {
+ if (Object.prototype.hasOwnProperty.call(data, key)) {
+ const element = data[key];
+ if (Array.isArray(element)) {
+ element.forEach((e) => {
+ if (e.date && e.title && e.url) {
+ let arr = Map[e.date];
+ if (!arr) {
+ arr = [];
+ Map[e.date] = arr;
+ }
+ arr.push(e);
}
- arr.push(e)
- }
- })
+ });
+ }
}
}
- }
+ let ymdArr = [];
+ for (const dateKeyYmd in Map) {
+ if (Object.prototype.hasOwnProperty.call(Map, dateKeyYmd)) {
+ ymdArr.push(dateKeyYmd);
+ }
+ }
- let ymdArr = []
+ var G_idxOfDay = DayCount - 1;
- for (const dateKeyYmd in Map) {
- if (Object.prototype.hasOwnProperty.call(Map, dateKeyYmd)) {
- ymdArr.push(dateKeyYmd)
- }
- }
+ function shuffle(array) {
+ let currentIndex = array.length;
+ // While there remain elements to shuffle...
+ while (currentIndex != 0) {
+ // Pick a remaining element...
+ let randomIndex = Math.floor(Math.random() * currentIndex);
+ currentIndex--;
- var G_idxOfDay = DayCount - 1;
-
- function shuffle(array) {
- let currentIndex = array.length;
-
- // While there remain elements to shuffle...
- while (currentIndex != 0) {
-
- // Pick a remaining element...
- let randomIndex = Math.floor(Math.random() * currentIndex);
- currentIndex--;
-
- // And swap it with the current element.
- [array[currentIndex], array[randomIndex]] = [
- array[randomIndex], array[currentIndex]];
+ // And swap it with the current element.
+ [array[currentIndex], array[randomIndex]] = [
+ array[randomIndex],
+ array[currentIndex],
+ ];
+ }
}
- }
- const SEQ = new Array(DayCount)
- let tmp = DayCount
- while (tmp -- > 0) {
- SEQ[tmp] = tmp
- }
-
- shuffle(SEQ)
-
- function update1Day(){
- if (G_idxOfDay < 0) {
- return
+ const SEQ = new Array(DayCount);
+ let tmp = DayCount;
+ while (tmp-- > 0) {
+ SEQ[tmp] = tmp;
}
- const idxOfDay = SEQ[G_idxOfDay --];
- let dateKeyYmd = idx2Ymd(idxOfDay )
- let arrPostInOneDay = Map[dateKeyYmd];
- const dayCell = dayCells[idxOfDay]
- const nobg = parseInt(dateKeyYmd.substring(5,7))%2 == 1? 'hm-check-no-b' : 'hm-check-no-a';
- dayCell.classList = `heatmap-day-cell ${!arrPostInOneDay ? nobg :arrPostInOneDay.length > 1 ? 'hm-check2' : 'hm-check' }`
- if ((arrPostInOneDay && arrPostInOneDay.length > 0 )) {
- let isDirectly = arrPostInOneDay.length == 1
- let tip = document.createElement("div");
+ shuffle(SEQ);
- if (isDirectly) {
- let lnk = document.createElement('a');
- lnk.href = arrPostInOneDay[0].url
- dayCell.appendChild(lnk)
+ function update1Day() {
+ if (G_idxOfDay < 0) {
+ return;
}
+ const idxOfDay = SEQ[G_idxOfDay--];
+ let dateKeyYmd = idx2Ymd(idxOfDay);
+ let arrPostInOneDay = Map[dateKeyYmd];
+ const dayCell = dayCells[idxOfDay];
+ const nobg =
+ parseInt(dateKeyYmd.substring(5, 7)) % 2 == 1
+ ? "hm-check-no-b"
+ : "hm-check-no-a";
+ dayCell.classList = `heatmap-day-cell ${
+ !arrPostInOneDay
+ ? nobg
+ : arrPostInOneDay.length > 1
+ ? "hm-check2"
+ : "hm-check"
+ }`;
- tip.className = "hm-tip";
- let desc = ''
- arrPostInOneDay.forEach(element => {
+ if (arrPostInOneDay && arrPostInOneDay.length > 0) {
+ let isDirectly = arrPostInOneDay.length == 1;
+ let tip = document.createElement("div");
- let lnk = document.createElement('a');
- lnk.className = 'hm-tiplink'
- lnk.href = element.url
- tip.appendChild(lnk)
+ if (isDirectly) {
+ let lnk = document.createElement("a");
+ lnk.href = arrPostInOneDay[0].url;
+ dayCell.appendChild(lnk);
+ }
- let t = document.createElement('span')
- t.className = 'hm-date'
- t.innerText = dateKeyYmd.substring(5);
- lnk.appendChild(t);
+ tip.className = "hm-tip";
+ let desc = "";
+ arrPostInOneDay.forEach((element) => {
+ let lnk = document.createElement("a");
+ lnk.className = "hm-tiplink";
+ lnk.href = element.url;
+ tip.appendChild(lnk);
-
- let t2 = document.createElement('span')
- t2.className = 'hm-title'
- t2.innerText = element.title
- lnk.appendChild(t2);
+ let t = document.createElement("span");
+ t.className = "hm-date";
+ t.innerText = dateKeyYmd.substring(5);
+ lnk.appendChild(t);
- });
- dayCell.appendChild(tip);
-
+ let t2 = document.createElement("span");
+ t2.className = "hm-title";
+ t2.innerText = element.title;
+ lnk.appendChild(t2);
+ });
+ dayCell.appendChild(tip);
+ }
}
-
- }
+ function updateMultiDays() {
+ let day = heatMapLoadCount;
+ if (!day || day <= 0) {
+ day = 8;
+ }
+ while (day--) {
+ update1Day();
+ }
- function updateMultiDays(){
- let day = heatMapLoadCount;
- if (!day || day <= 0) {
- day = 8;
+ if (G_idxOfDay >= 0) {
+ requestAnimationFrame(updateMultiDays);
+ }
}
- while (day -- ) {
- update1Day();
- }
+ requestAnimationFrame(updateMultiDays);
- if (G_idxOfDay >= 0) {
- requestAnimationFrame(updateMultiDays)
- }
-
+ return;
}
- requestAnimationFrame(updateMultiDays)
-
- return
-
- }
-
+ function getYearData(year) {
+ year = '' + year
- function getYearData(year){
- return fetch(`${jsonUrlBase}/${year}.json`)
- .then(r => r.json())
- .catch(e=>{
- return null
- })
+
+ if(GDATA[year]){
- }
+ return GDATA[year]
+ }
+ let queueFlgKey = '_singleyearFlg' + year
+ let queueArrKey = '_singleyearQueue' + year
+ if (GDATA[queueFlgKey] == 1) {
+ // console.log('put in queue',year,Math.random())
+ let arrQueue = GDATA[queueArrKey]
+ if (!arrQueue) {
+ arrQueue = []
+ GDATA[queueArrKey] = arrQueue;
+ }
+
+ return new Promise(r=>{
+ arrQueue.push(r);
+ });
+ }
-
-}()
+ GDATA[queueFlgKey] = 1;
+ // console.log('RealQuery',year,Math.random())
+ return fetch(`${jsonUrlBase}/${year}.json`)
+ .then((r) => r.json())
+ .then(d=>{
+ GDATA[queueFlgKey] = 0 ;GDATA[year] = d;
+ let queue = GDATA[queueArrKey];
+ // console.log('queryFinish',year)
+ if(queue && queue.length){
+ queue.forEach(cb=>{
+ // console.log('queryFinishQueue',year,queue.length,Math.random());
+ cb(d);})
+ queue.length = 0;
+ GDATA[queueArrKey] = undefined
+ }
+ return d})
+ .catch((e) => {
+ return null;
+ });
+ }
+ })();
+ (function initMap() {
+ let Father = document.getElementById(heatmapid);
+ const Frag = document.createDocumentFragment();
-;(function initMap(){
+ const monthEle = document.createElement("div");
+ monthEle.className = "heatmap-month";
+ Frag.appendChild(monthEle);
+ const monthStr = _MonthStr.split(" ");
-let Father = document.getElementById(heatmapid);
+ let nowM = dateEnd.getMonth();
+ let nowWeek = dateEnd.getDay();
-const Frag = document.createDocumentFragment();
+ for (let i = 0; i < monthStr.length; i++) {
+ let m = document.createElement("span");
+ m.className = "heatmap-month-cell";
+ m.innerHTML = `${monthStr[(i + nowM + 1) % 12]}`;
+ monthEle.appendChild(m);
+ }
-const monthEle = document.createElement("div");
-monthEle.className = "heatmap-month";
-Frag.appendChild(monthEle);
-const monthStr = _MonthStr.split(" ");
+ const weekEle = document.createElement("div");
+ weekEle.className = "heatmap-week";
+ const WeekStr = _showWeek.split(" ");
+ for (let i = 0; i < WeekStr.length; i++) {
+ let m = document.createElement("div");
+ m.className = "heatmap-week-cell";
+ m.innerHTML = `<span>${WeekStr[i]}</span>`;
+ weekEle.appendChild(m);
+ }
-let nowM = dateEnd.getMonth();
-let nowWeek = dateEnd.getDay();
+ Frag.appendChild(weekEle);
+ const dayEle = document.createElement("div");
-for (let i = 0; i < monthStr.length ; i++) {
- let m = document.createElement("span");
- m.className = "heatmap-month-cell";
- m.innerHTML = `${monthStr[(i + nowM + 1) % 12]}`;
- monthEle.appendChild(m);
-}
+ dayEle.className = "heatmap-day";
+ dayEle.id = dayEleId;
-const weekEle = document.createElement("div");
-weekEle.className = "heatmap-week";
-const WeekStr = _showWeek.split(" ");
+ let firstDateDayDiff = (ColumnsCount - 1) * RowCount + nowWeek;
-for (let i = 0; i < WeekStr.length; i++) {
- let m = document.createElement("div");
- m.className = "heatmap-week-cell";
- m.innerHTML = `<span>${WeekStr[i]}</span>`;
- weekEle.appendChild(m);
-}
+ // console.log(nowWeek, firstDateDayDiff);
-Frag.appendChild(weekEle);
+ for (let c = 0; c < ColumnsCount; c++) {
+ for (let r = 0; r < RowCount; r++) {
+ if (r > nowWeek && c == ColumnsCount - 1) {
+ break;
+ }
-const dayEle = document.createElement("div");
-
-dayEle.className = "heatmap-day";
-dayEle.id = dayEleId;
-
-
-let firstDateDayDiff = (ColumnsCount - 1) * RowCount + nowWeek;
-
-
-console.log(nowWeek, firstDateDayDiff);
-
-for (let c = 0; c < ColumnsCount; c++) {
- for (let r = 0; r < RowCount; r++) {
- if (r > nowWeek && c == ColumnsCount - 1) {
- break
+ let m = document.createElement("span");
+ m.classList = `heatmap-day-cell hm-check-nodata`;
+ dayEle.appendChild(m);
+ }
}
- let m = document.createElement("span");
- m.classList = `heatmap-day-cell hm-check-nodata`
- dayEle.appendChild(m);
- }
-}
-
-
-Frag.appendChild(dayEle);
-Father.append(Frag);
-})()
-
-
-
-
-
-}();
\ No newline at end of file
+ Frag.appendChild(dayEle);
+ Father.append(Frag);
+ })();
+})();