diff --git a/README.md b/README.md
index 78eb60b..146dd23 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ BEM helpers for jQuery
BEM is not tied to any particular implementation or framework. This jQuery plugin provides basic support for working with modifiers and setting up callbacks based on modifier change.
-This implementation supports BEM naming convention introduced by [Yandex](http://yandex.com):
+This implementation by default supports BEM naming convention introduced by [Yandex](http://yandex.com):
* CSS class names are used to denote BEM entities
* Blocks with and without prefix are supported
@@ -16,7 +16,19 @@ This implementation supports BEM naming convention introduced by [Yandex](http:/
* Boolean modifiers: block_mod, block__element_mod
* Key/value modifiers: block_modname_modval, block__element_modname_modval
-There are plans to support alternative naming conventions; send me a message if you want a different BEM naming convention to be implemented.
+You can use alternative naming conventions by calling the `$.setBEMsyntax` function:
+
+```javascript
+var newSyntax = $.setBEMsyntax({
+ elem: '__', // separator between block and element name
+ modBefore: '--', // separator between block/element and modifier name
+ modKeyVal: '_' // separator between modifier key and modifier value
+});
+```
+
+You can omit some properties if you inherit them from the previously defined scheme or default Yandex scheme.
+Changes are effective immediately and persist until you change them again.
+`newSyntax` contains an object describing the new syntax (all fields).
## setMod
diff --git a/bemhelpers.jquery.json b/bemhelpers.jquery.json
index d20859e..8cca00a 100644
--- a/bemhelpers.jquery.json
+++ b/bemhelpers.jquery.json
@@ -11,7 +11,7 @@
"getMod",
"onSetMod"
],
- "version": "2.1.3",
+ "version": "2.2.0",
"author": {
"name": "Max Shirshin",
"email": "max.shirshin@gmail.com"
diff --git a/bower.json b/bower.json
index a1d5512..c276dbf 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "jquery-bemhelpers",
- "version": "2.1.3",
+ "version": "2.2.0",
"homepage": "https://github.com/ingdir/jquery-bemhelpers",
"authors": [
"Max Shirshin "
diff --git a/jquery.bemhelpers.js b/jquery.bemhelpers.js
index 8e38a9f..cf368ff 100644
--- a/jquery.bemhelpers.js
+++ b/jquery.bemhelpers.js
@@ -2,13 +2,20 @@
* jQuery plugin for basic BEM manipulations.
*
* @author Max Shirshin
- * @version 2.1.3
+ * @version 2.2.0
*
*/
(function($, undefined) {
- var getEventPattern = function(block, elem, modName, modVal) {
- return block + (elem !== undefined ? '__' + elem : '') + '_' + modName + '_' + (typeof modVal === 'boolean' ? '*' : (modVal || '*'));
+ var BEMsyntax = {
+ elem: '__',
+ modBefore: '_',
+ modKeyVal: '_'
+ },
+ getEventPattern = function(block, elem, modName, modVal) {
+ return block + (elem !== undefined ? BEMsyntax.elem + elem : '') +
+ BEMsyntax.modBefore + modName + BEMsyntax.modKeyVal +
+ (typeof modVal === 'boolean' ? '*' : (modVal || '*'));
},
getElemClasses = function(domEl) {
if (domEl.classList) {
@@ -18,6 +25,18 @@
}
};
+ $.setBEMsyntax = function(props) {
+ if (typeof props !== 'object') return;
+
+ for (var prop in props) {
+ if (props.hasOwnProperty(prop) && BEMsyntax.hasOwnProperty(prop)) {
+ BEMsyntax[prop] = props[prop];
+ }
+ }
+
+ return $.extend({}, BEMsyntax);
+ };
+
$.extend($.fn, {
getMod: function(block, elem, modName) {
if (modName === undefined) {
@@ -26,15 +45,18 @@
}
if (this.length) {
- var classPattern = block + (elem !== undefined ? '__' + elem : '') + '_' + modName,
+ var classPattern = block + (elem !== undefined ? BEMsyntax.elem + elem : '') +
+ BEMsyntax.modBefore + modName,
modVal = false;
$.each(getElemClasses(this.get(0)), function(i, c) {
if (c === classPattern) {
modVal = true;
return false;
- } else if (c.indexOf(classPattern) === 0 && c.substr(classPattern.length, 1) === '_') {
- modVal = c.substr(classPattern.length + 1);
+ } else if (c.indexOf(classPattern) === 0
+ && c.substr(classPattern.length, BEMsyntax.modKeyVal.length) === BEMsyntax.modKeyVal) {
+
+ modVal = c.substr(classPattern.length + BEMsyntax.modKeyVal.length);
return false;
}
});
@@ -53,7 +75,8 @@
return this.each(function() {
var $this = $(this),
- classPattern = block + (elem !== undefined ? '__' + elem : '') + '_' + modName;
+ classPattern = block + (elem !== undefined ? BEMsyntax.elem + elem : '') +
+ BEMsyntax.modBefore + modName;
if (modVal === false) {
$this.removeClass(classPattern);
@@ -61,12 +84,14 @@
$this.addClass(classPattern);
} else {
$.each(getElemClasses(this), function(i, c) {
- if (c.indexOf(classPattern) === 0 && c.substr(classPattern.length, 1) === '_') {
+ if (c.indexOf(classPattern) === 0
+ && c.substr(classPattern.length, BEMsyntax.modKeyVal.length) === BEMsyntax.modKeyVal) {
+
$this.removeClass(c);
}
});
- $this.addClass(classPattern + '_' + modVal);
+ $this.addClass(classPattern + BEMsyntax.modKeyVal + modVal);
}
// after the modifier is set, run the corresponding custom event