mirror of
https://github.com/Sarjuuk/aowow.git
synced 2025-11-29 15:58:16 +08:00
6557e70d5c
* split global.js into its components, so it can be reasonably processed by setup * make reputation requirements configurable * move Markup and Locale back into global.js (removed associated build scripts) * extend Icon to display iconId in lightbox popup
625 lines
17 KiB
JavaScript
625 lines
17 KiB
JavaScript
/*
|
|
Global screenshot-related functions
|
|
*/
|
|
function ss_submitAScreenshot()
|
|
{
|
|
tabsContribute.focus(1);
|
|
}
|
|
|
|
function ss_validateForm(f)
|
|
{
|
|
if (!f.elements['screenshotfile'].value.length)
|
|
{
|
|
alert(LANG.message_noscreenshot);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function ss_appendSticky()
|
|
{
|
|
var _ = $WH.ge('infobox-sticky-ss');
|
|
|
|
var type = g_pageInfo.type;
|
|
var typeId = g_pageInfo.typeId;
|
|
|
|
var pos = $WH.in_array(lv_screenshots, 1, function(x) { return x.sticky; });
|
|
|
|
if (pos != -1)
|
|
{
|
|
var screenshot = lv_screenshots[pos];
|
|
|
|
var a = $WH.ce('a');
|
|
a.href = '#screenshots:id=' + screenshot.id;
|
|
a.onclick = function(e) {
|
|
ScreenshotViewer.show({ screenshots: lv_screenshots, pos: pos });
|
|
return $WH.rf2(e);
|
|
};
|
|
|
|
var size = (lv_videos && lv_videos.length ? [120, 90] : [150, 150]);
|
|
var img = $WH.ce('img'),
|
|
scale = Math.min(size[0] / screenshot.width, size[1] / screenshot.height);
|
|
|
|
img.src = g_staticUrl + '/uploads/screenshots/thumb/' + screenshot.id + '.jpg';
|
|
img.width = Math.round(scale * screenshot.width);
|
|
img.height = Math.round(scale * screenshot.height);
|
|
img.className = 'border';
|
|
$WH.ae(a, img);
|
|
|
|
$WH.ae(_, a);
|
|
|
|
var th = $WH.ge('infobox-screenshots');
|
|
var a = $WH.ce('a');
|
|
|
|
if (!th)
|
|
{
|
|
var sections = $('th', _.parentNode);
|
|
th = sections[sections.length - (lv_videos && lv_videos.length ? 2 : 1)];
|
|
}
|
|
|
|
$WH.ae(a, $WH.ct(th.textContent + ' (' + lv_screenshots.length + ')'));
|
|
a.href = '#screenshots'
|
|
a.title = $WH.sprintf(LANG.infobox_showall, lv_screenshots.length);
|
|
a.onclick = function() {
|
|
tabsRelated.focus((lv_videos && lv_videos.length) || (g_user && g_user.roles & (U_GROUP_ADMIN | U_GROUP_BUREAU | U_GROUP_VIDEO)) ? -2 : -1);
|
|
return false;
|
|
};
|
|
$WH.ee(th);
|
|
$WH.ae(th, a);
|
|
}
|
|
else
|
|
{
|
|
var a;
|
|
|
|
if (g_user.id > 0)
|
|
a = '<a href="javascript:;" onclick="ss_submitAScreenshot(); return false">';
|
|
else
|
|
a = '<a href="?account=signin">';
|
|
|
|
_.innerHTML = $WH.sprintf(LANG.infobox_noneyet, a + LANG.infobox_submitone + '</a>');
|
|
}
|
|
}
|
|
|
|
var g_screenshots = {};
|
|
|
|
var ScreenshotViewer = new function()
|
|
{
|
|
var screenshots,
|
|
pos,
|
|
imgWidth,
|
|
imgHeight,
|
|
scale,
|
|
desiredScale,
|
|
|
|
oldHash,
|
|
mode = 0,
|
|
collectionId,
|
|
|
|
container,
|
|
screen,
|
|
imgDiv,
|
|
aPrev,
|
|
aNext,
|
|
aCover,
|
|
aOriginal,
|
|
divFrom,
|
|
divCaption,
|
|
|
|
loadingImage,
|
|
lightboxComponents;
|
|
|
|
function computeDimensions(captionExtraHeight)
|
|
{
|
|
var screenshot = screenshots[pos];
|
|
|
|
var availHeight = Math.max(50, Math.min(618, $WH.g_getWindowSize().h - 72 - captionExtraHeight));
|
|
|
|
if (mode != 1 || screenshot.id || screenshot.resize)
|
|
{
|
|
desiredScale = Math.min(772 / screenshot.width, 618 / screenshot.height);
|
|
scale = Math.min(772 / screenshot.width, availHeight / screenshot.height);
|
|
}
|
|
else
|
|
{
|
|
desiredScale = scale = 1;
|
|
}
|
|
|
|
if (desiredScale > 1)
|
|
desiredScale = 1;
|
|
|
|
if (scale > 1)
|
|
scale = 1;
|
|
|
|
imgWidth = Math.round(scale * screenshot.width);
|
|
imgHeight = Math.round(scale * screenshot.height);
|
|
|
|
var lbWidth = Math.max(480, imgWidth);
|
|
|
|
Lightbox.setSize(lbWidth + 20, imgHeight + 52 + captionExtraHeight);
|
|
|
|
if (captionExtraHeight)
|
|
{
|
|
imgDiv.firstChild.width = imgWidth;
|
|
imgDiv.firstChild.height = imgHeight;
|
|
}
|
|
}
|
|
|
|
function getPound(pos)
|
|
{
|
|
var screenshot = screenshots[pos],
|
|
buff = '#screenshots:';
|
|
|
|
if (mode == 0)
|
|
buff += 'id=' + screenshot.id;
|
|
else
|
|
buff += collectionId + ':' + (pos + 1);
|
|
|
|
return buff;
|
|
}
|
|
|
|
function render(resizing)
|
|
{
|
|
if (resizing && (scale == desiredScale) && $WH.g_getWindowSize().h > container.offsetHeight)
|
|
return;
|
|
|
|
container.style.visibility = 'hidden';
|
|
|
|
var screenshot = screenshots[pos],
|
|
resized = (screenshot.width > 772 || screenshot.height > 618);
|
|
|
|
computeDimensions(0);
|
|
|
|
var url = (screenshot.url ? screenshot.url : g_staticUrl + '/uploads/screenshots/' + (resized ? 'resized/' : 'normal/') + screenshot.id + '.jpg');
|
|
|
|
var html =
|
|
'<img src="' + url + '"'
|
|
+ ' width="' + imgWidth + '"'
|
|
+ ' height="' + imgHeight + '"'
|
|
+ '>';
|
|
|
|
imgDiv.innerHTML = html;
|
|
|
|
if (!resizing)
|
|
{
|
|
g_trackEvent('Screenshots', 'Show', screenshot.id + ( (screenshot.caption && screenshot.caption.length) ? ' (' + screenshot.caption + ')' : ''));
|
|
|
|
// ORIGINAL
|
|
|
|
if (screenshot.url)
|
|
aOriginal.href = url;
|
|
else
|
|
aOriginal.href = g_staticUrl + '/uploads/screenshots/normal/' + screenshot.id + '.jpg';
|
|
|
|
// FROM
|
|
|
|
if (!screenshot.user && typeof g_pageInfo == 'object')
|
|
screenshot.user = g_pageInfo.username;
|
|
|
|
var hasFrom1 = (screenshot.date && screenshot.user),
|
|
hasFrom2 = (screenshots.length > 1);
|
|
|
|
if (hasFrom1)
|
|
{
|
|
var postedOn = new Date(screenshot.date),
|
|
elapsed = (g_serverTime - postedOn) / 1000;
|
|
|
|
var a = divFrom.firstChild.childNodes[1];
|
|
a.href = '?user=' + screenshot.user;
|
|
a.innerHTML = screenshot.user;
|
|
|
|
var s = divFrom.firstChild.childNodes[3];
|
|
|
|
$WH.ee(s);
|
|
g_formatDate(s, elapsed, postedOn);
|
|
|
|
divFrom.firstChild.style.display = '';
|
|
}
|
|
else
|
|
divFrom.firstChild.style.display = 'none';
|
|
|
|
var s = divFrom.childNodes[1];
|
|
$WH.ee(s);
|
|
if (screenshot.user)
|
|
{
|
|
if (hasFrom1)
|
|
$WH.ae(s, $WH.ct(' ' + LANG.dash + ' '));
|
|
|
|
var a = $WH.ce('a');
|
|
a.href = 'javascript:;';
|
|
a.onclick = ContactTool.show.bind(ContactTool, {
|
|
mode: 3,
|
|
screenshot: screenshot
|
|
});
|
|
a.className = 'icon-report';
|
|
g_addTooltip(a, LANG.report_tooltip, 'q2');
|
|
$WH.ae(a, $WH.ct(LANG.report));
|
|
$WH.ae(s, a);
|
|
}
|
|
|
|
s = divFrom.childNodes[2];
|
|
|
|
if (hasFrom2)
|
|
{
|
|
var buff = '';
|
|
if (screenshot.user)
|
|
buff = LANG.dash;
|
|
|
|
buff += (pos + 1) + LANG.lvpage_of + screenshots.length;
|
|
|
|
s.innerHTML = buff;
|
|
s.style.display = '';
|
|
}
|
|
else
|
|
s.style.display = 'none';
|
|
|
|
divFrom.style.display = (hasFrom1 || hasFrom2 ? '' : 'none');
|
|
|
|
// CAPTION
|
|
|
|
// aowow - be locale agnostic
|
|
// if (Locale.getId() != LOCALE_ENUS && screenshot.caption)
|
|
// screenshot.caption = '';
|
|
|
|
var hasCaption = (screenshot.caption != null && screenshot.caption.length);
|
|
var hasSubject = (screenshot.subject != null && screenshot.subject.length && screenshot.type && screenshot.typeId);
|
|
|
|
if (hasCaption || hasSubject)
|
|
{
|
|
var html = '';
|
|
|
|
if (hasSubject)
|
|
{
|
|
html += LANG.types[screenshot.type][0] + LANG.colon;
|
|
html += '<a href="?' + g_types[screenshot.type] + '=' + screenshot.typeId + '">';
|
|
html += screenshot.subject;
|
|
html += '</a>';
|
|
}
|
|
|
|
if (hasCaption)
|
|
{
|
|
if (hasSubject)
|
|
html += LANG.dash;
|
|
|
|
html += (screenshot.noMarkup ? screenshot.caption : Markup.toHtml(screenshot.caption, { mode: Markup.MODE_SIGNATURE }));
|
|
}
|
|
|
|
divCaption.innerHTML = html;
|
|
divCaption.style.display = '';
|
|
}
|
|
else
|
|
divCaption.style.display = 'none';
|
|
|
|
// URLS
|
|
|
|
if (screenshots.length > 1)
|
|
{
|
|
aPrev.href = getPound(peekPos(-1));
|
|
aNext.href = getPound(peekPos( 1));
|
|
|
|
aPrev.style.display = aNext.style.display = '';
|
|
aCover.style.display = 'none';
|
|
}
|
|
else
|
|
{
|
|
aPrev.style.display = aNext.style.display = 'none';
|
|
aCover.style.display = '';
|
|
}
|
|
|
|
location.replace(getPound(pos));
|
|
}
|
|
|
|
Lightbox.reveal();
|
|
|
|
if (divCaption.offsetHeight > 18)
|
|
computeDimensions(divCaption.offsetHeight - 18);
|
|
|
|
container.style.visibility = 'visible';
|
|
}
|
|
|
|
function peekPos(change)
|
|
{
|
|
var foo = pos;
|
|
foo += change;
|
|
|
|
if (foo < 0)
|
|
foo = screenshots.length - 1;
|
|
else if (foo >= screenshots.length)
|
|
foo = 0;
|
|
|
|
return foo;
|
|
}
|
|
|
|
function prevScreenshot()
|
|
{
|
|
pos = peekPos(-1);
|
|
onRender();
|
|
|
|
return false;
|
|
}
|
|
|
|
function nextScreenshot()
|
|
{
|
|
pos = peekPos(1);
|
|
onRender();
|
|
|
|
return false;
|
|
}
|
|
|
|
function onKeyUp(e)
|
|
{
|
|
e = $WH.$E(e);
|
|
|
|
switch (e.keyCode)
|
|
{
|
|
case 37: // Left
|
|
prevScreenshot();
|
|
break;
|
|
|
|
case 39: // Right
|
|
nextScreenshot();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function onResize()
|
|
{
|
|
render(1);
|
|
}
|
|
|
|
function onHide()
|
|
{
|
|
cancelImageLoading();
|
|
|
|
if (screenshots.length > 1)
|
|
$WH.dE(document, 'keyup', onKeyUp);
|
|
|
|
if (oldHash && mode == 0)
|
|
{
|
|
if (oldHash.indexOf(':id=') != -1)
|
|
oldHash = '#screenshots';
|
|
|
|
location.replace(oldHash);
|
|
}
|
|
else
|
|
location.replace('#.');
|
|
}
|
|
|
|
function onShow(dest, first, opt)
|
|
{
|
|
if (typeof opt.screenshots == 'string')
|
|
{
|
|
screenshots = g_screenshots[opt.screenshots];
|
|
mode = 1;
|
|
collectionId = opt.screenshots;
|
|
}
|
|
else
|
|
{
|
|
screenshots = opt.screenshots;
|
|
mode = 0;
|
|
collectionId = null;
|
|
}
|
|
container = dest;
|
|
|
|
pos = 0;
|
|
if (opt.pos && opt.pos >= 0 && opt.pos < screenshots.length)
|
|
pos = opt.pos;
|
|
|
|
if (first)
|
|
{
|
|
dest.className = 'screenshotviewer';
|
|
|
|
screen = $WH.ce('div');
|
|
|
|
screen.className = 'screenshotviewer-screen';
|
|
|
|
aPrev = $WH.ce('a');
|
|
aNext = $WH.ce('a');
|
|
aPrev.className = 'screenshotviewer-prev';
|
|
aNext.className = 'screenshotviewer-next';
|
|
aPrev.href = 'javascript:;';
|
|
aNext.href = 'javascript:;';
|
|
|
|
var foo = $WH.ce('span');
|
|
var b = $WH.ce('b');
|
|
// $WH.ae(b, $WH.ct(LANG.previous));
|
|
$WH.ae(foo, b);
|
|
$WH.ae(aPrev, foo);
|
|
var foo = $WH.ce('span');
|
|
var b = $WH.ce('b');
|
|
// $WH.ae(b, $WH.ct(LANG.next));
|
|
$WH.ae(foo, b);
|
|
$WH.ae(aNext, foo);
|
|
|
|
aPrev.onclick = prevScreenshot;
|
|
aNext.onclick = nextScreenshot;
|
|
|
|
aCover = $WH.ce('a');
|
|
aCover.className = 'screenshotviewer-cover';
|
|
aCover.href = 'javascript:;';
|
|
aCover.onclick = Lightbox.hide;
|
|
var foo = $WH.ce('span');
|
|
var b = $WH.ce('b');
|
|
// $WH.ae(b, $WH.ct(LANG.close));
|
|
$WH.ae(foo, b);
|
|
$WH.ae(aCover, foo);
|
|
|
|
$WH.ae(screen, aPrev);
|
|
$WH.ae(screen, aNext);
|
|
$WH.ae(screen, aCover);
|
|
|
|
imgDiv = $WH.ce('div');
|
|
$WH.ae(screen, imgDiv);
|
|
|
|
$WH.ae(dest, screen);
|
|
|
|
var aClose = $WH.ce('a');
|
|
aClose.className = 'screenshotviewer-close';
|
|
// aClose.className = 'dialog-x';
|
|
aClose.href = 'javascript:;';
|
|
aClose.onclick = Lightbox.hide;
|
|
$WH.ae(aClose, $WH.ce('span')); // aowow - 'close' from texture atlas
|
|
// $WH.ae(aClose, $WH.ct(LANG.close));
|
|
$WH.ae(dest, aClose);
|
|
|
|
aOriginal = $WH.ce('a');
|
|
aOriginal.className = 'screenshotviewer-original';
|
|
// aOriginal.className = 'dialog-arrow';
|
|
aOriginal.href = 'javascript:;';
|
|
aOriginal.target = '_blank';
|
|
$WH.ae(aOriginal, $WH.ce('span')); // aowow - 'original' from texture atlas
|
|
// $WH.ae(aOriginal, $WH.ct(LANG.original));
|
|
$WH.ae(dest, aOriginal);
|
|
|
|
divFrom = $WH.ce('div');
|
|
divFrom.className = 'screenshotviewer-from';
|
|
var sp = $WH.ce('span');
|
|
$WH.ae(sp, $WH.ct(LANG.lvscreenshot_from));
|
|
$WH.ae(sp, $WH.ce('a'));
|
|
$WH.ae(sp, $WH.ct(' '));
|
|
$WH.ae(sp, $WH.ce('span'));
|
|
$WH.ae(divFrom, sp);
|
|
$WH.ae(divFrom, $WH.ce('span'));
|
|
$WH.ae(divFrom, $WH.ce('span'));
|
|
$WH.ae(dest, divFrom);
|
|
|
|
divCaption = $WH.ce('div');
|
|
divCaption.className = 'screenshotviewer-caption';
|
|
$WH.ae(dest, divCaption);
|
|
|
|
var d = $WH.ce('div');
|
|
d.className = 'clear';
|
|
$WH.ae(dest, d);
|
|
}
|
|
|
|
oldHash = location.hash;
|
|
|
|
if (screenshots.length > 1)
|
|
$WH.aE(document, 'keyup', onKeyUp);
|
|
|
|
onRender();
|
|
}
|
|
|
|
function onRender()
|
|
{
|
|
var screenshot = screenshots[pos];
|
|
if (!screenshot.width || !screenshot.height)
|
|
{
|
|
if (loadingImage)
|
|
{
|
|
loadingImage.onload = null;
|
|
loadingImage.onerror = null;
|
|
}
|
|
else
|
|
{
|
|
container.className = '';
|
|
lightboxComponents = [];
|
|
while (container.firstChild)
|
|
{
|
|
lightboxComponents.push(container.firstChild);
|
|
$WH.de(container.firstChild);
|
|
}
|
|
}
|
|
|
|
var lightboxTimer = setTimeout(function() {
|
|
screenshot.width = 126;
|
|
screenshot.height = 22;
|
|
computeDimensions(0);
|
|
screenshot.width = null;
|
|
screenshot.height = null;
|
|
|
|
var div = $WH.ce('div');
|
|
div.style.margin = '0 auto';
|
|
div.style.width = '126px';
|
|
var img = $WH.ce('img');
|
|
img.src = g_staticUrl + '/images/ui/misc/progress-anim.gif';
|
|
img.width = 126;
|
|
img.height = 22;
|
|
$WH.ae(div, img);
|
|
$WH.ae(container, div);
|
|
|
|
Lightbox.reveal();
|
|
container.style.visiblity = 'visible';
|
|
}, 150);
|
|
|
|
loadingImage = new Image();
|
|
loadingImage.onload = (function(screen, timer) {
|
|
clearTimeout(timer);
|
|
screen.width = this.width;
|
|
screen.height = this.height;
|
|
loadingImage = null;
|
|
restoreLightbox();
|
|
render();
|
|
}).bind(loadingImage, screenshot, lightboxTimer);
|
|
loadingImage.onerror = (function(timer) {
|
|
clearTimeout(timer);
|
|
loadingImage = null;
|
|
Lightbox.hide();
|
|
restoreLightbox();
|
|
}).bind(loadingImage, lightboxTimer);
|
|
loadingImage.src = (screenshot.url ? screenshot.url : g_staticUrl + '/uploads/screenshots/normal/' + screenshot.id + '.jpg');
|
|
}
|
|
else
|
|
render();
|
|
}
|
|
|
|
function cancelImageLoading()
|
|
{
|
|
if (!loadingImage)
|
|
return;
|
|
|
|
loadingImage.onload = null;
|
|
loadingImage.onerror = null;
|
|
loadingImage = null;
|
|
|
|
restoreLightbox();
|
|
}
|
|
|
|
function restoreLightbox()
|
|
{
|
|
if (!lightboxComponents)
|
|
return;
|
|
|
|
$WH.ee(container);
|
|
container.className = 'screenshotviewer';
|
|
for (var i = 0; i < lightboxComponents.length; ++i)
|
|
$WH.ae(container, lightboxComponents[i]);
|
|
lightboxComponents = null;
|
|
}
|
|
|
|
this.checkPound = function()
|
|
{
|
|
if (location.hash && location.hash.indexOf('#screenshots') == 0)
|
|
{
|
|
if (!g_listviews['screenshots']) // Standalone screenshot viewer
|
|
{
|
|
var parts = location.hash.split(':');
|
|
if (parts.length == 3)
|
|
{
|
|
var collection = g_screenshots[parts[1]],
|
|
p = parseInt(parts[2]);
|
|
|
|
if (collection && p >= 1 && p <= collection.length)
|
|
{
|
|
ScreenshotViewer.show({
|
|
screenshots: parts[1],
|
|
pos: p - 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.show = function(opt)
|
|
{
|
|
Lightbox.show('screenshotviewer', {
|
|
onShow: onShow,
|
|
onHide: onHide,
|
|
onResize: onResize
|
|
}, opt);
|
|
}
|
|
|
|
$(document).ready(this.checkPound);
|
|
};
|