shift-click toggles all except clicked stat

- pass app through to panel and stat
- statChanged takes option doc for all and propagation
- remember last selectionState when shift-clicking
- mention "click" in help text
- make group labels, stats, instructions unselectable

9 files changed, 94 insertions, 18 deletions

diff --git a/tools/template/app/less/index.less b/tools/template/app/less/index.less
index 33cc8fa3b22..88168d986d6 100644
--- a/tools/template/app/less/index.less
+++ b/tools/template/app/less/index.less
@@ -10,6 +10,15 @@
   .transition(height .2s ease);
 }
 
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 #navbar {
   margin-bottom: 0px;
 
@@ -117,6 +126,7 @@ ul.stats {
 }
 
 li.stat {
+  .noselect;
   cursor: pointer;
   font-size: 12px;
   i {
@@ -125,6 +135,8 @@ li.stat {
 }
 
 .panel-title {
+  .noselect;
+  
   i.fa {
     margin-right: 10px;
   }
@@ -191,13 +203,11 @@ svg.multiline {
   }
 
   dl dt {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    .noselect;
   }
 
   dl dd {
+    .noselect;
     font-weight: bold;
     padding-top: 15px;
     font-size: 26px;
diff --git a/tools/template/models/app.js b/tools/template/models/app.js
index 5cc63e446dc..27e9bfde0f6 100644
--- a/tools/template/models/app.js
+++ b/tools/template/models/app.js
@@ -14,6 +14,12 @@ var App = module.exports = AmpersandState.extend({
   collections: {
     stats: StatCollection
   },
+  props: {
+    selectionState: {
+      type: 'array',
+      default: function () { return []; }
+    }
+  },
   parse: function (attrs, options) {
     var year = new Date().getFullYear();
     var groups = {};
@@ -58,11 +64,50 @@ var App = module.exports = AmpersandState.extend({
     return ret;
   },
   initialize: function (attrs, options) {
-    // tell the panels what stats they're managing
+    // tell the panels about app and what stats they're managing
     var panels = this.sidebar.panels;
+    panels.each(function (panel) {
+      panel.app = this;
+    }.bind(this));
+    
     this.stats.each(function (stat) {
+      stat.app = this;
       panels.get(stat.group).stats.add(stat);
-    });
+    }.bind(this));
+  },
+  clearSelectionState: function () {
+    this.selectionState = [];
+    debug('clear');
+  },
+  toggleAllExcept: function (stat) {
+    // shift-click on stat has the following behavior:
+    // if any other stat is selected, then 
+    //     1. store current selection state
+    //     2. enable current stat
+    //     3. disable all other stats
+    // else
+    //     restore previous selection state
+
+    var deselectAll = this.stats
+      .filter(function (s) { return s !== stat })
+      .some(function (s) { return s.selected; });
+
+    if (this.selectionState.length === 0 || !stat.selected) {
+      // store old selected state
+      this.selectionState = this.stats.map(function (s) { return s.selected; });
+
+      // now deselect all but stat
+      this.stats.each(function (s) {
+        s.selected = (s === stat);
+      });
+
+    } else {
+      // need to restore previous selection state
+      this.stats.each(function (s, i) {
+        s.selected = this.selectionState.length ? this.selectionState[i] : true;
+      }.bind(this));
+      this.clearSelectionState();
+    }
   }
 });
 
diff --git a/tools/template/models/panel.js b/tools/template/models/panel.js
index 5bbeeb8e1e8..6339423c02f 100644
--- a/tools/template/models/panel.js
+++ b/tools/template/models/panel.js
@@ -15,6 +15,9 @@ var Panel = module.exports = AmpersandState.extend({
       type: 'boolean',
       default: false
     },
+    app: {
+      type: 'object'
+    }
   },
   derived: {
     selected: {
diff --git a/tools/template/models/stat.js b/tools/template/models/stat.js
index c63643809cd..6dc4d07652c 100644
--- a/tools/template/models/stat.js
+++ b/tools/template/models/stat.js
@@ -18,6 +18,9 @@ var Stat = module.exports = AmpersandState.extend({
     }, 
     data: {
       type: 'object'
+    },
+    app: {
+      type: 'object'
     }
   },
   derived: {
diff --git a/tools/template/views/app.js b/tools/template/views/app.js
index 9f8eb14df3f..96dec599181 100644
--- a/tools/template/views/app.js
+++ b/tools/template/views/app.js
@@ -51,7 +51,7 @@ var AppView = module.exports = AmpersandView.extend({
       }
     }
   },
-  statChanged: function (stat) {
+  statChanged: function (stat, options) {
     this.model.chart.recalcXDomain = true;
     this.chartView.render();
   },
diff --git a/tools/template/views/panel.js b/tools/template/views/panel.js
index 05edd7a3326..b53dc02d7e2 100644
--- a/tools/template/views/panel.js
+++ b/tools/template/views/panel.js
@@ -61,13 +61,16 @@ var PanelView = module.exports = AmpersandView.extend({
       case 'some': this.collapsibleOpen(); break;
       case 'none': this.collapsibleClose(); break;
     }
-
-    this.statChanged();
+    this.model.app.clearSelectionState();
+    this.statChanged(null, {propagate: true});
   },
-  statChanged: function (stat) {
+  statChanged: function (stat, options) {
+    options = options || {};
     // mirroring model.selected here to use for bindings
     this.indicator = this.model.selected;
-    this.parent.parent.statChanged(stat);
+    if (options.propagate) {
+      this.parent.parent.statChanged(stat, options);
+    }
   },
   collapsibleToggle: function (event) {
     if (this.model.open) {
diff --git a/tools/template/views/sidebar.js b/tools/template/views/sidebar.js
index 69835f3f055..645358a1df6 100644
--- a/tools/template/views/sidebar.js
+++ b/tools/template/views/sidebar.js
@@ -38,8 +38,14 @@ var SidebarView = module.exports = AmpersandView.extend({
       view.filterStats(search);
     });
   },
-  statChanged: function(stat) {
-    this.parent.statChanged(stat);
+  statChanged: function(stat, options) {
+    this.parent.statChanged(stat, options);
+    if (options.all) {
+      // inform all other panels that they need to update their indicators
+      _.each(this.panelViews.views, function (pv) { 
+        pv.statChanged(stat, {all: false, propagate: false});
+      });
+    }
   },
   inputChanged: _.debounce(function () {
     var content = this.queryByHook('input').value;
diff --git a/tools/template/views/stat.js b/tools/template/views/stat.js
index 2db02847eb6..a327503e8c9 100644
--- a/tools/template/views/stat.js
+++ b/tools/template/views/stat.js
@@ -17,8 +17,14 @@ var StatView = module.exports = AmpersandView.extend({
       no: 'fa-circle-o'
     }
   },
-  clicked: function () {
-    this.model.toggle('selected');
-    this.parent.parent.statChanged(this);
+  clicked: function (event) {
+    // ignore shift+click, app handles those
+    if (event.shiftKey) {
+      this.model.app.toggleAllExcept(this.model);
+    } else {
+      this.model.app.clearSelectionState();
+      this.model.toggle('selected');
+    }
+    this.parent.parent.statChanged(this, {all: event.shiftKey, propagate: true});
   }
 });
diff --git a/tools/template/views/templates/empty.jade b/tools/template/views/templates/empty.jade
index 2df2567b393..7aed8df8d5f 100644
--- a/tools/template/views/templates/empty.jade
+++ b/tools/template/views/templates/empty.jade
@@ -18,14 +18,14 @@
         i.fa.fa-circle-o
         i.fa.fa-adjust 
         i.fa.fa-circle 
-    dd toggle individual stats or the entire group
+    dd click to toggle individual stats or the entire group
 
     dt
       h1
         i.fa.fa-expand
         i.fa.fa-arrows-h 
         i.fa.fa-compress 
-    dd zoom with two-finger scroll or mouse wheel, pan with click-drag
+    dd zoom with two-finger scroll or mouse wheel, pan with click+drag
 
     dt
       h1