searchBox.directive.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. angular.module('kityminderEditor')
  2. .directive('searchBox', function() {
  3. return {
  4. restrict: 'A',
  5. templateUrl: 'ui/directive/searchBox/searchBox.html',
  6. scope: {
  7. minder: '='
  8. },
  9. replace: true,
  10. controller: function ($scope) {
  11. var minder = $scope.minder;
  12. var editor = window.editor;
  13. $scope.handleKeyDown = handleKeyDown;
  14. $scope.doSearch = doSearch;
  15. $scope.exitSearch = exitSearch;
  16. $scope.showTip = false;
  17. $scope.showSearch = false;
  18. // 处理输入框按键事件
  19. function handleKeyDown(e) {
  20. if (e.keyCode == 13) {
  21. var direction = e.shiftKey ? 'prev' : 'next';
  22. doSearch($scope.keyword, direction);
  23. }
  24. if (e.keyCode == 27) {
  25. exitSearch();
  26. }
  27. }
  28. function exitSearch() {
  29. $('#search-input').blur();
  30. $scope.showSearch = false;
  31. minder.fire('hidenoterequest');
  32. editor.receiver.selectAll();
  33. }
  34. function enterSearch() {
  35. $scope.showSearch = true;
  36. setTimeout(function() {
  37. $('#search-input').focus();
  38. }, 10);
  39. if ($scope.keyword) {
  40. $('#search-input')[0].setSelectionRange(0, $scope.keyword.length);
  41. }
  42. }
  43. $('body').on('keydown', function(e) {
  44. if (e.keyCode == 70 && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
  45. enterSearch();
  46. $scope.$apply();
  47. e.preventDefault();
  48. }
  49. });
  50. minder.on('searchNode', function() {
  51. enterSearch();
  52. });
  53. var nodeSequence = [];
  54. var searchSequence = [];
  55. minder.on('contentchange', makeNodeSequence);
  56. makeNodeSequence();
  57. function makeNodeSequence() {
  58. nodeSequence = [];
  59. minder.getRoot().traverse(function(node) {
  60. nodeSequence.push(node);
  61. });
  62. }
  63. function makeSearchSequence(keyword) {
  64. searchSequence = [];
  65. for (var i = 0; i < nodeSequence.length; i++) {
  66. var node = nodeSequence[i];
  67. var text = node.getText().toLowerCase();
  68. if (text.indexOf(keyword) != -1) {
  69. searchSequence.push({node:node});
  70. }
  71. var note = node.getData('note');
  72. if (note && note.toLowerCase().indexOf(keyword) != -1) {
  73. searchSequence.push({node: node, keyword: keyword});
  74. }
  75. }
  76. }
  77. function doSearch(keyword, direction) {
  78. $scope.showTip = false;
  79. minder.fire('hidenoterequest');
  80. if (!keyword || !/\S/.exec(keyword)) {
  81. $('#search-input').focus();
  82. return;
  83. }
  84. // 当搜索不到节点时候默认的选项
  85. $scope.showTip = true;
  86. $scope.curIndex = 0;
  87. $scope.resultNum = 0;
  88. keyword = keyword.toLowerCase();
  89. var newSearch = doSearch.lastKeyword != keyword;
  90. doSearch.lastKeyword = keyword;
  91. if (newSearch) {
  92. makeSearchSequence(keyword);
  93. }
  94. $scope.resultNum = searchSequence.length;
  95. if (searchSequence.length) {
  96. var curIndex = newSearch ? 0 : (direction === 'next' ? doSearch.lastIndex + 1 : doSearch.lastIndex - 1) || 0;
  97. curIndex = (searchSequence.length + curIndex) % searchSequence.length;
  98. setSearchResult(searchSequence[curIndex].node, searchSequence[curIndex].keyword);
  99. doSearch.lastIndex = curIndex;
  100. $scope.curIndex = curIndex + 1;
  101. function setSearchResult(node, previewKeyword) {
  102. minder.execCommand('camera', node, 50);
  103. setTimeout(function () {
  104. minder.select(node, true);
  105. if (!node.isExpanded()) minder.execCommand('expand', true);
  106. if (previewKeyword) {
  107. minder.fire('shownoterequest', {node: node, keyword: previewKeyword});
  108. }
  109. }, 60);
  110. }
  111. }
  112. }
  113. }
  114. }
  115. });