diff --git a/package-lock.json b/package-lock.json index 7302d782..845da206 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-navigation-menu": "^1.0.0", "@radix-ui/react-tooltip": "^1.0.0", "classnames": "^2.2.6", + "dangerously-set-html-content": "^1.0.13", "date-fns": "^2.29.0", "markdown-it": "^13.0.1", "next": "^13.4.0", @@ -1335,6 +1336,17 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "node_modules/dangerously-set-html-content": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/dangerously-set-html-content/-/dangerously-set-html-content-1.0.13.tgz", + "integrity": "sha512-C/6Rm8L3BgjFX0ugETpWS3MyrRqTycVbqlSKDhqeoMaZAfCw2Xx1qcj4CYGnZnn61tCJ3JZdHnWCcNEXvhh4sA==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/date-fns": { "version": "2.29.3", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", @@ -5534,6 +5546,12 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "dangerously-set-html-content": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/dangerously-set-html-content/-/dangerously-set-html-content-1.0.13.tgz", + "integrity": "sha512-C/6Rm8L3BgjFX0ugETpWS3MyrRqTycVbqlSKDhqeoMaZAfCw2Xx1qcj4CYGnZnn61tCJ3JZdHnWCcNEXvhh4sA==", + "requires": {} + }, "date-fns": { "version": "2.29.3", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", diff --git a/package.json b/package.json index 1e337cea..3ffbdabc 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@radix-ui/react-navigation-menu": "^1.0.0", "@radix-ui/react-tooltip": "^1.0.0", "classnames": "^2.2.6", + "dangerously-set-html-content": "^1.0.13", "date-fns": "^2.29.0", "markdown-it": "^13.0.1", "next": "^13.4.0", diff --git a/src/components/Gosuslugi/index.tsx b/src/components/Gosuslugi/index.tsx index e50aa30d..5c98ab4a 100644 --- a/src/components/Gosuslugi/index.tsx +++ b/src/components/Gosuslugi/index.tsx @@ -1,14 +1,23 @@ import { useEffect } from "react" import { getCode } from "./lib" +import InnerHTML from "dangerously-set-html-content" export type GosuslugiProps = {} export const Gosuslugi: React.FC = () => { useEffect(() => { - window.dispatchEvent(new Event("resize")) - }) + const id = setTimeout(() => { + // This call taken from getCode + (window as any).Widget("https://pos.gosuslugi.ru/form", 312519) + }, 100) + + return () => { + clearTimeout(id) + } + }, []) return ( -
+ ) } + diff --git a/src/components/Gosuslugi/lib.ts b/src/components/Gosuslugi/lib.ts index 5aee64d5..88e07fd7 100644 --- a/src/components/Gosuslugi/lib.ts +++ b/src/components/Gosuslugi/lib.ts @@ -45,5 +45,4 @@ export const getCode = () => ` "use strict";function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);if(t)o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable});n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t2&&void 0!==arguments[2]?arguments[2]:POS_PREFIX_23;Object.keys(e).forEach(function(o){t.style.setProperty(n+o,e[o])})},removeStyles=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:POS_PREFIX_23;Object.keys(e).forEach(function(e){t.style.removeProperty(n+e)})};function changePosBannerOnResize(){var e=document.documentElement,t=_objectSpread({},posOptionsInitialBanner23),n=document.getElementById("js-show-iframe-wrapper"),o=n?n.offsetWidth:document.body.offsetWidth;if(o>340)t["button-wrap-max-width"]="209px";if(o>482)t["content-padding"]="24px",t["text-font-size"]="24px";if(o>568)t["grid-template-columns"]="1fr 292px",t["grid-template-rows"]="100%",t["content-grid-row"]="1",t["content-padding"]="32px 24px",t["bg-url-position"]="calc(100% + 35px) bottom";if(o>610)t["bg-url-position"]="calc(100% + 12px) bottom";if(o>726)t["bg-url-position"]="right bottom";if(o>783)t["grid-template-columns"]="1fr 390px";if(o>820)t["grid-template-columns"]="1fr 420px",t["bg-url-position"]="right bottom";if(o>1098)t["bg-url"]="url('https://pos.gosuslugi.ru/bin/banner-fluid/18/banner-fluid-bg-18-3.svg')",t["bg-url-position"]="calc(100% + 55px) bottom",t["grid-template-columns"]="1fr 557px",t["text-font-size"]="32px",t["content-padding"]="32px 32px 32px 50px",t["logo-width"]="78px",t["slogan-font-size"]="15px",t["logo-wrap-padding"]="20px 16px 16px";if(o>1422)t["max-width"]="1422px",t["grid-template-columns"]="1fr 720px",t["content-padding"]="32px 48px 32px 160px",t.background="linear-gradient(90deg, #ffffff 50%, #f8efec 50%)";setStyles(t,e)}changePosBannerOnResize(),window.addEventListener("resize",changePosBannerOnResize),window.onunload=function(){var e=document.documentElement,t=_objectSpread({},posOptionsInitialBanner23);window.removeEventListener("resize",changePosBannerOnResize),removeStyles(t,e)}; })() - `