forked from GitHub/dbot
1a2595aaf2
This commit adds functionality to the loading callout in the imgur module. The size of the font used in the loading callout now increases in a linear fashion in proportion to the number of images viewed in a row. The size starts at 12px, and will increase to 72px at image 2000, with round figures at most "standard" font sizes. This is largely an experiment to see what it looks like: it might not be as nice looking now that the callout contains extra information (such as the view count). It may be worth experimenting with just increasing the count number and leaving the "a w with x views (y*z)" message at a static size, or perhaps by editing the colour variant, or even the position on the screen. I really just wanted some feedback to make it a bit more interesting for a heavy user that has reached high numbers of images. Some figures: * 12px is reached after 0 images * 14px is reached after 66 images * 16px is reached after 133 images * 18px is reached after 200 images * 21px is reached after 300 images * 24px is reached after 400 images * 36px is reached after 800 images * 48px is reached after 1,200 images * 60px is reached after 1,600 images * 72px is reached after 2,000 images * 144px is reached after 4,400 images.
28 lines
954 B
Plaintext
28 lines
954 B
Plaintext
!!! 5
|
|
html(lang='en')
|
|
head
|
|
meta(charset='utf-8')
|
|
script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
|
|
link(rel="stylesheet", href="/imgurr.css")
|
|
title random imgur
|
|
script
|
|
var count = 0;
|
|
function getNewImage() {
|
|
count += 1;
|
|
$('#loading').text('Loading image ' + count + '...');
|
|
$('#loading').css('font-size', ((count * 0.03) + 12));
|
|
$('#image').load(function(){});
|
|
$.get("/api/imgur/getRandomImage", function(d) {
|
|
$('#image').attr('src', d.data[0]);
|
|
$.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
|
|
$("#loading").text(count + ': ' + info.data[0]);
|
|
}, "json");
|
|
}, "json");
|
|
}
|
|
$(getNewImage());
|
|
$(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
|
|
body
|
|
div#loading Loading Image
|
|
div#container
|
|
img#image
|