This is an old revision of the document!

Styler plugin

Compatible with DokuWiki

No compatibility info given!

Download

This plugin provide additional formatting of your texts: expanded quotations, epigraps, verses, etc

Last updated on: 2007-07-23
Provides: Syntax

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to blockquote, floatdiv, formatplus, formatplus2, wrap

Tagged with boxes, quotes, style, typography

By Ivan A-R

note

NB
as of Tue Aug 2 2011 original download link is dead (http://iar.spb.ru/_media/projects/dokuwiki/styler.zip). Since I have a version of this thing, I put it online. – schplurtz

Details and Download Dead link

Description

This plugin provide additional formatting of your texts:

<quote> - the expanded quotations;
<epigraph> - epigraphs;
<verse> - formatting of verses;
<style> - generic style blocks.

As you can specify attributes for each formatted block:

left - text align to left;
right - text align to right;
center - center text;
justify - justify text;
float-left - To create the floating block to the left of the text;
float-right - To create the floating block to the right of the text;
box - To draw a framework around of the block;
background - To fill in a background with solid color.

Contribution: StylerPlus

A contribution for this great plugin. This extends the attributes to allow to select background and border colors in a block, width size, and nested blocks. — victor castelan 2008/10/17 08:01

The extend attributes are:

Background Light Colors

To fill in with a specific background light color

background - light gray
background-lwhite - white
background-lyellow - yellow
background-lorange - orange
background-lgreen - green
background-lblue - blue
background-lbrown - brown
background-lpink - pink
background-lred - red

example:

<style background-lgreen>some text</style>

Background Dark colors

To fill in with a specific background dark color and text in white

background-d - dark gray
background-dblack - black
background-dyellow - yellow
background-dorange - orange
background-dgreen - green
background-dblue - blue
background-dbrown - brown
background-dpink - pink
background-dred - red

example:

<style background-dorange>some text</style>

Borders colors

To draw a border around of the block with a dark color;

box - gray
box-dblack - black
box-dyellow - yellow
box-dorange - orange
box-dgreen - green
box-dblue - blue
box-dbrown - brown
box-dpink - pink
box-dred - red

example: This fill the block with light orange and apply a dark orange border color

<style background-lorange box-dorange>some text</style>

Sizes

You can specify a width to your block.

s25 - 25% block width
s50 - 50% block width
s75 - 75% block width

example 1: Draw two blocks in the same row (floating-left)

<style background-lorange box-dorange float-left s50>some text</style>
<style background-lorange box-dorange float-left s50>some text</style>

example 2: Draw three blocks in the same row (floating-left)

<style background-lorange box-dorange float-left s50>some text</style>
<style background-lorange box-dorange float-left s25>some text</style>
<style background-lorange box-dorange float-left s25>some text</style>

Clear attributes

To apply clear attribute when floating blocks

clear-left
clear-right
clear-both

Nested blocks

example: Draw a block inside other block

About this

Just replace this files in the styler plugin.

If you have been installed styler, Don't forget to reset the DokuWiki cache. To do this, put after the URL ?purge=true

styler.php

<?php
 
/**
 * Plugin Style: More styles for DokuWiki
 * Format: see README
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Ivan A-R <ivan@iar.spb.ru>
 * @page       http://iar.spb.ru/projects/doku/styler
 * @version	0.2
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_styler_styler extends DokuWiki_Syntax_Plugin {
 
  /**
   * return some info
   */
  function getInfo(){
    return array(
      'author' => 'Ivan A-R',
      'email'  => 'ivan@iar.spb.ru',
      'date'   => '2007-07-23',
      'name'   => 'Styler plugin',
      'desc'   => 'More formatings: quote, epigraph, style [left, right, center, justify, float-left, float-right, box, background]',
      'url'    => 'http://iar.spb.ru/en/projects/doku/styler',
      'version' => '0.2',
    );
  }
 
  function getType(){ return 'container';}
  function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); }
  //function getAllowedTypes() { return array('formatting', 'substition', 'container', 'disabled'); }
  function getPType(){ return 'stack';}
 
  function getSort(){ return 205; }
 
  // override default accepts() method to allow nesting 
  // - ie, to get the plugin accepts its own entry syntax (vmc)
  function accepts($mode) {
    if ($mode == substr(get_class($this), 7)) return true;
      return parent::accepts($mode);
    }
 
  function connectTo($mode) {
    /*$this->Lexer->addEntryPattern('<style.*?>(?=.*?\x3C/style\x3E)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<quote.*?>(?=.*?\x3C/quote\x3E)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<epigraph.*?>(?=.*?\x3C/epigraph\x3E)', $mode, 'plugin_styler_styler');*/
    $this->Lexer->addEntryPattern('<style.*?>(?=.*?\</style>)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<quote.*?>(?=.*?\</quote>)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<epigraph.*?>(?=.*?\</epigraph>)', $mode, 'plugin_styler_styler');
  }
 
  function postConnect() {
    $this->Lexer->addExitPattern('</style>', 'plugin_styler_styler');
    $this->Lexer->addExitPattern('</quote>', 'plugin_styler_styler');
    $this->Lexer->addExitPattern('</epigraph>', 'plugin_styler_styler');
  }
 
  /**
   * Handle the match
   */
  function handle($match, $state, $pos, &$handler){
    global $conf;
    switch ($state) {
      case DOKU_LEXER_ENTER :
        $match = str_replace(array('<', '>'), array('', ''), $match);
        $attrib = preg_split('/\s+/', strtolower($match));
        if ($attrib[0])
        {
          return array(array_shift($attrib), $state, $attrib);
        }
        else
        {
          return array($match, $state, array());
        }
      case DOKU_LEXER_UNMATCHED : return array($match, $state, array());
      case DOKU_LEXER_EXIT :      return array('',     $state, array());
    }
    return array();
  }
 
  /**
   * Create output
   */
  function render($mode, &$renderer, $data) {
    global $st;
    global $et;
    global $conf;
    global $prt;
    if($mode == 'xhtml'){
      switch ($data[1]) {
      case DOKU_LEXER_ENTER :
        $class = '';
        foreach(array('left', 'right', 'center', 'justify', 'box', 'float-left', 'float-right', 'background', 'background-lwhite', 'background-lyellow', 'background-lorange', 'background-lgreen', 'background-lblue', 'background-lbrown', 'background-lpink', 'background-lred', 'background-dblack', 'background-dyellow', 'background-dorange', 'background-dgreen', 'background-dblue', 'background-dbrown', 'background-dpink', 'background-dred', 'background-d', 'box-dblack', 'box-dyellow', 'box-dorange', 'box-dgreen', 'box-dblue', 'box-dbrown', 'box-dpink', 'box-dred', 's25', 's50', 's75', 'clear-left', 'clear-right', 'clear-both') as $v)
        {
          if (in_array($v, $data[2]))
          {
            $class .= ' styler-'.$v;
          }
        }
        $renderer->doc .= "</p>\n"; // It is hack
        if ($data[0] == 'quote')
        {
          $renderer->doc .= '<div class="styler-quote'.$class.'">';
        }
        elseif ($data[0] == 'epigraph')
        {
          $renderer->doc .= '<div class="epigraph'.$class.'">';
        }
        else
        {
          $renderer->doc .= '<div class="styler'.$class.'">';
        }
        break;
      case DOKU_LEXER_UNMATCHED :
        $renderer->doc .= $data[0];
        break;
      case DOKU_LEXER_EXIT :
        $renderer->doc .= "</div>\n<p>"; // "</p>" and "\n</p>" is hack
        break;
      }
      return true;
    }
    return false;
  }
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

style.css

div.dokuwiki div.preview {margin:0 !important;}
 
/* Styler */
div.styler-box {border: 1px solid #cccccc; padding: 1em;}/*gray*/
div.styler-box-dblack {border: 1px solid #000000; padding: 1em;}
div.styler-box-dyellow {border: 1px solid #ffcc33; padding: 1em;}
div.styler-box-dorange {border: 1px solid #ff9933; padding: 1em;}
div.styler-box-dgreen {border: 1px solid #33cc33; padding: 1em;}
div.styler-box-dblue {border: 1px solid #3366cc; padding: 1em;}
div.styler-box-dbrown {border: 1px solid #99cc33; padding: 1em;}
div.styler-box-dpink {border: 1px solid #ff66cc; padding: 1em;}
div.styler-box-dred {border: 1px solid #ff66cc; padding: 1em;}
 
/* sizes */
div.styler-s25 {width:20%}
div.styler-s50 {width:45%}
div.styler-s75 {width:70%}
 
/**/
/*vmc light colors*/
div.styler-background { background-color: #f6f6f6 }/*gray*/
div.styler-background-lwhite { background-color: #ffffff }
div.styler-background-lyellow { background-color: #ffffd6 }
div.styler-background-lorange { background-color: #ffebd6 }
div.styler-background-lgreen { background-color: #e0ffd6 }
div.styler-background-lblue { background-color: #d6e0f5 }
div.styler-background-lbrown { background-color: #ebe0d6 }
div.styler-background-lpink { background-color: #ffe0f5 }
div.styler-background-lred { background-color: #ffcccc }
 
/*vmc dark colors*/
div.styler-background-d { background-color: #333333; color:#ffffff; }/*gray*/
div.styler-background-dblack { background-color: #000000; color:#ffffff; }
div.styler-background-dyellow { background-color: #ffcc33; color:#ffffff; }
div.styler-background-dorange { background-color: #ff9933; color:#ffffff; }
div.styler-background-dgreen { background-color: #33cc33; color:#ffffff; }
div.styler-background-dblue { background-color: #3366cc; color:#ffffff; }
div.styler-background-dbrown { background-color: #996633; color:#ffffff; }
div.styler-background-dpink { background-color: #ff66cc; color:#ffffff; }
div.styler-background-dred { background-color: #ff66cc; color:#ff0000; }
 
/*div.styler-float-left { float: left; margin: 0 1em 0.5em 1em; }
div.styler-float-right { float: right; margin: 0 1em 0.5em 1em; }*/
div.styler-float-left { float: left; margin: 0 1em 0.5em 0; }
div.styler-float-right { float: right; margin: 0 0 0.5em 1em; }
 
/*clear*/
div.styler-clear-left { clear: left; }
div.styler-clear-right { clear: right; }
div.styler-clear-both { clear: both; }
 
div.styler-left { text-align: left; }
div.styler-right { text-align: right; }
div.styler-center { text-align: center; }
div.styler-justify { text-align: justify; }
 
/* epigraph */
div.epigraph {
	margin-left: 60%;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1em;
	font-family: Times New Roman, Georgia, Garamond, Times, serif;
	font-style: italic;
}
 
/* quote */
div.styler-quote {
	/*margin-left: 3em; */
	margin: 1em 0px 1em 3em;
	border: 1px dotted #CCCCCC;
	background: #ffffff url(images/blockquote.gif) no-repeat 0.3em 0.3em;
	padding: 1em;
 
}

Table of Contents