-
Notifications
You must be signed in to change notification settings - Fork 0
/
urturn-wall.js
134 lines (104 loc) · 3.03 KB
/
urturn-wall.js
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
/**
* Wall Code
*/
(function(window, document){
function WallManager(element) {
this.rootNode = element;
this.query = this.rootNode.getAttribute('data-query');
this.availableWidth = 0;
this.columnsCount = 0;
this.itemWidth = 0;
this.items = [];
this.columns = [];
this.columnsLength = [];
this.index = 0;
this.loaded = 0;
this.querrySuccess = function (result) {
console.log(result);
var thumbs = result.thumbnails;
var i = 0;
while (i < thumbs.length) {
this.items.push(thumbs[i]);
++i;
}
this.render();
};
this.querryError = function (error) {
console.log(error);
};
this.render = function() {
var i = this.index;
while (i < this.items.length) {
var img = new Image();
img.src = this.items[i].small;
img.style.width = this.itemWidth + 'px';
img.url = this.items[i].post_url;
img.onload = this.imgLoaded.bind(this);
img['data-item'] = i;
++i;
}
this.index = i;
};
this.imgLoaded = function(e) {
var img = e.target;
var imgHeight = img.height;
var column = this.getShorterColumnIndex();
this.columns[column].appendChild(img);
this.columnsLength[column] += imgHeight;
img.addEventListener('click', this.imgClicked.bind(this));
img.addEventListener('hover', this.imgHover.bind(this));
this.loaded++;
if (this.loaded == this.index - 50) {
this.loadMore();
}
};
this.loadMore = function() {
urturn.get(this.query, this.querrySuccess.bind(this), this.querryError.bind(this));
};
this.imgHover = function() {
};
this.imgClicked = function(e) {
var img = e.target;
console.log(img.url);
};
this.getShorterColumnIndex = function() {
var shorter = 0;
var i = 1;
while (i < this.columnsLength.length) {
if (this.columnsLength[i] < this.columnsLength[shorter]) {
shorter = i;
}
++i;
}
return shorter;
};
this.init = function() {
this.availableWidth = this.rootNode.offsetWidth;
this.columnsCount = (this.availableWidth / 200 | 0) + 1;
this.itemWidth = (this.availableWidth / this.columnsCount) - 2 | 0;
this.rootNode.style.padding = '0px';
var i = 0;
while (i < this.columnsCount) {
var column = document.createElement('div');
column.className = 'urtun-walls-col';
column.style.width = this.itemWidth + 'px';
column.style.float = 'left';
this.columns.push(column);
this.columnsLength.push(0);
this.rootNode.appendChild(column);
++i;
}
var clear = document.createElement('div');
clear.style.clear = 'both';
this.rootNode.appendChild(clear);
};
this.init();
this.loadMore();
}
var walls = document.getElementsByName('urturn-walls');
var i = 0;
while (i < walls.length) {
new WallManager(walls[i]);
++i;
}
})(window, document);