diff --git a/public_html/classes/render-adminlte.class.php b/public_html/classes/render-adminlte.class.php index fadb90986b594ade60fb8a322d8b52c8f3e5852e..f6fa69e137d0ccbf2bf48389085dcbdda4f02cf2 100755 --- a/public_html/classes/render-adminlte.class.php +++ b/public_html/classes/render-adminlte.class.php @@ -517,6 +517,7 @@ class renderadminlte { /** * get a card * https://adminlte.io/docs/3.2/components/cards.html + * https://adminlte.io/docs/3.2/javascript/card-widget.html * * @param type $aOptions hash with keys for all options * >> styling @@ -526,6 +527,14 @@ class renderadminlte { * "gradient" - whole card is colored with a gradient * - type - one of [none]|danger|dark|info|primary|secondary|success|warning * - class - any css class for customizing, eg. "disabled" + * - state - one of [none]|collapsed|maximized + * + * >> toolbar icons - set to true to show it; default: none of it is visible + * - tb-collaps + * - tb-expand it is added automatically if you set 'state'=>'collapsed' + * - tb-maximize + * - tb-minimize it is added automatically if you set 'state'=>'maximized' + * - tb-remove * * >> texts/ html content * - title - text: title of the card @@ -535,7 +544,7 @@ class renderadminlte { * @return string */ public function getCard($aOptions){ - $aOptions=$this->_ensureOptions($aOptions, ['variant', 'type', 'class', 'title', 'tools', 'text', 'footer']); + $aOptions=$this->_ensureOptions($aOptions, ['variant', 'type', 'class', 'collapsable', 'title', 'tools', 'text', 'footer']); // css class prefixes based on "variant" value $aVariants=[ 'default' => 'card-', @@ -544,13 +553,41 @@ class renderadminlte { 'gradient' => 'bg-gradient-', ]; + // window states: css class and toolbar buttons to add + $aStates=[ + 'collapsed'=>[ 'class'=>'collapsed-card', 'tool'=>'tb-expand'], + 'maximized'=>[ 'class'=>'maximized-card', 'tool'=>'tb-minimize'], + ]; + $aTools=[ + 'tb-collaps'=>'<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>', + 'tb-expand'=>'<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>', + + 'tb-maximize'=>'<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>', + 'tb-minimize'=>'<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-compress"></i></button>', + + 'tb-remove'=>'<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>', + ]; + // print_r($aOptions); + $sVariantPrefix=$aVariants[$aOptions['variant']] ? $aVariants[$aOptions['variant']] : $aVariants['default']; $sClass='card' .($aOptions['class'] ? ' '.$aOptions['class'] : '') .($aOptions['type'] ? ' '.$sVariantPrefix.$aOptions['type'] : '') ; - + + // check window state + foreach($aStates as $sStatus=>$aStatus){ + if($aOptions['state']===$sStatus){ + $sClass.=' '.$aStatus['class']; + $aOptions[$aStatus['tool']]=1; + } + } + + // add toolbar buttons - from given options or by window state + foreach($aTools as $sTool=>$sHtml){ + $aOptions['tools'].=($aOptions[$sTool] ? $sHtml : ''); + } // build parts of the card $sCardHeader=$this->addWrapper('div', ['class'=>'card-header'], $this->_tag('h3', ['class'=>'card-title', 'label'=>$aOptions['title']]) diff --git a/public_html/pages/components/card.php b/public_html/pages/components/card.php index 3b06850d674e1284de4d921c6b6c20f2faadd25f..6a3ae8a3a375d164d0437faec724d3a5ee3eac21 100644 --- a/public_html/pages/components/card.php +++ b/public_html/pages/components/card.php @@ -3,6 +3,12 @@ $aOptions=[ 'type'=>'primary', 'variant'=>'solid', + + 'tb-remove'=>1, + 'tb-collapse'=>1, + + // 'state'=>'collapsed', + 'title'=>'I am a card', 'tools'=>'123', 'text'=>'Hello everybody out there!',