@realnation/builder-shared-sdk 1.3.0 → 2.0.0
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.
|
@@ -23,7 +23,8 @@ export declare const INTERACTION_KEYS: {
|
|
|
23
23
|
readonly scale: "selected-scale";
|
|
24
24
|
readonly opacity: "selected-opacity";
|
|
25
25
|
};
|
|
26
|
-
|
|
26
|
+
/** `none` is the section's off switch: the element has no interaction state at all. */
|
|
27
|
+
export type InteractionTrigger = 'none' | 'hover' | 'click' | 'appear' | 'loop';
|
|
27
28
|
export declare const INTERACTION_TRIGGERS: readonly InteractionTrigger[];
|
|
28
29
|
/** Anything the Builder stores for one element. Values arrive untyped from the API. */
|
|
29
30
|
export type InteractionProperty = Record<string, unknown>;
|
|
@@ -50,9 +51,11 @@ export declare function toKebabStyle(style: InteractionStyle): InteractionStyle;
|
|
|
50
51
|
/**
|
|
51
52
|
* Whether the element has an interaction state at all.
|
|
52
53
|
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
54
|
+
* The trigger is the section's master switch, because it answers the first
|
|
55
|
+
* question: does this element react to anything? Easing only describes what
|
|
56
|
+
* the change looks like once something does trigger it. `none` is the default,
|
|
57
|
+
* so an element nobody configured behaves exactly as it did before this
|
|
58
|
+
* feature existed. Every entry point checks this first.
|
|
56
59
|
*/
|
|
57
60
|
export declare function isInteractionEnabled(property: InteractionProperty | null | undefined): boolean;
|
|
58
61
|
export declare function interactionTriggerOf(property: InteractionProperty | null | undefined): InteractionTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChF,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAiD,CAAC;AAEhH,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAO7C,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAItE;AAOD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE9F;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAGzG;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAE9F;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG5F;AAED,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAsClB"}
|
|
@@ -23,7 +23,7 @@ export const INTERACTION_KEYS = {
|
|
|
23
23
|
scale: 'selected-scale',
|
|
24
24
|
opacity: 'selected-opacity',
|
|
25
25
|
};
|
|
26
|
-
export const INTERACTION_TRIGGERS = ['hover', 'click', 'appear', 'loop'];
|
|
26
|
+
export const INTERACTION_TRIGGERS = ['none', 'hover', 'click', 'appear', 'loop'];
|
|
27
27
|
const KEBAB = {
|
|
28
28
|
backgroundColor: 'background-color',
|
|
29
29
|
borderColor: 'border-color',
|
|
@@ -42,18 +42,18 @@ const num = (value, fallback) => {
|
|
|
42
42
|
/**
|
|
43
43
|
* Whether the element has an interaction state at all.
|
|
44
44
|
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
45
|
+
* The trigger is the section's master switch, because it answers the first
|
|
46
|
+
* question: does this element react to anything? Easing only describes what
|
|
47
|
+
* the change looks like once something does trigger it. `none` is the default,
|
|
48
|
+
* so an element nobody configured behaves exactly as it did before this
|
|
49
|
+
* feature existed. Every entry point checks this first.
|
|
48
50
|
*/
|
|
49
51
|
export function isInteractionEnabled(property) {
|
|
50
|
-
|
|
51
|
-
return false;
|
|
52
|
-
return String(property[INTERACTION_KEYS.easing] ?? 'none') !== 'none';
|
|
52
|
+
return interactionTriggerOf(property) !== 'none';
|
|
53
53
|
}
|
|
54
54
|
export function interactionTriggerOf(property) {
|
|
55
|
-
const raw = String(property?.[INTERACTION_KEYS.trigger] ?? '
|
|
56
|
-
return INTERACTION_TRIGGERS.includes(raw) ? raw : '
|
|
55
|
+
const raw = String(property?.[INTERACTION_KEYS.trigger] ?? 'none');
|
|
56
|
+
return INTERACTION_TRIGGERS.includes(raw) ? raw : 'none';
|
|
57
57
|
}
|
|
58
58
|
export function interactionDurationOf(property) {
|
|
59
59
|
return num(property?.[INTERACTION_KEYS.duration], 400);
|
|
@@ -81,7 +81,9 @@ export function interactionStyle(property, active, options = {}) {
|
|
|
81
81
|
if (!isInteractionEnabled(property))
|
|
82
82
|
return {};
|
|
83
83
|
const bag = property;
|
|
84
|
-
|
|
84
|
+
// An instant change is still expressible: set the duration to zero. Easing
|
|
85
|
+
// only decides how the time is spent, so it never needs an "off" of its own.
|
|
86
|
+
const easing = String(bag[INTERACTION_KEYS.easing] ?? 'ease-out');
|
|
85
87
|
const duration = interactionDurationOf(bag);
|
|
86
88
|
const style = {};
|
|
87
89
|
if (options.instant) {
|