291 lines
8.4 KiB
JavaScript
291 lines
8.4 KiB
JavaScript
const {each, isFn, dom, includes, compact} = require('../../util');
|
|
const event = require('../../core/event');
|
|
const resource = require('../../core/resource');
|
|
const allsettings = require('../../core/settings');
|
|
const store = require('../../core/store');
|
|
|
|
const win = global.window;
|
|
const settings = Object.assign({
|
|
enabled: true
|
|
}, allsettings.preview);
|
|
const tplOverlay =
|
|
`<div id="pv-overlay">
|
|
<div id="pv-container"></div>
|
|
<div id="pv-spinner"><img class="back"/><img class="spinner" src="${resource.image('spinner')}"/></div>
|
|
<div id="pv-prev-area" class="hof"><img src="${resource.image('preview-prev')}"/></div>
|
|
<div id="pv-next-area" class="hof"><img src="${resource.image('preview-next')}"/></div>
|
|
<div id="pv-bottombar" class="clearfix hof">
|
|
<ul id="pv-buttons">
|
|
<li id="pv-bar-close" class="bar-right bar-button"><img src="${resource.image('preview-close')}"/></li>
|
|
<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="${resource.image('preview-raw')}"/></a></li>
|
|
<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="${resource.image('preview-fullscreen')}"/></li>
|
|
<li id="pv-bar-next" class="bar-right bar-button"><img src="${resource.image('preview-next')}"/></li>
|
|
<li id="pv-bar-idx" class="bar-right bar-label"></li>
|
|
<li id="pv-bar-prev" class="bar-right bar-button"><img src="${resource.image('preview-prev')}"/></li>
|
|
</ul>
|
|
</div>
|
|
</div>`;
|
|
const storekey = 'ext/preview';
|
|
|
|
let isFullscreen = store.get(storekey) || false;
|
|
let userAliveTimeoutId = null;
|
|
let spinnerIsVisible = false;
|
|
let spinnerTimeoutId = null;
|
|
let session = null;
|
|
|
|
const centerContent = () => {
|
|
const $container = dom('#pv-container');
|
|
|
|
const container = $container[0];
|
|
const content = $container.children()[0];
|
|
if (!container || !content) {
|
|
return;
|
|
}
|
|
|
|
const containerW = container.offsetWidth;
|
|
const containerH = container.offsetHeight;
|
|
const contentW = content.offsetWidth;
|
|
const contentH = content.offsetHeight;
|
|
|
|
dom(content).css({
|
|
left: (containerW - contentW) * 0.5 + 'px',
|
|
top: (containerH - contentH) * 0.5 + 'px'
|
|
});
|
|
};
|
|
|
|
const updateGui = () => {
|
|
const docEl = win.document.documentElement;
|
|
const winWidth = docEl.clientWidth;
|
|
const winHeight = docEl.clientHeight;
|
|
const margin = isFullscreen ? 0 : 20;
|
|
const barHeight = isFullscreen ? 0 : 48;
|
|
|
|
dom('#pv-container').css({
|
|
width: winWidth - 2 * margin + 'px',
|
|
height: winHeight - 2 * margin - barHeight + 'px',
|
|
left: margin + 'px',
|
|
top: margin + 'px'
|
|
});
|
|
|
|
dom('#pv-spinner').css({
|
|
left: winWidth * 0.5 + 'px',
|
|
top: winHeight * 0.5 + 'px'
|
|
});
|
|
|
|
if (isFullscreen) {
|
|
dom('#pv-overlay').addCls('fullscreen');
|
|
dom('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-no-fullscreen'));
|
|
} else {
|
|
dom('#pv-overlay').rmCls('fullscreen');
|
|
dom('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-fullscreen'));
|
|
}
|
|
|
|
centerContent();
|
|
|
|
if (isFn(session && session.adjust)) {
|
|
session.adjust();
|
|
}
|
|
};
|
|
|
|
const setIndex = (idx, total) => {
|
|
dom('#pv-bar-idx').text(`${idx}/${total}`).show();
|
|
};
|
|
|
|
const setRawLink = href => {
|
|
dom('#pv-bar-raw').show().find('a').attr('href', href);
|
|
};
|
|
|
|
const setLabels = labels => {
|
|
dom('#pv-buttons .bar-left').rm();
|
|
each(labels, label => {
|
|
dom('<li></li>')
|
|
.addCls('bar-left')
|
|
.addCls('bar-label')
|
|
.text(label)
|
|
.appTo('#pv-buttons');
|
|
});
|
|
};
|
|
|
|
const userAlive = () => {
|
|
const $hof = dom('#pv-overlay .hof');
|
|
win.clearTimeout(userAliveTimeoutId);
|
|
$hof.show();
|
|
if (isFullscreen) {
|
|
userAliveTimeoutId = win.setTimeout(() => $hof.hide(), 2000);
|
|
}
|
|
};
|
|
|
|
const next = () => session && session.moveIdx(1);
|
|
const prev = () => session && session.moveIdx(-1);
|
|
|
|
const toggleFullscreen = () => {
|
|
isFullscreen = !isFullscreen;
|
|
store.put(storekey, isFullscreen);
|
|
|
|
userAlive();
|
|
updateGui();
|
|
};
|
|
|
|
const dropEvent = ev => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
};
|
|
|
|
const onKeydown = ev => {
|
|
const key = ev.keyCode;
|
|
|
|
if (key === 27) { // esc
|
|
dropEvent(ev);
|
|
exit(); // eslint-disable-line no-use-before-define
|
|
} else if (key === 8 || key === 37) { // backspace, left
|
|
dropEvent(ev);
|
|
prev();
|
|
} else if (key === 13 || key === 32 || key === 39) { // enter, space, right
|
|
dropEvent(ev);
|
|
next();
|
|
} else if (key === 70) { // f
|
|
dropEvent(ev);
|
|
toggleFullscreen();
|
|
}
|
|
};
|
|
|
|
const enter = () => {
|
|
setLabels([]);
|
|
dom('#pv-container').clr();
|
|
dom('#pv-overlay').show();
|
|
dom(win).on('keydown', onKeydown);
|
|
updateGui();
|
|
};
|
|
|
|
const exit = () => {
|
|
setLabels([]);
|
|
dom('#pv-container').clr();
|
|
dom('#pv-overlay').hide();
|
|
dom(win).off('keydown', onKeydown);
|
|
};
|
|
|
|
const showSpinner = (show, src, delay) => {
|
|
win.clearTimeout(spinnerTimeoutId);
|
|
const $spinner = dom('#pv-spinner');
|
|
|
|
if (!show) {
|
|
spinnerIsVisible = false;
|
|
$spinner.hide();
|
|
return;
|
|
}
|
|
|
|
if (!spinnerIsVisible && delay) {
|
|
spinnerTimeoutId = win.setTimeout(() => showSpinner(true, src), delay);
|
|
return;
|
|
}
|
|
|
|
const $back = $spinner.find('.back');
|
|
if (src) {
|
|
$back.attr('src', src).show();
|
|
} else {
|
|
$back.hide();
|
|
}
|
|
spinnerIsVisible = true;
|
|
$spinner.show();
|
|
};
|
|
|
|
const Session = (items, idx, load, adjust) => {
|
|
const inst = Object.assign(Object.create(Session.prototype), {items, load, adjust});
|
|
inst.setIdx(idx);
|
|
return inst;
|
|
};
|
|
|
|
Session.prototype = {
|
|
setIdx(idx) {
|
|
this.idx = (idx + this.items.length) % this.items.length;
|
|
this.item = this.items[this.idx];
|
|
|
|
setIndex(this.idx + 1, this.items.length);
|
|
setRawLink(this.item.absHref);
|
|
setLabels([this.item.label]);
|
|
|
|
const item = this.item;
|
|
Promise.resolve()
|
|
.then(() => {
|
|
dom('#pv-container').hide().clr();
|
|
showSpinner(true, item.thumbSquare || item.icon, 200);
|
|
})
|
|
.then(() => this.load(item))
|
|
// delay for testing
|
|
// .then(x => new Promise(resolve => setTimeout(() => resolve(x), 1000)))
|
|
.then($content => {
|
|
if (item === this.item) {
|
|
dom('#pv-container').clr().app($content).show();
|
|
showSpinner(false);
|
|
updateGui();
|
|
}
|
|
});
|
|
},
|
|
|
|
moveIdx(delta) {
|
|
this.setIdx(this.idx + delta);
|
|
}
|
|
};
|
|
|
|
const register = (types, load, adjust) => {
|
|
const initItem = item => {
|
|
if (item.$view && includes(types, item.type)) {
|
|
item.$view.find('a').on('click', ev => {
|
|
ev.preventDefault();
|
|
|
|
const matchedItems = compact(dom('#items .item').map(el => {
|
|
const matchedItem = el._item;
|
|
return includes(types, matchedItem.type) ? matchedItem : null;
|
|
}));
|
|
|
|
session = Session(matchedItems, matchedItems.indexOf(item), load, adjust);
|
|
enter();
|
|
});
|
|
}
|
|
};
|
|
|
|
event.sub('view.changed', added => each(added, initItem));
|
|
};
|
|
|
|
const init = () => {
|
|
if (!settings.enabled) {
|
|
return;
|
|
}
|
|
|
|
dom(tplOverlay)
|
|
.hide()
|
|
.appTo('body')
|
|
.on('keydown', onKeydown)
|
|
.on('mousemove', userAlive)
|
|
.on('mousedown', userAlive)
|
|
.on('click', ev => {
|
|
if (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-container') {
|
|
exit();
|
|
}
|
|
})
|
|
.on('mousedown', dropEvent)
|
|
.on('mousemove', dropEvent)
|
|
.on('keydown', dropEvent)
|
|
.on('keypress', dropEvent);
|
|
|
|
dom('#pv-spinner').hide();
|
|
dom('#pv-bar-prev, #pv-prev-area').on('click', prev);
|
|
dom('#pv-bar-next, #pv-next-area').on('click', next);
|
|
dom('#pv-bar-close').on('click', exit);
|
|
dom('#pv-bar-fullscreen').on('click', toggleFullscreen);
|
|
|
|
dom(win)
|
|
.on('resize', updateGui)
|
|
.on('load', updateGui);
|
|
};
|
|
|
|
module.exports = {
|
|
setLabels,
|
|
register,
|
|
get item() {
|
|
return session && session.item;
|
|
}
|
|
};
|
|
|
|
init();
|