Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add progress display for grep view

  • Loading branch information...
commit 71fb130cf192a572f4618bbb92466070c4e6b8fe 1 parent 80850fe
Per Thulin authored

Showing 3 changed files with 58 additions and 49 deletions. Show diff stats Hide diff stats

  1. +24 18 js/GrepView.js
  2. +33 30 js/GrepWorker.js
  3. +1 1  template.html
42 js/GrepView.js
@@ -5,7 +5,7 @@ function GrepView(happyEdit) {
5 5 self.$view = document.querySelector('#grep');
6 6 self.$h1 = self.$view.querySelector('h1');
7 7 self.$ul = self.$view.querySelector('ul');
8   - self.$loading = self.$view.querySelector('.loading');
  8 + self.$progress = self.$view.querySelector('.progress');
9 9 self.$error = self.$view.querySelector('.error');
10 10 self.worker = new GrepWorker(happyEdit.fileSystem);
11 11
@@ -55,32 +55,38 @@ function GrepView(happyEdit) {
55 55 return false;
56 56 };
57 57
  58 + self.progressCallback = function(filename, count, nFiles) {
  59 + self.$progress.innerHTML = count + '/' + nFiles + ' ' + filename;
  60 + };
  61 +
  62 + self.matchFoundCallback = function(filename, lineNumber, snippet) {
  63 + var model = {
  64 + snippet: snippet,
  65 + lineNumber: lineNumber,
  66 + filename: filename
  67 + };
  68 +
  69 + var $view = HTML.createGrepListItem(model);
  70 +
  71 + self.list.addItem({
  72 + model: model,
  73 + $view: $view
  74 + });
  75 +
  76 + self.$ul.appendChild($view);
  77 + };
  78 +
58 79 self.load = function(q) {
59 80 self.reset();
60 81 self.$h1.innerHTML = q;
61   -
62   - self.worker.findInAllFiles(q, function(filename, lineNumber, snippet) {
63   - var model = {
64   - snippet: snippet,
65   - lineNumber: lineNumber,
66   - filename: filename
67   - };
68   -
69   - var $view = HTML.createGrepListItem(model);
70   -
71   - self.list.addItem({
72   - model: model,
73   - $view: $view
74   - });
75   -
76   - self.$ul.appendChild($view);
77   - });
  82 + self.worker.findInAllFiles(q, self.progressCallback, self.matchFoundCallback);
78 83 };
79 84
80 85 self.reset = function() {
81 86 self.list.setData([]);
82 87 self.$h1.innerHTML = '';
83 88 self.$ul.innerHTML = '';
  89 + self.$progress.innerHTML = '';
84 90 self.hideError();
85 91 };
86 92
63 js/GrepWorker.js
... ... @@ -1,5 +1,15 @@
  1 +/**
  2 + * Searches all files in the FileSystem after a passed in query string.
  3 + *
  4 + * This system is not utilizing web workers right now, but that is the plan.
  5 + */
1 6 function GrepWorker(fileSystem) {
2 7 var self = this;
  8 +
  9 + // Variables used to show progress.
  10 + self.count = 0;
  11 + self.nFiles = 0;
  12 +
3 13 self.hasReceivedStopSignal = false;
4 14
5 15 self.stop = function() {
@@ -11,50 +21,43 @@ function GrepWorker(fileSystem) {
11 21 * When a match is found, the passed in callback is called. As more matches
12 22 * are found, the callback is called repeatadly.
13 23 */
14   - self.findInAllFiles = function(q, matchFoundCallback) {
  24 + self.findInAllFiles = function(q, progressCallback, matchFoundCallback) {
15 25 var files = fileSystem.getFlatList();
16   - console.log('flatlist', files);
17   - self.searchNextFile(files, q, matchFoundCallback);
  26 + self.progressCallback = progressCallback;
  27 + self.matchFoundCallback = matchFoundCallback;
  28 + self.count = 0;
  29 + self.nFiles = files.length;
  30 + self.searchNext(files, q);
18 31 };
19 32
20   - self.searchNextFile = function(files, q, matchFoundCallback) {
  33 + self.searchNext = function(files, q) {
21 34 if (files.length === 0 || self.hasReceivedStopSignal) {
22 35 return;
23 36 }
24 37
25 38 var filename = files.pop();
26 39
27   - self.searchFile(filename, q, function(filename, lineNumber, snippet) {
28   - if (lineNumber !== -1) {
29   - matchFoundCallback(filename, lineNumber, snippet);
30   - }
31   -
32   - self.searchNextFile(files, q, matchFoundCallback);
  40 + fileSystem.getFile(filename, function(body) {
  41 + self.progressCallback(filename, ++self.count, self.nFiles);
  42 + self.match(filename, body, q);
  43 + self.searchNext(files, q);
33 44 });
34 45 };
35 46
36 47 /**
37   - * Fetches and searches the passed in file. Returns -1 if no match was
38   - * found.
39   - *
40   - * TODO: implement more bulletproof method than the current splitting on
41   - * newline character.
  48 + * TODO: move this job to a web worker.
42 49 */
43   - self.searchFile = function(filename, q, callback) {
44   - console.log('searching', filename);
45   - fileSystem.getFile(filename, function(body) {
46   - var rows = body.split('\n');
47   - rows.forEach(function(row, i) {
48   - var lineNumber = -1;
49   - var snippet = null;
50   -
51   - if (row.indexOf(q) !== -1) {
52   - lineNumber = i+1;
53   - snippet = row;
54   - }
55   -
56   - callback(filename, lineNumber, snippet);
57   - });
  50 + self.match = function(filename, body, q) {
  51 + var rows = body.split('\n');
  52 + rows.forEach(function(row, i) {
  53 + var lineNumber = -1;
  54 + var snippet = null;
  55 +
  56 + if (row.indexOf(q) !== -1) {
  57 + lineNumber = i+1;
  58 + snippet = row;
  59 + self.matchFoundCallback(filename, lineNumber, snippet);
  60 + }
58 61 });
59 62 };
60 63 }
2  template.html
@@ -96,7 +96,7 @@ <h2 class="title"></h2>
96 96 <div id="explorer" style="display:none"></div>
97 97 <div id="grep" style="display:none" class="list-view">
98 98 <h1></h1>
99   - <span class="loading" style="display:none">Loading...</span>
  99 + <span class="progress"></span>
100 100 <span class="error" style="display:none"></span>
101 101 <ul></ul>
102 102 </div>

0 comments on commit 71fb130

Please sign in to comment.
Something went wrong with that request. Please try again.