Merge pull request #1595 from thostetler/make-sidebars-toggleable

Make sidebars toggleable

src/js/components/user.js

@@ -68,7 +68,8 @@ function (
           { name: 'Astronomy', value: false },
           { name: 'General', value: false }
         ],
-        defaultExportFormat: 'BibTeX'
+        defaultExportFormat: 'BibTeX',
+        defaultHideSidebars: 'Show'
       };
     }
   });

src/js/page_managers/three_column_view.js

@@ -144,7 +144,7 @@ function (
           var $col = x[2];
           setTimeout(function () {
             $col.children().show(0);
-          }, 500);
+          }, 200);
         } else {
           x[2].addClass('hidden');
         }

src/js/widgets/list_of_things/paginated_view.js

@@ -133,6 +133,7 @@ function (
     events: {
       'click .show-highlights': 'toggleHighlights',
       'click .show-abstract': 'toggleAbstract',
+      'click .toggle-make-space': 'toggleMakeSpace',
       'click a.page-control': 'changePageWithButton',
       'keyup input.page-control': 'tabOrEnterChangePageWithInput',
       'click .per-page': 'changePerPage'
@@ -155,6 +156,12 @@ function (
       }
     },
 
+    toggleMakeSpace: function () {
+      var val = !this.model.get('makeSpace');
+      this.model.set('makeSpace', val);
+      analytics('send', 'event', 'interaction', 'sidebars-toggled-' + val ? 'on' : 'off');
+    },
+
     modelEvents: {
       'change': 'render',
       'change:showHighlights': 'toggleChildrenHighlights',

src/js/widgets/preferences/templates/application.html

@@ -124,6 +124,35 @@
           </select>
         </div>
 
+        <!-- Default Show/Hide Sidebars -->
+        <div class="form-group">
+          <label for="hideSideBars">
+            Results List Side Bars
+            <a href="#collapseHideSideBars" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseHideSideBars">
+              <i class="fa fa-question-circle"></i>
+            </a>
+          </label>
+          <p>
+            <div class="collapse" id="collapseHideSideBars">
+              <div class="card card-body text-muted">
+                <p>
+                    Select the default state of the results list sidebars (hide/show)
+                    <br>
+                    (<strong>default: {{hideSideBarsDefault}}</strong>)
+                </p>
+              </div>
+            </div>
+          </p>
+          <select class="form-control" id="hideSideBars" aria-describedby="collapseHideSideBars">
+            {{#each hideSideBarsOptions}}
+              <option
+                value="{{this}}"
+                {{#compare this ../hideSideBarsSelected}} selected="selected" {{/compare}}
+              >{{this}}</option>
+            {{/each}}
+          </select>
+        </div>
+
         <hr class="hr">
         <button class="btn btn-primary" role="submit" id="appSettingsSubmit">Save</button>
         <button class="btn btn-default" role="reset" id="appSettingsCancel">Cancel</button>

src/js/widgets/preferences/views/application.js

@@ -24,6 +24,10 @@ define([
         { name: 'Astronomy', value: false },
         { name: 'General', value: false }
       ]
+    },
+    hideSidebars: {
+      initialValue: 'Show',
+      initialOptions: ['Show', 'Hide']
     }
   };
 
@@ -40,6 +44,8 @@ define([
         DEFAULTS.database.initialValue;
       var exportFormat = this.model.get('defaultExportFormat') ||
         DEFAULTS.exportFormat.initialValue
+      var hideSidebars = this.model.get('defaultHideSidebars') ||
+        DEFAULTS.hideSidebars.initialValue
 
       // must clone the props that will get mutated
       this.model.set({
@@ -52,7 +58,10 @@ define([
         databaseSelected: _.cloneDeep(database),
         exportFormatOptions: DEFAULTS.exportFormat.initialOptions,
         exportFormatDefault: DEFAULTS.exportFormat.initialValue,
-        exportFormatSelected: _.clone(exportFormat)
+        exportFormatSelected: _.clone(exportFormat),
+        hideSideBarsDefault: DEFAULTS.hideSidebars.initialValue,
+        hideSideBarsOptions: DEFAULTS.hideSidebars.initialOptions,
+        hideSideBarsSelected: _.clone(hideSidebars)
       });
       this.model.trigger('change');
     },
@@ -127,7 +136,8 @@ define([
         minAuthorsPerResult: this._convertToString(this.model.get('numAuthorsSelected')),
         externalLinkAction: this.model.get('externalLinksSelected'),
         defaultDatabase: this.model.get('databaseSelected'),
-        defaultExportFormat: this.model.get('exportFormatSelected')
+        defaultExportFormat: this.model.get('exportFormatSelected'),
+        defaultHideSidebars: this.model.get('hideSideBarsSelected')
       });
     },
 
@@ -143,7 +153,8 @@ define([
         minAuthorsPerResult: undefined,
         externalLinkAction: undefined,
         defaultDatabase: undefined,
-        defaultExportFormat: undefined
+        defaultExportFormat: undefined,
+        defaultHideSidebars: undefined
       }, { unset: true });
 
       this.onCancel.apply(this, arguments);

src/js/widgets/results/templates/container-template.html

@@ -26,6 +26,11 @@
                 {{else}}
                 <button class="btn show-abstract btn-sm btn-inverse btn-primary"> Show abstracts</button>
                 {{/compare}}
+                {{#if makeSpace}}
+                    <button class="btn btn-sm btn-primary toggle-make-space">Show Sidebars</button>
+                {{else}}
+                    <button class="btn btn-sm btn-inverse btn-primary toggle-make-space">Hide Sidebars</button>
+                {{/if}}
             </div>
 
         </div>

src/js/widgets/results/widget.js

@@ -13,7 +13,8 @@ define([
   'hbs!js/widgets/results/templates/container-template',
   'js/mixins/papers_utils',
   'js/modules/orcid/extension',
-  'js/mixins/dependon'
+  'js/mixins/dependon',
+  'js/components/api_feedback'
 ],
 
 function (
@@ -25,7 +26,8 @@ function (
   ContainerTemplate,
   PapersUtilsMixin,
   OrcidExtension,
-  Dependon
+  Dependon,
+  ApiFeedback
 ) {
   var ResultsWidget = ListOfThingsWidget.extend({
     initialize: function () {
@@ -39,6 +41,7 @@ function (
           title: undefined,
           // assuming there will always be abstracts
           showAbstract: 'closed',
+          makeSpace: false,
           // often they won't exist
           showHighlights: false,
           pagination: true
@@ -70,6 +73,8 @@ function (
       resultsFields = _.union(abstractFields, resultsFields);
       this.defaultQueryArguments.fl = resultsFields.join(',');
       this.minAuthorsPerResult = 3;
+
+      this.model.on('change:makeSpace', _.bind(this.onMakeSpace, this));
     },
 
     defaultQueryArguments: {
@@ -137,6 +142,12 @@ function (
       }
     },
 
+    onMakeSpace: function () {
+      var pubsub = this.getPubSub();
+      var code = this.model.get('makeSpace') ? 'MAKE_SPACE' : 'UNMAKE_SPACE';
+      pubsub.publish(pubsub.FEEDBACK, new ApiFeedback({ code: ApiFeedback.CODES[code] }));
+    },
+
     onUserAnnouncement: function (message, data) {
       if (message == 'user_info_change' && _.has(data, 'isOrcidModeOn')) {
         // make sure to reset orcid state of all cached records, not just currently
@@ -153,6 +164,7 @@ function (
         this.view.collection.reset(this.hiddenCollection.getVisibleModels());
       }
       this.updateMinAuthorsFromUserData();
+      this.updateSidebarsFromUserData();
     },
 
     onCustomEvent: function (event) {
@@ -233,6 +245,23 @@ function (
       }
     },
 
+    updateSidebarsFromUserData: _.debounce(function () {
+      var userData = this.getUserData();
+
+      // grab the negated current value
+      var makeSpace = !this.model.get('makeSpace') ? 'SHOW' : 'HIDE';
+
+      // get the state from user data or take the current value
+      var sideBarsState = (_.has(userData, 'defaultHideSidebars') ?
+        userData.defaultHideSidebars : makeSpace).toUpperCase();
+
+      // compare them, we don't have to update if nothing is changing
+      if (makeSpace !== sideBarsState) {
+        this.model.set('makeSpace', sideBarsState === 'HIDE');
+        this.model.trigger('change:makeSpace');
+      }
+    }, 300),
+
     processDocs: function (apiResponse, docs, paginationInfo) {
       var params = apiResponse.get('responseHeader.params');
       var start = params.start || 0;
@@ -242,6 +271,7 @@ function (
       var userData = this.getBeeHive().getObject('User').getUserData('USER_DATA');
       var link_server = userData.link_server;
       this.updateMinAuthorsFromUserData();
+      this.updateSidebarsFromUserData();
 
       var appStorage = null;
       if (this.hasBeeHive() && this.getBeeHive().hasObject('AppStorage')) {

test/mocha/js/components/user.spec.js

@@ -385,7 +385,8 @@ define([
             "value": false
           }
         ],
-        "defaultExportFormat": "BibTeX"
+        "defaultExportFormat": "BibTeX",
+        "defaultHideSidebars": "Show"
       });
 
       expect(u.getUserName()).to.eql("foobly@gmail.com");