translator.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /**
  2. * DevExtreme (animation/translator.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var dataUtils = require("../core/element_data");
  11. var type = require("../core/utils/type").type;
  12. var TRANSLATOR_DATA_KEY = "dxTranslator";
  13. var TRANSFORM_MATRIX_REGEX = /matrix(3d)?\((.+?)\)/;
  14. var TRANSLATE_REGEX = /translate(?:3d)?\((.+?)\)/;
  15. var locate = function($element) {
  16. var translate = getTranslate($element);
  17. return {
  18. left: translate.x,
  19. top: translate.y
  20. }
  21. };
  22. var move = function($element, position) {
  23. var left = position.left;
  24. var top = position.top;
  25. var translate;
  26. if (void 0 === left) {
  27. translate = getTranslate($element);
  28. translate.y = top || 0
  29. } else {
  30. if (void 0 === top) {
  31. translate = getTranslate($element);
  32. translate.x = left || 0
  33. } else {
  34. translate = {
  35. x: left || 0,
  36. y: top || 0,
  37. z: 0
  38. };
  39. cacheTranslate($element, translate)
  40. }
  41. }
  42. $element.css({
  43. transform: getTranslateCss(translate)
  44. });
  45. if (isPercentValue(left) || isPercentValue(top)) {
  46. clearCache($element)
  47. }
  48. };
  49. var isPercentValue = function(value) {
  50. return "string" === type(value) && "%" === value[value.length - 1]
  51. };
  52. var getTranslate = function($element) {
  53. var result = $element.length ? dataUtils.data($element.get(0), TRANSLATOR_DATA_KEY) : null;
  54. if (!result) {
  55. var transformValue = $element.css("transform") || getTranslateCss({
  56. x: 0,
  57. y: 0
  58. });
  59. var matrix = transformValue.match(TRANSFORM_MATRIX_REGEX);
  60. var is3D = matrix && matrix[1];
  61. if (matrix) {
  62. matrix = matrix[2].split(",");
  63. if ("3d" === is3D) {
  64. matrix = matrix.slice(12, 15)
  65. } else {
  66. matrix.push(0);
  67. matrix = matrix.slice(4, 7)
  68. }
  69. } else {
  70. matrix = [0, 0, 0]
  71. }
  72. result = {
  73. x: parseFloat(matrix[0]),
  74. y: parseFloat(matrix[1]),
  75. z: parseFloat(matrix[2])
  76. };
  77. cacheTranslate($element, result)
  78. }
  79. return result
  80. };
  81. var cacheTranslate = function($element, translate) {
  82. if ($element.length) {
  83. dataUtils.data($element.get(0), TRANSLATOR_DATA_KEY, translate)
  84. }
  85. };
  86. var clearCache = function($element) {
  87. if ($element.length) {
  88. dataUtils.removeData($element.get(0), TRANSLATOR_DATA_KEY)
  89. }
  90. };
  91. var resetPosition = function($element, finishTransition) {
  92. var originalTransition;
  93. var stylesConfig = {
  94. left: 0,
  95. top: 0,
  96. transform: "none"
  97. };
  98. if (finishTransition) {
  99. originalTransition = $element.css("transition");
  100. stylesConfig.transition = "none"
  101. }
  102. $element.css(stylesConfig);
  103. clearCache($element);
  104. if (finishTransition) {
  105. $element.get(0).offsetHeight;
  106. $element.css("transition", originalTransition)
  107. }
  108. };
  109. var parseTranslate = function(translateString) {
  110. var result = translateString.match(TRANSLATE_REGEX);
  111. if (!result || !result[1]) {
  112. return
  113. }
  114. result = result[1].split(",");
  115. result = {
  116. x: parseFloat(result[0]),
  117. y: parseFloat(result[1]),
  118. z: parseFloat(result[2])
  119. };
  120. return result
  121. };
  122. var getTranslateCss = function(translate) {
  123. translate.x = translate.x || 0;
  124. translate.y = translate.y || 0;
  125. var xValueString = isPercentValue(translate.x) ? translate.x : translate.x + "px";
  126. var yValueString = isPercentValue(translate.y) ? translate.y : translate.y + "px";
  127. return "translate(" + xValueString + ", " + yValueString + ")"
  128. };
  129. exports.move = move;
  130. exports.locate = locate;
  131. exports.clearCache = clearCache;
  132. exports.parseTranslate = parseTranslate;
  133. exports.getTranslate = getTranslate;
  134. exports.getTranslateCss = getTranslateCss;
  135. exports.resetPosition = resetPosition;