60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
|
(function (window, document) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
// Set the configuration values on object creation.
|
||
|
|
// - idPrefix: The string that uniquely prefixes the ID of all elements that
|
||
|
|
// can receive the fullscreen focus.
|
||
|
|
// - bodyClass: The class that is set on the body element when the fullscreen
|
||
|
|
// mode is toggled on.
|
||
|
|
// - elementClass: the class that is set on the element that is receiving the
|
||
|
|
// fullscreen focus.
|
||
|
|
var KssFullScreen = function (config) {
|
||
|
|
this.idPrefix = config.idPrefix || 'kss-fullscreen-';
|
||
|
|
this.bodyClass = config.bodyClass || 'kss-fullscreen-mode';
|
||
|
|
this.elementClass = config.elementClass || 'is-fullscreen';
|
||
|
|
|
||
|
|
this.init();
|
||
|
|
};
|
||
|
|
|
||
|
|
// Initialize the page to see if the fullscreen mode should be immediately
|
||
|
|
// turned on.
|
||
|
|
KssFullScreen.prototype.init = function () {
|
||
|
|
// Check the location hash to see if it matches the idPrefix.
|
||
|
|
if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) {
|
||
|
|
this.setFocus(window.location.hash.slice(1 + this.idPrefix.length));
|
||
|
|
}
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
// Initialize all fullscreen toggle buttons.
|
||
|
|
document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) {
|
||
|
|
// Get the section reference from the data attribute.
|
||
|
|
button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Activation function that takes the ID of the element that will receive
|
||
|
|
// fullscreen focus.
|
||
|
|
KssFullScreen.prototype.setFocus = function (id) {
|
||
|
|
var el;
|
||
|
|
|
||
|
|
// Find the element with the given ID and start fullscreen mode.
|
||
|
|
if (el = document.getElementById(id)) {
|
||
|
|
el.classList.toggle('is-fullscreen');
|
||
|
|
document.body.classList.toggle('kss-fullscreen-mode');
|
||
|
|
|
||
|
|
// When enabling the focus mode, change the location hash.
|
||
|
|
if (el.classList.contains('is-fullscreen')) {
|
||
|
|
window.location.hash = '#' + this.idPrefix + id;
|
||
|
|
// Don't follow the link location.
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Export to DOM global space.
|
||
|
|
window.KssFullScreen = KssFullScreen;
|
||
|
|
|
||
|
|
})(window, document);
|