examples.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /**
  2. * This JS file is for examples list and actions linked to examples.
  3. */
  4. class Examples {
  5. constructor(parent) {
  6. this.parent = parent;
  7. this.isExamplesDisplayed = false;
  8. this.fpsLabel = document.getElementById('fpsLabel');
  9. this.examplesButtons = document.getElementsByClassName('examplesButton');
  10. this.exampleList = document.getElementById('exampleList');
  11. /**
  12. * Display / hide with the "examples" button. On any size interface
  13. */
  14. if (this.examplesButtons.length > 0) {
  15. for (var i = 0; i < this.examplesButtons.length; i++) {
  16. this.examplesButtons[i].parentElement.onclick = function () {
  17. if (!this.isExamplesDisplayed) this.displayExamples();
  18. else this.hideExamples();
  19. }.bind(this);
  20. }
  21. }
  22. // There's a "close" button on the mobile interface.
  23. document.getElementById('examplesButtonClose').addEventListener('click', this.hideExamples.bind(this));
  24. /**
  25. * The filter bar is used to search a thing on the examples.
  26. * This react on any input on the bar, or on a click on the search button.
  27. */
  28. var filterBar = document.getElementById('filterBar');
  29. if (filterBar) {
  30. var filterBarClear = document.getElementById('filterBarClear');
  31. var filter = function () {
  32. var filterText = filterBar.value.toLowerCase();
  33. if (filterText == '') filterBarClear.style.display = 'none';
  34. else filterBarClear.style.display = 'inline-block';
  35. var lines = document.getElementsByClassName('itemLine');
  36. for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
  37. var line = lines[lineIndex];
  38. if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
  39. line.style.display = '';
  40. } else {
  41. line.style.display = 'none';
  42. }
  43. }
  44. var categories = document.getElementsByClassName('categoryContainer');
  45. var displayCount = categories.length;
  46. for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
  47. var category = categories[categoryIndex];
  48. category.style.display = 'block';
  49. if (category.clientHeight < 25) {
  50. category.style.display = 'none';
  51. displayCount--;
  52. }
  53. }
  54. if (displayCount == 0) document.getElementById('noResultsContainer').style.display = 'block';
  55. else document.getElementById('noResultsContainer').style.display = 'none';
  56. }
  57. filterBar.oninput = function () {
  58. filter();
  59. }
  60. filterBarClear.onclick = function () {
  61. filterBar.value = '';
  62. filter();
  63. }
  64. }
  65. }
  66. /**
  67. * Function to display the examples menu
  68. */
  69. displayExamples() {
  70. this.parent.menuPG.removeAllOptions();
  71. this.isExamplesDisplayed = true;
  72. this.exampleList.style.display = 'block';
  73. document.getElementsByClassName('wrapper')[0].style.width = 'calc(100% - 400px)';
  74. this.fpsLabel.style.display = 'none';
  75. this.toggleExamplesButtons.call(this, true);
  76. };
  77. /**
  78. * Function to hide the examples menu
  79. */
  80. hideExamples() {
  81. this.isExamplesDisplayed = false;
  82. this.exampleList.style.display = 'none';
  83. document.getElementsByClassName('wrapper')[0].style.width = '100%';
  84. if(this.parent.menuPG && this.parent.menuPG.isMobileVersion && document.getElementById('jsEditor').style.display == 'block') {}
  85. else this.fpsLabel.style.display = 'block';
  86. this.toggleExamplesButtons.call(this, false);
  87. };
  88. toggleExamplesButtons(selected) {
  89. if (this.examplesButtons.length > 0) {
  90. for (var i = 0; i < this.examplesButtons.length; i++) {
  91. if(selected)
  92. this.examplesButtons[i].parentElement.classList.add("selected");
  93. else
  94. this.examplesButtons[i].parentElement.classList.remove("selected");
  95. }
  96. }
  97. };
  98. }