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.

172 lines
5.7 KiB

  1. var Toolbar = function ($, container, Messages, myUserName, realtime) {
  2. /** Id of the element for getting debug info. */
  3. var DEBUG_LINK_CLS = 'rtwysiwyg-debug-link';
  4. /** Id of the div containing the user list. */
  5. var USER_LIST_CLS = 'rtwysiwyg-user-list';
  6. /** Id of the div containing the lag info. */
  7. var LAG_ELEM_CLS = 'rtwysiwyg-lag';
  8. /** The toolbar class which contains the user list, debug link and lag. */
  9. var TOOLBAR_CLS = 'rtwysiwyg-toolbar';
  10. /** Key in the localStore which indicates realtime activity should be disallowed. */
  11. var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow';
  12. var SPINNER_DISAPPEAR_TIME = 3000;
  13. var SPINNER = [ '-', '\\', '|', '/' ];
  14. var uid = function () {
  15. return 'rtwysiwyg-uid-' + String(Math.random()).substring(2);
  16. };
  17. var createRealtimeToolbar = function (container) {
  18. var id = uid();
  19. $(container).prepend(
  20. '<div class="' + TOOLBAR_CLS + '" id="' + id + '">' +
  21. '<div class="rtwysiwyg-toolbar-leftside"></div>' +
  22. '<div class="rtwysiwyg-toolbar-rightside"></div>' +
  23. '</div>'
  24. );
  25. var toolbar = $('#'+id);
  26. toolbar.append([
  27. '<style>',
  28. '.' + TOOLBAR_CLS + ' {',
  29. ' color: #666;',
  30. ' font-weight: bold;',
  31. // ' background-color: #f0f0ee;',
  32. // ' border-bottom: 1px solid #DDD;',
  33. // ' border-top: 3px solid #CCC;',
  34. // ' border-right: 2px solid #CCC;',
  35. // ' border-left: 2px solid #CCC;',
  36. ' height: 26px;',
  37. ' margin-bottom: -3px;',
  38. ' display: inline-block;',
  39. ' width: 100%;',
  40. '}',
  41. '.' + TOOLBAR_CLS + ' div {',
  42. ' padding: 0 10px;',
  43. ' height: 1.5em;',
  44. // ' background: #f0f0ee;',
  45. ' line-height: 25px;',
  46. ' height: 22px;',
  47. '}',
  48. '.rtwysiwyg-toolbar-leftside {',
  49. ' float: left;',
  50. '}',
  51. '.rtwysiwyg-toolbar-rightside {',
  52. ' float: right;',
  53. '}',
  54. '.rtwysiwyg-lag {',
  55. ' float: right;',
  56. '}',
  57. '.rtwysiwyg-spinner {',
  58. ' float: left;',
  59. '}',
  60. '.gwt-TabBar {',
  61. ' display:none;',
  62. '}',
  63. '.' + DEBUG_LINK_CLS + ':link { color:transparent; }',
  64. '.' + DEBUG_LINK_CLS + ':link:hover { color:blue; }',
  65. '.gwt-TabPanelBottom { border-top: 0 none; }',
  66. '</style>'
  67. ].join('\n'));
  68. return toolbar;
  69. };
  70. var createSpinner = function (container) {
  71. var id = uid();
  72. $(container).append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>');
  73. return $('#'+id)[0];
  74. };
  75. var kickSpinner = function (spinnerElement, reversed) {
  76. var txt = spinnerElement.textContent || '-';
  77. var inc = (reversed) ? -1 : 1;
  78. spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length];
  79. spinnerElement.timeout && clearTimeout(spinnerElement.timeout);
  80. spinnerElement.timeout = setTimeout(function () {
  81. spinnerElement.textContent = '';
  82. }, SPINNER_DISAPPEAR_TIME);
  83. };
  84. var createUserList = function (container) {
  85. var id = uid();
  86. $(container).prepend('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>');
  87. return $('#'+id)[0];
  88. };
  89. var updateUserList = function (myUserName, listElement, userList) {
  90. var meIdx = userList.indexOf(myUserName);
  91. if (meIdx === -1) {
  92. listElement.textContent = Messages.synchronizing;
  93. return;
  94. }
  95. if (userList.length === 1) {
  96. listElement.textContent = Messages.editingAlone;
  97. } else if (userList.length === 2) {
  98. listElement.textContent = Messages.editingWithOneOtherPerson;
  99. } else {
  100. listElement.textContent = Messages.editingWith + ' ' + (userList.length - 1) + ' '
  101. Messages.otherPeople;
  102. }
  103. };
  104. var createLagElement = function (container) {
  105. var id = uid();
  106. $(container).append('<div class="' + LAG_ELEM_CLS + '" id="'+id+'"></div>');
  107. return $('#'+id)[0];
  108. };
  109. var checkLag = function (realtime, lagElement) {
  110. var lag = realtime.getLag();
  111. var lagSec = lag.lag/1000;
  112. var lagMsg = Messages.lag + ' ';
  113. if (lag.waiting && lagSec > 1) {
  114. lagMsg += "?? " + Math.floor(lagSec);
  115. } else {
  116. lagMsg += lagSec;
  117. }
  118. lagElement.textContent = lagMsg;
  119. };
  120. var toolbar = createRealtimeToolbar(container);
  121. var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside'));
  122. var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside'));
  123. var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));
  124. var connected = false;
  125. realtime.onUserListChange(function (userList) {
  126. if (userList.indexOf(myUserName) !== -1) { connected = true; }
  127. if (!connected) { return; }
  128. updateUserList(myUserName, userListElement, userList);
  129. });
  130. var ks = function () {
  131. if (connected) { kickSpinner(spinner, false); }
  132. };
  133. realtime.onPatch(ks);
  134. realtime.onMessage(ks);
  135. setInterval(function () {
  136. if (!connected) { return; }
  137. checkLag(realtime, lagElement);
  138. }, 3000);
  139. return {
  140. reconnecting: function () {
  141. connected = false;
  142. userListElement.textContent = Messages.reconnecting;
  143. lagElement.textContent = '';
  144. },
  145. connected: function () {
  146. connected = true;
  147. }
  148. };
  149. };