您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

etherpad.js 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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. $('#etherpad>iframe').fadeIn(300, function () {
  44. document.body.style.background = '#eeeeee';
  45. $('#etherpad>iframe').css({visibility: 'visible'});
  46. $('#etherpad').css({zIndex: 2});
  47. });
  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. if (!isPresentation) {
  56. $('#largeVideo').fadeIn(300, function () {
  57. VideoLayout.setLargeVideoVisible(true);
  58. });
  59. }
  60. });
  61. }
  62. resize();
  63. };
  64. /**
  65. * Resizes the etherpad.
  66. */
  67. function resize() {
  68. if ($('#etherpad>iframe').length) {
  69. var remoteVideos = $('#remoteVideos');
  70. var availableHeight
  71. = window.innerHeight - remoteVideos.outerHeight();
  72. var availableWidth = Util.getAvailableVideoWidth();
  73. $('#etherpad>iframe').width(availableWidth);
  74. $('#etherpad>iframe').height(availableHeight);
  75. }
  76. }
  77. /**
  78. * Shares the Etherpad name with other participants.
  79. */
  80. function shareEtherpad() {
  81. connection.emuc.addEtherpadToPresence(etherpadName);
  82. connection.emuc.sendPresence();
  83. }
  84. /**
  85. * Creates the Etherpad button and adds it to the toolbar.
  86. */
  87. function enableEtherpadButton() {
  88. if (!$('#etherpadButton').is(":visible"))
  89. $('#etherpadButton').css({display: 'inline-block'});
  90. }
  91. /**
  92. * Creates the IFrame for the etherpad.
  93. */
  94. function createIFrame() {
  95. etherpadIFrame = document.createElement('iframe');
  96. etherpadIFrame.src = domain + etherpadName + options;
  97. etherpadIFrame.frameBorder = 0;
  98. etherpadIFrame.scrolling = "no";
  99. etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
  100. etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
  101. etherpadIFrame.setAttribute('style', 'visibility: hidden;');
  102. document.getElementById('etherpad').appendChild(etherpadIFrame);
  103. etherpadIFrame.onload = function() {
  104. document.domain = document.domain;
  105. bubbleIframeMouseMove(etherpadIFrame);
  106. setTimeout(function() {
  107. //the iframes inside of the etherpad are not yet loaded when the etherpad iframe is loaded
  108. var outer = etherpadIFrame.contentDocument.getElementsByName("ace_outer")[0];
  109. bubbleIframeMouseMove(outer);
  110. var inner = outer.contentDocument.getElementsByName("ace_inner")[0];
  111. bubbleIframeMouseMove(inner);
  112. }, 2000);
  113. };
  114. }
  115. function bubbleIframeMouseMove(iframe){
  116. var existingOnMouseMove = iframe.contentWindow.onmousemove;
  117. iframe.contentWindow.onmousemove = function(e){
  118. if(existingOnMouseMove) existingOnMouseMove(e);
  119. var evt = document.createEvent("MouseEvents");
  120. var boundingClientRect = iframe.getBoundingClientRect();
  121. evt.initMouseEvent(
  122. "mousemove",
  123. true, // bubbles
  124. false, // not cancelable
  125. window,
  126. e.detail,
  127. e.screenX,
  128. e.screenY,
  129. e.clientX + boundingClientRect.left,
  130. e.clientY + boundingClientRect.top,
  131. e.ctrlKey,
  132. e.altKey,
  133. e.shiftKey,
  134. e.metaKey,
  135. e.button,
  136. null // no related element
  137. );
  138. iframe.dispatchEvent(evt);
  139. };
  140. }
  141. /**
  142. * On Etherpad added to muc.
  143. */
  144. $(document).bind('etherpadadded.muc', function (event, jid, etherpadName) {
  145. console.log("Etherpad added", etherpadName);
  146. if (config.etherpad_base && !Moderator.isModerator()) {
  147. Etherpad.init(etherpadName);
  148. }
  149. });
  150. /**
  151. * On focus changed event.
  152. */
  153. // FIXME: there is no such event as 'focusechanged.muc'
  154. $(document).bind('focusechanged.muc', function (event, focus) {
  155. console.log("Focus changed");
  156. if (config.etherpad_base)
  157. shareEtherpad();
  158. });
  159. /**
  160. * On video selected event.
  161. */
  162. $(document).bind('video.selected', function (event, isPresentation) {
  163. if (!config.etherpad_base)
  164. return;
  165. if (etherpadIFrame && etherpadIFrame.style.visibility !== 'hidden')
  166. Etherpad.toggleEtherpad(isPresentation);
  167. });
  168. /**
  169. * Resizes the etherpad, when the window is resized.
  170. */
  171. $(window).resize(function () {
  172. resize();
  173. });
  174. return my;
  175. }(Etherpad || {}));