How to use @cycjimmy/awesome-js-funcs - 10 common examples

// services
import preventDefault from '@cycjimmy/awesome-js-funcs/event/preventDefault';

// polyfill
import './polyfill';

// offline runtime
if (!DEVELOPMENT) {
  const OfflinePluginRuntime = require('offline-plugin/runtime');
  OfflinePluginRuntime.install();
}

if (DEVELOPMENT) {
  console.log('Development Mode');
  console.log(require('@cycjimmy/awesome-js-funcs/handheld').getBrowserInfo());
}

if (PRODUCTION) {
  console.log('Production Mode');
}

// contextMenu preventDefault
document.addEventListener('contextmenu', preventDefault);

// fix ios native scrolling
document.body.addEventListener('touchmove', preventDefault, {passive: false});

// component
import LoadingComponent from './loadingComponent/Loading.component';
import PromptMobileComponentIns from './share/promptMobile/PromptMobile.component.ins';

_initAllBoxes() {
    if (this.allBoxes.length) {
      return Promise.resolve();
    }

    return functionToPromise(() => {
      let swiperWrapper = null;

      if (this.swiper.wrapperEl) {
        // swiper 4+
        swiperWrapper = this.swiper.wrapperEl;
      } else if (this.swiper.wrapper) {
        // swiper 3.x
        swiperWrapper = this.swiper.wrapper[0];
      }

      this.allBoxes = [
        ...nodeListToArray(swiperWrapper.querySelectorAll('[data-swiper-animation]')),
        ...nodeListToArray(swiperWrapper.querySelectorAll('[data-swiper-animation-once]'))
      ];
    });
  }

pause: () => {
        },
        stop: () => {
        },
        load: () => {
        },
      }, hooks),
    }, overlayOptions);

    this.options.needPlayButton = this.options.control && !this.options.picMode;

    this.player = null;

    // Setup canvas and play button
    this.els = {
      wrapper: isString(wrapper)
        ? document.querySelector(wrapper)
        : wrapper,
      canvas: null,
      playButton: document.createElement('div'),
      unmuteButton: null,
      poster: null,
    };

    if (window.getComputedStyle(this.els.wrapper).getPropertyValue('position') === 'static') {
      this.els.wrapper.style.position = 'relative';
    }

    this.els.wrapper.clientRect = this.els.wrapper.getBoundingClientRect();

    this.initCanvas();
    this.initPlayButton();

setTimeout(() => {
          const
            wrapperWidth = Number.parseInt(this.els.wrapper.style.width)
            , wrapperHeight = Number.parseInt(this.els.wrapper.style.height)
            , preComputedHeight = wrapperWidth / this.options.aspectRatio
          ;

          if (preComputedHeight >= wrapperHeight) { // based on wrapperWidth
            addStyles(this.els.videoWrapperForConstraintRatio, {
              width: wrapperWidth + 'px',
              height: preComputedHeight + 'px',
            });
          } else {  // based on wrapperHeight
            addStyles(this.els.videoWrapperForConstraintRatio, {
              width: wrapperHeight * this.options.aspectRatio + 'px',
              height: wrapperHeight + 'px',
            });
          }
        }, 0);
      }

, _changeStyle = () => {
        const
          containerRectWidth = containerRect().width
          , containerRectHeight = containerRect().height
        ;

        if (_judgePhoneOrientation() === this.options.orientation) {
          addStyles(this.els.wrapper, {
            width: containerRectWidth + 'px',
            height: containerRectHeight + 'px',
            transform: '',
          });
        } else {
          // Adjust the video orientation
          addStyles(this.els.wrapper, {
            width: containerRectHeight + 'px',
            height: containerRectWidth + 'px',
            transform: 'rotate(-90deg)',
          });
        }

        // set videoWrapperForConstraintRatio width&height
        setTimeout(() => {
          const

// constructor
import CreateInstance from '@cycjimmy/awesome-js-funcs/designPattern/CreateInstance';

import isMobile from '@cycjimmy/awesome-js-funcs/handheld/isMobile';

import promptMobile from './promptMobile.pug'
import _style from './promptMobile.scss'

// image
import QRCodeImg from '../../../static/images/QRCode.png';

const _createInstance = new CreateInstance();    // 构造函数实例

export default class PromptMobileComponentIns {
  constructor() {
    if (_createInstance()) {
      return _createInstance();
    }
    this.isMobile = false;
    this.wrapper = document.createElement('div');

    _createInstance(this);
  };

  load() {
    return new Promise((resolve, reject) => {
      if (isMobile()) {
        this.isMobile = true;

paramInit() {
    this.oVideoWrapper = this.context.querySelector('.' + _style.videoWrapper);
    this.aVideoChooseBtns = nodeListToArray(this.context.querySelectorAll('.' + _style.videoChoose));
  };

render() {
    return functionToPromise(() => {
      this.context.innerHTML = templateLoading({_style, imgLoading});
      document.body.appendChild(this.context);
    });
  };

load() {
    return functionToPromise(() => {
      this.wrapper.innerHTML = promptOrientation({
        _style,
        suggest: 'Turn to portrait for better experience.',
      });
    }).then(() => {
      document.body.appendChild(this.wrapper);
    });
  };

render({
           pugTemplate,
           wrapperElement,
           insetParam,
           isAddToEl = false,
         }) {
    return functionToPromise(() => new Templates(pugTemplate, wrapperElement, insetParam).load(isAddToEl));
  };