DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:styler

Styler plugin

Compatible with DokuWiki

No compatibility info given!

plugin 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.

Tagged with boxes, quotes, style, typography

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 FIXME 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-lgreen box-dgreen>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

<style background-lorange box-dorange float-left s50> <style background-dgreen center>Maybe a title in bold</style> Here your text </style>

About this

Just replace the files in the styler plugin.

If you have installed styler, don't forget to reset the DokuWiki cache. To do this, add ?purge=true at the end of the URL.

styler.php

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.*?>(?=.*?</style>)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<quote.*?>(?=.*?</quote>)', $mode, 'plugin_styler_styler');
    $this->Lexer->addEntryPattern('<epigraph.*?>(?=.*?</epigraph>)', $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 :
It still work, but to me the lines with
$renderer->doc .= "</p>\n"; // It is hack
and
$renderer->doc .= "</div>\n<p>"; // "</p>" and "\n</p>" is hack
generates invalid markup. Maybe it should be better a simple <br/> but I didn't understand the hackgbonanomegbonanome

2012/12/19 17:36
That hack was used before the PType 'stack' existed. The closing and opening paragraphs should just be removed and it should be fine. — Anika HenkeAnika Henke
ach

2012/12/22 17:31

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;
 
}
plugin/styler.txt · Last modified: 2015-07-27 14:43 by werner.flamme