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.

UIUtil.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /* global $, config, interfaceConfig */
  2. /**
  3. * Created by hristo on 12/22/14.
  4. */
  5. var UIUtil = {
  6. /**
  7. * Returns the size of the side panel.
  8. */
  9. getSidePanelSize () {
  10. var availableHeight = window.innerHeight;
  11. var availableWidth = window.innerWidth;
  12. var panelWidth = 200;
  13. if (availableWidth * 0.2 < 200) {
  14. panelWidth = availableWidth * 0.2;
  15. }
  16. return [panelWidth, availableHeight];
  17. },
  18. /**
  19. * Returns the available video width.
  20. */
  21. getAvailableVideoWidth: function (isSidePanelVisible) {
  22. let rightPanelWidth = 0;
  23. if (isSidePanelVisible) {
  24. rightPanelWidth = UIUtil.getSidePanelSize()[0];
  25. }
  26. return window.innerWidth - rightPanelWidth;
  27. },
  28. /**
  29. * Changes the style class of the element given by id.
  30. */
  31. buttonClick: function(id, classname) {
  32. $(id).toggleClass(classname); // add the class to the clicked element
  33. },
  34. /**
  35. * Returns the text width for the given element.
  36. *
  37. * @param el the element
  38. */
  39. getTextWidth: function (el) {
  40. return (el.clientWidth + 1);
  41. },
  42. /**
  43. * Returns the text height for the given element.
  44. *
  45. * @param el the element
  46. */
  47. getTextHeight: function (el) {
  48. return (el.clientHeight + 1);
  49. },
  50. /**
  51. * Plays the sound given by id.
  52. *
  53. * @param id the identifier of the audio element.
  54. */
  55. playSoundNotification: function (id) {
  56. document.getElementById(id).play();
  57. },
  58. /**
  59. * Escapes the given text.
  60. */
  61. escapeHtml: function (unsafeText) {
  62. return $('<div/>').text(unsafeText).html();
  63. },
  64. imageToGrayScale: function (canvas) {
  65. var context = canvas.getContext('2d');
  66. var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
  67. var pixels = imgData.data;
  68. for (var i = 0, n = pixels.length; i < n; i += 4) {
  69. var grayscale
  70. = pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
  71. pixels[i ] = grayscale; // red
  72. pixels[i+1] = grayscale; // green
  73. pixels[i+2] = grayscale; // blue
  74. // pixels[i+3] is alpha
  75. }
  76. // redraw the image in black & white
  77. context.putImageData(imgData, 0, 0);
  78. },
  79. setTooltip: function (element, key, position) {
  80. element.setAttribute("data-i18n", "[data-content]" + key);
  81. element.setAttribute("data-toggle", "popover");
  82. element.setAttribute("data-placement", position);
  83. element.setAttribute("data-html", true);
  84. element.setAttribute("data-container", "body");
  85. },
  86. /**
  87. * Inserts given child element as the first one into the container.
  88. * @param container the container to which new child element will be added
  89. * @param newChild the new element that will be inserted into the container
  90. */
  91. prependChild: function (container, newChild) {
  92. var firstChild = container.childNodes[0];
  93. if (firstChild) {
  94. container.insertBefore(newChild, firstChild);
  95. } else {
  96. container.appendChild(newChild);
  97. }
  98. },
  99. isButtonEnabled: function (name) {
  100. var isEnabled = interfaceConfig.TOOLBAR_BUTTONS.indexOf(name) !== -1;
  101. if (name === 'prezi') {
  102. return isEnabled && !config.disablePrezi;
  103. } else if (name === 'recording') {
  104. return isEnabled && config.enableRecording;
  105. }
  106. return isEnabled;
  107. },
  108. hideDisabledButtons: function (mappings) {
  109. var selector = Object.keys(mappings)
  110. .map(function (buttonName) {
  111. return UIUtil.isButtonEnabled(buttonName)
  112. ? null : mappings[buttonName]; })
  113. .filter(function (item) { return item; })
  114. .join(',');
  115. $(selector).hide();
  116. },
  117. redirect (url) {
  118. window.location.href = url;
  119. },
  120. isFullScreen () {
  121. return document.fullScreen
  122. || document.mozFullScreen
  123. || document.webkitIsFullScreen;
  124. }
  125. };
  126. export default UIUtil;