DivAlignプラグインを改造する

Daisukeh 2009/02/08 09:17 投稿
Daisukeh 2009/08/06 15:05 移設

記事一覧

 今回はDokuWikiのプラグインの中でも、隠れた人気(?)があると思われる、plugin:divalignを改造する方法を紹介します。plugin:divalignは、指定された箇所に<div>タグを配置して、そのスタイルシートのtext-alignを設定できるようにするプラグインです。そのままでもそれなりに使えますが、複数の画像や表など、任意のオブジェクトを配置したい場合や、同様にフローティングさせたい場合などには使えません。(text-alignを変更しているだけなので。)

 幸いにもこのプラグインは改造しやすい作りになっているため、作者の承諾は得ていませんが、手軽に改造する方法を紹介します。この改造によって、任意のオブジェクトの配置とフロート化ができるようになります。フロート解除はplugin:clearfloatなどを使って、~~CL~~とやってください。以下、変更したコードです。

/lib/plugins/divalign/syntax.php

<?php
/**
 * divalign: allows you to align right, left, center, or justify
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Jason Byrne <jbyrne@floridascale.com>
 */
 
// must be run within DokuWiki
if(!defined('DOKU_INC')) die();
 
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_divalign extends DokuWiki_Syntax_Plugin {
 
    function getInfo(){
        return array(
            'author' => 'Jason Byrne',
            'email'  => 'jbyrne@floridascale.com',
            'date'   => '2008-03-29',
            'name'   => 'divalign',
            'desc'   => 'Add text-alignment & floating',
            'url'    => 'http://www.dokuwiki.org/plugin:divalign',
        );
    }
 
    function getSort() { return 157; }
    function getType() { return 'container'; }
    function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); }
    function getPType(){ return 'block';}
 
    function connectTo($mode) {
        $this->Lexer->addEntryPattern(';;#(?=.*;;#)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern('#;;(?=.*#;;)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern(';#;(?=.*;#;)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern('###(?=.*###)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern(';;@(?=.*;;@)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern('@;;(?=.*@;;)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern(';;%(?=.*;;%)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern('%;;(?=.*%;;)',$mode,'plugin_divalign');
        $this->Lexer->addEntryPattern(';%;(?=.*;%;)',$mode,'plugin_divalign');
    }
    function postConnect() {
        $this->Lexer->addExitPattern(';;#','plugin_divalign');
        $this->Lexer->addExitPattern('#;;','plugin_divalign');
        $this->Lexer->addExitPattern(';#;','plugin_divalign');
        $this->Lexer->addExitPattern('###','plugin_divalign');
        $this->Lexer->addExitPattern(';;@','plugin_divalign');
        $this->Lexer->addExitPattern('@;;','plugin_divalign');
        $this->Lexer->addExitPattern(';;%','plugin_divalign');
        $this->Lexer->addExitPattern('%;;','plugin_divalign');
        $this->Lexer->addExitPattern(';%;','plugin_divalign');
    }
 
    function handle($match, $state, $pos, &$handler){
        switch ( $state ) {
          case DOKU_LEXER_ENTER:
            switch ( $match ) {
              case '#;;' : $align = 'left';    break;
              case ';;#' : $align = 'right';   break;
              case ';#;' : $align = 'center';  break;
              case '###' : $align = 'justify'; break;
              case '@;;' : $align = '@left';   break;
              case ';;@' : $align = '@right';  break;
              case '%;;' : $align = '%left';   break;
              case ';;%' : $align = '%right';  break;
              case ';%;' : $align = '%center'; break;
              default    : $align = '';
            }
            return array($align,$state,$pos);
 
          case DOKU_LEXER_UNMATCHED:
            $handler->_addCall('cdata', array($match), $pos);
            break;          
        }
        return array('',$state,'');
    }
 
    function render($mode, &$renderer, $data) {
 
        if ($mode == 'xhtml'){
 
          list($align,$state,$pos) = $data;
          switch ($state) {
            case DOKU_LEXER_ENTER:
              if ($align) { 
                if($align[0] == '@') {
                  $renderer->doc .= '<div style="float: '.substr($align, 1).';">';
                }
                else if($align[0] == '%') {
                  $renderer->doc .= '<div align="'.substr($align, 1).'">';
                } else {
                  $renderer->doc .= '<div style="text-align: '.$align.';">'; 
                }
              }
              break;
 
            case DOKU_LEXER_EXIT : 
              $renderer->doc .= '</div>';
              break;
          }
          return true;
        } // end if ($mode == 'xhtml')
 
        return false;
    }
 
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :
?>

ダウンロードdokuwiki-plugin-divalign2-090208.zip

 追加した機能は以下の通りです。

  1. ”@;;”と”;;@“の記述では、左右のフロート化を指定する記述で、レンダリング結果に<div style="float: {position};"> ... </div>を出力します。
  2. ”%;;”と”;;%“と”;%;”の記述では、 CSS ではなく HTML 文書で一般的に使われてきた配置指定を記述するもので、レンダリング結果に<div align="{position}"> ... </div>を出力します。

 DokuWikiサイトをもっと探せば、同じような機能をインプリメントしたプラグインがあるかもしれませんし、テンプレートの CSS を改造する方法も考えられますから、方法はいろいろあると思います。ただ、plugin:divalignの記述方法には、視覚的で直感的なわかりやすさがありますね。こういう機能と実現方法には美学を感じます。

掲示板

Enter your comment
 
 
programming/dokuwiki/divalignプラグインを改造する.txt · 最終更新: 2009/08/06 15:06 by daisukeh
 

Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS
Driven by DokuWiki Powered by Google do yourself a favour and use a real browser - get firefox ! GIMP is the GNU Image Manipulation Program. Adobe Flex smarty : Template Engine