visualsearch-rails 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. data/.gitignore +7 -0
  2. data/.travis.yml +4 -0
  3. data/Changelog.md +4 -0
  4. data/Gemfile +2 -0
  5. data/Rakefile +5 -0
  6. data/Readme.md +24 -0
  7. data/app/assets/css/icons.css +19 -0
  8. data/app/assets/css/reset.css +30 -0
  9. data/app/assets/css/workspace.css +290 -0
  10. data/app/assets/images/cancel_search.png +0 -0
  11. data/app/assets/images/search_glyph.png +0 -0
  12. data/app/assets/javascripts/backbone-0.9.10.js +1498 -0
  13. data/app/assets/javascripts/dependencies.js +14843 -0
  14. data/app/assets/javascripts/jquery.ui.autocomplete.js +614 -0
  15. data/app/assets/javascripts/jquery.ui.core.js +324 -0
  16. data/app/assets/javascripts/jquery.ui.datepicker.js +5 -0
  17. data/app/assets/javascripts/jquery.ui.menu.js +621 -0
  18. data/app/assets/javascripts/jquery.ui.position.js +497 -0
  19. data/app/assets/javascripts/jquery.ui.widget.js +521 -0
  20. data/app/assets/javascripts/underscore-1.4.3.js +1221 -0
  21. data/app/assets/javascripts/visualsearch/js/models/search_facets.js +67 -0
  22. data/app/assets/javascripts/visualsearch/js/models/search_query.js +70 -0
  23. data/app/assets/javascripts/visualsearch/js/templates/search_box.jst +8 -0
  24. data/app/assets/javascripts/visualsearch/js/templates/search_facet.jst +9 -0
  25. data/app/assets/javascripts/visualsearch/js/templates/search_input.jst +1 -0
  26. data/app/assets/javascripts/visualsearch/js/templates/templates.js +7 -0
  27. data/app/assets/javascripts/visualsearch/js/utils/backbone_extensions.js +17 -0
  28. data/app/assets/javascripts/visualsearch/js/utils/hotkeys.js +99 -0
  29. data/app/assets/javascripts/visualsearch/js/utils/inflector.js +21 -0
  30. data/app/assets/javascripts/visualsearch/js/utils/jquery_extensions.js +197 -0
  31. data/app/assets/javascripts/visualsearch/js/utils/search_parser.js +87 -0
  32. data/app/assets/javascripts/visualsearch/js/views/search_box.js +447 -0
  33. data/app/assets/javascripts/visualsearch/js/views/search_facet.js +444 -0
  34. data/app/assets/javascripts/visualsearch/js/views/search_input.js +409 -0
  35. data/app/assets/javascripts/visualsearch/js/visualsearch.js +77 -0
  36. data/lib/generators/visual_search_install.rb +30 -0
  37. data/lib/visualsearch-rails.rb +2 -0
  38. data/lib/visualsearch/rails.rb +6 -0
  39. data/lib/visualsearch/version.rb +3 -0
  40. data/visualsearch-rails.gemspec +26 -0
  41. metadata +165 -0
@@ -0,0 +1,87 @@
1
+ (function() {
2
+
3
+ var $ = jQuery; // Handle namespaced jQuery
4
+
5
+ // Used to extract keywords and facets from the free text search.
6
+ var QUOTES_RE = "('[^']+'|\"[^\"]+\")";
7
+ var FREETEXT_RE = "('[^']+'|\"[^\"]+\"|[^'\"\\s]\\S*)";
8
+ var CATEGORY_RE = FREETEXT_RE + ':\\s*';
9
+ VS.app.SearchParser = {
10
+
11
+ // Matches `category: "free text"`, with and without quotes.
12
+ ALL_FIELDS : new RegExp(CATEGORY_RE + FREETEXT_RE, 'g'),
13
+
14
+ // Matches a single category without the text. Used to correctly extract facets.
15
+ CATEGORY : new RegExp(CATEGORY_RE),
16
+
17
+ // Called to parse a query into a collection of `SearchFacet` models.
18
+ parse : function(instance, query) {
19
+ var searchFacets = this._extractAllFacets(instance, query);
20
+ instance.searchQuery.reset(searchFacets);
21
+ return searchFacets;
22
+ },
23
+
24
+ // Walks the query and extracts facets, categories, and free text.
25
+ _extractAllFacets : function(instance, query) {
26
+ var facets = [];
27
+ var originalQuery = query;
28
+ while (query) {
29
+ var category, value;
30
+ originalQuery = query;
31
+ var field = this._extractNextField(query);
32
+ if (!field) {
33
+ category = instance.options.remainder;
34
+ value = this._extractSearchText(query);
35
+ query = VS.utils.inflector.trim(query.replace(value, ''));
36
+ } else if (field.indexOf(':') != -1) {
37
+ category = field.match(this.CATEGORY)[1].replace(/(^['"]|['"]$)/g, '');
38
+ value = field.replace(this.CATEGORY, '').replace(/(^['"]|['"]$)/g, '');
39
+ query = VS.utils.inflector.trim(query.replace(field, ''));
40
+ } else if (field.indexOf(':') == -1) {
41
+ category = instance.options.remainder;
42
+ value = field;
43
+ query = VS.utils.inflector.trim(query.replace(value, ''));
44
+ }
45
+
46
+ if (category && value) {
47
+ var searchFacet = new VS.model.SearchFacet({
48
+ category : category,
49
+ value : VS.utils.inflector.trim(value),
50
+ app : instance
51
+ });
52
+ facets.push(searchFacet);
53
+ }
54
+ if (originalQuery == query) break;
55
+ }
56
+
57
+ return facets;
58
+ },
59
+
60
+ // Extracts the first field found, capturing any free text that comes
61
+ // before the category.
62
+ _extractNextField : function(query) {
63
+ var textRe = new RegExp('^\\s*(\\S+)\\s+(?=' + QUOTES_RE + FREETEXT_RE + ')');
64
+ var textMatch = query.match(textRe);
65
+ if (textMatch && textMatch.length >= 1) {
66
+ return textMatch[1];
67
+ } else {
68
+ return this._extractFirstField(query);
69
+ }
70
+ },
71
+
72
+ // If there is no free text before the facet, extract the category and value.
73
+ _extractFirstField : function(query) {
74
+ var fields = query.match(this.ALL_FIELDS);
75
+ return fields && fields.length && fields[0];
76
+ },
77
+
78
+ // If the found match is not a category and facet, extract the trimmed free text.
79
+ _extractSearchText : function(query) {
80
+ query = query || '';
81
+ var text = VS.utils.inflector.trim(query.replace(this.ALL_FIELDS, ''));
82
+ return text;
83
+ }
84
+
85
+ };
86
+
87
+ })();
@@ -0,0 +1,447 @@
1
+ (function() {
2
+
3
+ var $ = jQuery; // Handle namespaced jQuery
4
+
5
+ // The search box is responsible for managing the many facet views and input views.
6
+ VS.ui.SearchBox = Backbone.View.extend({
7
+
8
+ id : 'search',
9
+
10
+ events : {
11
+ 'click .VS-cancel-search-box' : 'clearSearch',
12
+ 'mousedown .VS-search-box' : 'maybeFocusSearch',
13
+ 'dblclick .VS-search-box' : 'highlightSearch',
14
+ 'click .VS-search-box' : 'maybeTripleClick'
15
+ },
16
+
17
+ // Creating a new SearchBox registers handlers for re-rendering facets when necessary,
18
+ // as well as handling typing when a facet is selected.
19
+ initialize : function() {
20
+ this.app = this.options.app;
21
+ this.flags = {
22
+ allSelected : false
23
+ };
24
+ this.facetViews = [];
25
+ this.inputViews = [];
26
+ _.bindAll(this, 'renderFacets', '_maybeDisableFacets', 'disableFacets',
27
+ 'deselectAllFacets', 'addedFacet', 'removedFacet', 'changedFacet');
28
+ this.app.searchQuery
29
+ .bind('reset', this.renderFacets)
30
+ .bind('add', this.addedFacet)
31
+ .bind('remove', this.removedFacet)
32
+ .bind('change', this.changedFacet);
33
+ $(document).bind('keydown', this._maybeDisableFacets);
34
+ },
35
+
36
+ // Renders the search box, but requires placement on the page through `this.el`.
37
+ render : function() {
38
+ $(this.el).append(JST['search_box']({}));
39
+ $(document.body).setMode('no', 'search');
40
+
41
+ return this;
42
+ },
43
+
44
+ // # Querying Facets #
45
+
46
+ // Either gets a serialized query string or sets the faceted query from a query string.
47
+ value : function(query) {
48
+ if (query == null) return this.serialize();
49
+ return this.setQuery(query);
50
+ },
51
+
52
+ // Uses the VS.app.searchQuery collection to serialize the current query from the various
53
+ // facets that are in the search box.
54
+ serialize : function() {
55
+ var query = [];
56
+ var inputViewsCount = this.inputViews.length;
57
+
58
+ this.app.searchQuery.each(_.bind(function(facet, i) {
59
+ query.push(this.inputViews[i].value());
60
+ query.push(facet.serialize());
61
+ }, this));
62
+
63
+ if (inputViewsCount) {
64
+ query.push(this.inputViews[inputViewsCount-1].value());
65
+ }
66
+
67
+ return _.compact(query).join(' ');
68
+ },
69
+
70
+ // Returns any facet views that are currently selected. Useful for changing the value
71
+ // callbacks based on what else is in the search box and which facet is being edited.
72
+ selected: function() {
73
+ return _.select(this.facetViews, function(view) {
74
+ return view.modes.editing == 'is' || view.modes.selected == 'is';
75
+ });
76
+ },
77
+
78
+ // Similar to `this.selected`, returns any facet models that are currently selected.
79
+ selectedModels: function() {
80
+ return _.pluck(this.selected(), 'model');
81
+ },
82
+
83
+ // Takes a query string and uses the SearchParser to parse and render it. Note that
84
+ // `VS.app.SearchParser` refreshes the `VS.app.searchQuery` collection, which is bound
85
+ // here to call `this.renderFacets`.
86
+ setQuery : function(query) {
87
+ this.currentQuery = query;
88
+ VS.app.SearchParser.parse(this.app, query);
89
+ },
90
+
91
+ // Returns the position of a facet/input view. Useful when moving between facets.
92
+ viewPosition : function(view) {
93
+ var views = view.type == 'facet' ? this.facetViews : this.inputViews;
94
+ var position = _.indexOf(views, view);
95
+ if (position == -1) position = 0;
96
+ return position;
97
+ },
98
+
99
+ // Used to launch a search. Hitting enter or clicking the search button.
100
+ searchEvent : function(e) {
101
+ var query = this.value();
102
+ this.focusSearch(e);
103
+ this.value(query);
104
+ this.app.options.callbacks.search(query, this.app.searchQuery);
105
+ },
106
+
107
+ // # Rendering Facets #
108
+
109
+ // Add a new facet. Facet will be focused and ready to accept a value. Can also
110
+ // specify position, in the case of adding facets from an inbetween input.
111
+ addFacet : function(category, initialQuery, position) {
112
+ category = VS.utils.inflector.trim(category);
113
+ initialQuery = VS.utils.inflector.trim(initialQuery || '');
114
+ if (!category) return;
115
+
116
+ var model = new VS.model.SearchFacet({
117
+ category : category,
118
+ value : initialQuery || '',
119
+ app : this.app
120
+ });
121
+ this.app.searchQuery.add(model, {at: position});
122
+ },
123
+
124
+ // Renders a newly added facet, and selects it.
125
+ addedFacet : function (model) {
126
+ this.renderFacets();
127
+ var facetView = _.detect(this.facetViews, function(view) {
128
+ if (view.model == model) return true;
129
+ });
130
+
131
+ _.defer(function() {
132
+ facetView.enableEdit();
133
+ });
134
+ },
135
+
136
+ // Changing a facet programmatically re-renders it.
137
+ changedFacet: function () {
138
+ this.renderFacets();
139
+ },
140
+
141
+ // When removing a facet, potentially do something. For now, the adjacent
142
+ // remaining facet is selected, but this is handled by the facet's view,
143
+ // since its position is unknown by the time the collection triggers this
144
+ // remove callback.
145
+ removedFacet : function (facet, query, options) {},
146
+
147
+ // Renders each facet as a searchFacet view.
148
+ renderFacets : function() {
149
+ this.facetViews = [];
150
+ this.inputViews = [];
151
+
152
+ this.$('.VS-search-inner').empty();
153
+
154
+ this.app.searchQuery.each(_.bind(this.renderFacet, this));
155
+
156
+ // Add on an n+1 empty search input on the very end.
157
+ this.renderSearchInput();
158
+ this.renderPlaceholder();
159
+ },
160
+
161
+ // Render a single facet, using its category and query value.
162
+ renderFacet : function(facet, position) {
163
+ var view = new VS.ui.SearchFacet({
164
+ app : this.app,
165
+ model : facet,
166
+ order : position
167
+ });
168
+
169
+ // Input first, facet second.
170
+ this.renderSearchInput();
171
+ this.facetViews.push(view);
172
+ this.$('.VS-search-inner').children().eq(position*2).after(view.render().el);
173
+
174
+ view.calculateSize();
175
+ _.defer(_.bind(view.calculateSize, view));
176
+
177
+ return view;
178
+ },
179
+
180
+ // Render a single input, used to create and autocomplete facets
181
+ renderSearchInput : function() {
182
+ var input = new VS.ui.SearchInput({
183
+ position: this.inputViews.length,
184
+ app: this.app,
185
+ showFacets: this.options.showFacets
186
+ });
187
+ this.$('.VS-search-inner').append(input.render().el);
188
+ this.inputViews.push(input);
189
+ },
190
+
191
+ // Handles showing/hiding the placeholder text
192
+ renderPlaceholder : function() {
193
+ var $placeholder = this.$('.VS-placeholder');
194
+ if (this.app.searchQuery.length) {
195
+ $placeholder.addClass("VS-hidden");
196
+ } else {
197
+ $placeholder.removeClass("VS-hidden")
198
+ .text(this.app.options.placeholder);
199
+ }
200
+ },
201
+
202
+ // # Modifying Facets #
203
+
204
+ // Clears out the search box. Command+A + delete can trigger this, as can a cancel button.
205
+ //
206
+ // If a `clearSearch` callback was provided, the callback is invoked and
207
+ // provided with a function performs the actual removal of the data. This
208
+ // allows third-party developers to either clear data asynchronously, or
209
+ // prior to performing their custom "clear" logic.
210
+ clearSearch : function(e) {
211
+ var actualClearSearch = _.bind(function() {
212
+ this.disableFacets();
213
+ this.value('');
214
+ this.flags.allSelected = false;
215
+ this.searchEvent(e);
216
+ this.focusSearch(e);
217
+ }, this);
218
+
219
+ if (this.app.options.callbacks.clearSearch) {
220
+ this.app.options.callbacks.clearSearch(actualClearSearch);
221
+ } else {
222
+ actualClearSearch();
223
+ }
224
+ },
225
+
226
+ // Command+A selects all facets.
227
+ selectAllFacets : function() {
228
+ this.flags.allSelected = true;
229
+
230
+ $(document).one('click.selectAllFacets', this.deselectAllFacets);
231
+
232
+ _.each(this.facetViews, function(facetView, i) {
233
+ facetView.selectFacet();
234
+ });
235
+ _.each(this.inputViews, function(inputView, i) {
236
+ inputView.selectText();
237
+ });
238
+ },
239
+
240
+ // Used by facets and input to see if all facets are currently selected.
241
+ allSelected : function(deselect) {
242
+ if (deselect) this.flags.allSelected = false;
243
+ return this.flags.allSelected;
244
+ },
245
+
246
+ // After `selectAllFacets` is engaged, this method is bound to the entire document.
247
+ // This immediate disables and deselects all facets, but it also checks if the user
248
+ // has clicked on either a facet or an input, and properly selects the view.
249
+ deselectAllFacets : function(e) {
250
+ this.disableFacets();
251
+
252
+ if (this.$(e.target).is('.category,input')) {
253
+ var el = $(e.target).closest('.search_facet,.search_input');
254
+ var view = _.detect(this.facetViews.concat(this.inputViews), function(v) {
255
+ return v.el == el[0];
256
+ });
257
+ if (view.type == 'facet') {
258
+ view.selectFacet();
259
+ } else if (view.type == 'input') {
260
+ _.defer(function() {
261
+ view.enableEdit(true);
262
+ });
263
+ }
264
+ }
265
+ },
266
+
267
+ // Disables all facets except for the passed in view. Used when switching between
268
+ // facets, so as not to have to keep state of active facets.
269
+ disableFacets : function(keepView) {
270
+ _.each(this.inputViews, function(view) {
271
+ if (view && view != keepView &&
272
+ (view.modes.editing == 'is' || view.modes.selected == 'is')) {
273
+ view.disableEdit();
274
+ }
275
+ });
276
+ _.each(this.facetViews, function(view) {
277
+ if (view && view != keepView &&
278
+ (view.modes.editing == 'is' || view.modes.selected == 'is')) {
279
+ view.disableEdit();
280
+ view.deselectFacet();
281
+ }
282
+ });
283
+
284
+ this.flags.allSelected = false;
285
+ this.removeFocus();
286
+ $(document).unbind('click.selectAllFacets');
287
+ },
288
+
289
+ // Resize all inputs to account for extra keystrokes which may be changing the facet
290
+ // width incorrectly. This is a safety check to ensure inputs are correctly sized.
291
+ resizeFacets : function(view) {
292
+ _.each(this.facetViews, function(facetView, i) {
293
+ if (!view || facetView == view) {
294
+ facetView.resize();
295
+ }
296
+ });
297
+ },
298
+
299
+ // Handles keydown events on the document. Used to complete the Cmd+A deletion, and
300
+ // blurring focus.
301
+ _maybeDisableFacets : function(e) {
302
+ if (this.flags.allSelected && VS.app.hotkeys.key(e) == 'backspace') {
303
+ e.preventDefault();
304
+ this.clearSearch(e);
305
+ return false;
306
+ } else if (this.flags.allSelected && VS.app.hotkeys.printable(e)) {
307
+ this.clearSearch(e);
308
+ }
309
+ },
310
+
311
+ // # Focusing Facets #
312
+
313
+ // Move focus between facets and inputs. Takes a direction as well as many options
314
+ // for skipping over inputs and only to facets, placement of cursor position in facet
315
+ // (i.e. at the end), and selecting the text in the input/facet.
316
+ focusNextFacet : function(currentView, direction, options) {
317
+ options = options || {};
318
+ var viewCount = this.facetViews.length;
319
+ var viewPosition = options.viewPosition || this.viewPosition(currentView);
320
+
321
+ if (!options.skipToFacet) {
322
+ // Correct for bouncing between matching text and facet arrays.
323
+ if (currentView.type == 'text' && direction > 0) direction -= 1;
324
+ if (currentView.type == 'facet' && direction < 0) direction += 1;
325
+ } else if (options.skipToFacet && currentView.type == 'text' &&
326
+ viewCount == viewPosition && direction >= 0) {
327
+ // Special case of looping around to a facet from the last search input box.
328
+ return false;
329
+ }
330
+ var view, next = Math.min(viewCount, viewPosition + direction);
331
+
332
+ if (currentView.type == 'text') {
333
+ if (next >= 0 && next < viewCount) {
334
+ view = this.facetViews[next];
335
+ } else if (next == viewCount) {
336
+ view = this.inputViews[this.inputViews.length-1];
337
+ }
338
+ if (view && options.selectFacet && view.type == 'facet') {
339
+ view.selectFacet();
340
+ } else if (view) {
341
+ view.enableEdit();
342
+ view.setCursorAtEnd(direction || options.startAtEnd);
343
+ }
344
+ } else if (currentView.type == 'facet') {
345
+ if (options.skipToFacet) {
346
+ if (next >= viewCount || next < 0) {
347
+ view = _.last(this.inputViews);
348
+ view.enableEdit();
349
+ } else {
350
+ view = this.facetViews[next];
351
+ view.enableEdit();
352
+ view.setCursorAtEnd(direction || options.startAtEnd);
353
+ }
354
+ } else {
355
+ view = this.inputViews[next];
356
+ view.enableEdit();
357
+ }
358
+ }
359
+ if (options.selectText) view.selectText();
360
+ this.resizeFacets();
361
+
362
+ return true;
363
+ },
364
+
365
+ maybeFocusSearch : function(e) {
366
+ if ($(e.target).is('.VS-search-box') ||
367
+ $(e.target).is('.VS-search-inner') ||
368
+ e.type == 'keydown') {
369
+ this.focusSearch(e);
370
+ }
371
+ },
372
+
373
+ // Bring focus to last input field.
374
+ focusSearch : function(e, selectText) {
375
+ var view = this.inputViews[this.inputViews.length-1];
376
+ view.enableEdit(selectText);
377
+ if (!selectText) view.setCursorAtEnd(-1);
378
+ if (e.type == 'keydown') {
379
+ view.keydown(e);
380
+ view.box.trigger('keydown');
381
+ }
382
+ _.defer(_.bind(function() {
383
+ if (!this.$('input:focus').length) {
384
+ view.enableEdit(selectText);
385
+ }
386
+ }, this));
387
+ },
388
+
389
+ // Double-clicking on the search wrapper should select the existing text in
390
+ // the last search input. Also start the triple-click timer.
391
+ highlightSearch : function(e) {
392
+ if ($(e.target).is('.VS-search-box') ||
393
+ $(e.target).is('.VS-search-inner') ||
394
+ e.type == 'keydown') {
395
+ var lastinput = this.inputViews[this.inputViews.length-1];
396
+ lastinput.startTripleClickTimer();
397
+ this.focusSearch(e, true);
398
+ }
399
+ },
400
+
401
+ maybeTripleClick : function(e) {
402
+ var lastinput = this.inputViews[this.inputViews.length-1];
403
+ return lastinput.maybeTripleClick(e);
404
+ },
405
+
406
+ // Used to show the user is focused on some input inside the search box.
407
+ addFocus : function() {
408
+ this.app.options.callbacks.focus();
409
+ this.$('.VS-search-box').addClass('VS-focus');
410
+ },
411
+
412
+ // User is no longer focused on anything in the search box.
413
+ removeFocus : function() {
414
+ this.app.options.callbacks.blur();
415
+ var focus = _.any(this.facetViews.concat(this.inputViews), function(view) {
416
+ return view.isFocused();
417
+ });
418
+ if (!focus) this.$('.VS-search-box').removeClass('VS-focus');
419
+ },
420
+
421
+ // Show a menu which adds pre-defined facets to the search box. This is unused for now.
422
+ showFacetCategoryMenu : function(e) {
423
+ e.preventDefault();
424
+ e.stopPropagation();
425
+ if (this.facetCategoryMenu && this.facetCategoryMenu.modes.open == 'is') {
426
+ return this.facetCategoryMenu.close();
427
+ }
428
+
429
+ var items = [
430
+ {title: 'Account', onClick: _.bind(this.addFacet, this, 'account', '')},
431
+ {title: 'Project', onClick: _.bind(this.addFacet, this, 'project', '')},
432
+ {title: 'Filter', onClick: _.bind(this.addFacet, this, 'filter', '')},
433
+ {title: 'Access', onClick: _.bind(this.addFacet, this, 'access', '')}
434
+ ];
435
+
436
+ var menu = this.facetCategoryMenu || (this.facetCategoryMenu = new dc.ui.Menu({
437
+ items : items,
438
+ standalone : true
439
+ }));
440
+
441
+ this.$('.VS-icon-search').after(menu.render().open().content);
442
+ return false;
443
+ }
444
+
445
+ });
446
+
447
+ })();