This repository has been archived by the owner on Aug 5, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
bem.js
108 lines (86 loc) · 2.91 KB
/
bem.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import Component from '@ember/component';
import Mixin from '@ember/object/mixin';
import { set, get, defineProperty, computed } from '@ember/object';
import config from 'ember-get-config';
import { NAMING_STRATEGY_KEY } from '../variables';
import ClassicNamingStrategy from 'ember-cli-bem/naming-strategies/classic';
export default Mixin.create({
classNameBindings: [
'blockClassName',
'modsClassNames',
],
concatenatedProperties: ['mods'],
blockName: null,
elemName: null,
mods: null,
init() {
this._super(...arguments);
if (!get(this, 'mods')) {
set(this, 'mods', []);
}
if (!get(this, NAMING_STRATEGY_KEY)) {
this.__registerNamingStrategy__();
}
const mods = get(this, 'mods');
const modsDependencies = mods.map((mod) => this.__getModValueKey__(mod));
defineProperty(
this,
'modsClassNames',
computed('blockClassName', ...modsDependencies, this.__getModsClassNames__)
);
},
blockClassName: computed('blockName', 'elemName', function() {
const blockName = get(this, 'blockName');
const elemName = get(this, 'elemName');
const namingStrategy = get(this, '__namingStrategy__');
if (blockName && elemName) {
return namingStrategy.getElemClassName(blockName, elemName);
} else if (blockName) {
return namingStrategy.getBlockClassName(blockName);
}
}),
__getAddonConfig__() {
return config['ember-cli-bem'];
},
__getNamingStrategyFactory__() {
return ClassicNamingStrategy;
},
__registerNamingStrategy__() {
const config = this.__getAddonConfig__();
const namingStrategyFactory = this.__getNamingStrategyFactory__();
const namingStrategy = namingStrategyFactory.create(config);
Component.reopen({
[NAMING_STRATEGY_KEY]: namingStrategy,
});
set(this, NAMING_STRATEGY_KEY, namingStrategy);
},
__getModName__(modDefinition) {
const [modName, modValueProperty] = modDefinition.split(':');
return modValueProperty || modName;
},
__getModValueKey__(modDefinition) {
const [modName] = modDefinition.split(':');
return modName;
},
__getNegativeModName__(modDefinition) {
const [,, negativeModValueProperty] = modDefinition.split(':');
return negativeModValueProperty;
},
__getModsClassNames__() {
const blockClassName = get(this, 'blockClassName');
const namingStrategy = get(this, '__namingStrategy__');
const mods = get(this, 'mods');
const modsClassNames = mods.map((modDefinition) => {
const modName = this.__getModName__(modDefinition);
const negativeModName = this.__getNegativeModName__(modDefinition);
const modValueProperty = this.__getModValueKey__(modDefinition);
const modValue = get(this, modValueProperty);
return namingStrategy.getModClassName(blockClassName, {
modName,
negativeModName,
modValue
});
});
return modsClassNames.join(' ');
},
});