-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathToggler.js
168 lines (160 loc) · 8.64 KB
/
Toggler.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
let count = 0;
class Toggler {
//toggleClass() will toggle the provided class name and the current class name. Works for multiple classes too
toggleClass(elementId, preClass, aftClass) {
try {
if (elementId == null) {
throw 'ElementID was not provided';
} else if (preClass == null) {
throw '(preClass is not provided) Previous class or current class is not provided.';
} else if (aftClass == null) {
throw '(aftClass is not provided) Provide a string of class name that toggler has to toggle between.';
} else if (!isNaN(elementId) || !isNaN(preClass) || !isNaN(aftClass)) {
throw 'All the parameters are strings. Check if you passed the string parameters.';
}
let element = document.getElementById(elementId);
const isCCGO = element.className.split(" ").length > 1; //isCCGO stands for isClassCountGreaterThanOne
if (!isCCGO) {
if (element.className == preClass) {
element.className = aftClass;
} else if (element.className == aftClass) {
element.className = preClass;
}
} else if (isCCGO) {
let replaced = element.className.split(' ');
replaced.forEach(value => {
if (value == preClass) {
let replacedVal = element.className.replace(value, '');
element.className = `${replacedVal} ${aftClass}`;
} else if (value == aftClass) {
let replacedVal = element.className.replace(value, '');
element.className = `${replacedVal} ${preClass}`;
}
})
}
} catch (e) {
const dialog = document.createElement('dialog');;
dialog.className = "CSP'sDialogClass";;
dialog.id = "CSP'sDialogClass";;
dialog.style = 'height:auto;width:300px;margin:-50% auto auto 30%;padding: 3%;font-size: 18px;text-align: center;text- ustify: initial;color: rgb(221, 221, 221);background-color: rgba(37, 37, 37, 0.6);backdrop-filter: blur(15px);border:none;border-radius:6px;float:right;';
this.errorHandling(dialog, e);
setTimeout(() => {
dialog.remove();
}, 10000);
}
}
//toggleImage() is the method which will toggle the src image of the image tag
toggleImage(elementId, fromImg, toImg) {
try {
if (elementId == null) {
throw 'ElementID was not provided';
} else if (fromImg == null) {
throw '(fromImg is not provided) The current src of this img tag is not provided.';
} else if (toImg == null) {
throw '(toImg is not provided) Provide the src of the image to which toggler has to toggle between.';
} else if (!isNaN(elementId) || !isNaN(fromImg) || !isNaN(toImg)) {
throw 'All the parameters are strings. Check if you passed the string parameters.';
}
let element = document.getElementById(elementId);
if (element.src.includes(fromImg)) {
element.src = toImg;
} else if (element.src.includes(toImg)) {
element.src = fromImg;
}
} catch (e) {
const dialog = document.createElement('dialog');
dialog.className = "CSP'sDialogClass";
dialog.id = "CSP'sDialogClass";
dialog.style = 'border-radius:6px;height:auto;width:300px;margin:-50% auto auto 30%;padding: 3%;font-size: 18px;text-align: center;text- ustify: initial;color: rgb(221, 221, 221);background-color: rgba(37, 37, 37, 0.6);backdrop-filter: blur(15px);border:none;border-radius:6px;float:right;';
this.errorHandling(dialog, e);
setTimeout(() => {
dialog.remove();
}, 10000);
}
}
//ToggleSlide which will toggles the sliding machanism of an element from given direction
toggleSlide(elementId, fromDirection, speed) {
try {
if (elementId == null) {
throw 'ElementID was not provided';
} else if (fromDirection == null) {
throw '(fromDirection is not provided) Provide the direction of the slide from which side the slide should start.';
} else if (speed == null) {
throw '(speed or time is not provided) Provide a time in seconds and it can be a number(float or an integer) or a string.';
} else if (!isNaN(elementId) || !isNaN(fromDirection)) {
throw 'All the parameters are strings. Check if you passed the string parameters.';
}
let element = document.getElementById(elementId);
let elementHeight = element.offsetHeight;
let elementWidth = element.offsetWidth;
element.style.transition = `${speed}s ease-in-out`;
if (fromDirection == 'right' || fromDirection == 'left') {
if (fromDirection == 'right') {
element.style.float = 'right';
}
element.style.setProperty(`margin-${fromDirection}`, `-${elementWidth + 100}px`);
}
else if (fromDirection == 'top') {
element.style.setProperty(`margin-${fromDirection}`, `-${elementHeight + 100}px`);
}
count++;
if (count % 2 != 0) {
element.style.setProperty(`margin-${fromDirection}`, `0px`);
}
element.style.setProperty(`${fromDirection}`, `0px`);
} catch (e) {
const dialog = document.createElement('dialog');
dialog.className = "CSP'sDialogClass";
dialog.id = "CSP'sDialogClass";
dialog.style = 'height:auto;width:300px;margin:-50% auto auto 30%;padding: 3%;font-size: 18px;text-align: center;text- ustify: initial;color: rgb(221, 221, 221);background-color: rgba(37, 37, 37, 0.6);backdrop-filter: blur(15px);border:none;border-radius:6px;float:right;';
this.errorHandling(dialog, e);
setTimeout(() => {
dialog.remove();
}, 10000);
}
}
//togglers the Property of the element with reference to the id of the element
toggleProperty(elementId, property, fromValue, toValue) {
try {
if (elementId == null) {
throw 'ElementID was not provided';
} else if (property == null) {
throw '(property is not provided) Previous which style property toggler has to change or toggle.';
} else if (fromValue == null) {
throw '(fromValue is not provided) Provide the current value of property that toggler has to toggle between.';
} else if (toValue == null) {
throw '(toValue is not provided) Provide the value of property to which toggler has to toggle between.';
} else if (!isNaN(elementId) || !isNaN(property) || !isNaN(fromValue) || !isNaN(toValue)) {
throw 'All the parameters are strings. Check if you passed the string parameters.';
}
let element = document.getElementById(elementId);
if (element.style.getPropertyValue(property) == null || element.style.getPropertyValue(property) == '') {
element.style.setProperty(property, toValue);
return;
}
if (element.style.getPropertyValue(property) == fromValue) element.style.setProperty(property, toValue);
else element.style.setProperty(property, fromValue);
} catch (e) {
const dialog = document.createElement('dialog');
dialog.className = "CSP'sDialogClass";
dialog.id = "CSP'sDialogClass";
dialog.style = 'height:auto;width:300px;margin:-50% auto auto 30%;padding: 3%;font-size: 18px;text-align: center;text- ustify: initial;color: rgb(221, 221, 221);background-color: rgba(37, 37, 37, 0.6);backdrop-filter: blur(15px);border:none;border-radius:6px;float:right;';
this.errorHandling(dialog, e);
setTimeout(() => {
dialog.remove();
}, 10000);
}
}
errorHandling = function (dialog, e) {
document.body.appendChild(dialog);
dialog.innerHTML += `${e}<br><span style="color:red;"></span><br><button style="border-radius:6px;border:none;" onclick="TogglerCloseDialog()">Close</button>`
dialog.open = true;
}
Inc() {
count++;
}
}
function TogglerCloseDialog() {
let dialogs = document.getElementById("CSP'sDialogClass");
dialogs.remove();
}