Skip to content

Instantly share code, notes, and snippets.

@XianYeeXing
Last active March 31, 2019 09:38
Show Gist options
  • Save XianYeeXing/d6701378de700a0846d4638fd68b8c33 to your computer and use it in GitHub Desktop.
Save XianYeeXing/d6701378de700a0846d4638fd68b8c33 to your computer and use it in GitHub Desktop.
/// 參看文件: https://felgo.com/doc/felgo-different-screen-sizes
/**
* Bg Manager
*
* PROPS
* =====
*
* speed {number}
*
* METHODS
* =======
*
* init(opts)
* @param {object} opts
* @param {number} opts.scale
* @param {[string]} opts.urls
* @param {number} opts.zIndex = 0
*
* resize(scale)
* @param {number} scale
*
* resize(urls)
* @param {[string]} urls
*
* clear()
*
* update(urls)
* @param {[string]} urls
*
* moveDown()
*/
const MOVABLE_CNT = 2;
const _new = () => {
let _root;
let _speed = 10;
let _threshold;
let _pause = false;
/// !!! 處理跟 top 有關的計算
/// 統一用 int 好像比較不會產生誤差
const _n = s => parseInt(s, 10);
const _placeFirstToLast = () => {
if(_root.firstChild) {
const newNode = _root.firstChild.cloneNode(false);
_root.removeChild(_root.firstChild);
_root.appendChild(newNode);
newNode.style.top = parseInt(_root.firstChild.style.top, 10) + -1 * (_root.childNodes.length - 1) * _n(_root.style.height) + 'px';
}
};
const _append = urls => {
const len = urls.length;
urls.forEach((url, idx) => {
const elBg = document.createElement('div');
elBg.style.width = '100%';
elBg.style.height = '100%';
elBg.style.position = 'absolute';
if(len >= MOVABLE_CNT) {
elBg.style.top = -1 * idx * _n(_root.style.height) + 'px';
} else {
elBg.style.top = 0;
}
elBg.style.left = 0;
elBg.style.backgroundPosition = 'center';
elBg.style.backgroundRepeat = 'no-repeat';
elBg.style.backgroundSize = 'contain';
elBg.style.backgroundImage = `url('${url}')`; /// https://i.imgur.com/Day1XAT.png
_root.appendChild(elBg);
});
};
const moveDown = () => {
if(_pause === true) {
return;
}
const nodes = _root.childNodes;
const len = _root.childNodes.length;
if(len < MOVABLE_CNT) {
return;
}
if(_n(_root.firstChild.style.top) >= _threshold) {
return _placeFirstToLast();
}
nodes.forEach(n => n.style.top = parseFloat(n.style.top) + _speed + 'px');
};
const clear = () => {
while(_root.firstChild) {
_root.removeChild(_root.firstChild);
}
};
const reset = urls => {
clear();
_append(urls);
};
const update = urls => {
if (_root.hasChildNodes()) {
_root.childNodes.forEach((elBg, idx) => {
const url = urls[idx];
elBg.style.backgroundImage = `url('${url}')`;
});
}
};
const resize = scale => {
const BG_W = 844 * scale; /// raw: 843.75
const BG_H = 1627 * scale; /// 1626.5625
const WIN_W = window.innerWidth;
const WIN_H = window.innerHeight;
_root.style.width = BG_W + 'px';
_root.style.height = BG_H + 'px';
_root.style.top = -0.5 * (BG_H - WIN_H) + 'px';
_root.style.left = -0.5 * (BG_W - WIN_W) + 'px';
_threshold = _n(_root.style.height);
const len = _root.childNodes.length;
if(len >= MOVABLE_CNT) {
_pause = true;
_root.childNodes.forEach((c, idx) => {
c.style.top = -1 * idx * _n(BG_H) + 'px';
});
setTimeout(() => _pause = false, 1000/60);
}
};
const init = ({scale, urls, zIndex}) => {
_root = document.createElement('div');
_root.style.position = 'fixed';
_root.style.zIndex = typeof zIndex !== 'number' ? 0 : zIndex;
_root.style,overflow = 'hidden';
resize(scale);
document.body.insertBefore(_root, document.body.firstChild);
_append(urls);
};
return {
init,
resize,
reset,
clear,
update,
moveDown,
get speed() { return _speed },
set speed(s) { _speed = s },
}
};
module.exports = {
new: _new,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment