@doyourjob/gravity-ui-page-constructor 5.31.131 → 5.31.133

package/build/cjs/blocks/Header/BackgroundEffect/BackgroundEffect.css

@@ -15,11 +15,11 @@ unpredictable css rules order in build */
 .pc-background-effect__right {
   position: absolute;
   inset: 0;
+  transition: clip-path 0.5s linear;
   clip-path: inset(0 0 0 99.99%);
-  transition: clip-path 1.5s ease;
 }
 .pc-header-block:hover .pc-background-effect__right {
-  clip-path: inset(0 0 0 0.01%);
+  transition: none;
 }
 .pc-background-effect__video {
   width: 100%;

package/build/cjs/blocks/Header/BackgroundEffect/BackgroundEffect.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 type BackgroundEffectProps = {
     firstSrc: string;
     secondSrc: string;
+    attachRef: React.RefObject<HTMLElement>;
 };
-export declare const BackgroundEffect: ({ firstSrc, secondSrc }: BackgroundEffectProps) => JSX.Element | null;
+export declare const BackgroundEffect: ({ firstSrc, secondSrc, attachRef }: BackgroundEffectProps) => JSX.Element | null;
 export default BackgroundEffect;

package/build/cjs/blocks/Header/BackgroundEffect/BackgroundEffect.js

@@ -10,9 +10,10 @@ const SYNC_THRESHOLD = 0.03;
 const MAX_DESYNC = 0.5;
 const FAST_RATE = 1.05;
 const SLOW_RATE = 0.95;
-const BackgroundEffect = ({ firstSrc, secondSrc }) => {
+const BackgroundEffect = ({ firstSrc, secondSrc, attachRef }) => {
     const master = (0, react_1.useRef)(null);
     const driven = (0, react_1.useRef)(null);
+    const drivenWrap = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const m = master.current;
         const d = driven.current;
@@ -55,9 +56,83 @@ const BackgroundEffect = ({ firstSrc, secondSrc }) => {
             }
         };
     }, []);
-    if (!firstSrc || !secondSrc) {
+    (0, react_1.useEffect)(() => {
+        const el = attachRef.current;
+        if (!el)
+            return () => { };
+        const wrap = drivenWrap.current;
+        if (!wrap)
+            return () => { };
+        let target = 99.99;
+        let current = 99.99;
+        let locked = false;
+        let rafId = null;
+        const setClip = (value) => {
+            if (!wrap)
+                return;
+            wrap.style.setProperty('clip-path', `inset(0 0 0 ${value}%)`);
+        };
+        const update = () => {
+            if (!wrap)
+                return;
+            const diff = target - current;
+            if (Math.abs(diff) < 0.1) {
+                current = target;
+                setClip(current);
+                locked = true;
+                rafId = null;
+                return;
+            }
+            if (!locked) {
+                current += diff * 0.05;
+                setClip(current);
+                rafId = requestAnimationFrame(update);
+            }
+        };
+        const handleEnter = (e) => {
+            const rect = el.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            target = (x / rect.width) * 100;
+            locked = false;
+            if (rafId)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(update);
+        };
+        const handleMove = (e) => {
+            const rect = el.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            target = (x / rect.width) * 100;
+            if (locked) {
+                current = target;
+                setClip(current);
+                return;
+            }
+            if (!rafId)
+                rafId = requestAnimationFrame(update);
+        };
+        const handleLeave = () => {
+            locked = false;
+            target = 99.99;
+            setClip(target);
+            current = target;
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        el.addEventListener('mouseenter', handleEnter);
+        el.addEventListener('mousemove', handleMove);
+        el.addEventListener('mouseleave', handleLeave);
+        return () => {
+            el.removeEventListener('mouseenter', handleEnter);
+            el.removeEventListener('mousemove', handleMove);
+            el.removeEventListener('mouseleave', handleLeave);
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, [attachRef]);
+    if (!firstSrc || !secondSrc)
         return null;
-    }
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("video", { ref: master, disablePictureInPicture: true, playsInline: true, 
@@ -65,7 +140,7 @@ const BackgroundEffect = ({ firstSrc, secondSrc }) => {
                 // eslint-disable-next-line react/no-unknown-property
                 pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
                 react_1.default.createElement("source", { src: firstSrc, type: (0, utils_1.parseVideoType)(firstSrc) }))),
-        react_1.default.createElement("div", { className: b('right') },
+        react_1.default.createElement("div", { className: b('right'), ref: drivenWrap },
             react_1.default.createElement("video", { ref: driven, disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property

package/build/cjs/blocks/Header/Header.js

@@ -44,7 +44,8 @@ const HeaderBlock = (props) => {
     const videoThemed = (0, react_1.useMemo)(() => video && (0, utils_2.getThemedValue)(video, theme), [theme, video]);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
     const titleId = (0, uikit_1.useUniqId)();
-    return (react_1.default.createElement("header", { className: b({
+    const headerRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("header", { ref: headerRef, className: b({
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
             ['media-view']: mediaView,
@@ -53,7 +54,7 @@ const HeaderBlock = (props) => {
         }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
-        backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(BackgroundEffect_1.default, Object.assign({}, backgroundEffect))),
+        backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(BackgroundEffect_1.default, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
             react_1.default.createElement(Breadcrumbs_1.default, { breadcrumbs: breadcrumbs, theme: textTheme }),
             react_1.default.createElement(BackButton_1.default, { backButton: verticalOffset !== '0' && !breadcrumbs ? backButton : undefined, theme: textTheme }),

package/build/cjs/components/BlockBase/BlockBase.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, } = props;
+    const { anchor, visibility, indent, backgroundFull, selectionColor, visible, hidden, children, className, resetPaddings, qa, } = props;
     const { top, bottom } = indent || (resetPaddings ? { top: '0', bottom: '0' } : { top: 'l', bottom: 'l' });
     const isBackgroundUrl = /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(backgroundFull || '');
     const visibilityClasses = (0, utils_1.getBlockVisibilityClasses)(visibility);
-    return (react_1.default.createElement(grid_1.Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
+    const rootStyle = (0, react_1.useMemo)(() => selectionColor ? { ['--selection-bg']: selectionColor } : undefined, [selectionColor]);
+    return (react_1.default.createElement(grid_1.Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), style: rootStyle, hidden: hidden, visible: visible, reset: true, qa: qa },
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
         backgroundFull && (react_1.default.createElement("div", { className: b('background-full', { top }), style: isBackgroundUrl
                 ? { backgroundImage: `url(${backgroundFull})` }

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -18,6 +18,7 @@ const ConstructorBlock = ({ index = 0, data, children, }) => {
         'resetPaddings',
         'indent',
         'backgroundFull',
+        'selectionColor',
     ]), [data]);
     return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
         react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -72,6 +72,7 @@ export interface BlockBaseProps {
         bottom?: IndentValue;
     };
     backgroundFull?: string;
+    selectionColor?: string;
     blockBackground?: BlockBackgroundType;
     className?: string;
     qa?: string;

package/build/esm/blocks/Header/BackgroundEffect/BackgroundEffect.css

@@ -15,11 +15,11 @@ unpredictable css rules order in build */
 .pc-background-effect__right {
   position: absolute;
   inset: 0;
+  transition: clip-path 0.5s linear;
   clip-path: inset(0 0 0 99.99%);
-  transition: clip-path 1.5s ease;
 }
 .pc-header-block:hover .pc-background-effect__right {
-  clip-path: inset(0 0 0 0.01%);
+  transition: none;
 }
 .pc-background-effect__video {
   width: 100%;

package/build/esm/blocks/Header/BackgroundEffect/BackgroundEffect.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
 import './BackgroundEffect.css';
 type BackgroundEffectProps = {
     firstSrc: string;
     secondSrc: string;
+    attachRef: React.RefObject<HTMLElement>;
 };
-export declare const BackgroundEffect: ({ firstSrc, secondSrc }: BackgroundEffectProps) => JSX.Element | null;
+export declare const BackgroundEffect: ({ firstSrc, secondSrc, attachRef }: BackgroundEffectProps) => JSX.Element | null;
 export default BackgroundEffect;

package/build/esm/blocks/Header/BackgroundEffect/BackgroundEffect.js

@@ -7,9 +7,10 @@ const SYNC_THRESHOLD = 0.03;
 const MAX_DESYNC = 0.5;
 const FAST_RATE = 1.05;
 const SLOW_RATE = 0.95;
-export const BackgroundEffect = ({ firstSrc, secondSrc }) => {
+export const BackgroundEffect = ({ firstSrc, secondSrc, attachRef }) => {
     const master = useRef(null);
     const driven = useRef(null);
+    const drivenWrap = useRef(null);
     useEffect(() => {
         const m = master.current;
         const d = driven.current;
@@ -52,9 +53,83 @@ export const BackgroundEffect = ({ firstSrc, secondSrc }) => {
             }
         };
     }, []);
-    if (!firstSrc || !secondSrc) {
+    useEffect(() => {
+        const el = attachRef.current;
+        if (!el)
+            return () => { };
+        const wrap = drivenWrap.current;
+        if (!wrap)
+            return () => { };
+        let target = 99.99;
+        let current = 99.99;
+        let locked = false;
+        let rafId = null;
+        const setClip = (value) => {
+            if (!wrap)
+                return;
+            wrap.style.setProperty('clip-path', `inset(0 0 0 ${value}%)`);
+        };
+        const update = () => {
+            if (!wrap)
+                return;
+            const diff = target - current;
+            if (Math.abs(diff) < 0.1) {
+                current = target;
+                setClip(current);
+                locked = true;
+                rafId = null;
+                return;
+            }
+            if (!locked) {
+                current += diff * 0.05;
+                setClip(current);
+                rafId = requestAnimationFrame(update);
+            }
+        };
+        const handleEnter = (e) => {
+            const rect = el.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            target = (x / rect.width) * 100;
+            locked = false;
+            if (rafId)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(update);
+        };
+        const handleMove = (e) => {
+            const rect = el.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            target = (x / rect.width) * 100;
+            if (locked) {
+                current = target;
+                setClip(current);
+                return;
+            }
+            if (!rafId)
+                rafId = requestAnimationFrame(update);
+        };
+        const handleLeave = () => {
+            locked = false;
+            target = 99.99;
+            setClip(target);
+            current = target;
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        el.addEventListener('mouseenter', handleEnter);
+        el.addEventListener('mousemove', handleMove);
+        el.addEventListener('mouseleave', handleLeave);
+        return () => {
+            el.removeEventListener('mouseenter', handleEnter);
+            el.removeEventListener('mousemove', handleMove);
+            el.removeEventListener('mouseleave', handleLeave);
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, [attachRef]);
+    if (!firstSrc || !secondSrc)
         return null;
-    }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement("video", { ref: master, disablePictureInPicture: true, playsInline: true, 
@@ -62,7 +137,7 @@ export const BackgroundEffect = ({ firstSrc, secondSrc }) => {
                 // eslint-disable-next-line react/no-unknown-property
                 pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
                 React.createElement("source", { src: firstSrc, type: parseVideoType(firstSrc) }))),
-        React.createElement("div", { className: b('right') },
+        React.createElement("div", { className: b('right'), ref: drivenWrap },
             React.createElement("video", { ref: driven, disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property

package/build/esm/blocks/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import { HTML, Media } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
@@ -41,7 +41,8 @@ export const HeaderBlock = (props) => {
     const videoThemed = useMemo(() => video && getThemedValue(video, theme), [theme, video]);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
     const titleId = useUniqId();
-    return (React.createElement("header", { className: b({
+    const headerRef = useRef(null);
+    return (React.createElement("header", { ref: headerRef, className: b({
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
             ['media-view']: mediaView,
@@ -50,7 +51,7 @@ export const HeaderBlock = (props) => {
         }, className) },
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
-        backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect))),
+        backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
         React.createElement(Grid, { containerClass: b('container-fluid') },
             React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs, theme: textTheme }),
             React.createElement(BackButton, { backButton: verticalOffset !== '0' && !breadcrumbs ? backButton : undefined, theme: textTheme }),

package/build/esm/components/BlockBase/BlockBase.js

@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Col } from '../../grid';
 import { block, getBlockVisibilityClasses } from '../../utils';
 import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, } = props;
+    const { anchor, visibility, indent, backgroundFull, selectionColor, visible, hidden, children, className, resetPaddings, qa, } = props;
     const { top, bottom } = indent || (resetPaddings ? { top: '0', bottom: '0' } : { top: 'l', bottom: 'l' });
     const isBackgroundUrl = /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(backgroundFull || '');
     const visibilityClasses = getBlockVisibilityClasses(visibility);
-    return (React.createElement(Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
+    const rootStyle = useMemo(() => selectionColor ? { ['--selection-bg']: selectionColor } : undefined, [selectionColor]);
+    return (React.createElement(Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), style: rootStyle, hidden: hidden, visible: visible, reset: true, qa: qa },
         anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
         backgroundFull && (React.createElement("div", { className: b('background-full', { top }), style: isBackgroundUrl
                 ? { backgroundImage: `url(${backgroundFull})` }

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -15,6 +15,7 @@ export const ConstructorBlock = ({ index = 0, data, children, }) => {
         'resetPaddings',
         'indent',
         'backgroundFull',
+        'selectionColor',
     ]), [data]);
     return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
         React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));

package/build/esm/models/constructor-items/blocks.d.ts

@@ -72,6 +72,7 @@ export interface BlockBaseProps {
         bottom?: IndentValue;
     };
     backgroundFull?: string;
+    selectionColor?: string;
     blockBackground?: BlockBackgroundType;
     className?: string;
     qa?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.131",
+  "version": "5.31.133",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -72,6 +72,7 @@ export interface BlockBaseProps {
         bottom?: IndentValue;
     };
     backgroundFull?: string;
+    selectionColor?: string;
     blockBackground?: BlockBackgroundType;
     className?: string;
     qa?: string;