playable
Version:
Video player based on HTML5Video
106 lines (100 loc) • 3.55 kB
JavaScript
;
// Code from ally.js
/*
add data-playable-focus-source attribute to html element containing "key", "pointer" or "script"
depending on the input method used to change focus.
USAGE:
style/focus-source()
body :focus {
outline: 1px solid grey;
}
html[data-playable-focus-source="key"] body :focus {
outline: 5px solid red;
}
html[data-playable-focus-source="key"] body :focus {
outline: 1px solid blue;
}
NOTE: I don't have a GamePad to test, if you do and you want to
implement an observer for https://w3c.github.io/gamepad/ - send a PR!
Alternate implementation: https://github.com/alice/modality
*/
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var interaction_type_1 = (0, tslib_1.__importDefault)(require("./interaction-type"));
// preferring focusin/out because they are synchronous in IE10+11
var supportsFocusIn = typeof document !== 'undefined' && 'onfocusin' in document;
var focusEventName = supportsFocusIn ? 'focusin' : 'focus';
var blurEventName = supportsFocusIn ? 'focusout' : 'blur';
// interface to read interaction-type-listener state
var interactionTypeHandler;
// keep track of last focus source
var current = null;
// overwrite focus source for use with the every upcoming focus event
var lock = null;
// keep track of ever having used a particular input method to change focus
var used = {
pointer: false,
key: false,
script: false,
initial: false,
};
function handleFocusEvent(event) {
var source = '';
if (event.type === focusEventName) {
var interactionType = interactionTypeHandler.get();
source =
lock ||
(interactionType.pointer && 'pointer') ||
(interactionType.key && 'key') ||
'script';
}
else if (event.type === 'initial') {
source = 'initial';
}
document.documentElement.setAttribute('data-playable-focus-source', source);
if (event.type !== blurEventName) {
used[source] = true;
current = source;
}
}
function getCurrentFocusSource() {
return current;
}
function getUsedFocusSource(source) {
return used[source];
}
function lockFocusSource(source) {
lock = source;
}
function unlockFocusSource() {
lock = false;
}
function disengage() {
// clear dom state
handleFocusEvent({ type: blurEventName });
current = lock = null;
Object.keys(used).forEach(function (key) {
used[key] = false;
});
// kill interaction type identification listener
interaction_type_1.default.disengage();
document.documentElement.removeEventListener(focusEventName, handleFocusEvent, true);
document.documentElement.removeEventListener(blurEventName, handleFocusEvent, true);
document.documentElement.removeAttribute('data-playable-focus-source');
}
function engage() {
document.documentElement.addEventListener(focusEventName, handleFocusEvent, true);
document.documentElement.addEventListener(blurEventName, handleFocusEvent, true);
// enable the interaction type identification observer
interactionTypeHandler = interaction_type_1.default.engage();
// set up initial dom state
handleFocusEvent({ type: 'initial' });
return {
used: getUsedFocusSource,
current: getCurrentFocusSource,
lock: lockFocusSource,
unlock: unlockFocusSource,
};
}
exports.default = { engage: engage, disengage: disengage };
//# sourceMappingURL=focus-source.js.map