exporter.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. /*!
  2. * vue-awesome-swiper v4.1.1
  3. * Copyright (c) Surmon. All rights reserved.
  4. * Released under the MIT License.
  5. * Surmon <https://github.com/surmon-china>
  6. */
  7. (function(g,f){typeof exports==='object'&&typeof module!=='undefined'?module.exports=f(require('vue')):typeof define==='function'&&define.amd?define(['vue'],f):(g=g||self,g.VueAwesomeSwiper=f(g.Vue));}(this,(function(Vue){'use strict';Vue=Vue&&Object.prototype.hasOwnProperty.call(Vue,'default')?Vue['default']:Vue;/**
  8. * @file vue-awesome-swiper
  9. * @module constants
  10. * @author Surmon <https://github.com/surmon-china>
  11. */
  12. var CoreNames;
  13. (function (CoreNames) {
  14. CoreNames["SwiperComponent"] = "Swiper";
  15. CoreNames["SwiperSlideComponent"] = "SwiperSlide";
  16. CoreNames["SwiperDirective"] = "swiper";
  17. CoreNames["SwiperInstance"] = "$swiper";
  18. })(CoreNames || (CoreNames = {}));
  19. var DEFAULT_CLASSES = Object.freeze({
  20. containerClass: 'swiper-container',
  21. wrapperClass: 'swiper-wrapper',
  22. slideClass: 'swiper-slide'
  23. });
  24. var ComponentEvents;
  25. (function (ComponentEvents) {
  26. ComponentEvents["Ready"] = "ready";
  27. ComponentEvents["ClickSlide"] = "clickSlide";
  28. })(ComponentEvents || (ComponentEvents = {}));
  29. var ComponentPropNames;
  30. (function (ComponentPropNames) {
  31. ComponentPropNames["AutoUpdate"] = "autoUpdate";
  32. ComponentPropNames["AutoDestroy"] = "autoDestroy";
  33. ComponentPropNames["DeleteInstanceOnDestroy"] = "deleteInstanceOnDestroy";
  34. ComponentPropNames["CleanupStylesOnDestroy"] = "cleanupStylesOnDestroy";
  35. })(ComponentPropNames || (ComponentPropNames = {}));
  36. // https://swiperjs.com/api/#events
  37. var SWIPER_EVENTS = [
  38. 'init',
  39. 'beforeDestroy',
  40. 'slideChange',
  41. 'slideChangeTransitionStart',
  42. 'slideChangeTransitionEnd',
  43. 'slideNextTransitionStart',
  44. 'slideNextTransitionEnd',
  45. 'slidePrevTransitionStart',
  46. 'slidePrevTransitionEnd',
  47. 'transitionStart',
  48. 'transitionEnd',
  49. 'touchStart',
  50. 'touchMove',
  51. 'touchMoveOpposite',
  52. 'sliderMove',
  53. 'touchEnd',
  54. 'click',
  55. 'tap',
  56. 'doubleTap',
  57. 'imagesReady',
  58. 'progress',
  59. 'reachBeginning',
  60. 'reachEnd',
  61. 'fromEdge',
  62. 'setTranslate',
  63. 'setTransition',
  64. 'resize',
  65. 'observerUpdate',
  66. 'beforeLoopFix',
  67. 'loopFix'
  68. ];/*! *****************************************************************************
  69. Copyright (c) Microsoft Corporation. All rights reserved.
  70. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  71. this file except in compliance with the License. You may obtain a copy of the
  72. License at http://www.apache.org/licenses/LICENSE-2.0
  73. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  74. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  75. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  76. MERCHANTABLITY OR NON-INFRINGEMENT.
  77. See the Apache Version 2.0 License for specific language governing permissions
  78. and limitations under the License.
  79. ***************************************************************************** */
  80. function __spreadArrays() {
  81. for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  82. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  83. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  84. r[k] = a[j];
  85. return r;
  86. }/**
  87. * @file vue-awesome-swiper
  88. * @module utils
  89. * @author Surmon <https://github.com/surmon-china>
  90. */
  91. var kebabcase = function (string) {
  92. return string
  93. .replace(/([a-z])([A-Z])/g, '$1-$2')
  94. .replace(/\s+/g, '-')
  95. .toLowerCase();
  96. };/**
  97. * @file vue-awesome-swiper
  98. * @module event
  99. * @author Surmon <https://github.com/surmon-china>
  100. */
  101. var handleClickSlideEvent = function (swiper, event, emit) {
  102. var _a, _b, _c;
  103. if (swiper && !(swiper.destroyed)) {
  104. var eventPath = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || event.path;
  105. if ((event === null || event === void 0 ? void 0 : event.target) && eventPath) {
  106. var slides_1 = Array.from(swiper.slides);
  107. var paths = Array.from(eventPath);
  108. // Click slide || slide[children]
  109. if (slides_1.includes(event.target) || paths.some(function (item) { return slides_1.includes(item); })) {
  110. var clickedIndex = swiper.clickedIndex;
  111. var reallyIndex = Number((_c = (_b = swiper.clickedSlide) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.swiperSlideIndex);
  112. var reallyIndexValue = Number.isInteger(reallyIndex) ? reallyIndex : null;
  113. emit(ComponentEvents.ClickSlide, clickedIndex, reallyIndexValue);
  114. emit(kebabcase(ComponentEvents.ClickSlide), clickedIndex, reallyIndexValue);
  115. }
  116. }
  117. }
  118. };
  119. var bindSwiperEvents = function (swiper, emit) {
  120. SWIPER_EVENTS.forEach(function (eventName) {
  121. swiper.on(eventName, function () {
  122. var arguments$1 = arguments;
  123. var args = [];
  124. for (var _i = 0; _i < arguments.length; _i++) {
  125. args[_i] = arguments$1[_i];
  126. }
  127. emit.apply(void 0, __spreadArrays([eventName], args));
  128. var kebabcaseName = kebabcase(eventName);
  129. if (kebabcaseName !== eventName) {
  130. emit.apply(void 0, __spreadArrays([kebabcaseName], args));
  131. }
  132. });
  133. });
  134. };/**
  135. * @file vue-awesome-swiper
  136. * @module directive
  137. * @author Surmon <https://github.com/surmon-china>
  138. */
  139. var INSTANCE_NAME_KEY = 'instanceName';
  140. function getDirective(SwiperClass, globalOptions) {
  141. var getStandardisedOptionByAttrs = function (vnode, key) {
  142. var _a, _b, _c, _d;
  143. var value = (_b = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[key];
  144. return value !== undefined
  145. ? value
  146. : (_d = (_c = vnode.data) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d[kebabcase(key)];
  147. };
  148. // Get swiper instace name in directive
  149. var getSwiperInstanceName = function (element, binding, vnode) {
  150. return (binding.arg ||
  151. getStandardisedOptionByAttrs(vnode, INSTANCE_NAME_KEY) ||
  152. element.id ||
  153. CoreNames.SwiperInstance);
  154. };
  155. var getSwiperInstance = function (element, binding, vnode) {
  156. var instanceName = getSwiperInstanceName(element, binding, vnode);
  157. return vnode.context[instanceName] || null;
  158. };
  159. var getSwipeOptions = function (binding) {
  160. return binding.value || globalOptions;
  161. };
  162. var getBooleanValueByInput = function (input) {
  163. return [true, undefined, null, ''].includes(input);
  164. };
  165. // Emit event in Vue directive
  166. var getEventEmiter = function (vnode) {
  167. var _a, _b;
  168. var handlers = ((_a = vnode.data) === null || _a === void 0 ? void 0 : _a.on) || ((_b = vnode.componentOptions) === null || _b === void 0 ? void 0 : _b.listeners);
  169. return function (name) {
  170. var arguments$1 = arguments;
  171. var args = [];
  172. for (var _i = 1; _i < arguments.length; _i++) {
  173. args[_i - 1] = arguments$1[_i];
  174. }
  175. var _a;
  176. var handle = (_a = handlers) === null || _a === void 0 ? void 0 : _a[name];
  177. if (handle) {
  178. handle.fns.apply(handle, args);
  179. }
  180. };
  181. };
  182. return {
  183. // Init
  184. bind: function (element, binding, vnode) {
  185. // auto class name
  186. if (element.className.indexOf(DEFAULT_CLASSES.containerClass) === -1) {
  187. element.className += ((element.className ? ' ' : '') + DEFAULT_CLASSES.containerClass);
  188. }
  189. // bind click event
  190. element.addEventListener('click', function (event) {
  191. var emitEvent = getEventEmiter(vnode);
  192. var swiper = getSwiperInstance(element, binding, vnode);
  193. handleClickSlideEvent(swiper, event, emitEvent);
  194. });
  195. },
  196. // DOM inserted
  197. inserted: function (element, binding, vnode) {
  198. var context = vnode.context;
  199. var swiperOptions = getSwipeOptions(binding);
  200. var instanceName = getSwiperInstanceName(element, binding, vnode);
  201. var emitEvent = getEventEmiter(vnode);
  202. var vueContext = context;
  203. var swiper = vueContext === null || vueContext === void 0 ? void 0 : vueContext[instanceName];
  204. // Swiper will destroy but not delete instance, when used <keep-alive>
  205. if (!swiper || swiper.destroyed) {
  206. swiper = new SwiperClass(element, swiperOptions);
  207. vueContext[instanceName] = swiper;
  208. bindSwiperEvents(swiper, emitEvent);
  209. emitEvent(ComponentEvents.Ready, swiper);
  210. // MARK: Reinstance when the nexttick with <keep-alive>
  211. // Vue.nextTick(instancing) | setTimeout(instancing)
  212. }
  213. },
  214. // On options changed or DOM updated
  215. componentUpdated: function (element, binding, vnode) {
  216. var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
  217. var autoUpdate = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoUpdate);
  218. if (getBooleanValueByInput(autoUpdate)) {
  219. var swiper = getSwiperInstance(element, binding, vnode);
  220. if (swiper) {
  221. var swiperOptions = getSwipeOptions(binding);
  222. var isLoop = swiperOptions.loop;
  223. if (isLoop) {
  224. (_b = (_a = swiper) === null || _a === void 0 ? void 0 : _a.loopDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
  225. }
  226. (_c = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _c === void 0 ? void 0 : _c.call(swiper);
  227. (_e = (_d = swiper.navigation) === null || _d === void 0 ? void 0 : _d.update) === null || _e === void 0 ? void 0 : _e.call(_d);
  228. (_g = (_f = swiper.pagination) === null || _f === void 0 ? void 0 : _f.render) === null || _g === void 0 ? void 0 : _g.call(_f);
  229. (_j = (_h = swiper.pagination) === null || _h === void 0 ? void 0 : _h.update) === null || _j === void 0 ? void 0 : _j.call(_h);
  230. if (isLoop) {
  231. (_l = (_k = swiper) === null || _k === void 0 ? void 0 : _k.loopCreate) === null || _l === void 0 ? void 0 : _l.call(_k);
  232. (_m = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _m === void 0 ? void 0 : _m.call(swiper);
  233. }
  234. }
  235. }
  236. },
  237. // Destroy this directive
  238. unbind: function (element, binding, vnode) {
  239. var _a;
  240. var autoDestroy = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoDestroy);
  241. if (getBooleanValueByInput(autoDestroy)) {
  242. var swiper = getSwiperInstance(element, binding, vnode);
  243. if (swiper && swiper.initialized) {
  244. (_a = swiper === null || swiper === void 0 ? void 0 : swiper.destroy) === null || _a === void 0 ? void 0 : _a.call(swiper, getBooleanValueByInput(getStandardisedOptionByAttrs(vnode, ComponentPropNames.DeleteInstanceOnDestroy)), getBooleanValueByInput(getStandardisedOptionByAttrs(vnode, ComponentPropNames.CleanupStylesOnDestroy)));
  245. }
  246. }
  247. }
  248. };
  249. }/**
  250. * @file vue-awesome-swiper
  251. * @module SwiperComponent
  252. * @author Surmon <https://github.com/surmon-china>
  253. */
  254. var SlotNames;
  255. (function (SlotNames) {
  256. SlotNames["ParallaxBg"] = "parallax-bg";
  257. SlotNames["Pagination"] = "pagination";
  258. SlotNames["Scrollbar"] = "scrollbar";
  259. SlotNames["PrevButton"] = "button-prev";
  260. SlotNames["NextButton"] = "button-next";
  261. })(SlotNames || (SlotNames = {}));
  262. function getSwiperComponent(SwiperClass) {
  263. var _a;
  264. return Vue.extend({
  265. name: CoreNames.SwiperComponent,
  266. props: (_a = {
  267. defaultOptions: {
  268. type: Object,
  269. required: false,
  270. default: function () { return ({}); }
  271. },
  272. // eslint-disable-next-line vue/require-default-prop
  273. options: {
  274. type: Object,
  275. required: false
  276. }
  277. },
  278. _a[ComponentPropNames.AutoUpdate] = {
  279. type: Boolean,
  280. default: true
  281. },
  282. // https://github.com/surmon-china/vue-awesome-swiper/pull/550/files
  283. _a[ComponentPropNames.AutoDestroy] = {
  284. type: Boolean,
  285. default: true
  286. },
  287. // https://github.com/surmon-china/vue-awesome-swiper/pull/388
  288. _a[ComponentPropNames.DeleteInstanceOnDestroy] = {
  289. type: Boolean,
  290. required: false,
  291. default: true
  292. },
  293. _a[ComponentPropNames.CleanupStylesOnDestroy] = {
  294. type: Boolean,
  295. required: false,
  296. default: true
  297. },
  298. _a),
  299. data: function () {
  300. var _a;
  301. return _a = {},
  302. _a[CoreNames.SwiperInstance] = null,
  303. _a;
  304. },
  305. computed: {
  306. swiperInstance: {
  307. cache: false,
  308. set: function (swiper) {
  309. this[CoreNames.SwiperInstance] = swiper;
  310. },
  311. get: function () {
  312. return this[CoreNames.SwiperInstance];
  313. }
  314. },
  315. swiperOptions: function () {
  316. return this.options || this.defaultOptions;
  317. },
  318. wrapperClass: function () {
  319. return this.swiperOptions.wrapperClass || DEFAULT_CLASSES.wrapperClass;
  320. }
  321. },
  322. methods: {
  323. // Feature: click event
  324. handleSwiperClick: function (event) {
  325. handleClickSlideEvent(this.swiperInstance, event, this.$emit.bind(this));
  326. },
  327. autoReLoopSwiper: function () {
  328. var _a, _b;
  329. if (this.swiperInstance && this.swiperOptions.loop) {
  330. // https://github.com/surmon-china/vue-awesome-swiper/issues/593
  331. // https://github.com/surmon-china/vue-awesome-swiper/issues/544
  332. // https://github.com/surmon-china/vue-awesome-swiper/pull/545/files
  333. var swiper = this.swiperInstance;
  334. (_a = swiper === null || swiper === void 0 ? void 0 : swiper.loopDestroy) === null || _a === void 0 ? void 0 : _a.call(swiper);
  335. (_b = swiper === null || swiper === void 0 ? void 0 : swiper.loopCreate) === null || _b === void 0 ? void 0 : _b.call(swiper);
  336. }
  337. },
  338. updateSwiper: function () {
  339. var _a, _b, _c, _d, _e, _f, _g, _h;
  340. if (this[ComponentPropNames.AutoUpdate] && this.swiperInstance) {
  341. this.autoReLoopSwiper();
  342. (_b = (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
  343. (_d = (_c = this.swiperInstance.navigation) === null || _c === void 0 ? void 0 : _c.update) === null || _d === void 0 ? void 0 : _d.call(_c);
  344. (_f = (_e = this.swiperInstance.pagination) === null || _e === void 0 ? void 0 : _e.render) === null || _f === void 0 ? void 0 : _f.call(_e);
  345. (_h = (_g = this.swiperInstance.pagination) === null || _g === void 0 ? void 0 : _g.update) === null || _h === void 0 ? void 0 : _h.call(_g);
  346. }
  347. },
  348. destroySwiper: function () {
  349. var _a, _b;
  350. if (this[ComponentPropNames.AutoDestroy] && this.swiperInstance) {
  351. // https://github.com/surmon-china/vue-awesome-swiper/pull/341
  352. // https://github.com/surmon-china/vue-awesome-swiper/issues/340
  353. if (this.swiperInstance.initialized) {
  354. (_b = (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a, this[ComponentPropNames.DeleteInstanceOnDestroy], this[ComponentPropNames.CleanupStylesOnDestroy]);
  355. }
  356. }
  357. },
  358. initSwiper: function () {
  359. this.swiperInstance = new SwiperClass(this.$el, this.swiperOptions);
  360. bindSwiperEvents(this.swiperInstance, this.$emit.bind(this));
  361. this.$emit(ComponentEvents.Ready, this.swiperInstance);
  362. }
  363. },
  364. mounted: function () {
  365. if (!this.swiperInstance) {
  366. this.initSwiper();
  367. }
  368. },
  369. // Update swiper when the parent component activated with `keep-alive`.
  370. activated: function () {
  371. this.updateSwiper();
  372. },
  373. updated: function () {
  374. this.updateSwiper();
  375. },
  376. beforeDestroy: function () {
  377. // https://github.com/surmon-china/vue-awesome-swiper/commit/2924a9d4d3d1cf51c0d46076410b1f804b2b8a43#diff-7f4e0261ac562c0f354cb91a1ca8864f
  378. this.$nextTick(this.destroySwiper);
  379. },
  380. render: function (createElement) {
  381. return createElement('div', {
  382. staticClass: DEFAULT_CLASSES.containerClass,
  383. on: {
  384. click: this.handleSwiperClick
  385. }
  386. }, [
  387. this.$slots[SlotNames.ParallaxBg],
  388. createElement('div', {
  389. class: this.wrapperClass
  390. }, this.$slots.default),
  391. this.$slots[SlotNames.Pagination],
  392. this.$slots[SlotNames.PrevButton],
  393. this.$slots[SlotNames.NextButton],
  394. this.$slots[SlotNames.Scrollbar]
  395. ]);
  396. }
  397. });
  398. }/**
  399. * @file vue-awesome-swiper
  400. * @module SwiperSlideComponent
  401. * @author Surmon <https://github.com/surmon-china>
  402. */
  403. var SwiperSlideComponent = Vue.extend({
  404. name: CoreNames.SwiperSlideComponent,
  405. computed: {
  406. slideClass: function () {
  407. var _a, _b;
  408. return ((_b = (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.swiperOptions) === null || _b === void 0 ? void 0 : _b.slideClass) || DEFAULT_CLASSES.slideClass;
  409. }
  410. },
  411. methods: {
  412. update: function () {
  413. var _a;
  414. var parent = this.$parent;
  415. // https://github.com/surmon-china/vue-awesome-swiper/issues/632
  416. if (parent[ComponentPropNames.AutoUpdate]) {
  417. (_a = parent === null || parent === void 0 ? void 0 : parent.swiperInstance) === null || _a === void 0 ? void 0 : _a.update();
  418. }
  419. }
  420. },
  421. mounted: function () {
  422. this.update();
  423. },
  424. updated: function () {
  425. this.update();
  426. },
  427. render: function (createElement) {
  428. return createElement('div', {
  429. class: this.slideClass
  430. }, this.$slots.default);
  431. }
  432. });/**
  433. * @file vue-awesome-swiper
  434. * @module exporter
  435. * @author Surmon <https://github.com/surmon-china>
  436. */
  437. var getInstaller = function (SwiperClass) {
  438. var install = function (Vue, globalOptions) {
  439. if (install.installed)
  440. { return; }
  441. var SwiperComponent = getSwiperComponent(SwiperClass);
  442. if (globalOptions) {
  443. SwiperComponent.options.props.defaultOptions.default = function () { return globalOptions; };
  444. }
  445. Vue.component(CoreNames.SwiperComponent, SwiperComponent);
  446. Vue.component(CoreNames.SwiperSlideComponent, SwiperSlideComponent);
  447. Vue.directive(CoreNames.SwiperDirective, getDirective(SwiperClass, globalOptions));
  448. install.installed = true;
  449. };
  450. return install;
  451. };
  452. function exporter(SwiperClass) {
  453. var _a;
  454. return _a = {
  455. version: '4.1.1',
  456. install: getInstaller(SwiperClass),
  457. directive: getDirective(SwiperClass)
  458. },
  459. _a[CoreNames.SwiperComponent] = getSwiperComponent(SwiperClass),
  460. _a[CoreNames.SwiperSlideComponent] = SwiperSlideComponent,
  461. _a;
  462. }return exporter;})));