seepur/resources/scripts/applications/home/components/flipbook/flipbook.js

/*!
 * @license
 * flipbook-vue v0.8.1
 * Copyright © 2020 Takeshi Sone.
 * Released under the MIT License.
 */

(function () {
  'use strict';

  /*! @license Rematrix v0.4.1

  	Copyright 2019 Julian Lloyd.

  	Permission is hereby granted, free of charge, to any person obtaining a copy
  	of this software and associated documentation files (the "Software"), to deal
  	in the Software without restriction, including without limitation the rights
  	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  	copies of the Software, and to permit persons to whom the Software is
  	furnished to do so, subject to the following conditions:

  	The above copyright notice and this permission notice shall be included in
  	all copies or substantial portions of the Software.

  	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  	THE SOFTWARE.
  */

  /**
   * Transformation matrices in the browser come in two flavors:
   *
   *  - `matrix` using 6 values (short)
   *  - `matrix3d` using 16 values (long)
   *
   * This utility follows this [conversion guide](https://goo.gl/EJlUQ1)
   * to expand short form matrices to their equivalent long form.
   *
   * @param  {array} source - Accepts both short and long form matrices.
   * @return {array}
   */
  function format(source) {
    if (source.constructor !== Array) {
      throw new TypeError('Expected array.')
    }
    if (source.length === 16) {
      return source
    }
    if (source.length === 6) {
      var matrix = identity();
      matrix[0] = source[0];
      matrix[1] = source[1];
      matrix[4] = source[2];
      matrix[5] = source[3];
      matrix[12] = source[4];
      matrix[13] = source[5];
      return matrix
    }
    throw new RangeError('Expected array with either 6 or 16 values.')
  }

  /**
   * Returns a matrix representing no transformation. The product of any matrix
   * multiplied by the identity matrix will be the original matrix.
   *
   * > **Tip:** Similar to how `5 * 1 === 5`, where `1` is the identity.
   *
   * @return {array}
   */
  function identity() {
    var matrix = [];
    for (var i = 0; i < 16; i++) {
      i % 5 == 0 ? matrix.push(1) : matrix.push(0);
    }
    return matrix
  }

  /**
   * Returns a 4x4 matrix describing the combined transformations
   * of both arguments.
   *
   * > **Note:** Order is very important. For example, rotating 45°
   * along the Z-axis, followed by translating 500 pixels along the
   * Y-axis... is not the same as translating 500 pixels along the
   * Y-axis, followed by rotating 45° along on the Z-axis.
   *
   * @param  {array} m - Accepts both short and long form matrices.
   * @param  {array} x - Accepts both short and long form matrices.
   * @return {array}
   */
  function multiply(m, x) {
    var fm = format(m);
    var fx = format(x);
    var product = [];

    for (var i = 0; i < 4; i++) {
      var row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]];
      for (var j = 0; j < 4; j++) {
        var k = j * 4;
        var col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]];
        var result = row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];

        product[i + k] = result;
      }
    }

    return product
  }

  /**
   * Returns a 4x4 matrix describing perspective.
   *
   * @param  {number} distance - Measured in pixels.
   * @return {array}
   */
  function perspective(distance) {
    var matrix = identity();
    matrix[11] = -1 / distance;
    return matrix
  }

  /**
   * Returns a 4x4 matrix describing Y-axis rotation.
   *
   * @param  {number} angle - Measured in degrees.
   * @return {array}
   */
  function rotateY(angle) {
    var theta = (Math.PI / 180) * angle;
    var matrix = identity();

    matrix[0] = matrix[10] = Math.cos(theta);
    matrix[2] = matrix[8] = Math.sin(theta);
    matrix[2] *= -1;

    return matrix
  }

  /**
   * Returns a CSS Transform property value equivalent to the source matrix.
   *
   * @param  {array} source - Accepts both short and long form matrices.
   * @return {string}
   */
  function toString(source) {
    return ("matrix3d(" + (format(source).join(', ')) + ")")
  }

  /**
   * Returns a 4x4 matrix describing 2D translation. The first
   * argument defines X-axis translation, and an optional second
   * argument defines Y-axis translation.
   *
   * @param  {number} distanceX   - Measured in pixels.
   * @param  {number} [distanceY] - Measured in pixels.
   * @return {array}
   */
  function translate(distanceX, distanceY) {
    var matrix = identity();
    matrix[12] = distanceX;

    if (distanceY) {
      matrix[13] = distanceY;
    }

    return matrix
  }

  /**
   * Returns a 4x4 matrix describing 3D translation. The first
   * argument defines X-axis translation, the second argument defines Y-axis
   * translation, and the third argument defines Z-axis translation.
   *
   * @param  {number} distanceX - Measured in pixels.
   * @param  {number} distanceY - Measured in pixels.
   * @param  {number} distanceZ - Measured in pixels.
   * @return {array}
   */
  function translate3d(distanceX, distanceY, distanceZ) {
    var matrix = identity();
    if (distanceX !== undefined && distanceY !== undefined && distanceZ !== undefined) {
      matrix[12] = distanceX;
      matrix[13] = distanceY;
      matrix[14] = distanceZ;
    }
    return matrix
  }

  var Matrix;

  var Matrix$1 = Matrix = /*@__PURE__*/(function () {
    function Matrix(arg) {
      if (arg) {
        if (arg.m) {
          this.m = [].concat( arg.m );
        } else {
          this.m = [].concat( arg );
        }
      } else {
        this.m = identity();
      }
    }

    Matrix.prototype.clone = function clone () {
      return new Matrix(this);
    };

    Matrix.prototype.multiply = function multiply$1 (m) {
      return this.m = multiply(this.m, m);
    };

    Matrix.prototype.perspective = function perspective$1 (d) {
      return this.multiply(perspective(d));
    };

    Matrix.prototype.transformX = function transformX (x) {
      return (x * this.m[0] + this.m[12]) / (x * this.m[3] + this.m[15]);
    };

    Matrix.prototype.translate = function translate$1 (x, y) {
      return this.multiply(translate(x, y));
    };

    Matrix.prototype.translate3d = function translate3d$1 (x, y, z) {
      return this.multiply(translate3d(x, y, z));
    };

    Matrix.prototype.rotateY = function rotateY$1 (deg) {
      return this.multiply(rotateY(deg));
    };

    Matrix.prototype.toString = function toString$1 () {
      return toString(this.m);
    };

    return Matrix;
  }());

  var IE, easeIn, easeInOut, easeOut;

  easeIn = function(x) {
    return Math.pow(x, 2);
  };

  easeOut = function(x) {
    return 1 - easeIn(1 - x);
  };

  easeInOut = function(x) {
    if (x < 0.5) {
      return easeIn(x * 2) / 2;
    } else {
      return 0.5 + easeOut((x - 0.5) * 2) / 2;
    }
  };

  IE = /Trident/.test(navigator.userAgent);

  var script = {
    props: {
      enabled: {
        type: Boolean,
        required: true
      },
      pages: {
        type: Array,
        required: true
      },
      pagesHiRes: {
        type: Array,
        default: function() {
          return [];
        }
      },
      flipDuration: {
        type: Number,
        default: 1000
      },
      zoomDuration: {
        type: Number,
        default: 500
      },
      zooms: {
        type: Array,
        default: function() {
          return [1, 2, 4];
        }
      },
      perspective: {
        type: Number,
        default: 2400
      },
      nPolygons: {
        type: Number,
        default: 10
      },
      ambient: {
        type: Number,
        default: 0.4
      },
      gloss: {
        type: Number,
        default: 0.6
      },
      swipeMin: {
        type: Number,
        default: 3
      },
      singlePage: {
        type: Boolean,
        default: false
      },
      forwardDirection: {
        validator: function(val) {
          return val === 'right' || val === 'left';
        },
        default: 'right'
      },
      centering: {
        type: Boolean,
        default: true
      },
      startPage: {
        type: Number,
        default: null
      }
    },
    data: function() {
      return {
        viewWidth: 0,
        viewHeight: 0,
        imageWidth: null,
        imageHeight: null,
        displayedPages: 1,
        nImageLoad: 0,
        nImageLoadTrigger: 0,
        imageLoadCallback: null,
        currentPage: 0,
        firstPage: 0,
        secondPage: 1,
        zoomIndex: 0,
        zoom: 1,
        zooming: false,
        touchStartX: null,
        touchStartY: null,
        maxMove: 0,
        activeCursor: null,
        hasTouchEvents: false,
        hasPointerEvents: false,
        minX: 2e308,
        maxX: -2e308,
        preloadedImages: {},
        flip: {
          progress: 0,
          direction: null,
          frontImage: null,
          backImage: null,
          auto: false,
          opacity: 1
        },
        currentCenterOffset: null,
        animatingCenter: false,
        startScrollLeft: 0,
        startScrollTop: 0,
        scrollLeft: 0,
        scrollTop: 0
      };
    },
    computed: {
      canFlipLeft: function() {
        if (this.forwardDirection === 'left') {
          return this.canGoForward;
        } else {
          return this.canGoBack;
        }
      },
      canFlipRight: function() {
        if (this.forwardDirection === 'right') {
          return this.canGoForward;
        } else {
          return this.canGoBack;
        }
      },
      canZoomIn: function() {
        return !this.zooming && this.zoomIndex < this.zooms_.length - 1;
      },
      canZoomOut: function() {
        return !this.zooming && this.zoomIndex > 0;
      },
      numPages: function() {
        if (this.pages[0] === null) {
          return this.pages.length - 1;
        } else {
          return this.pages.length;
        }
      },
      page: function() {
        if (this.pages[0] !== null) {
          return this.currentPage + 1;
        } else {
          return Math.max(1, this.currentPage);
        }
      },
      zooms_: function() {
        return this.zooms || [1];
      },
      canGoForward: function() {
        return !this.flip.direction && this.currentPage < this.pages.length - this.displayedPages;
      },
      canGoBack: function() {
        return !this.flip.direction && this.currentPage >= this.displayedPages && !(this.displayedPages === 1 && !this.pageUrl(this.firstPage - 1));
      },
      leftPage: function() {
        if (this.forwardDirection === 'right' || this.displayedPages === 1) {
          return this.firstPage;
        } else {
          return this.secondPage;
        }
      },
      rightPage: function() {
        if (this.forwardDirection === 'left') {
          return this.firstPage;
        } else {
          return this.secondPage;
        }
      },
      showLeftPage: function() {
        return this.pageUrl(this.leftPage);
      },
      showRightPage: function() {
        return this.pageUrl(this.rightPage) && this.displayedPages === 2;
      },
      cursor: function() {
        if (this.activeCursor) {
          return this.activeCursor;
        } else if (IE) {
          return 'auto';
        } else if (this.canZoomIn) {
          return 'zoom-in';
        } else if (this.canZoomOut) {
          return 'zoom-out';
        } else {
          return 'grab';
        }
      },
      pageScale: function() {
        var scale, vw, xScale, yScale;
        vw = this.viewWidth / this.displayedPages;
        xScale = vw / this.imageWidth;
        yScale = this.viewHeight / this.imageHeight;
        scale = xScale < yScale ? xScale : yScale;
        if (scale < 1) {
          return scale;
        } else {
          return 1;
        }
      },
      pageWidth: function() {
        return Math.round(this.imageWidth * this.pageScale);
      },
      pageHeight: function() {
        return Math.round(this.imageHeight * this.pageScale);
      },
      xMargin: function() {
        return (this.viewWidth - this.pageWidth * this.displayedPages) / 2;
      },
      yMargin: function() {
        return (this.viewHeight - this.pageHeight) / 2;
      },
      polygonWidth: function() {
        var w;
        w = this.pageWidth / this.nPolygons;
        w = Math.ceil(w + 1 / this.zoom);
        return w + 'px';
      },
      polygonHeight: function() {
        return this.pageHeight + 'px';
      },
      polygonBgSize: function() {
        return ((this.pageWidth) + "px " + (this.pageHeight) + "px");
      },
      polygonArray: function() {
        return this.makePolygonArray('front').concat(this.makePolygonArray('back'));
      },
      boundingLeft: function() {
        var x;
        if (this.displayedPages === 1) {
          return this.xMargin;
        } else {
          x = this.pageUrl(this.leftPage) ? this.xMargin : this.viewWidth / 2;
          if (x < this.minX) {
            return x;
          } else {
            return this.minX;
          }
        }
      },
      boundingRight: function() {
        var x;
        if (this.displayedPages === 1) {
          return this.viewWidth - this.xMargin;
        } else {
          x = this.pageUrl(this.rightPage) ? this.viewWidth - this.xMargin : this.viewWidth / 2;
          if (x > this.maxX) {
            return x;
          } else {
            return this.maxX;
          }
        }
      },
      centerOffset: function() {
        var retval;
        retval = this.centering ? Math.round(this.viewWidth / 2 - (this.boundingLeft + this.boundingRight) / 2) : 0;
        if (this.currentCenterOffset === null && this.imageWidth !== null) {
          this.currentCenterOffset = retval;
        }
        return retval;
      },
      centerOffsetSmoothed: function() {
        return Math.round(this.currentCenterOffset);
      },
      dragToScroll: function() {
        return !this.hasTouchEvents;
      },
      scrollLeftMin: function() {
        var w;
        w = (this.boundingRight - this.boundingLeft) * this.zoom;
        if (w < this.viewWidth) {
          return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
        } else {
          return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom;
        }
      },
      scrollLeftMax: function() {
        var w;
        w = (this.boundingRight - this.boundingLeft) * this.zoom;
        if (w < this.viewWidth) {
          return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
        } else {
          return (this.boundingRight + this.centerOffsetSmoothed) * this.zoom - this.viewWidth;
        }
      },
      scrollTopMin: function() {
        var h;
        h = this.pageHeight * this.zoom;
        if (h < this.viewHeight) {
          return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
        } else {
          return this.yMargin * this.zoom;
        }
      },
      scrollTopMax: function() {
        var h;
        h = this.pageHeight * this.zoom;
        if (h < this.viewHeight) {
          return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
        } else {
          return (this.yMargin + this.pageHeight) * this.zoom - this.viewHeight;
        }
      },
      scrollLeftLimited: function() {
        return Math.min(this.scrollLeftMax, Math.max(this.scrollLeftMin, this.scrollLeft));
      },
      scrollTopLimited: function() {
        return Math.min(this.scrollTopMax, Math.max(this.scrollTopMin, this.scrollTop));
      }
    },
    mounted: function() {
      window.addEventListener('resize', this.onResize, {
        passive: true
      });
      this.onResize();
      this.preloadImages();
      this.zoom = this.zooms_[0];
      this.goToPage(this.startPage);
      return this.$emit('on-mounted', this);
    },
    beforeDestroy: function() {
      return window.removeEventListener('resize', this.onResize, {
        passive: true
      });
    },
    methods: {
      onResize: function() {
        var viewport;
        viewport = this.$refs.viewport;
        if (!viewport) {
          return;
        }
        this.viewWidth = viewport.clientWidth;
        this.viewHeight = viewport.clientHeight;
        this.displayedPages = this.viewWidth > this.viewHeight && !this.singlePage ? 2 : 1;
        if (this.displayedPages === 2) {
          this.currentPage &= ~1;
        }
        this.fixFirstPage();
        this.minX = 2e308;
        return this.maxX = -2e308;
      },
      fixFirstPage: function() {
        if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
          return this.currentPage++;
        }
      },
      pageUrl: function(page, hiRes) {
        if ( hiRes === void 0 ) hiRes = false;

        var url;
        if (hiRes && this.zoom > 1 && !this.zooming) {
          url = this.pagesHiRes[page];
          if (url) {
            return url;
          }
        }
        return this.pages[page] || null;
      },
      flipLeft: function() {
        if (!this.canFlipLeft) {
          return;
        }
        return this.flipStart('left', true);
      },
      flipRight: function() {
        if (!this.canFlipRight) {
          return;
        }
        return this.flipStart('right', true);
      },
      makePolygonArray: function(face) {
        var bgImg, bgPos, dRadian, dRotate, direction, i, image, j, lighting, m, originRight, pageMatrix, pageRotation, pageX, polygonWidth, progress, rad, radian, radius, ref, results, rotate, theta, x, x0, x1, z;
        if (!this.flip.direction) {
          return [];
        }
        progress = this.flip.progress;
        direction = this.flip.direction;
        if (this.displayedPages === 1 && direction !== this.forwardDirection) {
          progress = 1 - progress;
          direction = this.forwardDirection;
        }
        this.flip.opacity = this.displayedPages === 1 && progress > .7 ? 1 - (progress - .7) / .3 : 1;
        image = face === 'front' ? this.flip.frontImage : this.flip.backImage;
        bgImg = image && ("url('" + image + "')");
        polygonWidth = this.pageWidth / this.nPolygons;
        pageX = this.xMargin;
        originRight = false;
        if (this.displayedPages === 1) {
          if (this.forwardDirection === 'right') {
            if (face === 'back') {
              originRight = true;
              pageX = this.xMargin - this.pageWidth;
            }
          } else {
            if (direction === 'left') {
              if (face === 'back') {
                pageX = this.pageWidth - this.xMargin;
              } else {
                originRight = true;
              }
            } else {
              if (face === 'front') {
                pageX = this.pageWidth - this.xMargin;
              } else {
                originRight = true;
              }
            }
          }
        } else {
          if (direction === 'left') {
            if (face === 'back') {
              pageX = this.viewWidth / 2;
            } else {
              originRight = true;
            }
          } else {
            if (face === 'front') {
              pageX = this.viewWidth / 2;
            } else {
              originRight = true;
            }
          }
        }
        pageMatrix = new Matrix$1();
        pageMatrix.translate(this.viewWidth / 2);
        pageMatrix.perspective(this.perspective);
        pageMatrix.translate(-this.viewWidth / 2);
        pageMatrix.translate(pageX, this.yMargin);
        pageRotation = 0;
        if (progress > 0.5) {
          pageRotation = -(progress - 0.5) * 2 * 180;
        }
        if (direction === 'left') {
          pageRotation = -pageRotation;
        }
        if (face === 'back') {
          pageRotation += 180;
        }
        if (pageRotation) {
          if (originRight) {
            pageMatrix.translate(this.pageWidth);
          }
          pageMatrix.rotateY(pageRotation);
          if (originRight) {
            pageMatrix.translate(-this.pageWidth);
          }
        }
        if (progress < 0.5) {
          theta = progress * 2 * Math.PI;
        } else {
          theta = (1 - (progress - 0.5) * 2) * Math.PI;
        }
        if (theta === 0) {
          theta = 1e-9;
        }
        radius = this.pageWidth / theta;
        radian = 0;
        dRadian = theta / this.nPolygons;
        rotate = dRadian / 2 / Math.PI * 180;
        dRotate = dRadian / Math.PI * 180;
        if (originRight) {
          rotate = -theta / Math.PI * 180 + dRotate / 2;
        }
        if (face === 'back') {
          rotate = -rotate;
          dRotate = -dRotate;
        }
        this.minX = 2e308;
        this.maxX = -2e308;
        results = [];
        for (i = j = 0, ref = this.nPolygons; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
          bgPos = (i / (this.nPolygons - 1) * 100) + "% 0px";
          m = pageMatrix.clone();
          rad = originRight ? theta - radian : radian;
          x = Math.sin(rad) * radius;
          if (originRight) {
            x = this.pageWidth - x;
          }
          z = (1 - Math.cos(rad)) * radius;
          if (face === 'back') {
            z = -z;
          }
          m.translate3d(x, 0, z);
          m.rotateY(-rotate);
          x0 = m.transformX(0);
          x1 = m.transformX(polygonWidth);
          this.maxX = Math.max(Math.max(x0, x1), this.maxX);
          this.minX = Math.min(Math.min(x0, x1), this.minX);
          lighting = this.computeLighting(pageRotation - rotate, dRotate);
          radian += dRadian;
          rotate += dRotate;
          results.push([face + i, bgImg, lighting, bgPos, m.toString(), Math.abs(Math.round(z))]);
        }
        return results;
      },
      computeLighting: function(rot, dRotate) {
        var DEG, POW, blackness, diffuse, gradients, lightingPoints, specular;
        gradients = [];
        lightingPoints = [-0.5, -0.25, 0, 0.25, 0.5];
        if (this.ambient < 1) {
          blackness = 1 - this.ambient;
          diffuse = lightingPoints.map(function (d) {
            return (1 - Math.cos((rot - dRotate * d) / 180 * Math.PI)) * blackness;
          });
          gradients.push(("linear-gradient(to right,\n  rgba(0, 0, 0, " + (diffuse[0]) + "),\n  rgba(0, 0, 0, " + (diffuse[1]) + ") 25%,\n  rgba(0, 0, 0, " + (diffuse[2]) + ") 50%,\n  rgba(0, 0, 0, " + (diffuse[3]) + ") 75%,\n  rgba(0, 0, 0, " + (diffuse[4]) + "))"));
        }
        if (this.gloss > 0 && !IE) {
          DEG = 30;
          POW = 200;
          specular = lightingPoints.map(function (d) {
            return Math.max(Math.pow( Math.cos((rot + DEG - dRotate * d) / 180 * Math.PI), POW ), Math.pow( Math.cos((rot - DEG - dRotate * d) / 180 * Math.PI), POW ));
          });
          gradients.push(("linear-gradient(to right,\n  rgba(255, 255, 255, " + (specular[0] * this.gloss) + "),\n  rgba(255, 255, 255, " + (specular[1] * this.gloss) + ") 25%,\n  rgba(255, 255, 255, " + (specular[2] * this.gloss) + ") 50%,\n  rgba(255, 255, 255, " + (specular[3] * this.gloss) + ") 75%,\n  rgba(255, 255, 255, " + (specular[4] * this.gloss) + "))"));
        }
        return gradients.join(',');
      },
      flipStart: function(direction, auto) {
        var this$1 = this;

        if (direction !== this.forwardDirection) {
          if (this.displayedPages === 1) {
            this.flip.frontImage = this.pageUrl(this.currentPage - 1);
            this.flip.backImage = null;
          } else {
            this.flip.frontImage = this.pageUrl(this.firstPage);
            this.flip.backImage = this.pageUrl(this.currentPage - this.displayedPages + 1);
          }
        } else {
          if (this.displayedPages === 1) {
            this.flip.frontImage = this.pageUrl(this.currentPage);
            this.flip.backImage = null;
          } else {
            this.flip.frontImage = this.pageUrl(this.secondPage);
            this.flip.backImage = this.pageUrl(this.currentPage + this.displayedPages);
          }
        }
        this.flip.direction = direction;
        this.flip.progress = 0;
        return requestAnimationFrame(function () {
          return requestAnimationFrame(function () {
            if (this$1.flip.direction !== this$1.forwardDirection) {
              if (this$1.displayedPages === 2) {
                this$1.firstPage = this$1.currentPage - this$1.displayedPages;
              }
            } else {
              if (this$1.displayedPages === 1) {
                this$1.firstPage = this$1.currentPage + this$1.displayedPages;
              } else {
                this$1.secondPage = this$1.currentPage + 1 + this$1.displayedPages;
              }
            }
            if (auto) {
              return this$1.flipAuto(true);
            }
          });
        });
      },
      flipAuto: function(ease) {
        var this$1 = this;

        var animate, duration, startRatio, t0;
        t0 = Date.now();
        duration = this.flipDuration * (1 - this.flip.progress);
        startRatio = this.flip.progress;
        this.flip.auto = true;
        this.$emit(("flip-" + (this.flip.direction) + "-start"), this.page);
        animate = function () {
          return requestAnimationFrame(function () {
            var ratio, t;
            t = Date.now() - t0;
            ratio = startRatio + t / duration;
            if (ratio > 1) {
              ratio = 1;
            }
            this$1.flip.progress = ease ? easeInOut(ratio) : ratio;
            if (ratio < 1) {
              return animate();
            } else {
              if (this$1.flip.direction !== this$1.forwardDirection) {
                this$1.currentPage -= this$1.displayedPages;
              } else {
                this$1.currentPage += this$1.displayedPages;
              }
              this$1.$emit(("flip-" + (this$1.flip.direction) + "-end"), this$1.page);
              if (this$1.displayedPages === 1 && this$1.flip.direction === this$1.forwardDirection) {
                this$1.flip.direction = null;
              } else {
                this$1.onImageLoad(1, function () {
                  return this$1.flip.direction = null;
                });
              }
              return this$1.flip.auto = false;
            }
          });
        };
        return animate();
      },
      flipRevert: function() {
        var this$1 = this;

        var animate, duration, startRatio, t0;
        t0 = Date.now();
        duration = this.flipDuration * this.flip.progress;
        startRatio = this.flip.progress;
        this.flip.auto = true;
        animate = function () {
          return requestAnimationFrame(function () {
            var ratio, t;
            t = Date.now() - t0;
            ratio = startRatio - startRatio * t / duration;
            if (ratio < 0) {
              ratio = 0;
            }
            this$1.flip.progress = ratio;
            if (ratio > 0) {
              return animate();
            } else {
              this$1.firstPage = this$1.currentPage;
              this$1.secondPage = this$1.currentPage + 1;
              if (this$1.displayedPages === 1 && this$1.flip.direction !== this$1.forwardDirection) {
                this$1.flip.direction = null;
              } else {
                this$1.onImageLoad(1, function () {
                  return this$1.flip.direction = null;
                });
              }
              return this$1.flip.auto = false;
            }
          });
        };
        return animate();
      },
      onImageLoad: function(trigger, cb) {
        this.nImageLoad = 0;
        this.nImageLoadTrigger = trigger;
        return this.imageLoadCallback = cb;
      },
      didLoadImage: function(ev) {
        if (this.imageWidth === null) {
          this.imageWidth = (ev.target || ev.path[0]).naturalWidth;
          this.imageHeight = (ev.target || ev.path[0]).naturalHeight;
        }
        if (!this.imageLoadCallback) {
          return;
        }
        if (++this.nImageLoad >= this.nImageLoadTrigger) {
          this.imageLoadCallback();
          return this.imageLoadCallback = null;
        }
      },
      zoomIn: function() {
        if (!this.canZoomIn) {
          return;
        }
        this.zoomIndex += 1;
        return this.zoomTo(this.zooms_[this.zoomIndex]);
      },
      zoomOut: function() {
        if (!this.canZoomOut) {
          return;
        }
        this.zoomIndex -= 1;
        return this.zoomTo(this.zooms_[this.zoomIndex]);
      },
      zoomTo: function(zoom, fixedX, fixedY) {
        var this$1 = this;

        var animate, containerFixedX, containerFixedY, end, endX, endY, start, startX, startY, t0, viewport;
        start = this.zoom;
        end = zoom;
        viewport = this.$refs.viewport;
        startX = viewport.scrollLeft;
        startY = viewport.scrollTop;
        fixedX || (fixedX = viewport.clientWidth / 2);
        fixedY || (fixedY = viewport.clientHeight / 2);
        containerFixedX = fixedX + startX;
        containerFixedY = fixedY + startY;
        endX = containerFixedX / start * end - fixedX;
        endY = containerFixedY / start * end - fixedY;
        t0 = Date.now();
        this.zooming = true;
        this.$emit('zoom-start', zoom);
        animate = function () {
          return requestAnimationFrame(function () {
            var ratio, t;
            t = Date.now() - t0;
            ratio = t / this$1.zoomDuration;
            if (ratio > 1 || IE) {
              ratio = 1;
            }
            ratio = easeInOut(ratio);
            this$1.zoom = start + (end - start) * ratio;
            this$1.scrollLeft = startX + (endX - startX) * ratio;
            this$1.scrollTop = startY + (endY - startY) * ratio;
            if (t < this$1.zoomDuration) {
              return animate();
            } else {
              this$1.$emit('zoom-end', zoom);
              this$1.zooming = false;
              this$1.zoom = zoom;
              this$1.scrollLeft = endX;
              return this$1.scrollTop = endY;
            }
          });
        };
        animate();
        if (end > 1) {
          return this.preloadImages(true);
        }
      },
      zoomAt: function(touch) {
        var rect, x, y;
        rect = this.$refs.viewport.getBoundingClientRect();
        x = touch.pageX - rect.left;
        y = touch.pageY - rect.top;
        this.zoomIndex = (this.zoomIndex + 1) % this.zooms_.length;
        return this.zoomTo(this.zooms_[this.zoomIndex], x, y);
      },
      swipeStart: function(touch) {
        return;
      },
      swipeMove: function(touch) {
        var x, y;
        if (this.touchStartX == null) {
          return;
        }
        x = touch.pageX - this.touchStartX;
        y = touch.pageY - this.touchStartY;
        this.maxMove = Math.max(this.maxMove, Math.abs(x));
        this.maxMove = Math.max(this.maxMove, Math.abs(y));
        if (this.zoom > 1) {
          if (this.dragToScroll) {
            this.dragScroll(x, y);
          }
          return;
        }
        if (Math.abs(y) > Math.abs(x)) {
          return;
        }
        this.activeCursor = 'grabbing';
        if (x > 0) {
          if (this.flip.direction === null && this.canFlipLeft && x >= this.swipeMin) {
            this.flipStart('left', false);
          }
          if (this.flip.direction === 'left') {
            this.flip.progress = x / this.pageWidth;
            if (this.flip.progress > 1) {
              this.flip.progress = 1;
            }
          }
        } else {
          if (this.flip.direction === null && this.canFlipRight && x <= -this.swipeMin) {
            this.flipStart('right', false);
          }
          if (this.flip.direction === 'right') {
            this.flip.progress = -x / this.pageWidth;
            if (this.flip.progress > 1) {
              this.flip.progress = 1;
            }
          }
        }
        return true;
      },
      swipeEnd: function(touch) {
        if (this.touchStartX == null) {
          return;
        }
        if (this.maxMove < this.swipeMin) {
          this.zoomAt(touch);
        }
        if (this.flip.direction !== null && !this.flip.auto) {
          if (this.flip.progress > 1 / 4) {
            this.flipAuto(false);
          } else {
            this.flipRevert();
          }
        }
        this.touchStartX = null;
        return this.activeCursor = null;
      },
      onTouchStart: function(ev) {
        this.hasTouchEvents = true;
        return this.swipeStart(ev.changedTouches[0]);
      },
      onTouchMove: function(ev) {
        if (this.swipeMove(ev.changedTouches[0])) {
          if (ev.cancelable) {
            return ev.preventDefault();
          }
        }
      },
      onTouchEnd: function(ev) {
        return this.swipeEnd(ev.changedTouches[0]);
      },
      onPointerDown: function(ev) {
        this.hasPointerEvents = true;
        if (this.hasTouchEvents) {
          return;
        }
        if (ev.which && ev.which !== 1) { // Ignore right-click
          return;
        }
        this.swipeStart(ev);
        try {
          return ev.target.setPointerCapture(ev.pointerId);
        } catch (error) {

        }
      },
      onPointerMove: function(ev) {
        if (!this.hasTouchEvents) {
          return this.swipeMove(ev);
        }
      },
      onPointerUp: function(ev) {
        if (this.hasTouchEvents) {
          return;
        }
        this.swipeEnd(ev);
        try {
          return ev.target.releasePointerCapture(ev.pointerId);
        } catch (error) {

        }
      },
      onMouseDown: function(ev) {
        if (this.hasTouchEvents || this.hasPointerEvents) {
          return;
        }
        if (ev.which && ev.which !== 1) { // Ignore right-click
          return;
        }
        return this.swipeStart(ev);
      },
      onMouseMove: function(ev) {
        if (!(this.hasTouchEvents || this.hasPointerEvents)) {
          return this.swipeMove(ev);
        }
      },
      onMouseUp: function(ev) {
        if (!(this.hasTouchEvents || this.hasPointerEvents)) {
          return this.swipeEnd(ev);
        }
      },
      dragScroll: function(x, y) {
        this.scrollLeft = this.startScrollLeft - x;
        return this.scrollTop = this.startScrollTop - y;
      },
      onWheel: function(ev) {
        if (this.zoom > 1 && this.dragToScroll) {
          this.scrollLeft = this.$refs.viewport.scrollLeft + ev.deltaX;
          this.scrollTop = this.$refs.viewport.scrollTop + ev.deltaY;
          if (ev.cancelable) {
            return ev.preventDefault();
          }
        }
      },
      preloadImages: function(hiRes) {
        if ( hiRes === void 0 ) hiRes = false;

        var i, img, j, k, ref, ref1, ref2, ref3, url;
        if (Object.keys(this.preloadedImages).length >= 10) {
          this.preloadedImages = {};
        }
        for (i = j = ref = this.currentPage - 3, ref1 = this.currentPage + 3; (ref <= ref1 ? j <= ref1 : j >= ref1); i = ref <= ref1 ? ++j : --j) {
          url = this.pageUrl(i);
          if (url) {
            if (!this.preloadedImages[url]) {
              img = new Image();
              img.src = url;
              this.preloadedImages[url] = img;
            }
          }
        }
        if (hiRes) {
          for (i = k = ref2 = this.currentPage, ref3 = this.currentPage + this.displayedPages; (ref2 <= ref3 ? k < ref3 : k > ref3); i = ref2 <= ref3 ? ++k : --k) {
            url = this.pagesHiRes[i];
            if (url) {
              if (!this.preloadedImages[url]) {
                img = new Image();
                img.src = url;
                this.preloadedImages[url] = img;
              }
            }
          }
        }
      },
      goToPage: function(p) {
        if (p === null || p === this.page) {
          return;
        }
        if (this.pages[0] === null) {
          if (this.displayedPages === 2 && p === 1) {
            this.currentPage = 0;
          } else {
            this.currentPage = p;
          }
        } else {
          this.currentPage = p - 1;
        }
        this.minX = 2e308;
        this.maxX = -2e308;
        return this.currentCenterOffset = this.centerOffset;
      }
    },
    watch: {
      currentPage: function() {
        this.firstPage = this.currentPage;
        this.secondPage = this.currentPage + 1;
        return this.preloadImages();
      },
      centerOffset: function() {
        var this$1 = this;

        var animate;
        if (this.animatingCenter) {
          return;
        }
        animate = function () {
          return requestAnimationFrame(function () {
            var diff, rate;
            rate = 0.1;
            diff = this$1.centerOffset - this$1.currentCenterOffset;
            if (Math.abs(diff) < 0.5) {
              this$1.currentCenterOffset = this$1.centerOffset;
              return this$1.animatingCenter = false;
            } else {
              this$1.currentCenterOffset += diff * rate;
              return animate();
            }
          });
        };
        this.animatingCenter = true;
        return animate();
      },
      scrollLeftLimited: function(val) {
        var this$1 = this;

        if (IE) {
          return requestAnimationFrame(function () {
            return this$1.$refs.viewport.scrollLeft = val;
          });
        } else {
          return this.$refs.viewport.scrollLeft = val;
        }
      },
      scrollTopLimited: function(val) {
        var this$1 = this;

        if (IE) {
          return requestAnimationFrame(function () {
            return this$1.$refs.viewport.scrollTop = val;
          });
        } else {
          return this.$refs.viewport.scrollTop = val;
        }
      },
      pages: function(after, before) {
        this.fixFirstPage();
        if (!(before != null ? before.length : void 0) && (after != null ? after.length : void 0)) {
          if (this.startPage > 1 && after[0] === null) {
            return this.currentPage++;
          }
        }
      },
      startPage: function(p) {
        return this.goToPage(p);
      }
    }
  };

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
      if (typeof shadowMode !== 'boolean') {
          createInjectorSSR = createInjector;
          createInjector = shadowMode;
          shadowMode = false;
      }
      // Vue.extend constructor export interop.
      var options = typeof script === 'function' ? script.options : script;
      // render functions
      if (template && template.render) {
          options.render = template.render;
          options.staticRenderFns = template.staticRenderFns;
          options._compiled = true;
          // functional template
          if (isFunctionalTemplate) {
              options.functional = true;
          }
      }
      // scopedId
      if (scopeId) {
          options._scopeId = scopeId;
      }
      var hook;
      if (moduleIdentifier) {
          // server build
          hook = function (context) {
              // 2.3 injection
              context =
                  context || // cached call
                      (this.$vnode && this.$vnode.ssrContext) || // stateful
                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
              // 2.2 with runInNewContext: true
              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                  context = __VUE_SSR_CONTEXT__;
              }
              // inject component styles
              if (style) {
                  style.call(this, createInjectorSSR(context));
              }
              // register component module identifier for async chunk inference
              if (context && context._registeredComponents) {
                  context._registeredComponents.add(moduleIdentifier);
              }
          };
          // used by ssr in case component is cached and beforeCreate
          // never gets called
          options._ssrRegister = hook;
      }
      else if (style) {
          hook = shadowMode
              ? function (context) {
                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
              }
              : function (context) {
                  style.call(this, createInjector(context));
              };
      }
      if (hook) {
          if (options.functional) {
              // register for functional component in vue file
              var originalRender = options.render;
              options.render = function renderWithStyleInjection(h, context) {
                  hook.call(context);
                  return originalRender(h, context);
              };
          }
          else {
              // inject component registration as beforeCreate hook
              var existing = options.beforeCreate;
              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
      }
      return script;
  }

  var isOldIE = typeof navigator !== 'undefined' &&
      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
  function createInjector(context) {
      return function (id, style) { return addStyle(id, style); };
  }
  var HEAD;
  var styles = {};
  function addStyle(id, css) {
      var group = isOldIE ? css.media || 'default' : id;
      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
      if (!style.ids.has(id)) {
          style.ids.add(id);
          var code = css.source;
          if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                  '\n/*# sourceMappingURL=data:application/json;base64,' +
                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                      ' */';
          }
          if (!style.element) {
              style.element = document.createElement('style');
              style.element.type = 'text/css';
              if (css.media)
                  { style.element.setAttribute('media', css.media); }
              if (HEAD === undefined) {
                  HEAD = document.head || document.getElementsByTagName('head')[0];
              }
              HEAD.appendChild(style.element);
          }
          if ('styleSheet' in style.element) {
              style.styles.push(code);
              style.element.styleSheet.cssText = style.styles
                  .filter(Boolean)
                  .join('\n');
          }
          else {
              var index = style.ids.size - 1;
              var textNode = document.createTextNode(code);
              var nodes = style.element.childNodes;
              if (nodes[index])
                  { style.element.removeChild(nodes[index]); }
              if (nodes.length)
                  { style.element.insertBefore(textNode, nodes[index]); }
              else
                  { style.element.appendChild(textNode); }
          }
      }
  }

  /* script */
  var __vue_script__ = script;

  /* template */
  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default",null,null,{
      canFlipLeft: _vm.canFlipLeft,
      canFlipRight: _vm.canFlipRight,
      canZoomIn: _vm.canZoomIn,
      canZoomOut: _vm.canZoomOut,
      page: _vm.page,
      numPages: _vm.numPages,
      flipLeft: _vm.flipLeft,
      flipRight: _vm.flipRight,
      zoomIn: _vm.zoomIn,
      zoomOut: _vm.zoomOut
    }),_vm._v(" "),_c('div',{ref:"viewport",staticClass:"viewport",class:{
        zoom: _vm.zooming || _vm.zoom > 1,
        'drag-to-scroll': _vm.dragToScroll
      },style:({ cursor: _vm.cursor == 'grabbing' ? 'grabbing' : 'auto' }),on:{"touchmove":_vm.onTouchMove,"pointermove":_vm.onPointerMove,"mousemove":_vm.onMouseMove,"touchend":_vm.onTouchEnd,"touchcancel":_vm.onTouchEnd,"pointerup":_vm.onPointerUp,"pointercancel":_vm.onPointerUp,"mouseup":_vm.onMouseUp,"wheel":_vm.onWheel}},[_c('div',{staticClass:"book-container",style:({ transform: ("scale(" + _vm.zoom + ")"), })},[_c('div',{style:({ transform: ("translateX(" + _vm.centerOffsetSmoothed + "px)") })},[(_vm.showLeftPage)?_c('img',{staticClass:"page fixed",style:({
              width: _vm.pageWidth + 'px',
              height: _vm.pageHeight + 'px',
              left: _vm.xMargin + 'px',
              top: _vm.yMargin + 'px'
            }),attrs:{"src":_vm.pageUrl(_vm.leftPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),(_vm.showRightPage)?_c('img',{staticClass:"page fixed",style:({
              width: _vm.pageWidth + 'px',
              height: _vm.pageHeight + 'px',
              left: _vm.viewWidth / 2 + 'px',
              top: _vm.yMargin + 'px'
            }),attrs:{"src":_vm.pageUrl(_vm.rightPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),_c('div',{style:({ opacity: _vm.flip.opacity })},_vm._l((_vm.polygonArray),function(ref){
              var key = ref[0];
              var bgImage = ref[1];
              var lighting = ref[2];
              var bgPos = ref[3];
              var transform = ref[4];
              var z = ref[5];
  return _c('div',{key:key,staticClass:"polygon",class:{ blank: !bgImage },style:({
                backgroundImage: bgImage,
                backgroundSize: _vm.polygonBgSize,
                backgroundPosition: bgPos,
                width: _vm.polygonWidth,
                height: _vm.polygonHeight,
                transform: transform,
                zIndex: z,
              })},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(lighting.length),expression:"lighting.length"}],staticClass:"lighting",style:({ backgroundImage: lighting })})])}),0),_vm._v(" "),_c('div',{staticClass:"bounding-box",style:({
              left: _vm.boundingLeft + 'px',
              top: _vm.yMargin + 'px',
              width: _vm.boundingRight - _vm.boundingLeft + 'px',
              height: _vm.pageHeight + 'px',
              cursor: _vm.cursor
            }),on:{"touchstart":_vm.onTouchStart,"pointerdown":_vm.onPointerDown,"mousedown":_vm.onMouseDown}})])])])],2)};
  var __vue_staticRenderFns__ = [];

    /* style */
    var __vue_inject_styles__ = function (inject) {
      if (!inject) { return }
      inject("data-v-77b9888e_0", { source: ".viewport[data-v-77b9888e]{-webkit-overflow-scrolling:touch;width:100%;height:95%}.viewport.zoom[data-v-77b9888e]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-77b9888e]{overflow:hidden}.book-container[data-v-77b9888e]{position:relative;width:100%;height:95%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-77b9888e]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-77b9888e]{left:0}.click-to-flip.right[data-v-77b9888e]{right:0}.bounding-box[data-v-77b9888e]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-77b9888e]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-77b9888e]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-77b9888e]{background-color:#ddd}.polygon .lighting[data-v-77b9888e]{width:100%;height:100%}", map: undefined, media: undefined });

    };
    /* scoped */
    var __vue_scope_id__ = "data-v-77b9888e";
    /* module identifier */
    var __vue_module_identifier__ = undefined;
    /* functional template */
    var __vue_is_functional_template__ = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    var __vue_component__ = normalizeComponent(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
      __vue_scope_id__,
      __vue_is_functional_template__,
      __vue_module_identifier__,
      false,
      createInjector,
      undefined,
      undefined
    );

  Vue.component('flipbook', __vue_component__);

}());