83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
|
import cfg from './cfg.js';
|
||
|
|
import { getposall } from './helper.js';
|
||
|
|
|
||
|
|
export const eventrt = {
|
||
|
|
track: null,
|
||
|
|
scroll: false,
|
||
|
|
dims: null,
|
||
|
|
hash: window.location.hash,
|
||
|
|
};
|
||
|
|
|
||
|
|
// <track>
|
||
|
|
const tracktopevent = new CustomEvent('top', { bubbles: true });
|
||
|
|
Object.defineProperty(cfg.container.thumbs, 'top', {
|
||
|
|
set: function(top) {
|
||
|
|
this.style.top = top;
|
||
|
|
this.dispatchEvent(tracktopevent);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
export const tracktop = e => {
|
||
|
|
eventrt.track = getposall(e.target.querySelectorAll("a.thumb"));
|
||
|
|
//console.log(eventrt.track);
|
||
|
|
};
|
||
|
|
// </track>
|
||
|
|
|
||
|
|
// <scroll>
|
||
|
|
export const scroll = e => {
|
||
|
|
if(e.preventDefault)
|
||
|
|
e.preventDefault();
|
||
|
|
const deltaY = e.deltaY < 0?-1:1; // - up, + down
|
||
|
|
|
||
|
|
if(!eventrt.scroll) {
|
||
|
|
eventrt.scroll = true;
|
||
|
|
const dura = 500;
|
||
|
|
const top = parseInt(cfg.container.thumbs.style.top.replace("px",""));
|
||
|
|
const go = `${(top + (-deltaY * ((cfg.layout.items.size + cfg.layout.items.gutter) * cfg.misc.scrollrows)))}`;
|
||
|
|
cfg.container.thumbs.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
|
||
|
|
setTimeout(() => { // after scroll
|
||
|
|
cfg.container.thumbs.top = `${go}px`;
|
||
|
|
eventrt.scroll = false;
|
||
|
|
|
||
|
|
console.log( [...new Set([...cfg.container.thumbs.querySelectorAll("a.thumb")].map(e => {
|
||
|
|
return [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop);
|
||
|
|
}))] );
|
||
|
|
|
||
|
|
|
||
|
|
}, dura);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// </scroll>
|
||
|
|
|
||
|
|
// <resize>
|
||
|
|
export const resize = e => {
|
||
|
|
let rows = Math.max(~~((window.innerHeight - cfg.layout.min_margin + cfg.layout.items.size) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_rows);
|
||
|
|
let cols = Math.max(~~((window.innerWidth - cfg.layout.min_margin) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_cols);
|
||
|
|
let pageWidth = cols * (cfg.layout.items.size + cfg.layout.items.gutter);
|
||
|
|
let margin = Math.max((window.innerWidth - pageWidth + cfg.layout.items.gutter) / cfg.layout.min_rows, 0);
|
||
|
|
cfg.container.page.style.width = pageWidth;
|
||
|
|
cfg.container.page.style.marginLeft = margin;
|
||
|
|
eventrt.dims = {
|
||
|
|
rows: rows,
|
||
|
|
cols: cols,
|
||
|
|
eps: rows * cols,
|
||
|
|
pageWidth: pageWidth,
|
||
|
|
margin: margin
|
||
|
|
};
|
||
|
|
};
|
||
|
|
// <resize>
|
||
|
|
|
||
|
|
// <hash>
|
||
|
|
export const hash = e => {
|
||
|
|
eventrt.hash = window.location.hash;
|
||
|
|
console.log(eventrt.hash);
|
||
|
|
};
|
||
|
|
// </hash>
|
||
|
|
|
||
|
|
|
||
|
|
// bind events
|
||
|
|
window.addEventListener("resize", resize);
|
||
|
|
window.dispatchEvent(new Event('resize'));
|
||
|
|
document.addEventListener("wheel", scroll);
|
||
|
|
cfg.container.thumbs.addEventListener('top', tracktop);
|
||
|
|
window.addEventListener("hashchange", hash);
|