-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
71 lines (59 loc) · 1.87 KB
/
index.ts
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
const emojiMap = {
smile: "😊",
wink: "😉",
heart: "😍",
cry: "😭"
};
// default to smile
let selectedEmoji = emojiMap.smile;
addButtonListeners();
document.getElementById("extension-form").onsubmit = async (event) => {
event.preventDefault();
// Get the current selected Element
let el = await webflow.getSelectedElement();
// If styles can be set on the Element
if (el && el.styles && el.children) {
//Get current element's style
const currentStyle = await el.getStyles();
// Get style
const emojiStyle = await createOrUseStyle("emoji-style");
// Create a new element that will display the text-emoji
const labelElement = await el.append(webflow.elementPresets.DOM);
await labelElement.setTag("span");
await labelElement.setStyles([...currentStyle, emojiStyle]);
await labelElement.setTextContent(selectedEmoji);
} else {
alert("Please select a text element");
}
};
// Check if specified style exists. If not, create a new style
async function createOrUseStyle(styleName) {
// Check if this style exists to avoid duplicate styles
const style = await webflow.getStyleByName(styleName);
if (style) {
// Return existing style
return style;
} else {
// Create a new style, return it
const emojiStyle = await webflow.createStyle(styleName);
await emojiStyle.setProperties({ "background-color": "#FF00FF" });
return emojiStyle;
}
}
function handleEmojiClick(emoji) {
selectedEmoji = emoji;
}
function addButtonListeners() {
document.getElementById("smile").onclick = () => {
handleEmojiClick(emojiMap.smile);
};
document.getElementById("wink").onclick = () => {
handleEmojiClick(emojiMap.wink);
};
document.getElementById("heart").onclick = () => {
handleEmojiClick(emojiMap.heart);
};
document.getElementById("cry").onclick = () => {
handleEmojiClick(emojiMap.cry);
};
}