import Swiper from 'swiper';
import {init} from '@cycjimmy/h5-pages';

init({
  Swiper,                                                       // constructor of Swiper
  pages: [page1, page2],                                        // An array of Page instances
  containerExtraHtml: `<div class="swiper-pagination"></div>`,  // Extra Html under swiper-container, such as navigator, etc.
  swiperOptions: {                                              // swiper configuration(loop is not supported)
    direction: 'vertical',
    pagination: {
      el: '.swiper-pagination',
    },
  },
  compatibleWithSafeArea: true,                                 // Whether it is compatible with the safe area of screen. The default is true.
})

import {h5pages} from '@cycjimmy/h5-pages';

console.log(h5Pages.root);    // H5 root element
console.log(h5Pages.swiper);  // swiper instance

import {Page} from '@cycjimmy/h5-pages';

const page = new Page({
  name: 'pageName',                                     // name for page. Default is "page" with index, such as "page0". 
  renderHtml: `<div class="page-wrapper">page</div>`,   // Html structure under swiper-slide
  pageEnter: () => console.log('enter page'),           // Hook function for enter the page
  pageLeave: () => console.log('leave page'),           // Hook function for leave the page
});

import {Page} from '@cycjimmy/h5-pages';

const page = new class extends Page {
  constructor() {
    super({
     name: 'page',
     renderHtml: `<div class="page-wrapper">page</div>`,
     pageEnter: () => console.log('enter page'),
     pageLeave: () => console.log('leave page'),
    });
  }
  
  // paramInit(): [Option] Add your custom parameters.
  paramInit() {
    // In this function super.paramInit() must be called first.
    super.paramInit();  

    // It is recommended to place your custom parameters here.
    this.oneCustomElement = this.page.querySelector(`.${_style.oneCustomElement}`);
  }

  // eventBind(): [Option] Add your custom event bindings.
  eventBind() {
    // In this function super.eventBind() must be called first.
    super.eventBind();

    // It is recommended to place custom event bindings here.
    this.oneCustomElement.addEventListener('click', () => {
      console.log('oneCustomElement clicked');
    });
  }

  // extraRender(): [Option] Add your custom action When the page loaded.
  extraRender() {
    console.log('pageLoaded');
  }

  // Other custom extensions
  // ... 
};

import {Popup} from '@cycjimmy/h5-pages';

const Popup = new class extends Popup {
  constructor() {
    super();
  }

  load() {
    // You must Overwrite this function with your own function
  }

  // Other custom extensions
  // ... 
};