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

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
You can’t perform that action at this time.