DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:inline_folding

Inline Folding Plugin

Compatible with DokuWiki

No compatibility info given!

plugin Enables folded text sections

Last updated on
2005-07-09
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_folding2

Tagged with collapsible

Description

This is my first attempt at doing anything on this scale in PHP, and it is, perhaps, obviously, largely a cut and paste job that owes heavily to earlier hacks for inline folding text in DokuWiki. With this plugin the syntax of DokuWiki is extended to allow inline folding sections. The syntax to use this plugin is…

++ Folded text ++

You can see it in action here.FIXME

:!: I have re-named this script to “creased”, and changed the hook to activate the alternate version of this plugin to “++++”. It is now possible to have both plugins installed at the same time. Why do this? The “creased” plugin is good for folding text that is inside a list, which the “folded” plugin cannot do. however, the “folded” plugin can contain an included file, which the “creased” one cannot do. By making that small change to both plugins, you can now run both and enjoy the best of both worlds.
Change the return value of getType from 'container' to 'formatting' in the alternate version and it will fold text inside a list. If you revise this version to remove the constructor function and add use a getAllowedTypes() method instead, then this version will be able to fold an included file.

Plugin

Images

First, place the following images in your ./lib/images folder:

Save as “closed.gif”

Save as “open.gif”

CSS

This goes in ./lib/tpl/default.css unless of course you have changed your stylesheet templates configuration.

/* ----------- Folded Text ----------- */
.folder {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.folder img {
  cursor: pointer;
}
.folded {
  display: block;
  border: 1px solid #ffff00;
  background-color: #ffffbb;
}

Code for “.folded img” removed — That would cause the pointer to appear above the text that appears when the icon is clicked. The “folder” style applies to both the “open.gif” and the “closed.gif” icons. — ta' lajzar 2005-08-01 12:22

JavaScript

Next, a confession. This isn't a true plugin — you will also need to add the following lines to ./lib/scripts/script.js

/*
 * For Folded Text Plugin
 *
 * @author ta' Lajzar <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" />';
  }
}

PHP

Finally, Put the following PHP file in /lib/plugins/creased/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     ta' Lajzar <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' => 'ta Lajzar',
      'email'  => 'webmaster@lajzar.co.uk',
      'date'   => '2005-07-09',
      'name'   => 'Creased Plugin',
      'desc'   => 'Enables folded text',
      'url'    => 'http://www.dokuwiki.org/plugin:inline_folding',
    );
  }
 
  /**
  * Constructor - adds allowed modes
  */
 
  function syntax_plugin_creased(){
    global $PARSER_MODES;
    $this->allowedModes = array_merge(
      $PARSER_MODES['formatting'],
      $PARSER_MODES['substition'],
      $PARSER_MODES['disabled'],
      $PARSER_MODES['protected'],
      $PARSER_MODES['container'] 
    );
  }
 
  /**
  * What kind of syntax are we?
  */
  function getType(){
    return 'formatting';
  }
 
  /**
  * Where to sort in?
  */
  function getSort(){
    return 904;
  }
 
  /**
  * Connect pattern to lexer
  */
  function connectTo($mode) {
    $this->Lexer->addEntryPattern('\+\+(?=.*\+\+)',$mode,'plugin_creased');
  }
 
  function postConnect() {
    $this->Lexer->addExitPattern('\+\+','plugin_creased');
  }
 
  /**
  * Handle the match
  */
  function handle($match, $state, $pos, &$handler){
    return array($match, $state);
  }
 
  /**
  * Create output
  */
  function render($mode, &$renderer, $data) {
    if($mode == 'xhtml') {
      if ($data[1] == DOKU_LEXER_ENTER) {
        // $plugin_folded_count++;
        $rand = rand();
        $renderer->doc .= '<span class="folder" onclick="fold(this, \'folded_' . $rand . '\');">';
        $renderer->doc .= '<img src="' . DOKU_BASE . 'lib/images/closed.gif" alt="reveal hidden content" title="reveal" /></span>';
        $renderer->doc .= '<span class="folded" id="folded_' . $rand . '" style="display:none;">';
      }
      else if ($data[1] == DOKU_LEXER_UNMATCHED) {
        $renderer->doc .= $renderer->_xmlEntities($data[0]);
      }
      else if ($data[1] == DOKU_LEXER_EXIT) {
        $renderer->doc .= '</span>'.$text;
      }
    return true;
    }
  return false;
  }
}

Revision History

2005-07-17 - Standardized span classes as “folder” and “folded”. Major changes taking advantage of the earlier discussions.

2005-07-29 - Added the pointer stylesheet when hovering over the folder icon. Gave the icons logical names.

2005-07-31 - various minor changes to code.

Known issues

This plugin, as written above, does not allow for complex markup within the folded section. This includes paragraph breaks (workaround: use “// //” instead of line breaks), included files and tables.

The Javascript functions to change the image work correctly, but, at least under Mozilla Firefox, the functions to change the “title” and “alt” tags are not parsed correctly. Once the links have been clicked, no further title will be shown, although functionality is unimpaired. I believe the solution would be to change these directly instead of using innerHTML. —fixed

Discussion

Nice plugin! To format the “folded text” create a style (ie, 'foldedtext') in your design.css file and then reference it in the above script, ie:
$renderer->doc .= '<span class="foldedtext" id="'.$rand.'" style="display:none;">'.$text;
Here's a sample style, which you can add to your design.css file:
.foldedtext {
    display: block;
    background-color: #ffffcc;
    border: 1px dashed #8cacbb;
    padding: 2px;
    margin: 10px;
}
- zerohalo
When i get some time, I'm going to see if I can find a way to integrate this and the include plugin. I suspect the simplest solution may be to have both functions contained in one plugin. Preliminary testing suggests nesting them may prove a non-trivial task. I also actually added css formatting support in the version that I use on my own site. I'll probably update this file once i have some free time this weekend. — ta' Lajzar 2005-07-14 15:36
Nesting Plugins is quite easy, and as I did this already for another plugin, I did this for this plugin again. I now have a slightly changed version. If you like it, take over these changes. It's now a container plugin (no longer formatting), can accept containers within it and the second <span> is changed to a <div>. I also changed the style to use the already familiar open / close icons from DokuWiki as seen on the index page. You can see it in action in my playground. — Esther Brunner 2005-07-14 16:35
I found some issues with the code above. My site uses canonical URL's which require a different construction of the image paths. Also the xhtml generated didn't validate. I have made changes to fix the problems in the code for Esther's slightly changed version. — ChrisS 2005-07-14
Thanks a lot!

By the way: is the ever widening border to the right with nested quotes a feature or a bug? — Esther Brunner 2005-07-15 01:05
This is strange. Even with all the changed code copied exactly, I cannot make it read any included files that are within a folded section. It displays included files that are outside folded sections just fine. — ta' Lajzar 2005-07-15 11:31
I'm experiencing the same problem. — zerohalo 2005-07-15.
Fixed in slightly changed version. — ChrisS 2005-07-21
Hi. You can add the code below to display a proper cursor while the user hovers the images. Since they are “clickable” the should get a pointer.
.folder img,.folded img{
  cursor:pointer;
} 
plugin/inline_folding.txt · Last modified: 2016-04-20 21:59 by Klap-in