Folded Text Plugin 2

This is a slightly changed version of the inline folding plugin. See the discussion on that page to read more what it is all about. — Esther Brunner 2005-07-14 16:45

See the plugin in action here.

I took the liberty of correcting a couple of issues in the plugin, mainly to ensure the code it generates validates as XHTML 1.0 Transitional and it supports canonical URL's. There is a still a problem with it wrapping include plugin and source plugin markup, I am working on that . — ChrisS 2005-Jul-14

Thanks, Chris. Looking forward to seeing the final! zerohalo 2005-15-15.

Liberty taken again. Code updated - now includes correct html to operate within PType normal and to include the formatting of other plugins all the time. Other plugins may need to be modified (move $this->allowedModes determination from constructor to accepts() method override as done below) to be able to reciprocate. — ChrisS 2005-07-21

One last liberty
Updated for revised DokuWiki_Syntax_Plugin class, Entity conversion added for unmatched data. Will require current lib/plugins/syntax.php.

Explaining text ++++

all kinds of stuff here ++++

The text “all kinds of stuff here” ¹⁾ will only be shown when you click on the icon next to the explaining text.

Create a file /lib/plugins/folded/syntax.php:

<?php
/**
 * Folded text Plugin: enables folded text font size with syntax ++ text ++
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Fabian van-de-l_Isle <webmaster [at] lajzar [dot] co [dot] uk>
 */
 
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');
 
// maintain a global count of the number of folded elements in the page, 
// this allows each to be uniquely identified
global $plugin_folded_count;
if (!isset($plugin_folded_count)) $plugin_folded_count = 0;
 
 
/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_folded extends DokuWiki_Syntax_Plugin {
 
   /**
    * return some info
    */
    function getInfo(){
        return array(
            'author' => 'Fabian van-de-l_Isle',
            'email'  => 'webmaster@lajzar.co.uk',
            'date'   => '2005-07-14',
            'name'   => 'Folded Plugin',
            'desc'   => 'Enables folded text',
            'url'    => 'http://www.dokuwiki.org/plugin:inline_folding',
        );
    }
 
   /**
    * What kind of syntax are we?
    */
    function getType(){
        return 'container';   // change to 'formatting' to allow lists and tables to include folded markup
    }
 
    function getAllowedTypes() {
        return array('container','substition','protected','disabled','formatting');
    }
 
   /**
    * Where to sort in?
    */
    function getSort(){
        return 904;
    }
 
   /**
    * Connect pattern to lexer
    */
    function connectTo($mode) {
        $this->Lexer->addEntryPattern('\+\+\+\+(?=.*\+\+\+\+)',$mode,'plugin_folded');
    }
 
    function postConnect() {
        $this->Lexer->addExitPattern('\+\+\+\+','plugin_folded');
    }
 
   /**
    * Handle the match
    */
    function handle($match, $state, $pos, &$handler){
        return array($match, $state);
    }
 
   /**
    * Create output
    */
    function render($mode, &$renderer, $data) {
        global $plugin_folded_count;
 
        if($mode == 'xhtml') {
            if ($data[1] == DOKU_LEXER_ENTER) {
                $plugin_folded_count++;
 
                $renderer->doc .= "<span class='folder' onclick='fold(this, \"folded_$plugin_folded_count\");'>" ;
                $renderer->doc .= "<img src='".DOKU_BASE."lib/images/closed.gif' alt='reveal hidden content' title='reveal' /></span></p>";
                $renderer->doc .= "<div class='folded' id='folded_$plugin_folded_count' style='display:none;'><p>";
            }
            else if ($data[1] == DOKU_LEXER_UNMATCHED) {
                $renderer->doc .= $renderer->_xmlEntities($data[0]);
            }
            else if ($data[1] == DOKU_LEXER_EXIT) {
                $renderer->doc .= '</p></div><p>';
            }
            return true;
        }
        return false;
    }
}

Note that this exact same piece of Javascript is used in both the folded and the creased text plugins. It only needs to be inserted into the file once, whether you use one or both plugins.

Add this at the end of /lib/scripts/script.js:

/*
 * For Folded Text Plugin
 *
 * @author Fabian van-de-l_Isle <webmaster [at] lajzar [dot] co [dot] uk>
 */
function fold( folder, divname ) {
  var divstyle = document.getElementById( divname ).style;
  var showhide = (divstyle.display == 'none')?'':'none';
  divstyle.display = showhide;
  if (showhide=='none') {
    folder.innerHTML = '<img src="'+DOKU_BASE+'lib/images/closed.gif" alt="reveal hidden content" title="reveal" />';
  }
  else {
    folder.innerHTML = '<img src="'+DOKU_BASE+'lib/images/open.gif" alt="hide content" title="hide" />';
  }
}

Note that this exact same piece of CSS is used in both the folded and the creased text plugins. It only needs to be inserted into the file once, whether you use one or both plugins.

Add this at the end of the design.css of your template:

/* ----------- Folded Text ----------- */
 
.folder {
    padding-left: 0.5em;
    padding-right: 0.5em;
    float: left;
}
.folder img {
  cursor: pointer;
}
.folded {
    display: block;
    padding: 0.5em;
    border: 1px dashed #8cacbb;
}

Copy these two icons into your /lib/images/ folder:

Note: It's important to take the GIFs from here. Those included in DokuWiki are not of the same width, which causes the text to move when opening and closing the folded text.

With the recommended style the icon will be displayed at the left of the text.

For visitors it's sometimes hard to recognize that folded icon is clickable. You can change <span> tag into <a> tag, so folded icon wil behave like link (hand cursor on mouse over):

<a href="#" class='folder' onclick='fold(this, \"folded_$plugin_folded_count\");return false;'>

and then of course replace closing </span> with </a> as well.

Esther, did something change with the syntax? Previously, the following syntax would work:

some text here ++ folded text ++ some more text.

However, now it only works like this:

some text here 
  ++ folded text ++
some more text

Which then means that the folded icon can't appear in the middle of a line of text, but only on the left margin. The problem is that it's less conspicuous this way and you also can't have it immediately follow the related text if that text is in the middle of a sentence. (Think of a footnote symbol only being at the beginning of a line instead of in the middle of a line.) So it seems to me that the previous syntax offered greater flexibility. This is especially important because the new folded icons (which match the docuwiki style nicely) can be easily mistaken for bullets when positioned on the left margin in the middle of an unordered list, ie:

  * Topic point number one.
  ++ folded text related to something in topic point number one ++
  * Another topic point.

– zerohalo, 2005-07-15

Zerohalo, I don't have any problems with:

a label ++ hidden content ++

The changed location of the toggle graphics is caused by the float:left in the .folder style. Remove that and you should be good to go, as you can see at my wiki's playground.

You're right, it works. I figured out what the problem was–see Bugs section below. — zerohalo 2005-07-15.

There are however, HTML validation problems using a getPType of normal. And different problems with block (Dokuwiki will start a new <p> for individual segment of CDATA within the ++. I'll leave mine set to normal over the weekend and work on solving them next week. — ChrisS 2005-Jul-15

Hm, I forgot the getPType, you're right. My version which creates a <div> should probably return block, although there are the problems you mention. The other version creates a <span>, which can appear in the middle of a paragraph. You can't have both, because a <span> can't contain any block elements. — Esther Brunner 2005-07-15 12:48

Fixed in above code. GetPType remains normal, paragraph closing and opening html added to →render() entry and exit code. — ChrisS 2005-07-21

• If the folded text is placed in a paragraph that is an unordered list, it will not show up. Ie, the following code will not render the inline folding plugin. See also sample here: http://wiki.jalakai.co.uk/dokuwiki/doku.php/wiki/playground

  * A bulleted point ++ some folded text ++

Each syntax mode determines the other syntax modes which it will allow within itself. The list syntax mode does not allow other containers. At present there is no mechanism for the plugin to influence the behaviour of standard dokuwiki syntax. I believe the correct type (as returned by getType() method) of this plugin should be container. If you use a type of formatting lists and tables will be able to contain folded markup. — ChrisS 2005-07-21

• As mentioned elsewhere, the include plugin referencing namespace:page doesn't seem to work when placed within folded text. Ie, the following code does not render:

 some text ++ ::namespace:page:: ++

fixed in above code. Allowed modes are now determined in the first call to accepts() method. — ChrisS 2005-07-21

This latest revision throws out more error messages than I can count. Is it possibly a PHP version issue? — ta' Lajzar 2005-07-25 02:38

Thanks, Chris. Works for me. Lajzar, maybe it is a PHP issue. I'm running php 4.3.11. — zerohalo 2005-07-25.

Can you give any details? I'm running php 4.4.0, but there should be nothing in the code that requires a higher version than the rest of Dokuwiki. Feel free to visit my test wiki to try it or to post more detailed comments. — ChrisS 2005-07-26

My test server is running PHP version 5.0.4 and my main ISP server is running 4.3.10, but I haven't tested the new script on that server. — ta' Lajzar 2005-07-26 02:00