Core component

src/components/core/core-class.js

@@ -0,0 +1,139 @@
+import $ from '../../utils/dom';
+import Utils from '../../utils/utils';
+import SwiperClass from '../../utils/class';
+
+import defaults from './defaults';
+
+import * as update from './update/';
+import * as translate from './translate/';
+import * as transition from './transition/';
+import * as slide from './slide/';
+
+class Swiper extends SwiperClass {
+  constructor(...args) {
+    let el;
+    let params;
+    if (args.length === 1 && args[0].constructor && args[0].constructor === Object) {
+      params = args[0];
+    } else {
+      [el, params] = args;
+    }
+    if (!params) params = {};
+
+    params = Utils.extend({}, params);
+    if (el && !params.el) params.el = el;
+
+
+    super(params);
+
+    // Swiper Instance
+    const swiper = this;
+
+
+    // Extend defaults with modules params
+    swiper.useModulesParams(defaults);
+
+    // Extend defaults with passed params
+    swiper.params = Utils.extend(defaults, params);
+    swiper.originalParams = Utils.extend({}, swiper.params);
+
+    // Find el
+    const $el = $(swiper.params.el);
+    el = $el[0];
+
+    if (!el) {
+      return undefined;
+    }
+
+    el.swiper = swiper;
+
+    // Find Wrapper
+    const $wrapperEl = $el.children(`.${swiper.params.wrapperClass}`);
+
+    // Extend Swiper
+    Utils.extend(swiper, {
+      $el,
+      el,
+      $wrapperEl,
+      wrapperEl: $wrapperEl[0],
+
+      // Slides
+      slides: [],
+      slidesGrid: [],
+      snapGrid: [],
+      slidesSizesGrid: [],
+
+      // isDirection
+      isHorizontal() {
+        return swiper.params.direction === 'horizontal';
+      },
+      isVertical() {
+        return swiper.params.direction === 'vertical';
+      },
+      // RTL
+      rtl: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'),
+      wrongRTL: $wrapperEl.css('display') === '-webkit-box',
+
+      // Props
+      translate: 0,
+      progress: 0,
+      velocity: 0,
+      animating: false,
+
+      // Touches
+      touches: {
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        currentY: 0,
+        diff: 0,
+      },
+    });
+
+
+    // Install Modules
+    swiper.useModules();
+
+    // Init
+    if (swiper.params.init) {
+      swiper.init();
+    }
+
+    // Return app instance
+    return swiper;
+  }
+  init() {
+    const swiper = this;
+    if (swiper.initialized) return;
+
+    swiper.initialized = true;
+    swiper.emit('init');
+  }
+  cleanStyles() {
+    const swiper = this;
+  }
+  destroy(deleteInstance = true, cleanStyles = true) {
+    let swiper = this;
+    swiper.emit('destroy beforeDestroy');
+    if (cleanStyles) {
+      swiper.cleanStyles();
+    }
+    swiper.emit('destroyed');
+    if (deleteInstance !== false) {
+      swiper.$el[0].swiper = null;
+      swiper.$el.data('swiper', null);
+      Utils.deleteProps(swiper);
+      swiper = null;
+    }
+  }
+}
+
+const prototypes = Utils.extend({}, update, translate, transition, slide);
+
+Object.keys(prototypes).forEach((protoMethod) => {
+  Swiper.prototype[protoMethod] = prototypes[protoMethod];
+});
+
+Swiper.Class = SwiperClass;
+
+export default Swiper;

src/components/core/defaults.js

@@ -0,0 +1,228 @@
+export default {
+  direction: 'horizontal',
+  touchEventsTarget: 'container',
+  initialSlide: 0,
+  speed: 300,
+  // autoplay
+  autoplay: false,
+  autoplayDisableOnInteraction: true,
+  autoplayStopOnLast: false,
+  // To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView).
+  iOSEdgeSwipeDetection: false,
+  iOSEdgeSwipeThreshold: 20,
+  // Free mode
+  freeMode: false,
+  freeModeMomentum: true,
+  freeModeMomentumRatio: 1,
+  freeModeMomentumBounce: true,
+  freeModeMomentumBounceRatio: 1,
+  freeModeMomentumVelocityRatio: 1,
+  freeModeSticky: false,
+  freeModeMinimumVelocity: 0.02,
+  // Autoheight
+  autoHeight: false,
+  // Set wrapper width
+  setWrapperSize: false,
+  // Virtual Translate
+  virtualTranslate: false,
+  // Effects
+  effect: 'slide', // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
+  coverflow: {
+    rotate: 50,
+    stretch: 0,
+    depth: 100,
+    modifier: 1,
+    slideShadows: true,
+  },
+  flip: {
+    slideShadows: true,
+    limitRotation: true,
+  },
+  cube: {
+    slideShadows: true,
+    shadow: true,
+    shadowOffset: 20,
+    shadowScale: 0.94,
+  },
+  fade: {
+    crossFade: false,
+  },
+  // Parallax
+  parallax: false,
+  // Zoom
+  zoom: false,
+  zoomMax: 3,
+  zoomMin: 1,
+  zoomToggle: true,
+  // Scrollbar
+  scrollbar: null,
+  scrollbarHide: true,
+  scrollbarDraggable: false,
+  scrollbarSnapOnRelease: false,
+  // Keyboard Mousewheel
+  // keyboardControl: false,
+  // mousewheelControl: false,
+  // mousewheelReleaseOnEdges: false,
+  // mousewheelInvert: false,
+  // mousewheelForceToAxis: false,
+  // mousewheelSensitivity: 1,
+  // mousewheelEventsTarged: 'container',
+  // Hash Navigation
+  hashnav: false,
+  hashnavWatchState: false,
+  // History
+  history: false,
+  // Commong Nav State
+  replaceState: false,
+  // Breakpoints
+  breakpoints: undefined,
+  // Slides grid
+  spaceBetween: 0,
+  slidesPerView: 1,
+  slidesPerColumn: 1,
+  slidesPerColumnFill: 'column',
+  slidesPerGroup: 1,
+  centeredSlides: false,
+  slidesOffsetBefore: 0, // in px
+  slidesOffsetAfter: 0, // in px
+  // Round length
+  roundLengths: false,
+  // Touches
+  touchRatio: 1,
+  touchAngle: 45,
+  simulateTouch: true,
+  shortSwipes: true,
+  longSwipes: true,
+  longSwipesRatio: 0.5,
+  longSwipesMs: 300,
+  followFinger: true,
+  onlyExternal: false,
+  threshold: 0,
+  touchMoveStopPropagation: true,
+  touchReleaseOnEdges: false,
+  // Unique Navigation Elements
+  uniqueNavElements: true,
+  // Pagination
+  // pagination: null,
+  // paginationElement: 'span',
+  // paginationClickable: false,
+  // paginationHide: false,
+  // paginationBulletRender: null,
+  // paginationProgressRender: null,
+  // paginationFractionRender: null,
+  // paginationCustomRender: null,
+  // paginationType: 'bullets', // 'bullets' or 'progress' or 'fraction' or 'custom'
+  fitSlideGroupWithBlank: false,
+  blankClass: 'swiper-invisible-blank-slide',
+  // Resistance
+  resistance: true,
+  resistanceRatio: 0.85,
+  // Next/prev buttons
+  // nextButton: null,
+  // prevButton: null,
+  // Progress
+  watchSlidesProgress: false,
+  watchSlidesVisibility: false,
+  // Cursor
+  grabCursor: false,
+  // Clicks
+  preventClicks: true,
+  preventClicksPropagation: true,
+  slideToClickedSlide: false,
+  // Lazy Loading
+  lazyLoading: false,
+  lazyLoadingInPrevNext: false,
+  lazyLoadingInPrevNextAmount: 1,
+  lazyLoadingOnTransitionStart: false,
+  // Images
+  preloadImages: true,
+  updateOnImagesReady: true,
+  // loop
+  loop: false,
+  loopAdditionalSlides: 0,
+  loopedSlides: null,
+  // Control
+  control: undefined,
+  controlInverse: false,
+  controlBy: 'slide', // or 'container'
+  normalizeSlideIndex: true,
+  // Swiping/no swiping
+  allowSwipeToPrev: true,
+  allowSwipeToNext: true,
+  swipeHandler: null, // '.swipe-handler',
+  noSwiping: true,
+  noSwipingClass: 'swiper-no-swiping',
+  // Passive Listeners
+  passiveListeners: true,
+  // NS
+  containerModifierClass: 'swiper-container-', // NEW
+  slideClass: 'swiper-slide',
+  slideActiveClass: 'swiper-slide-active',
+  slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
+  slideVisibleClass: 'swiper-slide-visible',
+  slideDuplicateClass: 'swiper-slide-duplicate',
+  slideNextClass: 'swiper-slide-next',
+  slideDuplicateNextClass: 'swiper-slide-duplicate-next',
+  slidePrevClass: 'swiper-slide-prev',
+  slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
+  wrapperClass: 'swiper-wrapper',
+  // bulletClass: 'swiper-pagination-bullet',
+  // bulletActiveClass: 'swiper-pagination-bullet-active',
+  // buttonDisabledClass: 'swiper-button-disabled',
+  // paginationCurrentClass: 'swiper-pagination-current',
+  // paginationTotalClass: 'swiper-pagination-total',
+  // paginationHiddenClass: 'swiper-pagination-hidden',
+  // paginationProgressbarClass: 'swiper-pagination-progressbar',
+  // paginationClickableClass: 'swiper-pagination-clickable', // NEW
+  // paginationModifierClass: 'swiper-pagination-', // NEW
+  lazyLoadingClass: 'swiper-lazy',
+  lazyStatusLoadingClass: 'swiper-lazy-loading',
+  lazyStatusLoadedClass: 'swiper-lazy-loaded',
+  lazyPreloaderClass: 'swiper-lazy-preloader',
+  notificationClass: 'swiper-notification',
+  preloaderClass: 'preloader',
+  zoomContainerClass: 'swiper-zoom-container',
+
+  // Observer
+  observer: false,
+  observeParents: false,
+  // Accessibility
+  a11y: false,
+  prevSlideMessage: 'Previous slide',
+  nextSlideMessage: 'Next slide',
+  firstSlideMessage: 'This is the first slide',
+  lastSlideMessage: 'This is the last slide',
+  paginationBulletMessage: 'Go to slide {{index}}',
+  // Callbacks
+  runCallbacksOnInit: true,
+  /*
+  Callbacks:
+  onInit: function (swiper)
+  onDestroy: function (swiper)
+  onBeforeResize: function (swiper)
+  onAfterResize: function (swiper)
+  onClick: function (swiper, e)
+  onTap: function (swiper, e)
+  onDoubleTap: function (swiper, e)
+  onSliderMove: function (swiper, e)
+  onSlideChangeStart: function (swiper)
+  onSlideChangeEnd: function (swiper)
+  onTransitionStart: function (swiper)
+  onTransitionEnd: function (swiper)
+  onImagesReady: function (swiper)
+  onProgress: function (swiper, progress)
+  onTouchStart: function (swiper, e)
+  onTouchMove: function (swiper, e)
+  onTouchMoveOpposite: function (swiper, e)
+  onTouchEnd: function (swiper, e)
+  onReachBeginning: function (swiper)
+  onReachEnd: function (swiper)
+  onSetTransition: function (swiper, duration)
+  onSetTranslate: function (swiper, translate)
+  onAutoplayStart: function (swiper)
+  onAutoplayStop: function (swiper),
+  onLazyImageLoad: function (swiper, slide, image)
+  onLazyImageReady: function (swiper, slide, image)
+  onKeyPress: function (swiper, keyCode)
+  */
+};

src/components/core/slide/index.js

@@ -0,0 +1,11 @@
+import slideTo from './slideTo';
+import slideNext from './slideNext';
+import slidePrev from './slidePrev';
+import slideReset from './slideReset';
+
+export {
+  slideTo,
+  slideNext,
+  slidePrev,
+  slideReset,
+};

src/components/core/slide/slideNext.js

@@ -0,0 +1,13 @@
+/* eslint no-unused-vars: "off" */
+export default function (speed = this.params.speed, runCallbacks = true, internal) {
+  const swiper = this;
+  const { params, animating, activeIndex } = swiper;
+
+  if (params.loop) {
+    if (animating) return false;
+    swiper.loop.fix();
+    const clientLeft = swiper.$wrapperEl[0].clientLeft;
+    return swiper.slideTo(activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
+  }
+  return swiper.slideTo(activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
+}