Skip to content
This repository was archived by the owner on Apr 28, 2022. It is now read-only.

Commit e5050a4

Browse files
sidvishnoisidvishnoi
committed
Add Comments options (almost working)
Add a fake like button on post
1 parent 2a50a9c commit e5050a4

File tree

4 files changed

+440
-14
lines changed

4 files changed

+440
-14
lines changed

‎dist/inject.js‎

Lines changed: 215 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,217 @@ fbDevInterest.splitPostBody = function(content) {
8585
return postBody;
8686
}
8787

88+
89+
fbDevInterest.showComments = function(json, parent) {
90+
const self = this;
91+
const addComment = function (e, p) {
92+
console.log(e);
93+
const created_time = new Date(e.created_time);
94+
const commentHtml = `
95+
<div class="_3b-9">
96+
<div>
97+
<div direction="left" class="clearfix">
98+
<div class="_ohe lfloat"><a target="_blank" href="https://www.facebook.com/${e.from.id}" class="img _8o _8s UFIImageBlockImage" tabindex="-1" aria-hidden="true"><img alt="${e.from.name}" class="img UFIActorImage _54ru img" src="https://graph.facebook.com/${e.from.id}/picture?&access_token=${self._apiKey}&type=normal"></a></div>
99+
<div class="">
100+
<div class="UFIImageBlockContent _42ef">
101+
<div class="UFICommentContentBlock">
102+
<div class="UFICommentContent">
103+
<span class="UFICommentActorAndBody">
104+
<span class=""><a class=" UFICommentActorName" target="_blank" href="https://www.facebook.com/${e.from.id}">${e.from.name}</a></span>
105+
<span class="UFICommentBody"><span>${e.message.linkify()}</span></span>
106+
</span>
107+
<div class="fsm fwn fcg UFICommentActions"><span class="_6a _3-me">
108+
</span><a class="uiLinkSubtle" href="${e.permalink_url}" target="_blank"><abbr class="livetimestamp" title="${created_time.format('dddd, d MMMM yyyy at hh:mm')}" data-shorten="true">${created_time.format('d MMMM at HH:mm')}</abbr></a></span></div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
`;
117+
const comment = document.createElement('div');
118+
comment.classList.add(...'UFIRow _48ph _48pi UFIComment _4oep'.split(' '));
119+
comment.style.borderTop = 'none';
120+
comment.innerHTML = commentHtml;
121+
p.appendChild(comment);
122+
return comment;
123+
}
124+
const addReply = function (e, p) {
125+
const created_time = new Date(e.created_time);
126+
const replyHtml = `
127+
<div class="_3b-9">
128+
<div>
129+
<div direction="left" class="clearfix">
130+
<div class="_ohe lfloat">
131+
<a target="_blank" href="https://www.facebook.com/${e.from.id}" class="img _8o _8s UFIImageBlockImage" tabindex="-1" aria-hidden="true"><img alt="${e.from.name}" class="img UFIActorImage _54ru img" src="https://graph.facebook.com/${e.from.id}/picture?&access_token=${self._apiKey}&type=normal"></a>
132+
</div>
133+
<div class="">
134+
<div class="UFIImageBlockContent _42ef">
135+
<div class="UFICommentContentBlock">
136+
<div class="UFICommentContent">
137+
<span class="UFICommentActorAndBody">
138+
<span class=""><a class=" UFICommentActorName" target="_blank" href="https://www.facebook.com/${e.from.id}">${e.from.name}</a></span>
139+
<span class="UFICommentBody"><span>${e.message.linkify()}</span></span>
140+
</span>
141+
<div class="fsm fwn fcg UFICommentActions"><span class="_6a _3-me">
142+
</span><a class="uiLinkSubtle" href="${e.permalink_url}" target="_blank"><abbr class="livetimestamp" title="${created_time.format('dddd, d MMMM yyyy at hh:mm')}" data-shorten="true">${created_time.format('d MMMM at HH:mm')}</abbr></a></span></div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
`;
151+
const reply = document.createElement('div');
152+
reply.classList.add(...'UFIRow _48ph _48pi _4204 UFIComment _4oep'.split(' '));
153+
reply.style.borderLeftWidth = '2px';
154+
reply.innerHTML = replyHtml;
155+
p.appendChild(reply);
156+
return reply;
157+
}
158+
159+
if (!json.comments) return;
160+
for (const $comment of json.comments.data) {
161+
const comment = addComment($comment, parent);
162+
const replyList = document.createElement('div');
163+
replyList.classList.add('UFIReplyList');
164+
parent.appendChild(replyList);
165+
if (!$comment.comments) continue;
166+
for (const $reply of $comment.comments.data) {
167+
const reply = addReply($reply, replyList)
168+
}
169+
}
170+
}
171+
172+
fbDevInterest.getComments = function(postid, parent) {
173+
const createCommentArea = function(pid, p) {
174+
const html = `
175+
<div class="UFIRow UFIPagerRow _4oep _48pi _4204">
176+
<div direction="right" class="clearfix">
177+
<div class="_ohf rfloat"></div>
178+
<div class=""><a class="UFIPagerLink" target="_blank" href="https://facebook.com/${pid}" role="button">View all comments</a></div>
179+
</div>
180+
</div>
181+
`;
182+
183+
const commentsArea = document.createElement('form');
184+
commentsArea.classList.add('commentable_item');
185+
p.appendChild(commentsArea);
186+
187+
const c0 = document.createElement('div');
188+
c0.classList.add(...'uiUfi UFIContainer _5pc9 _5vsj _5v9k'.split(' '));
189+
commentsArea.appendChild(c0);
190+
191+
const c1 = document.createElement('div');
192+
c1.classList.add('UFIList');
193+
c1.innerHTML = `<h6 class="accessible_elem">Comments</h6>`;
194+
c0.appendChild(c1);
195+
196+
const c2 = document.createElement('div');
197+
c2.classList.add(...'_3b-9 _j6a'.split(' '));
198+
c1.appendChild(c2);
199+
200+
const c3 = document.createElement('div');
201+
c3.innerHTML = html;
202+
c2.appendChild(c3);
203+
204+
205+
return c3;
206+
}
207+
const commentsArea = createCommentArea(postid, parent);
208+
209+
const fetchUrl = `https://graph.facebook.com/v2.11/${postid}/?&access_token=${fbDevInterest._apiKey}&fields=comments{from,permalink_url,message,created_time,comments{from,permalink_url,message,created_time}},permalink_url`;
210+
console.log(fetchUrl);
211+
fetch(fetchUrl)
212+
.then(res => res.json())
213+
.then(json => this.showComments(json, commentsArea))
214+
.catch(console.error);
215+
}
216+
217+
218+
fbDevInterest.showPostButtons = function(entry, parent) {
219+
const self = this;
220+
221+
const el = document.createElement('div');
222+
el.classList.add(...'_sa_ _gsd _fgm _5vsi _192z'.split(' '));
223+
const el1 = document.createElement('div');
224+
el.classList.add('_37uu');
225+
el.appendChild(el1);
226+
227+
const el2 = document.createElement('div');
228+
el1.appendChild(el2);
229+
230+
const el3 = document.createElement('div');
231+
el3.classList.add('_57w');
232+
el2.appendChild(el3);
233+
234+
const el4 = document.createElement('div');
235+
el4.classList.add(...'_3399 _a7s _20h6 _610i _125r clearfix _zw3'.split(' '));
236+
el3.appendChild(el4);
237+
238+
const el5 = document.createElement('div');
239+
el5.classList.add('_524d');
240+
el4.appendChild(el5);
241+
242+
const el6 = document.createElement('div');
243+
el6.classList.add('_42nr');
244+
el5.appendChild(el6);
245+
246+
const likeButton_1 = document.createElement('span');
247+
likeButton_1.classList.add('_1mto');
248+
el6.appendChild(likeButton_1);
249+
250+
const likeButton_2 = document.createElement('div');
251+
likeButton_2.classList.add(...'_khz _4sz1'.split(' '));
252+
likeButton_1.appendChild(likeButton_2);
253+
254+
const likeButton_3 = document.createElement('a');
255+
likeButton_3.classList.add(...'UFILikeLink _4x9- _4x9_ _48-k'.split(' '));
256+
likeButton_3.href = '#';
257+
likeButton_3.setAttribute('role', 'button');
258+
likeButton_3.innerText = 'Like';
259+
likeButton_2.appendChild(likeButton_3);
260+
261+
262+
const commentButton_1 = document.createElement('span');
263+
commentButton_1.classList.add('_1mto');
264+
el6.appendChild(commentButton_1);
265+
266+
const commentButton_2 = document.createElement('div');
267+
commentButton_2.classList.add(...'_6a _15-7 _3h-u'.split(' '));
268+
commentButton_1.appendChild(commentButton_2);
269+
270+
const commentButton_3 = document.createElement('a');
271+
commentButton_3.classList.add(...'comment_link _5yxe'.split(' '));
272+
commentButton_3.href = '#';
273+
commentButton_3.setAttribute('role', 'button');
274+
commentButton_3.innerText = 'Comment';
275+
function _showComments() {
276+
self.getComments(entry.id, parent);
277+
this.removeEventListener('click', _showComments);
278+
}
279+
commentButton_3.addEventListener('click', _showComments);
280+
commentButton_2.appendChild(commentButton_3);
281+
282+
// el.innerHTML = `
283+
// <div class="_37uu">
284+
// <div>
285+
// <div class="_57w">
286+
// <div class="_3399 _a7s _20h6 _610i _125r clearfix _zw3">
287+
// <div class="_524d">
288+
// <div class="_42nr"><span class="_1mto"><span class="_27de"><a href="#" data-testid="ufi_share_link_placeholder" class="share_action_link _5f9b" role="button" tabindex="0" title="Send this to friends or post it on your Timeline.">Share<span class="UFIShareLinkSpinner _1wfk img _55ym _55yn _55yo _5tqs" role="progressbar" aria-valuetext="Loading..." aria-busy="true" aria-valuemin="0" aria-valuemax="100"></span></a></span></span>
289+
// </div>
290+
// </div>
291+
// </div>
292+
// </div>
293+
// </div>
294+
// </div>
295+
// `;
296+
parent.appendChild(el);
297+
return el;
298+
}
88299
// appends a post in feed
89300
fbDevInterest.showPost = function(entry, group) {
90301
if (!entry.message) return;
@@ -109,9 +320,9 @@ fbDevInterest.showPost = function(entry, group) {
109320
<div class="_5pcr userContentWrapper">
110321
<div class="_1dwg _1w_m _q7o">
111322
<h5 class="_5pbw fwb">
112-
<a href="https://www.facebook.com/${entry.from.id}">${entry.from.name}</a>
323+
<a target="_blank" href="https://www.facebook.com/${entry.from.id}">${entry.from.name}</a>
113324
‎ ▶
114-
<a href="https://www.facebook.com/${group.id}">${group.name}</a>
325+
<a target="_blank" href="https://www.facebook.com/${group.id}">${group.name}</a>
115326
</h5>
116327
<div class="_5pcp _5lel _232_"><span class="_5paw _14zs"><a class="_3e_2 _14zr" href="#"></a></span><span role="presentation" aria-hidden="true"> · </span><span class="fsm fwn fcg"><a class="_5pcq" href="${entry.permalink_url}" target="_blank"><abbr title="${created_time.format('dddd, d MMMM yyyy at HH:mm')}" class="_5ptz"><span class="timestampContent">${created_time.format('d MMMM at HH:mm')}</span></abbr>
117328
</a>
@@ -134,6 +345,8 @@ fbDevInterest.showPost = function(entry, group) {
134345
const placeholder = document.querySelector('._3-u2.mbm._2iwp._4-u8')
135346
if (placeholder) this.parent.replaceChild(p, placeholder)
136347
else this.parent.appendChild(p);
348+
this.showPostButtons(entry, p);
349+
p.appendChild(commentButton);
137350
};
138351

139352
// gets feed json and shows posts

‎dist/utils.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,16 @@ String.prototype.linkify = function() {
3737
var hashtagPattern = /(^|\s)#(\w+)/g;
3838

3939
return this
40-
.replace(hashtagPattern, '$1<a href="https://www.facebook.com/hashtag/$2" target="_blank">#$2</a>')
41-
.replace(urlPattern, '<a href="$&">$&</a>')
42-
.replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
43-
.replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
40+
.replace(urlPattern, '<a href="$&" target="_blank">$&</a>')
41+
.replace(pseudoUrlPattern, '$1<a href="http://$2" target="_blank">$2</a>')
42+
.replace(emailAddressPattern, '<a href="mailto:$&">$&</a>')
43+
.replace(hashtagPattern, '$1<a href="https://www.facebook.com/hashtag/$2" target="_blank">#$2</a>');
4444
};
4545

4646
/**
4747
* Date Format
4848
* Copyright (c) 2011, marlun78
49-
* MIT License, https://gist.github.com/marlun78/bd0800cf5e8053ba9f83
49+
* MIT License, https://gist.github.com/marlun78/1351171
5050
*/
5151
(function () {
5252

0 commit comments

Comments
 (0)