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' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Working example at jsbin.