insight.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /**
  2. * Insight search plugin
  3. * @author PPOffice { @link https://github.com/ppoffice }
  4. */
  5. (function ($, CONFIG) {
  6. var $main = $('.ins-search');
  7. var $input = $main.find('.ins-search-input');
  8. var $wrapper = $main.find('.ins-section-wrapper');
  9. var $container = $main.find('.ins-section-container');
  10. $main.parent().remove('.ins-search');
  11. $('body').append($main);
  12. function section (title) {
  13. return $('<section>').addClass('ins-section')
  14. .append($('<header>').addClass('ins-section-header').text(title));
  15. }
  16. function searchItem (icon, title, slug, preview, url) {
  17. return $('<div>').addClass('ins-selectable').addClass('ins-search-item')
  18. .append($('<header>').append($('<i>').addClass('fa').addClass('fa-' + icon)).append(title != null && title != '' ? title : CONFIG.TRANSLATION['UNTITLED'])
  19. .append(slug ? $('<span>').addClass('ins-slug').text(slug) : null))
  20. .append(preview ? $('<p>').addClass('ins-search-preview').text(preview) : null)
  21. .attr('data-url', url);
  22. }
  23. function sectionFactory (type, array) {
  24. var sectionTitle;
  25. var $searchItems;
  26. if (array.length === 0) return null;
  27. sectionTitle = CONFIG.TRANSLATION[type];
  28. switch (type) {
  29. case 'POSTS':
  30. case 'PAGES':
  31. $searchItems = array.map(function (item) {
  32. // Use config.root instead of permalink to fix url issue
  33. return searchItem('file', item.title, null, item.text.slice(0, 150), CONFIG.ROOT_URL + item.path);
  34. });
  35. break;
  36. case 'CATEGORIES':
  37. case 'TAGS':
  38. $searchItems = array.map(function (item) {
  39. return searchItem(type === 'CATEGORIES' ? 'folder' : 'tag', item.name, item.slug, null, item.permalink);
  40. });
  41. break;
  42. default:
  43. return null;
  44. }
  45. return section(sectionTitle).append($searchItems);
  46. }
  47. function extractToSet (json, key) {
  48. var values = {};
  49. var entries = json.pages.concat(json.posts);
  50. entries.forEach(function (entry) {
  51. if (entry[key]) {
  52. entry[key].forEach(function (value) {
  53. values[value.name] = value;
  54. });
  55. }
  56. });
  57. var result = [];
  58. for (var key in values) {
  59. result.push(values[key]);
  60. }
  61. return result;
  62. }
  63. function parseKeywords (keywords) {
  64. return keywords.split(' ').filter(function (keyword) {
  65. return !!keyword;
  66. }).map(function (keyword) {
  67. return keyword.toUpperCase();
  68. });
  69. }
  70. /**
  71. * Judge if a given post/page/category/tag contains all of the keywords.
  72. * @param Object obj Object to be weighted
  73. * @param Array<String> fields Object's fields to find matches
  74. */
  75. function filter (keywords, obj, fields) {
  76. var result = false;
  77. var keywordArray = parseKeywords(keywords);
  78. var containKeywords = keywordArray.filter(function (keyword) {
  79. var containFields = fields.filter(function (field) {
  80. if (!obj.hasOwnProperty(field))
  81. return false;
  82. if (obj[field].toUpperCase().indexOf(keyword) > -1)
  83. return true;
  84. });
  85. if (containFields.length > 0)
  86. return true;
  87. return false;
  88. });
  89. return containKeywords.length === keywordArray.length;
  90. }
  91. function filterFactory (keywords) {
  92. return {
  93. POST: function (obj) {
  94. return filter(keywords, obj, ['title', 'text']);
  95. },
  96. PAGE: function (obj) {
  97. return filter(keywords, obj, ['title', 'text']);
  98. },
  99. CATEGORY: function (obj) {
  100. return filter(keywords, obj, ['name', 'slug']);
  101. },
  102. TAG: function (obj) {
  103. return filter(keywords, obj, ['name', 'slug']);
  104. }
  105. };
  106. }
  107. /**
  108. * Calculate the weight of a matched post/page/category/tag.
  109. * @param Object obj Object to be weighted
  110. * @param Array<String> fields Object's fields to find matches
  111. * @param Array<Integer> weights Weight of every field
  112. */
  113. function weight (keywords, obj, fields, weights) {
  114. var value = 0;
  115. parseKeywords(keywords).forEach(function (keyword) {
  116. var pattern = new RegExp(keyword, 'img'); // Global, Multi-line, Case-insensitive
  117. fields.forEach(function (field, index) {
  118. if (obj.hasOwnProperty(field)) {
  119. var matches = obj[field].match(pattern);
  120. value += matches ? matches.length * weights[index] : 0;
  121. }
  122. });
  123. });
  124. return value;
  125. }
  126. function weightFactory (keywords) {
  127. return {
  128. POST: function (obj) {
  129. return weight(keywords, obj, ['title', 'text'], [3, 1]);
  130. },
  131. PAGE: function (obj) {
  132. return weight(keywords, obj, ['title', 'text'], [3, 1]);
  133. },
  134. CATEGORY: function (obj) {
  135. return weight(keywords, obj, ['name', 'slug'], [1, 1]);
  136. },
  137. TAG: function (obj) {
  138. return weight(keywords, obj, ['name', 'slug'], [1, 1]);
  139. }
  140. };
  141. }
  142. function search (json, keywords) {
  143. var WEIGHTS = weightFactory(keywords);
  144. var FILTERS = filterFactory(keywords);
  145. var posts = json.posts;
  146. var pages = json.pages;
  147. var tags = extractToSet(json, 'tags');
  148. var categories = extractToSet(json, 'categories');
  149. return {
  150. posts: posts.filter(FILTERS.POST).sort(function (a, b) { return WEIGHTS.POST(b) - WEIGHTS.POST(a); }).slice(0, 5),
  151. pages: pages.filter(FILTERS.PAGE).sort(function (a, b) { return WEIGHTS.PAGE(b) - WEIGHTS.PAGE(a); }).slice(0, 5),
  152. categories: categories.filter(FILTERS.CATEGORY).sort(function (a, b) { return WEIGHTS.CATEGORY(b) - WEIGHTS.CATEGORY(a); }).slice(0, 5),
  153. tags: tags.filter(FILTERS.TAG).sort(function (a, b) { return WEIGHTS.TAG(b) - WEIGHTS.TAG(a); }).slice(0, 5)
  154. };
  155. }
  156. function searchResultToDOM (searchResult) {
  157. $container.empty();
  158. for (var key in searchResult) {
  159. $container.append(sectionFactory(key.toUpperCase(), searchResult[key]));
  160. }
  161. }
  162. function scrollTo ($item) {
  163. if ($item.length === 0) return;
  164. var wrapperHeight = $wrapper[0].clientHeight;
  165. var itemTop = $item.position().top - $wrapper.scrollTop();
  166. var itemBottom = $item[0].clientHeight + $item.position().top;
  167. if (itemBottom > wrapperHeight + $wrapper.scrollTop()) {
  168. $wrapper.scrollTop(itemBottom - $wrapper[0].clientHeight);
  169. }
  170. if (itemTop < 0) {
  171. $wrapper.scrollTop($item.position().top);
  172. }
  173. }
  174. function selectItemByDiff (value) {
  175. var $items = $.makeArray($container.find('.ins-selectable'));
  176. var prevPosition = -1;
  177. $items.forEach(function (item, index) {
  178. if ($(item).hasClass('active')) {
  179. prevPosition = index;
  180. return;
  181. }
  182. });
  183. var nextPosition = ($items.length + prevPosition + value) % $items.length;
  184. $($items[prevPosition]).removeClass('active');
  185. $($items[nextPosition]).addClass('active');
  186. scrollTo($($items[nextPosition]));
  187. }
  188. function gotoLink ($item) {
  189. if ($item && $item.length) {
  190. location.href = $item.attr('data-url');
  191. }
  192. }
  193. $.getJSON(CONFIG.CONTENT_URL, function (json) {
  194. if (location.hash.trim() === '#ins-search') {
  195. $main.addClass('show');
  196. }
  197. $input.on('input', function () {
  198. var keywords = $(this).val();
  199. searchResultToDOM(search(json, keywords));
  200. });
  201. $input.trigger('input');
  202. });
  203. $(document).on('click focus', '.search-form-input', function () {
  204. $main.addClass('show');
  205. $main.find('.ins-search-input').focus();
  206. }).on('click', '.ins-search-item', function () {
  207. gotoLink($(this));
  208. }).on('click', '.ins-close', function () {
  209. $main.removeClass('show');
  210. }).on('keydown', function (e) {
  211. if (!$main.hasClass('show')) return;
  212. switch (e.keyCode) {
  213. case 27: // ESC
  214. $main.removeClass('show'); break;
  215. case 38: // UP
  216. selectItemByDiff(-1); break;
  217. case 40: // DOWN
  218. selectItemByDiff(1); break;
  219. case 13: //ENTER
  220. gotoLink($container.find('.ins-selectable.active').eq(0)); break;
  221. }
  222. });
  223. })(jQuery, window.INSIGHT_CONFIG);