@gxpl/sdk 0.0.56 → 0.0.58

package/lib/sdk/transitions/transitionMachine.js

@@ -124,7 +124,7 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             const start = { x: transition.startX, y: transition.startY };
                             const { deltaX, deltaY, progress } = (0, getDeltaAndProgress_1.getDeltaAndProgress)(event.touchData, start, direction, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window);
                             const newScenes = relation.type === 'slide'
-                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)(relation, { x: deltaX, y: deltaY }, direction, window)
+                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)(relation, { x: deltaX, y: deltaY }, direction, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window)
                                 : relation.type === 'reveal'
                                     ? (0, getScenesOnStart_1.getScenesOnRevealStart)(relation, { x: deltaX, y: deltaY }, direction, relation.offset, relation.mode, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window)
                                     : (0, getScenesOnStart_1.getScenesOnFadeStart)(relation, progress);
@@ -183,16 +183,16 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             };
                         },
                         scenes: ({ context }) => {
-                            const { transition, scenes } = context;
+                            const { transition, scenes, input: { previewWindow } } = context;
                             if (!(0, isActiveSwipeTransition_1.isActiveSwipeTransition)(transition))
                                 return scenes;
                             const { type } = transition;
                             const threshold = transition.type === 'slide' ? SWIPE_SLIDE_SUCCESS_THRESHOLD : SWIPE_FADE_SUCCESS_THRESHOLD;
                             const transitionSuccess = (0, isTransitionSuccess_1.isTransitionSuccess)(transition, threshold);
                             const newScenes = type === 'slide'
-                                ? (0, getScenesOnEnd_1.getScenesOnSlideEnd)(scenes, transition, transitionSuccess)
+                                ? (0, getScenesOnEnd_1.getScenesOnSlideEnd)(scenes, transition, transitionSuccess, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window)
                                 : type === 'reveal'
-                                    ? (0, getScenesOnEnd_1.getScenesOnRevealEnd)(scenes, transition, transitionSuccess, transition.offset, transition.mode)
+                                    ? (0, getScenesOnEnd_1.getScenesOnRevealEnd)(scenes, transition, transitionSuccess, transition.offset, transition.mode, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window)
                                     : (0, getScenesOnEnd_1.getScenesOnFadeEnd)(scenes);
                             return newScenes;
                         },

package/lib/sdk/transitions/utils/getScenesOnEnd.d.ts

@@ -1,5 +1,5 @@
 import type { ActiveTransition, TransitionScene } from './types';
-export declare function getScenesOnSlideEnd(scenes: TransitionScene[], transition: ActiveTransition, success: boolean): {
+export declare function getScenesOnSlideEnd(scenes: TransitionScene[], transition: ActiveTransition, success: boolean, window: Window): {
     styles: {
         x: number;
         y: number;
@@ -10,7 +10,7 @@ export declare function getScenesOnSlideEnd(scenes: TransitionScene[], transitio
     };
     id: string;
 }[];
-export declare function getScenesOnRevealEnd(scenes: TransitionScene[], transition: ActiveTransition, success: boolean, offset: number, mode: 'normal' | 'reverse'): {
+export declare function getScenesOnRevealEnd(scenes: TransitionScene[], transition: ActiveTransition, success: boolean, offset: number, mode: 'normal' | 'reverse', window: Window): {
     styles: {
         zIndex: number;
         x: number;

package/lib/sdk/transitions/utils/getScenesOnEnd.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScenesOnSlideEnd = getScenesOnSlideEnd;
 exports.getScenesOnRevealEnd = getScenesOnRevealEnd;
 exports.getScenesOnFadeEnd = getScenesOnFadeEnd;
-function getScenesOnSlideEnd(scenes, transition, success) {
+function getScenesOnSlideEnd(scenes, transition, success, window) {
     const { from, to, direction } = transition;
     return scenes.map((s) => {
         const isNextActiveScene = success ? s.id === to : s.id === from;
@@ -24,25 +24,26 @@ function getScenesOnSlideEnd(scenes, transition, success) {
         return Object.assign(Object.assign({}, s), { styles: Object.assign(Object.assign({}, s.styles), { x: isNextActiveScene ? 0 : prevElX, y: isNextActiveScene ? 0 : prevElY }) });
     });
 }
-function getScenesOnRevealEnd(scenes, transition, success, offset, mode) {
+function getScenesOnRevealEnd(scenes, transition, success, offset, mode, window) {
     const { from, to, direction } = transition;
     return scenes.map((s) => {
         const isNextActiveScene = success ? s.id === to : s.id === from;
         let prevElX = 0;
         if (direction === 'east') {
-            prevElX = success ? -window.innerWidth : window.innerWidth * offset;
+            prevElX = success ? -window.innerWidth * (mode === 'normal' ? 1 : offset) : window.innerWidth * (mode === 'normal' ? offset : 1);
         }
         else if (direction === 'west') {
-            prevElX = success ? window.innerWidth : -window.innerWidth * offset;
+            prevElX = success ? window.innerWidth * (mode === 'normal' ? 1 : offset) : -window.innerWidth * (mode === 'normal' ? offset : 1);
         }
         let prevElY = 0;
         if (direction === 'north') {
-            prevElY = success ? window.innerHeight : -window.innerHeight * offset;
+            prevElY = success ? window.innerHeight * (mode === 'normal' ? 1 : offset) : -window.innerHeight * (mode === 'normal' ? offset : 1);
         }
         else if (direction === 'south') {
-            prevElY = success ? -window.innerHeight : window.innerHeight * offset;
+            prevElY = success ? -window.innerHeight * (mode === 'normal' ? 1 : offset) : window.innerHeight * (mode === 'normal' ? offset : 1);
         }
-        return Object.assign(Object.assign({}, s), { styles: Object.assign(Object.assign({}, s.styles), { zIndex: isNextActiveScene ? 1 : 2, x: isNextActiveScene ? 0 : prevElX, y: isNextActiveScene ? 0 : prevElY }) });
+        const zIndex = mode === 'reverse' ? (isNextActiveScene ? 1 : 0) : (isNextActiveScene ? 1 : 2);
+        return Object.assign(Object.assign({}, s), { styles: Object.assign(Object.assign({}, s.styles), { zIndex, x: isNextActiveScene ? 0 : prevElX, y: isNextActiveScene ? 0 : prevElY }) });
     });
 }
 function getScenesOnFadeEnd(scenes) {

package/lib/sdk/transitions/utils/getScenesOnInstantTransition.js

@@ -3,14 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScenesOnInstantTransition = getScenesOnInstantTransition;
 function getScenesOnInstantTransition(scenes, transition, window) {
     const { type, to } = transition;
-    if ((type === 'slide' || type === 'reveal') && transition.direction) {
+    if (type === 'slide' && transition.direction) {
         return getScenesOnInstantSlideTransition(scenes, to, transition.direction, window);
     }
+    else if (type === 'reveal' && transition.direction) {
+        return getScenesOnInstantRevealTransition(scenes, to, transition.direction, transition.offset, transition.mode, window);
+    }
     else if (type === 'fade') {
         return getScenesOnInstantFadeTransition(scenes);
     }
     return scenes;
 }
+function getScenesOnInstantRevealTransition(scenes, to, direction, offset, mode, window) {
+    let fromFinalX = 0;
+    let fromFinalY = 0;
+    if (direction === 'east') {
+        fromFinalX = -window.innerWidth * (mode === 'normal' ? 1 : offset);
+    }
+    else if (direction === 'west') {
+        fromFinalX = window.innerWidth * (mode === 'normal' ? 1 : offset);
+    }
+    else if (direction === 'north') {
+        fromFinalY = window.innerHeight * (mode === 'normal' ? 1 : offset);
+    }
+    else if (direction === 'south') {
+        fromFinalY = -window.innerHeight * (mode === 'normal' ? 1 : offset);
+    }
+    return scenes.map((scene) => {
+        const isToScene = scene.id === to;
+        return Object.assign(Object.assign({}, scene), { styles: Object.assign(Object.assign({}, scene.styles), { x: isToScene ? 0 : fromFinalX, y: isToScene ? 0 : fromFinalY }) });
+    });
+}
 function getScenesOnInstantSlideTransition(scenes, to, direction, window) {
     let fromFinalX = 0;
     let fromFinalY = 0;

package/lib/sdk/transitions/utils/getScenesOnProgressUpdate.js

@@ -9,8 +9,7 @@ function getScenesOnSlideProgressUpdate(scenes, delta) {
 }
 function getScenesOnRevealProgressUpdate(scenes, delta, to, offset, mode) {
     return scenes.map((scene) => {
-        const isNextScene = scene.id === to;
-        const sceneOffset = isNextScene ? offset : 1;
+        const sceneOffset = (scene.id === to) === (mode === 'normal') ? offset : 1;
         return Object.assign(Object.assign({}, scene), { styles: Object.assign(Object.assign({}, scene.styles), { x: scene.styles.startX + delta.x * sceneOffset, y: scene.styles.startY + delta.y * sceneOffset }) });
     });
 }

package/lib/sdk/transitions/utils/getScenesOnStart.js

@@ -43,16 +43,18 @@ function getScenesOnRevealStart({ from, to }, delta, direction, offset, mode, wi
     const common = {
         opacity: 1,
     };
+    const fromSceneOffset = mode === 'normal' ? 1 : offset;
     const sceneFrom = {
         id: from,
-        styles: Object.assign(Object.assign({}, common), { startX: 0, zIndex: 2, startY: 0, x: delta.x, y: delta.y })
+        styles: Object.assign(Object.assign({}, common), { startX: 0, zIndex: mode === 'normal' ? 2 : 1, startY: 0, x: delta.x * fromSceneOffset, y: delta.y * fromSceneOffset })
     };
-    const startX = getNextSceneSlideStartX(direction, window, offset);
-    const startY = getNextSceneSlideStartY(direction, window, offset);
+    const toSceneOffset = mode === 'normal' ? offset : 1;
+    const startX = getNextSceneSlideStartX(direction, window, toSceneOffset);
+    const startY = getNextSceneSlideStartY(direction, window, toSceneOffset);
     const sceneTo = {
         id: to,
-        styles: Object.assign(Object.assign({}, common), { zIndex: 1, startX,
-            startY, x: startX + delta.x * offset, y: startY + delta.y * offset })
+        styles: Object.assign(Object.assign({}, common), { zIndex: mode === 'normal' ? 1 : 2, startX,
+            startY, x: startX + delta.x * toSceneOffset, y: startY + delta.y * toSceneOffset })
     };
     return [sceneFrom, sceneTo];
 }

package/lib/sdk-nextjs/components/fixedLayers/FixedLayer.js

@@ -43,7 +43,7 @@ const FixedLayer = ({ layer, type }) => {
             width: 100%;
             height: 100%;
             overflow: clip;
-            ${type === 'foreground' ? 'z-index: 2;' : 'z-index: 0;'}
+            ${type === 'foreground' ? 'z-index: 3;' : 'z-index: 0;'}
           }
         ` })] }) }) }));
 };

package/lib/sdk-nextjs/utils/RichTextConverter/RichTextConverter.d.ts

@@ -6,5 +6,6 @@ export declare class RichTextConverter {
     private serializeRanges;
     private normalizeStyles;
     private groupEntities;
+    private getLinkFromEntity;
     private static fromRangeStylesToInline;
 }

package/lib/sdk-nextjs/utils/RichTextConverter/RichTextConverter.js

@@ -151,7 +151,6 @@ class RichTextConverter {
         return styleGroups;
     }
     groupEntities(entities, styleGroups) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const entitiesGroups = [];
         if (!entities.length && !styleGroups)
             return;
@@ -170,8 +169,8 @@ class RichTextConverter {
                 const start = dividers[i];
                 const end = dividers[i + 1];
                 const entity = entities.find(e => e.start === start);
-                entitiesGroups.push(Object.assign(Object.assign({ stylesGroup: [], start,
-                    end }, (entity && (((_a = entity.data) === null || _a === void 0 ? void 0 : _a.type) === 'url' || ((_b = entity.data) === null || _b === void 0 ? void 0 : _b.type) === 'anchor') && { link: entity.data.url, target: (_c = entity.data.target) !== null && _c !== void 0 ? _c : '_self' })), (entity && ((_d = entity.data) === null || _d === void 0 ? void 0 : _d.type) === 'scene' && { value: entity.data.value, animation: (_e = entity.data.animation) !== null && _e !== void 0 ? _e : 'fade', direction: (_f = entity.data.direction) !== null && _f !== void 0 ? _f : 'north', duration: (_g = entity.data.duration) !== null && _g !== void 0 ? _g : 0 })));
+                entitiesGroups.push(Object.assign({ stylesGroup: [], start,
+                    end }, this.getLinkFromEntity(entity)));
             }
             return entitiesGroups;
         }
@@ -197,11 +196,35 @@ class RichTextConverter {
             const start = entityDividers[i];
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
-            entitiesGroups.push(Object.assign(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && ((_h = entity.data) === null || _h === void 0 ? void 0 : _h.url) && { link: entity.data.url, target: (_j = entity.data.target) !== null && _j !== void 0 ? _j : '_self' })), (entity && ((_k = entity.data) === null || _k === void 0 ? void 0 : _k.value) && { value: entity.data.value, animation: (_l = entity.data.animation) !== null && _l !== void 0 ? _l : 'fade', direction: (_m = entity.data.direction) !== null && _m !== void 0 ? _m : 'north', duration: (_o = entity.data.duration) !== null && _o !== void 0 ? _o : 0 })));
+            const link = this.getLinkFromEntity(entity);
+            entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
+                end }, link));
         }
         return entitiesGroups;
     }
+    getLinkFromEntity(entity) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!entity)
+            return;
+        const { data } = entity;
+        if (!data)
+            return;
+        if (data.type === 'url' || data.type === 'anchor') {
+            return { url: data.url, target: (_a = data.target) !== null && _a !== void 0 ? _a : '_self' };
+        }
+        if (data.type === 'scene') {
+            if (data.animation === 'fade') {
+                return { type: 'scene', value: data.value, animation: 'fade', duration: (_b = data.duration) !== null && _b !== void 0 ? _b : 0 };
+            }
+            if (data.animation === 'slide') {
+                return { type: 'scene', value: data.value, animation: 'slide', direction: (_c = data.direction) !== null && _c !== void 0 ? _c : 'north', duration: (_d = data.duration) !== null && _d !== void 0 ? _d : 0 };
+            }
+            if (data.animation === 'reveal') {
+                return { type: 'scene', value: data.value, animation: 'reveal', direction: (_e = data.direction) !== null && _e !== void 0 ? _e : 'north', offset: (_f = data.offset) !== null && _f !== void 0 ? _f : 0, mode: (_g = data.mode) !== null && _g !== void 0 ? _g : 'normal', duration: (_h = data.duration) !== null && _h !== void 0 ? _h : 0 };
+            }
+        }
+        return;
+    }
     static fromRangeStylesToInline(draftStyle, exemplary) {
         const { value, name } = draftStyle;
         const map = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",