Source: src/plugin/Plugin.js

/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
	 * Constructor
	 * @param {Object} options Option object <ko>옵션 객체</ko>
	 */
	constructor(options = {}) {
		this.options = options;
	}

	/**
	 * Before mounting. It's init point from Flicking instance
	 * @param {Flicking} instance Flicking instance
	 * @returns {Plugin}
	 */
	$componentWillMount(instance) {
		this.$$ = instance;

		// get hint and layer-hack setting
		this.useWillChange = instance.$container.style.willChange === "transform";
		this.useLayerHack = this.getInstanceConf().useLayerHack;

		this.bindEvents();
		this.$componentMount();
		this.$componentDidMount();

		return this;
	}

	/**
	 * After mounting
	 * @return {Plugin}
	 */
	$componentDidMount() {
		return this;
	}

	/**
	 * Before the destroy
	 */
	$componentWillUnmount() {
		Object.keys(this).forEach(v => {
			this[v] = null;
		});
	}

	getInstanceConf() {
		return this.$$._conf;
	}

	/**
	 * Bind flicking custom events
	 */
	bindEvents() {
		this.$$.on({
			flick: this._onFlick.bind(this),
			flickEnd: this._onFlickEnd.bind(this),
			restore: this._onRestore.bind(this)
		});
	}

	/**
	 * 'flick' event handler
	 * @param {Object} e
	 * @private
	 */
	_onFlick(e) {
		const pos = e.pos;
		const panel = this.$$._conf.panel;
		const distance = e.distance != null ? e.distance : pos - panel.size * panel.index;

		this.onFlick && this.onFlick(e, distance);
	}

	/**
	 * 'flickEnd' event handler
	 * @param {Object} e
	 * @private
	 */
	_onFlickEnd(e) {
		const type = (e.direction & consts.DIRECTION_LEFT && "next") ||
			(e.direction & consts.DIRECTION_RIGHT && "prev") || "";

		type && this.arrange && this.arrange(type);
		this.onFlickEnd && this.onFlickEnd(e);
	}

	/**
	 * 'restore' event handler
	 * @param {Object} e
	 * @private
	 */
	_onRestore(e) {
		this.onRestore && this.onRestore(e);
	}

	/**
	 * Constant to expose Flicking's utility
	 * @ko Flicking 유틸리티
	 * @name utils
	 * @memberof Plugin
	 * @static
	 * @constant
	 * @type {Object}
	 * @private
	 */
	static utils = utils;

	/**
	 * Constant to expose Flicking's constant value
	 * @ko Flicking 상수 값
	 * @name utils
	 * @memberof Plugin
	 * @static
	 * @constant
	 * @type {Object}
	 * @private
	 */
	static consts = consts;

	/**
	 * Version info string
	 * @ko 버전정보 문자열
	 * @name VERSION
	 * @memberof Plugin
	 * @static
	 * @type {String}
	 * @example
	 * eg.Flicking.plugin.OpacityEffect.VERSION;  // ex) 2.2.0
	 */
	static VERSION = "#__VERSION__#";
}
comments powered by Disqus