utils.ink_ripple.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /**
  2. * DevExtreme (ui/widget/utils.ink_ripple.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 $ = require("../../core/renderer");
  11. var INKRIPPLE_CLASS = "dx-inkripple";
  12. var INKRIPPLE_WAVE_CLASS = "dx-inkripple-wave";
  13. var INKRIPPLE_SHOWING_CLASS = "dx-inkripple-showing";
  14. var INKRIPPLE_HIDING_CLASS = "dx-inkripple-hiding";
  15. var DEFAULT_WAVE_SIZE_COEFFICIENT = 2;
  16. var MAX_WAVE_SIZE = 4e3;
  17. var ANIMATION_DURATION = 300;
  18. var HOLD_ANIMATION_DURATION = 1e3;
  19. var DEFAULT_WAVE_INDEX = 0;
  20. var render = function(args) {
  21. args = args || {};
  22. if (void 0 === args.useHoldAnimation) {
  23. args.useHoldAnimation = true
  24. }
  25. var config = {
  26. waveSizeCoefficient: args.waveSizeCoefficient || DEFAULT_WAVE_SIZE_COEFFICIENT,
  27. isCentered: args.isCentered || false,
  28. wavesNumber: args.wavesNumber || 1,
  29. durations: getDurations(args.useHoldAnimation)
  30. };
  31. return {
  32. showWave: showWave.bind(this, config),
  33. hideWave: hideWave.bind(this, config)
  34. }
  35. };
  36. var getInkRipple = function(element) {
  37. var result = element.children("." + INKRIPPLE_CLASS);
  38. if (0 === result.length) {
  39. result = $("<div>").addClass(INKRIPPLE_CLASS).appendTo(element)
  40. }
  41. return result
  42. };
  43. var getWaves = function(element, wavesNumber) {
  44. var inkRipple = getInkRipple(element);
  45. var result = inkRipple.children("." + INKRIPPLE_WAVE_CLASS).toArray();
  46. for (var i = result.length; i < wavesNumber; i++) {
  47. var $currentWave = $("<div>").appendTo(inkRipple).addClass(INKRIPPLE_WAVE_CLASS);
  48. result.push($currentWave[0])
  49. }
  50. return $(result)
  51. };
  52. var getWaveStyleConfig = function(args, config) {
  53. var element = config.element;
  54. var elementWidth = element.outerWidth();
  55. var elementHeight = element.outerHeight();
  56. var elementDiagonal = parseInt(Math.sqrt(elementWidth * elementWidth + elementHeight * elementHeight));
  57. var waveSize = Math.min(MAX_WAVE_SIZE, parseInt(elementDiagonal * args.waveSizeCoefficient));
  58. var left;
  59. var top;
  60. if (args.isCentered) {
  61. left = (elementWidth - waveSize) / 2;
  62. top = (elementHeight - waveSize) / 2
  63. } else {
  64. var event = config.event;
  65. var position = config.element.offset();
  66. var x = event.pageX - position.left;
  67. var y = event.pageY - position.top;
  68. left = x - waveSize / 2;
  69. top = y - waveSize / 2
  70. }
  71. return {
  72. left: left,
  73. top: top,
  74. height: waveSize,
  75. width: waveSize
  76. }
  77. };
  78. var showWave = function(args, config) {
  79. var $wave = getWaves(config.element, args.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
  80. args.hidingTimeout && clearTimeout(args.hidingTimeout);
  81. hideSelectedWave($wave);
  82. $wave.css(getWaveStyleConfig(args, config));
  83. args.showingTimeout = setTimeout(showingWaveHandler.bind(this, args, $wave), 0)
  84. };
  85. var showingWaveHandler = function(args, $wave) {
  86. var durationCss = args.durations.showingScale + "ms";
  87. $wave.addClass(INKRIPPLE_SHOWING_CLASS).css("transitionDuration", durationCss)
  88. };
  89. var getDurations = function(useHoldAnimation) {
  90. return {
  91. showingScale: useHoldAnimation ? HOLD_ANIMATION_DURATION : ANIMATION_DURATION,
  92. hidingScale: ANIMATION_DURATION,
  93. hidingOpacity: ANIMATION_DURATION
  94. }
  95. };
  96. var hideSelectedWave = function($wave) {
  97. $wave.removeClass(INKRIPPLE_HIDING_CLASS).css("transitionDuration", "")
  98. };
  99. var hideWave = function(args, config) {
  100. args.showingTimeout && clearTimeout(args.showingTimeout);
  101. var $wave = getWaves(config.element, config.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
  102. var durations = args.durations;
  103. var durationCss = durations.hidingScale + "ms, " + durations.hidingOpacity + "ms";
  104. $wave.addClass(INKRIPPLE_HIDING_CLASS).removeClass(INKRIPPLE_SHOWING_CLASS).css("transitionDuration", durationCss);
  105. var animationDuration = Math.max(durations.hidingScale, durations.hidingOpacity);
  106. args.hidingTimeout = setTimeout(hideSelectedWave.bind(this, $wave), animationDuration)
  107. };
  108. module.exports = {
  109. render: render
  110. };