pds-dev-kit-web-test 2.4.19 → 2.4.20

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/destructuring-assignment */
 require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
@@ -23,6 +24,7 @@ var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
+var ScrollAnimation_1 = __importDefault(require("./componentBlocks/ScrollAnimation"));
 var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
@@ -33,8 +35,8 @@ function ComponentBlockMatcher(_a) {
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
+        // case CB_ALL_CODES.CB_TEXT:
+        //   return <Text {...(propsWithValue as CB_TEXT_PROPERTIES_TYPE)} index={index} />;
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:
@@ -47,8 +49,42 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_TEXT:
+            return (0, jsx_runtime_1.jsx)(TextPropToAnim, __assign({}, propsWithValue, { index: index }));
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }
 }
 exports.default = ComponentBlockMatcher;
+var isValidJSON = function (str) {
+    try {
+        JSON.parse(str);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+function TextPropToAnim(props) {
+    var isAnim = isValidJSON(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+    if (!isAnim) {
+        return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, props));
+    }
+    var json = JSON.parse(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+    var hasAllProp = validateAnimationProps(json);
+    if (!hasAllProp) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "MUST HAVE ALL PROPS: scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages," }));
+    }
+    return (0, jsx_runtime_1.jsx)(ScrollAnimation_1.default, __assign({}, json));
+}
+var validateAnimationProps = function (json) {
+    var requiredProps = [
+        'scrollId',
+        'totalImages',
+        'baseURL',
+        'type',
+        'startShowingImages',
+        'endShowingImages'
+    ];
+    return requiredProps.every(function (prop) { return prop in json; });
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AirpodsAnimation: ({ scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages }: any) => JSX.Element;
+export default AirpodsAnimation;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.js

@@ -0,0 +1,219 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-plusplus */
+var react_1 = require("react");
+var AirpodsAnimation = function (_a) {
+    var scrollId = _a.scrollId, totalImages = _a.totalImages, baseURL = _a.baseURL, type = _a.type, startShowingImages = _a.startShowingImages, endShowingImages = _a.endShowingImages;
+    var canvasRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)([]), images = _b[0], setImages = _b[1];
+    var _c = (0, react_1.useState)(0), loadedImages = _c[0], setLoadedImages = _c[1];
+    var _d = (0, react_1.useState)(0), currentFrameIndex = _d[0], setCurrentFrameIndex = _d[1];
+    var mainBody = (0, react_1.useState)(function () {
+        var box = document.querySelector('.sc-bdfBQB');
+        return box;
+    })[0];
+    (0, react_1.useEffect)(function () {
+        var loadImage = function (i) {
+            return new Promise(function (resolve) {
+                var img = new Image();
+                img.src = "".concat(baseURL, "/").concat(String(i).padStart(4, '0'), ".").concat(type);
+                img.onload = function () { return resolve(img); };
+            });
+        };
+        var loadImages = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var imgs, i, img;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        imgs = [];
+                        i = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(i < totalImages)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, loadImage(i)];
+                    case 2:
+                        img = _a.sent();
+                        imgs.push(img);
+                        _a.label = 3;
+                    case 3:
+                        i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        setImages(imgs);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadImages();
+    }, [totalImages, baseURL, type]);
+    (0, react_1.useEffect)(function () {
+        var handleScroll = function () {
+            var scrollTop = mainBody.scrollTop;
+            console.log(scrollId, scrollTop);
+            if (scrollTop < startShowingImages || scrollTop > endShowingImages) {
+                console.log(scrollId, 'frame 0');
+                setCurrentFrameIndex(0); // Reset or handle as needed when out of range
+                return;
+            }
+            var maxScrollTop = endShowingImages - startShowingImages;
+            var scrollFraction = (scrollTop - startShowingImages) / maxScrollTop;
+            console.log({ maxScrollTop: maxScrollTop, scrollTop: scrollTop, startShowingImages: startShowingImages });
+            var frameIndex = Math.min(totalImages - 1, Math.max(0, Math.floor(scrollFraction * totalImages)));
+            setCurrentFrameIndex(frameIndex);
+            console.log(scrollId, "frameis ".concat(frameIndex));
+            handleHeadingAnimationBasedOnScroll();
+        };
+        var handleHeadingAnimationBasedOnScroll = function () {
+            var heading = document.querySelector('h1');
+            var scrollTop = mainBody.scrollTop;
+            var viewportHeight = window.innerHeight;
+            // Calculate opacity based on scroll position
+            var opacity = Math.max(0, 1 - scrollTop / (2 * viewportHeight));
+            // Apply the calculated opacity
+            if (heading) {
+                heading.style.opacity = opacity.toString();
+            }
+        };
+        mainBody.addEventListener('scroll', handleScroll);
+        return function () {
+            mainBody.removeEventListener('scroll', handleScroll);
+        };
+    }, [totalImages, images, startShowingImages, endShowingImages]);
+    (0, react_1.useEffect)(function () {
+        if (images.length === totalImages) {
+            render();
+        }
+    }, [currentFrameIndex, images]);
+    var render = function () {
+        var canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        var ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var img = images[currentFrameIndex];
+        // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        var scrollTop = mainBody.scrollTop;
+        if (!img || scrollTop < startShowingImages || scrollTop > endShowingImages) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+            return;
+        }
+        var canvasRatio = canvas.width / canvas.height;
+        var imgRatio = img.width / img.height;
+        var drawWidth;
+        var drawHeight;
+        var offsetX = 0;
+        var offsetY = 0;
+        if (canvasRatio > imgRatio) {
+            drawWidth = canvas.width;
+            drawHeight = drawWidth / imgRatio;
+            offsetY = (canvas.height - drawHeight) / 2;
+        }
+        else {
+            drawHeight = canvas.height;
+            drawWidth = drawHeight * imgRatio;
+            offsetX = (canvas.width - drawWidth) / 2;
+        }
+        ctx.save();
+        if (totalImages - currentFrameIndex < 10) {
+            ctx.globalAlpha = (totalImages - currentFrameIndex) / 10;
+        }
+        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+        ctx.restore();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: "main", style: {
+            width: '100vw',
+            position: 'fixed'
+            /* height: 500vh; */
+        } }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ style: {
+                    position: 'fixed',
+                    top: '50%',
+                    width: '100vw',
+                    left: '50%',
+                    textAlign: 'center',
+                    transform: 'translate(-50%, -50%)',
+                    fontSize: 'clamp(2rem, 10vw, 13.5rem)'
+                } }, { children: "Airpods Pro" })), (0, jsx_runtime_1.jsx)("canvas", { style: {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    maxHeight: '100vh',
+                    maxWidth: '100vw',
+                    transform: 'translate(-50%, -50%)'
+                }, ref: canvasRef, width: window.innerWidth, height: window.innerHeight })] })));
+};
+// #main {
+//     width: 100vw;
+//     position: fixed;
+//     /* height: 500vh; */
+//   }
+//   canvas {
+//     position: fixed;
+//     left: 50%;
+//     top: 50%;
+//     max-height: 100vh;
+//     max-width: 100vw;
+//     transform: translate(-50%, -50%);
+//   }
+//   h1 {
+//     position: fixed;
+//     top: 50%;
+//     width: 100vw;
+//     left: 50%;
+//     text-align: center;
+//     transform: translate(-50%, -50%);
+//     font-size: clamp(2rem, 10vw, 13.5rem);
+//   }
+exports.default = AirpodsAnimation;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -36,8 +36,6 @@ export type CB_PLACEMENT_PROP_SPECS = {
     'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
     CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
     'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
-    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LATEST_LOCKED_STARTY:MOBILE': number;
-    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LOCKSTATUS:MOBILE': 'LOCKED' | 'FALLBACK_TO_SYNC' | undefined;
 };
 export type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.4.19",
+  "version": "2.4.20",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.77]
+## [v2.2.79]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* 컬러 키 싱크
+* [PDS-1232] 섹션 단위로 디바이스별 노출 설정 제공 건

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/getClassName.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentBlock } from '../types';
-import type { Device } from './types';
-export declare function getSelectedCBClassname(cb: ComponentBlock, device: Device, isSelected: boolean): "" | "react-grid-item-selected" | "react-grid-item-selected locked" | "locked" | "react-grid-item-selected unlocked" | "unlocked";

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/getClassName.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedCBClassname = void 0;
-function getSelectedCBClassname(cb, device, isSelected) {
-    if (device === 'DESKTOP') {
-        if (isSelected) {
-            return 'react-grid-item-selected';
-        }
-        return '';
-    }
-    var lockedStatus = cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT['CB_PLACEMENT_PROP_PLACEMENT_SPEC_LOCKSTATUS:MOBILE'];
-    if (!lockedStatus || lockedStatus === 'LOCKED') {
-        if (isSelected) {
-            return 'react-grid-item-selected locked';
-        }
-        return 'locked';
-    }
-    if (lockedStatus === 'FALLBACK_TO_SYNC') {
-        if (isSelected) {
-            return 'react-grid-item-selected unlocked';
-        }
-        return 'unlocked';
-    }
-    return '';
-}
-exports.getSelectedCBClassname = getSelectedCBClassname;