blob: bef6f7ec740f75e5ffefa75c8ebfb6988e1d3a1d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
var imageQueue = []
function fetch(){
$.ajax({
"url": "http://pipes.yahoo.com/pipes/pipe.run?_id=59b7cad3b8fb595fa7cb3c2fdf0ab328&_render=json&_callback=fetched",
"dataType": "jsonp"
})
log("fetching more images")
}
function fetched(data){
log("images fetched")
var imageUrls = []
try {
var images = data['value']['items'][0]['recent-images']['recent-image']
for(var i = 0; i < images.length; i++)
imageQueue.push(images[i]['img'])
} catch(e) {
console.log("couldn't parse object:")
console.log(data)
}
}
function log(m){
$("#log").html(m)
}
function go(){
messagePane = $("#chat")[0]
maxImages = $("#max-images")[0]
imagePoster()
scrollToEnd()
scrollWatcher()
}
function imagePoster(){
if (!imageQueue.length){
log("queue empty")
} else if (Paused) {
log("paused")
} else {
log(imageQueue.length + " images in queue ... posting image")
var image = imageQueue.shift()
imagePost(image)
}
setTimeout(imagePoster, 500)
}
imagePosts = 0
function imagePost(image){
imagePosts += 1
while (imagePosts > maxImages.value) {
var imgs = $(".image-post:first")
if (imgs.length) {
imgs.remove()
} else {
break
}
imagePosts -= 1
}
var i = $("<img/>").attr("src", image) //.load(scrollIfPossible).error(scrollIfPossible)
var d = $("<div class='image-post'/>").html("username: ")
d.append(i).appendTo("#chat")
}
var Paused = false
function pausego(){
Paused = !Paused
$("#pausego-button").html(Paused ? "go" : "pause")
}
function isScrolledToBottom(){
var threshold = 50;
var containerHeight = messagePane.style.pixelHeight || messagePane.offsetHeight
var currentHeight = (messagePane.scrollHeight > 0) ? messagePane.scrollHeight : 0
var result = (currentHeight - messagePane.scrollTop - containerHeight < threshold);
return result;
}
function scrollIfPossible(){
if (lastScriptedScrolledPosition >= messagePane.scrollTop || isScrolledToBottom())
scrollToEnd()
}
var lastScriptedScrolledPosition = 0
function scrollToEnd(){
messagePane.scrollTop = messagePane.scrollHeight
lastScriptedScrolledPosition = messagePane.scrollTop
}
function scrollWatcher(){
scrollIfPossible()
setTimeout(scrollWatcher, 500)
}
</script>
<style>
#chat { width: 500px; height: 90%; overflow: scroll; }
img { max-height: 300px; }
</style>
</head>
<body>
<div id="chat">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
<p id="log"></p>
<button onclick="fetch()">add images</button>
<button onclick="pausego()" id="pausego-button">pause</button>
<br />
max image posts: <input name="max-images" id="max-images" value="50" />
</body>
<script>
go()
</script>
</html>
|
