Skip to content

Instantly share code, notes, and snippets.

@dmarcelino

dmarcelino/bs4_display.js

Last active Mar 9, 2018
Embed
What would you like to do?
Simple util library to show/hide HTML elements using the new BS4 classes d-none/d-*-none and d-block/d-*-block.
(function(window){
'use strict';
// wrapper
function bs4Display() {
var _bs4Display = {};
_bs4Display.DUMMY_PREFIX = 'dummy'
// private methods
_bs4Display._build_block_classes = function () {
if (_bs4Display._displayBlocks) {
return _bs4Display._displayBlocks;
}
var prefix = _bs4Display.DUMMY_PREFIX;
_bs4Display._blockArray = [
['d-block', prefix + '-block'],
['d-sm-block', prefix + '-sm-block'],
['d-md-block', prefix + '-md-block'],
['d-lg-block', prefix + '-lg-block'],
['d-xl-block', prefix + '-xl-block']
];
_bs4Display._noneArray = [
[prefix + '-none', 'd-none'],
[prefix + '-sm-none', 'd-sm-none'],
[prefix + '-md-none', 'd-md-none'],
[prefix + '-lg-none', 'd-lg-none'],
[prefix + '-xl-none', 'd-xl-none']
];
_bs4Display._displayBlocks = _bs4Display._blockArray.concat(_bs4Display._noneArray);
return _bs4Display._displayBlocks;
}
if (typeof(document.querySelector('body').classList.replace) !== 'undefined') {
// native replace
_bs4Display._replace = function (el, oldClass, newClass) {
return el.classList.replace(oldClass, newClass);
}
} else {
// polyfill, since support is not great:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
_bs4Display._replace = function (el, oldClass, newClass) {
if (el.classList.contains(oldClass)) {
el.classList.remove(oldClass);
el.classList.add(newClass);
}
}
}
// public methods
/**
* Hides a HTML element with BootStrap 4 markup
* @param {Element|[Element]} els - HTML element(s) to hide.
*/
_bs4Display.hide = function (els) {
if (!els) { return; } // nothing to hide
if (!(els instanceof Array)) { els = [els]; }
var dBlocks = _bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < dBlocks.length; i++) {
_bs4Display._replace(els[k], dBlocks[i][0], dBlocks[i][1]);
}
els[k].style.display = 'none';
}
}
/**
* Shows a HTML element with BootStrap 4 markup
* @param {Element|[Element]} els - HTML element(s) to show.
*/
_bs4Display.show = function (els) {
if (!els) { return; } // nothing to show
if (!(els instanceof Array)) { els = [els]; }
var dBlocks = _bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < dBlocks.length; i++) {
_bs4Display._replace(els[k], dBlocks[i][1], dBlocks[i][0]);
}
els[k].style.display = '';
}
}
/**
* Restores the HTML elements original display classes
* @param {Element|[Element]} els - HTML element(s) to reset.
*/
_bs4Display.reset = function (els) {
if (!els) { return; } // nothing to show
if (!(els instanceof Array)) { els = [els]; }
_bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < _bs4Display._blockArray.length; i++) {
_bs4Display._replace(els[k], _bs4Display._blockArray[i][1], _bs4Display._blockArray[i][0]);
_bs4Display._replace(els[k], _bs4Display._noneArray[i][0], _bs4Display._noneArray[i][1]);
}
els[k].style.display = '';
}
}
return _bs4Display;
}
if(typeof(window.bs4Display) === 'undefined') {
window.bs4Display = bs4Display();
}
})(window);
// optional, change prefix before first call
// window.bs4Display.DUMMY_PREFIX = 'bs4-display'
@dmarcelino

This comment has been minimized.

Copy link
Owner Author

@dmarcelino dmarcelino commented Mar 9, 2018

Working example at jsbin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment