First Comopnent using the bem generator
This commit is contained in:
parent
5a503eec70
commit
fb5fa8ce6c
@ -7,43 +7,6 @@
|
|||||||
@import './_laneHandling'
|
@import './_laneHandling'
|
||||||
|
|
||||||
_css-prefix = 'RV'
|
_css-prefix = 'RV'
|
||||||
_global_scope = {
|
|
||||||
_selector_blocks_to_generate: {}
|
|
||||||
_element-modifier: ()
|
|
||||||
_additional-element-modifier-blocks: ()
|
|
||||||
_last_element_name: null
|
|
||||||
_blocks_to_generate: ()
|
|
||||||
_element_modifier_block_stack: ()
|
|
||||||
_element_block_stack: ()
|
|
||||||
_element_modifier_stack: {}
|
|
||||||
}
|
|
||||||
|
|
||||||
_block_building_lane = ()
|
|
||||||
_element_building_lange = ()
|
|
||||||
|
|
||||||
_work_lane(lane, callback)
|
|
||||||
l = length(lane)
|
|
||||||
for _ in (0..l)
|
|
||||||
piece = pop(lane)
|
|
||||||
callback(piece)
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Gets the selector of the parent class
|
|
||||||
*/
|
|
||||||
_get_parent_selector()
|
|
||||||
return split(' ', selector())[-1]
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Gets the selector of the current block
|
|
||||||
*/
|
|
||||||
_get_block_selector()
|
|
||||||
return unquote(split('__', _get_parent_selector())[0])
|
|
||||||
|
|
||||||
|
|
||||||
_get_element_selector()
|
|
||||||
element--modifier = split('__', _get_parent_selector())[1]
|
|
||||||
return unquote(split('--', element--modifier)[0])
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -51,6 +14,7 @@ _get_element_selector()
|
|||||||
* Block according to BEM
|
* Block according to BEM
|
||||||
*/
|
*/
|
||||||
RV-Block(block_name)
|
RV-Block(block_name)
|
||||||
|
_pop_lane('element_aliases')
|
||||||
b = @block{
|
b = @block{
|
||||||
{block}
|
{block}
|
||||||
& .{block_name}{
|
& .{block_name}{
|
||||||
@ -79,6 +43,8 @@ RV-Block(block_name)
|
|||||||
.{block_name}
|
.{block_name}
|
||||||
{b}
|
{b}
|
||||||
|
|
||||||
|
_reset_aliases()
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Generates a CSS class for an block modifier
|
* Generates a CSS class for an block modifier
|
||||||
* according to BEM.
|
* according to BEM.
|
||||||
@ -120,16 +86,18 @@ RV-Element(element_name)
|
|||||||
//by an earlier call of RV-Element
|
//by an earlier call of RV-Element
|
||||||
if not 'RV-Element' in called-from
|
if not 'RV-Element' in called-from
|
||||||
// Saving accumulated modifiers and blocks
|
// Saving accumulated modifiers and blocks
|
||||||
|
for alias in _pop_stack('element_aliases')
|
||||||
|
_set_alias(alias, element_name)
|
||||||
stack_name = 'elements_to_generate'
|
stack_name = 'elements_to_generate'
|
||||||
if 'RV-Block__Modifier' in called-from
|
if 'RV-Block__Modifier' in called-from
|
||||||
stack_name = 'block_modifier_elements_to_generate'
|
stack_name = 'block_modifier_elements_to_generate'
|
||||||
|
|
||||||
|
element_name = _get_alias(element_name)
|
||||||
element_block = @block{
|
element_block = @block{
|
||||||
&__{element_name}{
|
&__{element_name}{
|
||||||
for sub_block in _pop_stack(){
|
for sub_block in _pop_stack(){
|
||||||
{sub_block}
|
{sub_block}
|
||||||
}
|
}
|
||||||
|
|
||||||
&^[-3..-3]__{element_name}{
|
&^[-3..-3]__{element_name}{
|
||||||
for modifier_block in _pop_stack('element_modifiers_to_generate'){
|
for modifier_block in _pop_stack('element_modifiers_to_generate'){
|
||||||
{modifier_block}
|
{modifier_block}
|
||||||
@ -140,7 +108,8 @@ RV-Element(element_name)
|
|||||||
|
|
||||||
_push_onto_stack(element_block, stack_name)
|
_push_onto_stack(element_block, stack_name)
|
||||||
_set_last_name(element_name)
|
_set_last_name(element_name)
|
||||||
|
else
|
||||||
|
_push_onto_stack(element_name, 'element_aliases')
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Generates a CSS class for an element modifier
|
* Generates a CSS class for an element modifier
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
_lanes = {}
|
_lanes = {}
|
||||||
_stacks = {}
|
_stacks = {}
|
||||||
|
_aliases = {}
|
||||||
_last_name = {}
|
_last_name = {}
|
||||||
|
|
||||||
|
|
||||||
_block_type(block_type)
|
_block_type(block_type)
|
||||||
|
|
||||||
if block_type == null
|
if block_type == null
|
||||||
@ -118,3 +120,30 @@ _pop_lane(block_type=null)
|
|||||||
return lane
|
return lane
|
||||||
else
|
else
|
||||||
return {}
|
return {}
|
||||||
|
|
||||||
|
_set_alias(name, alias, block_type=null)
|
||||||
|
block_type = _block_type(block_type)
|
||||||
|
|
||||||
|
if block_type in _aliases
|
||||||
|
alias_map = _aliases[block_type]
|
||||||
|
else
|
||||||
|
alias_map = {}
|
||||||
|
|
||||||
|
alias_map[name] = alias
|
||||||
|
_aliases[block_type] = alias_map
|
||||||
|
|
||||||
|
_get_alias(name, block_type=null)
|
||||||
|
block_type = _block_type(block_type)
|
||||||
|
|
||||||
|
if block_type in _aliases
|
||||||
|
alias_map = _aliases[block_type]
|
||||||
|
if name in alias_map
|
||||||
|
return alias_map[name]
|
||||||
|
else
|
||||||
|
return name
|
||||||
|
else
|
||||||
|
return name
|
||||||
|
|
||||||
|
_reset_aliases()
|
||||||
|
for key in keys(_aliases)
|
||||||
|
remove(_aliases, key)
|
@ -66,8 +66,6 @@ RV-Fan--fullWidth(base-height, base-width)
|
|||||||
+RV-Element('Surface')
|
+RV-Element('Surface')
|
||||||
flex-grow 1
|
flex-grow 1
|
||||||
|
|
||||||
RV-Fan__Base--wurst()
|
|
||||||
--wurst 'wasser'
|
|
||||||
|
|
||||||
/* ###############
|
/* ###############
|
||||||
* Element Mixins
|
* Element Mixins
|
||||||
@ -79,9 +77,11 @@ RV-Fan__Base(base-height, base-width)
|
|||||||
flex 0 0 auto
|
flex 0 0 auto
|
||||||
|
|
||||||
RV-Fan__Surface--fixedHeight(height)
|
RV-Fan__Surface--fixedHeight(height)
|
||||||
|
+RV-Element__Modifier('fixedHeight')
|
||||||
height height
|
height height
|
||||||
|
|
||||||
RV-Fan__Surface--fixedWidth(width)
|
RV-Fan__Surface--fixedWidth(width)
|
||||||
|
+RV-Element__Modifier('fixedWidth')
|
||||||
max-width width
|
max-width width
|
||||||
|
|
||||||
RV-Fan__Surface()
|
RV-Fan__Surface()
|
||||||
@ -98,23 +98,6 @@ RV-Fan()
|
|||||||
* CSS-Class
|
* CSS-Class
|
||||||
* ######### */
|
* ######### */
|
||||||
|
|
||||||
.test
|
|
||||||
+RV-Block('Hasi')
|
|
||||||
RV-CSSParameter({
|
|
||||||
base-height: 280px,
|
|
||||||
base-width: 320px
|
|
||||||
})
|
|
||||||
RV-Fan()
|
|
||||||
|
|
||||||
+RV-Element('Flauschi')
|
|
||||||
RV-Fan__Base(base-height, base-width)
|
|
||||||
RV-Fan__Base--wurst()
|
|
||||||
|
|
||||||
+RV-Element('Löffel')
|
|
||||||
RV-Fan__Surface()
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
+RV-Block('RV-Fan')
|
+RV-Block('RV-Fan')
|
||||||
RV-CSSParameter({
|
RV-CSSParameter({
|
||||||
base-height: 280px,
|
base-height: 280px,
|
||||||
@ -124,48 +107,12 @@ RV-Fan()
|
|||||||
RV-Fan()
|
RV-Fan()
|
||||||
|
|
||||||
RV-Fan__Surface()
|
RV-Fan__Surface()
|
||||||
+RV-Element__Modifier('fixedWidth')
|
|
||||||
RV-Fan__Surface--fixedWidth(base-width)
|
RV-Fan__Surface--fixedWidth(base-width)
|
||||||
+RV-Element__Modifier('fixedHeight')
|
|
||||||
RV-Fan__Surface--fixedHeight(base-height)
|
RV-Fan__Surface--fixedHeight(base-height)
|
||||||
|
|
||||||
RV-Fan__Base(base-height, base-width)
|
RV-Fan__Base(base-height, base-width)
|
||||||
+RV-Element__Modifier('wurst')
|
|
||||||
RV-Fan__Base--wurst()
|
|
||||||
|
|
||||||
RV-Fan--fullWidth(base-height, base-width)
|
RV-Fan--fullWidth(base-height, base-width)
|
||||||
RV-Fan--vertical(base-height, base-width)
|
RV-Fan--vertical(base-height, base-width)
|
||||||
RV-Fan--horizontal(base-height, base-width)
|
RV-Fan--horizontal(base-height, base-width)
|
||||||
RV-Fan--auto(base-height, base-width)
|
RV-Fan--auto(base-height, base-width)
|
||||||
|
|
||||||
.test
|
|
||||||
--test 'test'
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
RV-Test()
|
|
||||||
+RV-Block('Block')
|
|
||||||
--wurst yeet
|
|
||||||
//RV-Fan__Surface(50px, 50px)
|
|
||||||
+RV-Element('Element')
|
|
||||||
+RV-Element('Subelement')
|
|
||||||
color black
|
|
||||||
--blubb wasser
|
|
||||||
|
|
||||||
+RV-Element__Modifier('ElementModifier')
|
|
||||||
--pp 'wurst'
|
|
||||||
|
|
||||||
+RV-Element__Modifier('ElementModifierAfter')
|
|
||||||
--pipi 'kaka'
|
|
||||||
|
|
||||||
|
|
||||||
+RV-Block__Modifier('BlockModifier')
|
|
||||||
border 1px solid red
|
|
||||||
+RV-Element('ElementInBlockModifier')
|
|
||||||
color pink
|
|
||||||
+RV-Element__Modifier('ElementModifier')
|
|
||||||
color skyblue
|
|
||||||
|
|
||||||
.wurstwasser
|
|
||||||
RV-Test()
|
|
||||||
*/
|
|
Loading…
Reference in New Issue
Block a user