Working on something but would like some feedback.

[Rojoss]

I just started on a new addition for the plugin for more customization. I was creating a grid on my wiki but I wanted to make all columns a certain height. So I added a height attribute but then I realized it would be much easier if you can just add classes, ids and/or styling to all components.

For example you could do: <col xs="12" sm="6" md="4" lg="4" class="game-preview"> Which would add the game-preview class to the column for custom styling. Or inline styling like: <col xs="12" sm="6" md="4" lg="4" style="height:200px;overflow:hidden;">

I've made like half of it but it's gonna require a lot of changes to all existing components. Before I do that I'd like to know what your opinion on this is.

I've already made it configurable so that you disable those styling attributes completely. I'm not sure if it's a security risk or something to allow users to assign custom css to attributes etc. If it is I could just do id only for example as I'm like 99.9% sure that that wouldn't be an issue.

Component changes

To be able to have the attributes in all components I'd have to change all the existing components. For example in bade I had to change it from.

protected $pattern_start  = '<badge></badge>';
protected $template_start = '<span class="bs-wrap bs-wrap-badge badge">';

to

protected $pattern_start  = '<badge.*?>(?=.*?</badge>)';
protected $template_start = '<span class="bs-wrap bs-wrap-badge badge %s" %s %s>';

How it will work

It will just replace the three placeholder values in the template_start for basic components without custom render. All components will need to have a pattern change to allow attributes.

For components that override the render it will be similar. You'd have to put three placeholders and then call a method in the base class which will format the placeholders based on config setting and attribute values.

Here you can see it in action: http://gameboxx.info/wiki/bootstrap/badge Currently only the badge has been updated with this syntax.

Code example

//Base class (syntax_plugin_bootswrapper_bootstrap)

//Registration of attributes
protected $core_tag_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'  => '')
  );

//Inside checkAttributes I made it so that it will only check the syntax attributes when config setting is true.
if ($this->getConf('allowStylingAttributes')) {
      $all_attributes  = array_merge($this->tag_attributes, $this->core_tag_attributes);
    } else {
      $all_attributes  = $this->tag_attributes;
    }


//Parsing the attributes for rendering.
function parseMarkupSyntax($markup, $attributes = array()) {
  if ($this->getConf('allowStylingAttributes')) {
    $class    = $attributes['class'];
    $id       = $attributes['id'];
    $style    = $attributes['style'];

//If a component already has a class attribute with values then the placeholder must be placed within that attribute.
//For example: class="bs-wrap badge %s"
//If it doesn't it can be placed outside which is why we add class=""
    if (strpos($markup, 'class=') === false) {
      $class = 'class="' . $class . '"';
    }
    if (strpos($markup, 'id=') === false) {
      $id = 'id="' . $id . '"';
    }
    if (strpos($markup, 'style=') === false) {
      $style = 'style="' . $style . '"';
    }

    $markup = sprintf($markup, $class, $id, $style);
  } else {
    $markup = sprintf($markup, '', '', '');
  }
  return $markup;
}

I'm probably gonna finish this tomorrow as I need it for my wiki so would be great if you could give some feedback soon. I rather don't refactor a bunch of components if it's not gonna be accepted anyways.