Panels

[armandostyl]

Hi! Thank you for the great work on the nav type.

I have also began trying, as a beginner, to implement the Panels from Bootstrap 4.

I have made some progress, but I am still working on it. If it's okay, I'd rather post here the code, as I am unsure if it's well-written.

[armandostyl]

styles.less

/* Panel */
.mikiop-panel {
  border: 1px solid var(--mikiop-panel-border-color);
  background-color: var(--mikiop-panel-background-color);
  padding: 1em;
  margin-bottom: 1em;
}

.mikiop-panel-heading {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.mikiop-panel-body {
  margin-top: 0.5em;
}

[armandostyl]

variables.css

/* Panel */
  --mikiop-panel-border-color: #ddd;
  --mikiop-panel-heading-background-color: #f5f5f5;
  --mikiop-panel-heading-color: #333;
  --mikiop-panel-heading-font-size: 16px;
  --mikiop-panel-heading-font-weight: bold;
  --mikiop-panel-body-padding: 15px;

For theme-dark:

  --mikiop-panel-border-color: #555;
  --mikiop-panel-heading-background-color: #333;
  --mikiop-panel-heading-color: #fff;
  --mikiop-panel-heading-font-size: 16px;
  --mikiop-panel-heading-font-weight: bold;
  --mikiop-panel-body-padding: 15px;

[armandostyl]

panel.php

<?php
if (!defined('DOKU_INC')) { die(); }
if (!defined('DOKU_PLUGIN')) { define('DOKU_PLUGIN', DOKU_INC.'lib/plugins/'); }
require_once dirname(__FILE__).'/core.php';

class syntax_plugin_mikioplugin_panel extends syntax_plugin_mikioplugin_core
{
    public $tag                 = 'panel';
    public $hasEndTag           = true;
    public $options             = array(
        'type'         => array('type' => 'text', 'default' => 'default'),
        'heading'      => array('type' => 'text', 'default' => ''),
    );

    public function __construct()
    {
        $this->addCommonOptions('panel');
    }

    public function getAllowedTypes()
    {
        return array('container');
    }

    public function render_lexer_enter(Doku_Renderer $renderer, $data)
    {
        $classes = $this->buildClass($data);
        $styles = $this->buildStyle(array('border-color' => $data['border-color']), true);

        $renderer->doc .= '<div class="' . $this->elemClass . ' ' . $this->classPrefix . 'panel panel-' . $data['type'] . ' ' . $classes . '"' . $styles . '>';

        if ($data['heading'] != '') {
            $renderer->doc .= '<div class="' . $this->classPrefix . 'panel-heading">' . $data['heading'] . '</div>';
        }

        $renderer->doc .= '<div class="' . $this->classPrefix . 'panel-body">';
    }

    public function render_lexer_exit(Doku_Renderer $renderer, $data)
    {
        $renderer->doc .= '</div>'; // Close panel-body
        $renderer->doc .= '</div>'; // Close panel
    }
}
?>

I am still unsure how to begin implementing variations (primary-secondary-success etc.), and round corners as in the bootstrap4 site.

[armandostyl]

Also I want to look into include listgroups and tables in panels, but have no clue how to get around doing that.

[nomadjimbob]

Looks good, however a few things I noticed:

$this->addCommonOptions('panel') - 'panel' is not a common option defined in the core element. It doesn't appear to be an option in your element, so there is no need to define it. The $tag = 'panel' is all you need to define the element.

Remove the type option from your $options and instead add it using $this->addCommonOptions('type'). This ensures that the type option can be used identically on the panel as in other elements. You can also remove panel-' . $data['type'] from the class list of the panel div, ending up with only

$renderer->doc .= '<div class="' . $this->elemClass . ' ' . $this->classPrefix . 'panel ' . $classes . '"' . $styles . '>';

As we are using the common option type, which has some special class information attached to it, the buildClass function will see this and return the class name, which will be added to the panel div in the $classes variable.

You can view the 'type option class information' here.

To implement the types in the stylesheet, you should be able to mixin the ._mikiop-alert-types into the .mikiop-panel class. Similar to how it is done with the accordian-item, steps and other elements.

The rounded corners can be added by adding the style border-radius: 0.2em; to .mikiop-panel.

I haven't tested it, but should work. Let me know how you go.

[armandostyl]

Ok, so this is the code I put into panel.php

<?php
if (!defined('DOKU_INC')) { die(); }
if (!defined('DOKU_PLUGIN')) { define('DOKU_PLUGIN', DOKU_INC.'lib/plugins/'); }
require_once dirname(FILE).'/core.php';

class syntax_plugin_mikioplugin_panel extends syntax_plugin_mikioplugin_core
{
    public $tag                 = 'panel';
    public $hasEndTag           = true;
    public $options             = array(
        'heading'      => array('type' => 'text', 'default' => ''),
    );

    public function __construct()
    {
        $this->addCommonOptions('type');
    }

    public function getAllowedTypes()
    {
        return array('container');
    }

    public function render_lexer_enter(Doku_Renderer $renderer, $data)
    {
        $classes = $this->buildClass($data);
        $styles = $this->buildStyle(array('border-color' => $data['border-color']), true);

        $renderer->doc .= '<div class="' . $this->elemClass . ' ' . $this->classPrefix . 'panel ' . $classes . '"' . $styles . '>';

        if ($data['heading'] != '') {
            $renderer->doc .= '<div class="' . $this->classPrefix . 'panel-heading">' . $data['heading'] . '</div>';
        }

        $renderer->doc .= '<div class="' . $this->classPrefix . 'panel-body">';
    }

    public function render_lexer_exit(Doku_Renderer $renderer, $data)
    {
        $renderer->doc .= '</div>'; // Close panel-body
        $renderer->doc .= '</div>'; // Close panel
    }
}
?>

And this is the error I get:

2023-06-15 10:56:52Error: Undefined constant "FILE"/var/www/vhosts/vampire.gr/wiki.vampire.gr/lib/plugins/mikioplugin/syntax/panel.php(4)
    #0 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/load.php(156): require()
    #1 [internal function]: load_autoload()
    #2 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/Extension/PluginController.php(107): class_exists()
    #3 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/pluginutils.php(54): dokuwiki\Extension\PluginController->load()
    #4 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/parserutils.php(583): plugin_load()
    #5 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/parserutils.php(222): p_get_parsermodes()
    #6 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/parserutils.php(198): p_get_instructions()
    #7 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/parserutils.php(158): p_cached_instructions()
    #8 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/Extension/PluginTrait.php(101): p_cached_output()
    #9 /var/www/vhosts/vampire.gr/wiki.vampire.gr/lib/plugins/logviewer/admin.php(46): dokuwiki\Extension\Plugin->locale_xhtml()
    #10 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/template.php(188): admin_plugin_logviewer->html()
    #11 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/Action/Admin.php(40): tpl_admin()
    #12 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/template.php(100): dokuwiki\Action\Admin->tplContent()
    #13 [internal function]: tpl_content_core()
    #14 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/Extension/Event.php(133): call_user_func_array()
    #15 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/Extension/Event.php(199): dokuwiki\Extension\Event->trigger()
    #16 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/template.php(85): dokuwiki\Extension\Event::createAndTrigger()
    #17 /var/www/vhosts/vampire.gr/wiki.vampire.gr/lib/tpl/mikio/mikio.php(1125): tpl_content()
    #18 /var/www/vhosts/vampire.gr/wiki.vampire.gr/lib/tpl/mikio/main.php(89): dokuwiki\template\mikio\Template->includeContent()
    #19 /var/www/vhosts/vampire.gr/wiki.vampire.gr/inc/actions.php(27): include('...')
    #20 /var/www/vhosts/vampire.gr/wiki.vampire.gr/doku.php(126): act_dispatch()
    #21 {main}

[nomadjimbob]

require_once dirname(FILE).'/core.php'; should be require_once(dirname(__FILE__).'/core.php');

[armandostyl]

It's working but I messed up the CSS colors. I'll fix them and try again.

[armandostyl]

For the life of me, I can't get the panel heading and body to enforce CSS...

[nomadjimbob]

Could you attach the files so I can take a look?

• panel.php
• styles.less
• variables.css

[armandostyl]

It's what I've posted here in the comments. In the styles.less and variables.css, the panel styling is added near the end, separated by dark or light mode.

[nomadjimbob]

Apologies for the delay. Not all your variables are linked to the a style and vise-versa.

For example, none of the --mikiop-panel-heading-* are listed as a variable in styles.less, also --mikiop-panel-background-color is listed in styles.less, but is not in variables.css.

I would also recommend that you wrap the panel body in a div with the class .mikiop-panel-body and apply the padding to this body class instead of the .mikiop-panel class, else the panel heading would be offset by the padding.

[armandostyl]

Hi, unfortunately I have not been able to make progress as this is beyond my programming skill. :(

[armandostyl]

Any news on adding panels to mikioplugin?

[nomadjimbob]

Lets knock this out before this issue makes a full year.

Have you got a link to the bootstrap panels?

[armandostyl]

Lets knock this out before this issue makes a full year.

Have you got a link to the bootstrap panels?

https://www.w3schools.com/bootstrap/bootstrap_panels.asp

[nomadjimbob]

Isn't that just using the existing card? (I updated the The background color used on Mikio Plugin elements to #ffffff in the Template Style Settings)

<card header="Panel Heading">
Panel Content
</card>