JSFiddle - React, Tailwind, and code Playground

by vitkarpov

HTML

<div class="b1">
    <div class="b1__el">
        Hello, world!
    </div>
</div>
<button class="js-perceptible">
    Make me 
    <span class="b2">
        <span class="b2__perceptible">perceptible!</span>
        <span class="b2__usual">usual</span>
    </span>
</button>
<button class="js-hide">Hide me!</button>

CSS

.b1 {padding: 10px; background: lightyellow;}
.b1_hidden {display: none;}

.b1__el {padding: 10px; background: lightgreen;}
.b1__el_warning {color: red; font-weight: bold;}

.b2__usual {display: none;}
.b2_warning .b2__perceptible {display: none;}
.b2_warning .b2__usual {display: inline;}

JavaScript

var $b = $('.b1');
var $el = $('.b1__el');
var $b2 = $('.b2');

$('.js-perceptible').click(function() {
    if (!$el.hasMod('warning')) {
        $el.setMod('warning');
        $b2.setMod('warning');
    } else {
        $el.delMod('warning');
        $b2.delMod('warning');
    }
});

$('.js-hide').click(function() {
    $b.setMod('hidden');
});













(function ($, undefined) {

    var MOD_DLMTR = '_';

    /**
     * Sets modifier for each element in collection
     *
     * @param {String} mod   modifier or block`s filter with modifier
     * @param {String} value unnecessary value of the modifier
     * @return {jQuery}
     */
    $.fn.setMod = function(mod, value) {
        return this.each(function() {
            $(this).addClass(getBlocksClassesOnNode.call(this, mod, value).join(' '));
        });
    }

    /**
     * Removes modifier for each element in collection
     *
     * @param  {[type]} mod   modifier or block`s filter with modifier
     * @param  {[type]} value unnecessary value of modifier
     * @return {jQuery}
     */
    $.fn.delMod = function(mod, value) {
        return this.each(function() {
            $(this).removeClass(getBlocksClassesOnNode.call(this, mod, value).join(' '));
        });
    }
    
    $.fn.hasMod = function(mod, value) {
        console.log(getBlocksClassesOnNode.call(this, mod, value).join(' '));
        return this.hasClass(getBlocksClassesOnNode.call(this, mod, value).join(' '));
    }

    /**
     * Returns block`s classes specified on a node
     * Warning: this should refer to the node
     *
     * @param  {[type]} mod   modifier or block`s filter with modifier
     * @param  {[type]} value unnecessary value of modifier
     * @return {Array}
     */
    function getBlocksClassesOnNode(mod, value) {
        var $node = $(this);
        var blockByFilter = getIdBlockByFilter(mod);
        var classes = (blockByFilter)
                        ? [blockByFilter]
                        :...