Swipe.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. SWIPE_KEY: () => SWIPE_KEY,
  21. default: () => stdin_default,
  22. swipeProps: () => swipeProps
  23. });
  24. module.exports = __toCommonJS(stdin_exports);
  25. var import_vue = require("vue");
  26. var import_vue2 = require("vue");
  27. var import_utils = require("../utils");
  28. var import_use = require("@vant/use");
  29. var import_use_touch = require("../composables/use-touch");
  30. var import_use_expose = require("../composables/use-expose");
  31. var import_on_popup_reopen = require("../composables/on-popup-reopen");
  32. const [name, bem] = (0, import_utils.createNamespace)("swipe");
  33. const swipeProps = {
  34. loop: import_utils.truthProp,
  35. width: import_utils.numericProp,
  36. height: import_utils.numericProp,
  37. vertical: Boolean,
  38. autoplay: (0, import_utils.makeNumericProp)(0),
  39. duration: (0, import_utils.makeNumericProp)(500),
  40. touchable: import_utils.truthProp,
  41. lazyRender: Boolean,
  42. initialSwipe: (0, import_utils.makeNumericProp)(0),
  43. indicatorColor: String,
  44. showIndicators: import_utils.truthProp,
  45. stopPropagation: import_utils.truthProp
  46. };
  47. const SWIPE_KEY = Symbol(name);
  48. var stdin_default = (0, import_vue2.defineComponent)({
  49. name,
  50. props: swipeProps,
  51. emits: ["change"],
  52. setup(props, {
  53. emit,
  54. slots
  55. }) {
  56. const root = (0, import_vue2.ref)();
  57. const track = (0, import_vue2.ref)();
  58. const state = (0, import_vue2.reactive)({
  59. rect: null,
  60. width: 0,
  61. height: 0,
  62. offset: 0,
  63. active: 0,
  64. swiping: false
  65. });
  66. const touch = (0, import_use_touch.useTouch)();
  67. const {
  68. children,
  69. linkChildren
  70. } = (0, import_use.useChildren)(SWIPE_KEY);
  71. const count = (0, import_vue2.computed)(() => children.length);
  72. const size = (0, import_vue2.computed)(() => state[props.vertical ? "height" : "width"]);
  73. const delta = (0, import_vue2.computed)(() => props.vertical ? touch.deltaY.value : touch.deltaX.value);
  74. const minOffset = (0, import_vue2.computed)(() => {
  75. if (state.rect) {
  76. const base = props.vertical ? state.rect.height : state.rect.width;
  77. return base - size.value * count.value;
  78. }
  79. return 0;
  80. });
  81. const maxCount = (0, import_vue2.computed)(() => size.value ? Math.ceil(Math.abs(minOffset.value) / size.value) : count.value);
  82. const trackSize = (0, import_vue2.computed)(() => count.value * size.value);
  83. const activeIndicator = (0, import_vue2.computed)(() => (state.active + count.value) % count.value);
  84. const isCorrectDirection = (0, import_vue2.computed)(() => {
  85. const expect = props.vertical ? "vertical" : "horizontal";
  86. return touch.direction.value === expect;
  87. });
  88. const trackStyle = (0, import_vue2.computed)(() => {
  89. const style = {
  90. transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
  91. transform: `translate${props.vertical ? "Y" : "X"}(${state.offset}px)`
  92. };
  93. if (size.value) {
  94. const mainAxis = props.vertical ? "height" : "width";
  95. const crossAxis = props.vertical ? "width" : "height";
  96. style[mainAxis] = `${trackSize.value}px`;
  97. style[crossAxis] = props[crossAxis] ? `${props[crossAxis]}px` : "";
  98. }
  99. return style;
  100. });
  101. const getTargetActive = (pace) => {
  102. const {
  103. active
  104. } = state;
  105. if (pace) {
  106. if (props.loop) {
  107. return (0, import_utils.clamp)(active + pace, -1, count.value);
  108. }
  109. return (0, import_utils.clamp)(active + pace, 0, maxCount.value);
  110. }
  111. return active;
  112. };
  113. const getTargetOffset = (targetActive, offset = 0) => {
  114. let currentPosition = targetActive * size.value;
  115. if (!props.loop) {
  116. currentPosition = Math.min(currentPosition, -minOffset.value);
  117. }
  118. let targetOffset = offset - currentPosition;
  119. if (!props.loop) {
  120. targetOffset = (0, import_utils.clamp)(targetOffset, minOffset.value, 0);
  121. }
  122. return targetOffset;
  123. };
  124. const move = ({
  125. pace = 0,
  126. offset = 0,
  127. emitChange
  128. }) => {
  129. if (count.value <= 1) {
  130. return;
  131. }
  132. const {
  133. active
  134. } = state;
  135. const targetActive = getTargetActive(pace);
  136. const targetOffset = getTargetOffset(targetActive, offset);
  137. if (props.loop) {
  138. if (children[0] && targetOffset !== minOffset.value) {
  139. const outRightBound = targetOffset < minOffset.value;
  140. children[0].setOffset(outRightBound ? trackSize.value : 0);
  141. }
  142. if (children[count.value - 1] && targetOffset !== 0) {
  143. const outLeftBound = targetOffset > 0;
  144. children[count.value - 1].setOffset(outLeftBound ? -trackSize.value : 0);
  145. }
  146. }
  147. state.active = targetActive;
  148. state.offset = targetOffset;
  149. if (emitChange && targetActive !== active) {
  150. emit("change", activeIndicator.value);
  151. }
  152. };
  153. const correctPosition = () => {
  154. state.swiping = true;
  155. if (state.active <= -1) {
  156. move({
  157. pace: count.value
  158. });
  159. } else if (state.active >= count.value) {
  160. move({
  161. pace: -count.value
  162. });
  163. }
  164. };
  165. const prev = () => {
  166. correctPosition();
  167. touch.reset();
  168. (0, import_use.doubleRaf)(() => {
  169. state.swiping = false;
  170. move({
  171. pace: -1,
  172. emitChange: true
  173. });
  174. });
  175. };
  176. const next = () => {
  177. correctPosition();
  178. touch.reset();
  179. (0, import_use.doubleRaf)(() => {
  180. state.swiping = false;
  181. move({
  182. pace: 1,
  183. emitChange: true
  184. });
  185. });
  186. };
  187. let autoplayTimer;
  188. const stopAutoplay = () => clearTimeout(autoplayTimer);
  189. const autoplay = () => {
  190. stopAutoplay();
  191. if (props.autoplay > 0 && count.value > 1) {
  192. autoplayTimer = setTimeout(() => {
  193. next();
  194. autoplay();
  195. }, +props.autoplay);
  196. }
  197. };
  198. const initialize = (active = +props.initialSwipe) => {
  199. if (!root.value) {
  200. return;
  201. }
  202. const cb = () => {
  203. var _a, _b;
  204. if (!(0, import_utils.isHidden)(root)) {
  205. const rect = {
  206. width: root.value.offsetWidth,
  207. height: root.value.offsetHeight
  208. };
  209. state.rect = rect;
  210. state.width = +((_a = props.width) != null ? _a : rect.width);
  211. state.height = +((_b = props.height) != null ? _b : rect.height);
  212. }
  213. if (count.value) {
  214. active = Math.min(count.value - 1, active);
  215. }
  216. state.active = active;
  217. state.swiping = true;
  218. state.offset = getTargetOffset(active);
  219. children.forEach((swipe) => {
  220. swipe.setOffset(0);
  221. });
  222. autoplay();
  223. };
  224. if ((0, import_utils.isHidden)(root)) {
  225. (0, import_vue2.nextTick)().then(cb);
  226. } else {
  227. cb();
  228. }
  229. };
  230. const resize = () => initialize(state.active);
  231. let touchStartTime;
  232. const onTouchStart = (event) => {
  233. if (!props.touchable)
  234. return;
  235. touch.start(event);
  236. touchStartTime = Date.now();
  237. stopAutoplay();
  238. correctPosition();
  239. };
  240. const onTouchMove = (event) => {
  241. if (props.touchable && state.swiping) {
  242. touch.move(event);
  243. if (isCorrectDirection.value) {
  244. const isEdgeTouch = !props.loop && (state.active === 0 && delta.value > 0 || state.active === count.value - 1 && delta.value < 0);
  245. if (!isEdgeTouch) {
  246. (0, import_utils.preventDefault)(event, props.stopPropagation);
  247. move({
  248. offset: delta.value
  249. });
  250. }
  251. }
  252. }
  253. };
  254. const onTouchEnd = () => {
  255. if (!props.touchable || !state.swiping) {
  256. return;
  257. }
  258. const duration = Date.now() - touchStartTime;
  259. const speed = delta.value / duration;
  260. const shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta.value) > size.value / 2;
  261. if (shouldSwipe && isCorrectDirection.value) {
  262. const offset = props.vertical ? touch.offsetY.value : touch.offsetX.value;
  263. let pace = 0;
  264. if (props.loop) {
  265. pace = offset > 0 ? delta.value > 0 ? -1 : 1 : 0;
  266. } else {
  267. pace = -Math[delta.value > 0 ? "ceil" : "floor"](delta.value / size.value);
  268. }
  269. move({
  270. pace,
  271. emitChange: true
  272. });
  273. } else if (delta.value) {
  274. move({
  275. pace: 0
  276. });
  277. }
  278. state.swiping = false;
  279. autoplay();
  280. };
  281. const swipeTo = (index, options = {}) => {
  282. correctPosition();
  283. touch.reset();
  284. (0, import_use.doubleRaf)(() => {
  285. let targetIndex;
  286. if (props.loop && index === count.value) {
  287. targetIndex = state.active === 0 ? 0 : index;
  288. } else {
  289. targetIndex = index % count.value;
  290. }
  291. if (options.immediate) {
  292. (0, import_use.doubleRaf)(() => {
  293. state.swiping = false;
  294. });
  295. } else {
  296. state.swiping = false;
  297. }
  298. move({
  299. pace: targetIndex - state.active,
  300. emitChange: true
  301. });
  302. });
  303. };
  304. const renderDot = (_, index) => {
  305. const active = index === activeIndicator.value;
  306. const style = active ? {
  307. backgroundColor: props.indicatorColor
  308. } : void 0;
  309. return (0, import_vue.createVNode)("i", {
  310. "style": style,
  311. "class": bem("indicator", {
  312. active
  313. })
  314. }, null);
  315. };
  316. const renderIndicator = () => {
  317. if (slots.indicator) {
  318. return slots.indicator({
  319. active: activeIndicator.value,
  320. total: count.value
  321. });
  322. }
  323. if (props.showIndicators && count.value > 1) {
  324. return (0, import_vue.createVNode)("div", {
  325. "class": bem("indicators", {
  326. vertical: props.vertical
  327. })
  328. }, [Array(count.value).fill("").map(renderDot)]);
  329. }
  330. };
  331. (0, import_use_expose.useExpose)({
  332. prev,
  333. next,
  334. state,
  335. resize,
  336. swipeTo
  337. });
  338. linkChildren({
  339. size,
  340. props,
  341. count,
  342. activeIndicator
  343. });
  344. (0, import_vue2.watch)(() => props.initialSwipe, (value) => initialize(+value));
  345. (0, import_vue2.watch)(count, () => initialize(state.active));
  346. (0, import_vue2.watch)(() => props.autoplay, autoplay);
  347. (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
  348. (0, import_vue2.watch)((0, import_use.usePageVisibility)(), (visible) => {
  349. if (visible === "visible") {
  350. autoplay();
  351. } else {
  352. stopAutoplay();
  353. }
  354. });
  355. (0, import_vue2.onMounted)(initialize);
  356. (0, import_vue2.onActivated)(() => initialize(state.active));
  357. (0, import_on_popup_reopen.onPopupReopen)(() => initialize(state.active));
  358. (0, import_vue2.onDeactivated)(stopAutoplay);
  359. (0, import_vue2.onBeforeUnmount)(stopAutoplay);
  360. (0, import_use.useEventListener)("touchmove", onTouchMove, {
  361. target: track
  362. });
  363. return () => {
  364. var _a;
  365. return (0, import_vue.createVNode)("div", {
  366. "ref": root,
  367. "class": bem()
  368. }, [(0, import_vue.createVNode)("div", {
  369. "ref": track,
  370. "style": trackStyle.value,
  371. "class": bem("track", {
  372. vertical: props.vertical
  373. }),
  374. "onTouchstartPassive": onTouchStart,
  375. "onTouchend": onTouchEnd,
  376. "onTouchcancel": onTouchEnd
  377. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderIndicator()]);
  378. };
  379. }
  380. });