\r\n {storage.text.text.made} {storage.data.name}\r\n \r\n \r\n );\r\n};\r\n\r\n\r\nexport default Header;\r\n\r\n\r\n","/* Remake by Anatolii Ovcharuk - https: //github.com/Anatolii-Ovcharuk */\r\n/* Description: This is JSX Component for React. Use with CSS file in one dirrectory. */\r\n\r\nimport React, { useEffect, useState } from 'react';\r\nimport './AnimatedText.css';\r\n\r\n /* INSTALLATION */\r\n/*\r\n1. Replace this file \"AnimatedText.jsx\" and \"AnimatedText.css\" in folder of your project.\r\n2. Add in Application string: import AnimatedText from './components/AnimatedText.jsx';\r\n3. Add in Application in return: \r\n - With options value;\r\n - With default value;\r\n*/\r\n\r\n /* OPTIONS */\r\nconst def = \"EXAMPLE TEXT\"; // Default text: \"EXAMPLE TEXT\";\r\n\r\nconst AnimatedText = ({ string = def }) => {\r\n\r\n useEffect(() => {\r\n const text = string;\r\n\r\n const container = document.getElementById(\"animatedText\");\r\n \r\n // Очистка контейнера\r\n container.innerHTML = '';\r\n\r\n // Создание спанов для каждой буквы\r\n text.split(\"\").forEach(char => {\r\n const span = document.createElement(\"span\");\r\n span.className = \"letter\";\r\n span.innerHTML = char === \" \" ? \"\\u00A0\" : char; // Используем для пробелов\r\n container.appendChild(span);\r\n });\r\n\r\n const letters = document.querySelectorAll(\".letter\");\r\n const totalLetters = letters.length;\r\n const delayIncrement = 100;\r\n\r\n function easeInOutQuart(t) {\r\n return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;\r\n }\r\n\r\n function animateLetters(forward = true) {\r\n letters.forEach((letter, index) => {\r\n const normalizedIndex = Math.max(index, totalLetters - 1 - index) / (totalLetters - 1);\r\n const easedDelay = easeInOutQuart(normalizedIndex);\r\n const delay = easedDelay * (totalLetters - 1) * delayIncrement;\r\n\r\n setTimeout(() => {\r\n letter.style.setProperty(\"--wght\", forward ? 700 : 100);\r\n letter.style.setProperty(\"--wdth\", forward ? 400 : 85);\r\n letter.style.setProperty(\"--opacity\", forward ? 1 : 0.25);\r\n letter.style.setProperty(\"--letter-spacing\", forward ? '0.05em' : '0em');\r\n }, delay);\r\n });\r\n\r\n setTimeout(() => animateLetters(!forward), 4000);\r\n }\r\n\r\n animateLetters();\r\n }, [string]);\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default AnimatedText;\r\n","/* \"Diagram (pie) module\", v. 0.5 - 11.11.2024 | MIT License | Made by Anatolii Ovcharuk - https://github.com/Anatolii-Ovcharuk */\r\n\r\n /* INSTALLATION */\r\n/* This .jsx component for react use with file \"d3.v7.min.js\" or install in project - \"npm install d3\" */\r\n/* Add next string in application: import DiagramPie from './Diagram_pie_v.0.5'; */\r\n/* Add next string in application on render or return: */\r\n\r\n// import * as d3 from 'd3';\r\n// import \"https://d3js.org/d3.v7.min.js\";\r\nimport * as d3 from \"./d3.v7.min.js\";\r\n\r\nimport React, { Component, useState, useEffect, useContext, useReducer, useMemo, useRef, lazy, Suspense } from 'react';\r\n\r\n// // Example update and show data. Delete this for future use.\r\n// let data = [\r\n// { name: \"Power\", value: 300 },\r\n// { name: \"Water\", value: 400 },\r\n// { name: \"Fuel\", value: 200 },\r\n// { name: \"Gas\", value: 100 },\r\n// { name: \"Oil\", value: 100 },\r\n// ]; \r\n// setInterval(() => { \r\n// removeDataItem(\"Oil\");\r\n// data[2].value += 100;\r\n// setTimeout(() => { data[2].value -= 100 }, 2000);\r\n// data[0].value -= 250\r\n// setTimeout(() => { data[0].value += 250 }, 2000)\r\n// data[1].value += 250\r\n// setTimeout(() => { data[1].value -= 250 }, 1000)\r\n// setTimeout(() => { data.push({ name: \"Oil\", value: 100 }) }, 2000);\r\n// setTimeout(() => { data[4].value += 50 }, 3000)\r\n// function removeDataItem(itemName) {\r\n// const index = data.findIndex(d => d.name === itemName);\r\n// if (index !== -1) {\r\n// data.splice(index, 1);\r\n// }\r\n// }\r\n// }, 4000);\r\n\r\nconst DiagramPieModule = ({ dataset, title, id }) => {\r\n const [data, setData] = useState(dataset || []);\r\n let pie, arc, arcs, arcLabel, path, pathlist, svg, color;\r\n\r\n /* OPTIONS */\r\nconst SORT_DATA = true; /* That's option sort data. Set: True/False */\r\nconst REFRESH = true; /* That's option refresh diagram and legend each 1 seconds. Set: True/False */\r\nconst SHOW_IN_PERCENT_DIAGRAM = true; /* That's option show in diagram data value in percent. Set: True/False */\r\nconst SHOW_IN_PERCENT_LEGEND = false; /* That's option show in diagram data value in legend. Set: True/False */\r\nconst CUSTOM_COLORS = false; /* That's option show in diagram and legend customs colors. Set: True/False */\r\nconst STROKE_BARS = true; /* That's option show border for bars. Set: True/False */\r\nconst STROKE_COLOR = '#606060'; /* That's option set border colors. */\r\nconst METRIC_VALUE = ''; /* Add metric for value in legend. Default string is empty - \"\" */\r\n// Specify the chart’s dimensions.\r\nconst width = 120; // 225, 250, 928\r\nconst height = width; // Math.min(width, 500), 250\r\nconst fontSize = 7; // Set numbers here in \"px\";\r\n// CUSTOM COLORS (Array)\r\nconst colorsSet = [ \"#ff8888\", \"#f5ff88\", \"#88ff88\", \"#88d9ff\", \"#8888ff\", \"rgb(236, 176, 19)\", '#1f77b4', '#aec7e8', \r\n'#ff7f0e', '#ffbb78', '#2ca02c', '#d62728', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', \r\n'#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', ]; // Other example colors: \"#101010\", '#98df8a', '#9edae5', '#ff9896',\r\n\r\n // useEffect(() => {\r\n // setData(dataset);\r\n // }, [dataset]);\r\n\r\nuseEffect(() => {\r\n setData(prevData => {\r\n // Обновляем существующие элементы\r\n const updatedData = prevData.map(item => {\r\n // Находим элементы с таким же именем и заменяем их, если есть обновления\r\n const updatedItem = dataset.find(newItem => newItem.name === item.name);\r\n return updatedItem ? { ...item, ...updatedItem } : item;\r\n });\r\n\r\n // Добавляем только новые элементы, которых еще нет в prevData\r\n const newItems = dataset.filter(newItem => \r\n !prevData.some(item => item.name === newItem.name)\r\n );\r\n \r\n const result = ([...updatedData, ...newItems]);\r\n\r\n if (SORT_DATA) {\r\n result.sort((a, b) => b.value - a.value);\r\n // console.log(result);\r\n return result;\r\n } else if (!SORT_DATA) {\r\n // console.log(result);\r\n return result;\r\n } else {\r\n // console.log(result);\r\n return result;\r\n };\r\n });\r\n\r\n}, [dataset]);\r\n \r\n useEffect(() => {\r\n initialization()\r\n if (REFRESH) {\r\n const update = setInterval(() => {\r\n let totalValue = d3.sum(data, d => d.value);\r\n document.getElementById(`legend_pie_total_${id}`).innerText = `Total: ${totalValue} ${METRIC_VALUE}`;\r\n\r\n update_pie_diagram();\r\n update_pie_legend();\r\n }, 1000)\r\n return () => clearInterval(update); // Cleanup on component unmount\r\n } else if (!REFRESH) {\r\n console.log(\"Diagram (pie) module - Refresh diagram is disabled.\");\r\n } else { console.error(\"ERROR! Problem with refresh diagram.\"); };\r\n }, [data]);\r\n\r\n function initialization() {\r\n // Очистка контейнера перед добавлением новой диаграммы\r\n d3.select(`#diagram_pie_${id}`).html('');\r\n\r\n let totalValue = d3.sum(data, d => d.value);\r\n document.getElementById(`legend_pie_total_${id}`).innerText = `Total: ${totalValue} ${METRIC_VALUE}`;\r\n\r\n let initColor = function (color) {\r\n return d3.interpolateRgb(color, '#fff')(0.2);\r\n };\r\n\r\n if (CUSTOM_COLORS) {\r\n // Recreate .schemeCategory20\r\n color = d3.scaleOrdinal().range(\r\n colorsSet.map(initColor)\r\n );\r\n } else if (!CUSTOM_COLORS) {\r\n // Create the color scale.\r\n color = d3.scaleOrdinal()\r\n .domain(data.map(d => d.name))\r\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());\r\n } else {\r\n // Create the color scale\r\n color = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.name));\r\n console.log(\"ERROR! Problem with set colors for diagram.\")\r\n };\r\n\r\n // Create the pie layout and arc generator.\r\n pie = d3.pie()\r\n .sort(null)\r\n .value(d => d.value);\r\n\r\n arc = d3.arc()\r\n .innerRadius(0)\r\n .outerRadius(Math.min(width, height) / 2 - 1);\r\n\r\n // const labelRadius = arc.outerRadius()() * 0.6;\r\n const labelRadius = arc.outerRadius()() * 0.8 - 10; // Отступ от края на 10px\r\n\r\n // A separate arc generator for labels.\r\n arcLabel = d3.arc()\r\n .innerRadius(labelRadius)\r\n .outerRadius(labelRadius);\r\n\r\n arcs = pie(data);\r\n\r\n // Create the SVG container.\r\n svg = d3.select(`#diagram_pie_${id}`).append(\"svg\")\r\n .attr(\"width\", width)\r\n .attr(\"height\", height)\r\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height])\r\n .attr(\"style\", \"max-width: 100%; height: auto; font: 10px sans-serif;\");\r\n\r\n // Вычисляем общую сумму всех значений.\r\n const total = d3.sum(data, d => d.value);\r\n\r\n // Add a sector path for each value.\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", `pies_${id}`)\r\n .attr(\"stroke\", `${STROKE_COLOR}`)\r\n .style(\"stroke-width\", STROKE_BARS ? \"1px\" : \"0px\")\r\n .selectAll(\"path\")\r\n .data(arcs)\r\n .join(\"path\")\r\n .attr(\"class\", `pie_${id}`)\r\n .attr(\"fill\", d => color(d.data.name))\r\n .attr(\"d\", arc)\r\n .append(\"title\")\r\n // .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`);\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(1)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`);\r\n\r\n // Create a new arc generator to place a label close to the edge.\r\n // The label shows the value if there is enough room.\r\n svg.append(\"g\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"class\", `values_${id}`)\r\n .selectAll(\"text\")\r\n .data(arcs)\r\n .join(\"text\")\r\n .attr(\"class\", `value_${id}`)\r\n .attr(\"transform\", d => `translate(${arcLabel.centroid(d)})`)\r\n .call(text => text.append(\"tspan\")\r\n .attr(\"class\", `pie_text_${id}`)\r\n .attr(\"y\", \"2\")\r\n .attr(\"font-weight\", \"bold\")\r\n .attr(\"font-size\", `${fontSize}px`)\r\n .attr(\"fill\", \"#000000\")\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`));\r\n \r\n /* ========================= That's code about legend ========================= */\r\n d3.select(`#diagram_pie_legend_${id}`).html(''); // Очистка легенды перед обновлением\r\n\r\n const legend = d3.select(`#diagram_pie_legend_${id}`).selectAll(`.legend-item_${id}`)\r\n .data(data)\r\n .enter().append(\"div\")\r\n .attr(\"class\", `legend-item_${id}`)\r\n .style(\"display\", \"flex\")\r\n .style(\"align-items\", \"center\")\r\n .style(\"justify-content\", \"center\");\r\n\r\n legend.append(\"div\")\r\n .attr(\"class\", `legend-color_${id}`)\r\n .style(\"background-color\", d => color(d.name))\r\n .style(\"width\", `${fontSize * 1.8}px`)\r\n .style(\"height\", `${fontSize * 1.8}px`)\r\n .style(\"margin\", \"4px 8px\");\r\n\r\n legend.append(\"p\")\r\n .text(d => SHOW_IN_PERCENT_LEGEND ? `${d.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(0)}%` : `${d.name}: ${d.value} ${METRIC_VALUE}`)\r\n .style(\"font-size\", `${fontSize * 1.2}px`)\r\n .attr(\"class\", `legend_item-text_${id}`);\r\n }\r\n\r\n function update_pie_legend() {\r\n\r\n let legend = d3.select(`#diagram_pie_legend_${id}`)\r\n .selectAll(`.legend-item_${id}`); // Инициализация легенды один раз\r\n\r\n if (SORT_DATA) {\r\n // Сортируем данные по убыванию значений\r\n const sortedData = [...data].sort((a, b) => b.value - a.value);\r\n legend = legend.data(sortedData, d => d.name); // Связываем отсортированные данные по уникальному ключу (например, name)\r\n } else if (!SORT_DATA) {\r\n legend = legend.data(data, d => d.name); // Связываем данные без сортировки по уникальному ключу (например, name)\r\n } else {\r\n legend.data(data);\r\n };\r\n\r\n legend.join(\r\n enter => {\r\n const legendItem = enter.append(\"div\").attr(\"class\", `legend-item_${id}`);\r\n legendItem.append(\"div\")\r\n .attr(\"class\", `legend-color_${id}`)\r\n .style(\"background-color\", d => color(d.name))\r\n .style(\"width\", `${fontSize * 1.8}px`)\r\n .style(\"height\", `${fontSize * 1.8}px`)\r\n .style(\"margin\", \"4px 8px\");\r\n legendItem.append(\"p\")\r\n .text(d => SHOW_IN_PERCENT_LEGEND ? `${d.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(1)}%` : `${d.name}: ${d.value} ${METRIC_VALUE}`)\r\n .style(\"font-size\", `${fontSize * 1.2}px`)\r\n .attr(\"class\", `legend_item-text_${id}`);\r\n },\r\n update => {\r\n update.select(`.legend-color_${id}`)\r\n .style(\"background-color\", d => color(d.name));\r\n update.select(\"p:nth-child(2)\")\r\n .text(d => SHOW_IN_PERCENT_LEGEND ? `${d.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(1)}%` : `${d.name}: ${d.value} ${METRIC_VALUE}`);\r\n },\r\n exit => exit.remove()\r\n );\r\n };\r\n\r\n\r\n function update_pie_diagram() {\r\n arcs = pie(data);\r\n\r\n // Добавляем дуги для каждого значения с анимацией.\r\n path = svg.selectAll(\"path\")\r\n .data(arcs);\r\n\r\n svg.selectAll(\"title\")\r\n // .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`);\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(1)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`);\r\n \r\n pathlist = d3.select(`#diagram_pie_${id}`).select(\"svg\").select(`.pies_${id}`).selectAll(`.pie_${id}`).data(arcs);\r\n \r\n pathlist.join(\r\n enter => enter.append(\"path\")\r\n .attr(\"class\", `pie_${id}`)\r\n .attr(\"stroke\", `${STROKE_COLOR}`)\r\n .style(\"stroke-width\", STROKE_BARS ? \"1px\" : \"0px\")\r\n .attr(\"fill\", d => color(d.data.name))\r\n .attr(\"d\", arc)\r\n .each(function(d) { this._current = d; })\r\n .append(\"title\")\r\n // .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`),\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(1)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`),\r\n update => update\r\n .transition().duration(750)\r\n .attrTween(\"d\", function(d) {\r\n const i = d3.interpolate(this._current, d);\r\n this._current = i(0);\r\n return t => arc(i(t));\r\n })\r\n );\r\n\r\n // Создаем новую дугу для размещения метки ближе к краю.\r\n // Метка показывает значение, если достаточно места.\r\n const text = svg.selectAll(\"text\")\r\n .data(arcs);\r\n \r\n const textlist = d3.select(`#diagram_pie_${id}`).select(\"svg\").select(`.values_${id}`).selectAll(`.value_${id}`).data(arcs);\r\n\r\n textlist.join(\r\n enter => enter.append(\"text\")\r\n .attr(\"class\", `value_${id}`)\r\n .attr(\"transform\", d => `translate(${arcLabel.centroid(d)})`)\r\n .call(text => text.append(\"tspan\")\r\n .attr(\"class\", `pie_text_${id}`)\r\n .attr(\"y\", \"2\")\r\n // .attr(\"x\", \"-16\")\r\n .attr(\"font-weight\", \"bold\")\r\n .attr(\"font-size\", `${fontSize}px`)\r\n .attr(\"fill\", \"#000000\")\r\n // .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value}`)\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`)\r\n ),\r\n update => update\r\n .transition().duration(750)\r\n .attr(\"transform\", d => `translate(${arcLabel.centroid(d)})`)\r\n .call(text => text.select(\"tspan\")\r\n .attr(\"class\", `pie_text_${id}`)\r\n .attr(\"y\", \"2\")\r\n .attr(\"font-weight\", \"bold\")\r\n .attr(\"font-size\", `${fontSize}px`)\r\n .attr(\"fill\", \"#000000\")\r\n // .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.data.value / total * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value}`)\r\n .text(d => SHOW_IN_PERCENT_DIAGRAM ? `${d.data.name}: ${(d.value / d3.sum(data.map(d => d.value)) * 100).toFixed(0)}%` : `${d.data.name}: ${d.data.value.toLocaleString(\"en-US\")}`)\r\n ),\r\n exit => exit.remove()\r\n );\r\n };\r\n\r\n\r\n return (\r\n \r\n
Diagram {title}
\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n );\r\n};\r\n\r\n\r\nexport default DiagramPieModule;\r\n\r\n","/* \"Language module\", v. 0.5 - 10.10.2024 | MIT License | Made by Anatolii Ovcharuk - https://github.com/Anatolii-Ovcharuk */\r\n/* Description: This is JS Component for React. For Websites with support multilanguage on page. */\r\n\r\n /* INSTALLATION */\r\n/* Add in application next strings: */\r\n/* import {Language, LanguageContext} from './components/library/Language_v.0.5'; - In starting application. */\r\n/* const [language, setLanguage] = useState('EN'); - In application. */\r\n/* - In render or return application. */\r\n/* - In render or return application. */\r\n/* - In render or return application. */\r\n\r\n/* Add in CSS Style or use CSS/SCSS/SASS file:\r\n.language {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 6px;\r\n font-size: 14px;\r\n\r\n background-color: inherit;\r\n color: inherit;\r\n fill: inherit;\r\n};\r\n\r\n.language__icon {\r\n width: 21px;\r\n height: 21px;\r\n color: inherit;\r\n fill: inherit;\r\n margin: 4px;\r\n};\r\n\r\n.language__inf {\r\n color: inherit;\r\n fill: inherit;\r\n margin: 4px;\r\n};\r\n\r\n.language__opt {\r\n background-color: inherit;\r\n border: 0px;\r\n color: inherit;\r\n fill: inherit;\r\n margin: 4px;\r\n};\r\n\r\n.language__opt:hover {\r\n cursor: pointer;\r\n};\r\n\r\n.language option {\r\n background-color: inherit;\r\n color: #272727;\r\n};\r\n\r\n.language option:hover {\r\n color: inherit;\r\n};\r\n*/\r\n\r\n\r\nimport React, { useState, useEffect, useContext, createContext, useRef } from 'react';\r\nimport { ToastContainer, toast } from 'react-toastify'; // If you not using Toastify - comment this string.\r\n\r\nconst LanguageContext = createContext();\r\n\r\nconst Language = () => {\r\n\r\n // const [language, setLanguage] = useState(\"EN\");\r\n const { language, setLanguage } = useContext(LanguageContext);\r\n \r\n const [text, setText] = useState({\r\n lang_opt: `Language:`,\r\n lang_inf: \"You are set language: English (EN)\",\r\n });\r\n \r\n const icon =\r\n ;\r\n \r\n \r\nuseEffect(() => {\r\nif (\"language\" in navigator || \"userLanguage\" in navigator) {\r\n let lang = navigator.language || navigator.userLanguage;\r\n console.log(`Language on client system: ${lang}`);\r\n \r\n if (lang.includes(\"RU\") || lang.includes(\"ru\")) {\r\n setLanguage(\"RU\");\r\n // console.log(`Automatic set language on page: Russian (${language})`);\r\n console.log(`Automatic set language on page: Russian (RU)`);\r\n } else if (lang.includes(\"en\") || lang.includes(\"us\") || lang.includes(\"EN\") || lang.includes(\"US\") || lang.includes(\"CA\")) {\r\n setLanguage(\"EN\");\r\n // console.log(`Automatic set language on page: English (${language})`);\r\n console.log(`Automatic set language on page: English (EN)`);\r\n } else if (lang.includes(\"uk\") || lang.includes(\"UK\")) {\r\n setLanguage(\"UK\");\r\n // console.log(`Automatic set language on page: Čeština (${language})`);\r\n console.log(`Automatic set language on page: Ukrainian (UK)`);\r\n } else if (lang.includes(\"cs\") || lang.includes(\"CS\")) {\r\n setLanguage(\"CS\");\r\n // console.log(`Automatic set language on page: Čeština (${language})`);\r\n console.log(`Automatic set language on page: Čeština (CS)`);\r\n } else if (lang === null || lang === undefined) {\r\n setLanguage(\"EN\");\r\n // console.log(`Language on client system is not detected... Automatic set language on page: English (${language})`);\r\n console.log(`Language on client system is not detected... Automatic set language on page: English (EN)`);\r\n } else {\r\n setLanguage(\"EN\");\r\n // console.log(`Language on client system is unknow... Automatic set language on page: English (${language})`);\r\n console.log(`Language on client system is unknown... Automatic set language on page: English (EN)`);\r\n }\r\n};\r\n}, []);\r\n\r\n\r\n\r\nuseEffect(() => {\r\n if (language === \"EN\") {\r\n setText({\r\n lang_opt: `Language:`,\r\n lang_inf: `Set language: English (${language})`,\r\n });\r\n } else if (language === \"RU\") {\r\n setText({\r\n lang_opt: `Язык:`,\r\n lang_inf: `Выбран язык: Русский (${language})`,\r\n });\r\n } else if (language === \"UK\") {\r\n setText({\r\n lang_opt: `Мова:`,\r\n lang_inf: `Обрана мова: Українська (${language})`,\r\n });\r\n } else if (language === \"CS\") {\r\n setText({\r\n lang_opt: `Jazyk:`,\r\n lang_inf: `Nastavit jazyk: Čeština (${language})`,\r\n });\r\n } else {\r\n setText({\r\n lang_opt: `Language:`,\r\n lang_inf: `Set language: English (${language})`,\r\n });\r\n }\r\n}, [language]);\r\n \r\n// Функция на смену языка. \r\nconst lang = (event) => {\r\n setLanguage(event.target.value);\r\n}; \r\n \r\n\r\n// -------------------- Re-render fix ---------------------\r\n \r\nconst [renderCount, setRenderCount] = useState(0);\r\nuseEffect(() => {\r\n if (renderCount >= 3) { // Появление сообщения на третьем рендере (индекс 2)\r\n console.log(`${text.lang_inf}`);\r\n toast.info(text.lang_inf); // If you not using Toastify - comment this string.\r\n }\r\n // Увеличиваем счетчик рендеров после каждого рендера\r\n setRenderCount(prevCount => prevCount + 1);\r\n}, [text]);\r\n \r\n\r\n return (\r\n \r\n {icon}\r\n {/*
{ text.lang_opt }
*/}\r\n \r\n \r\n );\r\n \r\n};\r\n\r\n\r\n\r\nexport {Language, LanguageContext};\r\n","/* \"Loader module\", v. 0.4 - 01.11.2024 | MIT License | Made by Anatolii Ovcharuk - https://github.com/Anatolii-Ovcharuk */\r\n/* Description: This is JSX Component for React. */\r\n\r\nimport React, { Component, useState, useEffect, useContext, useReducer, useMemo, useRef, lazy, Suspense } from 'react';\r\n\r\n /* INSTALLATION */\r\n/* Add string in application: import Loader from './Loader_v.0.2' */\r\n/* Add string in application in section of return or render: \r\n - With set options;\r\n - With default settings;\r\n*/\r\n\r\n /* OPTIONS DEFAULT */\r\nconst TIME_REFRESH = 500; /* Set time here to refresh symbols in \"ms\" (Default: 500). */\r\nconst TYPE_SYMBOL = \".\"; /* Set symbol in \"string\" here loader symbol (Default: \".\"). */\r\nconst TOTAL_SYMBOL = 3; /* Set numbers here total ammount symbols (Default: 3). */\r\nconst SYMBOL_SIZE = 90; /* Set numbers here to size symbols in \"px\" (Default: 90). */\r\nconst REVERSE = false; /* Set reverse show (Default: false). */\r\n\r\nconst Loader = ({ time = TIME_REFRESH, symbol = TYPE_SYMBOL, total = TOTAL_SYMBOL, size = SYMBOL_SIZE, reverse = REVERSE }) => {\r\n const [refresh, setRefresh] = useState(\"inherit\");\r\n const [count, setCount] = useState(0);\r\n \r\n useEffect(() => {\r\n const animation = setInterval(() => {\r\n if (reverse) {\r\n setCount((prevCount) => {\r\n const newCount = prevCount >= 0 ? prevCount - 1 : total;\r\n // console.log(newCount);\r\n return newCount;\r\n });\r\n } else if (!reverse) {\r\n setCount((prevCount) => {\r\n const newCount = prevCount >= total ? 0 : prevCount + 1;\r\n // console.log(newCount);\r\n return newCount;\r\n });\r\n } else {\r\n console.warn(`Error. Not valid value for loader component in \"reverse\" option: ${reverse}. Value must be false/true.`)\r\n setCount((prevCount) => {\r\n const newCount = prevCount >= total ? 0 : prevCount + 1;\r\n // console.log(newCount);\r\n return newCount;\r\n });\r\n }\r\n\r\n setTimeout(() => {\r\n setRefresh(\"#000000\"); // Reset old value of theme;\r\n }, 10);\r\n\r\n setTimeout(() => {\r\n setRefresh(\"inherit\"); // Inherit new value of theme;\r\n }, 20);\r\n\r\n }, time);\r\n \r\n return () => {\r\n clearInterval(animation);\r\n };\r\n }, []);\r\n\r\n // useEffect(() => console.log(refresh), [refresh]);\r\n\r\n return (\r\n \r\n
storage.setSelect(\r\n {\r\n src: event.currentTarget.src,\r\n alt: event.currentTarget.alt\r\n }\r\n )}/>\r\n 
storage.setSelect(\r\n {\r\n src: event.currentTarget.src,\r\n alt: event.currentTarget.alt\r\n }\r\n )}/>\r\n 
setSelect(\r\n {\r\n src: event.currentTarget.src,\r\n alt: event.currentTarget.alt\r\n }\r\n )}>\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { createPortal } from 'react-dom';\r\n\r\nconst modalPortal = document.querySelector('#modal-root');\r\n\r\nexport default class Modal extends Component {\r\n state = {\r\n showModal: false,\r\n data: this.props.content,\r\n opacity: 0,\r\n isFadingOut: false,\r\n };\r\n\r\n componentDidMount() {\r\n const { content } = this.props;\r\n this.setState({ data: content });\r\n window.addEventListener('keydown', this.handleKeydown);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevProps.content !== this.props.content) {\r\n this.setState({ data: this.props.content });\r\n }\r\n\r\n if (this.state.data !== prevState.data && !prevState.showModal) {\r\n this.openModal(); // Плавное открытие при смене контента\r\n }\r\n\r\n if (this.state.showModal) {\r\n document.body.style.overflow = 'hidden';\r\n } else if (!this.state.showModal) {\r\n document.body.style.overflow = '';\r\n } else {\r\n document.body.style.overflow = '';\r\n };\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('keydown', this.handleKeydown);\r\n\r\n if (this.state.showModal) {\r\n document.body.style.overflow = 'hidden';\r\n } else if (!this.state.showModal) {\r\n document.body.style.overflow = '';\r\n } else {\r\n document.body.style.overflow = '';\r\n };\r\n }\r\n\r\n handleKeydown = (event) => {\r\n if (event.code === 'Escape') {\r\n this.startFadeOut();\r\n }\r\n };\r\n\r\n toggleModal = (event) => {\r\n if (event.currentTarget === event.target) {\r\n this.startFadeOut();\r\n }\r\n };\r\n\r\n openModal = () => {\r\n this.setState({ showModal: true }, () => {\r\n setTimeout(() => {\r\n this.setState({ opacity: 1 }); // Плавное появление\r\n }, 50); // Позволяет модалке сначала появиться в DOM, а затем плавно изменять opacity\r\n });\r\n };\r\n\r\n startFadeOut = () => {\r\n this.setState({ opacity: 0, isFadingOut: true });\r\n setTimeout(() => {\r\n this.setState({ showModal: false, isFadingOut: false });\r\n }, 250); // Длительность анимации 250мс\r\n };\r\n\r\n render() {\r\n const { showModal, opacity, isFadingOut } = this.state;\r\n const { content } = this.props;\r\n\r\n let jsx = null;\r\n if (!content) {\r\n jsx =