Merge pull request #393 from cidgoh/issue-392

Add help sidebar component

lib/DataHarmonizer.js

@@ -31,6 +31,8 @@ import specifyHeadersModal from './specifyHeadersModal.html';
 import unmappedHeadersModal from './unmappedHeadersModal.html';
 import fieldDescriptionsModal from './fieldDescriptionsModal.html';
 
+import HelpSidebar from './HelpSidebar';
+
 import pkg from '../package.json';
 const VERSION = pkg.version;
 const VERSION_TEXT = 'DataHarmonizer v' + VERSION;
@@ -52,10 +54,15 @@ class DataHarmonizer {
 
   constructor(root, options = {}) {
     this.root = root;
+    this.hotRoot = options.hotRoot || $('<div>').appendTo(this.root)[0];
     this.schema = options.schema;
     this.loadingScreenRoot = options.loadingScreenRoot || this.root;
     this.modalsRoot = options.modalsRoot || document.querySelector('body');
     this.field_settings = options.fieldSettings || {};
+    this.helpSidebarOptions = Object.assign(
+      { enabled: true },
+      options.helpSidebar || {}
+    );
     this.columnHelpEntries = options.columnHelpEntries || [
       'column',
       'description',
@@ -65,6 +72,21 @@ class DataHarmonizer {
     ];
     this.self = this;
 
+    // Use help sidebar by default unless turned off by client
+    if (this.helpSidebarOptions.enabled) {
+      const opts = Object.assign({}, this.helpSidebarOptions);
+      opts.onToggle = (open) => {
+        // always do a HOT rerender on toggle in addition to anything client-specified
+        if (this.hot) {
+          this.hot.render();
+        }
+        if (typeof this.helpSidebarOptions.onToggle === 'function') {
+          this.helpSidebarOptions.onToggle(open);
+        }
+      };
+      this.helpSidebar = new HelpSidebar(this.root, opts);
+    }
+
     this.injectLoadingScreen();
 
     $(this.modalsRoot).append(specifyHeadersModal);
@@ -471,6 +493,11 @@ class DataHarmonizer {
         },
         afterSelection: (row, column, row2, column2) => {
           self.current_selection = [row, column, row2, column2];
+          if (this.helpSidebar) {
+            const field = self.getFields()[column];
+            const helpContent = self.getComment(field);
+            self.helpSidebar.setContent(helpContent);
+          }
         },
         afterRender: () => {
           // Bit of a hackey way to RESTORE classes to secondary headers. They are
@@ -497,7 +524,7 @@ class DataHarmonizer {
         },
       };
 
-      this.hot = new Handsontable(this.root, hot_settings);
+      this.hot = new Handsontable(this.hotRoot, hot_settings);
 
       this.enableMultiSelection();
     } else {

lib/HelpSidebar.css

@@ -0,0 +1,31 @@
+.help-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: white;
+  transition-property: right;
+  transition-timing-function: ease;
+  border-left: 1px solid #ddd;
+}
+
+.help-sidebar__toggler {
+  position: absolute;
+  top: 0;
+  transform: translateX(-100%);
+  z-index: 200;
+  border: 1px solid #ddd;
+  border-right-width: 0;
+  background-color: white;
+}
+
+.help-sidebar__content {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 8px;
+}
+
+.help-sidebar__placeholder {
+  color: #808080;
+  font-style: italic;
+}

lib/HelpSidebar.js

@@ -0,0 +1,107 @@
+import $ from 'jquery';
+import './HelpSidebar.css';
+
+const DEFAULT_OPTIONS = {
+  width: 300,
+  toggleTransitionDuration: 300,
+  onToggle: null,
+  title: 'Column Help',
+  placeholder: 'Select a cell to get help for that column.',
+  closedToggleLabel: '?',
+  openedToggleLabel: '×',
+};
+
+class HelpSidebar {
+  constructor(root, options) {
+    this.root = $(root);
+    this.isOpen = false;
+
+    this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+    if (this.options.openedToggleLabel == null) {
+      this.options.openedToggleLabel = this.options.closedToggleLabel;
+    }
+
+    this._init();
+  }
+
+  _getWidth() {
+    return this.isOpen ? 0 : this.options.width;
+  }
+
+  _getTogglerLabel() {
+    return this.isOpen
+      ? this.options.openedToggleLabel
+      : this.options.closedToggleLabel;
+  }
+
+  _setOpen(isOpen) {
+    this.isOpen = isOpen;
+    this.sidebar.css('right', -this._getWidth());
+    this.root.css('padding-right', this.options.width - this._getWidth());
+    this.toggler.toggleClass('open', this.isOpen).html(this._getTogglerLabel());
+    if (typeof this.options.onToggle === 'function') {
+      setTimeout(
+        () => this.options.onToggle(this.isOpen),
+        this.options.toggleTransitionDuration
+      );
+    }
+  }
+
+  _handleTogglerClick(event) {
+    event.preventDefault();
+    this.toggle();
+  }
+
+  _init() {
+    this.root.css({
+      position: 'relative',
+      overflow: 'hidden',
+    });
+
+    this.sidebar = $(`<div class="help-sidebar"></div>`)
+      .css({
+        width: this.options.width,
+        right: -this._getWidth(),
+        'transition-duration': this.options.toggleTransitionDuration + 'ms',
+      })
+      .appendTo(this.root);
+
+    this.content = $(
+      `<div class="help-sidebar__content">
+        <h4 class="help-sidebar__title">${this.options.title}</h4>
+      </div>`
+    ).appendTo(this.sidebar);
+
+    this.contentInner = $(
+      `<div class="help-sidebar__content-inner">
+        <p class="help-sidebar__placeholder">
+          ${this.options.placeholder}
+        </p>
+      </div>`
+    ).appendTo(this.content);
+
+    this.toggler = $(
+      `<button class="help-sidebar__toggler">${this._getTogglerLabel()}</button>`
+    ).appendTo(this.sidebar);
+
+    this.toggler.on('click', this._handleTogglerClick.bind(this));
+  }
+
+  setContent(content) {
+    this.contentInner.html(content);
+  }
+
+  toggle() {
+    this._setOpen(!this.isOpen);
+  }
+
+  open() {
+    this._setOpen(true);
+  }
+
+  close() {
+    this._setOpen(false);
+  }
+}
+
+export default HelpSidebar;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-harmonizer",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "A standardized spreadsheet editor and validator that can be run offline and locally",
   "repository": "git@github.com:cidgoh/DataHarmonizer.git",
   "license": "MIT",

web/index.css

@@ -7,9 +7,6 @@ body {
   overscroll-behavior: contain;
 }
 
-.data-harmonizer-grid {
-  overflow: hidden;
-}
 .data-harmonizer-grid .secondary-header-cell:hover {
   cursor: pointer;
 }