jiti-meet/modules/UI/etherpad/Etherpad.js

202 lines
5.2 KiB
JavaScript
Raw Normal View History

2015-12-25 16:55:45 +00:00
/* global $ */
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
import VideoLayout from "../videolayout/VideoLayout";
import LargeContainer from '../videolayout/LargeContainer';
import UIUtil from "../util/UIUtil";
import UIEvents from "../../../service/UI/UIEvents";
2015-12-25 16:55:45 +00:00
import SidePanelToggler from "../side_pannels/SidePanelToggler";
import FilmStrip from '../videolayout/FilmStrip';
2015-01-07 14:54:03 +00:00
2016-01-15 14:59:35 +00:00
/**
* Etherpad options.
*/
2015-12-25 16:55:45 +00:00
const options = $.param({
showControns: true,
showChat: false,
showLineNumbers: true,
useMonospaceFont: false
});
2015-01-07 14:54:03 +00:00
function bubbleIframeMouseMove(iframe){
var existingOnMouseMove = iframe.contentWindow.onmousemove;
iframe.contentWindow.onmousemove = function(e){
if(existingOnMouseMove) existingOnMouseMove(e);
var evt = document.createEvent("MouseEvents");
var boundingClientRect = iframe.getBoundingClientRect();
evt.initMouseEvent(
"mousemove",
true, // bubbles
false, // not cancelable
window,
e.detail,
e.screenX,
e.screenY,
2015-12-25 16:55:45 +00:00
e.clientX + boundingClientRect.left,
e.clientY + boundingClientRect.top,
2015-01-07 14:54:03 +00:00
e.ctrlKey,
e.altKey,
e.shiftKey,
e.metaKey,
e.button,
null // no related element
);
iframe.dispatchEvent(evt);
};
}
2016-01-15 14:59:35 +00:00
/**
* Default Etherpad frame width.
*/
2015-12-25 16:55:45 +00:00
const DEFAULT_WIDTH = 640;
2016-01-15 14:59:35 +00:00
/**
* Default Etherpad frame height.
*/
2015-12-25 16:55:45 +00:00
const DEFAULT_HEIGHT = 480;
const ETHERPAD_CONTAINER_TYPE = "etherpad";
2015-12-25 16:55:45 +00:00
2016-01-15 14:59:35 +00:00
/**
* Container for Etherpad iframe.
*/
2015-12-25 16:55:45 +00:00
class Etherpad extends LargeContainer {
2015-12-25 16:55:45 +00:00
constructor (domain, name) {
super();
const iframe = document.createElement('iframe');
iframe.src = domain + name + '?' + options;
iframe.frameBorder = 0;
iframe.scrolling = "no";
iframe.width = DEFAULT_WIDTH;
iframe.height = DEFAULT_HEIGHT;
iframe.setAttribute('style', 'visibility: hidden;');
this.container.appendChild(iframe);
iframe.onload = function() {
document.domain = document.domain;
bubbleIframeMouseMove(iframe);
setTimeout(function() {
const doc = iframe.contentDocument;
// the iframes inside of the etherpad are
// not yet loaded when the etherpad iframe is loaded
const outer = doc.getElementsByName("ace_outer")[0];
bubbleIframeMouseMove(outer);
const inner = doc.getElementsByName("ace_inner")[0];
bubbleIframeMouseMove(inner);
}, 2000);
};
this.iframe = iframe;
}
get isOpen () {
return !!this.iframe;
}
get container () {
return document.getElementById('etherpad');
}
resize (containerWidth, containerHeight, animate) {
let height = containerHeight - FilmStrip.getFilmStripHeight();
2015-12-25 16:55:45 +00:00
let width = containerWidth;
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
$(this.iframe).width(width).height(height);
}
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
show () {
const $iframe = $(this.iframe);
const $container = $(this.container);
let self = this;
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
return new Promise(resolve => {
$iframe.fadeIn(300, function () {
self.bodyBackground = document.body.style.background;
2015-12-25 16:55:45 +00:00
document.body.style.background = '#eeeeee';
$iframe.css({visibility: 'visible'});
$container.css({zIndex: 2});
resolve();
});
});
}
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
hide () {
const $iframe = $(this.iframe);
const $container = $(this.container);
document.body.style.background = this.bodyBackground;
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
return new Promise(resolve => {
$iframe.fadeOut(300, function () {
$iframe.css({visibility: 'hidden'});
$container.css({zIndex: 0});
resolve();
2015-01-07 14:54:03 +00:00
});
2015-12-25 16:55:45 +00:00
});
}
/**
* @return {boolean} do not switch on dominant speaker event if on stage.
*/
stayOnStage () {
return true;
}
2015-12-25 16:55:45 +00:00
}
2016-01-15 14:59:35 +00:00
/**
* Manager of the Etherpad frame.
*/
2015-12-25 16:55:45 +00:00
export default class EtherpadManager {
constructor (domain, name, eventEmitter) {
2015-12-25 16:55:45 +00:00
if (!domain || !name) {
throw new Error("missing domain or name");
2015-01-07 14:54:03 +00:00
}
2015-12-25 16:55:45 +00:00
this.domain = domain;
this.name = name;
this.eventEmitter = eventEmitter;
2015-12-25 16:55:45 +00:00
this.etherpad = null;
}
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
get isOpen () {
return !!this.etherpad;
}
2015-01-07 14:54:03 +00:00
isVisible() {
return VideoLayout.isLargeContainerTypeVisible(ETHERPAD_CONTAINER_TYPE);
}
2016-01-15 14:59:35 +00:00
/**
* Create new Etherpad frame.
*/
2015-12-25 16:55:45 +00:00
openEtherpad () {
this.etherpad = new Etherpad(this.domain, this.name);
VideoLayout.addLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE,
2015-12-25 16:55:45 +00:00
this.etherpad
);
2015-01-07 14:54:03 +00:00
}
2016-01-15 14:59:35 +00:00
/**
* Toggle Etherpad frame visibility.
* Open new Etherpad frame if there is no Etherpad frame yet.
*/
2015-12-25 16:55:45 +00:00
toggleEtherpad () {
if (!this.isOpen) {
this.openEtherpad();
}
let isVisible = this.isVisible();
2015-12-25 16:55:45 +00:00
VideoLayout.showLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE, !isVisible);
this.eventEmitter
.emit(UIEvents.TOGGLED_SHARED_DOCUMENT, !isVisible);
2015-12-25 16:55:45 +00:00
}
}