swipeedit.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. define(function(require, exports, module) {
  2. "use strict";
  3. var Util = require('../util');
  4. var Base = require('../base');
  5. //transform
  6. var transform = Util.prefixStyle("transform");
  7. //transition webkitTransition MozTransition OTransition msTtransition
  8. var transition = Util.prefixStyle("transition");
  9. var clsPrefix = "xs-plugin-swipeedit-";
  10. var isLocked = false;
  11. var threshold = 20;
  12. var isSliding = false;
  13. var hasSlided = false;
  14. var transformStr = Util.vendor ? ["-", Util.vendor, "-transform"].join("") : "transform";
  15. //acceration
  16. var acc = 1;
  17. var startX;
  18. var SwipeEdit = function(cfg) {
  19. SwipeEdit.superclass.constructor.call(this);
  20. this.userConfig = Util.mix({
  21. labelSelector: clsPrefix + "label"
  22. }, cfg);
  23. };
  24. Util.extend(SwipeEdit, Base, {
  25. pluginId: "swipeedit",
  26. pluginInitializer: function(xscroll) {
  27. var self = this;
  28. self.xscroll = xscroll;
  29. self.infinite = self.xscroll.getPlugin("infinite");
  30. if(!self.infinite) return;
  31. self._bindEvt();
  32. },
  33. pluginDestructor: function(xscroll) {
  34. },
  35. getTransformX: function(el) {
  36. if (!el) return '';
  37. var trans = getComputedStyle(el)[transform].match(/[-\d\.*\d*]+/g);
  38. return trans ? trans[4] / 1 : 0;
  39. },
  40. _bindEvt: function() {
  41. var self = this;
  42. var xscroll = self.xscroll;
  43. var infinite = self.infinite;
  44. var lbl = null;
  45. infinite.on("panstart", function(e) {
  46. hasSlided = false;
  47. if (!e.cell) return;
  48. lbl = Util.findParentEl(e.target,"._xs_infinite_elements_",xscroll.renderTo);
  49. console.log(e.target)
  50. if (!lbl) return;
  51. startX = self.getTransformX(lbl);
  52. console.log(startX)
  53. lbl.style[transition] = "none";
  54. if (Math.abs(startX) > 0 && !isSliding) {
  55. self.slideRight(e)
  56. }
  57. })
  58. xscroll.on("pan", function(e) {
  59. if (!lbl) return;
  60. // slide left
  61. if (e.direction == 2) {
  62. self.slideAllExceptRow(e.cell._row);
  63. }
  64. /*
  65. 1.水平位移大于垂直位移
  66. 2.大于20px (参考值可自定) threshold
  67. 3.向左
  68. */
  69. if (Math.abs(e.deltaY) < 10 && Math.abs(e.deltaX) / Math.abs(e.deltaY) > 4 && Math.abs(e.deltaX) > threshold) {
  70. isLocked = true;
  71. xscroll.userConfig.lockY = true;
  72. var left = startX + e.deltaX + threshold;
  73. if (left > 0) {
  74. return;
  75. }
  76. lbl.style[transition] = "none";
  77. lbl.style[transform] = "translateX(" + left + "px)"
  78. } else if (!isLocked) {
  79. xscroll.userConfig.lockY = false;
  80. }
  81. });
  82. xscroll.on("panend", function(e) {
  83. console.log(e)
  84. if (!lbl) return;
  85. isLocked = false;
  86. var cpt = self.getTransformX(lbl);
  87. if (e.direction == 2 && Math.abs(e.velocityX) > acc) {
  88. self.slideLeftHandler(e)
  89. } else if (Math.abs(cpt) < self.userConfig.width / 2) {
  90. self.slideRightHandler(e)
  91. } else if (Math.abs(cpt) >= self.userConfig.width / 2) {
  92. self.slideLeftHandler(e)
  93. }
  94. })
  95. // document.body.addEventListener("webkitTransitionEnd", function(e) {
  96. // if (new RegExp(self.userConfig.labelSelector.replace(/\./, "")).test(e.target.className)) {
  97. // isSliding = false;
  98. // }
  99. // })
  100. },
  101. slideLeft: function(row) {
  102. var self = this;
  103. var xscroll = self.xscroll;
  104. console.log("row:",row)
  105. // var cell = xscroll.getCellByRowOrCol(row);
  106. // if (!cell || !cell.element) return;
  107. // var el = cell.element.querySelector(self.userConfig.labelSelector);
  108. // if (!el || !el.style) return;
  109. // el.style[transform] = "translateX(-" + self.userConfig.width + "px) ";
  110. // el.style[transition] = transformStr + " 0.15s ease";
  111. // xscroll.getData(0, row).data.status = "delete";
  112. },
  113. slideRight: function(row) {
  114. console.log("slideRight",row)
  115. // var self = this;
  116. // var xscroll = self.xscroll;
  117. // var cell = xscroll.getCellByRowOrCol(row);
  118. // if (!cell || !cell.element) return;
  119. // var el = cell.element.querySelector(self.userConfig.labelSelector);
  120. // if (!el || !el.style) return;
  121. // var matrix = window.getComputedStyle(el)[transform].match(/[-\d\.*\d*]+/g);
  122. // var transX = matrix ? Math.round(matrix[4]) : 0;
  123. // if (transX == 0) return;
  124. // el.style[transform] = "translateX(0)";
  125. // el.style[transition] = transformStr + " 0.5s ease";
  126. // xscroll.getData(0, row).data.status = "";
  127. },
  128. slideLeftHandler: function(e) {
  129. var self = this;
  130. isSliding = true;
  131. self.slideLeft(e.cell._row);
  132. },
  133. slideRightHandler: function(e) {
  134. var self = this;
  135. hasSlided = true;
  136. isSliding = true;
  137. self.slideRight(e.cell._row);
  138. },
  139. slideAllExceptRow: function(row) {
  140. var self = this;
  141. var xscroll = self.xscroll;
  142. for (var i in xscroll.infiniteElementsCache) {
  143. if (row != xscroll.infiniteElementsCache[i]._row || undefined === row) {
  144. self.slideRight(xscroll.infiniteElementsCache[i]._row);
  145. }
  146. }
  147. }
  148. });
  149. if (typeof module == 'object' && module.exports) {
  150. module.exports = SwipeEdit;
  151. }
  152. /** ignored by jsdoc **/
  153. else if (window.XScroll && window.XScroll.Plugins) {
  154. return XScroll.Plugins.SwipeEdit = SwipeEdit;
  155. }
  156. });