Differences

This shows you the differences between two versions of the page.

--- plugin:inline_folding2 [2006-10-17 01:21] – 206.161.205.190
+++ plugin:inline_folding2 [2023-08-13 16:02] (current) – Klap-in
@@ Line 1: / Line 1: @@
+====== Folded Text Plugin 2 ======
+---- plugin ----
+description: Enables folded text sections
+author     : Fabian van-de-l_Isle
+email      : webmaster@lajzar.co.uk
+type       : syntax
+lastupdate : 2005-07-14
+compatible :
+depends    :
+conflicts  :
+similar    : inline_folding, folded, hidden
+tags       : collapsible
+downloadurl:
+bugtracker :
+sourcerepo :
+----
+===== Description =====
+This is a slightly changed version of the [[plugin: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"// ((or whatever you like, you can even include tables, lists, other plugins, etc.)) will only be shown when you click on the icon next to the explaining text.
+===== Plugin =====
+Create a file ''/lib/plugins/folded/syntax.php'':
+<code 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;
+    }
+}</code>
+===== 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'':
+<code javascript>
+/*
+ * 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" />';
+  }
+}
+</code>
+===== 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:
+<code css>
+/* ----------- 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;
+}</code>
+===== Graphics =====
+Copy these two icons into your ''/lib/images/'' folder:
+{{http://www.qwik.ch/lib/plugins/folded/closed.gif|closed.gif}}
+{{http://www.qwik.ch/lib/plugins/folded/open.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):
+<code>
+<a href="#" class='folder' onclick='fold(this, \"folded_$plugin_folded_count\");return false;'>
+</code>
+and then of course replace closing </span> with </a> as well.
+===== Bugs =====
+  * 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
+<code>  * A bulleted point ++ some folded text ++</code>
+>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. --- //[[chris@jalakai.co.uk|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 :-). --- // [[chris@jalakai.co.uk|ChrisS]] 2005-Jul-14 //
+>> Thanks, Chris. Looking forward to seeing the final! [[zerohalo@gmail.com|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. --- //[[chris@jalakai.co.uk|ChrisS]] 2005-07-21//
+>>> One last liberty :-) \\ Updated for revised DokuWiki_Syntax_Plugin class, Entity conversion added for unmatched data.  Will require current ''[[xref>lib/plugins/syntax.php]]''.
+\\
+> Esther, did something change with the syntax? Previously, the following syntax would work:
+<code>
+some text here ++ folded text ++ some more text.
+</code>
+However, now it only works like this:
+<code>
+some text here
+  ++ folded text ++
+some more text
+</code>
+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:
+<code>
+  * Topic point number one.
+  ++ folded text related to something in topic point number one ++
+  * Another topic point.
+</code>
+-- [[zerohalo@gmail.com|zerohalo]], 2005-07-15
+> Zerohalo, I don't have any problems with: <code>a label ++ hidden content ++</code>  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 [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/wiki/playground|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. --- //[[chris@jalakai.co.uk|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 [[plugin:inline_folding|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@kaffeehaus.ch|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. --- //[[chris@jalakai.co.uk|ChrisS]] 2005-07-21//