{"version":3,"file":"barba-css.modern.mjs","sources":["../src/css.ts"],"sourcesContent":["/**\n * @barba/css\n * <br><br>\n * ## Barba CSS.\n *\n * - Add CSS classes\n * - Manage CSS transitions\n *\n * @module css\n * @preferred\n */\n\n/***/\n\n// Definitions\nimport {\n  IBarbaPlugin,\n  ITransitionData,\n  ITransitionPage,\n} from '@barba/core/src/defs';\n\nimport { Core } from '@barba/core/src/core';\nimport { Logger } from '@barba/core/src/modules/Logger';\n\nimport { ICssCallbacks } from './defs';\n\nimport { version } from '../package.json';\n\nexport class Css implements IBarbaPlugin<{}> {\n  public name = '@barba/css';\n  public version = version;\n  public barba: Core;\n  public logger: Logger;\n\n  public prefix: string = 'barba';\n  public callbacks: ICssCallbacks = {};\n  public cb: any;\n\n  // Check if transition property applied\n  private _hasTransition: boolean = false;\n\n  /**\n   * Plugin installation.\n   */\n  public install(barba: Core) {\n    this.logger = new barba.Logger(this.name);\n    this.logger.info(this.version);\n    this.barba = barba;\n    this._once = this._once.bind(this);\n    this._leave = this._leave.bind(this);\n    this._enter = this._enter.bind(this);\n  }\n\n  /**\n   * Plugin installation.\n   */\n  public init() {\n    // Register hooks to get prefix\n    this.barba.hooks.before(this._getPrefix, this);\n    this.barba.hooks.beforeOnce(this._getPrefix, this);\n\n    // Register hook for CSS classes\n    this.barba.hooks.beforeOnce(this._beforeOnce, this);\n    this.barba.hooks.afterOnce(this._afterOnce, this);\n    this.barba.hooks.beforeLeave(this._beforeLeave, this);\n    this.barba.hooks.afterLeave(this._afterLeave, this);\n    this.barba.hooks.beforeEnter(this._beforeEnter, this);\n    this.barba.hooks.afterEnter(this._afterEnter, this);\n\n    // Override main transitions\n    this.barba.transitions.once = this._once;\n    this.barba.transitions.leave = this._leave;\n    this.barba.transitions.enter = this._enter;\n\n    // Add empty default transition (force prepend)\n    /* istanbul ignore next */\n    this.barba.transitions.store.all.unshift({\n      name: 'barba',\n      once() {}, // tslint:disable-line:no-empty\n      leave() {}, // tslint:disable-line:no-empty\n      enter() {}, // tslint:disable-line:no-empty\n    });\n    this.barba.transitions.store.update();\n  }\n\n  /**\n   * Initial state.\n   */\n  public async start(container: HTMLElement, kind: string): Promise<void> {\n    // Set initial CSS values\n    this.add(container, kind); // CSS: add kind\n    await this.barba.helpers.nextTick();\n    // Apply CSS transition\n    this.add(container, `${kind}-active`); // CSS: add kind-active\n    await this.barba.helpers.nextTick();\n  }\n\n  /**\n   * Next frame state.\n   */\n  public async next(container: HTMLElement, kind: string): Promise<any> {\n    this._hasTransition = this._checkTransition(container);\n\n    if (this._hasTransition) {\n      // We need to listen the end of the animation\n      return new Promise(async resolve => {\n        this.cb = resolve;\n        this.callbacks[kind] = resolve;\n\n        container.addEventListener('transitionend', resolve, false);\n        this.remove(container, kind); // CSS: remove kind\n        await this.barba.helpers.nextTick();\n        this.add(container, `${kind}-to`); // CSS: add kind-to\n        await this.barba.helpers.nextTick();\n      });\n    } else {\n      this.remove(container, kind); // CSS: remove kind\n      await this.barba.helpers.nextTick();\n      this.add(container, `${kind}-to`); // CSS: add kind-to\n      await this.barba.helpers.nextTick();\n    }\n  }\n\n  /**\n   * Final state.\n   */\n  public async end(container: HTMLElement, kind: string): Promise<void> {\n    this.remove(container, `${kind}-to`); // CSS: remove kind-to\n    this.remove(container, `${kind}-active`); // CSS: remove kind-active\n    container.removeEventListener('transitionend', this.callbacks[kind]);\n    this._hasTransition = false;\n  }\n\n  /**\n   * Add CSS classes.\n   */\n  public add(el: HTMLElement, step: string): void {\n    el.classList.add(`${this.prefix}-${step}`);\n  }\n\n  /**\n   * Remove CSS classes.\n   */\n  public remove(el: HTMLElement, step: string): void {\n    el.classList.remove(`${this.prefix}-${step}`);\n  }\n\n  /**\n   * Get CSS prefix from transition `name` property.\n   */\n  private _getPrefix(data: ITransitionData, t: ITransitionPage): void {\n    this.prefix = t.name || 'barba';\n  }\n\n  /**\n   * Check if CSS transition is applied\n   */\n  private _checkTransition(container: HTMLElement) {\n    // DEV: check for CSS animation property?\n    return getComputedStyle(container).transitionDuration !== '0s';\n  }\n\n  /**\n   * `beforeOnce` hook.\n   */\n  private _beforeOnce(data: ITransitionData): Promise<void> {\n    return this.start(data.next.container, 'once');\n  }\n\n  /**\n   * `once` hook.\n   */\n  private async _once(\n    data: ITransitionData,\n    t: ITransitionPage\n  ): Promise<any> {\n    await this.barba.hooks.do('once', data, t);\n\n    return this.next(data.next.container, 'once');\n  }\n\n  /**\n   * `afterOnce` hook.\n   */\n  private _afterOnce(data: ITransitionData): Promise<void> {\n    return this.end(data.next.container, 'once');\n  }\n\n  /**\n   * `beforeLeave` hook.\n   */\n  private _beforeLeave(data: ITransitionData): Promise<void> {\n    return this.start(data.current.container, 'leave');\n  }\n\n  /**\n   * `leave` hook.\n   */\n  private async _leave(\n    data: ITransitionData,\n    t: ITransitionPage\n  ): Promise<void> {\n    await this.barba.hooks.do('leave', data, t);\n\n    return this.next(data.current.container, 'leave');\n  }\n\n  /**\n   * `afterLeave` hook.\n   */\n  private _afterLeave(data: ITransitionData): Promise<void> {\n    this.end(data.current.container, 'leave');\n    // For CSS transitions, we need to remove current container\n    // directly after the leave transition\n    this.barba.transitions.remove(data);\n\n    return Promise.resolve();\n  }\n\n  /**\n   * `beforeEnter` hook.\n   */\n  private _beforeEnter(data: ITransitionData): Promise<void> {\n    return this.start(data.next.container, 'enter');\n  }\n\n  /**\n   * `enter` hook.\n   */\n  private async _enter(\n    data: ITransitionData,\n    t: ITransitionPage\n  ): Promise<void> {\n    await this.barba.hooks.do('enter', data, t);\n\n    return this.next(data.next.container, 'enter');\n  }\n\n  /**\n   * `afterEnter` hook.\n   */\n  private _afterEnter(data: ITransitionData): Promise<void> {\n    return this.end(data.next.container, 'enter');\n  }\n}\n\nconst css = new Css();\n\nexport default css;\n"],"names":["css","Css","name","version","this","barba","logger","prefix","callbacks","cb","_hasTransition","install","Logger","info","_once","bind","_leave","_enter","init","hooks","before","_getPrefix","beforeOnce","_beforeOnce","afterOnce","_afterOnce","beforeLeave","_beforeLeave","afterLeave","_afterLeave","beforeEnter","_beforeEnter","afterEnter","_afterEnter","transitions","once","leave","enter","store","all","unshift","update","async","container","kind","add","helpers","nextTick","_this","_checkTransition","Promise","resolve","addEventListener","remove","removeEventListener","el","step","classList","data","t","getComputedStyle","transitionDuration","start","next","do","end","current"],"mappings":"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"}