This commit is contained in:
reverend 2021-01-08 17:55:56 +01:00
parent cb6f67676e
commit b8be7a8ede
4 changed files with 231 additions and 223 deletions

View File

@ -17,6 +17,15 @@ _global_scope = {
_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
*/
@ -41,8 +50,13 @@ _get_element_selector()
* Block according to BEM
*/
RV-Block(name)
.{_css-prefix}-{name}
.{name}
push(_block_building_lane, {
elements: {}
block_modifiers: {}
})
{block}
for name, element in _global_scope['_selector_blocks_to_generate']
& &__{name}
for current_block in element.block_list
@ -70,25 +84,30 @@ RV-Block__Modifier(name)
* For more see RV-Element___Modifier
*/
RV-Element(name)
element_block_stack = _global_scope['_element_block_stack']
append(element_block_stack, block)
_global_scope['_element_block_stack'] = element_block_stack
// Is there a block to build
block_index = (index(called-from, 'RV-Block'))
p(called-from block_index slice(called-from, 0, block_index))
//Detect if the selector will be generated
//by an earlier call of RV-Element
if not 'RV-Element' in called-from
// Saving accumulated modifiers and blocks
element = {}
element['block_list'] = _global_scope['_element_block_stack']
element['modifier_list'] = _global_scope['_element_modifier_stack']
if length(_block_building_lane) >= 1
push(_block_building_lane, block)
//Reseting
_global_scope['_element_block_stack'] = ()
_global_scope['_element_modifier_stack'] = {}
current_block = _block_building_lane[-1]
//Saving element
_global_scope['_selector_blocks_to_generate'][name] = element
_global_scope['_last_element_name'] = name
//Detect if the selector will be generated
//by an earlier call of RV-Element
if not 'RV-Element' in called-from
// Saving accumulated modifiers and blocks
element = {}
element['block_list'] = _global_scope['_element_block_stack']
element['modifier_list'] = _global_scope['_element_modifier_stack']
//Reseting
_global_scope['_element_block_stack'] = ()
_global_scope['_element_modifier_stack'] = {}
//Saving element
_global_scope['_selector_blocks_to_generate'][name] = element
_global_scope['_last_element_name'] = name
/*
* Generates a CSS class for an element modifier

View File

@ -66,6 +66,9 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface')
flex-grow 1
RV-Fan__Base--wurst()
+RV-Element__Modifier('wurst')
--wurst wasser
/* ###############
* Element Mixins
@ -83,22 +86,13 @@ RV-Fan__Surface--fixedHeight(height)
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier('fixedWidth')
max-width width
RV-Fan__Surface()
+RV-Element('Surface')
RV-ContentCrop()
RV-Fan__Surface--fixedWidth(width)
RV-Fan__Surface--fixedHeight(height)
RV-Fan__Surface-Pack(width, height)
RV-Fan__Surface()
+RV-Element('Surface')
RV-Fan__Surface--fixedWidth(width)
RV-Fan__Surface--fixedHeight(height)
@block{
RV-ContentCrop()
}
/* ############
* Block Mixin
@ -106,57 +100,35 @@ RV-Fan__Surface-Pack(width, height)
RV-Fan()
display flex
RV-Fan__()
RV-Fan()
RV-Fan__Base()
RV-Fan__Surface()
/* #########
* CSS-Class
* ######### */
+RV-Block('Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan--(base-height, base-width)
RV-Fan()
RV-Fan__Surface()
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Base(base-height, base-width)
RV-Fan--fullWidth(base-height, base-width)
RV-Fan--vertical(base-height, base-width)
RV-Fan--horizontal(base-height, base-width)
RV-Fan--auto(base-height, base-width)
RV-Fan__Surface()
RV-Fan__Surface--()
RV-Fan__Base()
RV-Fan__Base--()
RV-Fan__--()
RV-Fan-Pack(base-height, base-width)
+RV-Block('wurst')
+RV-Block('Fächer')
RV-Fan()
RV-Fan__Surface-Pack(base-height, base-width)
RV-Fan__Base(base-height, base-width)
/* #########
* CSS-Class
* ######### */
.RV-Fan
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan-Pack(base-height, base-width)
/*
.tollecomponent
RV-Fan()
+RV-Element('Square')
RV-Fan__Base(50px, 50px)
RV-Fan__Base--wurst()
+RV-Element__Modifier('color')
RV-Fan__Base--blue()
+/
RV-Fan__Surface(50px, 50px)

View File

@ -1,75 +1,11 @@
_selector_maps = {}
_catched = {}
@css-class-prefix: RV
throw(id, callback)
if id in _selector_maps
hook = _selector_maps[id]
else
hook = {}
RV-Utils__Block(name, callback)
@name; name
@a-@name()
callback()
hook[selector()] = callback
_selector_maps[id] = hook
RV-Utils__Block(Test, @(){
color blue
})
catch(id, params)
if selector() in _catched
_catches = _catched[selector()]
else
_catches = {}
_catches[id] = params
_catched[selector()] = _catches
_generate_hooks()
for catched_selector, config in _catched
for id, parameter in config
if id in _selector_maps
hook = _selector_maps[id]
for thrown_selector, callback in hook
{thrown_selector}{catched_selector}
callback(parameter)
red()
color red
catch('button', green)
catch('field', red)
field()
display inline
padding 10px
border-bottom 2px solid blue
throw('field', @(){
border-bottom 2px solid red
color blue
})
button()
padding 5px
background-color orange
border 1px solid black
display inline
throw('button', @(c){color c})
.bluebutton
red()
button()
.button
button()
.wred
red()
.field
field()
.wurst
.field
field()
red()
.debug
--one _selector_maps
--two _catched
_generate_hooks()

View File

@ -318,91 +318,32 @@
bottom: 0;
right: 0;
}
.RV-Fan__Container--vertical {
.Fan {
--base-height: 280px;
--base-width: 320px;
display: flex;
}
.Fan.Fan--fullWidth {
flex-flow: row wrap;
}
.Fan.Fan--vertical {
flex-direction: column;
width: max-content;
}
.RV-Fan__Container--vertical .RV-Fan__Surface {
width: 320px;
min-height: 280px;
}
.RV-Fan__Container--horizontal {
.Fan.Fan--horizontal {
flex-direction: row;
}
.RV-Fan__Container--horizontal .RV-Fan__Surface {
min-width: 320px;
height: 280px;
}
.RV-Fan__Container--auto {
.Fan.Fan--auto {
flex-flow: row wrap;
}
.RV-Fan__Container--auto .RV-Fan__Surface {
width: calc(100% - 320px);
min-width: 320px;
height: 280px;
}
.RV-Fan__Container--fullWidth .RV-Fan__Base,
.RV-Fan__Container--fullWidth .RV-Fan__Surface {
flex-grow: 1;
}
.RV-Fan__Container {
.wurst .Fächer {
display: flex;
}
.RV-Fan__Base {
height: 280px;
width: 320px;
flex: 0 0 auto;
.wurst .Fächer .wurst .Fächer__Base--wurst {
--wurst: wasser;
}
.RV-Fan__Surface {
display: block;
overflow: hidden;
}
.RV-Fan__Surface .RV-Image *,
.RV-Fan__Surface .RV-Image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.RV-Fan__Surface .RV-Text {
overflow: hidden;
display: block;
text-overflow: ellipsis;
line-height: 1.21;
position: relative;
background-color: #fff;
max-height: 96.80000000000001%;
padding: 0;
margin: 0;
}
.RV-Fan__Surface .RV-Text * {
margin: 0;
padding-bottom: 19.360000000000003px;
}
.RV-Fan__Surface .RV-Text *:last-child {
padding-bottom: unset;
}
.RV-Fan__Surface--fade:after {
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
display: block;
content: ' ';
opacity: 0.8;
position: relative;
top: -25%;
width: 100%;
height: 25%;
z-index: 10;
}
.RV-Fan__Surface--ellipsis:after {
position: relative;
display: block;
bottom: 1.2em;
left: calc(100% - 3ch);
content: '...';
font-size: 1.2em;
min-width: 2em;
background-color: #fff;
padding: 0 2px;
.wurst .wurst__Base--wurst {
--wurst: wasser;
}
.RV-FlexGrid__Container {
display: grid;
@ -661,6 +602,81 @@
flex-wrap: wrap;
}
@include RV-FlexRow__Item;
.RV-OverlayButton__Item {
position: relative;
}
.RV-OverlayButton__Item:hover > * {
opacity: 1;
}
.RV-OverlayButton__Button {
text-align: center;
display: inline-block;
position: absolute;
background-color: #f5f5dc;
margin: 10px;
opacity: 0.2;
border-radius: 10px;
text-decoration: none;
display: grid;
justify-content: center;
display: grid;
align-items: center;
width: 50px;
height: 50px;
font-size: 25px;
line-height: 25px;
}
.RV-OverlayButton__Button--circle {
border-radius: 50%;
}
.RV-OverlayButton__Button--topRight {
right: 0;
top: 0;
}
.RV-OverlayButton__Button--small {
width: 30px;
height: 30px;
font-size: 15px;
line-height: 15px;
}
.RV-OverlayButton__Button--medium {
width: 50px;
height: 50px;
font-size: 25px;
line-height: 25px;
}
.RV-OverlayButton__Button--large {
width: 70px;
height: 70px;
font-size: 35px;
line-height: 35px;
}
.RV-OverlayButton__Row {
display: grid;
justify-content: center;
display: grid;
align-items: center;
padding: 25px;
gap: 25px;
column-gap: 25px;
display: flex;
height: 100%;
position: absolute;
bottom: 0;
height: 4em;
opacity: 0.2;
width: 100%;
justify-content: center;
background-color: rgba(255,255,255,0.5);
padding-left: 0;
padding-right: 0;
}
.RV-OverlayButton__Row * {
position: initial;
opacity: initial;
margin: 0;
padding: 0;
}
.RV-Menu--vertical .RV-Menu__List {
flex-direction: column;
width: 100%;
@ -855,6 +871,7 @@
.RV-ImageGrid__Item {
display: block;
overflow: hidden;
position: relative;
}
.RV-ImageGrid__Item .RV-Image *,
.RV-ImageGrid__Item .RV-Image {
@ -906,6 +923,58 @@
.RV-ImageGrid__Item .RV-Image * {
object-position: center;
}
.RV-ImageGrid__Item:hover > * {
opacity: 1;
}
.RV-ImageGrid__Button {
text-align: center;
display: inline-block;
position: absolute;
background-color: #f5f5dc;
margin: 10px;
opacity: 0.2;
border-radius: 10px;
text-decoration: none;
display: grid;
justify-content: center;
display: grid;
align-items: center;
width: 50px;
height: 50px;
font-size: 25px;
line-height: 25px;
right: 0;
top: 0;
width: 50px;
height: 50px;
font-size: 25px;
line-height: 25px;
}
.RV-ImageGrid__Button--circle {
border-radius: 50%;
}
.RV-ImageGrid__Button--topRight {
right: 0;
top: 0;
}
.RV-ImageGrid__Button--small {
width: 30px;
height: 30px;
font-size: 15px;
line-height: 15px;
}
.RV-ImageGrid__Button--medium {
width: 50px;
height: 50px;
font-size: 25px;
line-height: 25px;
}
.RV-ImageGrid__Button--large {
width: 70px;
height: 70px;
font-size: 35px;
line-height: 35px;
}
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * {
margin-bottom: 10px;
}
@ -942,6 +1011,18 @@
.RV-ImageGrid__Container.RV-Spacing__Inner--large * * {
margin-bottom: unset;
}
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * {
margin-bottom: 25px;
}
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * * {
margin-bottom: unset;
}
.RV-ImageGrid__Container.RV-OverlayButton__Row * {
margin-bottom: 25px;
}
.RV-ImageGrid__Container.RV-OverlayButton__Row * * {
margin-bottom: unset;
}
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * {
margin-bottom: 10px;
}