DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:inline_folding2

Folded Text Plugin 2

Compatible with DokuWiki

No compatibility info given!

plugin Enables folded text sections

Last updated on
2005-07-14
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.

Extension name contains underscore, will not generate popularity points.

Similar to folded, hidden, inline_folding

Tagged with collapsible

Description

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.

Syntax

Explaining text ++++

all kinds of stuff here ++++

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

Plugin

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;
    }
}

Javascript

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" />';
  }
}

Stylesheet

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;
}

Graphics

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

closed.gif

open.gif

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.

Bugs

  * 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

Discussion

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.


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
1)
or whatever you like, you can even include tables, lists, other plugins, etc.
plugin/inline_folding2.txt · Last modified: 2011-09-29 11:27 by ach