plugin:inline_folding2
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:inline_folding2 [2006-11-08 00:31] – 206.161.192.12 | plugin:inline_folding2 [2023-08-13 16:02] (current) – Klap-in | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Folded Text Plugin 2 ====== | ||
+ | ---- plugin ---- | ||
+ | description: | ||
+ | author | ||
+ | email : webmaster@lajzar.co.uk | ||
+ | type : syntax | ||
+ | lastupdate : 2005-07-14 | ||
+ | compatible : | ||
+ | depends | ||
+ | conflicts | ||
+ | similar | ||
+ | tags : collapsible | ||
+ | downloadurl: | ||
+ | bugtracker : | ||
+ | sourcerepo : | ||
+ | ---- | ||
+ | |||
+ | ===== Description ===== | ||
+ | |||
+ | This is a slightly changed version of the [[plugin: | ||
+ | |||
+ | ===== Syntax ===== | ||
+ | |||
+ | Explaining text ++++ | ||
+ | | ||
+ | all kinds of stuff here ++++ | ||
+ | |||
+ | The text //"all kinds of stuff here"// | ||
+ | |||
+ | |||
+ | ===== Plugin ===== | ||
+ | |||
+ | Create a file ''/ | ||
+ | |||
+ | <code php> | ||
+ | <?php | ||
+ | /** | ||
+ | * Folded text Plugin: enables folded text font size with syntax ++ text ++ | ||
+ | * | ||
+ | * @license | ||
+ | * @author | ||
+ | */ | ||
+ | |||
+ | if(!defined(' | ||
+ | if(!defined(' | ||
+ | require_once(DOKU_PLUGIN.' | ||
+ | |||
+ | // 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/ | ||
+ | * need to inherit from this class | ||
+ | */ | ||
+ | class syntax_plugin_folded extends DokuWiki_Syntax_Plugin { | ||
+ | |||
+ | /** | ||
+ | * return some info | ||
+ | */ | ||
+ | function getInfo(){ | ||
+ | return array( | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * What kind of syntax are we? | ||
+ | */ | ||
+ | function getType(){ | ||
+ | return ' | ||
+ | } | ||
+ | |||
+ | function getAllowedTypes() { | ||
+ | return array(' | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Where to sort in? | ||
+ | */ | ||
+ | function getSort(){ | ||
+ | return 904; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Connect pattern to lexer | ||
+ | */ | ||
+ | function connectTo($mode) { | ||
+ | $this-> | ||
+ | } | ||
+ | |||
+ | function postConnect() { | ||
+ | $this-> | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Handle the match | ||
+ | */ | ||
+ | function handle($match, | ||
+ | return array($match, | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Create output | ||
+ | */ | ||
+ | function render($mode, | ||
+ | global $plugin_folded_count; | ||
+ | |||
+ | if($mode == ' | ||
+ | if ($data[1] == DOKU_LEXER_ENTER) { | ||
+ | $plugin_folded_count++; | ||
+ | |||
+ | $renderer-> | ||
+ | $renderer-> | ||
+ | $renderer-> | ||
+ | } | ||
+ | else if ($data[1] == DOKU_LEXER_UNMATCHED) { | ||
+ | $renderer-> | ||
+ | } | ||
+ | else if ($data[1] == DOKU_LEXER_EXIT) { | ||
+ | $renderer-> | ||
+ | } | ||
+ | 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 ''/ | ||
+ | |||
+ | <code javascript> | ||
+ | /* | ||
+ | * For Folded Text Plugin | ||
+ | * | ||
+ | * @author Fabian van-de-l_Isle < | ||
+ | */ | ||
+ | function fold( folder, divname ) { | ||
+ | var divstyle = document.getElementById( divname ).style; | ||
+ | var showhide = (divstyle.display == ' | ||
+ | divstyle.display = showhide; | ||
+ | if (showhide==' | ||
+ | folder.innerHTML = '< | ||
+ | } | ||
+ | else { | ||
+ | folder.innerHTML = '< | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== 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 '' | ||
+ | |||
+ | <code css> | ||
+ | /* ----------- Folded Text ----------- */ | ||
+ | |||
+ | .folder { | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | float: left; | ||
+ | } | ||
+ | .folder img { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .folded { | ||
+ | display: block; | ||
+ | padding: 0.5em; | ||
+ | border: 1px dashed #8cacbb; | ||
+ | }</ | ||
+ | |||
+ | ===== Graphics ===== | ||
+ | |||
+ | Copy these two icons into your ''/ | ||
+ | |||
+ | {{http:// | ||
+ | |||
+ | {{http:// | ||
+ | |||
+ | **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 < | ||
+ | < | ||
+ | <a href="#" | ||
+ | </ | ||
+ | and then of course replace closing </ | ||
+ | |||
+ | ===== 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:// | ||
+ | < | ||
+ | |||
+ | >Each //syntax mode// determines the other syntax modes which it will allow within itself. | ||
+ | |||
+ | |||
+ | ===== 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' | ||
+ | >> Thanks, Chris. Looking forward to seeing the final! [[zerohalo@gmail.com|zerohalo]] 2005-15-15. | ||
+ | >>> | ||
+ | |||
+ | >>> | ||
+ | |||
+ | \\ | ||
+ | |||
+ | > 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@gmail.com|zerohalo]], | ||
+ | |||
+ | > Zerohalo, I don't have any problems with: < | ||
+ | >> 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 '' | ||
+ | |||
+ | >> Hm, I forgot the getPType, you're right. My version which creates a <div> should probably return '' | ||
+ | |||
+ | >>> | ||