ingdir / jquery-bemhelpers Goto Github PK

View Code? Open in Web Editor NEW

18.0 18.0 2.0 20 KB

BEM helpers for jQuery

License: MIT License

JavaScript 26.10% HTML 73.90%

jquery-bemhelpers's People

Contributors

Stargazers

Watchers

Forkers

azproduction imalitavakoli

jquery-bemhelpers's Issues

Toggle modifier class using an array of modifiers

For a project, I have implemented a toggleMod-like method that accepts a base class name, e.g. 'button', and an array of modifiers, such as [ 'active', 'inactive' ]. If there is a class 'button_active' on the element, it gets changed to 'button_inactive', and the other way around. It works with however many values in the modifiers array, though it is probably most useful for two. Is there an interest in having such syntax in the library, maybe under a different name?

How to remove a key/value modifier from a block or element?

As far as I know we can remove a boolean modifer like this:
.setMod(blockName, elemName, modName, false)

But how can we remove a key/value modifier? If we write the following:
.setMod(blockName, elemName, modName, modVal) It will only be set! But is there really no way to remove it?

generateBlock and generateElement functions

Hi Max,

I discovered your plugin when looking for some small tool to manipulate bem nodes in a jquery/backbone project.

I'm personally tired of not only changing BEM modifiers, but also creating blocks and elements in JS dynamically, so I thought it would be helpful to have two additional helper functions that could help get rid of the following ugly structures:

var $myBlock = $('<div/>').addClass('my-block my-block_modifier1_value1 my-block_modifier2');
var $myElement = $('<div/>').addClass('my-block__element my-block__element_element-modifier_value');

The same can be written like this:

var $myBlock = $.bem.generateBlock('my-block', ['modifier1_value1', 'modifier2']);
var $myElement = $.bem.generateElement('my-block', 'element', ['element-modifier_value']);

Here’s a quick sketch of these two functions (they can go right before $.extend($.fn, {getMod in your code):

    $.bem = {
        generateBlock: function(tag, blockName, modifiers) {
            if (blockName === undefined) {
                blockName = tag;
                tag = 'div';
            } else if (Array.isArray(blockName)) {
                modifiers = blockName;
                blockName = tag;
                tag = 'div';
            }

            var $block = $('<' + tag + '/>').addClass(blockName);

            if (Array.isArray(modifiers)) {
                for (var i = 0; i < modifiers.length; i++) {
                    $block.addClass(blockName + '_' + modifiers[i]);
                }
            }
            return $block;
        },

        generateElement: function(tag, blockName, elementName, modifiers) {
            if (elementName === undefined) {
                elementName = blockName;
                blockName = tag;
                tag = 'div';
            } else if (Array.isArray(elementName)) {
                modifiers = elementName;
                elementName = blockName;
                blockName = tag;
                tag = 'div';
            }

            var elementClassName = blockName + '__' + elementName;
            var $element = $('<' + tag + '/>').addClass(elementClassName);

            if (Array.isArray(modifiers)) {
                for (var i = 0; i < modifiers.length; i++) {
                    $element.addClass(elementClassName + '_' + modifiers[i]);
                }
            }
            return $element;
        }
    };

Node tag is div by default, but it can be replaced with span or whatever:

var $myBlock = $.bem.generateBlock('p', 'my-block', ['modifier1_value1', 'modifier2']);
var $myElement = $.bem.generateElement('span', 'my-block', 'element', ['element-modifier_value']);

Modifiers can be omitted:

var $myBlock = $.bem.generateBlock('p', 'my-block');
var $myElement = $.bem.generateElement('span', 'my-block', 'element');

var $myBlock = $.bem.generateBlock('my-block');
var $myElement = $.bem.generateElement('my-block', 'element');

I'm not asking you to add these functions to your plugin, just sharing my random thoughts. Sorry for not making this a proper pull-request – don't have time on pareparing it unfortunately. Feel free to modify and merge these new functions with your code or simply archive this github issue if you don't find them useful.

Configurable modifier signs

I am using a sign convention that signals modifier classes by -- instead of _, as per this article. This plug-in would be helpful for me if I could set this as a configuration option.

hasMod, toggleMod

hasMod is obvious:

hasMod: function(block, elem, modName) {
       return !!$(this).getMod(block, elem, modName);
}

Also toggleMod if modifier is boolean, but what if it is a key-value modifier? Just remove it?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.