epubjs/lib/managers/views/inline.js

Parse and Render Epubs

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _eventEmitter = _interopRequireDefault(require("event-emitter"));

var _core = require("../../utils/core");

var _epubcfi = _interopRequireDefault(require("../../epubcfi"));

var _contents = _interopRequireDefault(require("../../contents"));

var _constants = require("../../utils/constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class InlineView {
  constructor(section, options) {
    this.settings = (0, _core.extend)({
      ignoreClass: "",
      axis: "vertical",
      width: 0,
      height: 0,
      layout: undefined,
      globalLayoutProperties: {}
    }, options || {});
    this.id = "epubjs-view:" + (0, _core.uuid)();
    this.section = section;
    this.index = section.index;
    this.element = this.container(this.settings.axis);
    this.added = false;
    this.displayed = false;
    this.rendered = false;
    this.width = this.settings.width;
    this.height = this.settings.height;
    this.fixedWidth = 0;
    this.fixedHeight = 0; // Blank Cfi for Parsing

    this.epubcfi = new _epubcfi.default();
    this.layout = this.settings.layout; // Dom events to listen for
    // this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
  }

  container(axis) {
    var element = document.createElement("div");
    element.classList.add("epub-view"); // if(this.settings.axis === "horizontal") {
    //   element.style.width = "auto";
    //   element.style.height = "0";
    // } else {
    //   element.style.width = "0";
    //   element.style.height = "auto";
    // }

    element.style.overflow = "hidden";

    if (axis && axis == "horizontal") {
      element.style.display = "inline-block";
    } else {
      element.style.display = "block";
    }

    return element;
  }

  create() {
    if (this.frame) {
      return this.frame;
    }

    if (!this.element) {
      this.element = this.createContainer();
    }

    this.frame = document.createElement("div");
    this.frame.id = this.id;
    this.frame.style.overflow = "hidden";
    this.frame.style.wordSpacing = "initial";
    this.frame.style.lineHeight = "initial";
    this.resizing = true; // this.frame.style.display = "none";

    this.element.style.visibility = "hidden";
    this.frame.style.visibility = "hidden";

    if (this.settings.axis === "horizontal") {
      this.frame.style.width = "auto";
      this.frame.style.height = "0";
    } else {
      this.frame.style.width = "0";
      this.frame.style.height = "auto";
    }

    this._width = 0;
    this._height = 0;
    this.element.appendChild(this.frame);
    this.added = true;
    this.elementBounds = (0, _core.bounds)(this.element);
    return this.frame;
  }

  render(request, show) {
    // view.onLayout = this.layout.format.bind(this.layout);
    this.create(); // Fit to size of the container, apply padding

    this.size(); // Render Chain

    return this.section.render(request).then(function (contents) {
      return this.load(contents);
    }.bind(this)) // .then(function(doc){
    // 	return this.hooks.content.trigger(view, this);
    // }.bind(this))
    .then(function () {// this.settings.layout.format(view.contents);
      // return this.hooks.layout.trigger(view, this);
    }.bind(this)) // .then(function(){
    // 	return this.display();
    // }.bind(this))
    // .then(function(){
    // 	return this.hooks.render.trigger(view, this);
    // }.bind(this))
    .then(function () {
      // apply the layout function to the contents
      this.settings.layout.format(this.contents); // Expand the iframe to the full size of the content
      // this.expand();
      // Listen for events that require an expansion of the iframe

      this.addListeners();

      if (show !== false) {
        //this.q.enqueue(function(view){
        this.show(); //}, view);
      } // this.map = new Map(view, this.layout);
      //this.hooks.show.trigger(view, this);


      this.emit(_constants.EVENTS.VIEWS.RENDERED, this.section);
    }.bind(this)).catch(function (e) {
      this.emit(_constants.EVENTS.VIEWS.LOAD_ERROR, e);
    }.bind(this));
  } // Determine locks base on settings


  size(_width, _height) {
    var width = _width || this.settings.width;
    var height = _height || this.settings.height;

    if (this.layout.name === "pre-paginated") {
      // TODO: check if these are different than the size set in chapter
      this.lock("both", width, height);
    } else if (this.settings.axis === "horizontal") {
      this.lock("height", width, height);
    } else {
      this.lock("width", width, height);
    }
  } // Lock an axis to element dimensions, taking borders into account


  lock(what, width, height) {
    var elBorders = (0, _core.borders)(this.element);
    var iframeBorders;

    if (this.frame) {
      iframeBorders = (0, _core.borders)(this.frame);
    } else {
      iframeBorders = {
        width: 0,
        height: 0
      };
    }

    if (what == "width" && (0, _core.isNumber)(width)) {
      this.lockedWidth = width - elBorders.width - iframeBorders.width;
      this.resize(this.lockedWidth, false); //  width keeps ratio correct
    }

    if (what == "height" && (0, _core.isNumber)(height)) {
      this.lockedHeight = height - elBorders.height - iframeBorders.height;
      this.resize(false, this.lockedHeight);
    }

    if (what === "both" && (0, _core.isNumber)(width) && (0, _core.isNumber)(height)) {
      this.lockedWidth = width - elBorders.width - iframeBorders.width;
      this.lockedHeight = height - elBorders.height - iframeBorders.height;
      this.resize(this.lockedWidth, this.lockedHeight);
    }
  } // Resize a single axis based on content dimensions


  expand(force) {
    var width = this.lockedWidth;
    var height = this.lockedHeight;
    var textWidth, textHeight;
    if (!this.frame || this._expanding) return;
    this._expanding = true; // Expand Horizontally

    if (this.settings.axis === "horizontal") {
      width = this.contentWidth(textWidth);
    } // Expand Vertically
    else if (this.settings.axis === "vertical") {
      height = this.contentHeight(textHeight);
    } // Only Resize if dimensions have changed or
    // if Frame is still hidden, so needs reframing


    if (this._needsReframe || width != this._width || height != this._height) {
      this.resize(width, height);
    }

    this._expanding = false;
  }

  contentWidth(min) {
    return this.frame.scrollWidth;
  }

  contentHeight(min) {
    return this.frame.scrollHeight;
  }

  resize(width, height) {
    if (!this.frame) return;

    if ((0, _core.isNumber)(width)) {
      this.frame.style.width = width + "px";
      this._width = width;
    }

    if ((0, _core.isNumber)(height)) {
      this.frame.style.height = height + "px";
      this._height = height;
    }

    this.prevBounds = this.elementBounds;
    this.elementBounds = (0, _core.bounds)(this.element);
    let size = {
      width: this.elementBounds.width,
      height: this.elementBounds.height,
      widthDelta: this.elementBounds.width - this.prevBounds.width,
      heightDelta: this.elementBounds.height - this.prevBounds.height
    };
    this.onResize(this, size);
    this.emit(_constants.EVENTS.VIEWS.RESIZED, size);
  }

  load(contents) {
    var loading = new _core.defer();
    var loaded = loading.promise;
    var doc = (0, _core.parse)(contents, "text/html");
    var body = (0, _core.qs)(doc, "body");
    /*
    var srcs = doc.querySelectorAll("[src]");
    	Array.prototype.slice.call(srcs)
    	.forEach(function(item) {
    		var src = item.getAttribute("src");
    		var assetUri = URI(src);
    		var origin = assetUri.origin();
    		var absoluteUri;
    			if (!origin) {
    			absoluteUri = assetUri.absoluteTo(this.section.url);
    			item.src = absoluteUri;
    		}
    	}.bind(this));
    */

    this.frame.innerHTML = body.innerHTML;
    this.document = this.frame.ownerDocument;
    this.window = this.document.defaultView;
    this.contents = new _contents.default(this.document, this.frame);
    this.rendering = false;
    loading.resolve(this.contents);
    return loaded;
  }

  setLayout(layout) {
    this.layout = layout;
  }

  resizeListenters() {// Test size again
    // clearTimeout(this.expanding);
    // this.expanding = setTimeout(this.expand.bind(this), 350);
  }

  addListeners() {//TODO: Add content listeners for expanding
  }

  removeListeners(layoutFunc) {//TODO: remove content listeners for expanding
  }

  display(request) {
    var displayed = new _core.defer();

    if (!this.displayed) {
      this.render(request).then(function () {
        this.emit(_constants.EVENTS.VIEWS.DISPLAYED, this);
        this.onDisplayed(this);
        this.displayed = true;
        displayed.resolve(this);
      }.bind(this));
    } else {
      displayed.resolve(this);
    }

    return displayed.promise;
  }

  show() {
    this.element.style.visibility = "visible";

    if (this.frame) {
      this.frame.style.visibility = "visible";
    }

    this.emit(_constants.EVENTS.VIEWS.SHOWN, this);
  }

  hide() {
    // this.frame.style.display = "none";
    this.element.style.visibility = "hidden";
    this.frame.style.visibility = "hidden";
    this.stopExpanding = true;
    this.emit(_constants.EVENTS.VIEWS.HIDDEN, this);
  }

  position() {
    return this.element.getBoundingClientRect();
  }

  locationOf(target) {
    var parentPos = this.frame.getBoundingClientRect();
    var targetPos = this.contents.locationOf(target, this.settings.ignoreClass);
    return {
      "left": window.scrollX + parentPos.left + targetPos.left,
      "top": window.scrollY + parentPos.top + targetPos.top
    };
  }

  onDisplayed(view) {// Stub, override with a custom functions
  }

  onResize(view, e) {// Stub, override with a custom functions
  }

  bounds() {
    if (!this.elementBounds) {
      this.elementBounds = (0, _core.bounds)(this.element);
    }

    return this.elementBounds;
  }

  destroy() {
    if (this.displayed) {
      this.displayed = false;
      this.removeListeners();
      this.stopExpanding = true;
      this.element.removeChild(this.frame);
      this.displayed = false;
      this.frame = null;
      this._textWidth = null;
      this._textHeight = null;
      this._width = null;
      this._height = null;
    } // this.element.style.height = "0px";
    // this.element.style.width = "0px";

  }

}

(0, _eventEmitter.default)(InlineView.prototype);
var _default = InlineView;
exports.default = _default;