Skip to content

Commit 97ffd28

Browse files
HoangTran0410HoangTran0410
committed
finish fb more reaction story
1 parent eac8da5 commit 97ffd28

File tree

3 files changed

+178
-814
lines changed

3 files changed

+178
-814
lines changed

‎scripts/fb_moreReactionStory.css‎

Lines changed: 95 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,91 @@
1-
::-webkit-scrollbar {
2-
width: 10px;
3-
}
4-
5-
::-webkit-scrollbar-track {
6-
background: #f1f1f1;
7-
}
8-
9-
::-webkit-scrollbar-thumb {
10-
background: #888;
1+
body {
2+
background-color: #333;
113
}
124

13-
::-webkit-scrollbar-thumb:hover {
14-
background: #555;
15-
}
16-
17-
.react-container {
5+
.ufs-more-react-story {
186
position: relative;
197
user-select: none;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
2011
}
2112

2213
.btn-react {
23-
height: 45px;
24-
width: 45px;
14+
height: 40px;
15+
width: 40px;
2516
background-color: #fff;
2617
display: flex;
2718
justify-content: center;
2819
align-items: center;
2920
border-radius: 50%;
3021
font-weight: bold;
3122
cursor: pointer;
23+
transition: .2s all;
3224
}
3325

34-
.emoji-group {
26+
.btn-react:hover {
27+
transform: scale(1.3);
28+
}
29+
30+
.emoji-container {
3531
position: absolute;
36-
bottom: 60px;
37-
height: 200px;
32+
bottom: -600px;
33+
height: 300px;
3834
right: 0;
39-
width: 250px;
40-
padding: 15px;
35+
background-color: #fff;
36+
border-radius: 10px;
37+
transition: all 0.3s;
38+
overflow: hidden;
39+
}
40+
41+
.emoji-container.show {
42+
bottom: 60px;
43+
}
44+
45+
.emoji-tab-container {
46+
overflow-x: auto;
47+
overflow-y: hidden;
48+
height: 50px;
49+
white-space: nowrap;
50+
/* border-bottom: 1px dashed #999; */
51+
}
52+
53+
.emoji-tab {
54+
font-size: 30px;
55+
cursor: pointer;
56+
display: inline-block;
57+
transition: all 0.1s;
58+
}
59+
60+
.emoji-tab:hover {
61+
background-color: cadetblue;
62+
}
63+
64+
.emoji-tab.active {
65+
background-color: cadetblue;
66+
}
67+
68+
.emoji-list-container {
69+
max-height: calc(100% - 50px);
70+
width: 100%;
4171
list-style: none;
4272
margin: 0;
43-
display: none;
73+
padding: 0;
74+
display: flex;
4475
flex-flow: row wrap;
4576
justify-content: space-between;
4677
overflow-y: scroll;
47-
background-color: #fff;
48-
border-radius: 10px;
78+
overflow-x: hidden;
4979
}
5080

51-
52-
.emoji-group--show {
53-
display: flex;
81+
.emoji-list-container--show {
82+
bottom: 60px;
83+
opacity: 1;
5484
}
5585

5686
.emoji {
57-
height: 50px;
58-
width: 50px;
87+
height: 45px;
88+
width: 45px;
5989
display: flex;
6090
justify-content: center;
6191
align-items: center;
@@ -79,18 +109,47 @@
79109
.floating-emoji {
80110
animation: bubble 2s ease-out;
81111
pointer-events: none;
82-
height: 50px;
83-
width: 50px;
112+
height: 70px;
113+
width: 70px;
84114
font-size: 30px;
85115
transition: all 0.3s;
86116
}
87117

88118
@keyframes spin {
89-
0% { transform: rotate(0deg); }
90-
100% { transform: rotate(360deg); }
119+
0% {
120+
transform: rotate(0deg);
121+
}
122+
123+
100% {
124+
transform: rotate(360deg);
125+
}
91126
}
92127

93128
@keyframes bubble {
94-
0% { transform: translateY(0px); opacity: 1; }
95-
100% { transform: translateY(-200px); opacity: 0.1; }
129+
0% {
130+
transform: translateY(0px);
131+
opacity: 1;
132+
}
133+
134+
100% {
135+
transform: translateY(-200px);
136+
opacity: 0.1;
137+
}
138+
}
139+
140+
::-webkit-scrollbar {
141+
width: 10px;
142+
height: 10px;
143+
}
144+
145+
::-webkit-scrollbar-track {
146+
background: #f1f1f1;
147+
}
148+
149+
::-webkit-scrollbar-thumb {
150+
background: #aeaeae;
151+
}
152+
153+
::-webkit-scrollbar-thumb:hover {
154+
background: #939393;
96155
}

‎scripts/fb_moreReactionStory.js‎

Lines changed: 73 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,14 @@ export default {
1717

1818
(async () => {
1919
try {
20+
// crawl emoji from https://emojipedia.org
21+
// Array.from(document.querySelectorAll('.emoji-list .emoji')).map(_ => _.textContent).join(',')
2022
let url = await UsefulScriptGlobalPageContext.Extension.getURL(
2123
"scripts/fb_moreReactionStory.json"
2224
);
2325
const emojiJson = await fetch(url);
2426
const EMOJI_LIST = await emojiJson.json();
27+
2528
loadModal(EMOJI_LIST);
2629
} catch (e) {
2730
console.error(e);
@@ -34,57 +37,96 @@ export default {
3437

3538
const timeoutCheckStoriesFooter = setInterval(() => {
3639
if (!window.location.href.includes("facebook.com/stories/")) return;
37-
if (!!document.querySelector(".btn-react")) return;
40+
if (!!document.querySelector(".ufs-more-react-story")) return;
41+
42+
/* HTML template
43+
<div class="ufs-more-react-story">
44+
<button class="btn-react">More</button>
45+
<div class="emoji-container">
46+
<div class="emoji-tab-container">
47+
<div class="emoji-tab">😀</div>
48+
...
49+
</div>
50+
<ul class="emoji-list-container">
51+
<li class="emoji">😀</li>
52+
...
53+
</ul>
54+
</div>
55+
</div>
56+
*/
57+
58+
const container = document.createElement("div");
59+
container.className = "ufs-more-react-story";
3860

3961
const btnReact = document.createElement("div");
4062
btnReact.textContent = "MORE";
41-
btnReact.setAttribute("class", "btn-react");
63+
btnReact.className = "btn-react";
64+
const emojiContainer = document.createElement("div");
65+
emojiContainer.className = "emoji-container";
66+
const emojiTabContener = document.createElement("div");
67+
emojiTabContener.className = "emoji-tab-container";
68+
const emojiListContainer = document.createElement("div");
69+
emojiListContainer.className = "emoji-list-container";
70+
71+
let allTabs = [];
72+
Object.keys(EMOJI_LIST).map((key) => {
73+
const emojiTab = document.createElement("div");
74+
emojiTab.className = "emoji-tab";
75+
emojiTab.textContent = key;
76+
allTabs.push(emojiTab);
77+
78+
emojiTab.onclick = () => {
79+
allTabs.forEach((tab) => tab.classList.remove("active"));
80+
emojiTab.classList.add("active");
81+
emojiListContainer.innerHTML = "";
82+
83+
const emojiList = EMOJI_LIST[key].split(",");
84+
emojiList.forEach((emoji) => {
85+
const emojiLi = document.createElement("li");
86+
emojiLi.className = "emoji";
87+
emojiLi.textContent = emoji;
88+
emojiLi.setAttribute("value", emoji);
89+
emojiLi.onclick = async function () {
90+
const storyId = getStoryId();
91+
try {
92+
emojiLi.classList.add("loading");
93+
await reactStory(user_id, fb_dtsg, storyId, emoji);
94+
emojiLi.classList.remove("loading");
95+
addFloatingEmoji(emoji, emojiLi);
96+
} catch (e) {
97+
console.error(e);
98+
}
99+
};
100+
101+
emojiListContainer.appendChild(emojiLi);
102+
});
103+
};
42104

43-
const emojiGroup = document.createElement("ul");
44-
emojiGroup.setAttribute("class", "emoji-group");
105+
emojiTabContener.appendChild(emojiTab);
106+
});
45107

46108
btnReact.onclick = function () {
47-
emojiGroup.classList.toggle("emoji-group--show");
109+
emojiContainer.classList.toggle("show");
48110
};
49111

50-
EMOJI_LIST.forEach((emoji) => {
51-
const emojiLi = document.createElement("li");
52-
emojiLi.setAttribute("class", "emoji");
53-
emojiLi.setAttribute("value", emoji.value);
54-
emojiLi.textContent = emoji.value;
55-
emojiLi.onclick = async function () {
56-
const storyId = getStoryId();
57-
try {
58-
emojiLi.classList.add("loading");
59-
await reactStory(user_id, fb_dtsg, storyId, emoji.value);
60-
emojiLi.classList.remove("loading");
61-
addFloatingEmoji(emoji, emojiLi);
62-
} catch (e) {
63-
console.error(e);
64-
}
65-
};
66-
67-
emojiGroup.appendChild(emojiLi);
68-
});
69-
70-
const reactContainer = document.createElement("div");
71-
reactContainer.setAttribute("class", "react-container");
72-
reactContainer.appendChild(btnReact);
73-
reactContainer.appendChild(emojiGroup);
112+
emojiContainer.appendChild(emojiTabContener);
113+
emojiContainer.appendChild(emojiListContainer);
114+
container.appendChild(btnReact);
115+
container.appendChild(emojiContainer);
74116

75117
const storiesFooter = document.getElementsByClassName(
76118
"x11lhmoz x78zum5 x1q0g3np xsdox4t x10l6tqk xtzzx4i xwa60dl xl56j7k xtuxyv6"
77119
);
78120
if (storiesFooter.length > 0) {
79121
// clearInterval(timeoutCheckStoriesFooter);
80-
storiesFooter[storiesFooter.length - 1].appendChild(reactContainer);
122+
storiesFooter[storiesFooter.length - 1].appendChild(container);
81123
}
82124
}, 1e3);
83125
}
84126
function addFloatingEmoji(emoji, ele) {
85127
let floatingEmoji = document.createElement("div");
86128
floatingEmoji.setAttribute("class", "floating-emoji");
87-
floatingEmoji.textContent = emoji.value;
129+
floatingEmoji.textContent = emoji;
88130

89131
let { top, left } = ele.getBoundingClientRect();
90132
floatingEmoji.style.position = "fixed";

0 commit comments

Comments
 (0)