Skip to content

Instantly share code, notes, and snippets.

@tbazin
Last active October 19, 2021 13:54
Show Gist options
  • Save tbazin/2383c1dd9f752623f79a5f4394af08db to your computer and use it in GitHub Desktop.
Save tbazin/2383c1dd9f752623f79a5f4394af08db to your computer and use it in GitHub Desktop.
Tamperscript script to add a fullscreen icon to WaniKani for true fullscreen on MacOS
// ==UserScript==
// @name WaniKani Fullscreen Icon
// @namespace wkfullscreen_icon
// @version 1.1.4
// @description add a fullscreen icon to WaniKani for true fullscreen display on MacOS
// @include /^https?://(www|preview)\.wanikani\.com/(review|lesson)/session$/
// @author Théis Bazin (github.com/tbazin)
// @homepageURL https://gist.github.com/tbazin/2383c1dd9f752623f79a5f4394af08db
// @downloadURL https://gist.githubusercontent.com/tbazin/2383c1dd9f752623f79a5f4394af08db/raw/wanikani-fullscreen_icon.user.js
// @grant none
// ==/UserScript==
(function() {
'use strict';
let container;
let headerButtons = document.getElementById('header-buttons');
if (headerButtons == null) {
let summaryButtons = document.getElementById('summary-button');
container = summaryButtons;
}
else {
let buttons = headerButtons.getElementsByTagName('ul')[0];
let fullscreenListItem = document.createElement('li');
buttons.appendChild(fullscreenListItem);
container = fullscreenListItem;
}
let fullscreenButton = document.createElement('a');
fullscreenButton.id = 'fullscreen-mode';
fullscreenButton.href = '#';
container.appendChild(fullscreenButton);
let fullscreenIcon = document.createElement('i');
fullscreenIcon.id = 'fullscreen-icon';
fullscreenIcon.classList.add('fa', 'fa-window-maximize');
fullscreenButton.appendChild(fullscreenIcon);
function focusResponseField(){
let responseField = document.getElementById('user-response');
responseField.focus();
};
function toggleFullscreen() {
if (document.fullscreenElement) {
// document.fullscreenElement is not null, the document is in fullscreen
document.exitFullscreen()
} else {
document.addEventListener(
'fullscreenchange',
focusResponseField,
{once: true});
document.documentElement.requestFullscreen();
};
};
fullscreenButton.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', (keydownEvent) => {
if (keydownEvent.ctrlKey && keydownEvent.keyCode == 70) {
toggleFullscreen();
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment