Refactor to decrease code duplication and complexity

lib/items/tool-bar-button-view.js

@@ -25,6 +25,7 @@ class ToolBarButtonView extends ToolBarItem {
       priority: options.priority
     }, group);
 
+    this.subscriptions = new CompositeDisposable();
     this.options = options;
     this.enabled = true;
 
@@ -35,38 +36,18 @@ class ToolBarButtonView extends ToolBarItem {
       this.putAtEnd();
     }
 
-    if (options.icon) {
-      this.addIcon();
-    }
-
-    if (options.text) {
-      this.addText();
-    }
-
-    if (options.tooltip) {
-      this.subscriptions = new CompositeDisposable();
-      this.subscriptions.add(
-        this.addTooltip(this.options.tooltip, this.options.callback)
-      );
-    }
-
-    if (options.color) {
-      this.addColor();
-    }
-    if (options.background) {
-      this.addBackgroundColor();
-    }
-
+    this.addIcon();
+    this.addText();
+    this.addTooltip();
+    this.setStyle('color', options.color);
+    this.setStyle('background', options.background);
     this.addClasses();
     this.addOnMouseDown();
     this.addOnClick();
   }
 
   destroy () {
-    if (this.subscriptions) {
-      this.subscriptions.dispose();
-      this.subscriptions = null;
-    }
+    this.subscriptions.dispose();
     this.element.removeEventListener('mousedown', this._onMouseDown);
     this.element.removeEventListener('click', this._onClick);
     super.destroy(); // call super.destroy() in the end
@@ -79,6 +60,10 @@ class ToolBarButtonView extends ToolBarItem {
 
   /** Add an icon for the button using built-in icons. */
   addIcon () {
+    if (!this.options.icon) {
+      return;
+    }
+
     if (this.options.iconset) {
       if (this.options.iconset.startsWith('fa')) {
         this.classNames.push(this.options.iconset, `fa-${this.options.icon}`);
@@ -92,6 +77,10 @@ class ToolBarButtonView extends ToolBarItem {
 
   /** Adds a text/html to the button */
   addText () {
+    if (!this.options.text) {
+      return;
+    }
+
     if (this.options.html) {
       this.element.innerHTML = this.options.text;
     } else {
@@ -105,37 +94,38 @@ class ToolBarButtonView extends ToolBarItem {
    * @param {ButtonOptions.callback | null} callback
    * @returns {Disposable} a disposable tooltip
    */
-  addTooltip (tooltipOptions, callback = null) {
+  addTooltip () {
+    if (!this.options.tooltip) {
+      return;
+    }
+
     let tooltip;
-    if (typeof tooltipOptions === 'string') {
+    if (typeof this.options.tooltip === 'string') {
       tooltip = {
-        title: tooltipOptions
+        title: this.options.tooltip
       };
     } else {
-      tooltip = tooltipOptions;
+      tooltip = this.options.tooltip;
     }
 
     if (!tooltip.hasOwnProperty('placement')) {
       tooltip.placement = getTooltipPlacement();
     }
 
     if (!tooltip.hasOwnProperty('keyBindingCommand') &&
-      typeof callback === 'string'
+      typeof this.options.callback === 'string'
     ) {
-      tooltip.keyBindingCommand = callback;
+      tooltip.keyBindingCommand = this.options.callback;
     }
 
-    return atom.tooltips.add(this.element, tooltip);
-  }
-
-  /** Add color to the button */
-  addColor () {
-    this.element.style.color = this.options.color;
+    this.subscriptions.add(atom.tooltips.add(this.element, tooltip));
   }
 
-  /** Add background color to the button */
-  addBackgroundColor () {
-    this.element.style.background = this.options.background;
+  /** Set a style on the button */
+  setStyle (style, value) {
+    if (value) {
+      this.element.style[style] = value;
+    }
   }
 
   /** Add all the classes (custom and others) to the button */
@@ -153,20 +143,12 @@ class ToolBarButtonView extends ToolBarItem {
   }
 
   setEnabled (enabled) {
-    if (enabled) {
-      this.element.classList.remove('disabled');
-    } else {
-      this.element.classList.add('disabled');
-    }
+    this.element.classList.toggle('disabled', !enabled);
     this.enabled = enabled;
   }
 
   setSelected (selected) {
-    if (selected) {
-      this.element.classList.add('selected');
-    } else {
-      this.element.classList.remove('selected');
-    }
+    this.element.classList.toggle('selected', selected);
   }
 
   getSelected () {
@@ -233,29 +215,28 @@ function getCallbackModifier (callback, {altKey, ctrlKey, shiftKey}) {
     .map(modifiers => modifiers.toLowerCase())
     .reverse()
     .find(item => {
-      if ((~item.indexOf('alt') && !altKey) || (altKey && !~item.indexOf('alt'))) {
-        return false;
-      }
-      if ((~item.indexOf('ctrl') && !ctrlKey) || (ctrlKey && !~item.indexOf('ctrl'))) {
-        return false;
-      }
-      if ((~item.indexOf('shift') && !shiftKey) || (shiftKey && !~item.indexOf('shift'))) {
-        return false;
-      }
-      return true;
+      return checkKeyModifier(item.indexOf('alt'), altKey)
+          && checkKeyModifier(item.indexOf('ctrl'), ctrlKey)
+          && checkKeyModifier(item.indexOf('shift'), shiftKey);
     });
   return callback[modifier] || callback[''];
 }
 
+function checkKeyModifier (keyIndex, key) {
+  return !((~keyIndex && !key) || (key && !~keyIndex));
+}
+
 /** get the tooltip placement based on the toolbar position */
 function getTooltipPlacement () {
-  const toolbarPosition = atom.config.get('tool-bar.position');
+  const tooltipPlacement = {
+    Top: 'bottom',
+    Right: 'left',
+    Bottom: 'top',
+    Left: 'right'
+  };
 
-  return toolbarPosition === 'Top' ? 'bottom'
-    : toolbarPosition === 'Right' ? 'left'
-      : toolbarPosition === 'Bottom' ? 'top'
-        : toolbarPosition === 'Left' ? 'right'
-          : null;
+  const toolbarPosition = atom.config.get('tool-bar.position');
+  return tooltipPlacement[toolbarPosition] || null;
 }
 
 module.exports.ToolBarButtonView = ToolBarButtonView;

lib/raf-debounce.js

@@ -1,7 +1,5 @@
 module.exports = function rafDebounce (fn) {
-  let args;
-  let context;
-  let requestID;
+  let args, context, requestID;
 
   function later () {
     fn.apply(context, args);
@@ -14,19 +12,13 @@ module.exports = function rafDebounce (fn) {
     }
     args = arguments;
     context = this;
-    if (requestID) {
-      window.cancelAnimationFrame(requestID);
-    }
+    window.cancelAnimationFrame(requestID);
     requestID = window.requestAnimationFrame(later);
   }
 
   debounced.dispose = () => {
-    if (fn != null) {
-      if (requestID) {
-        window.cancelAnimationFrame(requestID);
-      }
-      args = context = requestID = fn = null;
-    }
+    window.cancelAnimationFrame(requestID);
+    fn = args = context = requestID = null;
   };
 
   return debounced;

lib/tool-bar-view.js

@@ -15,27 +15,21 @@ module.exports = class ToolBarView {
       }),
       atom.commands.add('atom-workspace', 'tool-bar:position-top', () => {
         this.updatePosition('Top');
-        atom.config.set('tool-bar.position', 'Top');
       }),
       atom.commands.add('atom-workspace', 'tool-bar:position-right', () => {
         this.updatePosition('Right');
-        atom.config.set('tool-bar.position', 'Right');
       }),
       atom.commands.add('atom-workspace', 'tool-bar:position-bottom', () => {
         this.updatePosition('Bottom');
-        atom.config.set('tool-bar.position', 'Bottom');
       }),
       atom.commands.add('atom-workspace', 'tool-bar:position-left', () => {
         this.updatePosition('Left');
-        atom.config.set('tool-bar.position', 'Left');
       }),
       atom.config.observe('tool-bar.iconSize', newValue => {
         this.updateSize(newValue);
       }),
       atom.config.onDidChange('tool-bar.position', () => {
-        if (atom.config.get('tool-bar.visible')) {
-          this.show();
-        }
+        this.refresh();
       }),
       atom.config.onDidChange('tool-bar.visible', ({newValue}) => {
         if (newValue) {
@@ -45,9 +39,7 @@ module.exports = class ToolBarView {
         }
       }),
       atom.config.onDidChange('tool-bar.fullWidth', () => {
-        if (atom.config.get('tool-bar.visible')) {
-          this.show();
-        }
+        this.refresh();
       })
     );
 
@@ -147,36 +139,35 @@ module.exports = class ToolBarView {
       'tool-bar-vertical'
     );
 
-    const fullWidth = atom.config.get('tool-bar.fullWidth');
+    this.panel = this.createPanel(position);
+
+    this.element.classList.add(`tool-bar-${position.toLowerCase()}`);
+    if (position === 'Top' || position === 'Bottom') {
+      this.element.classList.add('tool-bar-horizontal');
+    } else {
+      this.element.classList.add('tool-bar-vertical');
+    }
+
+    this.drawGutter();
+    atom.config.set('tool-bar.position', position);
+  }
 
+  createPanel (position) {
+    const fullWidth = atom.config.get('tool-bar.fullWidth');
     switch (position) {
       case 'Top':
-        this.panel = fullWidth
+        return fullWidth
           ? atom.workspace.addHeaderPanel({item: this.element})
           : atom.workspace.addTopPanel({item: this.element});
-        break;
       case 'Right':
-        this.panel = atom.workspace.addRightPanel({item: this.element});
-        break;
+        return atom.workspace.addRightPanel({item: this.element});
       case 'Bottom':
-        this.panel = fullWidth
+        return fullWidth
           ? atom.workspace.addFooterPanel({item: this.element})
           : atom.workspace.addBottomPanel({item: this.element});
-        break;
       case 'Left':
-        this.panel = atom.workspace.addLeftPanel({item: this.element, priority: 50});
-        break;
-    }
-
-    const classNames = [`tool-bar-${position.toLowerCase()}`];
-    if (position === 'Top' || position === 'Bottom') {
-      classNames.push('tool-bar-horizontal');
-    } else {
-      classNames.push('tool-bar-vertical');
+        return atom.workspace.addLeftPanel({item: this.element, priority: 50});
     }
-    this.element.classList.add(...classNames);
-
-    this.drawGutter();
   }
 
   drawGutter () {
@@ -212,6 +203,12 @@ module.exports = class ToolBarView {
     this.updateSize(atom.config.get('tool-bar.iconSize'));
   }
 
+  refresh () {
+    if (atom.config.get('tool-bar.visible')) {
+      this.show();
+    }
+  }
+
   toggle () {
     atom.config.set('tool-bar.visible', !atom.config.get('tool-bar.visible'));
   }