@idds/js 1.0.53 → 1.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.iife.js +152 -145
- package/dist/index.js +152 -145
- package/package.json +1 -1
package/dist/index.iife.js
CHANGED
|
@@ -21,7 +21,6 @@ var InaUI = (() => {
|
|
|
21
21
|
var bundle_exports = {};
|
|
22
22
|
__export(bundle_exports, {
|
|
23
23
|
initAccordion: () => initAccordion,
|
|
24
|
-
initBanner: () => initBanner,
|
|
25
24
|
initButtonGroup: () => initButtonGroup,
|
|
26
25
|
initDatepicker: () => initDatepicker,
|
|
27
26
|
initDropdown: () => initDropdown,
|
|
@@ -82,95 +81,166 @@ var InaUI = (() => {
|
|
|
82
81
|
});
|
|
83
82
|
}
|
|
84
83
|
|
|
85
|
-
// src/js/components/stateless/accordion.js
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
} else {
|
|
109
|
-
if (nextState) {
|
|
110
|
-
accordions.forEach((otherAcc) => {
|
|
111
|
-
if (otherAcc !== accordion) {
|
|
112
|
-
const otherToggle = otherAcc.querySelector(
|
|
113
|
-
`.${PREFIX}-accordion__toggle`
|
|
114
|
-
);
|
|
115
|
-
const otherContent = otherAcc.querySelector(
|
|
116
|
-
`.${PREFIX}-accordion__content`
|
|
117
|
-
);
|
|
118
|
-
const otherBody = otherAcc.querySelector(
|
|
119
|
-
`.${PREFIX}-accordion__body`
|
|
120
|
-
);
|
|
121
|
-
if (otherToggle && otherContent && otherBody) {
|
|
122
|
-
closeItem(otherAcc, otherToggle, otherContent, otherBody);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
openItem(accordion, toggle, content, body);
|
|
127
|
-
} else {
|
|
128
|
-
closeItem(accordion, toggle, content, body);
|
|
129
|
-
}
|
|
84
|
+
// src/js/components/stateless/accordion-group.js
|
|
85
|
+
var AccordionGroup = class {
|
|
86
|
+
constructor(element) {
|
|
87
|
+
this.element = element;
|
|
88
|
+
this.items = /* @__PURE__ */ new Map();
|
|
89
|
+
this.itemsArray = [];
|
|
90
|
+
this.isMultiple = element.getAttribute("data-multiple-open") === "true" || element.getAttribute("data-behavior") === "multiple";
|
|
91
|
+
this.openIndexes = [];
|
|
92
|
+
this.element.__inaAccordionGroup = this;
|
|
93
|
+
}
|
|
94
|
+
registerItem(item) {
|
|
95
|
+
const index = this.items.size;
|
|
96
|
+
this.items.set(item.id, index);
|
|
97
|
+
this.itemsArray.push(item);
|
|
98
|
+
if (item.defaultOpen) {
|
|
99
|
+
if (this.isMultiple) {
|
|
100
|
+
if (!this.openIndexes.includes(index)) {
|
|
101
|
+
this.openIndexes.push(index);
|
|
102
|
+
}
|
|
103
|
+
} else {
|
|
104
|
+
if (this.openIndexes.length === 0) {
|
|
105
|
+
this.openIndexes.push(index);
|
|
130
106
|
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
return index;
|
|
110
|
+
}
|
|
111
|
+
unregisterItem(item) {
|
|
112
|
+
const index = this.items.get(item.id);
|
|
113
|
+
if (index !== void 0) {
|
|
114
|
+
this.items.delete(item.id);
|
|
115
|
+
this.itemsArray = this.itemsArray.filter((i) => i !== item);
|
|
116
|
+
this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
|
|
117
|
+
const newMap = /* @__PURE__ */ new Map();
|
|
118
|
+
this.itemsArray.forEach((itm, newIdx) => {
|
|
119
|
+
newMap.set(itm.id, newIdx);
|
|
131
120
|
});
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
|
|
140
|
-
const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
|
|
141
|
-
if (!toggle || !content || !body) return;
|
|
142
|
-
toggle.addEventListener("click", (e) => {
|
|
143
|
-
e.stopPropagation();
|
|
144
|
-
const isOpen = accordion.classList.contains(`${PREFIX}-accordion--open`);
|
|
121
|
+
this.items = newMap;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
handleItemToggle(index, isOpen) {
|
|
125
|
+
const prevIndexes = [...this.openIndexes];
|
|
126
|
+
let nextIndexes = [];
|
|
127
|
+
if (this.isMultiple) {
|
|
145
128
|
if (isOpen) {
|
|
146
|
-
|
|
129
|
+
if (!prevIndexes.includes(index)) {
|
|
130
|
+
nextIndexes = [...prevIndexes, index];
|
|
131
|
+
} else {
|
|
132
|
+
nextIndexes = prevIndexes;
|
|
133
|
+
}
|
|
147
134
|
} else {
|
|
148
|
-
|
|
135
|
+
nextIndexes = prevIndexes.filter((idx) => idx !== index);
|
|
149
136
|
}
|
|
137
|
+
} else {
|
|
138
|
+
if (isOpen) {
|
|
139
|
+
nextIndexes = [index];
|
|
140
|
+
} else {
|
|
141
|
+
nextIndexes = [];
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
this.openIndexes = nextIndexes;
|
|
145
|
+
this.notifyItems();
|
|
146
|
+
}
|
|
147
|
+
isItemOpen(index) {
|
|
148
|
+
return this.openIndexes.includes(index);
|
|
149
|
+
}
|
|
150
|
+
getItemIndex(itemId) {
|
|
151
|
+
return this.items.get(itemId);
|
|
152
|
+
}
|
|
153
|
+
// Notify all children to update their visual state based on new openIndexes
|
|
154
|
+
notifyItems() {
|
|
155
|
+
this.itemsArray.forEach((item, index) => {
|
|
156
|
+
const isOpen = this.openIndexes.includes(index);
|
|
157
|
+
item.setOpenState(isOpen);
|
|
150
158
|
});
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
function openItem(accordion, toggle, content, body) {
|
|
154
|
-
accordion.classList.add(`${PREFIX}-accordion--open`);
|
|
155
|
-
toggle.setAttribute("aria-expanded", "true");
|
|
156
|
-
const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
|
|
157
|
-
if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
|
|
158
|
-
content.classList.add(`${PREFIX}-accordion__content--open`);
|
|
159
|
-
body.classList.add(`${PREFIX}-accordion__body--open`);
|
|
160
|
-
if (body) {
|
|
161
|
-
body.style.maxHeight = `${body.scrollHeight}px`;
|
|
162
159
|
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
// src/js/components/stateless/accordion.js
|
|
163
|
+
var Accordion = class {
|
|
164
|
+
constructor(element) {
|
|
165
|
+
this.element = element;
|
|
166
|
+
this.toggle = element.querySelector(`.${PREFIX}-accordion__toggle`);
|
|
167
|
+
this.content = element.querySelector(`.${PREFIX}-accordion__content`);
|
|
168
|
+
this.body = element.querySelector(`.${PREFIX}-accordion__body`);
|
|
169
|
+
this.icon = element.querySelector(`.${PREFIX}-accordion__icon`);
|
|
170
|
+
if (!this.toggle || !this.content || !this.body) {
|
|
171
|
+
console.warn("[InaUI] Accordion missing required elements", element);
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
this.id = element.id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
|
|
175
|
+
this.defaultOpen = element.getAttribute("data-default-open") === "true" || element.classList.contains(`${PREFIX}-accordion--open`);
|
|
176
|
+
this.isDisabled = element.classList.contains(`${PREFIX}-accordion--disabled`) || this.toggle.hasAttribute("disabled");
|
|
177
|
+
this.group = this.findParentGroup();
|
|
178
|
+
this.index = -1;
|
|
179
|
+
if (this.group) {
|
|
180
|
+
this.index = this.group.registerItem(this);
|
|
181
|
+
}
|
|
182
|
+
this.toggle.addEventListener("click", (e) => this.handleClick(e));
|
|
183
|
+
if (this.group) {
|
|
184
|
+
const isOpen = this.group.isItemOpen(this.index);
|
|
185
|
+
this.setOpenState(isOpen);
|
|
186
|
+
} else {
|
|
187
|
+
this.setOpenState(this.defaultOpen);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
findParentGroup() {
|
|
191
|
+
let parent = this.element.parentElement;
|
|
192
|
+
while (parent) {
|
|
193
|
+
if (parent.classList.contains(`${PREFIX}-accordion-group`) && parent.__inaAccordionGroup) {
|
|
194
|
+
return parent.__inaAccordionGroup;
|
|
195
|
+
}
|
|
196
|
+
parent = parent.parentElement;
|
|
197
|
+
}
|
|
198
|
+
return null;
|
|
199
|
+
}
|
|
200
|
+
handleClick(e) {
|
|
201
|
+
if (this.isDisabled) return;
|
|
202
|
+
e.stopPropagation();
|
|
203
|
+
const isOpen = this.element.classList.contains(`${PREFIX}-accordion--open`);
|
|
204
|
+
const nextState = !isOpen;
|
|
205
|
+
if (this.group) {
|
|
206
|
+
this.group.handleItemToggle(this.index, nextState);
|
|
207
|
+
} else {
|
|
208
|
+
this.setOpenState(nextState);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
setOpenState(isOpen) {
|
|
212
|
+
if (isOpen) {
|
|
213
|
+
this.element.classList.add(`${PREFIX}-accordion--open`);
|
|
214
|
+
this.toggle.setAttribute("aria-expanded", "true");
|
|
215
|
+
if (this.icon) this.icon.classList.add(`${PREFIX}-accordion__icon--open`);
|
|
216
|
+
this.content.classList.add(`${PREFIX}-accordion__content--open`);
|
|
217
|
+
this.body.classList.add(`${PREFIX}-accordion__body--open`);
|
|
218
|
+
this.body.style.maxHeight = `${this.body.scrollHeight}px`;
|
|
219
|
+
} else {
|
|
220
|
+
this.element.classList.remove(`${PREFIX}-accordion--open`);
|
|
221
|
+
this.toggle.setAttribute("aria-expanded", "false");
|
|
222
|
+
if (this.icon)
|
|
223
|
+
this.icon.classList.remove(`${PREFIX}-accordion__icon--open`);
|
|
224
|
+
this.content.classList.remove(`${PREFIX}-accordion__content--open`);
|
|
225
|
+
this.body.classList.remove(`${PREFIX}-accordion__body--open`);
|
|
226
|
+
this.body.style.maxHeight = null;
|
|
227
|
+
}
|
|
173
228
|
}
|
|
229
|
+
};
|
|
230
|
+
function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
|
|
231
|
+
const accordionGroups = document.querySelectorAll(rootSelector);
|
|
232
|
+
accordionGroups.forEach((groupEl) => {
|
|
233
|
+
if (!groupEl.__inaAccordionGroup) {
|
|
234
|
+
new AccordionGroup(groupEl);
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
const accordions = document.querySelectorAll(`.${PREFIX}-accordion`);
|
|
238
|
+
accordions.forEach((accEl) => {
|
|
239
|
+
if (!accEl.__inaAccordion) {
|
|
240
|
+
const acc = new Accordion(accEl);
|
|
241
|
+
accEl.__inaAccordion = acc;
|
|
242
|
+
}
|
|
243
|
+
});
|
|
174
244
|
}
|
|
175
245
|
|
|
176
246
|
// src/js/components/stateful/datepicker.js
|
|
@@ -856,68 +926,6 @@ var InaUI = (() => {
|
|
|
856
926
|
});
|
|
857
927
|
}
|
|
858
928
|
|
|
859
|
-
// src/js/components/stateless/banner.js
|
|
860
|
-
function initBanner(rootSelector = `.${PREFIX}-banner`) {
|
|
861
|
-
document.querySelectorAll(rootSelector).forEach((banner) => {
|
|
862
|
-
const mediaQuery = window.matchMedia("(max-width: 1279px)");
|
|
863
|
-
function updateElText(targetEl, mediaQuery2) {
|
|
864
|
-
targetEl.textContent = mediaQuery2.matches ? "Situs ini merupakan platform resmi pemerintah." : "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital.";
|
|
865
|
-
}
|
|
866
|
-
const contentEl = document.createElement("div");
|
|
867
|
-
contentEl.className = `${PREFIX}-banner__content`;
|
|
868
|
-
const iconEl = document.createElement("div");
|
|
869
|
-
iconEl.className = `${PREFIX}-banner__icon`;
|
|
870
|
-
const wrapperEl = document.createElement("div");
|
|
871
|
-
wrapperEl.className = `${PREFIX}-banner__wrapper`;
|
|
872
|
-
const headerEl = document.createElement("div");
|
|
873
|
-
headerEl.className = `${PREFIX}-banner__header`;
|
|
874
|
-
const headerWrapperEl = document.createElement("div");
|
|
875
|
-
headerWrapperEl.className = `${PREFIX}-banner__header-wrapper`;
|
|
876
|
-
const headerTitleEl = document.createElement("p");
|
|
877
|
-
headerTitleEl.className = `${PREFIX}-banner__title`;
|
|
878
|
-
headerTitleEl.textContent = "Situs ini merupakan platform resmi pemerintah. ";
|
|
879
|
-
updateElText(headerTitleEl, mediaQuery);
|
|
880
|
-
const identityEl = document.createElement("a");
|
|
881
|
-
identityEl.href = "#";
|
|
882
|
-
identityEl.className = `${PREFIX}-banner__identity`;
|
|
883
|
-
identityEl.textContent = "Lebih Lanjut";
|
|
884
|
-
identityEl.addEventListener("click", (e) => {
|
|
885
|
-
e.preventDefault();
|
|
886
|
-
banner.classList.toggle("open");
|
|
887
|
-
});
|
|
888
|
-
const chevronEl = document.createElement("button");
|
|
889
|
-
chevronEl.className = `${PREFIX}-banner__chevron`;
|
|
890
|
-
chevronEl.addEventListener("click", (e) => {
|
|
891
|
-
e.preventDefault();
|
|
892
|
-
banner.classList.toggle("open");
|
|
893
|
-
const isOpen = banner.classList.contains("open");
|
|
894
|
-
headerTitleEl.textContent = isOpen ? "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital." : "Situs ini merupakan platform resmi pemerintah. ";
|
|
895
|
-
});
|
|
896
|
-
headerWrapperEl.appendChild(headerTitleEl);
|
|
897
|
-
headerWrapperEl.appendChild(identityEl);
|
|
898
|
-
headerEl.appendChild(headerWrapperEl);
|
|
899
|
-
headerEl.appendChild(chevronEl);
|
|
900
|
-
const bodyEl = document.createElement("div");
|
|
901
|
-
bodyEl.className = `${PREFIX}-banner__body`;
|
|
902
|
-
const bodyTitleEl = document.createElement("p");
|
|
903
|
-
bodyTitleEl.className = `${PREFIX}-banner__title`;
|
|
904
|
-
bodyTitleEl.textContent = "INA Digital adalah inisiatif pemerintah Indonesia untuk membangun ekosistem layanan publik digital yang terintegrasi, aman, dan mudah digunakan oleh masyarakat.";
|
|
905
|
-
const descEl = document.createElement("p");
|
|
906
|
-
descEl.className = `${PREFIX}-banner__desc`;
|
|
907
|
-
descEl.textContent = "Pastikan untuk memperhatikan ikon kunci (\u{1F512}) dan alamat https:// sebagai penanda keamanan.";
|
|
908
|
-
bodyEl.appendChild(bodyTitleEl);
|
|
909
|
-
bodyEl.appendChild(descEl);
|
|
910
|
-
wrapperEl.appendChild(headerEl);
|
|
911
|
-
wrapperEl.appendChild(bodyEl);
|
|
912
|
-
contentEl.appendChild(iconEl);
|
|
913
|
-
contentEl.appendChild(wrapperEl);
|
|
914
|
-
banner.appendChild(contentEl);
|
|
915
|
-
mediaQuery.addEventListener("change", () => {
|
|
916
|
-
updateElText(headerTitleEl, mediaQuery);
|
|
917
|
-
});
|
|
918
|
-
});
|
|
919
|
-
}
|
|
920
|
-
|
|
921
929
|
// src/js/components/stateful/file-upload-base.js
|
|
922
930
|
function initFileUploadBase(rootSelector = `.${PREFIX}-file-base`) {
|
|
923
931
|
document.querySelectorAll(rootSelector).forEach((fileUploadBase) => {
|
|
@@ -1767,7 +1775,6 @@ var InaUI = (() => {
|
|
|
1767
1775
|
if (typeof window !== void 0) {
|
|
1768
1776
|
document.addEventListener("DOMContentLoaded", () => {
|
|
1769
1777
|
initAccordion();
|
|
1770
|
-
initBanner();
|
|
1771
1778
|
initButtonGroup();
|
|
1772
1779
|
initDatepicker();
|
|
1773
1780
|
initDropdown();
|
package/dist/index.js
CHANGED
|
@@ -70,95 +70,166 @@ function initToggle(rootSelector = `.${PREFIX}-toggle`) {
|
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
// src/js/components/stateless/accordion.js
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
} else {
|
|
97
|
-
if (nextState) {
|
|
98
|
-
accordions.forEach((otherAcc) => {
|
|
99
|
-
if (otherAcc !== accordion) {
|
|
100
|
-
const otherToggle = otherAcc.querySelector(
|
|
101
|
-
`.${PREFIX}-accordion__toggle`
|
|
102
|
-
);
|
|
103
|
-
const otherContent = otherAcc.querySelector(
|
|
104
|
-
`.${PREFIX}-accordion__content`
|
|
105
|
-
);
|
|
106
|
-
const otherBody = otherAcc.querySelector(
|
|
107
|
-
`.${PREFIX}-accordion__body`
|
|
108
|
-
);
|
|
109
|
-
if (otherToggle && otherContent && otherBody) {
|
|
110
|
-
closeItem(otherAcc, otherToggle, otherContent, otherBody);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
openItem(accordion, toggle, content, body);
|
|
115
|
-
} else {
|
|
116
|
-
closeItem(accordion, toggle, content, body);
|
|
117
|
-
}
|
|
73
|
+
// src/js/components/stateless/accordion-group.js
|
|
74
|
+
var AccordionGroup = class {
|
|
75
|
+
constructor(element) {
|
|
76
|
+
this.element = element;
|
|
77
|
+
this.items = /* @__PURE__ */ new Map();
|
|
78
|
+
this.itemsArray = [];
|
|
79
|
+
this.isMultiple = element.getAttribute("data-multiple-open") === "true" || element.getAttribute("data-behavior") === "multiple";
|
|
80
|
+
this.openIndexes = [];
|
|
81
|
+
this.element.__inaAccordionGroup = this;
|
|
82
|
+
}
|
|
83
|
+
registerItem(item) {
|
|
84
|
+
const index = this.items.size;
|
|
85
|
+
this.items.set(item.id, index);
|
|
86
|
+
this.itemsArray.push(item);
|
|
87
|
+
if (item.defaultOpen) {
|
|
88
|
+
if (this.isMultiple) {
|
|
89
|
+
if (!this.openIndexes.includes(index)) {
|
|
90
|
+
this.openIndexes.push(index);
|
|
91
|
+
}
|
|
92
|
+
} else {
|
|
93
|
+
if (this.openIndexes.length === 0) {
|
|
94
|
+
this.openIndexes.push(index);
|
|
118
95
|
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return index;
|
|
99
|
+
}
|
|
100
|
+
unregisterItem(item) {
|
|
101
|
+
const index = this.items.get(item.id);
|
|
102
|
+
if (index !== void 0) {
|
|
103
|
+
this.items.delete(item.id);
|
|
104
|
+
this.itemsArray = this.itemsArray.filter((i) => i !== item);
|
|
105
|
+
this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
|
|
106
|
+
const newMap = /* @__PURE__ */ new Map();
|
|
107
|
+
this.itemsArray.forEach((itm, newIdx) => {
|
|
108
|
+
newMap.set(itm.id, newIdx);
|
|
119
109
|
});
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
|
|
128
|
-
const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
|
|
129
|
-
if (!toggle || !content || !body) return;
|
|
130
|
-
toggle.addEventListener("click", (e) => {
|
|
131
|
-
e.stopPropagation();
|
|
132
|
-
const isOpen = accordion.classList.contains(`${PREFIX}-accordion--open`);
|
|
110
|
+
this.items = newMap;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
handleItemToggle(index, isOpen) {
|
|
114
|
+
const prevIndexes = [...this.openIndexes];
|
|
115
|
+
let nextIndexes = [];
|
|
116
|
+
if (this.isMultiple) {
|
|
133
117
|
if (isOpen) {
|
|
134
|
-
|
|
118
|
+
if (!prevIndexes.includes(index)) {
|
|
119
|
+
nextIndexes = [...prevIndexes, index];
|
|
120
|
+
} else {
|
|
121
|
+
nextIndexes = prevIndexes;
|
|
122
|
+
}
|
|
135
123
|
} else {
|
|
136
|
-
|
|
124
|
+
nextIndexes = prevIndexes.filter((idx) => idx !== index);
|
|
137
125
|
}
|
|
126
|
+
} else {
|
|
127
|
+
if (isOpen) {
|
|
128
|
+
nextIndexes = [index];
|
|
129
|
+
} else {
|
|
130
|
+
nextIndexes = [];
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
this.openIndexes = nextIndexes;
|
|
134
|
+
this.notifyItems();
|
|
135
|
+
}
|
|
136
|
+
isItemOpen(index) {
|
|
137
|
+
return this.openIndexes.includes(index);
|
|
138
|
+
}
|
|
139
|
+
getItemIndex(itemId) {
|
|
140
|
+
return this.items.get(itemId);
|
|
141
|
+
}
|
|
142
|
+
// Notify all children to update their visual state based on new openIndexes
|
|
143
|
+
notifyItems() {
|
|
144
|
+
this.itemsArray.forEach((item, index) => {
|
|
145
|
+
const isOpen = this.openIndexes.includes(index);
|
|
146
|
+
item.setOpenState(isOpen);
|
|
138
147
|
});
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
function openItem(accordion, toggle, content, body) {
|
|
142
|
-
accordion.classList.add(`${PREFIX}-accordion--open`);
|
|
143
|
-
toggle.setAttribute("aria-expanded", "true");
|
|
144
|
-
const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
|
|
145
|
-
if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
|
|
146
|
-
content.classList.add(`${PREFIX}-accordion__content--open`);
|
|
147
|
-
body.classList.add(`${PREFIX}-accordion__body--open`);
|
|
148
|
-
if (body) {
|
|
149
|
-
body.style.maxHeight = `${body.scrollHeight}px`;
|
|
150
148
|
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
// src/js/components/stateless/accordion.js
|
|
152
|
+
var Accordion = class {
|
|
153
|
+
constructor(element) {
|
|
154
|
+
this.element = element;
|
|
155
|
+
this.toggle = element.querySelector(`.${PREFIX}-accordion__toggle`);
|
|
156
|
+
this.content = element.querySelector(`.${PREFIX}-accordion__content`);
|
|
157
|
+
this.body = element.querySelector(`.${PREFIX}-accordion__body`);
|
|
158
|
+
this.icon = element.querySelector(`.${PREFIX}-accordion__icon`);
|
|
159
|
+
if (!this.toggle || !this.content || !this.body) {
|
|
160
|
+
console.warn("[InaUI] Accordion missing required elements", element);
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
this.id = element.id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
|
|
164
|
+
this.defaultOpen = element.getAttribute("data-default-open") === "true" || element.classList.contains(`${PREFIX}-accordion--open`);
|
|
165
|
+
this.isDisabled = element.classList.contains(`${PREFIX}-accordion--disabled`) || this.toggle.hasAttribute("disabled");
|
|
166
|
+
this.group = this.findParentGroup();
|
|
167
|
+
this.index = -1;
|
|
168
|
+
if (this.group) {
|
|
169
|
+
this.index = this.group.registerItem(this);
|
|
170
|
+
}
|
|
171
|
+
this.toggle.addEventListener("click", (e) => this.handleClick(e));
|
|
172
|
+
if (this.group) {
|
|
173
|
+
const isOpen = this.group.isItemOpen(this.index);
|
|
174
|
+
this.setOpenState(isOpen);
|
|
175
|
+
} else {
|
|
176
|
+
this.setOpenState(this.defaultOpen);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
findParentGroup() {
|
|
180
|
+
let parent = this.element.parentElement;
|
|
181
|
+
while (parent) {
|
|
182
|
+
if (parent.classList.contains(`${PREFIX}-accordion-group`) && parent.__inaAccordionGroup) {
|
|
183
|
+
return parent.__inaAccordionGroup;
|
|
184
|
+
}
|
|
185
|
+
parent = parent.parentElement;
|
|
186
|
+
}
|
|
187
|
+
return null;
|
|
188
|
+
}
|
|
189
|
+
handleClick(e) {
|
|
190
|
+
if (this.isDisabled) return;
|
|
191
|
+
e.stopPropagation();
|
|
192
|
+
const isOpen = this.element.classList.contains(`${PREFIX}-accordion--open`);
|
|
193
|
+
const nextState = !isOpen;
|
|
194
|
+
if (this.group) {
|
|
195
|
+
this.group.handleItemToggle(this.index, nextState);
|
|
196
|
+
} else {
|
|
197
|
+
this.setOpenState(nextState);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
setOpenState(isOpen) {
|
|
201
|
+
if (isOpen) {
|
|
202
|
+
this.element.classList.add(`${PREFIX}-accordion--open`);
|
|
203
|
+
this.toggle.setAttribute("aria-expanded", "true");
|
|
204
|
+
if (this.icon) this.icon.classList.add(`${PREFIX}-accordion__icon--open`);
|
|
205
|
+
this.content.classList.add(`${PREFIX}-accordion__content--open`);
|
|
206
|
+
this.body.classList.add(`${PREFIX}-accordion__body--open`);
|
|
207
|
+
this.body.style.maxHeight = `${this.body.scrollHeight}px`;
|
|
208
|
+
} else {
|
|
209
|
+
this.element.classList.remove(`${PREFIX}-accordion--open`);
|
|
210
|
+
this.toggle.setAttribute("aria-expanded", "false");
|
|
211
|
+
if (this.icon)
|
|
212
|
+
this.icon.classList.remove(`${PREFIX}-accordion__icon--open`);
|
|
213
|
+
this.content.classList.remove(`${PREFIX}-accordion__content--open`);
|
|
214
|
+
this.body.classList.remove(`${PREFIX}-accordion__body--open`);
|
|
215
|
+
this.body.style.maxHeight = null;
|
|
216
|
+
}
|
|
161
217
|
}
|
|
218
|
+
};
|
|
219
|
+
function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
|
|
220
|
+
const accordionGroups = document.querySelectorAll(rootSelector);
|
|
221
|
+
accordionGroups.forEach((groupEl) => {
|
|
222
|
+
if (!groupEl.__inaAccordionGroup) {
|
|
223
|
+
new AccordionGroup(groupEl);
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
const accordions = document.querySelectorAll(`.${PREFIX}-accordion`);
|
|
227
|
+
accordions.forEach((accEl) => {
|
|
228
|
+
if (!accEl.__inaAccordion) {
|
|
229
|
+
const acc = new Accordion(accEl);
|
|
230
|
+
accEl.__inaAccordion = acc;
|
|
231
|
+
}
|
|
232
|
+
});
|
|
162
233
|
}
|
|
163
234
|
|
|
164
235
|
// src/js/components/stateful/datepicker.js
|
|
@@ -844,68 +915,6 @@ function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
|
|
|
844
915
|
});
|
|
845
916
|
}
|
|
846
917
|
|
|
847
|
-
// src/js/components/stateless/banner.js
|
|
848
|
-
function initBanner(rootSelector = `.${PREFIX}-banner`) {
|
|
849
|
-
document.querySelectorAll(rootSelector).forEach((banner) => {
|
|
850
|
-
const mediaQuery = window.matchMedia("(max-width: 1279px)");
|
|
851
|
-
function updateElText(targetEl, mediaQuery2) {
|
|
852
|
-
targetEl.textContent = mediaQuery2.matches ? "Situs ini merupakan platform resmi pemerintah." : "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital.";
|
|
853
|
-
}
|
|
854
|
-
const contentEl = document.createElement("div");
|
|
855
|
-
contentEl.className = `${PREFIX}-banner__content`;
|
|
856
|
-
const iconEl = document.createElement("div");
|
|
857
|
-
iconEl.className = `${PREFIX}-banner__icon`;
|
|
858
|
-
const wrapperEl = document.createElement("div");
|
|
859
|
-
wrapperEl.className = `${PREFIX}-banner__wrapper`;
|
|
860
|
-
const headerEl = document.createElement("div");
|
|
861
|
-
headerEl.className = `${PREFIX}-banner__header`;
|
|
862
|
-
const headerWrapperEl = document.createElement("div");
|
|
863
|
-
headerWrapperEl.className = `${PREFIX}-banner__header-wrapper`;
|
|
864
|
-
const headerTitleEl = document.createElement("p");
|
|
865
|
-
headerTitleEl.className = `${PREFIX}-banner__title`;
|
|
866
|
-
headerTitleEl.textContent = "Situs ini merupakan platform resmi pemerintah. ";
|
|
867
|
-
updateElText(headerTitleEl, mediaQuery);
|
|
868
|
-
const identityEl = document.createElement("a");
|
|
869
|
-
identityEl.href = "#";
|
|
870
|
-
identityEl.className = `${PREFIX}-banner__identity`;
|
|
871
|
-
identityEl.textContent = "Lebih Lanjut";
|
|
872
|
-
identityEl.addEventListener("click", (e) => {
|
|
873
|
-
e.preventDefault();
|
|
874
|
-
banner.classList.toggle("open");
|
|
875
|
-
});
|
|
876
|
-
const chevronEl = document.createElement("button");
|
|
877
|
-
chevronEl.className = `${PREFIX}-banner__chevron`;
|
|
878
|
-
chevronEl.addEventListener("click", (e) => {
|
|
879
|
-
e.preventDefault();
|
|
880
|
-
banner.classList.toggle("open");
|
|
881
|
-
const isOpen = banner.classList.contains("open");
|
|
882
|
-
headerTitleEl.textContent = isOpen ? "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital." : "Situs ini merupakan platform resmi pemerintah. ";
|
|
883
|
-
});
|
|
884
|
-
headerWrapperEl.appendChild(headerTitleEl);
|
|
885
|
-
headerWrapperEl.appendChild(identityEl);
|
|
886
|
-
headerEl.appendChild(headerWrapperEl);
|
|
887
|
-
headerEl.appendChild(chevronEl);
|
|
888
|
-
const bodyEl = document.createElement("div");
|
|
889
|
-
bodyEl.className = `${PREFIX}-banner__body`;
|
|
890
|
-
const bodyTitleEl = document.createElement("p");
|
|
891
|
-
bodyTitleEl.className = `${PREFIX}-banner__title`;
|
|
892
|
-
bodyTitleEl.textContent = "INA Digital adalah inisiatif pemerintah Indonesia untuk membangun ekosistem layanan publik digital yang terintegrasi, aman, dan mudah digunakan oleh masyarakat.";
|
|
893
|
-
const descEl = document.createElement("p");
|
|
894
|
-
descEl.className = `${PREFIX}-banner__desc`;
|
|
895
|
-
descEl.textContent = "Pastikan untuk memperhatikan ikon kunci (\u{1F512}) dan alamat https:// sebagai penanda keamanan.";
|
|
896
|
-
bodyEl.appendChild(bodyTitleEl);
|
|
897
|
-
bodyEl.appendChild(descEl);
|
|
898
|
-
wrapperEl.appendChild(headerEl);
|
|
899
|
-
wrapperEl.appendChild(bodyEl);
|
|
900
|
-
contentEl.appendChild(iconEl);
|
|
901
|
-
contentEl.appendChild(wrapperEl);
|
|
902
|
-
banner.appendChild(contentEl);
|
|
903
|
-
mediaQuery.addEventListener("change", () => {
|
|
904
|
-
updateElText(headerTitleEl, mediaQuery);
|
|
905
|
-
});
|
|
906
|
-
});
|
|
907
|
-
}
|
|
908
|
-
|
|
909
918
|
// src/js/components/stateful/file-upload-base.js
|
|
910
919
|
function initFileUploadBase(rootSelector = `.${PREFIX}-file-base`) {
|
|
911
920
|
document.querySelectorAll(rootSelector).forEach((fileUploadBase) => {
|
|
@@ -1657,7 +1666,6 @@ function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
|
|
|
1657
1666
|
if (typeof window !== void 0) {
|
|
1658
1667
|
document.addEventListener("DOMContentLoaded", () => {
|
|
1659
1668
|
initAccordion();
|
|
1660
|
-
initBanner();
|
|
1661
1669
|
initButtonGroup();
|
|
1662
1670
|
initDatepicker();
|
|
1663
1671
|
initDropdown();
|
|
@@ -1676,7 +1684,6 @@ if (typeof window !== void 0) {
|
|
|
1676
1684
|
var PREFIX = "ina";
|
|
1677
1685
|
function initAll() {
|
|
1678
1686
|
initAccordion();
|
|
1679
|
-
initBanner();
|
|
1680
1687
|
initButtonGroup();
|
|
1681
1688
|
initDatepicker();
|
|
1682
1689
|
initDropdown();
|