-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
117 lines (103 loc) · 3.29 KB
/
script.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
let optionsButtons = document.querySelectorAll(".option-button");
let advancedOptionButton = document.querySelectorAll(".adv-option-button");
let fontName = document.getElementById("fontName");
let fontSizeRef = document.getElementById("fontSize");
let writingArea = document.getElementById("text-input");
let linkButton = document.getElementById("createLink");
let alignButtons = document.querySelectorAll(".align");
let spacingButtons = document.querySelectorAll(".spacing");
let formatButtons = document.querySelectorAll(".format");
let scriptButtons = document.querySelectorAll(".script");
//List of fontlist
let fontList = [
"Arial",
"Verdana",
"Times New Roman",
"Garamond",
"Georgia",
"Courier New",
"cursive",
];
//Initial Settings
const initializer = () => {
//function calls for highlighting buttons
//No highlights for link, unlink,lists, undo,redo since they are one time operations
highlighter(alignButtons, true);
highlighter(spacingButtons, true);
highlighter(formatButtons, false);
highlighter(scriptButtons, true);
//create options for font names
fontList.map((value) => {
let option = document.createElement("option");
option.value = value;
option.innerHTML = value;
fontName.appendChild(option);
});
//fontSize allows only till 7
for (let i = 1; i <= 7; i++) {
let option = document.createElement("option");
option.value = i;
option.innerHTML = i;
fontSizeRef.appendChild(option);
}
//default size
fontSizeRef.value = 3;
};
//main logic
const modifyText = (command, defaultUi, value) => {
//execCommand executes command on selected text
document.execCommand(command, defaultUi, value);
};
//For basic operations which don't need value parameter
optionsButtons.forEach((button) => {
button.addEventListener("click", () => {
modifyText(button.id, false, null);
});
});
//options that require value parameter (e.g colors, fonts)
advancedOptionButton.forEach((button) => {
button.addEventListener("change", () => {
modifyText(button.id, false, button.value);
});
});
//link
linkButton.addEventListener("click", () => {
let userLink = prompt("Enter a URL");
//if link has http then pass directly else add https
if (/http/i.test(userLink)) {
modifyText(linkButton.id, false, userLink);
} else {
userLink = "http://" + userLink;
modifyText(linkButton.id, false, userLink);
}
});
//Highlight clicked button
const highlighter = (className, needsRemoval) => {
className.forEach((button) => {
button.addEventListener("click", () => {
//needsRemoval = true means only one button should be highlight and other would be normal
if (needsRemoval) {
let alreadyActive = false;
//If currently clicked button is already active
if (button.classList.contains("active")) {
alreadyActive = true;
}
//Remove highlight from other buttons
highlighterRemover(className);
if (!alreadyActive) {
//highlight clicked button
button.classList.add("active");
}
} else {
//if other buttons can be highlighted
button.classList.toggle("active");
}
});
});
};
const highlighterRemover = (className) => {
className.forEach((button) => {
button.classList.remove("active");
});
};
window.onload = initializer();