Add keyboard shortcut to toggle night mode #62

Ricardo-Silva91 · 2018-02-16T18:20:11Z

fixes #28

Added a new 'keyboard shortcuts' feature so that more custom shortcuts could be implemented in the future.
Also adds the custom shortcuts keys and description to the 'Keyboard Shortcuts' help modal.

To toggle night mode I just programmatically clicked the night mode element, this is a bit forceful and ugly, I'm trying to find a better solution now. (still, because the navbar is always there, this seems to work).

Feedback is welcome 😄

P.S.: the shortcut used to toggle night mode is Ctrl+m

sindresorhus

This looks great :)

sindresorhus · 2018-02-16T18:44:36Z

source/features/keyboard-shortcuts.js

+			case event.ctrlKey && 'm':
+				if (document.querySelector('.nightmode-toggle')) {
+					document.querySelector('.nightmode-toggle').click();
+				}


Can you move this to a separate function that is called here? It's not large right now, but it will become unmaintainable like this when we add more shortcuts.

Maybe make keyboard-shortcuts a folder. This file would become the index and any shortcut added would have it's function on it's own file. Something like the tree below.

source └── features └── keyboard-shortcuts ├── index.js └── nightmode-toggle.js

Just pushed a version with the night mode toggle in a separate function, but the 'keyboard-shortcuts folder' option does seem like a better solution.

sindresorhus · 2018-02-16T18:46:03Z

source/features/keyboard-shortcuts.js

+	if (document.querySelector('#init-data')) {
+		const initData = JSON.parse(document.querySelector('#init-data').value);
+		const updatedShortcuts = initData.keyboardShortcuts;
+		for (let i = 0; i < updatedShortcuts.length; i++) {


for (const [i, item] of updatedShortcuts.entries()) {

sindresorhus · 2018-02-16T18:46:34Z

source/features/keyboard-shortcuts.js

+		}
+	});
+
+	if (document.querySelector('#init-data')) {


You have document.querySelector('#init-data') 3 times. Better put it in a variable and reuse it.

Added shortcut for night mode. fixes sindresorhus#28

sindresorhus · 2018-02-16T18:50:51Z

Can you add it to the feature highlights in the readme?

…witter

Separate shortcut functions from event listener code. Shortcut descriptions for loop. No repeated calls to querySelector

Ricardo-Silva91 · 2018-02-16T19:31:30Z

One question: in the feature highlights in the readme, should I just say that the extension adds new keyboard shortcuts to twitter or should I list the new shortcuts as well (right now it's just the night mode toggle, but it would grow in the future)?

filipekiss · 2018-02-16T19:39:30Z

source/features/keyboard-shortcuts.js

+	const initDataElement = document.querySelector('#init-data');
+	if (initDataElement) {
+		const initData = JSON.parse(initDataElement.value);
+		const updatedShortcuts = initData.keyboardShortcuts;


Make sure you spread this, so you're working with a copy instead of a reference:

const updatedShortcuts = [...initData.keyboardShortcuts];

filipekiss · 2018-02-16T19:42:36Z

@Ricardo-Silva91 for now, I guess something like "Keyboard shortcut to toggle Nightmode (Ctrl-m)" will suffice. If we ever add more shortcuts, we can change that and either list all of them in a proper section at the README.md or just tell the user to press ? on Twitter and see all shortcuts.

filipekiss · 2018-02-16T19:54:47Z

readme.md

@@ -31,6 +31,7 @@ We use Twitter a lot and notice many dumb annoyances we'd like to fix. So here b
 - Prevents DM modal from closing when (accidentally) clicking outside the modal.
 - Highlight your mentions in the stream
 - [Adds a `Likes` button to the main navbar](https://user-images.githubusercontent.com/14620121/35988497-ace9f93e-0ce5-11e8-8675-17e6ee38cd99.png)
+- Keyboard shortcut to toggle Night Mode (Ctrl-m).


Wrap keyboard shortcuts with the <kbd/> tags:

- Keyboard shortcut to toggle Night Mode (<kbd>Ctrl</kbd><kbd>m</kbd>).

filipekiss · 2018-02-16T19:56:11Z

readme.md

@@ -31,6 +31,7 @@ We use Twitter a lot and notice many dumb annoyances we'd like to fix. So here b
 - Prevents DM modal from closing when (accidentally) clicking outside the modal.
 - Highlight your mentions in the stream
 - [Adds a `Likes` button to the main navbar](https://user-images.githubusercontent.com/14620121/35988497-ace9f93e-0ce5-11e8-8675-17e6ee38cd99.png)
+- Keyboard shortcut to toggle Night Mode (Ctrl-m).

 Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10). And press <kbd>Command/Ctrl</kbd> <kbd>?</kbd> to see all keyboard shortcuts.


Maybe update this line to show the shortcut as well?

Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10) and you can toggle it using <kbd>Ctrl</kbd><kbd>m</kbd>. And press <kbd>Command/Ctrl</kbd> <kbd>?</kbd> to see all keyboard shortcuts.

filipekiss · 2018-02-16T20:03:32Z

Just don't forget to solve the conflicts on README.md! Besides that, you got my 👍

sindresorhus · 2018-02-16T20:10:54Z

readme.md


-Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10). And press <kbd>Shift</kbd> <kbd>?</kbd> to see all keyboard shortcuts.
+Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10) and you can toggle it using <kbd>Ctrl</kbd><kbd>m</kbd>. And press <kbd>Command/Ctrl</kbd> <kbd>?</kbd> to see all keyboard shortcuts.


And press Command/Ctrl ? to see all keyboard shortcuts.

This change is incorrect. Please see master.

Right, my mistake, sorry.

sindresorhus · 2018-02-16T20:12:28Z

source/features/keyboard-shortcuts.js

+	}
+};
+
+export default async () => {


Remove async. It has no purpose here.

sindresorhus · 2018-02-16T20:13:02Z

source/features/keyboard-shortcuts.js

@@ -0,0 +1,55 @@
+const toggleNightMode = () => {
+	if (document.querySelector('.nightmode-toggle')) {
+		document.querySelector('.nightmode-toggle').click();


Put it in a variable so we don't query twice.

async removed. only 1 querySelector call on toggleNightMode.

sindresorhus · 2018-02-16T20:46:36Z

Thanks for this awesome contribution @Ricardo-Silva91 :)

keyboard shortcuts module added; night mode toggle shortcut added

0e00c9c

Ricardo-Silva91 mentioned this pull request Feb 16, 2018

Keyboard shortcut to toggle "night mode" #28

Closed

sindresorhus suggested changes Feb 16, 2018

View reviewed changes

Added support for keyboard shortcuts.

316da06

Added shortcut for night mode. fixes sindresorhus#28

sindresorhus changed the title ~~keyboard shortcuts module added; night mode toggle shortcut added~~ Add keyboard shortcut to toggle night mode Feb 16, 2018

ricardo added 2 commits February 16, 2018 18:51

Merge branch 'master' of https://github.com/Ricardo-Silva91/refined-t…

1b52fcb

…witter

refactoring:

3a95979

Separate shortcut functions from event listener code. Shortcut descriptions for loop. No repeated calls to querySelector

filipekiss suggested changes Feb 16, 2018

View reviewed changes

ricardo and others added 2 commits February 16, 2018 19:43

Using copy instead of refference for updatedShortcuts

0535fd1

Update readme: night mode toggle highlight added.

d36b7c6

filipekiss reviewed Feb 16, 2018

View reviewed changes

Update readme.md

30f2622

filipekiss approved these changes Feb 16, 2018

View reviewed changes

Merge branch 'master' into master

88fd95f

sindresorhus reviewed Feb 16, 2018

View reviewed changes

source/features/keyboard-shortcuts.js Outdated

}

};

export default async () => {

Copy link

Owner

sindresorhus Feb 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove async. It has no purpose here.

sindresorhus reviewed Feb 16, 2018

View reviewed changes

Ricardo-Silva91 added 2 commits February 16, 2018 20:14

Update readme.md

c174817

refactor:

1ff482f

async removed. only 1 querySelector call on toggleNightMode.

sindresorhus approved these changes Feb 16, 2018

View reviewed changes

sindresorhus merged commit 4324137 into sindresorhus:master Feb 16, 2018

Miklet mentioned this pull request Feb 16, 2018

Keyboard shortcut for night mode mutes tab in Firefox #64

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add keyboard shortcut to toggle night mode #62

Add keyboard shortcut to toggle night mode #62

Ricardo-Silva91 commented Feb 16, 2018 •

edited

sindresorhus left a comment

sindresorhus Feb 16, 2018

filipekiss Feb 16, 2018

Ricardo-Silva91 Feb 16, 2018

sindresorhus Feb 16, 2018

sindresorhus Feb 16, 2018

sindresorhus commented Feb 16, 2018

Ricardo-Silva91 commented Feb 16, 2018

filipekiss Feb 16, 2018

filipekiss commented Feb 16, 2018 •

edited

filipekiss Feb 16, 2018

filipekiss Feb 16, 2018 •

edited

filipekiss commented Feb 16, 2018

sindresorhus Feb 16, 2018

Ricardo-Silva91 Feb 16, 2018

sindresorhus Feb 16, 2018

sindresorhus Feb 16, 2018

sindresorhus commented Feb 16, 2018


		Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10). And press <kbd>Shift</kbd> <kbd>?</kbd> to see all keyboard shortcuts.
		Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10) and you can toggle it using <kbd>Ctrl</kbd><kbd>m</kbd>. And press <kbd>Command/Ctrl</kbd> <kbd>?</kbd> to see all keyboard shortcuts.

Add keyboard shortcut to toggle night mode #62

Add keyboard shortcut to toggle night mode #62

Conversation

Ricardo-Silva91 commented Feb 16, 2018 • edited

sindresorhus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Feb 16, 2018

Ricardo-Silva91 commented Feb 16, 2018

Choose a reason for hiding this comment

filipekiss commented Feb 16, 2018 • edited

Choose a reason for hiding this comment

filipekiss Feb 16, 2018 • edited

Choose a reason for hiding this comment

filipekiss commented Feb 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Feb 16, 2018

Ricardo-Silva91 commented Feb 16, 2018 •

edited

filipekiss commented Feb 16, 2018 •

edited

filipekiss Feb 16, 2018 •

edited