Added styling attributes for all components. class, id and style.

conf/default.php

@@ -6,3 +6,4 @@
  */
 
 $conf['loadBootstrap'] = 0;
+$conf['allowStylingAttributes'] = 0;

conf/metadata.php

@@ -6,3 +6,4 @@
  */
 
 $meta['loadBootstrap'] = array('onoff', '_caution' => 'danger');
+$meta['allowStylingAttributes'] = array('onoff');

lang/en/settings.php

@@ -8,3 +8,4 @@
 
 // for the configuration manager
 $lang['loadBootstrap'] = "Load the Bootstrap vanilla CSS. Disable it if you have installed a Bootstrap based template.";
+$lang['allowStylingAttributes'] = "Allow the use of ''class=\"\"'', ''id=\"\"'' and ''style=\"\"'' attributes on all components.";

lang/ja/settings.php

@@ -7,3 +7,4 @@
 
 // 設定管理画面用
 $lang['loadBootstrap'] = "Bootstrap vanilla CSS を読み込む。Bootstrap を基にしたテンプレートをインストールした場合、無効にします。";
+$lang['allowStylingAttributes'] = "Allow the use of ''class=\"\"'', ''id=\"\"'' and ''style=\"\"'' attributes on all components.";

script.js

@@ -122,6 +122,14 @@ jQuery(document).ready(function() {
         case 'btnSize':
           btn_class.push(['btn-', value].join(''));
           break;
+        case 'btnClass':
+          btn_class.push(value);
+        case 'btnId':
+          $btn_link.attr('id', value);
+          break;
+        case 'btnStyle':
+          $btn_link.attr('style', value);
+          break;
         case 'btnBlock':
           btn_class.push('btn-block');
           break;

syntax/accordion.php

@@ -14,7 +14,7 @@
 
 class syntax_plugin_bootswrapper_accordion extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start  = '<accordion>';
+    protected $pattern_start  = '<accordion.*?>(?=.*?</accordion>)';
     protected $pattern_end    = '</accordion>';
 
     protected $tag_attributes = array(
@@ -42,7 +42,10 @@ function render($mode, Doku_Renderer $renderer, $data) {
                 case DOKU_LEXER_ENTER:
 
                     $id     = $attributes['id'];
-                    $markup = sprintf('<div class="bs-wrap bs-wrap-accordion panel-group" id="%s">', $id);
+                    $style = $this->getStylingAttributes($attributes);
+
+                    $markup = sprintf('<div class="bs-wrap bs-wrap-accordion panel-group %s" id="%s" style="%s">',
+                      $style['class'], $id, $style['style']);
 
                     $renderer->doc .= $markup;
                     return true;

syntax/affix.php

@@ -55,6 +55,7 @@ function render($mode, Doku_Renderer $renderer, $data) {
                     $top    = $attributes['offset-top'];
                     $bottom = $attributes['offset-bottom'];
                     $target = $attributes['target'];
+                    $style = $this->getStylingAttributes($attributes);
                     $data   = array();
 
                     if ($top) {
@@ -67,7 +68,8 @@ function render($mode, Doku_Renderer $renderer, $data) {
                         $data[] = sprintf('data-target="%s"', $target);
                     }
 
-                    $markup = sprintf('<div style="z-index:1024" class="bs-wrap bs-wrap-affix" data-spy="affix" %s>', implode(' ', $data));
+                    $markup = sprintf('<div class="bs-wrap bs-wrap-affix %s" id="%s" style="z-index:1024; %s" data-spy="affix" %s>',
+                      $style['class'], $style['id'], $style['style'], implode(' ', data));
 
                     $renderer->doc .= $markup;
                     return true;

syntax/alert.php

@@ -50,9 +50,10 @@ function render($mode, Doku_Renderer $renderer, $data) {
                 case DOKU_LEXER_ENTER:
 
                     extract($attributes);
+                    $style = $this->getStylingAttributes($attributes);
 
-                    $markup = sprintf('<div class="bs-wrap alert alert-%s %s" role="alert">',
-                                      $type, (($dismiss) ? 'alert-dismissible' : ''));
+                    $markup = sprintf('<div class="bs-wrap alert alert-%s %s %s" id="%s" style="%s" role="alert">',
+                      $type, (($dismiss) ? 'alert-dismissible' : ''), $style['class'], $style['id'], $style['style']);
 
                     if ($dismiss) {
                         $markup .= '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';

syntax/badge.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_badge extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<badge>';
-    protected $pattern_end   = '</badge>';
+    protected $pattern_start  = '<badge.*?>(?=.*?</badge>)';
+    protected $pattern_end    = '</badge>';
 
-    protected $template_start = '<span class="bs-wrap bs-wrap-badge badge">';
+    protected $template_start = '<span class="bs-wrap bs-wrap-badge badge %s" id="%s" style="%s">';
     protected $template_end   = '</span>';
 
     function getPType() { return 'normal';}

syntax/bootstrap.php

@@ -15,12 +15,28 @@ class syntax_plugin_bootswrapper_bootstrap extends DokuWiki_Syntax_Plugin {
 
   protected $pattern_start    = '<BOOTSTRAP.+?>';
   protected $pattern_end      = '</BOOTSTRAP>';
-  protected $template_start   = '<div class="%s">';
   protected $template_content = '%s';
   protected $template_end     = '</div>';
   protected $header_pattern   = '[ \t]*={2,}[^\n]+={2,}[ \t]*(?=\n)';
   protected $tag_attributes   = array();
+  protected $styling_attributes = array(
 
+    'style' => array('type'  => 'string',
+                  'values'   => null,
+                  'required' => false,
+                  'default'  => ''),
+
+    'class' => array('type'  => 'string',
+                  'values'   => null,
+                  'required' => false,
+                  'default'  => ''),
+
+    'id' => array('type'     => 'integer',
+                  'values'   => null,
+                  'required' => false,
+                  'default'  => '')
+
+  );
 
   /**
     * Check default and user attributes
@@ -31,6 +47,12 @@ function checkAttributes($attributes = array()) {
 
     global $ACT;
 
+    if ($this->getConf('allowStylingAttributes')) {
+      $all_attributes  = array_merge($this->tag_attributes, $this->styling_attributes);
+    } else {
+      $all_attributes  = $this->tag_attributes;
+    }
+
     $default_attributes = array();
     $merged_attributes  = array();
     $checked_attributes = array();
@@ -42,13 +64,13 @@ function checkAttributes($attributes = array()) {
     }
 
     // Save the default values of attributes
-    foreach ($this->tag_attributes as $attribute => $item) {
+    foreach ($all_attributes as $attribute => $item) {
       $default_attributes[$attribute] = $item['default'];
     }
 
     foreach ($attributes as $name => $value) {
 
-      if (! isset($this->tag_attributes[$name])) {
+      if (! isset($all_attributes[$name])) {
 
         if ($ACT == 'preview') {
           msg(sprintf('%s Unknown attribute <code>%s</code>', $msg_title, $name), -1);
@@ -58,7 +80,7 @@ function checkAttributes($attributes = array()) {
 
       }
 
-      $item = $this->tag_attributes[$name];
+      $item = $all_attributes[$name];
 
       $required = isset($item['required']) ? $item['required'] : false;
       $values   = isset($item['values'])   ? $item['values']   : null;
@@ -113,6 +135,31 @@ function checkAttributes($attributes = array()) {
 
   }
 
+  /**
+   * Get array with styling attributes from the attributes array passed in.
+   * If the user has styling disabled this array will contain empty strings.
+   * @param array $attributes The attribute array with user values.
+   * @return array The array with styling attribute values or empty string.
+   */
+  function getStylingAttributes($attributes) {
+    $styling = array(
+      'class' => '',
+      'id' => '',
+      'style' => ''
+    );
+
+    if ($this->getConf('allowStylingAttributes')) {
+      if (isset($attributes['class']) && $attributes['class'])
+        $styling['class'] = $attributes['class'];
+      if (isset($attributes['id']) && $attributes['id'])
+        $styling['id'] = $attributes['id'];
+      if (isset($attributes['style']) && $attributes['style'])
+        $styling['style'] = $attributes['style'];
+    }
+
+    return $styling;
+  }
+
 
   function getType(){ return 'formatting'; }
   function getAllowedTypes() { return array('container', 'formatting', 'substition', 'protected', 'disabled', 'paragraphs'); }
@@ -202,12 +249,14 @@ function render($mode, Doku_Renderer $renderer, $data) {
     if ($mode !== 'xhtml') return false;
 
     /** @var Doku_Renderer_xhtml $renderer */
-    list($state, $match) = $data;
+    list($state, $match, $attributes) = $data;
 
     switch($state) {
 
       case DOKU_LEXER_ENTER:
-        $markup = $this->template_start;
+        $style = $this->getStylingAttributes($attributes);
+
+        $markup = sprintf($this->template_start, $style['class'], $style['id'], $style['style']);
         $renderer->doc .= $markup;
         return true;
 

syntax/button.php

@@ -65,6 +65,7 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                 case DOKU_LEXER_ENTER:
 
+                    $style = $this->getStylingAttributes($attributes);
                     $html5data = array();
 
                     foreach ($attributes as $key => $value) {

syntax/callout.php

@@ -45,8 +45,10 @@ function render($mode, Doku_Renderer $renderer, $data) {
                 case DOKU_LEXER_ENTER:
 
                     $type = $attributes['type'];
+                    $style = $this->getStylingAttributes($attributes);
 
-                    $markup = sprintf('<div class="bs-wrap bs-callout bs-callout-%s">', $type);
+                    $markup = sprintf('<div class="bs-wrap bs-callout bs-callout-%s %s" id="%s" style="%s">',
+                      $type, $style['class'], $style['id'], $style['style']);
 
                     if ($title = $attributes['title']) {
                       $markup .= "<h4>$title</h4>";

syntax/caption.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_caption extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<caption>';
+    protected $pattern_start = '<caption.*?>(?=.*?</caption>)';
     protected $pattern_end   = '</caption>';
 
-    protected $template_start = '<div class="bs-wrap bs-wrap-caption caption">';
+    protected $template_start = '<div class="bs-wrap bs-wrap-caption caption %s" id="%s" style="%s">';
     protected $template_end   = '</div>';
 
     function getPType() { return 'block';}

syntax/carousel.php

@@ -54,13 +54,15 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                 case DOKU_LEXER_ENTER:
 
+                    $style = $this->getStylingAttributes($attributes);
                     $html5_attributes = array();
 
                     foreach ($attributes as $attribute => $value) {
                       $html5_attributes[] = sprintf('data-%s="%s"', $attribute, $value);
                     }
 
-                    $markup = sprintf('<div class="bs-wrap bs-wrap-carousel carousel slide" data-ride="carousel" %s><ol class="carousel-indicators"></ol><div class="carousel-inner" role="listbox">', implode(' ', $html5_attributes));
+                    $markup = sprintf('<div class="bs-wrap bs-wrap-carousel carousel slide %s" data-ride="carousel" id="%s" style="%s" %s><ol class="carousel-indicators"></ol><div class="carousel-inner" role="listbox">',
+                      $style['class'], $style['id'], $style['style'], implode(' ', $html5_attributes));
 
                     $renderer->doc .= $markup;
                     return true;

syntax/collapse.php

@@ -48,7 +48,10 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                     $id        = $attributes['id'];
                     $collapsed = $attributes['collapsed'];
-                    $markup    = sprintf('<div class="bs-wrap bs-wrap-collapse collapse %s" id="%s">', ($collapsed ? '' : 'in'), $id);
+                    $style = $this->getStylingAttributes($attributes);
+
+                    $markup    = sprintf('<div class="bs-wrap bs-wrap-collapse collapse %s %s" id="%s" style="%s">',
+                      ($collapsed ? '' : 'in'), $style['class'], $id, $style['style']);
 
                     $renderer->doc .= $markup;
                     return true;

syntax/column.php

@@ -55,13 +55,15 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                 case DOKU_LEXER_ENTER:
 
+                    $style = $this->getStylingAttributes($attributes);
                     $col = '';
 
                     foreach (array('lg', 'md', 'sm', 'xs') as $device) {
                         $col .= isset($attributes[$device]) ? sprintf('col-%s-%s ', $device, $attributes[$device]) : '';
                     }
 
-                    $markup = sprintf('<div class="bs-wrap bs-wrap-col %s">', trim($col));
+                    $markup = sprintf('<div class="bs-wrap bs-wrap-col %s %s" id="%s" style="%s">',
+                      trim($col), $style['class'], $style['id'], $style['style']);
 
                     $renderer->doc .= $markup;
                     return true;

syntax/grid.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_grid extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<grid>';
+    protected $pattern_start = '<grid.*?>(?=.*?</grid>)';
     protected $pattern_end   = '</grid>';
 
-    protected $template_start = '<div class="bs-wrap bs-wrap-row row">';
+    protected $template_start = '<div class="bs-wrap bs-wrap-row row %s" id="%s" style="%s">';
     protected $template_end   = '</div>';
 
     function getPType(){ return 'block'; }

syntax/hidden.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_hidden extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<hidden>';
+    protected $pattern_start = '<hidden.*?>(?=.*?</hidden>)';
     protected $pattern_end   = '</hidden>';
 
-    protected $template_start = '<div class="bs-wrap bs-wrap-hidden hidden">';
+    protected $template_start = '<div class="bs-wrap bs-wrap-hidden hidden %s" id="%s" style="%s">';
     protected $template_end   = '</div>';
 
     function getPType(){ return 'block'; }

syntax/image.php

@@ -40,13 +40,15 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                     extract($attributes);
 
+                    $style = $this->getStylingAttributes($attributes);
                     $html5_data = array();
 
                     if ($shape) {
                         $html5_data[] = sprintf('data-img-shape="%s"', $shape);
                     }
 
-                    $markup = sprintf('<span class="bs-wrap bs-wrap-image" %s>', implode(' ', $html5_data));
+                    $markup = sprintf('<span class="bs-wrap bs-wrap-image %s" id="%s" style="%s" %s>',
+                      $style['class'], $style['id'], $style['style'], implode(' ', $html5_data));
 
                     $renderer->doc .= $markup;
                     return true;

syntax/invisible.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_invisible extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<invisible>';
+    protected $pattern_start = '<invisible.*?>(?=.*?</invisible>)';
     protected $pattern_end   = '</invisible>';
 
-    protected $template_start = '<div class="bs-wrap bs-wrap-invisible invisible">';
+    protected $template_start = '<div class="bs-wrap bs-wrap-invisible invisible %s" id="%s" style="%s">';
     protected $template_end   = '</div>';
 
     function getPType(){ return 'block'; }

syntax/jumbotron.php

@@ -45,6 +45,7 @@ function render($mode, Doku_Renderer $renderer, $data) {
 
                     $background = $attributes['background'];
                     $color      = $attributes['color'];
+                    $style = $this->getStylingAttributes($attributes);
 
                     $styles = array();
 
@@ -56,7 +57,8 @@ function render($mode, Doku_Renderer $renderer, $data) {
                       $styles[] = sprintf('color:%s', hsc($color));
                     }
 
-                    $markup = sprintf('<div class="bs-wrap bs-wrap-jumbotron jumbotron" style="%s">', implode(';', $styles), $type);
+                    $markup = sprintf('<div class="bs-wrap bs-wrap-jumbotron jumbotron %s" id="%s" style="%s %s">',
+                      $style['class'], $style['id'], (implode(';', $styles) . ';'), $style['style']);
 
                     $renderer->doc .= $markup;
                     return true;

syntax/label.php

@@ -50,8 +50,10 @@ function render($mode, Doku_Renderer $renderer, $data) {
                     $label_tag = (($is_block) ? 'div' : 'span');
                     $type      = $attributes['type'];
                     $icon      = $attributes['icon'];
+                    $style = $this->getStylingAttributes($attributes);
 
-                    $markup = sprintf('<%s class="bs-wrap bs-wrap-label label label-%s">', $label_tag, $type);
+                    $markup = sprintf('<%s class="bs-wrap bs-wrap-label label label-%s %s" id="%s" style="%s">',
+                      $label_tag, $type, $style['class'], $style['id'], $style['style']);
 
                     if ($icon) {
                       $markup .= sprintf('<i class="%s"></i> ', $icon);

syntax/lead.php

@@ -14,10 +14,10 @@
 
 class syntax_plugin_bootswrapper_lead extends syntax_plugin_bootswrapper_bootstrap {
 
-    protected $pattern_start = '<lead>';
+    protected $pattern_start = '<lead.*?>(?=.*?</lead>)';
     protected $pattern_end   = '</lead>';
 
-    protected $template_start = '<div class="bs-wrap bs-wrap-lead lead">';
+    protected $template_start = '<div class="bs-wrap bs-wrap-lead lead %s" id="%s" style="%s">';
     protected $template_end   = '</div>';
 
     function getPType(){ return 'block'; }