-
Notifications
You must be signed in to change notification settings - Fork 0
/
wp-disqus-pt.js
187 lines (183 loc) · 8.41 KB
/
wp-disqus-pt.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/***
* Copyright (c) 2012 http://www.dforge.net
*
* More information can be found at:
* http://www.dforge.net/2012/12/14/wordpress-disqus-popular-threads-widget-using-pure-javascript/
*
* This software is released under MIT license:
* http://www.dforge.net/mit-license.txt
*
* Version 0.1 - Last updated: 2012.12.9
* Version 0.2 - Last updated: 2012.12.17 - Added fade in/out animation to popup (Webkit browser only).
*/
WpDisqusPt = function (config) {
/* Class options */
this.feedUrl = 'https://disqus.com/api/3.0/threads/listPopular.json'; /* You could use a different feed from Disqus API if you want :-) */
this.api_key = ''; /* Your Disqus API key goes here, or you can pass this parameter via class constructor */
this.forum = ''; /* Your Disqus forum ID goes here, or you can pass this parameter via class constructor */
this.days_back = '7d'; /* Days back to get data */
this.limit = '5'; /* Number of threads to retrieve */
this.colors = ['#f00', '#0f0', '#00f'];
this.data = null; /* Exposed so that it can be queried */
this.popup_hide_delay = 1000;
/* Private variables and methods */
var popup = null;
var popup_hide_timeout = null;
var parent = null;
var me = this;
var init = function () {
/* Get this script's parent node */
var scripts = document.getElementsByTagName('script');
parent = scripts[scripts.length - 1].parentNode;
me.createPopup();
};
var sendRequest = function (p) { /* To get around CORS issue with Disqus, we'll use JSONP (ugh) */
/* First, remove any prior script tags that were generated by this class */
var old_jsonp = document.getElementById('wp-disqus-pt');
if(old_jsonp) {
parent.removeChild(old_jsonp);
};
/* Build the script tag to do the JSONP request */
var jsonp = document.createElement('script');
jsonp.id = 'wp-disqus-pt';
jsonp.type = 'text/javascript';
jsonp.src = p.req + (p.req.indexOf('?') == -1 ? '?' : '') + serialize(p.req_vars);
parent.appendChild(jsonp);
};
var getName = function () { /* Method to determine this instance's name in order to do the handleData JSONP callback */
for (var name in window)
if (window[name] == me)
return name;
};
var serialize = function (o) { /* Used to build GET request to Disqus */
var str = "";
for(p in o) {
str += p + "=" + o[p] + "&";
};
if(str.length > 0) str = str.substr(0, str.length - 1);
return str;
};
/* Public methods */
this.mouseover = function (e) {
var num_posts = '<div style="float: right; font-weight: bold; font-size: 12px">' + this.data[e.target.getAttribute('data-index')].postsInInterval + ' comment(s)</div>';
var top_post = this.data[e.target.getAttribute('data-index')].topPost;
var author_image = '<a href="' + top_post.author.profileUrl + '"><img src="' + top_post.author.avatar.small.permalink + '" border="none" style="float: left; margin: 2px 5px 5px 0px; width: 45px; height: 45px; border-radius: 3px;" /></a>';
var comment = '<div style="height: 60px; text-overflow: ellipsis; overflow: hidden; font-size: 12px; line-height: 15px;">' + author_image + (top_post.raw_message || '') + '</div>';
var top_post_link = '<div><a href="' + this.data[e.target.getAttribute('data-index')].link + '#comment-' + this.data[e.target.getAttribute('data-index')].topPost.id + '" style="color: #fff; font-weight: bold; font-size: 12px">Latest Comment</a></div>';
if(top_post.message) {
this.showPopup({
contents: top_post_link + comment + num_posts,
top: e.target.getBoundingClientRect().top + (e.view.scrollY || ((document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body).scrollTop) - 10,
left: e.target.getBoundingClientRect().left + (e.view.scrollX || ((document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body).scrollLeft) - 270
});
}
else {
this.hidePopup();
};
};
this.mouseout = function (e) {
this.hidePopup();
};
this.createPopup = function () { /* You can use this popup, or role your own :-) */
popup = document.createElement('div');
popup.id = 'wp-disqus-pt-popup'
popup.style['visibility'] = 'hidden';
popup.style['opacity'] = '0';
popup.setAttribute('class', 'wp-disqus-pt-popup');
document.body.appendChild(popup);
};
this.showPopup = function (p) {
p = p || {};
p = {
contents: p.contents || '',
top: p.top || 0,
left: p.left || 0
};
popup.innerHTML = p.contents;
popup.style['-webkit-transition-property'] = 'visibility, opacity';
popup.style['-webkit-transition-duration'] = '0.25s';
popup.style['visibility'] = 'visible';
popup.style['opacity'] = '1';
popup.style['left'] = p.left + 'px';
popup.style['top'] = p.top + 'px';
};
this.hidePopup = function () {
popup.style['-webkit-transition-property'] = 'visibility, opacity, left';
popup.style['-webkit-transition-duration'] = '0.25s';
popup.style['visibility'] = 'hidden';
popup.style['opacity'] = '0';
popup.style['left'] = (parseInt(popup.style['left']) - 10) + 'px';
};
this.getData = function () {
sendRequest({
req: me.feedUrl,
req_vars: {
api_key: me.api_key,
forum: me.forum,
interval: me.days_back,
limit: me.limit,
with_top_post: 'true',
related: 'author',
callback: getName() + '.handleData'
}
});
};
this.handleData = function (d) { /* Needs to be public in order for the JSONP callback to work */
me.data = d.response;
var max_comments = Math.max.apply(Math, me.data.map(function (o) { return o.postsInInterval; }));
var comments = document.createElement('div');
comments.id = 'popularcomments';
for (var i in me.data) {
var cdata = me.data[i];
var comment = document.createElement('div');
var comment_count = document.createElement('div');
var comment_graph = document.createElement('div');
var comment_title_container = document.createElement('div');
var comment_title = document.createElement('a');
var comment_title_temp = document.createElement('div');
comment_title_temp.innerHTML = cdata.title; /* Javascript HTML entity decode hack */
comment_title.appendChild(document.createTextNode(comment_title_temp.firstChild.nodeValue));
comment_title.setAttribute('href', cdata.link);
comment_count.appendChild(document.createTextNode(cdata.postsInInterval));
comment_count.setAttribute('class', 'wp-disqus-pt-popularcomment-count');
comment_count.setAttribute('data-index', i);
comment_title_container.appendChild(comment_count);
comment_title_container.appendChild(comment_title);
comment_title_container.setAttribute('class', 'wp-disqus-pt-popularcomment-container');
comment_title_container.setAttribute('style', 'position: relative');
comment_graph.appendChild(comment_title_container);
comment_graph.setAttribute('class', 'wp-disqus-pt-popularcomment-graph');
comment_graph.setAttribute('style', 'width: ' + (((cdata.postsInInterval / max_comments) * 50) + 50) + '%; background-color: ' + me.colors[i]);
comment.appendChild(comment_graph);
comment.setAttribute('class', 'wp-disqus-pt-popularcomment');
comments.appendChild(comment);
comment_count.addEventListener('mouseover', function (e) { /* Listener for comment hover (e.g. to display author info) */
clearTimeout(popup_hide_timeout);
me.mouseover(e);
});
};
/* Add some listeners to handle hiding the author info popup */
popup.addEventListener('mouseout', function (e) {
clearTimeout(popup_hide_timeout);
popup_hide_timeout = setTimeout(function (e) { /* Using setTimeout on mouseout event (e.g. to give delay for closing out a popup) */
me.mouseout(e);
}, me.popup_hide_delay); /* You could set popup_hide_delay to 0 if you need to have the mouseout even execute right away */
});
popup.addEventListener('mouseover', function (e) {
clearTimeout(popup_hide_timeout);
});
comments.addEventListener('mouseout', function (e) {
clearTimeout(popup_hide_timeout);
popup_hide_timeout = setTimeout(function (e) {
me.mouseout(e);
}, me.popup_hide_delay);
});
parent.appendChild(comments);
};
/* Class constructor */
var constructor = function (c) {
for(p in c) { me[p] = c[p]; };
init();
};
constructor(config);
};