Table des matières

Info Box

I use the bootstrap plugin along with the Bootstrap Wrapper Plugin, but I find that the syntax to add alert boxes is a hassle mainly due to the icon. The idea is to expand the alert class to create my own infobox class that would include an icon and offer the option to be centered

Usage

You can use the infobox tag in you wiki syntax as follows : <infobox>This is the default behaviour, you can include wiki markup in these infoboxes.</infobox> <infobox type=“success”>You can add a type (success, info, warning or danger)</infobox> <infobox type=“warning” width=“80%”>You can add width argument (here 80%), the box is centered by default.</infobox> <infobox type=“danger” width=“40%” center=“0”>And you can remove the centering by adding center=“0”</infobox>

The code

In dokuwiki/lib/plugins/bootswrapper/syntax you need to create the infobox.php file and add the following content to it :

infobox.php
<?php
/**
 * Bootstrap Wrapper Plugin: Alert
 * 
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com>
 * @copyright  (C) 2015-2016, Giuseppe Di Terlizzi
 */
 
// must be run within Dokuwiki
if(!defined('DOKU_INC')) die();
 
require_once(dirname(__FILE__).'/bootstrap.php');
 
class syntax_plugin_bootswrapper_infobox extends syntax_plugin_bootswrapper_bootstrap {
 
  public $pattern_start  = '<(?:INFOBOX|infobox).*?>(?=.*?</(?:INFOBOX|infobox)>)';
  public $pattern_end    = '</(?:INFOBOX|infobox)>';
  public $tag_name       = 'infobox';
  public $tag_attributes = array(
 
    'type'      => array('type'     => 'string',
                         'values'   => array('success', 'info', 'warning', 'danger'),
                         'required' => true,
                         'default'  => 'info'),
 
    'dismiss'   => array('type'     => 'boolean',
                         'values'   => array(0, 1),
                         'required' => false,
                         'default'  => false),
 
    'icon'      => array('type'     => 'string',
                         'values'   => null,
                         'required' => false,
                         'default'  => null),
 
    'center'    => array('type'     => 'boolean',
                         'values'   => array(0, 1),
                         'required' => false,
                         'default'  => true),
 
      'width'      => array('type'     => 'string',
                            'values'   => null,
                            'required' => false,
                            'default'  => null),
  );
 
  function getPType(){ return 'block'; }
 
  function render($mode, Doku_Renderer $renderer, $data) {
 
    if (empty($data)) return false;
    if ($mode !== 'xhtml') return false;
 
    /** @var Doku_Renderer_xhtml $renderer */
    list($state, $match, $attributes) = $data;
 
    switch($state) {
 
      case DOKU_LEXER_ENTER:
 
        extract($attributes);
 
        $html_attributes = $this->mergeCoreAttributes($attributes);
        $html_attributes['class'][] = 'bs-wrap alert';
        $html_attributes['class'][] = "alert-$type";
        $html_attributes['role'] = 'alert';
 
        $style=[];
        if ($center)          {$html_attributes['class'][] = 'center-block';};
        if (!is_null($width)) {$style["width"] = $width.';';};
        $html_attributes['style'] = $style;
 
        if ($dismiss) $html_attributes['class'][] = 'alert-dismissible';
 
        $markup = sprintf('<div %s>', $this->buildAttributes($html_attributes));
 
        if ($dismiss) {
            $markup .= '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        }
 
        if ($icon) {
          $markup .= sprintf('<i class="%s"></i> ', $icon);
        }
 
        $renderer->doc .= $markup;
        return true;
 
      case DOKU_LEXER_EXIT:
        $renderer->doc .= '</div>';
        return true;
 
    }
 
    return true;
 
  }
 
}