Adding readOnly option. Closing #119.

demo.html

@@ -188,6 +188,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
           container  : $('#search_box_container'),
           query      : 'country: "United States" account: 5-samuel "U.S. State": California',
           showFacets : true,
+          readOnly   : false,
           unquotable : [
             'text',
             'account',
@@ -328,6 +329,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
           query      : '',
           minLength  : 0,
           showFacets : true,
+          readOnly   : false,
           unquotable : [
             'text',
             'account',

index.html

@@ -186,7 +186,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
 
     <script type="text/javascript" charset="utf-8">
       $(document).ready(function() {
-        var visualSearch = VS.init({
+        window.visualSearch = VS.init({
           container  : $('#search_box_container'),
           query      : 'country: "United States" "U.S. State": "New York" account: 5-samuel',
           showFacets : true,

lib/css/workspace.css

@@ -42,6 +42,9 @@
   min-height: 28px;
   height: auto;
 }
+  .VS-search.VS-readonly .VS-search-box {
+    cursor: default;
+  }
   .VS-search .VS-search-box.VS-focus {
     border-color: #acf;
     -webkit-box-shadow: inset 0px 0px 3px #acf;
@@ -86,6 +89,9 @@
     position: absolute;
     right: 9px; top: 8px;
   }
+    .VS-search.VS-readonly .VS-icon-cancel {
+      display: none;
+    }
 
 /* ================ */
 /* = Search Facet = */
@@ -100,6 +106,9 @@
   height: 20px;
   margin: 3px -3px 3px 0;
 }
+  .VS-search.VS-readonly .search_facet {
+    padding-left: 0;
+  }
   .VS-search .search_facet.is_selected {
     margin-left: -3px;
     -webkit-border-radius: 16px;
@@ -122,6 +131,9 @@
     cursor: pointer;
     padding: 4px 0 0;
   }
+    .VS-search.VS-readonly .search_facet .category {
+      cursor: default;
+    }
   .VS-search .search_facet.is_selected .category {
     margin-left: 3px;
   }
@@ -148,6 +160,9 @@
   .VS-search .search_facet.is_selected input {
     color: #000;
   }
+  .VS-search.VS-readonly .search_facet .search_facet_remove {
+    display: none;
+  }
   .VS-search .search_facet .search_facet_remove {
     position: absolute;
     left: 0;

lib/js/templates/search_box.jst

@@ -1,4 +1,4 @@
-<div class="VS-search">
+<div class="VS-search <% if (readOnly) { %>VS-readonly<% } %>">
   <div class="VS-search-box-wrapper VS-search-box">
     <div class="VS-icon VS-icon-search"></div>
     <div class="VS-placeholder"></div>

lib/js/templates/search_facet.jst

@@ -3,7 +3,7 @@
 <% } %>
 
 <div class="search_facet_input_container">
-  <input type="text" class="search_facet_input ui-menu VS-interface" value="" />
+  <input type="text" class="search_facet_input ui-menu VS-interface" value="" <% if (readOnly) { %>disabled="disabled"<% } %> />
 </div>
 
 <div class="search_facet_remove VS-icon VS-icon-cancel"></div>

lib/js/templates/search_input.jst

@@ -1 +1 @@
-<input type="text" class="ui-menu" />
+<input type="text" class="ui-menu" <% if (readOnly) { %>disabled="disabled"<% } %> />

lib/js/views/search_box.js

@@ -17,7 +17,7 @@ VS.ui.SearchBox = Backbone.View.extend({
   // Creating a new SearchBox registers handlers for re-rendering facets when necessary,
   // as well as handling typing when a facet is selected.
   initialize : function(options) {
-    if (options) this.options = options;
+    this.options = _.extend({}, this.options, options);
 
     this.app = this.options.app;
     this.flags = {
@@ -37,7 +37,9 @@ VS.ui.SearchBox = Backbone.View.extend({
 
   // Renders the search box, but requires placement on the page through `this.el`.
   render : function() {
-    $(this.el).append(JST['search_box']({}));
+    $(this.el).append(JST['search_box']({
+      readOnly: this.app.options.readOnly
+    }));
     $(document.body).setMode('no', 'search');
 
     return this;
@@ -212,6 +214,7 @@ VS.ui.SearchBox = Backbone.View.extend({
   // allows third-party developers to either clear data asynchronously, or
   // prior to performing their custom "clear" logic.
   clearSearch : function(e) {
+    if (this.app.options.readOnly) return;
     var actualClearSearch = _.bind(function() {
       this.disableFacets();
       this.value('');
@@ -367,6 +370,7 @@ VS.ui.SearchBox = Backbone.View.extend({
   },
 
   maybeFocusSearch : function(e) {
+    if (this.app.options.readOnly) return;
     if ($(e.target).is('.VS-search-box') ||
         $(e.target).is('.VS-search-inner') ||
         e.type == 'keydown') {
@@ -376,6 +380,7 @@ VS.ui.SearchBox = Backbone.View.extend({
 
   // Bring focus to last input field.
   focusSearch : function(e, selectText) {
+    if (this.app.options.readOnly) return;
     var view = this.inputViews[this.inputViews.length-1];
     view.enableEdit(selectText);
     if (!selectText) view.setCursorAtEnd(-1);
@@ -393,6 +398,7 @@ VS.ui.SearchBox = Backbone.View.extend({
   // Double-clicking on the search wrapper should select the existing text in
   // the last search input. Also start the triple-click timer.
   highlightSearch : function(e) {
+    if (this.app.options.readOnly) return;
     if ($(e.target).is('.VS-search-box') ||
         $(e.target).is('.VS-search-inner') ||
         e.type == 'keydown') {
@@ -409,6 +415,7 @@ VS.ui.SearchBox = Backbone.View.extend({
 
   // Used to show the user is focused on some input inside the search box.
   addFocus : function() {
+    if (this.app.options.readOnly) return;
     this.app.options.callbacks.focus();
     this.$('.VS-search-box').addClass('VS-focus');
   },

lib/js/views/search_facet.js

@@ -20,19 +20,21 @@ VS.ui.SearchFacet = Backbone.View.extend({
   },
 
   initialize : function(options) {
-    if (options) this.options = options;
+    this.options = _.extend({}, this.options, options);
 
     this.flags = {
       canClose : false
     };
     _.bindAll(this, 'set', 'keydown', 'deselectFacet', 'deferDisableEdit');
+    this.app = this.options.app;
   },
 
   // Rendering the facet sets up autocompletion, events on blur, and populates
   // the facet's input with its starting value.
   render : function() {
     $(this.el).html(JST['search_facet']({
-      model : this.model
+      model : this.model,
+      readOnly: this.app.options.readOnly
     }));
 
     this.setMode('not', 'editing');
@@ -81,11 +83,11 @@ VS.ui.SearchFacet = Backbone.View.extend({
         var originalValue = this.model.get('value');
         this.set(ui.item.value);
         if (originalValue != ui.item.value || this.box.val() != ui.item.value) {
-          if (this.options.app.options.autosearch) {
+          if (this.app.options.autosearch) {
             this.search(e);
           } else {
-              this.options.app.searchBox.renderFacets();
-              this.options.app.searchBox.focusNextFacet(this, 1, {viewPosition: this.options.order});
+              this.app.searchBox.renderFacets();
+              this.app.searchBox.focusNextFacet(this, 1, {viewPosition: this.options.order});
           }
         }
         return false;
@@ -156,7 +158,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
     var value    = this.model.get('value');
     var searchTerm = req.term;
 
-    this.options.app.options.callbacks.valueMatches(category, searchTerm, function(matches, options) {
+    this.app.options.callbacks.valueMatches(category, searchTerm, function(matches, options) {
       options = options || {};
       matches = matches || [];
 
@@ -197,9 +199,9 @@ VS.ui.SearchFacet = Backbone.View.extend({
   search : function(e, direction) {
     if (!direction) direction = 1;
     this.closeAutocomplete();
-    this.options.app.searchBox.searchEvent(e);
+    this.app.searchBox.searchEvent(e);
     _.defer(_.bind(function() {
-      this.options.app.searchBox.focusNextFacet(this, direction, {viewPosition: this.options.order});
+      this.app.searchBox.focusNextFacet(this, direction, {viewPosition: this.options.order});
     }, this));
   },
 
@@ -209,6 +211,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
   // This method tells all other facets and inputs to disable so it can have
   // the sole focus. It also prepares the autocompletion menu.
   enableEdit : function() {
+    if (this.app.options.readOnly) return;
     if (this.modes.editing != 'is') {
       this.setMode('is', 'editing');
       this.deselectFacet();
@@ -218,10 +221,10 @@ VS.ui.SearchFacet = Backbone.View.extend({
     }
 
     this.flags.canClose = false;
-    this.options.app.searchBox.disableFacets(this);
-    this.options.app.searchBox.addFocus();
+    this.app.searchBox.disableFacets(this);
+    this.app.searchBox.addFocus();
     _.defer(_.bind(function() {
-      this.options.app.searchBox.addFocus();
+      this.app.searchBox.addFocus();
     }, this));
     this.resize();
     this.searchAutocomplete();
@@ -258,7 +261,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
     this.box.blur();
     this.setMode('not', 'editing');
     this.closeAutocomplete();
-    this.options.app.searchBox.removeFocus();
+    this.app.searchBox.removeFocus();
   },
 
   // Selects the facet, which blurs the facet's input and highlights the facet.
@@ -267,7 +270,8 @@ VS.ui.SearchFacet = Backbone.View.extend({
   // should delete this facet or just deselect it.
   selectFacet : function(e) {
     if (e) e.preventDefault();
-    var allSelected = this.options.app.searchBox.allSelected();
+    if (this.app.options.readOnly) return;
+    var allSelected = this.app.searchBox.allSelected();
     if (this.modes.selected == 'is') return;
 
     if (this.box.is(':focus')) {
@@ -286,8 +290,8 @@ VS.ui.SearchFacet = Backbone.View.extend({
         $(document).unbind('keydown.facet').bind('keydown.facet', this.keydown);
         $(document).unbind('click.facet').one('click.facet', this.deselectFacet);
       }, this));
-      this.options.app.searchBox.disableFacets(this);
-      this.options.app.searchBox.addFocus();
+      this.app.searchBox.disableFacets(this);
+      this.app.searchBox.addFocus();
     }
     return false;
   },
@@ -301,7 +305,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
     if (this.modes.selected == 'is') {
       this.setMode('not', 'selected');
       this.closeAutocomplete();
-      this.options.app.searchBox.removeFocus();
+      this.app.searchBox.removeFocus();
     }
     $(document).unbind('keydown.facet', this.keydown);
     $(document).unbind('click.facet', this.deselectFacet);
@@ -340,12 +344,12 @@ VS.ui.SearchFacet = Backbone.View.extend({
     var committed = this.model.get('value');
     this.deselectFacet();
     this.disableEdit();
-    this.options.app.searchQuery.remove(this.model);
-    if (committed && this.options.app.options.autosearch) {
+    this.app.searchQuery.remove(this.model);
+    if (committed && this.app.options.autosearch) {
       this.search(e, -1);
     } else {
-      this.options.app.searchBox.renderFacets();
-      this.options.app.searchBox.focusNextFacet(this, -1, {viewPosition: this.options.order});
+      this.app.searchBox.renderFacets();
+      this.app.searchBox.focusNextFacet(this, -1, {viewPosition: this.options.order});
     }
   },
 
@@ -367,7 +371,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
     } else if (key == 'left') {
       if (this.modes.selected == 'is') {
         this.deselectFacet();
-        this.options.app.searchBox.focusNextFacet(this, -1, {startAtEnd: -1});
+        this.app.searchBox.focusNextFacet(this, -1, {startAtEnd: -1});
       } else if (this.box.getCursorPosition() == 0 && !this.box.getSelection().length) {
         this.selectFacet();
       }
@@ -380,27 +384,27 @@ VS.ui.SearchFacet = Backbone.View.extend({
       } else if (this.box.getCursorPosition() == this.box.val().length) {
         e.preventDefault();
         this.disableEdit();
-        this.options.app.searchBox.focusNextFacet(this, 1);
+        this.app.searchBox.focusNextFacet(this, 1);
       }
     } else if (VS.app.hotkeys.shift && key == 'tab') {
       e.preventDefault();
-      this.options.app.searchBox.focusNextFacet(this, -1, {
+      this.app.searchBox.focusNextFacet(this, -1, {
         startAtEnd  : -1,
         skipToFacet : true,
         selectText  : true
       });
     } else if (key == 'tab') {
       e.preventDefault();
-      this.options.app.searchBox.focusNextFacet(this, 1, {
+      this.app.searchBox.focusNextFacet(this, 1, {
         skipToFacet : true,
         selectText  : true
       });
     } else if (VS.app.hotkeys.command && (e.which == 97 || e.which == 65)) {
       e.preventDefault();
-      this.options.app.searchBox.selectAllFacets();
+      this.app.searchBox.selectAllFacets();
       return false;
     } else if (VS.app.hotkeys.printable(e) && this.modes.selected == 'is') {
-      this.options.app.searchBox.focusNextFacet(this, -1, {startAtEnd: -1});
+      this.app.searchBox.focusNextFacet(this, -1, {startAtEnd: -1});
       this.remove(e);
     } else if (key == 'backspace') {
        $(document).on('keydown.backspace', function(e) {

lib/js/views/search_input.js

@@ -19,8 +19,8 @@ VS.ui.SearchInput = Backbone.View.extend({
   },
 
   initialize : function(options) {
-    if (options) this.options = options;
-
+    this.options = _.extend({}, this.options, options);
+    
     this.app = this.options.app;
     this.flags = {
       canClose : false
@@ -31,7 +31,9 @@ VS.ui.SearchInput = Backbone.View.extend({
   // Rendering the input sets up autocomplete, events on focusing and blurring
   // the input, and the auto-grow of the input.
   render : function() {
-    $(this.el).html(JST['search_input']({}));
+    $(this.el).html(JST['search_input']({
+      readOnly: this.app.options.readOnly
+    }));
 
     this.setMode('not', 'editing');
     this.setMode('not', 'selected');
@@ -259,6 +261,7 @@ VS.ui.SearchInput = Backbone.View.extend({
   // `tripleClickTimer` is counting down, ready to be engaged and intercept
   // the click event to force a select all instead.
   maybeTripleClick : function(e) {
+    if (this.app.options.readOnly) return;
     if (!!this.tripleClickTimer) {
       e.preventDefault();
       this.app.searchBox.selectAllFacets();

lib/js/visualsearch.js

@@ -34,14 +34,15 @@
       unquotable  : [],
       remainder   : 'text',
       showFacets  : true,
+      readOnly    : false,
       callbacks   : {
         search          : $.noop,
         focus           : $.noop,
         blur            : $.noop,
         facetMatches    : $.noop,
         valueMatches    : $.noop,
         clearSearch     : $.noop,
-        removedFacet    : $.noop,
+        removedFacet    : $.noop
       }
     };
     this.options           = _.extend({}, defaults, options);