@pie-element/placement-ordering 14.1.2-next.12 → 14.1.2-next.13
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/browser/delivery/index.js +117 -123
- package/dist/browser/delivery/index.js.map +1 -1
- package/dist/delivery/ordering.js +13 -19
- package/dist/index.iife.js +1 -1
- package/package.json +1 -1
|
@@ -204,29 +204,29 @@ function V(e) {
|
|
|
204
204
|
function ce(e, t) {
|
|
205
205
|
return !e || V(e) ? e : V(e.default) ? e.default : t && V(e[t]) ? e[t] : t && V(e[t]?.default) ? e[t].default : e;
|
|
206
206
|
}
|
|
207
|
-
var le = ce(v, "Readable") || ce(
|
|
207
|
+
var le = ce(v, "Readable") || ce(ue.Readable, "Readable"), H = x, U = H.default, ue = U && typeof U == "object" ? U : H, { translator: W } = O, de = {
|
|
208
208
|
WebkitTouchCallout: "none",
|
|
209
209
|
WebkitUserSelect: "none",
|
|
210
210
|
KhtmlUserSelect: "none",
|
|
211
211
|
MozUserSelect: "none",
|
|
212
212
|
msUserSelect: "none",
|
|
213
213
|
userSelect: "none"
|
|
214
|
-
},
|
|
214
|
+
}, fe = b("div")(() => ({
|
|
215
215
|
width: "100%",
|
|
216
216
|
cursor: "pointer"
|
|
217
|
-
})),
|
|
217
|
+
})), pe = b("div")(() => ({
|
|
218
218
|
margin: "0 auto",
|
|
219
219
|
textAlign: "center",
|
|
220
220
|
display: "flex"
|
|
221
|
-
})),
|
|
221
|
+
})), me = b("div")(() => ({
|
|
222
222
|
width: "fit-content",
|
|
223
223
|
minWidth: "140px",
|
|
224
224
|
alignSelf: "center",
|
|
225
225
|
verticalAlign: "middle",
|
|
226
226
|
color: `var(--correct-answer-toggle-label-color, ${w.text()})`,
|
|
227
227
|
fontWeight: "normal",
|
|
228
|
-
...
|
|
229
|
-
})),
|
|
228
|
+
...de
|
|
229
|
+
})), G = b("div")(() => ({
|
|
230
230
|
position: "absolute",
|
|
231
231
|
width: "25px",
|
|
232
232
|
"&.enter": { opacity: "0" },
|
|
@@ -239,12 +239,12 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
239
239
|
opacity: "0",
|
|
240
240
|
transition: "opacity 0.3s ease-in"
|
|
241
241
|
}
|
|
242
|
-
})),
|
|
242
|
+
})), he = b("div")(() => ({
|
|
243
243
|
width: "25px",
|
|
244
244
|
marginRight: "5px",
|
|
245
245
|
display: "flex",
|
|
246
246
|
alignItems: "center"
|
|
247
|
-
})),
|
|
247
|
+
})), ge = class e extends k.Component {
|
|
248
248
|
static propTypes = {
|
|
249
249
|
onToggle: L.default.func,
|
|
250
250
|
toggled: L.default.bool,
|
|
@@ -263,8 +263,8 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
263
263
|
constructor(t) {
|
|
264
264
|
super(t), this.state = { show: t.show }, this.openIconRef = k.createRef(), this.closedIconRef = k.createRef(), e.defaultProps = {
|
|
265
265
|
...e.defaultProps,
|
|
266
|
-
showMessage:
|
|
267
|
-
hideMessage:
|
|
266
|
+
showMessage: W.t("common:showCorrectAnswer", { lng: t.language }),
|
|
267
|
+
hideMessage: W.t("common:hideCorrectAnswer", { lng: t.language })
|
|
268
268
|
};
|
|
269
269
|
}
|
|
270
270
|
onClick() {
|
|
@@ -276,20 +276,20 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
276
276
|
UNSAFE_componentWillReceiveProps(t) {
|
|
277
277
|
this.setState({ show: t.show }), t.language !== this.props?.language && (e.defaultProps = {
|
|
278
278
|
...e.defaultProps,
|
|
279
|
-
showMessage:
|
|
280
|
-
hideMessage:
|
|
279
|
+
showMessage: W.t("common:showCorrectAnswer", { lng: t.language }),
|
|
280
|
+
hideMessage: W.t("common:hideCorrectAnswer", { lng: t.language })
|
|
281
281
|
});
|
|
282
282
|
}
|
|
283
283
|
render() {
|
|
284
284
|
let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
|
|
285
|
-
return /* @__PURE__ */ P(
|
|
285
|
+
return /* @__PURE__ */ P(fe, {
|
|
286
286
|
className: e,
|
|
287
287
|
children: /* @__PURE__ */ P(se, {
|
|
288
288
|
show: this.state.show,
|
|
289
|
-
children: /* @__PURE__ */ F(
|
|
289
|
+
children: /* @__PURE__ */ F(pe, {
|
|
290
290
|
onClick: this.onClick.bind(this),
|
|
291
291
|
onTouchEnd: this.onTouch.bind(this),
|
|
292
|
-
children: [/* @__PURE__ */ F(
|
|
292
|
+
children: [/* @__PURE__ */ F(he, { children: [/* @__PURE__ */ P(S, {
|
|
293
293
|
nodeRef: this.openIconRef,
|
|
294
294
|
timeout: 400,
|
|
295
295
|
in: t,
|
|
@@ -300,7 +300,7 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
300
300
|
exit: "exit",
|
|
301
301
|
exitActive: "exit-active"
|
|
302
302
|
},
|
|
303
|
-
children: /* @__PURE__ */ P(
|
|
303
|
+
children: /* @__PURE__ */ P(G, {
|
|
304
304
|
ref: this.openIconRef,
|
|
305
305
|
children: /* @__PURE__ */ P(B, { open: t }, "correct-open")
|
|
306
306
|
})
|
|
@@ -315,13 +315,13 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
315
315
|
exit: "exit",
|
|
316
316
|
exitActive: "exit-active"
|
|
317
317
|
},
|
|
318
|
-
children: /* @__PURE__ */ P(
|
|
318
|
+
children: /* @__PURE__ */ P(G, {
|
|
319
319
|
ref: this.closedIconRef,
|
|
320
320
|
children: /* @__PURE__ */ P(B, { open: t }, "correct-closed")
|
|
321
321
|
})
|
|
322
322
|
})] }), /* @__PURE__ */ P(le, {
|
|
323
323
|
false: !0,
|
|
324
|
-
children: /* @__PURE__ */ P(
|
|
324
|
+
children: /* @__PURE__ */ P(me, {
|
|
325
325
|
"aria-hidden": !this.state.show,
|
|
326
326
|
children: t ? n : r
|
|
327
327
|
})
|
|
@@ -333,22 +333,22 @@ var le = ce(v, "Readable") || ce(de.Readable, "Readable"), ue = x, H = ue.defaul
|
|
|
333
333
|
};
|
|
334
334
|
//#endregion
|
|
335
335
|
//#region ../../lib-react/drag/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js
|
|
336
|
-
function
|
|
336
|
+
function _e(e) {
|
|
337
337
|
var t, n, r = "";
|
|
338
338
|
if (typeof e == "string" || typeof e == "number") r += e;
|
|
339
339
|
else if (typeof e == "object") if (Array.isArray(e)) {
|
|
340
340
|
var i = e.length;
|
|
341
|
-
for (t = 0; t < i; t++) e[t] && (n =
|
|
341
|
+
for (t = 0; t < i; t++) e[t] && (n = _e(e[t])) && (r && (r += " "), r += n);
|
|
342
342
|
} else for (n in e) e[n] && (r && (r += " "), r += n);
|
|
343
343
|
return r;
|
|
344
344
|
}
|
|
345
|
-
function
|
|
346
|
-
for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t =
|
|
345
|
+
function ve() {
|
|
346
|
+
for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = _e(e)) && (r && (r += " "), r += t);
|
|
347
347
|
return r;
|
|
348
348
|
}
|
|
349
349
|
//#endregion
|
|
350
350
|
//#region ../../lib-react/drag/dist/placeholder.js
|
|
351
|
-
var
|
|
351
|
+
var ye = b("div")(({ theme: e }) => ({
|
|
352
352
|
"&.placeholder": {
|
|
353
353
|
WebkitTouchCallout: "none",
|
|
354
354
|
WebkitUserSelect: "none",
|
|
@@ -401,25 +401,25 @@ var be = b("div")(({ theme: e }) => ({
|
|
|
401
401
|
display: "flex",
|
|
402
402
|
flexFlow: "column wrap"
|
|
403
403
|
}
|
|
404
|
-
})),
|
|
405
|
-
let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f =
|
|
404
|
+
})), be = (e) => {
|
|
405
|
+
let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f = ve("placeholder", o && "placeholderDisabled", r && "over", i, n), p = {};
|
|
406
406
|
if (a && a.columns && (p.gridTemplateColumns = `repeat(${a.columns}, 1fr)`), a && a.rows) {
|
|
407
407
|
let e = a.rowsRepeatValue || "1fr";
|
|
408
408
|
p.gridTemplateRows = `repeat(${a.rows}, ${e})`;
|
|
409
409
|
}
|
|
410
410
|
i === "choice" && (p.border = `1px solid ${w.borderLight()}`, p.background = w.surface());
|
|
411
411
|
let m = c ? "categorizeBoard" : "board";
|
|
412
|
-
return /* @__PURE__ */ P(
|
|
412
|
+
return /* @__PURE__ */ P(ye, {
|
|
413
413
|
style: {
|
|
414
414
|
...p,
|
|
415
415
|
minHeight: u,
|
|
416
416
|
...d
|
|
417
417
|
},
|
|
418
|
-
className:
|
|
418
|
+
className: ve(s ? m : f, l && "verticalPool"),
|
|
419
419
|
children: t
|
|
420
420
|
});
|
|
421
421
|
};
|
|
422
|
-
|
|
422
|
+
be.propTypes = {
|
|
423
423
|
choiceBoard: L.default.bool,
|
|
424
424
|
grid: L.default.shape({
|
|
425
425
|
columns: L.default.number,
|
|
@@ -438,24 +438,24 @@ xe.propTypes = {
|
|
|
438
438
|
};
|
|
439
439
|
//#endregion
|
|
440
440
|
//#region src/delivery/tile.tsx
|
|
441
|
-
var
|
|
441
|
+
var xe = (0, I.default)("pie-elements:placement-ordering:tile"), Se = b("div")(({ theme: e }) => ({
|
|
442
442
|
width: "100%",
|
|
443
443
|
fontSize: e.typography.fontSize + 4,
|
|
444
444
|
textAlign: "center",
|
|
445
445
|
color: `rgba(${e.palette.common.black}, 0.6)`
|
|
446
|
-
})),
|
|
446
|
+
})), Ce = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ P(be, {
|
|
447
447
|
type: e,
|
|
448
448
|
isOver: n,
|
|
449
449
|
disabled: r,
|
|
450
|
-
children: e === "target" && t !== void 0 && /* @__PURE__ */ P(
|
|
450
|
+
children: e === "target" && t !== void 0 && /* @__PURE__ */ P(Se, { children: t })
|
|
451
451
|
});
|
|
452
|
-
|
|
452
|
+
Ce.propTypes = {
|
|
453
453
|
type: L.default.string,
|
|
454
454
|
index: L.default.number,
|
|
455
455
|
isOver: L.default.bool,
|
|
456
456
|
disabled: L.default.bool
|
|
457
457
|
};
|
|
458
|
-
var
|
|
458
|
+
var we = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: o, type: s }) => ({
|
|
459
459
|
cursor: i ? "not-allowed" : "grab",
|
|
460
460
|
width: "100%",
|
|
461
461
|
height: "100%",
|
|
@@ -499,14 +499,14 @@ var Te = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
499
499
|
border: "none",
|
|
500
500
|
"&:hover": { backgroundColor: "unset" }
|
|
501
501
|
}
|
|
502
|
-
})),
|
|
502
|
+
})), Te = (e) => {
|
|
503
503
|
let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: o, disabled: s, outcome: c, guideIndex: l } = e;
|
|
504
|
-
return i ? /* @__PURE__ */ P(
|
|
504
|
+
return i ? /* @__PURE__ */ P(Ce, {
|
|
505
505
|
type: t,
|
|
506
506
|
index: l,
|
|
507
507
|
isOver: a,
|
|
508
508
|
disabled: s
|
|
509
|
-
}) : /* @__PURE__ */ P(
|
|
509
|
+
}) : /* @__PURE__ */ P(we, {
|
|
510
510
|
type: t,
|
|
511
511
|
isDragging: n,
|
|
512
512
|
isSelected: r,
|
|
@@ -516,7 +516,7 @@ var Te = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
516
516
|
label: o,
|
|
517
517
|
dangerouslySetInnerHTML: { __html: o }
|
|
518
518
|
});
|
|
519
|
-
},
|
|
519
|
+
}, K = (e) => {
|
|
520
520
|
let { label: t, type: n, id: r, empty: i, disabled: a, outcome: o, index: s, guideIndex: c, instanceId: l, draggable: u, tileIndex: d, selectedChoice: f, onChoiceClick: p, onPlacementClick: m } = e, h = `tile-${n}-${r ?? "empty"}-${d}-${l}`, v = `drop-${n}-${r ?? "empty"}-${d}-${l}`, y = {
|
|
521
521
|
id: r,
|
|
522
522
|
type: n,
|
|
@@ -547,7 +547,7 @@ var Te = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
547
547
|
let te = (e) => {
|
|
548
548
|
I.current = e, S(e), ee(e);
|
|
549
549
|
};
|
|
550
|
-
|
|
550
|
+
xe("[render], props: ", e);
|
|
551
551
|
let L = n === "target" ? `target-${s}` : n === "choice" ? `choice-${r}` : null, R = L ? `${l}:${L}` : void 0;
|
|
552
552
|
return /* @__PURE__ */ P("div", {
|
|
553
553
|
ref: te,
|
|
@@ -574,7 +574,7 @@ var Te = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
574
574
|
...x,
|
|
575
575
|
...b
|
|
576
576
|
} : {},
|
|
577
|
-
children: /* @__PURE__ */ P(
|
|
577
|
+
children: /* @__PURE__ */ P(Te, {
|
|
578
578
|
label: t,
|
|
579
579
|
id: r,
|
|
580
580
|
empty: i,
|
|
@@ -589,7 +589,7 @@ var Te = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
589
589
|
})
|
|
590
590
|
});
|
|
591
591
|
};
|
|
592
|
-
|
|
592
|
+
K.propTypes = {
|
|
593
593
|
id: L.default.any,
|
|
594
594
|
label: L.default.string,
|
|
595
595
|
isOver: L.default.bool,
|
|
@@ -608,7 +608,7 @@ G.propTypes = {
|
|
|
608
608
|
};
|
|
609
609
|
//#endregion
|
|
610
610
|
//#region src/delivery/tiler.tsx
|
|
611
|
-
var
|
|
611
|
+
var q = {
|
|
612
612
|
choiceLabel: L.default.string,
|
|
613
613
|
targetLabel: L.default.string,
|
|
614
614
|
disabled: L.default.bool,
|
|
@@ -618,104 +618,98 @@ var K = {
|
|
|
618
618
|
selectedChoice: L.default.object,
|
|
619
619
|
onChoiceClick: L.default.func,
|
|
620
620
|
onPlacementClick: L.default.func
|
|
621
|
-
},
|
|
621
|
+
}, Ee = {
|
|
622
622
|
tileSize: "1fr",
|
|
623
623
|
disabled: !1,
|
|
624
624
|
addGuide: !1
|
|
625
|
-
},
|
|
626
|
-
let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, t.selectedChoice = e.selectedChoice, t.onChoiceClick = e.onChoiceClick, t.onPlacementClick = e.onPlacementClick, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ A(
|
|
625
|
+
}, De = (e) => {
|
|
626
|
+
let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, t.selectedChoice = e.selectedChoice, t.onChoiceClick = e.onChoiceClick, t.onPlacementClick = e.onPlacementClick, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ A(K, {
|
|
627
627
|
...t,
|
|
628
628
|
key: n
|
|
629
|
-
}) : /* @__PURE__ */ A(
|
|
629
|
+
}) : /* @__PURE__ */ A(K, {
|
|
630
630
|
...t,
|
|
631
631
|
label: "",
|
|
632
632
|
key: n
|
|
633
633
|
}));
|
|
634
|
-
return t.propTypes = { ...
|
|
635
|
-
},
|
|
634
|
+
return t.propTypes = { ...q }, t;
|
|
635
|
+
}, Oe = b("div")(({ theme: e, includeTargets: t }) => ({
|
|
636
636
|
display: "grid",
|
|
637
637
|
paddingBottom: e.spacing(2),
|
|
638
638
|
...t && { gridGap: "10px" }
|
|
639
|
-
})),
|
|
639
|
+
})), ke = b("div")({ textAlign: "center" }), Ae = b("div")({
|
|
640
640
|
textAlign: "center",
|
|
641
641
|
gridRow: "3/4"
|
|
642
|
-
}),
|
|
642
|
+
}), je = b("div")(({ includeTargets: e }) => ({
|
|
643
643
|
gridAutoFlow: "column",
|
|
644
644
|
display: "grid",
|
|
645
645
|
...e && { gridGap: "10px" }
|
|
646
|
-
})),
|
|
646
|
+
})), Me = b("div")({
|
|
647
647
|
gridColumn: "1/2",
|
|
648
648
|
textAlign: "center"
|
|
649
|
-
}),
|
|
649
|
+
}), Ne = b("div")({
|
|
650
650
|
gridColumn: "2/3",
|
|
651
651
|
textAlign: "center"
|
|
652
|
-
}),
|
|
653
|
-
static propTypes = { ...
|
|
654
|
-
static defaultProps = { ...
|
|
652
|
+
}), Pe = class extends k.Component {
|
|
653
|
+
static propTypes = { ...q };
|
|
654
|
+
static defaultProps = { ...Ee };
|
|
655
655
|
render() {
|
|
656
656
|
let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? `auto ${a} auto ${a}` : `auto ${a} auto`, s = e ? i.length / 2 : i.length, c = {
|
|
657
657
|
gridTemplateColumns: e ? `repeat(${s}, ${a})` : `auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`,
|
|
658
658
|
gridTemplateRows: o
|
|
659
659
|
}, l = { gridColumn: `1/${s + 1}` };
|
|
660
|
-
return /* @__PURE__ */ F(
|
|
660
|
+
return /* @__PURE__ */ F(Oe, {
|
|
661
661
|
includeTargets: e,
|
|
662
662
|
style: c,
|
|
663
663
|
children: [
|
|
664
|
-
/* @__PURE__ */ P(
|
|
664
|
+
/* @__PURE__ */ P(ke, {
|
|
665
665
|
style: l,
|
|
666
666
|
dangerouslySetInnerHTML: { __html: t ? n : "" }
|
|
667
667
|
}),
|
|
668
|
-
e && /* @__PURE__ */ P(
|
|
668
|
+
e && /* @__PURE__ */ P(Ae, {
|
|
669
669
|
style: l,
|
|
670
670
|
dangerouslySetInnerHTML: { __html: r }
|
|
671
671
|
}),
|
|
672
|
-
i.map(
|
|
672
|
+
i.map(De(this.props))
|
|
673
673
|
]
|
|
674
674
|
});
|
|
675
675
|
}
|
|
676
|
-
},
|
|
677
|
-
static propTypes = { ...
|
|
678
|
-
static defaultProps = { ...
|
|
676
|
+
}, Fe = class extends k.Component {
|
|
677
|
+
static propTypes = { ...q };
|
|
678
|
+
static defaultProps = { ...Ee };
|
|
679
679
|
render() {
|
|
680
680
|
let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? 2 : 1, s = e ? i.length / 2 : i.length;
|
|
681
|
-
return /* @__PURE__ */ F(
|
|
681
|
+
return /* @__PURE__ */ F(je, {
|
|
682
682
|
includeTargets: e,
|
|
683
683
|
style: {
|
|
684
684
|
gridTemplateColumns: `repeat(${o}, ${a})`,
|
|
685
685
|
gridTemplateRows: e ? `auto repeat(${s}, ${a})` : `auto auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`
|
|
686
686
|
},
|
|
687
687
|
children: [
|
|
688
|
-
/* @__PURE__ */ P(
|
|
689
|
-
e && /* @__PURE__ */ P(
|
|
690
|
-
i.map(
|
|
688
|
+
/* @__PURE__ */ P(Me, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
|
|
689
|
+
e && /* @__PURE__ */ P(Ne, { dangerouslySetInnerHTML: { __html: r } }),
|
|
690
|
+
i.map(De(this.props))
|
|
691
691
|
]
|
|
692
692
|
});
|
|
693
693
|
}
|
|
694
|
-
},
|
|
694
|
+
}, Ie = (0, I.default)("pie-elements:placement-ordering:ordering"), Le = (e, t, n) => {
|
|
695
695
|
let r = e.find((e, n) => n === t), i = e.filter((e, n) => n !== t);
|
|
696
696
|
return [
|
|
697
697
|
...i.slice(0, n),
|
|
698
698
|
r,
|
|
699
699
|
...i.slice(n)
|
|
700
700
|
];
|
|
701
|
-
}, Re = (e, n, r) => {
|
|
702
|
-
if (q("[swap]", e, n, r), !e || e.length <= 1 || n === void 0 || r === void 0) throw Error(`swap requires a non-empty array, fromIndex, toIndex: ${e}, ${n} ${r}`);
|
|
703
|
-
let i = t(e), a = e[r];
|
|
704
|
-
return i[r] = i[n], i[n] = a, i;
|
|
705
701
|
};
|
|
706
|
-
function
|
|
702
|
+
function Re(e, n) {
|
|
707
703
|
let r = t(e.response);
|
|
708
704
|
if (r[n.index] === n.id) r[n.index] = void 0;
|
|
709
705
|
else throw Error(`Tried to remove from index: ${n.index}, but the id doesn't match: array: ${r}, target: ${n.id}`);
|
|
710
706
|
return r;
|
|
711
707
|
}
|
|
712
|
-
function
|
|
708
|
+
function ze(e, n, r) {
|
|
713
709
|
let { response: i, opts: a } = e, o = t(i);
|
|
714
|
-
if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ?
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
return q("fromIndex: ", t, "toIndex:", i), Le(e.response, t, i);
|
|
718
|
-
}
|
|
710
|
+
if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ? (o[r.index] = n.id, o[n.index] = void 0, o) : (Ie("do nothing to the response"), i);
|
|
711
|
+
let s = e.response.findIndex((e) => e !== void 0 && e === n.id), c = e.response.findIndex((e) => e !== void 0 && e === r.id);
|
|
712
|
+
return Ie("fromIndex: ", s, "toIndex:", c), Le(e.response, s, c);
|
|
719
713
|
}
|
|
720
714
|
function J(e, t, n, r) {
|
|
721
715
|
if (r.includeTargets) {
|
|
@@ -752,7 +746,7 @@ function J(e, t, n, r) {
|
|
|
752
746
|
return i === 0 && t.push(a), t.push(o, a), t;
|
|
753
747
|
}, []);
|
|
754
748
|
}
|
|
755
|
-
function
|
|
749
|
+
function Be(e, t, r, i) {
|
|
756
750
|
return i = n({ includeTargets: !0 }, i), r ||= [], t = !t || a(t) ? i.includeTargets ? Array(e.length) : c(e, (e) => e.id) : t, {
|
|
757
751
|
choices: e,
|
|
758
752
|
response: t,
|
|
@@ -761,17 +755,17 @@ function Ve(e, t, r, i) {
|
|
|
761
755
|
tiles: J(e, t, r, i)
|
|
762
756
|
};
|
|
763
757
|
}
|
|
764
|
-
function
|
|
758
|
+
function Ve(e, t) {
|
|
765
759
|
switch (e.type) {
|
|
766
760
|
case "move": {
|
|
767
|
-
let { from: n, to: r } = e, i =
|
|
761
|
+
let { from: n, to: r } = e, i = ze(t, n, r), a = J(t.choices, i, t.outcomes, t.opts);
|
|
768
762
|
return Object.assign({}, t, {
|
|
769
763
|
response: i,
|
|
770
764
|
tiles: a
|
|
771
765
|
});
|
|
772
766
|
}
|
|
773
767
|
case "remove": {
|
|
774
|
-
let { target: n } = e, r =
|
|
768
|
+
let { target: n } = e, r = Re(t, n), i = J(t.choices, r, t.outcomes, t.opts);
|
|
775
769
|
return Object.assign({}, t, {
|
|
776
770
|
response: r,
|
|
777
771
|
tiles: i
|
|
@@ -782,11 +776,11 @@ function He(e, t) {
|
|
|
782
776
|
}
|
|
783
777
|
//#endregion
|
|
784
778
|
//#region src/delivery/utils.ts
|
|
785
|
-
var
|
|
779
|
+
var He = (e, t) => {
|
|
786
780
|
if (!Array.isArray(e) || !Array.isArray(t) || e.length !== t.length) return !1;
|
|
787
781
|
let n = (e) => e.map((e) => JSON.stringify(e)).sort(), r = n(e), i = n(t), a = r.every((e, t) => e === i[t]), o = e.every((e, n) => JSON.stringify(e) === JSON.stringify(t[n]));
|
|
788
782
|
return a && !o;
|
|
789
|
-
},
|
|
783
|
+
}, Ue = (e, { active: t, context: n, currentCoordinates: r }) => {
|
|
790
784
|
let { code: i } = e, a = i === "Tab", o = i === h.Down || i === h.Up || i === h.Left || i === h.Right;
|
|
791
785
|
if (!a && !o) return;
|
|
792
786
|
if (o) return y(e, {
|
|
@@ -828,11 +822,11 @@ var Ue = (e, t) => {
|
|
|
828
822
|
v.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), b && v.push(b);
|
|
829
823
|
let S = 0, C = Infinity;
|
|
830
824
|
for (let e = 0; e < v.length; e++) {
|
|
831
|
-
let t =
|
|
825
|
+
let t = We(p, v[e].center);
|
|
832
826
|
t < C && (C = t, S = e);
|
|
833
827
|
}
|
|
834
828
|
return v[x ? (S - 1 + v.length) % v.length : (S + 1) % v.length].dropPosition;
|
|
835
|
-
},
|
|
829
|
+
}, We = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
|
|
836
830
|
//#endregion
|
|
837
831
|
//#region src/delivery/placement-ordering.tsx
|
|
838
832
|
function Y(e) {
|
|
@@ -841,38 +835,38 @@ function Y(e) {
|
|
|
841
835
|
function X(e, t) {
|
|
842
836
|
return !e || Y(e) ? e : Y(e.default) ? e.default : t && Y(e[t]) ? e[t] : t && Y(e[t]?.default) ? e[t].default : e;
|
|
843
837
|
}
|
|
844
|
-
var
|
|
838
|
+
var Ge = X(D, "UiLayout") || X($.UiLayout, "UiLayout"), Z = X(T, "PreviewPrompt") || X($.PreviewPrompt, "PreviewPrompt"), Ke = X(p, "Feedback") || X($.Feedback, "Feedback"), qe = X(f, "Collapsible") || X($.Collapsible, "Collapsible"), Je = x, Q = Je.default, $ = Q && typeof Q == "object" ? Q : Je, Ye = 250, Xe = (e, t) => {
|
|
845
839
|
if (!e || !t) return !1;
|
|
846
840
|
let n = t.left + t.width / 2, r = t.top + t.height / 2;
|
|
847
841
|
return n >= e.left && n <= e.right && r >= e.top && r <= e.bottom;
|
|
848
|
-
},
|
|
849
|
-
keyboardCoordinateGetter:
|
|
842
|
+
}, Ze = (e) => e ? {
|
|
843
|
+
keyboardCoordinateGetter: Ue,
|
|
850
844
|
keyboardCodes: {
|
|
851
845
|
start: ["Space", "Enter"],
|
|
852
846
|
cancel: ["Escape"],
|
|
853
847
|
end: ["Space", "Enter"]
|
|
854
848
|
},
|
|
855
849
|
accessibility: { screenReaderInstructions: { draggable: "Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel." } }
|
|
856
|
-
} : {}, { translator:
|
|
850
|
+
} : {}, { translator: Qe } = O, $e = (0, I.default)("pie-elements:placement-ordering"), et = b("div")({
|
|
857
851
|
color: w.text(),
|
|
858
852
|
backgroundColor: w.background(),
|
|
859
853
|
display: "flex",
|
|
860
854
|
flexDirection: "column",
|
|
861
855
|
alignItems: "center",
|
|
862
856
|
boxSizing: "border-box"
|
|
863
|
-
}),
|
|
857
|
+
}), tt = b("div")({
|
|
864
858
|
alignSelf: "stretch",
|
|
865
859
|
maxWidth: "100%",
|
|
866
860
|
overflowX: "auto",
|
|
867
861
|
overflowY: "hidden"
|
|
868
|
-
}),
|
|
862
|
+
}), nt = b("div")({
|
|
869
863
|
display: "flex",
|
|
870
864
|
justifyContent: "center",
|
|
871
865
|
minWidth: "min-content"
|
|
872
|
-
}),
|
|
866
|
+
}), rt = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), it = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), at = b(ge)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), ot = b(qe)(({ theme: e }) => ({
|
|
873
867
|
marginBottom: e.spacing(2),
|
|
874
868
|
alignSelf: "flex-start"
|
|
875
|
-
})),
|
|
869
|
+
})), st = (e) => {
|
|
876
870
|
let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
|
|
877
871
|
return /* @__PURE__ */ P(t, {
|
|
878
872
|
...a,
|
|
@@ -881,13 +875,13 @@ var Ke = X(D, "UiLayout") || X($.UiLayout, "UiLayout"), Z = X(T, "PreviewPrompt"
|
|
|
881
875
|
onRemoveChoice: (e) => i(e, n)
|
|
882
876
|
});
|
|
883
877
|
};
|
|
884
|
-
|
|
878
|
+
st.propTypes = {
|
|
885
879
|
tiler: L.default.func,
|
|
886
880
|
ordering: L.default.any,
|
|
887
881
|
onDropChoice: L.default.func,
|
|
888
882
|
onRemoveChoice: L.default.func
|
|
889
883
|
};
|
|
890
|
-
var
|
|
884
|
+
var ct = class extends k.Component {
|
|
891
885
|
static propTypes = {
|
|
892
886
|
onSessionChange: L.default.func.isRequired,
|
|
893
887
|
model: L.default.object.isRequired,
|
|
@@ -927,9 +921,9 @@ var lt = class extends k.Component {
|
|
|
927
921
|
};
|
|
928
922
|
};
|
|
929
923
|
UNSAFE_componentWillReceiveProps(e) {
|
|
930
|
-
let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note ===
|
|
931
|
-
l && u && (n.note =
|
|
932
|
-
let d =
|
|
924
|
+
let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note === Qe.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
|
|
925
|
+
l && u && (n.note = Qe.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (c.showingCorrect = !1);
|
|
926
|
+
let d = He(a, n.choices), { value: f, needsReset: p } = this.validateSession(e, d), m = {
|
|
933
927
|
...e.session,
|
|
934
928
|
value: f
|
|
935
929
|
}, h = n.config?.includeTargets !== s;
|
|
@@ -940,8 +934,8 @@ var lt = class extends k.Component {
|
|
|
940
934
|
}
|
|
941
935
|
onDropChoice = (e, t, n) => {
|
|
942
936
|
let { onSessionChange: r, session: i } = this.props, a = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), o = e;
|
|
943
|
-
|
|
944
|
-
let s =
|
|
937
|
+
$e("[onDropChoice] ", a, o);
|
|
938
|
+
let s = Ve({
|
|
945
939
|
type: "move",
|
|
946
940
|
from: a,
|
|
947
941
|
to: o
|
|
@@ -950,8 +944,8 @@ var lt = class extends k.Component {
|
|
|
950
944
|
};
|
|
951
945
|
onRemoveChoice = (e, t) => {
|
|
952
946
|
let { onSessionChange: n, session: r } = this.props;
|
|
953
|
-
|
|
954
|
-
let i =
|
|
947
|
+
$e("[onRemoveChoice]", e);
|
|
948
|
+
let i = Ve({
|
|
955
949
|
type: "remove",
|
|
956
950
|
target: e
|
|
957
951
|
}, t);
|
|
@@ -962,13 +956,13 @@ var lt = class extends k.Component {
|
|
|
962
956
|
orientation: "vertical",
|
|
963
957
|
includeTargets: !0
|
|
964
958
|
};
|
|
965
|
-
return n ?
|
|
959
|
+
return n ? Be(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
|
|
966
960
|
id: e,
|
|
967
961
|
outcome: "correct"
|
|
968
962
|
})), {
|
|
969
963
|
includeTargets: r,
|
|
970
964
|
allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
|
|
971
|
-
}) :
|
|
965
|
+
}) : Be(e.choices, t.value, e.outcomes, {
|
|
972
966
|
includeTargets: r,
|
|
973
967
|
allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
|
|
974
968
|
});
|
|
@@ -983,7 +977,7 @@ var lt = class extends k.Component {
|
|
|
983
977
|
}
|
|
984
978
|
e && i && (this.onDropChoice(i, e, r), this.focusTile(this.getDestinationSlotId(i)));
|
|
985
979
|
} else if (!t && n) {
|
|
986
|
-
let e = n.data.current, t =
|
|
980
|
+
let e = n.data.current, t = Xe(n.rect?.current?.initial, n.rect?.current?.translated);
|
|
987
981
|
e && e.type === "target" && !t && (this.onRemoveChoice(e, r), this.focusTile(this.getDestinationSlotId({
|
|
988
982
|
type: "choice",
|
|
989
983
|
id: e.id
|
|
@@ -1030,7 +1024,7 @@ var lt = class extends k.Component {
|
|
|
1030
1024
|
});
|
|
1031
1025
|
});
|
|
1032
1026
|
};
|
|
1033
|
-
isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt <
|
|
1027
|
+
isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < Ye;
|
|
1034
1028
|
onChoiceClick = (e) => {
|
|
1035
1029
|
this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
|
|
1036
1030
|
};
|
|
@@ -1041,7 +1035,7 @@ var lt = class extends k.Component {
|
|
|
1041
1035
|
let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: r, prompt: i, rationale: a, feedback: o, config: s, note: c, showNote: l, env: u, disabled: d, teacherInstructions: f, language: p } = e, h = t && t.length > 0, { showingCorrect: g } = this.state, _ = s || {
|
|
1042
1036
|
orientation: "vertical",
|
|
1043
1037
|
includeTargets: !0
|
|
1044
|
-
}, { orientation: v, includeTargets: y } = _, b = v === "vertical", x = this.createOrdering(), { mode: S, role: T } = u || {}, D = b ?
|
|
1038
|
+
}, { orientation: v, includeTargets: y } = _, b = v === "vertical", x = this.createOrdering(), { mode: S, role: T } = u || {}, D = b ? Fe : Pe, O = (g || S === "view" && T === "instructor") && l && c, k = a && (m(a) || C(a)), A = f && (m(f) || C(f)), j = {
|
|
1045
1039
|
color: w.text(),
|
|
1046
1040
|
backgroundColor: w.background(),
|
|
1047
1041
|
display: "flex",
|
|
@@ -1060,12 +1054,12 @@ var lt = class extends k.Component {
|
|
|
1060
1054
|
onDragCancel: this.onDragCancel,
|
|
1061
1055
|
collisionDetection: E,
|
|
1062
1056
|
modifiers: [ne],
|
|
1063
|
-
...
|
|
1064
|
-
children: /* @__PURE__ */ P(
|
|
1057
|
+
...Ze(y),
|
|
1058
|
+
children: /* @__PURE__ */ P(et, { children: /* @__PURE__ */ F(Ge, {
|
|
1065
1059
|
extraCSSRules: r,
|
|
1066
1060
|
style: j,
|
|
1067
1061
|
children: [
|
|
1068
|
-
A && /* @__PURE__ */ P(
|
|
1062
|
+
A && /* @__PURE__ */ P(ot, {
|
|
1069
1063
|
labels: {
|
|
1070
1064
|
hidden: "Show Teacher Instructions",
|
|
1071
1065
|
visible: "Hide Teacher Instructions"
|
|
@@ -1073,14 +1067,14 @@ var lt = class extends k.Component {
|
|
|
1073
1067
|
className: "collapsible",
|
|
1074
1068
|
children: /* @__PURE__ */ P(Z, { prompt: f })
|
|
1075
1069
|
}),
|
|
1076
|
-
/* @__PURE__ */ P(
|
|
1077
|
-
/* @__PURE__ */ P(
|
|
1070
|
+
/* @__PURE__ */ P(rt, { children: /* @__PURE__ */ P(Z, { prompt: i }) }),
|
|
1071
|
+
/* @__PURE__ */ P(at, {
|
|
1078
1072
|
show: h,
|
|
1079
1073
|
toggled: g,
|
|
1080
1074
|
onToggle: this.toggleCorrect,
|
|
1081
1075
|
language: p
|
|
1082
1076
|
}),
|
|
1083
|
-
/* @__PURE__ */ P(
|
|
1077
|
+
/* @__PURE__ */ P(tt, { children: /* @__PURE__ */ P(nt, { children: /* @__PURE__ */ P(st, {
|
|
1084
1078
|
instanceId: this.instanceId,
|
|
1085
1079
|
choiceLabel: _.choiceLabel,
|
|
1086
1080
|
targetLabel: _.targetLabel,
|
|
@@ -1093,8 +1087,8 @@ var lt = class extends k.Component {
|
|
|
1093
1087
|
choiceLabelEnabled: e.config && e.config.choiceLabelEnabled,
|
|
1094
1088
|
...M
|
|
1095
1089
|
}) }) }),
|
|
1096
|
-
O && /* @__PURE__ */ P(
|
|
1097
|
-
k && /* @__PURE__ */ P(
|
|
1090
|
+
O && /* @__PURE__ */ P(it, { dangerouslySetInnerHTML: { __html: c } }),
|
|
1091
|
+
k && /* @__PURE__ */ P(ot, {
|
|
1098
1092
|
labels: {
|
|
1099
1093
|
hidden: "Show Rationale",
|
|
1100
1094
|
visible: "Hide Rationale"
|
|
@@ -1102,7 +1096,7 @@ var lt = class extends k.Component {
|
|
|
1102
1096
|
className: "collapsible",
|
|
1103
1097
|
children: /* @__PURE__ */ P(Z, { prompt: a })
|
|
1104
1098
|
}),
|
|
1105
|
-
!g && /* @__PURE__ */ P(
|
|
1099
|
+
!g && /* @__PURE__ */ P(Ke, {
|
|
1106
1100
|
correctness: n,
|
|
1107
1101
|
feedback: o
|
|
1108
1102
|
})
|
|
@@ -1110,7 +1104,7 @@ var lt = class extends k.Component {
|
|
|
1110
1104
|
}) })
|
|
1111
1105
|
});
|
|
1112
1106
|
}
|
|
1113
|
-
},
|
|
1107
|
+
}, lt = class extends k.Component {
|
|
1114
1108
|
static propTypes = {
|
|
1115
1109
|
model: L.default.object.isRequired,
|
|
1116
1110
|
session: L.default.oneOfType([L.default.array.isRequired, L.default.object.isRequired]),
|
|
@@ -1118,16 +1112,16 @@ var lt = class extends k.Component {
|
|
|
1118
1112
|
};
|
|
1119
1113
|
render() {
|
|
1120
1114
|
let { model: e, session: t, onSessionChange: n } = this.props;
|
|
1121
|
-
return /* @__PURE__ */ P(
|
|
1115
|
+
return /* @__PURE__ */ P(ct, {
|
|
1122
1116
|
model: e,
|
|
1123
1117
|
session: t,
|
|
1124
1118
|
onSessionChange: n
|
|
1125
1119
|
});
|
|
1126
1120
|
}
|
|
1127
|
-
},
|
|
1121
|
+
}, ut = (0, I.default)("pie-elements:placement-ordering"), dt = ({ model: t, session: n }) => {
|
|
1128
1122
|
let { config: r } = t, i = (n && e(n.value) || []).length === t.choices.length;
|
|
1129
1123
|
return r.includeTargets || i;
|
|
1130
|
-
},
|
|
1124
|
+
}, ft = class extends HTMLElement {
|
|
1131
1125
|
constructor() {
|
|
1132
1126
|
super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
|
|
1133
1127
|
}
|
|
@@ -1168,8 +1162,8 @@ var lt = class extends k.Component {
|
|
|
1168
1162
|
}
|
|
1169
1163
|
render() {
|
|
1170
1164
|
if (this._model && this._session) {
|
|
1171
|
-
|
|
1172
|
-
let e = k.createElement(
|
|
1165
|
+
ut("[render] session: ", this._session.value), ut("[render] model: ", this._model), this._initMathObserver();
|
|
1166
|
+
let e = k.createElement(lt, {
|
|
1173
1167
|
model: this._model,
|
|
1174
1168
|
session: this._session,
|
|
1175
1169
|
onSessionChange: this.sessionChange
|
|
@@ -1185,6 +1179,6 @@ var lt = class extends k.Component {
|
|
|
1185
1179
|
}
|
|
1186
1180
|
};
|
|
1187
1181
|
//#endregion
|
|
1188
|
-
export {
|
|
1182
|
+
export { ft as default, dt as isValidSession };
|
|
1189
1183
|
|
|
1190
1184
|
//# sourceMappingURL=index.js.map
|