a zip code crypto-currency system good for red ONLY

ripple.js 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. (function (factory) {
  2. if (typeof module === "object" && typeof module.exports === "object") {
  3. var v = factory(require, exports);
  4. if (v !== undefined) module.exports = v;
  5. }
  6. else if (typeof define === "function" && define.amd) {
  7. define(["require", "exports", "./activator-base", "./activator", "../util/dom"], factory);
  8. }
  9. })(function (require, exports) {
  10. "use strict";
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var activator_base_1 = require("./activator-base");
  13. var activator_1 = require("./activator");
  14. var dom_1 = require("../util/dom");
  15. /**
  16. * @hidden
  17. */
  18. var RippleActivator = (function () {
  19. function RippleActivator(app, config, dom) {
  20. this.dom = dom;
  21. this.highlight = new activator_1.Activator(app, config, dom);
  22. }
  23. RippleActivator.prototype.clickAction = function (ev, activatableEle, startCoord) {
  24. // Highlight
  25. this.highlight && this.highlight.clickAction(ev, activatableEle, startCoord);
  26. // Ripple
  27. this._clickAction(ev, activatableEle, startCoord);
  28. };
  29. RippleActivator.prototype.downAction = function (ev, activatableEle, startCoord) {
  30. // Highlight
  31. this.highlight && this.highlight.downAction(ev, activatableEle, startCoord);
  32. // Ripple
  33. this._downAction(ev, activatableEle, startCoord);
  34. };
  35. RippleActivator.prototype.upAction = function (ev, activatableEle, startCoord) {
  36. // Highlight
  37. this.highlight && this.highlight.upAction(ev, activatableEle, startCoord);
  38. // Ripple
  39. this._upAction(ev, activatableEle, startCoord);
  40. };
  41. RippleActivator.prototype.clearState = function (animated) {
  42. // Highlight
  43. this.highlight && this.highlight.clearState(animated);
  44. };
  45. RippleActivator.prototype._downAction = function (ev, activatableEle, _startCoord) {
  46. if (activator_base_1.isActivatedDisabled(ev, activatableEle)) {
  47. return;
  48. }
  49. var j = activatableEle.childElementCount;
  50. while (j--) {
  51. var rippleEle = activatableEle.children[j];
  52. if (rippleEle.classList.contains('button-effect')) {
  53. // DOM READ
  54. var clientRect = activatableEle.getBoundingClientRect();
  55. rippleEle.$top = clientRect.top;
  56. rippleEle.$left = clientRect.left;
  57. rippleEle.$width = clientRect.width;
  58. rippleEle.$height = clientRect.height;
  59. break;
  60. }
  61. }
  62. };
  63. RippleActivator.prototype._upAction = function (ev, activatableEle, startCoord) {
  64. if (!dom_1.hasPointerMoved(6, startCoord, dom_1.pointerCoord(ev))) {
  65. var i = activatableEle.childElementCount;
  66. while (i--) {
  67. var rippleEle = activatableEle.children[i];
  68. if (rippleEle.classList.contains('button-effect')) {
  69. // DOM WRITE
  70. this.startRippleEffect(rippleEle, activatableEle, startCoord);
  71. break;
  72. }
  73. }
  74. }
  75. };
  76. RippleActivator.prototype._clickAction = function (_ev, _activatableEle, _startCoord) {
  77. // NOTHING
  78. };
  79. RippleActivator.prototype.startRippleEffect = function (rippleEle, activatableEle, startCoord) {
  80. if (!startCoord) {
  81. return;
  82. }
  83. var clientPointerX = (startCoord.x - rippleEle.$left);
  84. var clientPointerY = (startCoord.y - rippleEle.$top);
  85. var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2;
  86. var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2;
  87. var diameter = Math.min(Math.max(Math.hypot(x, y), 64), 240);
  88. if (activatableEle.hasAttribute('ion-item')) {
  89. diameter = Math.min(diameter, 140);
  90. }
  91. clientPointerX -= diameter / 2;
  92. clientPointerY -= diameter / 2;
  93. clientPointerX = Math.round(clientPointerX);
  94. clientPointerY = Math.round(clientPointerY);
  95. diameter = Math.round(diameter);
  96. // Reset ripple
  97. // DOM WRITE
  98. var Css = this.dom.plt.Css;
  99. rippleEle.style.opacity = '';
  100. rippleEle.style[Css.transform] = "translate3d(" + clientPointerX + "px, " + clientPointerY + "px, 0px) scale(0.001)";
  101. rippleEle.style[Css.transition] = '';
  102. // Start ripple animation
  103. var radius = Math.sqrt(rippleEle.$width + rippleEle.$height);
  104. var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260);
  105. var opacityTransitionDuration = Math.round(scaleTransitionDuration * 0.7);
  106. var opacityTransitionDelay = Math.round(scaleTransitionDuration - opacityTransitionDuration);
  107. scaleTransitionDuration = Math.round(scaleTransitionDuration);
  108. var transform = "translate3d(" + clientPointerX + "px, " + clientPointerY + "px, 0px) scale(1)";
  109. var transition = "transform " + scaleTransitionDuration + "ms,opacity " + opacityTransitionDuration + "ms " + opacityTransitionDelay + "ms";
  110. this.dom.write(function () {
  111. // DOM WRITE
  112. rippleEle.style.width = rippleEle.style.height = diameter + 'px';
  113. rippleEle.style.opacity = '0';
  114. rippleEle.style[Css.transform] = transform;
  115. rippleEle.style[Css.transition] = transition;
  116. }, 16);
  117. };
  118. return RippleActivator;
  119. }());
  120. exports.RippleActivator = RippleActivator;
  121. var TOUCH_DOWN_ACCEL = 300;
  122. });
  123. //# sourceMappingURL=ripple.js.map