mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Intial move to ES2015
This commit is contained in:
Fred Chasen
parent
b0944bdff8
commit
353dfa62fd
46 changed files with 16839 additions and 18742 deletions
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,231 +1,231 @@
|
|||
var core = require('../../core');
|
||||
import {uuid, isNumber, isElement, windowBounds} from '../../utils/core';
|
||||
|
||||
function Stage(_options) {
|
||||
this.settings = _options || {};
|
||||
this.id = "epubjs-container-" + core.uuid();
|
||||
class Stage {
|
||||
constructor(_options) {
|
||||
this.settings = _options || {};
|
||||
this.id = "epubjs-container-" + uuid();
|
||||
|
||||
this.container = this.create(this.settings);
|
||||
this.container = this.create(this.settings);
|
||||
|
||||
if(this.settings.hidden) {
|
||||
this.wrapper = this.wrap(this.container);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Creates an element to render to.
|
||||
* Resizes to passed width and height or to the elements size
|
||||
*/
|
||||
Stage.prototype.create = function(options){
|
||||
var height = options.height;// !== false ? options.height : "100%";
|
||||
var width = options.width;// !== false ? options.width : "100%";
|
||||
var overflow = options.overflow || false;
|
||||
var axis = options.axis || "vertical";
|
||||
|
||||
if(options.height && core.isNumber(options.height)) {
|
||||
height = options.height + "px";
|
||||
}
|
||||
|
||||
if(options.width && core.isNumber(options.width)) {
|
||||
width = options.width + "px";
|
||||
}
|
||||
|
||||
// Create new container element
|
||||
container = document.createElement("div");
|
||||
|
||||
container.id = this.id;
|
||||
container.classList.add("epub-container");
|
||||
|
||||
// Style Element
|
||||
// container.style.fontSize = "0";
|
||||
container.style.wordSpacing = "0";
|
||||
container.style.lineHeight = "0";
|
||||
container.style.verticalAlign = "top";
|
||||
|
||||
if(axis === "horizontal") {
|
||||
container.style.whiteSpace = "nowrap";
|
||||
}
|
||||
|
||||
if(width){
|
||||
container.style.width = width;
|
||||
}
|
||||
|
||||
if(height){
|
||||
container.style.height = height;
|
||||
}
|
||||
|
||||
if (overflow) {
|
||||
container.style.overflow = overflow;
|
||||
}
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
Stage.wrap = function(container) {
|
||||
var wrapper = document.createElement("div");
|
||||
|
||||
wrapper.style.visibility = "hidden";
|
||||
wrapper.style.overflow = "hidden";
|
||||
wrapper.style.width = "0";
|
||||
wrapper.style.height = "0";
|
||||
|
||||
wrapper.appendChild(container);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
|
||||
Stage.prototype.getElement = function(_element){
|
||||
var element;
|
||||
|
||||
if(core.isElement(_element)) {
|
||||
element = _element;
|
||||
} else if (typeof _element === "string") {
|
||||
element = document.getElementById(_element);
|
||||
}
|
||||
|
||||
if(!element){
|
||||
console.error("Not an Element");
|
||||
return;
|
||||
}
|
||||
|
||||
return element;
|
||||
};
|
||||
|
||||
Stage.prototype.attachTo = function(what){
|
||||
|
||||
var element = this.getElement(what);
|
||||
var base;
|
||||
|
||||
if(!element){
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.settings.hidden) {
|
||||
base = this.wrapper;
|
||||
} else {
|
||||
base = this.container;
|
||||
}
|
||||
|
||||
element.appendChild(base);
|
||||
|
||||
this.element = element;
|
||||
|
||||
return element;
|
||||
|
||||
};
|
||||
|
||||
Stage.prototype.getContainer = function() {
|
||||
return this.container;
|
||||
};
|
||||
|
||||
Stage.prototype.onResize = function(func){
|
||||
// Only listen to window for resize event if width and height are not fixed.
|
||||
// This applies if it is set to a percent or auto.
|
||||
if(!core.isNumber(this.settings.width) ||
|
||||
!core.isNumber(this.settings.height) ) {
|
||||
window.addEventListener("resize", func, false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Stage.prototype.size = function(width, height){
|
||||
var bounds;
|
||||
// var width = _width || this.settings.width;
|
||||
// var height = _height || this.settings.height;
|
||||
|
||||
// If width or height are set to false, inherit them from containing element
|
||||
if(width === null) {
|
||||
bounds = this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.width) {
|
||||
width = bounds.width;
|
||||
this.container.style.width = bounds.width + "px";
|
||||
}
|
||||
}
|
||||
|
||||
if(height === null) {
|
||||
bounds = bounds || this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.height) {
|
||||
height = bounds.height;
|
||||
this.container.style.height = bounds.height + "px";
|
||||
if(this.settings.hidden) {
|
||||
this.wrapper = this.wrap(this.container);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(!core.isNumber(width)) {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
width = bounds.width;
|
||||
//height = bounds.height;
|
||||
}
|
||||
/*
|
||||
* Creates an element to render to.
|
||||
* Resizes to passed width and height or to the elements size
|
||||
*/
|
||||
create(options){
|
||||
var height = options.height;// !== false ? options.height : "100%";
|
||||
var width = options.width;// !== false ? options.width : "100%";
|
||||
var overflow = options.overflow || false;
|
||||
var axis = options.axis || "vertical";
|
||||
|
||||
if(!core.isNumber(height)) {
|
||||
bounds = bounds || this.container.getBoundingClientRect();
|
||||
//width = bounds.width;
|
||||
height = bounds.height;
|
||||
}
|
||||
if(options.height && isNumber(options.height)) {
|
||||
height = options.height + "px";
|
||||
}
|
||||
|
||||
if(options.width && isNumber(options.width)) {
|
||||
width = options.width + "px";
|
||||
}
|
||||
|
||||
this.containerStyles = window.getComputedStyle(this.container);
|
||||
// Create new container element
|
||||
let container = document.createElement("div");
|
||||
|
||||
this.containerPadding = {
|
||||
left: parseFloat(this.containerStyles["padding-left"]) || 0,
|
||||
right: parseFloat(this.containerStyles["padding-right"]) || 0,
|
||||
top: parseFloat(this.containerStyles["padding-top"]) || 0,
|
||||
bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
|
||||
container.id = this.id;
|
||||
container.classList.add("epub-container");
|
||||
|
||||
// Style Element
|
||||
// container.style.fontSize = "0";
|
||||
container.style.wordSpacing = "0";
|
||||
container.style.lineHeight = "0";
|
||||
container.style.verticalAlign = "top";
|
||||
|
||||
if(axis === "horizontal") {
|
||||
container.style.whiteSpace = "nowrap";
|
||||
}
|
||||
|
||||
if(width){
|
||||
container.style.width = width;
|
||||
}
|
||||
|
||||
if(height){
|
||||
container.style.height = height;
|
||||
}
|
||||
|
||||
if (overflow) {
|
||||
container.style.overflow = overflow;
|
||||
}
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
return {
|
||||
width: width -
|
||||
this.containerPadding.left -
|
||||
this.containerPadding.right,
|
||||
height: height -
|
||||
this.containerPadding.top -
|
||||
this.containerPadding.bottom
|
||||
wrap(container) {
|
||||
var wrapper = document.createElement("div");
|
||||
|
||||
wrapper.style.visibility = "hidden";
|
||||
wrapper.style.overflow = "hidden";
|
||||
wrapper.style.width = "0";
|
||||
wrapper.style.height = "0";
|
||||
|
||||
wrapper.appendChild(container);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
Stage.prototype.bounds = function(){
|
||||
getElement(_element){
|
||||
var element;
|
||||
|
||||
if(!this.container) {
|
||||
return core.windowBounds();
|
||||
} else {
|
||||
return this.container.getBoundingClientRect();
|
||||
}
|
||||
if(isElement(_element)) {
|
||||
element = _element;
|
||||
} else if (typeof _element === "string") {
|
||||
element = document.getElementById(_element);
|
||||
}
|
||||
|
||||
}
|
||||
if(!element){
|
||||
console.error("Not an Element");
|
||||
return;
|
||||
}
|
||||
|
||||
Stage.prototype.getSheet = function(){
|
||||
var style = document.createElement("style");
|
||||
return element;
|
||||
};
|
||||
|
||||
// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
|
||||
style.appendChild(document.createTextNode(""));
|
||||
attachTo(what){
|
||||
|
||||
document.head.appendChild(style);
|
||||
var element = this.getElement(what);
|
||||
var base;
|
||||
|
||||
return style.sheet;
|
||||
}
|
||||
if(!element){
|
||||
return;
|
||||
}
|
||||
|
||||
Stage.prototype.addStyleRules = function(selector, rulesArray){
|
||||
var scope = "#" + this.id + " ";
|
||||
var rules = "";
|
||||
if(this.settings.hidden) {
|
||||
base = this.wrapper;
|
||||
} else {
|
||||
base = this.container;
|
||||
}
|
||||
|
||||
if(!this.sheet){
|
||||
this.sheet = this.getSheet();
|
||||
}
|
||||
element.appendChild(base);
|
||||
|
||||
rulesArray.forEach(function(set) {
|
||||
for (var prop in set) {
|
||||
if(set.hasOwnProperty(prop)) {
|
||||
rules += prop + ":" + set[prop] + ";";
|
||||
this.element = element;
|
||||
|
||||
return element;
|
||||
|
||||
};
|
||||
|
||||
getContainer() {
|
||||
return this.container;
|
||||
};
|
||||
|
||||
onResize(func){
|
||||
// Only listen to window for resize event if width and height are not fixed.
|
||||
// This applies if it is set to a percent or auto.
|
||||
if(!isNumber(this.settings.width) ||
|
||||
!isNumber(this.settings.height) ) {
|
||||
window.addEventListener("resize", func, false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
size(width, height){
|
||||
var bounds;
|
||||
// var width = _width || this.settings.width;
|
||||
// var height = _height || this.settings.height;
|
||||
|
||||
// If width or height are set to false, inherit them from containing element
|
||||
if(width === null) {
|
||||
bounds = this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.width) {
|
||||
width = bounds.width;
|
||||
this.container.style.width = bounds.width + "px";
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.sheet.insertRule(scope + selector + " {" + rules + "}", 0);
|
||||
if(height === null) {
|
||||
bounds = bounds || this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.height) {
|
||||
height = bounds.height;
|
||||
this.container.style.height = bounds.height + "px";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(!isNumber(width)) {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
width = bounds.width;
|
||||
//height = bounds.height;
|
||||
}
|
||||
|
||||
if(!isNumber(height)) {
|
||||
bounds = bounds || this.container.getBoundingClientRect();
|
||||
//width = bounds.width;
|
||||
height = bounds.height;
|
||||
}
|
||||
|
||||
|
||||
this.containerStyles = window.getComputedStyle(this.container);
|
||||
|
||||
this.containerPadding = {
|
||||
left: parseFloat(this.containerStyles["padding-left"]) || 0,
|
||||
right: parseFloat(this.containerStyles["padding-right"]) || 0,
|
||||
top: parseFloat(this.containerStyles["padding-top"]) || 0,
|
||||
bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
|
||||
};
|
||||
|
||||
return {
|
||||
width: width -
|
||||
this.containerPadding.left -
|
||||
this.containerPadding.right,
|
||||
height: height -
|
||||
this.containerPadding.top -
|
||||
this.containerPadding.bottom
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
bounds(){
|
||||
|
||||
if(!this.container) {
|
||||
return windowBounds();
|
||||
} else {
|
||||
return this.container.getBoundingClientRect();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getSheet(){
|
||||
var style = document.createElement("style");
|
||||
|
||||
// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
|
||||
style.appendChild(document.createTextNode(""));
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
return style.sheet;
|
||||
}
|
||||
|
||||
addStyleRules(selector, rulesArray){
|
||||
var scope = "#" + this.id + " ";
|
||||
var rules = "";
|
||||
|
||||
if(!this.sheet){
|
||||
this.sheet = this.getSheet();
|
||||
}
|
||||
|
||||
rulesArray.forEach(function(set) {
|
||||
for (var prop in set) {
|
||||
if(set.hasOwnProperty(prop)) {
|
||||
rules += prop + ":" + set[prop] + ";";
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.sheet.insertRule(scope + selector + " {" + rules + "}", 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
module.exports = Stage;
|
||||
export default Stage;
|
||||
|
|
|
|||
|
|
@ -1,165 +1,167 @@
|
|||
function Views(container) {
|
||||
this.container = container;
|
||||
this._views = [];
|
||||
this.length = 0;
|
||||
this.hidden = false;
|
||||
};
|
||||
class Views {
|
||||
constructor(container) {
|
||||
this.container = container;
|
||||
this._views = [];
|
||||
this.length = 0;
|
||||
this.hidden = false;
|
||||
};
|
||||
|
||||
Views.prototype.all = function() {
|
||||
return this._views;
|
||||
};
|
||||
all() {
|
||||
return this._views;
|
||||
};
|
||||
|
||||
Views.prototype.first = function() {
|
||||
return this._views[0];
|
||||
};
|
||||
first() {
|
||||
return this._views[0];
|
||||
};
|
||||
|
||||
Views.prototype.last = function() {
|
||||
return this._views[this._views.length-1];
|
||||
};
|
||||
last() {
|
||||
return this._views[this._views.length-1];
|
||||
};
|
||||
|
||||
Views.prototype.indexOf = function(view) {
|
||||
return this._views.indexOf(view);
|
||||
};
|
||||
indexOf(view) {
|
||||
return this._views.indexOf(view);
|
||||
};
|
||||
|
||||
Views.prototype.slice = function() {
|
||||
return this._views.slice.apply(this._views, arguments);
|
||||
};
|
||||
slice() {
|
||||
return this._views.slice.apply(this._views, arguments);
|
||||
};
|
||||
|
||||
Views.prototype.get = function(i) {
|
||||
return this._views[i];
|
||||
};
|
||||
get(i) {
|
||||
return this._views[i];
|
||||
};
|
||||
|
||||
Views.prototype.append = function(view){
|
||||
this._views.push(view);
|
||||
if(this.container){
|
||||
this.container.appendChild(view.element);
|
||||
}
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
|
||||
Views.prototype.prepend = function(view){
|
||||
this._views.unshift(view);
|
||||
if(this.container){
|
||||
this.container.insertBefore(view.element, this.container.firstChild);
|
||||
}
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
|
||||
Views.prototype.insert = function(view, index) {
|
||||
this._views.splice(index, 0, view);
|
||||
|
||||
if(this.container){
|
||||
if(index < this.container.children.length){
|
||||
this.container.insertBefore(view.element, this.container.children[index]);
|
||||
} else {
|
||||
append(view){
|
||||
this._views.push(view);
|
||||
if(this.container){
|
||||
this.container.appendChild(view.element);
|
||||
}
|
||||
}
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
prepend(view){
|
||||
this._views.unshift(view);
|
||||
if(this.container){
|
||||
this.container.insertBefore(view.element, this.container.firstChild);
|
||||
}
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
|
||||
Views.prototype.remove = function(view) {
|
||||
var index = this._views.indexOf(view);
|
||||
insert(view, index) {
|
||||
this._views.splice(index, 0, view);
|
||||
|
||||
if(index > -1) {
|
||||
this._views.splice(index, 1);
|
||||
}
|
||||
if(this.container){
|
||||
if(index < this.container.children.length){
|
||||
this.container.insertBefore(view.element, this.container.children[index]);
|
||||
} else {
|
||||
this.container.appendChild(view.element);
|
||||
}
|
||||
}
|
||||
|
||||
this.length++;
|
||||
return view;
|
||||
};
|
||||
|
||||
remove(view) {
|
||||
var index = this._views.indexOf(view);
|
||||
|
||||
if(index > -1) {
|
||||
this._views.splice(index, 1);
|
||||
}
|
||||
|
||||
|
||||
this.destroy(view);
|
||||
|
||||
this.length--;
|
||||
};
|
||||
|
||||
Views.prototype.destroy = function(view) {
|
||||
if(view.displayed){
|
||||
view.destroy();
|
||||
}
|
||||
|
||||
if(this.container){
|
||||
this.container.removeChild(view.element);
|
||||
}
|
||||
view = null;
|
||||
};
|
||||
|
||||
// Iterators
|
||||
|
||||
Views.prototype.each = function() {
|
||||
return this._views.forEach.apply(this._views, arguments);
|
||||
};
|
||||
|
||||
Views.prototype.clear = function(){
|
||||
// Remove all views
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
if(!this.length) return;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
this.destroy(view);
|
||||
}
|
||||
|
||||
this._views = [];
|
||||
this.length = 0;
|
||||
};
|
||||
this.length--;
|
||||
};
|
||||
|
||||
Views.prototype.find = function(section){
|
||||
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed && view.section.index == section.index) {
|
||||
return view;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Views.prototype.displayed = function(){
|
||||
var displayed = [];
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
destroy(view) {
|
||||
if(view.displayed){
|
||||
displayed.push(view);
|
||||
view.destroy();
|
||||
}
|
||||
}
|
||||
return displayed;
|
||||
};
|
||||
|
||||
Views.prototype.show = function(){
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed){
|
||||
view.show();
|
||||
if(this.container){
|
||||
this.container.removeChild(view.element);
|
||||
}
|
||||
}
|
||||
this.hidden = false;
|
||||
};
|
||||
view = null;
|
||||
};
|
||||
|
||||
Views.prototype.hide = function(){
|
||||
var view;
|
||||
var len = this.length;
|
||||
// Iterators
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed){
|
||||
view.hide();
|
||||
each() {
|
||||
return this._views.forEach.apply(this._views, arguments);
|
||||
};
|
||||
|
||||
clear(){
|
||||
// Remove all views
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
if(!this.length) return;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
this.destroy(view);
|
||||
}
|
||||
}
|
||||
this.hidden = true;
|
||||
};
|
||||
|
||||
module.exports = Views;
|
||||
this._views = [];
|
||||
this.length = 0;
|
||||
};
|
||||
|
||||
find(section){
|
||||
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed && view.section.index == section.index) {
|
||||
return view;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
displayed(){
|
||||
var displayed = [];
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed){
|
||||
displayed.push(view);
|
||||
}
|
||||
}
|
||||
return displayed;
|
||||
};
|
||||
|
||||
show(){
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed){
|
||||
view.show();
|
||||
}
|
||||
}
|
||||
this.hidden = false;
|
||||
};
|
||||
|
||||
hide(){
|
||||
var view;
|
||||
var len = this.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
view = this._views[i];
|
||||
if(view.displayed){
|
||||
view.hide();
|
||||
}
|
||||
}
|
||||
this.hidden = true;
|
||||
};
|
||||
}
|
||||
|
||||
export default Views;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,429 +1,431 @@
|
|||
var EventEmitter = require('event-emitter');
|
||||
var core = require('../../core');
|
||||
var EpubCFI = require('../../epubcfi');
|
||||
var Contents = require('../../contents');
|
||||
// var URI = require('urijs');
|
||||
|
||||
function InlineView(section, options) {
|
||||
this.settings = core.extend({
|
||||
ignoreClass : '',
|
||||
axis: 'vertical',
|
||||
width: 0,
|
||||
height: 0,
|
||||
layout: undefined,
|
||||
globalLayoutProperties: {},
|
||||
}, options || {});
|
||||
|
||||
this.id = "epubjs-view:" + 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();
|
||||
|
||||
this.layout = this.settings.layout;
|
||||
// Dom events to listen for
|
||||
// this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||
|
||||
};
|
||||
|
||||
InlineView.prototype.container = function(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;
|
||||
};
|
||||
|
||||
InlineView.prototype.create = function() {
|
||||
|
||||
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 = core.bounds(this.element);
|
||||
|
||||
return this.frame;
|
||||
};
|
||||
|
||||
InlineView.prototype.render = function(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("rendered", this.section);
|
||||
|
||||
}.bind(this))
|
||||
.catch(function(e){
|
||||
this.emit("loaderror", e);
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
// Determine locks base on settings
|
||||
InlineView.prototype.size = function(_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
|
||||
InlineView.prototype.lock = function(what, width, height) {
|
||||
var elBorders = core.borders(this.element);
|
||||
var iframeBorders;
|
||||
|
||||
if(this.frame) {
|
||||
iframeBorders = core.borders(this.frame);
|
||||
} else {
|
||||
iframeBorders = {width: 0, height: 0};
|
||||
}
|
||||
|
||||
if(what == "width" && core.isNumber(width)){
|
||||
this.lockedWidth = width - elBorders.width - iframeBorders.width;
|
||||
this.resize(this.lockedWidth, false); // width keeps ratio correct
|
||||
}
|
||||
|
||||
if(what == "height" && core.isNumber(height)){
|
||||
this.lockedHeight = height - elBorders.height - iframeBorders.height;
|
||||
this.resize(false, this.lockedHeight);
|
||||
}
|
||||
|
||||
if(what === "both" &&
|
||||
core.isNumber(width) &&
|
||||
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
|
||||
InlineView.prototype.expand = function(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;
|
||||
};
|
||||
|
||||
InlineView.prototype.contentWidth = function(min) {
|
||||
return this.frame.scrollWidth;
|
||||
};
|
||||
|
||||
InlineView.prototype.contentHeight = function(min) {
|
||||
console.log(this.frame.scrollHeight);
|
||||
return this.frame.scrollHeight;
|
||||
};
|
||||
|
||||
|
||||
InlineView.prototype.resize = function(width, height) {
|
||||
|
||||
if(!this.frame) return;
|
||||
|
||||
if(core.isNumber(width)){
|
||||
this.frame.style.width = width + "px";
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
if(core.isNumber(height)){
|
||||
this.frame.style.height = height + "px";
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
this.prevBounds = this.elementBounds;
|
||||
|
||||
this.elementBounds = core.bounds(this.element);
|
||||
|
||||
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("resized", size);
|
||||
|
||||
};
|
||||
|
||||
|
||||
InlineView.prototype.load = function(contents) {
|
||||
var loading = new core.defer();
|
||||
var loaded = loading.promise;
|
||||
var doc = core.parse(contents, "text/html");
|
||||
var body = 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(this.document, this.frame);
|
||||
|
||||
this.rendering = false;
|
||||
|
||||
loading.resolve(this.contents);
|
||||
|
||||
|
||||
return loaded;
|
||||
};
|
||||
|
||||
InlineView.prototype.setLayout = function(layout) {
|
||||
this.layout = layout;
|
||||
};
|
||||
|
||||
|
||||
InlineView.prototype.resizeListenters = function() {
|
||||
// Test size again
|
||||
// clearTimeout(this.expanding);
|
||||
// this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
};
|
||||
|
||||
InlineView.prototype.addListeners = function() {
|
||||
//TODO: Add content listeners for expanding
|
||||
};
|
||||
|
||||
InlineView.prototype.removeListeners = function(layoutFunc) {
|
||||
//TODO: remove content listeners for expanding
|
||||
};
|
||||
|
||||
InlineView.prototype.display = function(request) {
|
||||
var displayed = new core.defer();
|
||||
|
||||
if (!this.displayed) {
|
||||
|
||||
this.render(request).then(function () {
|
||||
|
||||
this.emit("displayed", this);
|
||||
this.onDisplayed(this);
|
||||
|
||||
this.displayed = true;
|
||||
|
||||
displayed.resolve(this);
|
||||
|
||||
}.bind(this));
|
||||
|
||||
} else {
|
||||
displayed.resolve(this);
|
||||
}
|
||||
|
||||
|
||||
return displayed.promise;
|
||||
};
|
||||
|
||||
InlineView.prototype.show = function() {
|
||||
|
||||
this.element.style.visibility = "visible";
|
||||
|
||||
if(this.frame){
|
||||
this.frame.style.visibility = "visible";
|
||||
}
|
||||
|
||||
this.emit("shown", this);
|
||||
};
|
||||
|
||||
InlineView.prototype.hide = function() {
|
||||
// this.frame.style.display = "none";
|
||||
this.element.style.visibility = "hidden";
|
||||
this.frame.style.visibility = "hidden";
|
||||
|
||||
this.stopExpanding = true;
|
||||
this.emit("hidden", this);
|
||||
};
|
||||
|
||||
InlineView.prototype.position = function() {
|
||||
return this.element.getBoundingClientRect();
|
||||
};
|
||||
|
||||
InlineView.prototype.locationOf = function(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
|
||||
};
|
||||
};
|
||||
|
||||
InlineView.prototype.onDisplayed = function(view) {
|
||||
// Stub, override with a custom functions
|
||||
};
|
||||
|
||||
InlineView.prototype.onResize = function(view, e) {
|
||||
// Stub, override with a custom functions
|
||||
};
|
||||
|
||||
InlineView.prototype.bounds = function() {
|
||||
if(!this.elementBounds) {
|
||||
this.elementBounds = core.bounds(this.element);
|
||||
}
|
||||
return this.elementBounds;
|
||||
};
|
||||
|
||||
InlineView.prototype.destroy = function() {
|
||||
|
||||
if(this.displayed){
|
||||
import EventEmitter from 'event-emitter';
|
||||
import {extend, borders, uuid, isNumber, bounds, defer} from '../../utils/core';
|
||||
import EpubCFI from '../../epubcfi';
|
||||
import Contents from '../../contents';
|
||||
// import URI from 'urijs';
|
||||
|
||||
class InlineView {
|
||||
constructor(section, options) {
|
||||
this.settings = extend({
|
||||
ignoreClass : '',
|
||||
axis: 'vertical',
|
||||
width: 0,
|
||||
height: 0,
|
||||
layout: undefined,
|
||||
globalLayoutProperties: {},
|
||||
}, options || {});
|
||||
|
||||
this.id = "epubjs-view:" + 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.removeListeners();
|
||||
this.width = this.settings.width;
|
||||
this.height = this.settings.height;
|
||||
|
||||
this.fixedWidth = 0;
|
||||
this.fixedHeight = 0;
|
||||
|
||||
// Blank Cfi for Parsing
|
||||
this.epubcfi = new EpubCFI();
|
||||
|
||||
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 = 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("rendered", this.section);
|
||||
|
||||
}.bind(this))
|
||||
.catch(function(e){
|
||||
this.emit("loaderror", 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 = borders(this.element);
|
||||
var iframeBorders;
|
||||
|
||||
if(this.frame) {
|
||||
iframeBorders = borders(this.frame);
|
||||
} else {
|
||||
iframeBorders = {width: 0, height: 0};
|
||||
}
|
||||
|
||||
if(what == "width" && isNumber(width)){
|
||||
this.lockedWidth = width - elBorders.width - iframeBorders.width;
|
||||
this.resize(this.lockedWidth, false); // width keeps ratio correct
|
||||
}
|
||||
|
||||
if(what == "height" && isNumber(height)){
|
||||
this.lockedHeight = height - elBorders.height - iframeBorders.height;
|
||||
this.resize(false, this.lockedHeight);
|
||||
}
|
||||
|
||||
if(what === "both" &&
|
||||
isNumber(width) &&
|
||||
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) {
|
||||
console.log(this.frame.scrollHeight);
|
||||
return this.frame.scrollHeight;
|
||||
};
|
||||
|
||||
|
||||
resize(width, height) {
|
||||
|
||||
if(!this.frame) return;
|
||||
|
||||
if(isNumber(width)){
|
||||
this.frame.style.width = width + "px";
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
if(isNumber(height)){
|
||||
this.frame.style.height = height + "px";
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
this.prevBounds = this.elementBounds;
|
||||
|
||||
this.elementBounds = bounds(this.element);
|
||||
|
||||
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("resized", size);
|
||||
|
||||
};
|
||||
|
||||
|
||||
load(contents) {
|
||||
var loading = new defer();
|
||||
var loaded = loading.promise;
|
||||
var doc = parse(contents, "text/html");
|
||||
var body = 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(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 defer();
|
||||
|
||||
if (!this.displayed) {
|
||||
|
||||
this.render(request).then(function () {
|
||||
|
||||
this.emit("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("shown", this);
|
||||
};
|
||||
|
||||
hide() {
|
||||
// this.frame.style.display = "none";
|
||||
this.element.style.visibility = "hidden";
|
||||
this.frame.style.visibility = "hidden";
|
||||
|
||||
this.stopExpanding = true;
|
||||
this.element.removeChild(this.frame);
|
||||
this.displayed = false;
|
||||
this.frame = null;
|
||||
this.emit("hidden", this);
|
||||
};
|
||||
|
||||
this._textWidth = null;
|
||||
this._textHeight = null;
|
||||
this._width = null;
|
||||
this._height = null;
|
||||
}
|
||||
// this.element.style.height = "0px";
|
||||
// this.element.style.width = "0px";
|
||||
};
|
||||
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 = 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";
|
||||
};
|
||||
}
|
||||
|
||||
EventEmitter(InlineView.prototype);
|
||||
|
||||
module.exports = InlineView;
|
||||
export default InlineView;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue