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 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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. setLargeVideoVisible(false);
  41. dockToolbar(true);
  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. setLargeVideoVisible(true);
  58. dockToolbar(false);
  59. });
  60. }
  61. });
  62. }
  63. resize();
  64. };
  65. /**
  66. * Resizes the etherpad.
  67. */
  68. function resize() {
  69. if ($('#etherpad>iframe').length) {
  70. var remoteVideos = $('#remoteVideos');
  71. var availableHeight
  72. = window.innerHeight - remoteVideos.outerHeight();
  73. var availableWidth = Util.getAvailableVideoWidth();
  74. $('#etherpad>iframe').width(availableWidth);
  75. $('#etherpad>iframe').height(availableHeight);
  76. }
  77. }
  78. /**
  79. * Shares the Etherpad name with other participants.
  80. */
  81. function shareEtherpad() {
  82. connection.emuc.addEtherpadToPresence(etherpadName);
  83. connection.emuc.sendPresence();
  84. }
  85. /**
  86. * Creates the Etherpad button and adds it to the toolbar.
  87. */
  88. function enableEtherpadButton() {
  89. if (!$('#etherpadButton').is(":visible"))
  90. $('#etherpadButton').css({display: 'inline-block'});
  91. }
  92. /**
  93. * Creates the IFrame for the etherpad.
  94. */
  95. function createIFrame() {
  96. etherpadIFrame = document.createElement('iframe');
  97. etherpadIFrame.src = domain + etherpadName + options;
  98. etherpadIFrame.frameBorder = 0;
  99. etherpadIFrame.scrolling = "no";
  100. etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
  101. etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
  102. etherpadIFrame.setAttribute('style', 'visibility: hidden;');
  103. document.getElementById('etherpad').appendChild(etherpadIFrame);
  104. }
  105. /**
  106. * On Etherpad added to muc.
  107. */
  108. $(document).bind('etherpadadded.muc', function (event, jid, etherpadName) {
  109. console.log("Etherpad added", etherpadName);
  110. if (config.etherpad_base && !focus) {
  111. Etherpad.init(etherpadName);
  112. }
  113. });
  114. /**
  115. * On focus changed event.
  116. */
  117. $(document).bind('focusechanged.muc', function (event, focus) {
  118. console.log("Focus changed");
  119. if (config.etherpad_base)
  120. shareEtherpad();
  121. });
  122. /**
  123. * On video selected event.
  124. */
  125. $(document).bind('video.selected', function (event, isPresentation) {
  126. if (!config.etherpad_base)
  127. return;
  128. if (etherpadIFrame && etherpadIFrame.style.visibility !== 'hidden')
  129. Etherpad.toggleEtherpad(isPresentation);
  130. });
  131. /**
  132. * Resizes the etherpad, when the window is resized.
  133. */
  134. $(window).resize(function () {
  135. resize();
  136. });
  137. return my;
  138. }(Etherpad || {}));