File modules/template_engine/components/html/component_group/GroupComponent.class.php

Last commit: Sun Apr 18 01:21:33 2021 +0200	Jan Dankert	Fix: Correct CSS3 syntax for transitions on multiple properties; New: Using a transition for open/close collapsibles.


     1 <?php
     2 
     3 namespace template_engine\components\html\component_group;
     4 
     5 use template_engine\components\html\Component;
     6 use template_engine\element\CMSElement;
     7 use template_engine\element\HtmlElement;
     8 use template_engine\element\Value;
     9 use template_engine\element\ValueExpression;
    10 
    11 /**
    12  * A group.
    13  */
    14 class GroupComponent extends Component
    15 {
    16 
    17 	public $open = true;
    18 	public $show = true;
    19 	public $collapsible = true;
    20 	public $title;
    21 	public $description;
    22 	public $icon;
    23 	
    24 	public function createElement()
    25 	{
    26 		$group = (new HtmlElement('section'))->addStyleClass('group');
    27 
    28 		if  ( $this->collapsible )
    29 			$group->addStyleClass('collapsible');
    30 
    31 		$headline = (new HtmlElement('h2'))
    32 			->addStyleClass('collapsible-title')
    33 			->addStyleClass('group-title')
    34 			->addStyleClass('collapsible-act-switch')
    35 			->asChildOf( $group );
    36 
    37 		if   ( $this->open || !$this->collapsible )
    38 			$group->addStyleClass(['collapsible--is-open','collapsible--is-visible']);
    39 
    40 		if   ( $this->show )
    41 			$group->addStyleClass('collapsible--show' );
    42 
    43 		if	( $this->title )
    44 		{
    45 
    46 			if   ( $this->collapsible ) {
    47 
    48 				$arrowRight = (new HtmlElement('i'))->addStyleClass(['image-icon','image-icon--node-closed','collapsible--on-closed']);
    49 				$headline->addChild($arrowRight );
    50 
    51 				$arrowDown  = (new HtmlElement('i'))->addStyleClass(['image-icon','image-icon--node-open','collapsible--on-open']);
    52 				$headline->addChild($arrowDown  );
    53 			}
    54 
    55 			if	( $this->icon ) {
    56 
    57 				$image = new CMSElement('i');
    58 				$image->addStyleClass(['image-icon','image-icon--'.$this->icon]);
    59 				$headline->addChild( $image );
    60 			}
    61 
    62 			(new HtmlElement('span'))->content( $this->title )->asChildOf($headline);
    63 		}
    64 
    65 		if   ( $this->description )
    66 			(new HtmlElement('p'))
    67 				->addStyleClass(['group-description'])
    68 				->content( $this->description )
    69 				->asChildOf($group);
    70 
    71 		$value = (new HtmlElement('div'))
    72 			->addStyleClass(['collapsible-value','group-value'])
    73 			->asChildOf($group);
    74 
    75 		$this->adoptiveElement = $value;
    76 
    77 		return $group;
    78 	}
    79 
    80 }



Download modules/template_engine/components/html/component_group/GroupComponent.class.php


History
Sun, 18 Apr 2021 01:21:33 +0200	Jan Dankert	Fix: Correct CSS3 syntax for transitions on multiple properties; New: Using a transition for open/close collapsibles.
Thu, 25 Feb 2021 01:22:10 +0100	Jan Dankert	New: Edit all page elements in 1 view.
Mon, 9 Nov 2020 22:24:27 +0100	Jan Dankert	New: Setting the CSS class of tables.
Wed, 21 Oct 2020 00:26:06 +0200	Jan Dankert	Using fieldsets in all templates (replacing the old '')
Sun, 18 Oct 2020 01:30:49 +0200	Jan Dankert	New component "fieldset" for better form layout.
Wed, 14 Oct 2020 22:36:29 +0200	Jan Dankert	Refactoring: Fixed the namespace in component classes, now the are able to be load by the standard autoloader.
Wed, 14 Oct 2020 22:20:22 +0200	Jan Dankert	Refactoring: Renamed component folders, because 'if' is no valid namespace fragment.