From 56467b9d48b5228b9d4ea20eff73f22d597256d6 Mon Sep 17 00:00:00 2001 From: Dara Hak Date: Fri, 16 Jun 2017 17:00:34 +0200 Subject: [PATCH] feat(statusTile): Display status bar tile only if active file matches one of the scopes (file extens Fixes #170 --- dist/main.js | 4 +++ dist/statusTile/createStatusTile.js | 4 +-- dist/statusTile/index.js | 2 ++ dist/statusTile/updateStatusTile.js | 2 +- dist/statusTile/updateStatusTileScope.js | 17 +++++++++++ src/main.js | 5 +++- src/statusTile/createStatusTile.js | 4 +-- src/statusTile/createStatusTile.test.js | 4 +-- src/statusTile/index.js | 2 ++ src/statusTile/updateStatusTile.js | 2 +- src/statusTile/updateStatusTileScope.js | 16 ++++++++++ src/statusTile/updateStatusTileScope.test.js | 31 ++++++++++++++++++++ styles/statusTile.css | 7 ----- styles/statusTile.less | 14 +++++++++ 14 files changed, 98 insertions(+), 16 deletions(-) create mode 100644 dist/statusTile/updateStatusTileScope.js create mode 100644 src/statusTile/updateStatusTileScope.js create mode 100644 src/statusTile/updateStatusTileScope.test.js delete mode 100644 styles/statusTile.css create mode 100644 styles/statusTile.less diff --git a/dist/main.js b/dist/main.js index 497b814b..12e42458 100644 --- a/dist/main.js +++ b/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); + })); } }; diff --git a/dist/statusTile/createStatusTile.js b/dist/statusTile/createStatusTile.js index 282feefc..2ad975c9 100644 --- a/dist/statusTile/createStatusTile.js +++ b/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; diff --git a/dist/statusTile/index.js b/dist/statusTile/index.js index 6bbfc736..aca0b79a 100644 --- a/dist/statusTile/index.js +++ b/dist/statusTile/index.js @@ -2,6 +2,7 @@ var createStatusTile = require('./createStatusTile'); var updateStatusTile = require('./updateStatusTile'); +var updateStatusTileScope = require('./updateStatusTileScope'); var _require = require('./tooltip'), disposeTooltip = _require.disposeTooltip; @@ -9,5 +10,6 @@ var _require = require('./tooltip'), module.exports = { createStatusTile: createStatusTile, updateStatusTile: updateStatusTile, + updateStatusTileScope: updateStatusTileScope, disposeTooltip: disposeTooltip }; \ No newline at end of file diff --git a/dist/statusTile/updateStatusTile.js b/dist/statusTile/updateStatusTile.js index ee362808..2d471302 100644 --- a/dist/statusTile/updateStatusTile.js +++ b/dist/statusTile/updateStatusTile.js @@ -12,7 +12,7 @@ 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() }); diff --git a/dist/statusTile/updateStatusTileScope.js b/dist/statusTile/updateStatusTileScope.js new file mode 100644 index 00000000..7afad9ec --- /dev/null +++ b/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) { + // 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; \ No newline at end of file diff --git a/src/main.js b/src/main.js index 38a4741b..ba05c321 100644 --- a/src/main.js +++ b/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)), + ); } }; diff --git a/src/statusTile/createStatusTile.js b/src/statusTile/createStatusTile.js index c6ea1ba6..2f842264 100644 --- a/src/statusTile/createStatusTile.js +++ b/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; diff --git a/src/statusTile/createStatusTile.test.js b/src/statusTile/createStatusTile.test.js index e4bd9581..c7d5cae1 100644 --- a/src/statusTile/createStatusTile.test.js +++ b/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); }); diff --git a/src/statusTile/index.js b/src/statusTile/index.js index d61c7888..6b563c50 100644 --- a/src/statusTile/index.js +++ b/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, }; diff --git a/src/statusTile/updateStatusTile.js b/src/statusTile/updateStatusTile.js index cf198d94..eb2fd09f 100644 --- a/src/statusTile/updateStatusTile.js +++ b/src/statusTile/updateStatusTile.js @@ -6,7 +6,7 @@ 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()}` }); diff --git a/src/statusTile/updateStatusTileScope.js b/src/statusTile/updateStatusTileScope.js new file mode 100644 index 00000000..acc161b9 --- /dev/null +++ b/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) { + // 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; diff --git a/src/statusTile/updateStatusTileScope.test.js b/src/statusTile/updateStatusTileScope.test.js new file mode 100644 index 00000000..4b5b97b6 --- /dev/null +++ b/src/statusTile/updateStatusTileScope.test.js @@ -0,0 +1,31 @@ +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'); +}); diff --git a/styles/statusTile.css b/styles/statusTile.css deleted file mode 100644 index 9963e125..00000000 --- a/styles/statusTile.css +++ /dev/null @@ -1,7 +0,0 @@ -div[data-format-on-save="enabled"] { - color: #8BC34A; -} - -div[data-format-on-save="enabled"]::after { - content: " ✓"; -} diff --git a/styles/statusTile.less b/styles/statusTile.less new file mode 100644 index 00000000..605ba6ee --- /dev/null +++ b/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: " ✓"; + } + } +}