utils.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  2. import escapeHTML from "escape-html";
  3. import ReactDOMServer from "react-dom/server";
  4. /**
  5. * 执行单个函数
  6. * @param func 函数名
  7. * @param params 参数列表
  8. */
  9. export const buildKrpanoAction = (func, ...params) => `${func}(${params.map((p) => `${p}`).join(", ")});`;
  10. /**
  11. * 动态添加标签用
  12. * @see https://krpano.com/forum/wbb/index.php?page=Thread&threadID=15873
  13. */
  14. export const buildKrpanoTagSetterActions = (name, attrs) => Object.keys(attrs)
  15. .map((key) => {
  16. const val = attrs[key];
  17. key = key.toLowerCase();
  18. if (val === undefined) {
  19. return "";
  20. }
  21. // 如果属性值中有双引号,需要改用单引号
  22. let quote = '"';
  23. if (`${val}`.includes(quote)) {
  24. quote = "'";
  25. }
  26. if (key === "style") {
  27. return `assignstyle(${name}, ${val});`;
  28. }
  29. if (typeof val === "boolean" || typeof val === "number") {
  30. return `set(${name}.${key}, ${val});`;
  31. }
  32. // content是XML文本,不能转义,因为不涉及用户输入也不需要
  33. return `set(${name}.${key}, ${quote}${["content", "html"].includes(key) ? val : escapeHTML(val.toString())}${quote});`;
  34. })
  35. .filter((str) => !!str)
  36. .join("");
  37. /**
  38. * 根据元数据构建xml
  39. */
  40. export const buildXML = ({ tag, attrs, children }) => {
  41. const attributes = Object.keys(attrs)
  42. .map((key) => `${key.toLowerCase()}="${attrs[key]}"`)
  43. .join(" ");
  44. if (children && children.length) {
  45. return `<${tag} ${attributes}>${children
  46. .map((child) => buildXML(child))
  47. .join("")}</${tag}>`;
  48. }
  49. return `<${tag} ${attributes} />`;
  50. };
  51. /**
  52. * 对Object进行map操作
  53. */
  54. export const mapObject = (obj, mapper) => {
  55. return Object.assign({}, ...Object.keys(obj).map((key) => {
  56. const value = obj[key];
  57. return mapper(key, value);
  58. }));
  59. };
  60. /**
  61. * 主要用于绑定Krpano事件和js调用。提取某个对象中的onXXX属性并替换为对应的调用字符串,丢弃其他属性
  62. */
  63. export const mapEventPropsToJSCall = (obj, getString) => mapObject(obj, (key, value) => {
  64. if (key.startsWith("on") && typeof value === "function") {
  65. return { [key]: getString(key, value) };
  66. }
  67. return {};
  68. });
  69. export const childrenToOuterHTML = (children) => {
  70. const wrapper = document.createElement("div");
  71. const childrenString = ReactDOMServer.renderToStaticMarkup(_jsx(_Fragment, { children: children }));
  72. wrapper.innerHTML = childrenString;
  73. return wrapper.outerHTML;
  74. };
  75. export const compareVersions = (version1, version2) => {
  76. const parts1 = version1.split("-");
  77. const parts2 = version2.split("-");
  78. const [major1, minor1] = parts1[0].split(".").map(Number);
  79. const [major2, minor2] = parts2[0].split(".").map(Number);
  80. if (major1 !== major2) {
  81. return major1 - major2;
  82. }
  83. if (minor1 !== minor2) {
  84. return minor1 - minor2;
  85. }
  86. if (parts1.length > 1 && parts2.length > 1) {
  87. return parts1[1].localeCompare(parts2[1]);
  88. }
  89. if (parts1.length > 1) {
  90. return 1;
  91. }
  92. else if (parts2.length > 1) {
  93. return -1;
  94. }
  95. return 0;
  96. };
  97. export const is121Version = !!window.krpanoJS && compareVersions(window.krpanoJS.version, "1.21") > -1;