search.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. (function(compodoc) {
  2. var MAX_RESULTS = 15,
  3. MAX_DESCRIPTION_SIZE = 500,
  4. usePushState = (typeof history.pushState !== 'undefined'),
  5. // DOM Elements
  6. $body = $('body'),
  7. $searchResults,
  8. $searchInput,
  9. $searchList,
  10. $searchTitle,
  11. $searchResultsCount,
  12. $searchQuery,
  13. $mainContainer,
  14. $xsMenu;
  15. // Throttle search
  16. function throttle(fn, wait) {
  17. var timeout;
  18. return function() {
  19. var ctx = this, args = arguments;
  20. if (!timeout) {
  21. timeout = setTimeout(function() {
  22. timeout = null;
  23. fn.apply(ctx, args);
  24. }, wait);
  25. }
  26. };
  27. }
  28. function displayResults(res) {
  29. var noResults = res.count == 0;
  30. $searchResults.toggleClass('no-results', noResults);
  31. // Clear old results
  32. $searchList.empty();
  33. // Display title for research
  34. $searchResultsCount.text(res.count);
  35. $searchQuery.text(res.query);
  36. // Create an <li> element for each result
  37. res.results.forEach(function(res) {
  38. var $li = $('<li>', {
  39. 'class': 'search-results-item'
  40. });
  41. var $title = $('<h3>');
  42. var $link = $('<a>', {
  43. 'href': res.url,
  44. 'text': res.title
  45. });
  46. var content = res.body.trim();
  47. if (content.length > MAX_DESCRIPTION_SIZE) {
  48. content = content.slice(0, MAX_DESCRIPTION_SIZE).trim()+'...';
  49. }
  50. var $content = $('<p>').html(content);
  51. $link.appendTo($title);
  52. $title.appendTo($li);
  53. $content.appendTo($li);
  54. $li.appendTo($searchList);
  55. });
  56. }
  57. function launchSearch(q) {
  58. $body.addClass('with-search');
  59. if ($xsMenu.css('display') === 'block') {
  60. $mainContainer.css('height', 'calc(100% - 100px)');
  61. $mainContainer.css('margin-top', '100px');
  62. }
  63. throttle(compodoc.search.query(q, 0, MAX_RESULTS)
  64. .then(function(results) {
  65. displayResults(results);
  66. }), 1000);
  67. }
  68. function closeSearch() {
  69. $body.removeClass('with-search');
  70. if ($xsMenu.css('display') === 'block') {
  71. $mainContainer.css('height', 'calc(100% - 50px)');
  72. $mainContainer.css('margin-top', '50px');
  73. }
  74. }
  75. function bindMenuButton() {
  76. document.getElementById('btn-menu').addEventListener('click', function() {
  77. if ($xsMenu.css('display') === 'none') {
  78. $body.removeClass('with-search');
  79. $mainContainer.css('height', 'calc(100% - 50px)');
  80. $mainContainer.css('margin-top', '50px');
  81. }
  82. $.each($searchInputs, function(index, item){
  83. var item = $(item);
  84. item.val('');
  85. });
  86. });
  87. }
  88. function bindSearch() {
  89. // Bind DOM
  90. $searchInputs = $('#book-search-input input');
  91. $searchResults = $('.search-results');
  92. $searchList = $searchResults.find('.search-results-list');
  93. $searchTitle = $searchResults.find('.search-results-title');
  94. $searchResultsCount = $searchTitle.find('.search-results-count');
  95. $searchQuery = $searchTitle.find('.search-query');
  96. $mainContainer = $('.container-fluid');
  97. $xsMenu = $('.xs-menu');
  98. // Launch query based on input content
  99. function handleUpdate(item) {
  100. var q = item.val();
  101. if (q.length == 0) {
  102. closeSearch();
  103. } else {
  104. launchSearch(q);
  105. }
  106. }
  107. // Detect true content change in search input
  108. var propertyChangeUnbound = false;
  109. $.each($searchInputs, function(index, item){
  110. var item = $(item);
  111. // HTML5 (IE9 & others)
  112. item.on('input', function(e) {
  113. // Unbind propertychange event for IE9+
  114. if (!propertyChangeUnbound) {
  115. $(this).unbind('propertychange');
  116. propertyChangeUnbound = true;
  117. }
  118. handleUpdate($(this));
  119. });
  120. // Workaround for IE < 9
  121. item.on('propertychange', function(e) {
  122. if (e.originalEvent.propertyName == 'value') {
  123. handleUpdate($(this));
  124. }
  125. });
  126. // Push to history on blur
  127. item.on('blur', function(e) {
  128. // Update history state
  129. if (usePushState) {
  130. var uri = updateQueryString('q', $(this).val());
  131. history.pushState({ path: uri }, null, uri);
  132. }
  133. });
  134. });
  135. }
  136. function launchSearchFromQueryString() {
  137. var q = getParameterByName('q');
  138. if (q && q.length > 0) {
  139. // Update search inputs
  140. $.each($searchInputs, function(index, item){
  141. var item = $(item);
  142. item.val(q)
  143. });
  144. // Launch search
  145. launchSearch(q);
  146. }
  147. }
  148. compodoc.addEventListener(compodoc.EVENTS.SEARCH_READY, function(event) {
  149. bindSearch();
  150. bindMenuButton();
  151. launchSearchFromQueryString();
  152. });
  153. function getParameterByName(name) {
  154. var url = window.location.href;
  155. name = name.replace(/[\[\]]/g, '\\$&');
  156. var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i'),
  157. results = regex.exec(url);
  158. if (!results) return null;
  159. if (!results[2]) return '';
  160. return decodeURIComponent(results[2].replace(/\+/g, ' '));
  161. }
  162. function updateQueryString(key, value) {
  163. value = encodeURIComponent(value);
  164. var url = window.location.href;
  165. var re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi'),
  166. hash;
  167. if (re.test(url)) {
  168. if (typeof value !== 'undefined' && value !== null)
  169. return url.replace(re, '$1' + key + '=' + value + '$2$3');
  170. else {
  171. hash = url.split('#');
  172. url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
  173. if (typeof hash[1] !== 'undefined' && hash[1] !== null)
  174. url += '#' + hash[1];
  175. return url;
  176. }
  177. }
  178. else {
  179. if (typeof value !== 'undefined' && value !== null) {
  180. var separator = url.indexOf('?') !== -1 ? '&' : '?';
  181. hash = url.split('#');
  182. url = hash[0] + separator + key + '=' + value;
  183. if (typeof hash[1] !== 'undefined' && hash[1] !== null)
  184. url += '#' + hash[1];
  185. return url;
  186. }
  187. else
  188. return url;
  189. }
  190. }
  191. })(compodoc);