Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

etherpad.js 6.3KB

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