ye

components/00_Global/_bemGenerator.styl

@@ -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']
+	// Is there a block to build
-	append(element_block_stack, block)
+	block_index = (index(called-from, 'RV-Block'))
-	_global_scope['_element_block_stack'] = element_block_stack
+	p(called-from block_index slice(called-from, 0, block_index))
 	
-	//Detect if the selector will be generated
+	if length(_block_building_lane) >= 1
-	//by an earlier call of RV-Element
+		push(_block_building_lane, block)
-	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
+		current_block = _block_building_lane[-1]
-		_global_scope['_element_block_stack'] = ()
-		_global_scope['_element_modifier_stack'] = {}
 		
-		//Saving element
+		//Detect if the selector will be generated
-		_global_scope['_selector_blocks_to_generate'][name] = element
+		//by an earlier call of RV-Element
-		_global_scope['_last_element_name'] = name
+		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

components/01_Layouts/fan/_fan.styl

@@ -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()
+		@block{
-		
+			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 Mixin
@@ -106,57 +100,35 @@ RV-Fan__Surface-Pack(width, height)
 RV-Fan()
 	display flex
 
-RV-Fan__()
+/* #########
-	RV-Fan()
+ * CSS-Class
-	RV-Fan__Base()
+ * ######### */
-	RV-Fan__Surface()
+
++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-Block('wurst')
-
+	+RV-Block('Fächer')
-RV-Fan__Base()
-
-RV-Fan__Base--()
-
-RV-Fan__--()
-
-RV-Fan-Pack(base-height, base-width)
 		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__Surface(50px, 50px)
-			RV-Fan__Base--blue()
-+/			
-		
-	
-	
 		

components/playground.styl

@@ -1,75 +1,11 @@
-_selector_maps = {}
+@css-class-prefix: RV
-_catched = {}
 
-throw(id, callback)
+RV-Utils__Block(name, callback)
-	if id in _selector_maps
+	@name; name
-		hook = _selector_maps[id]
+	@a-@name()
-	else    
+		callback()
-		hook = {}
 			
-	hook[selector()] = callback
+RV-Utils__Block(Test, @(){
-	_selector_maps[id] = hook
+	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()

public/rcss.css

@@ -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 {
+.Fan.Fan--horizontal {
-  width: 320px;
-  min-height: 280px;
-}
-.RV-Fan__Container--horizontal {
   flex-direction: row;
 }
-.RV-Fan__Container--horizontal .RV-Fan__Surface {
+.Fan.Fan--auto {
-  min-width: 320px;
-  height: 280px;
-}
-.RV-Fan__Container--auto {
   flex-flow: row wrap;
 }
-.RV-Fan__Container--auto .RV-Fan__Surface {
+.wurst .Fächer {
-  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 {
   display: flex;
 }
-.RV-Fan__Base {
+.wurst .Fächer .wurst .Fächer__Base--wurst {
-  height: 280px;
+  --wurst: wasser;
-  width: 320px;
-  flex: 0 0 auto;
 }
-.RV-Fan__Surface {
+.wurst .wurst__Base--wurst {
-  display: block;
+  --wurst: wasser;
-  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;
 }
 .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;
 }