[fixes #17,view][s]: read-only mode (where editing options are hidden).

css/data-explorer.css

@@ -132,6 +132,19 @@
   width: 20px;
 }
 
+/********* read-only mode **********/
+
+.read-only .data-table tr td:first-child,
+.read-only .data-table tr th:first-child
+{
+  display: none;
+}
+
+.read-only .column-header-menu,
+.read-only .row-header-menu
+{
+  display: none;
+}
 
 /**********************************************************
   * Data Table Menus

demo/js/app.js

@@ -15,6 +15,10 @@ $(function() {
     });
     window.$container.append(window.dataExplorer.el);
   });
+  $('a.set-read-only').click(function() {
+    window.dataExplorer.setReadOnly();
+    alert('Read-only mode set');
+  });
 })
 
 function demoDataset() {

demo/newtheme.html

@@ -28,7 +28,8 @@
     <div class="topbar-inner">
       <div class="container-fluid">
         <a class="brand" href="#">Recline Data Explorer</a>
-        <ul class="nav">
+        <ul class="nav secondary-nav">
+          <li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
         </ul>
         <form class="webstore-load pull-right" title="Update from the specified webstore dataset">
           <input type="text" name="source" size="50" />

src/view.js

@@ -7,6 +7,19 @@ var my = {};
 
 // The primary view for the entire application.
 // 
+// To pass in configuration options use the config key in initialization hash
+// e.g.
+//
+//      var explorer = new DataExplorer({
+//        config: {...}
+//      })
+//
+// Config options:
+//
+// * displayCount: how many documents to display initially (default: 10)
+// * readOnly: true/false (default: false) value indicating whether to
+//   operate in read-only mode (hiding all editing options).
+//
 // All other views as contained in this one.
 my.DataExplorer = Backbone.View.extend({
   tagName: 'div',
@@ -47,7 +60,11 @@ my.DataExplorer = Backbone.View.extend({
     this.config = options.config || {};
     _.extend(this.config, {
       displayCount: 10
+      , readOnly: false
     });
+    if (this.config.readOnly) {
+      this.setReadOnly();
+    }
     this.draw();
   },
 
@@ -79,6 +96,10 @@ my.DataExplorer = Backbone.View.extend({
     });
   },
 
+  setReadOnly: function() {
+    this.el.addClass('read-only');
+  },
+
   render: function() {
     var tmplData = this.model.toTemplateJSON();
     tmplData.displayCount = this.config.displayCount;