Skip to content

Commit a4847a7

Browse files
lauri457lauri457
authored
Create gFormModal.js
1 parent 968626b commit a4847a7

File tree

1 file changed

+193
-0
lines changed

1 file changed

+193
-0
lines changed

‎Specialized Areas/Browser Bookmarklets/Open g_form modal/gFormModal.js‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
(function () {
2+
const makeDraggable = (element, cleanupHandlers) => {
3+
let isDragging = false;
4+
let offsetX = 0;
5+
let offsetY = 0;
6+
7+
const header = document.createElement('div');
8+
header.style.cursor = 'move';
9+
header.style.height = '20px';
10+
header.style.marginBottom = '10px';
11+
header.style.background = "rgba(100, 100, 100, 0.3)";
12+
header.style.borderRadius = "8px";
13+
element.prepend(header);
14+
15+
const mouseMoveHandler = (e) => {
16+
if (isDragging) {
17+
element.style.left = `${e.clientX - offsetX}px`;
18+
element.style.top = `${e.clientY - offsetY}px`;
19+
element.style.position = 'absolute';
20+
}
21+
};
22+
23+
const mouseUpHandler = () => {
24+
isDragging = false;
25+
document.body.style.userSelect = '';
26+
};
27+
28+
header.addEventListener('mousedown', (e) => {
29+
isDragging = true;
30+
offsetX = e.clientX - element.offsetLeft;
31+
offsetY = e.clientY - element.offsetTop;
32+
document.body.style.userSelect = 'none';
33+
});
34+
35+
document.addEventListener('mousemove', mouseMoveHandler);
36+
document.addEventListener('mouseup', mouseUpHandler);
37+
38+
cleanupHandlers.push(() => {
39+
document.removeEventListener('mousemove', mouseMoveHandler);
40+
document.removeEventListener('mouseup', mouseUpHandler);
41+
});
42+
};
43+
44+
const createOverlay = (g_form, fieldArray) => {
45+
const overlay = document.createElement('div');
46+
overlay.id = "gform-modal-overlay";
47+
overlay.style.position = 'fixed';
48+
overlay.style.top = 0;
49+
overlay.style.left = 0;
50+
overlay.style.width = '100vw';
51+
overlay.style.height = '100vh';
52+
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
53+
overlay.style.zIndex = 9999;
54+
overlay.style.display = 'flex';
55+
overlay.style.justifyContent = 'center';
56+
overlay.style.alignItems = 'center';
57+
58+
59+
const container = document.createElement('div');
60+
container.id = "modal-container";
61+
container.style.background = '#fff';
62+
container.style.padding = '20px';
63+
container.style.borderRadius = '8px';
64+
container.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
65+
container.style.maxWidth = '1000px';
66+
container.style.textAlign = 'center';
67+
container.style.maxHeight = '70vh';
68+
69+
const modal = document.createElement('div');
70+
modal.style.overflowY = 'auto';
71+
modal.style.overflowX = 'hidden';
72+
modal.style.maxHeight = '60vh';
73+
container.appendChild(modal)
74+
75+
let listItems = '';
76+
fieldArray.forEach(element => {
77+
const fieldName = element.fieldName;
78+
const isReadOnly = g_form.isReadOnly(fieldName);
79+
const isMandatory = g_form.isMandatory(fieldName);
80+
const isVisible = g_form.isVisible(fieldName);
81+
82+
listItems += `
83+
<tr>
84+
<td>${fieldName}</td>
85+
<td><input type="checkbox" ${isMandatory ? 'disabled' : ''} id="disabled-${fieldName}" ${!isReadOnly ? 'checked' : ''}></td>
86+
<td><input type="checkbox" id="mandatory-${fieldName}" ${isMandatory ? 'checked' : ''}></td>
87+
<td><input type="checkbox" ${isMandatory ? 'disabled' : ''} id="visible-${fieldName}" ${isVisible ? 'checked' : ''}></td>
88+
<td><input type="text" id="value-${fieldName}" value="${g_form.getValue(fieldName)}"></td>
89+
<td><button id="change-value-${fieldName}">Set</button></td>
90+
</tr>
91+
`;
92+
});
93+
94+
modal.innerHTML = `
95+
<h2>g_form modal</h2>
96+
<table>
97+
<thead>
98+
<tr>
99+
<th>Field</th>
100+
<th>ReadOnly</th>
101+
<th>Mandatory</th>
102+
<th>Display</th>
103+
<th>Value</th>
104+
<th></th>
105+
</tr>
106+
</thead>
107+
<tbody>${listItems}</tbody>
108+
</table>
109+
`;
110+
111+
const cleanupHandlers = [];
112+
113+
overlay.addEventListener('click', (event) => {
114+
if (!container.contains(event.target)) {
115+
cleanupHandlers.forEach(fn => fn());
116+
document.body.removeChild(overlay);
117+
}
118+
});
119+
120+
makeDraggable(container, cleanupHandlers);
121+
overlay.appendChild(container);
122+
document.body.appendChild(overlay);
123+
124+
fieldArray.forEach(element => {
125+
const fieldName = element.fieldName;
126+
const disabledCheckbox = modal.querySelector(`#disabled-${fieldName}`);
127+
const mandatoryCheckbox = modal.querySelector(`#mandatory-${fieldName}`);
128+
const visibleCheckbox = modal.querySelector(`#visible-${fieldName}`);
129+
const valueInput = modal.querySelector(`#value-${fieldName}`);
130+
const changeButton = modal.querySelector(`#change-value-${fieldName}`);
131+
132+
if (disabledCheckbox) {
133+
disabledCheckbox.addEventListener('change', () => {
134+
g_form?.setDisabled(fieldName, disabledCheckbox.checked);
135+
});
136+
}
137+
138+
if (mandatoryCheckbox) {
139+
mandatoryCheckbox.addEventListener('change', () => {
140+
const setToMandatory = mandatoryCheckbox.checked;
141+
const isEmpty = !g_form?.getValue(fieldName);
142+
const isDisplayed = visibleCheckbox.checked;
143+
g_form?.setMandatory(fieldName, setToMandatory);
144+
145+
if (setToMandatory) {
146+
if (!isEmpty && isDisplayed) {
147+
visibleCheckbox.checked = true;
148+
} else if (isEmpty && !isDisplayed) {
149+
visibleCheckbox.checked = true;
150+
disabledCheckbox.checked = false;
151+
} else if (isEmpty && isDisplayed) {
152+
disabledCheckbox.checked = false;
153+
}
154+
}
155+
if (disabledCheckbox) disabledCheckbox.disabled = setToMandatory;
156+
if (visibleCheckbox) visibleCheckbox.disabled = setToMandatory;
157+
});
158+
}
159+
160+
if (visibleCheckbox) {
161+
visibleCheckbox.addEventListener('change', () => {
162+
g_form?.setDisplay(fieldName, visibleCheckbox.checked);
163+
});
164+
}
165+
166+
if (changeButton && valueInput) {
167+
changeButton.addEventListener('click', () => {
168+
const newValue = valueInput.value;
169+
g_form.setValue(fieldName, newValue);
170+
});
171+
}
172+
});
173+
};
174+
175+
if (document.querySelector("#gform-modal-overlay")) return;
176+
177+
const getFieldNames = (g_form) => {
178+
return g_form.getFieldNames().map(name => ({ fieldName: name }));
179+
}
180+
181+
const g_form =
182+
window.gsft_main?.g_form ||
183+
this.g_form ||
184+
(typeof querySelectorShadowDom !== "undefined" &&
185+
querySelectorShadowDom.querySelectorAllDeep('sn-form-data-connected')[0]?.nowRecordFormBlob?.gForm) ||
186+
(angular.element("sp-variable-layout").scope().getGlideForm?.()) ||
187+
null;
188+
if (!g_form) {
189+
return;
190+
}
191+
const fieldArray = g_form.elements ? g_form.elements : getFieldNames(g_form);
192+
createOverlay(g_form, fieldArray);
193+
})();

0 commit comments

Comments
 (0)