feat(statusTile): Display status bar tile only if active file matches one of the scopes in settings

dist/main.js

@@ -9,6 +9,7 @@ var _require = require('atom'),
 var _require2 = require('./statusTile'),
     createStatusTile = _require2.createStatusTile,
     updateStatusTile = _require2.updateStatusTile,
+    updateStatusTileScope = _require2.updateStatusTileScope,
     disposeTooltip = _require2.disposeTooltip;
 
 // local helpers
@@ -76,6 +77,9 @@ var attachStatusTile = function attachStatusTile() {
     subscriptions.add(atom.config.observe('prettier-atom.formatOnSaveOptions.enabled', function () {
       return updateStatusTile(subscriptions, tileElement);
     }));
+    subscriptions.add(atom.workspace.onDidChangeActiveTextEditor(function (editor) {
+      return updateStatusTileScope(tileElement, editor);
+    }));
   }
 };
 

dist/statusTile/createStatusTile.js

@@ -10,9 +10,9 @@ var createStatusTile = function createStatusTile() {
   var prettierTextNode = document.createTextNode('Prettier');
 
   element.appendChild(prettierTextNode);
-  element.classList.add('prettier-atom-status-tile');
+  element.classList.add('prettier-status-tile');
   element.classList.add('inline-block');
-  element.dataset.formatOnSave = getFormatOnSaveStatus();
+  element.dataset.prettierFormatOnSave = getFormatOnSaveStatus();
   element.addEventListener('click', toggleFormatOnSave);
 
   return element;

dist/statusTile/index.js

@@ -2,12 +2,14 @@
 
 var createStatusTile = require('./createStatusTile');
 var updateStatusTile = require('./updateStatusTile');
+var updateStatusTileScope = require('./updateStatusTileScope');
 
 var _require = require('./tooltip'),
     disposeTooltip = _require.disposeTooltip;
 
 module.exports = {
   createStatusTile: createStatusTile,
   updateStatusTile: updateStatusTile,
+  updateStatusTileScope: updateStatusTileScope,
   disposeTooltip: disposeTooltip
 };

dist/statusTile/updateStatusTile.js

@@ -12,9 +12,11 @@ var _require2 = require('../atomInterface'),
 var updateStatusTile = function updateStatusTile(disposable, element) {
   disposeTooltip();
 
-  element.dataset.formatOnSave = getFormatOnSaveStatus(); // eslint-disable-line no-param-reassign
+  element.dataset.prettierFormatOnSave = getFormatOnSaveStatus(); // eslint-disable-line no-param-reassign
 
-  var newTooltip = addTooltip(element, { title: 'Format on Save: ' + getFormatOnSaveStatus() });
+  var newTooltip = addTooltip(element, {
+    title: 'Format on Save: ' + getFormatOnSaveStatus() + '<br>Click to toggle'
+  });
 
   setTooltip(newTooltip);
   disposable.add(newTooltip);

dist/statusTile/updateStatusTileScope.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var _require = require('../editorInterface'),
+    getCurrentScope = _require.getCurrentScope;
+
+var _require2 = require('../atomInterface'),
+    getAllScopes = _require2.getAllScopes;
+
+var updateStatusTileScope = function updateStatusTileScope(element, editor) {
+  if (!element) return;
+
+  // The editor can be undefined if there is no active editor (e.g. closed all tabs).
+  // eslint-disable-next-line no-param-reassign
+  element.dataset.prettierMatchScope = editor !== undefined && getAllScopes().includes(getCurrentScope(editor)) ? 'true' : 'false';
+};
+
+module.exports = updateStatusTileScope;

src/main.js

@@ -1,7 +1,7 @@
 const config = require('./config-schema.json');
 // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved
 const { CompositeDisposable } = require('atom');
-const { createStatusTile, updateStatusTile, disposeTooltip } = require('./statusTile');
+const { createStatusTile, updateStatusTile, updateStatusTileScope, disposeTooltip } = require('./statusTile');
 
 // local helpers
 let format = null;
@@ -68,6 +68,9 @@ const attachStatusTile = () => {
         updateStatusTile(subscriptions, tileElement),
       ),
     );
+    subscriptions.add(
+      atom.workspace.onDidChangeActiveTextEditor(editor => updateStatusTileScope(tileElement, editor)),
+    );
   }
 };
 

src/statusTile/createStatusTile.js

@@ -7,9 +7,9 @@ const createStatusTile = () => {
   const prettierTextNode = document.createTextNode('Prettier');
 
   element.appendChild(prettierTextNode);
-  element.classList.add('prettier-atom-status-tile');
+  element.classList.add('prettier-status-tile');
   element.classList.add('inline-block');
-  element.dataset.formatOnSave = getFormatOnSaveStatus();
+  element.dataset.prettierFormatOnSave = getFormatOnSaveStatus();
   element.addEventListener('click', toggleFormatOnSave);
 
   return element;

src/statusTile/createStatusTile.test.js

@@ -23,8 +23,8 @@ beforeEach(() => {
 it('creates a div with "Prettier" and a tooltip indicating formatOnSave status', () => {
   const div = createStatusTile();
 
-  expect(div.dataset.formatOnSave).toBe('enabled');
-  expect(div.classList.add).toHaveBeenCalledWith('prettier-atom-status-tile');
+  expect(div.dataset.prettierFormatOnSave).toBe('enabled');
+  expect(div.classList.add).toHaveBeenCalledWith('prettier-status-tile');
   expect(div.appendChild).toHaveBeenCalledWith('Prettier');
   expect(div.addEventListener).toHaveBeenCalledWith('click', toggleFormatOnSave);
 });

src/statusTile/index.js

@@ -1,10 +1,12 @@
 // @flow
 const createStatusTile = require('./createStatusTile');
 const updateStatusTile = require('./updateStatusTile');
+const updateStatusTileScope = require('./updateStatusTileScope');
 const { disposeTooltip } = require('./tooltip');
 
 module.exports = {
   createStatusTile,
   updateStatusTile,
+  updateStatusTileScope,
   disposeTooltip,
 };

src/statusTile/updateStatusTile.js

@@ -6,9 +6,11 @@ const { addTooltip } = require('../atomInterface');
 const updateStatusTile = (disposable: Atom$Disposable, element: HTMLElement) => {
   disposeTooltip();
 
-  element.dataset.formatOnSave = getFormatOnSaveStatus(); // eslint-disable-line no-param-reassign
+  element.dataset.prettierFormatOnSave = getFormatOnSaveStatus(); // eslint-disable-line no-param-reassign
 
-  const newTooltip = addTooltip(element, { title: `Format on Save: ${getFormatOnSaveStatus()}` });
+  const newTooltip = addTooltip(element, {
+    title: `Format on Save: ${getFormatOnSaveStatus()}<br>Click to toggle`,
+  });
 
   setTooltip(newTooltip);
   disposable.add(newTooltip);

src/statusTile/updateStatusTile.test.js

@@ -31,8 +31,10 @@ it('adds the new tooltip with the updated formatOnSave status to atom', () => {
 
   const { div } = callUpdateStatusTile();
 
-  expect(atom.tooltips.add).toHaveBeenCalledWith(div, { title: 'Format on Save: enabled' });
-  expect(div.dataset.formatOnSave).toEqual('enabled');
+  expect(atom.tooltips.add).toHaveBeenCalledWith(div, {
+    title: 'Format on Save: enabled<br>Click to toggle',
+  });
+  expect(div.dataset.prettierFormatOnSave).toEqual('enabled');
 });
 
 it('updates our reference to the new tooltip so that we may dispose it manually', () => {

src/statusTile/updateStatusTileScope.js

@@ -0,0 +1,16 @@
+// @flow
+const { getCurrentScope } = require('../editorInterface');
+const { getAllScopes } = require('../atomInterface');
+
+const updateStatusTileScope = (element: HTMLElement, editor: TextEditor) => {
+  if (!element) return;
+
+  // The editor can be undefined if there is no active editor (e.g. closed all tabs).
+  // eslint-disable-next-line no-param-reassign
+  element.dataset.prettierMatchScope = editor !== undefined &&
+    getAllScopes().includes(getCurrentScope(editor))
+    ? 'true'
+    : 'false';
+};
+
+module.exports = updateStatusTileScope;

src/statusTile/updateStatusTileScope.test.js

@@ -0,0 +1,35 @@
+jest.mock('../atomInterface');
+jest.mock('../editorInterface');
+
+const { getCurrentScope } = require('../editorInterface');
+const { getAllScopes } = require('../atomInterface');
+const updateStatusTileScope = require('./updateStatusTileScope');
+
+const callUpdateStatusTileScope = () => {
+  const div = { dataset: {} };
+  const editor = {};
+
+  updateStatusTileScope(div, editor);
+
+  return { div, editor };
+};
+
+beforeEach(() => {
+  getAllScopes.mockImplementation(() => ['source.js']);
+});
+
+it('sets the match-scope data attribute to true if the editor is in scope', () => {
+  getCurrentScope.mockImplementation(() => 'source.js');
+
+  const { div } = callUpdateStatusTileScope();
+
+  expect(div.dataset.prettierMatchScope).toBe('true');
+});
+
+it('sets the match-scope data attribute to false if the editor is out of scope', () => {
+  getCurrentScope.mockImplementation(() => 'source.html');
+
+  const { div } = callUpdateStatusTileScope();
+
+  expect(div.dataset.prettierMatchScope).toBe('false');
+});

styles/statusTile.less

@@ -0,0 +1,14 @@
+div {
+  // Active file not in supported scopes: hide tile.
+  &[data-prettier-match-scope="false"] {
+    display: none;
+  }
+
+  // If Format on Save is enabled, make the label more visible.
+  &[data-prettier-format-on-save="enabled"] {
+    color: #8BC34A;
+    &::after {
+      content: " ✓";
+    }
+  }
+}