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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. var Etherpad = (function (my) {
  2. var etherpadName = null;
  3. var etherpadIFrame = null;
  4. var domain = null;
  5. var options = "?showControls=true&showChat=false&showLineNumbers=true&useMonospaceFont=false";
  6. /**
  7. * Initializes the etherpad.
  8. */
  9. my.init = function (name) {
  10. if (config.etherpad_base && !etherpadName) {
  11. domain = config.etherpad_base;
  12. if (!name) {
  13. // In case we're the focus we generate the name.
  14. etherpadName = Math.random().toString(36).substring(7) + '_' + (new Date().getTime()).toString();
  15. shareEtherpad();
  16. }
  17. else
  18. etherpadName = name;
  19. createEtherpadButton();
  20. }
  21. }
  22. /**
  23. * Opens/hides the Etherpad.
  24. */
  25. my.toggleEtherpad = function (isPresentation) {
  26. if (!etherpadIFrame)
  27. createIFrame();
  28. // TODO FIX large video and prezi toggling. Too many calls from different places.
  29. var largeVideo = null;
  30. if (isPresentationVisible())
  31. largeVideo = $('#presentation>iframe');
  32. else
  33. largeVideo = $('#largeVideo');
  34. if ($('#etherpad>iframe').css('visibility') == 'hidden') {
  35. largeVideo.fadeOut(300, function () {
  36. if (isPresentationVisible())
  37. largeVideo.css({opacity:'0'});
  38. else
  39. largeVideo.css({visibility:'hidden'});
  40. $('#etherpad>iframe').fadeIn(300, function() {
  41. $('#etherpad>iframe').css({visibility:'visible'});
  42. $('#etherpad').css({zIndex:2});
  43. });
  44. });
  45. }
  46. else if ($('#etherpad>iframe')) {
  47. $('#etherpad>iframe').fadeOut(300, function () {
  48. $('#etherpad>iframe').css({visibility:'hidden'});
  49. $('#etherpad').css({zIndex:0});
  50. if (!isPresentation) {
  51. $('#largeVideo').fadeIn(300, function() {
  52. $('#largeVideo').css({visibility:'visible'});
  53. });
  54. }
  55. });
  56. }
  57. };
  58. /**
  59. * Shares the Etherpad name with other participants.
  60. */
  61. function shareEtherpad() {
  62. connection.emuc.addEtherpadToPresence(etherpadName);
  63. connection.emuc.sendPresence();
  64. }
  65. /**
  66. * Creates the Etherpad button and adds it to the toolbar.
  67. */
  68. function createEtherpadButton() {
  69. //<div class="header_button_separator"></div>
  70. //<a class="button" onclick='Etherpad.openEtherpad("teeest");'>
  71. //<i title="Open shared document" class="fa fa-file-text fa-lg"></i></a>
  72. var separator = document.createElement('div');
  73. separator.className = 'header_button_separator';
  74. var button = document.createElement('a');
  75. button.className = 'button';
  76. button.setAttribute('onclick', 'Etherpad.toggleEtherpad(0);');
  77. var buttonImage = document.createElement('i');
  78. buttonImage.setAttribute('title', 'Open shared document');
  79. buttonImage.className = 'fa fa-file-text fa-lg';
  80. button.appendChild(buttonImage);
  81. var toolbar = document.getElementById('toolbar');
  82. toolbar.insertBefore(button, toolbar.childNodes[toolbar.childNodes.length - 4]);
  83. toolbar.insertBefore(separator, button);
  84. }
  85. /**
  86. * Creates the IFrame for the etherpad.
  87. */
  88. function createIFrame() {
  89. etherpadIFrame = document.createElement('iframe');
  90. etherpadIFrame.src = domain + etherpadName + options;
  91. etherpadIFrame.frameBorder = 0;
  92. etherpadIFrame.scrolling = "no";
  93. etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
  94. etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
  95. etherpadIFrame.setAttribute('style', 'visibility: hidden;');
  96. document.getElementById('etherpad').appendChild(etherpadIFrame);
  97. }
  98. /**
  99. * On Etherpad added to muc.
  100. */
  101. $(document).bind('etherpadadded.muc', function (event, jid, etherpadName) {
  102. console.log("Etherpad added", etherpadName);
  103. if (config.etherpad_base && !focus) {
  104. Etherpad.init(etherpadName);
  105. }
  106. });
  107. /**
  108. * On focus changed event.
  109. */
  110. $(document).bind('focusechanged.muc', function (event, focus) {
  111. console.log("Focus changed");
  112. if (config.etherpad_base)
  113. shareEtherpad();
  114. });
  115. /**
  116. * On video selected event.
  117. */
  118. $(document).bind('video.selected', function (event, isPresentation) {
  119. if (!config.etherpad_base)
  120. return;
  121. if (etherpadIFrame && etherpadIFrame.style.visibility != 'hidden')
  122. Etherpad.toggleEtherpad(isPresentation);
  123. });
  124. return my;
  125. }(Etherpad || {}));