Permalink
Browse files

Adding showFacets options. New build + docs = version 0.3.0.

  • Loading branch information...
1 parent d979df8 commit 694476d9086560234d6bf79b9686b4a8cf9ab36c @samuelclay samuelclay committed Sep 20, 2012
Oops, something went wrong.
Binary file not shown.
View
@@ -5,7 +5,7 @@
// The annotated source HTML is generated by
// [Docco](http://jashkenas.github.com/docco/).
-/** @license VisualSearch.js 0.2.2
+/** @license VisualSearch.js 0.3.0
* (c) 2011 Samuel Clay, @samuelclay, DocumentCloud Inc.
* VisualSearch.js may be freely distributed under the MIT license.
* For all details and documentation:
@@ -24,15 +24,15 @@
if (!VS.utils) VS.utils = {};
// Sets the version for VisualSearch to be used programatically elsewhere.
- VS.VERSION = '0.2.2';
+ VS.VERSION = '0.3.0';
VS.VisualSearch = function(options) {
var defaults = {
container : '',
query : '',
unquotable : [],
- facetAutocompleteMinLength: 1,
remainder : 'text',
+ showFacets : true,
callbacks : {
search : $.noop,
focus : $.noop,
@@ -43,10 +43,13 @@
};
this.options = _.extend({}, defaults, options);
this.options.callbacks = _.extend({}, defaults.callbacks, options.callbacks);
-
+
VS.app.hotkeys.initialize();
this.searchQuery = new VS.model.SearchQuery();
- this.searchBox = new VS.ui.SearchBox({app: this, autocompleteMinLength: this.options.facetAutocompleteMinLength});
+ this.searchBox = new VS.ui.SearchBox({
+ app: this,
+ showFacets: this.options.showFacets
+ });
if (options.container) {
var searchBox = this.searchBox.render().el;
@@ -238,8 +241,11 @@ VS.ui.SearchBox = Backbone.View.extend({
// Render a single input, used to create and autocomplete facets
renderSearchInput : function() {
- var input = new VS.ui.SearchInput({position: this.inputViews.length, app: this.app,
- autocompleteMinLength: this.options.autocompleteMinLength});
+ var input = new VS.ui.SearchInput({
+ position: this.inputViews.length,
+ app: this.app,
+ showFacets: this.options.showFacets
+ });
this.$('.VS-search-inner').append(input.render().el);
this.inputViews.push(input);
},
@@ -959,7 +965,7 @@ VS.ui.SearchInput = Backbone.View.extend({
// See `addTextFacetRemainder` for explanation on how the remainder works.
setupAutocomplete : function() {
this.box.autocomplete({
- minLength : this.options.autocompleteMinLength,
+ minLength : this.options.showFacets ? 0 : 1,
delay : 50,
autoFocus : true,
position : {offset : "0 -1"},
@@ -1068,19 +1074,22 @@ VS.ui.SearchInput = Backbone.View.extend({
addTextFacetRemainder : function(facetValue) {
var boxValue = this.box.val();
var lastWord = boxValue.match(/\b(\w+)$/);
- if (lastWord) {
- var matcher = new RegExp(lastWord[0], "i");
- if (facetValue.search(matcher) == 0) {
- boxValue = boxValue.replace(/\b(\w+)$/, '');
- }
- boxValue = boxValue.replace('^\s+|\s+$', '');
- if (boxValue) {
- this.app.searchBox.addFacet(this.app.options.remainder, boxValue, this.options.position);
- }
- return boxValue;
- } else {
+
+ if (!lastWord) {
return '';
}
+
+ var matcher = new RegExp(lastWord[0], "i");
+ if (facetValue.search(matcher) == 0) {
+ boxValue = boxValue.replace(/\b(\w+)$/, '');
+ }
+ boxValue = boxValue.replace('^\s+|\s+$', '');
+
+ if (boxValue) {
+ this.app.searchBox.addFacet(this.app.options.remainder, boxValue, this.options.position);
+ }
+
+ return boxValue;
},
// Directly called to focus the input. This is different from `addFocus`
@@ -1542,7 +1551,7 @@ $.fn.extend({
// Cross-browser way to select text in an input field.
selectRange: function(start, end) {
- return this.each(function() {
+ return this.filter(':visible').each(function() {
if (this.setSelectionRange) { // FF/Webkit
this.focus();
this.setSelectionRange(start, end);
@@ -1843,7 +1852,7 @@ VS.model.SearchQuery = Backbone.Collection.extend({
});
},
- // Used to temporarily hide a specific category and serialize the search query.
+ // Used to temporarily hide specific categories and serialize the search query.
withoutCategory : function() {
var categories = _.map(_.toArray(arguments), function(cat) { return cat.toLowerCase(); });
return this.map(function(facet) {
View
@@ -186,7 +186,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
window.visualSearch = VS.init({
container : $('#search_box_container'),
query : 'country: "South Africa" account: 5-samuel "U.S. State": California',
- // query : '',
+ showFacets : true,
unquotable : [
'text',
'account',
@@ -321,7 +321,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
container : $('#search_box_container2'),
query : '',
minLength : 0,
- // query : '',
+ showFacets : true,
unquotable : [
'text',
'account',
View
@@ -19,6 +19,8 @@
<span class="s1">&#39;40&#39;</span><span class="o">:</span> <span class="s1">&#39;downArrow&#39;</span><span class="p">,</span>
<span class="s1">&#39;46&#39;</span><span class="o">:</span> <span class="s1">&#39;delete&#39;</span><span class="p">,</span>
<span class="s1">&#39;8&#39;</span><span class="o">:</span> <span class="s1">&#39;backspace&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;35&#39;</span><span class="o">:</span> <span class="s1">&#39;end&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;36&#39;</span><span class="o">:</span> <span class="s1">&#39;home&#39;</span><span class="p">,</span>
<span class="s1">&#39;9&#39;</span><span class="o">:</span> <span class="s1">&#39;tab&#39;</span><span class="p">,</span>
<span class="s1">&#39;188&#39;</span><span class="o">:</span> <span class="s1">&#39;comma&#39;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Binds global keydown and keyup events to listen for keys that match <code>this.KEYS</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -50,7 +50,8 @@
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&gt;/g</span><span class="p">,</span> <span class="s1">&#39;&amp;gt;&#39;</span><span class="p">);</span>
<span class="nx">$tester</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
- <span class="nx">$input</span><span class="p">.</span><span class="nx">width</span><span class="p">(</span><span class="nx">$tester</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">+</span> <span class="mi">3</span><span class="p">);</span>
+
+ <span class="nx">$input</span><span class="p">.</span><span class="nx">width</span><span class="p">(</span><span class="nx">$tester</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">+</span> <span class="mi">3</span> <span class="o">+</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;min-width&#39;</span><span class="p">)));</span>
<span class="nx">$input</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;updated.autogrow&#39;</span><span class="p">);</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Sets the width of the input on initialization.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$input</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;resize.autogrow&#39;</span><span class="p">);</span>
<span class="p">});</span>
@@ -77,7 +78,7 @@
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">selectRange</span><span class="p">(</span><span class="nx">position</span><span class="p">,</span> <span class="nx">position</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Cross-browser way to select text in an input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectRange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">end</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;:visible&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">setSelectionRange</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// FF/Webkit</span>
<span class="k">this</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setSelectionRange</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">end</span><span class="p">);</span>
@@ -110,7 +110,11 @@
<span class="k">return</span> <span class="nx">view</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>Render a single input, used to create and autocomplete facets</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">renderSearchInput</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VS</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">SearchInput</span><span class="p">({</span><span class="nx">position</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="nx">app</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">app</span><span class="p">});</span>
+ <span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VS</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">SearchInput</span><span class="p">({</span>
+ <span class="nx">position</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
+ <span class="nx">app</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">app</span><span class="p">,</span>
+ <span class="nx">showFacets</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">showFacets</span>
+ <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.VS-search-inner&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h1>Modifying Facets</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Clears out the search box. Command+A + delete can trigger this, as can a cancel button.</p>
@@ -328,12 +328,9 @@
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">selectFacet</span><span class="p">();</span>
<span class="p">}</span>
- <span class="p">}</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">resize</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
- </pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Handle paste events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">searchAutocomplete</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">defer</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resize</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">e</span><span class="p">));</span>
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Handle paste events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>this.searchAutocomplete(e);</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">defer</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resize</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">e</span><span class="p">));</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">resize</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
Oops, something went wrong.

0 comments on commit 694476d

Please sign in to comment.