You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

etherpad.js 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. /* global $, config, connection, dockToolbar, Moderator, Prezi,
  2. setLargeVideoVisible, ToolbarToggler, Util, VideoLayout */
  3. var Etherpad = (function (my) {
  4. var etherpadName = null;
  5. var etherpadIFrame = null;
  6. var domain = null;
  7. var options = "?showControls=true&showChat=false&showLineNumbers=true&useMonospaceFont=false";
  8. /**
  9. * Initializes the etherpad.
  10. */
  11. my.init = function (name) {
  12. if (config.etherpad_base && !etherpadName) {
  13. domain = config.etherpad_base;
  14. if (!name) {
  15. // In case we're the focus we generate the name.
  16. etherpadName = Math.random().toString(36).substring(7) +
  17. '_' + (new Date().getTime()).toString();
  18. shareEtherpad();
  19. }
  20. else
  21. etherpadName = name;
  22. enableEtherpadButton();
  23. }
  24. };
  25. /**
  26. * Opens/hides the Etherpad.
  27. */
  28. my.toggleEtherpad = function (isPresentation) {
  29. if (!etherpadIFrame)
  30. createIFrame();
  31. var largeVideo = null;
  32. if (Prezi.isPresentationVisible())
  33. largeVideo = $('#presentation>iframe');
  34. else
  35. largeVideo = $('#largeVideo');
  36. if ($('#etherpad>iframe').css('visibility') === 'hidden') {
  37. largeVideo.fadeOut(300, function () {
  38. if (Prezi.isPresentationVisible()) {
  39. largeVideo.css({opacity: '0'});
  40. } else {
  41. VideoLayout.setLargeVideoVisible(false);
  42. }
  43. });
  44. $('#etherpad>iframe').fadeIn(300, function () {
  45. document.body.style.background = '#eeeeee';
  46. $('#etherpad>iframe').css({visibility: 'visible'});
  47. $('#etherpad').css({zIndex: 2});
  48. });
  49. }
  50. else if ($('#etherpad>iframe')) {
  51. $('#etherpad>iframe').fadeOut(300, function () {
  52. $('#etherpad>iframe').css({visibility: 'hidden'});
  53. $('#etherpad').css({zIndex: 0});
  54. document.body.style.background = 'black';
  55. });
  56. if (!isPresentation) {
  57. $('#largeVideo').fadeIn(300, function () {
  58. VideoLayout.setLargeVideoVisible(true);
  59. });
  60. }
  61. }
  62. resize();
  63. };
  64. my.isVisible = function() {
  65. var etherpadIframe = $('#etherpad>iframe');
  66. return etherpadIframe && etherpadIframe.is(':visible');
  67. };
  68. /**
  69. * Resizes the etherpad.
  70. */
  71. function resize() {
  72. if ($('#etherpad>iframe').length) {
  73. var remoteVideos = $('#remoteVideos');
  74. var availableHeight
  75. = window.innerHeight - remoteVideos.outerHeight();
  76. var availableWidth = Util.getAvailableVideoWidth();
  77. $('#etherpad>iframe').width(availableWidth);
  78. $('#etherpad>iframe').height(availableHeight);
  79. }
  80. }
  81. /**
  82. * Shares the Etherpad name with other participants.
  83. */
  84. function shareEtherpad() {
  85. connection.emuc.addEtherpadToPresence(etherpadName);
  86. connection.emuc.sendPresence();
  87. }
  88. /**
  89. * Creates the Etherpad button and adds it to the toolbar.
  90. */
  91. function enableEtherpadButton() {
  92. if (!$('#etherpadButton').is(":visible"))
  93. $('#etherpadButton').css({display: 'inline-block'});
  94. }
  95. /**
  96. * Creates the IFrame for the etherpad.
  97. */
  98. function createIFrame() {
  99. etherpadIFrame = document.createElement('iframe');
  100. etherpadIFrame.src = domain + etherpadName + options;
  101. etherpadIFrame.frameBorder = 0;
  102. etherpadIFrame.scrolling = "no";
  103. etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
  104. etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
  105. etherpadIFrame.setAttribute('style', 'visibility: hidden;');
  106. document.getElementById('etherpad').appendChild(etherpadIFrame);
  107. etherpadIFrame.onload = function() {
  108. document.domain = document.domain;
  109. bubbleIframeMouseMove(etherpadIFrame);
  110. setTimeout(function() {
  111. //the iframes inside of the etherpad are not yet loaded when the etherpad iframe is loaded
  112. var outer = etherpadIFrame.contentDocument.getElementsByName("ace_outer")[0];
  113. bubbleIframeMouseMove(outer);
  114. var inner = outer.contentDocument.getElementsByName("ace_inner")[0];
  115. bubbleIframeMouseMove(inner);
  116. }, 2000);
  117. };
  118. }
  119. function bubbleIframeMouseMove(iframe){
  120. var existingOnMouseMove = iframe.contentWindow.onmousemove;
  121. iframe.contentWindow.onmousemove = function(e){
  122. if(existingOnMouseMove) existingOnMouseMove(e);
  123. var evt = document.createEvent("MouseEvents");
  124. var boundingClientRect = iframe.getBoundingClientRect();
  125. evt.initMouseEvent(
  126. "mousemove",
  127. true, // bubbles
  128. false, // not cancelable
  129. window,
  130. e.detail,
  131. e.screenX,
  132. e.screenY,
  133. e.clientX + boundingClientRect.left,
  134. e.clientY + boundingClientRect.top,
  135. e.ctrlKey,
  136. e.altKey,
  137. e.shiftKey,
  138. e.metaKey,
  139. e.button,
  140. null // no related element
  141. );
  142. iframe.dispatchEvent(evt);
  143. };
  144. }
  145. /**
  146. * On Etherpad added to muc.
  147. */
  148. $(document).bind('etherpadadded.muc', function (event, jid, etherpadName) {
  149. console.log("Etherpad added", etherpadName);
  150. if (config.etherpad_base && !Moderator.isModerator()) {
  151. Etherpad.init(etherpadName);
  152. }
  153. });
  154. /**
  155. * On focus changed event.
  156. */
  157. // FIXME: there is no such event as 'focusechanged.muc'
  158. $(document).bind('focusechanged.muc', function (event, focus) {
  159. console.log("Focus changed");
  160. if (config.etherpad_base)
  161. shareEtherpad();
  162. });
  163. /**
  164. * On video selected event.
  165. */
  166. $(document).bind('video.selected', function (event, isPresentation) {
  167. if (!config.etherpad_base)
  168. return;
  169. if (etherpadIFrame && etherpadIFrame.style.visibility !== 'hidden')
  170. Etherpad.toggleEtherpad(isPresentation);
  171. });
  172. /**
  173. * Resizes the etherpad, when the window is resized.
  174. */
  175. $(window).resize(function () {
  176. resize();
  177. });
  178. return my;
  179. }(Etherpad || {}));