Site Tools


wiki:pluginsyntax:wrap

Differences

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

Link to this comparison view

Next revision
Previous revision
wiki:pluginsyntax:wrap [2013/01/11 18:55] – created Alan Sheawiki:pluginsyntax:wrap [2018/05/28 22:29] (current) – external edit 127.0.0.1
Line 1: Line 1:
 ====== Wrap Plugin ====== ====== Wrap Plugin ======
  
-Universal plugin which combines the functionality of many other plugins. Wrap wiki text inside containers (divs or spans) and give them a class (choose from a variety of preset classes), a width and/or a language with its associated text direction.+[[https://www.dokuwiki.org/plugin:wrap| Universal plugin]] which combines the functionality of many other plugins. Wrap wiki text inside containers (divs or spans) and give them a class (choose from a variety of preset classes), a width and/or a language with its associated text direction.
  
 ===== One plugin to rule them all ===== ===== One plugin to rule them all =====
Line 9: Line 9:
   - a width   - a width
   - a language with its associated text direction   - a language with its associated text direction
- 
-It potentially replaces a lot of other plugins and is IMHO the better alternative for many. There is one exception: It currently lacks ODT support. If you need ODT support, you might want to take a look at similar plugins. 
- 
-It fully replaces: [[doku>plugin:class]], [[doku>plugin:divalign]], [[doku>plugin:div_span_shorthand]], [[doku>plugin:side_note]], [[doku>plugin:tip]], [[doku>plugin:clearfloat]], [[doku>plugin:emphasis]], [[doku>plugin:hide]], [[doku>plugin:hilited]], [[doku>plugin:important_paragraf]], [[doku>plugin:important_text]], [[doku>plugin:noprint]], [[doku>plugin:pagebreak]], [[doku>plugin:wpre]], [[doku>plugin:lang]], [[doku>plugin:ltr]] \\  
-It partly replaces: [[doku>plugin:box]], [[doku>plugin:layout]], [[doku>plugin:note]], [[doku>plugin:styler]], [[doku>plugin:typography]], [[doku>plugin:color]], [[doku>plugin:columns]], [[doku>plugin:fontcolor]], [[doku>plugin:fontfamily]], [[doku>plugin:fontsize]], [[doku>plugin:fontsize2]], [[doku>plugin:highlight]], [[doku>plugin:tab]], [[doku>plugin:tablewidth]] 
  
  
Line 20: Line 15:
 The plugin comes with an **[[wrap_example|example]]** page, which should explain a lot and looks like this in the default template: The plugin comes with an **[[wrap_example|example]]** page, which should explain a lot and looks like this in the default template:
  
-{{ :wiki:pluginsyntax:plugin-wrap_plugin_example5.png?direct&300|}}+{{ wrap_plugin_example7_1_.png?direct&300|}}
  
 ===== Syntax ===== ===== Syntax =====
  
 Basic Syntax: Basic Syntax:
-  <WRAP classes width :language>+  <WRAP classes #id width :language>
   "big" content   "big" content
   </WRAP>   </WRAP>
      
   or   or
-  <block classes width :language>+  <block classes #id width :language>
   "big" content   "big" content
   </block>   </block>
      
   or   or
-  <div classes width :language>+  <div classes #id width :language>
   "big" content   "big" content
   </div>   </div>
 An uppercase **%%<WRAP>%%** (or alternatively **%%<block>%%** or **%%<div>%%**) creates a **''div''** and should be used for **"big"** containers, **surrounding** paragraphs, lists, tables, etc. An uppercase **%%<WRAP>%%** (or alternatively **%%<block>%%** or **%%<div>%%**) creates a **''div''** and should be used for **"big"** containers, **surrounding** paragraphs, lists, tables, etc.
      
-  <wrap classes width :language>"small" content</wrap>+  <wrap classes #id width :language>"small" content</wrap>
      
   or   or
-  <inline classes width :language>"small" content</inline>+  <inline classes #id width :language>"small" content</inline>
      
   or   or
-  <span classes width :language>"small" content</span>+  <span classes #id width :language>"small" content</span>
 A lowercase **%%<wrap>%%** (or alternatively **%%<inline>%%** or **%%<span>%%**) creates a **''span''** and should be used for **"small"** containers, **inside** paragraphs, lists, tables, etc. A lowercase **%%<wrap>%%** (or alternatively **%%<inline>%%** or **%%<span>%%**) creates a **''span''** and should be used for **"small"** containers, **inside** paragraphs, lists, tables, etc.
  
Line 54: Line 49:
  
 The following classes are currently available: The following classes are currently available:
 +
  
 ^class name^description/notes^ ^class name^description/notes^
Line 62: Line 58:
 |**''center''** | will position the container in the horizontal center of the page | |**''center''** | will position the container in the horizontal center of the page |
 |**''col2''**..**''col5''** | will show the text in multiple columns (2, 3, 4 or 5), only works in modern browsers (Firefox, Chrome and Safari) | |**''col2''**..**''col5''** | will show the text in multiple columns (2, 3, 4 or 5), only works in modern browsers (Firefox, Chrome and Safari) |
 +^__widths__ -- :!: **experimental**, might not work as expected, includes mobile support^^
 +|**''half''** | fits two columns in a row, should be used in pairs |
 +|**''third''** | fits three columns in a row, should be used in triplets |
 +|**''quarter''** | fits four columns in a row, should be used in quads |
 ^__alignments__ -- similar to [[divalign]], [[columns]], [[styler]] -- :!: don't work with spans!^^ ^__alignments__ -- similar to [[divalign]], [[columns]], [[styler]] -- :!: don't work with spans!^^
 |**''leftalign''** | aligns text on the left | |**''leftalign''** | aligns text on the left |
Line 71: Line 71:
 |**''info''** (was ''information'' in first version)| creates a blue box with an info icon | |**''info''** (was ''information'' in first version)| creates a blue box with an info icon |
 |**''important''** | creates an orange box with an important icon | |**''important''** | creates an orange box with an important icon |
-|**''alert''** (:!: was ''warning'' in previous versions) | creates a red box with alert icon |+|**''alert''** (:!: was ''warning'' in previous versions) | creates a red box with an alert icon |
 |**''tip''** | creates a yellow box with a tip icon | |**''tip''** | creates a yellow box with a tip icon |
 |**''help''** | creates a violet box with a help icon | |**''help''** | creates a violet box with a help icon |
Line 82: Line 82:
 |**''notice''** | creates a blue notice safety note | |**''notice''** | creates a blue notice safety note |
 |**''safety''** | creates a green safety note | |**''safety''** | creates a green safety note |
-^__marks__ -- similar to [[hilited]], [[emphasis]], [[important_paragraf]], [[important_text]]^^+^__marks__ -- similar to [[emphasis]], [[important_paragraf]], [[importanttext]]^^
 |**''hi''** | marks text as highlighted | |**''hi''** | marks text as highlighted |
 |**''lo''** | marks text as less significant | |**''lo''** | marks text as less significant |
 |**''em''** | marks text as especially emphasised | |**''em''** | marks text as especially emphasised |
-^<del>__typography__ (not recommended) -- similar to [[typography]], [[styler]], [[color]], [[fontcolor]], [[highlight]], [[fontsize]], [[fontsize2]], [[fontfamily]]</del> \\ :!: removed since version 2011-05-15 (for more information, see [[#Add former typography classes|below]])^^ 
-|<del>''sansserif'', ''serif'', ''monospace''</del> | <del>changes the font family</del> | 
-|<del>''bigger'', ''muchbigger'', ''smaller''</del> | <del>changes the font size</del> | 
-|<del>''fgred'', ''fggreen'', ''fgblue'', ''fgcyan'', ''fgviolet'', ''fgyellow'', ''fggrey'', ''fgwhite'', ''fgblack''</del> | <del>changes the font colour</del>| 
-|<del>''bgred'', ''bggreen'', ''bgblue'', ''bgcyan'', ''bgviolet'', ''bgyellow'', ''bggrey'', ''bgwhite'', ''bgblack''</del> | <del>changes the background colour</del>| 
 ^__miscellaneous__^^ ^__miscellaneous__^^
 |**''clear''** | similar to [[clearfloat]], should preferably be used with divs, i.e. uppercase ''%%<WRAP>%%''s | |**''clear''** | similar to [[clearfloat]], should preferably be used with divs, i.e. uppercase ''%%<WRAP>%%''s |
 +|**''tabs''** | if wrapped around a list of links, will show those as tabs |
 |**''hide''** | hides the text per CSS (the text will still appear in the source code, in non-modern browsers and is searchable) | |**''hide''** | hides the text per CSS (the text will still appear in the source code, in non-modern browsers and is searchable) |
 |**''noprint''** | displays text on the screen, but not in print, similar to [[noprint]] | |**''noprint''** | displays text on the screen, but not in print, similar to [[noprint]] |
Line 107: Line 103:
 === Known restrictions === === Known restrictions ===
  
-  * WRAPs won't export in ODT format +  * WRAPs won't export in ODT format. 
-  * The PNG icons for the various notes have an alpha transparency which will look ugly in IE6+  * Round corners only work in modern browsers (no IE8 and below). 
-  * Round corners only work in modern browsers (no IE). +  * Multiple columns only work in modern browsers (no IE9 and below)
-  * Multiple columns only work in Firefox, Chrome and Safari+  * Width classes are experimental and only work in modern browsers (no IE8 and below). 
-  * <del>After an opening %%<WRAP>%% there is one empty line needed before the content, or else there won't be any paragraph, which might lead to unexpected results. (Wraps without a visible content don't need any additional empty lines, e.g. ''clear'' or ''hide''.)</del> :!: This was fixed in the latest version (2010-11-20if used with Anteater+  * Normal DokuWiki Headlines used to not work and a work-around was added. Now that headlines do work, the work-around is not needed anymore but kept for backwards-compatibility. The following syntax would produce two different kinds of emulated headlines inside any of the columns or boxes/notes:
-  * Normal DokuWiki Headlines won'work inside any plugin syntax. As a work-around you can use the following two emulated headlines inside any of the columns or boxes/notes:+
     * %%//**__Big Underlined Headline__**//%% (They will look a bit different in safety notes.)     * %%//**__Big Underlined Headline__**//%% (They will look a bit different in safety notes.)
     * %%//**Small Headline**//%%     * %%//**Small Headline**//%%
Line 124: Line 119:
 You can set any valid widths on any uppercase %%<WRAP>%% container: ''%, px, em, ex, pt, pc, cm, mm, in''. Just set the width before or after or with the classes, e.g. You can set any valid widths on any uppercase %%<WRAP>%% container: ''%, px, em, ex, pt, pc, cm, mm, in''. Just set the width before or after or with the classes, e.g.
   <WRAP someclass 50% anotherclass>...   <WRAP someclass 50% anotherclass>...
 +All except percentages will be reduced to have the maximum width available on smaller screens.
 +
 +You can also use the width keywords ''half'', ''third'' and ''quarter''. To work correctly they need another wrap around them. E.g.
 +  <WRAP group>
 +    <WRAP half column>...</WRAP>
 +    <WRAP half column>...</WRAP>
 +  </WRAP>
 +will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices.
  
 ==== Languages and Text Directions ==== ==== Languages and Text Directions ====
Line 135: Line 138:
 If you like to mark a text with a different text direction than the default one, you should use divs, i.e. uppercase ''%%<WRAP>%%''s. Otherwise the text alignment won't change as well. If you like to mark a text with a different text direction than the default one, you should use divs, i.e. uppercase ''%%<WRAP>%%''s. Otherwise the text alignment won't change as well.
  
-This makes it a better replacement of [[ltr]] (and [[lang]]). 
- 
-===== Extend with custom styles ===== 
- 
-If you like to add your own classes and styles to the plugin, you can simply add the styles for your class preceded by "''wrap_''" to your [[devel:css#user styles]]. 
- 
-E.g. if you need a ''%%<WRAP myclass>%%'', you edit (or create if it doesn't exist) your ''conf/userstyle.css'' and add your ''.wrap_myclass{}'' with its style definitions to it. (If necessary, edit ''conf/userprint.css''(( ''conf/printstyle.css'' in Anteater)) for the print view, ''conf/userrtl.css''(( ''conf/rtlstyle.css'' in Anteater)) for RTL languages and ''conf/userall.css''(( ''conf/allstyle.css'' in Anteater)) for all styles as well.) 
- 
-Since version 2010-03-14 you have the possibility to exclude certain class names from being prefixed with "wrap_". Just add a comma separated list of class names into the config option "noPrefix" in the configuration manager. 
- 
-==== Examples ==== 
- 
-in style.css 
- 
-<code css> 
-.dokuwiki div.wrap_note{ /* added */ 
-    background-color: #eee; 
-    color: #000; 
-    padding: .5em .5em .5em .5em; 
-    margin-bottom: 1em; 
-    overflow: hidden; 
-} 
-</code> 
- 
-call in DW-page: 
-  <WRAP note>...</WRAP> 
- 
-==== Add former typography classes ==== 
- 
-The old typography classes were removed in version 2011-05-15. If you need something similar, use the [[block]] plugin instead. If you like to have the old typography classes back, they are not lost: 
-They were not completely removed yet, but only put in a comment. To keep using them either remove the comments (search for "typography" in ''all.css'' and ''style.css''). Or better (because future-proof) copy them to your own user styles (see [[#Extend with custom styles|above]]). 
-===== How to use the helper ===== 
- 
-From version 2011-05-15 on the plugin includes a helper plugin which you can use to add classes, width and lang/dir to any other plugin. 
- 
-==== Example how to get just one kind of attribute ==== 
- 
-<code php> 
-// get lang from wrap helper plugin 
-$lang = ''; 
-if(!plugin_isdisabled('wrap')) { 
-    $wrap =& plugin_load('helper', 'wrap'); 
-    $attr = $wrap->getAttributes($data); 
-    if($attr['dir']) $lang = ' lang="'.$attr['lang'].'" xml:lang="'.$attr['lang'].'" dir="'.$attr['dir'].'"'; 
-} 
- 
-// add lang to your plugin's output 
-$renderer->doc .= '<span '.$lang.' class="foo">'; 
-</code> 
- 
-getAttributes() expects the string with "classes width :language". It returns an array with 
-  * $attr['class']: CSS class(es) 
-  * $attr['width']: width 
-  * $attr['lang'] and $attr['dir']: language and text direction 
- 
-==== Example how to get all attributes ==== 
- 
-<code php> 
-// get attributes from wrap helper plugin 
-$attr = ''; 
-if(!plugin_isdisabled('wrap')) { 
-    $wrap =& plugin_load('helper', 'wrap'); 
-    $attr = $wrap->buildAttributes($data, 'additionalClass'); 
-} 
- 
-// add those attributes to your plugin's output 
-$renderer->doc .= '<div '.$attr.'">'; 
-</code> 
- 
-buildAttributes() expects the same string as above ("classes width :language") and an optional string for additional classes, in case your plugin has CSS classes of its own which it needs to reuse. It returns a string with all the attributes prepared for HTML. 
- 
- 
-===== Work ===== 
- 
-==== Done ==== 
- 
-{{rss>http://github.com/feeds/selfthinker/commits/dokuwiki_plugin_wrap/master date}} 
- 
-==== To Do ==== 
- 
-  * [[ODT]] support 
-  * and more ... 
- 
-==== Localization ==== 
- 
-You can help me with translations. There are two files to translate: 
- 
-  * [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php|lang/en/lang.php]] is for the explaining titles on the picker images. 
-  * [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php|lang/en/settings.php]] is for the (currently only option in the) configuration admin. 
- 
-You can either send me language files to update by email or post them here or in the [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues|bugtracker]]. Please have a look at the available translations first. 
- 
-===== Credits ===== 
- 
-  * The code reuses parts of the [[box]] plugin. Thanks to [[chris@jalakai.co.uk|Christopher Smith]]. 
-  * The images for the notes are taken from the [[http://schollidesign.deviantart.com/art/Human-O2-Iconset-105344123|Human-O2 icon set]]. 
-  * The toolbar uses images from the [[http://www.famfamfam.com/lab/icons/silk/|Silk Icon Set]] and the [[http://www.damieng.com/icons/silkcompanion|Silk Companion Icon Set]]. 
-  * Thanks to all contributors: [[user>andi|Andreas Gohr]], [[https://github.com/campino2k|campino2k]], Sergio Motta and [[user>danny0838|Danny Lin]]. 
- 
-===== Comments ===== 
- 
-Before reporting any issues (bugs or requests), please first take a look at the [[faq:pluginproblems|FAQ on plugin problems]]. 
- 
-You can report any issues either on the [[http://github.com/selfthinker/dokuwiki_plugin_wrap/issues|Issue Tracker]] or here in this section. 
- 
- 
-==== Problems in some templates ==== 
- 
-I've just made the CSS work properly with some custom themes using the git master branch, eg one of my own and [[template:typo]]. the trick is to remove all the ''.dokuwiki'' in the different classes with a 
- 
-  perl -pi -e 's/\.dokuwiki//g' *.css 
- 
---- //[[http://orgrim.net|Nicolas Thauvin]] 2009/09/09 23:22// 
- 
-> Templates should use the ''.dokuwiki'' class and many already do (as does the [[template:typo]] template). See more on the [[devel:templates#dokuwiki class]]. --- //[[anika@selfthinker.org|Anika Henke]] 2009/09/18 00:37// 
- 
- 
-==== Quotation Box ==== 
- 
-Wouldn't it be nice to add quotation box, too ...\\ 
-- chris 
- 
-> Yes, I thought about that, too. But as the [[plugin:blockquote]] plugin would be semantically much more correct, I recommend using that instead. --- //[[anika@selfthinker.org|Anika Henke]] 2009/09/18 00:37// 
- 
- 
-==== Thanks ==== 
- 
-Incredibly useful multipurpose plugin I must say. Thanks for that" Looking forward to intended ODT compatibility.\\ 
---- //Martin 2009/09/14 23:22// 
- 
- 
-==== Align Issues ==== 
- 
-<code> 
-<WRAP centeralign> 
- 
-<WRAP info 60%> 
- 
-This is some text, text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , 
-text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text 
-</WRAP> 
- 
-[[namespace:something|{{:picture.png|GO}}]] 
-</WRAP> 
-</code> 
- 
-The result is the text of the info note is centered. If I use leftalign it aligns the whole box left. How do I get the box text to be left aligned and screen centered? peterennis [at] yahoo [dot] com 
- 
-> To position something you shouldn't use an alignment class, but one of the column classes. In this case it's "**center**" instead of "centeralign". (And whenever you use "center" you should also give a width.) If you only want the info box to be centred, you can use ''%%<WRAP center info 60%>%%'', and the image could be centred by using the normal [[:syntax#images_and_other_files|DokuWiki syntax]]. --- //[[anika@selfthinker.org|Anika Henke]] 2009/10/07 07:47// 
- 
- 
-==== Empty Paragraph ==== 
-Like using tab-plugin in some places (perhaps tables) 
- 
->> I sometimes need space above or below a paragraph. Fed up fiddling with HTML, PHP methods so I just use . (dot) 
->> Of course, it shows a dot! Is there an easy solution? peterennis [at] yahoo [dot] com 
- 
-> The best way would be to [[#extend_with_custom_styles|add your own classes]]. In this case you could use something like "''topspace''" and "''bottomspace''" and add <code css> 
-.dokuwiki .wrap_topspace { margin-top: 1.5em; } 
-.dokuwiki .wrap_bottomspace { margin-bottom: 1.5em; } 
-</code> etc. But this depends highly on your template and in which combination you will use those classes. Just fiddle around with the values to change their effect. (And from the semantic point of view you should probably ask yourself **why** and **if** you need that space and find a better name if you find a common usage pattern.) --- //[[anika@selfthinker.org|Anika Henke]] 2009/10/07 08:05// 
- 
-I think too it depent on your template and the combination of classes. Testing with following code I could find something working for me. 
- 
-__css__ try differend combinations of height, margin, padding and line-height. The colors are only to see the effect. (%, px, em, ex, pt, pc, cm, mm, in):  
-<code>div.wrap_testing { width: 100%;                                        border: 2px solid yellow; } 
-div.wrap_empty1  { width: 100%; height: 2em;                           border: 2px solid red; } 
-div.wrap_empty2  { width: 100%; margin-top: 2em; margin-bottom: 2em;   border: 2px solid violet; } 
-div.wrap_empty3  { width: 100%; padding-top: 2em; padding-bottom: 2em; border: 2px solid blue; } 
-div.wrap_empty4  { width: 100%; line-height: 2em;                      border: 2px solid green;  }</code> 
- 
-__dokuwiki__: 
-<code> 
-\\ 
-<div testing>  <div empty1></div>  </div> 
-\\ 
-<div testing>  <div empty2></div>  </div> 
-\\ 
-<div testing>  <div empty3></div>  </div> 
-\\ 
-<div testing>  <div empty4></div>  </div> 
-</code> 
-==== Non-valid CSS ==== 
- 
-Love this plugin, but the CSS on [[http://neuroanalysis.org/wiki|my page]] seems to fail CSS3 validity check as a result. 
-<code> 
-1  .dokuwiki div.wrap_round  Property -moz-border-radius doesn't exist :  20px 
-1 .dokuwiki div.wrap_round Property -webkit-border-radius doesn't exist : 20px 
-1 .dokuwiki div.wrap_round Property -khtml-border-radius doesn't exist : 20px 
-1 .dokuwiki span.wrap_round Property -moz-border-radius doesn't exist : 2px 
-1 .dokuwiki span.wrap_round Property -webkit-border-radius doesn't exist : 2px 
-1 .dokuwiki span.wrap_round Property -khtml-border-radius doesn't exist : 2px  
-</code> 
- 
-I'm no CSS expert. Anybody have any suggestions?  --- //[[michael@repucci.org|michaelrepucci]] 2009/11/06 22:08// 
- 
-> Actually, did some web searches and discovered that since these properties are proprietary, they're not considered part of "valid" CSS, even though they do follow standards. Oh well. When CSS3 is adopted, "border-radius" will replace the proprietary properties and validate. Until then, guess I'll live with it. I'll leave this note here for others who are curious like me. Anyway, nice to have rounded corners :) --- //[[michael@repucci.org|michaelrepucci]] 2009/11/06 22:32// 
- 
- 
-==== latitude / longitude ==== 
- 
-is there any way to skip the generation of the wrap_ "namespace" I'd like to use this for providing a (hidden) geotag on the page like this:  
-<code><WRAP hide geo geo-post>   
-    <wrap latitude>52.085819</wrap><wrap longitude>5.115348</wrap> 
-</WRAP> 
-</code> 
-right now that results in: 
-<code><div class="wrap_hide wrap_geo wrap_geo-post">   
-    <span class="wrap_latitude">52.085819</span><span class="wrap_longitude">5.115348</span> 
-</div></code>  
-where I would want:  
-<code><div class="wrap_hide geo geo-post">  
-    <span class="latitude">52.085819</span><span class="longitude">5.115348</span> 
-</div></code> 
- 
-> I wouldn't want to skip the "wrap_" altogether. But it might be a good idea to add a config option for listing all class names which should not be adjusted but taken directly as specified. Then everybody is free to also add other microformat classes and more. I'll implement that as soon as I find the time. --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/07 01:52// 
->> I just implemented this (in the repo). A new release which includes it will follow soon. --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/31 15:36// 
- 
- 
-==== missing paragraph break issue ==== 
- 
-<code> 
-                case DOKU_LEXER_ENTER: 
-                    $wrap = new syntax_plugin_wrap_base(); 
-                    $attr = $wrap->buildAttributes($data); 
- 
-                    $renderer->doc .= '<div'.$attr.'><p>'; 
-                    break; 
-</code> 
- 
-The div version of the plugin merges the first two paragraphs into one. The workaround is to leave a line break immediately after the opening <WRAP...> tag. The above code modification will fix this issue. This issue (and fix) is also present in the box plugin. 
- 
-> As described under [[#known restrictions]] you can circumvent this by writing one more line after %%<WRAP>%% (see the very first [[#syntax]] example). You solution will **not** fix this problem but will only cause more invalid code in other cases! This whole issue is due to a bug in the DokuWiki core: See [[dokubug>1797]]. And it annoys me as well. ;-) --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/15 09:43// 
->> This will be fixed in the next version (coming soon) if used with Anteater. --- [[user>ach]] //2010/11/20 17:22// 
- 
- 
-==== Headlines ==== 
-Are you planning support for **regular dokuwiki headlines** syntax? Plugin [[plugin:columns|]] have it, so where is the problem? Thanks. 
- 
-> The [[plugin:columns|columns plugin]] supports regular headlines, because it re-builds all headlines within its syntax completely from scratch. DokuWiki itself doesn't support headlines in any syntax and it's not possible to support them without such massive overhead. As the "emulated headlines" cover most desirable cases, I don't think I will implement anything which should rather be fixed in the DokuWiki core than patched in a plugin. --- [[user>ach|Anika Henke]] //2011/05/02 20:16// 
->> The latest version (2011-05-15) now has **experimental** support for regular headlines implemented. This is not an official feature yet, because there might be unforeseen problems (most likely with section editing). You are free to try it out and please report any problems back. --- [[user>ach|Anika Henke]] //2011/05/15 18:12// 
- 
-==== Emulated headlines with anchors ==== 
- 
-Is there a way to make the emulated headlines contain "a name=..." anchors, similar to how the regular headlines have such anchors? 
- 
-> No, this is currently not possible and is also not planned. As a work-around you can use the [[bookmark]] plugin. --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/31 15:34// 
->> I now implemented **experimental** support for regular headlines, so those will contain the anchors and will also be added to the TOC. --- [[user>ach|Anika Henke]] //2011/05/15 18:12// 
- 
-==== Baretables ==== 
- 
-I've been using a few lines in ''conf/entities.conf'' and a template to easily make invisible tables with visible content. I use this to structure math proofs, so relevant parts of equations stay above each other. Is this something you could incorporate in your great plugin? 
- 
-<code> 
-<bare> <html><div class="baretable"></html> 
-</bare> <html></div></html > 
-</code> 
- 
-<code css> 
-div.dokuwiki div.baretable th, 
-div.dokuwiki div.baretable td { border: 0px; } 
-</code> 
- 
-> It's quite easy to implement it yourself by [[#extend_with_custom_styles|adding your own class]], with e.g. <code css> 
-div.dokuwiki div.wrap_baretable table, 
-div.dokuwiki div.wrap_baretable th, 
-div.dokuwiki div.wrap_baretable td { border: 0; } 
-</code> you can use <code><WRAP baretable> 
-|foo| 
-|bar| 
-</WRAP> 
-</code> --- [[user>ach|Anika Henke]] //2011/05/02 20:48// 
- 
->> Also check out the [[plugin:jsmath|jsmath plugin]]. 
-==== Just appreciation ==== 
- 
-Anika, sorry for spamming, just wanted to show my appreciation for the work you've done. -Alex. 
- 
-I second that! -Tina 
- 
-Me too. Fantastic addition to Dokuwiki. -Brett 
- 
-Hello Anika, I would like to thank you too for your wonderful work. I use all of your plugins a lot :-) -Hartmut. 
- 
-==== Conflict with OpenLayersMap ==== 
-http://www.1wiki.de/doku.php/playground:playground 
- 
-> I just [[http://github.com/selfthinker/dokuwiki_plugin_wrap/commit/265f148c782a0dc37f2b16f7a667a893d21646d0|fixed that issue]] in the repo. (But it's not always working in IE6.) The same issue would occur whenever you float something inside a box with a background colour (or a border), e.g. a right-aligned image in a %%<WRAP box>%%. If you don't want to install the adjusted plugin, you can also just put a ''%%<WRAP clear></WRAP>%%'' before the containing closing "%%</WRAP>%%", like 
-  ... 
-  </olmap> 
-  <WRAP clear></WRAP> 
-  </WRAP> 
---- //[[anika@selfthinker.org|Anika Henke]] 2010/06/12 22:20// 
- 
->>thats works <WRAP clear></WRAP> THANK YOU 
- 
-==== Hide (some of) the editor buttons? ==== 
- 
-I want to use several of the functions as the admin of my wiki (like columns), but I would like my users to only be able to insert the info/important boxes into the pages. Is it possible to hide the editor button, or to hide some of them? I wouldn't mind being able to hide all of the buttons and just telling my users what syntax to type in. 
- 
-> You cat manually edit action.php or simply delete it - all buttons described there. //[[user>Malamut]]// 
- 
->> To edit Textlabels of the editor buttons: ''/plugins/wrap/lang/en/lang.php''  
- 
-==== Why uppercase? ==== 
- 
-It's a great plugin, but why uppercase for WRAP? All other Doku syntax and plugins use lovercase or case insensitive. May be replace wrap with "textwrap" and WRAP with "boxwrap"? It's more clear, as I think. //[[user>Malamut]] 09.10.2010// 
- 
-**UPD:** It will be //really// great if you add two options to plugin configuration: words for div's and span's. I prefer to use **box** and **text** for it and now I simply modify wrap plugin's source to implement it, but it's not a good solution. 
- 
-I have modified WRAP for my use. Download here: https://hahn-mediaservice.net/private/gast/dokuwiki/wrap.zip 
- 
-> The initial reasoning was to make it similar to DokuWiki's core  [[:syntax#embedding_html_and_php|html and php embedding]] (''%%<html|HTML>%%'' and ''%%<php|PHP>%%''). 
-> Adding anything to the configuration options is a bad idea, as it would make the syntax different in every installation and could potentially break many things (other plugins, for example). (Although it would be beneficial for internationalization.) 
-> I updated the code to use ''%%<block>%%'' and ''%%<div>%%'' additionally to ''%%<WRAP>%%'' and ''%%<inline>%%'' and ''%%<span>%%'' additionally to ''%%<wrap>%%''. (Using ''%%<box>%%'' would conflict with the [[box|box plugin]] which is quite popular.) It will be in the next release (coming soon). --- [[user>ach]] //2010/11/20 17:03// 
- 
-==== Picker images==== 
-Some PNGs are not present in the picker. In folder images/note/16 "tb_" should be deleted in the filenames. 
- 
-> There are no and have never been any images with "tb_". Could it be someone (e.g. from your team?) renamed them deliberately to remove them from the picker?  --- [[user>ach]] //2010/11/20 17:00// 
- 
-==== This plugin doesn't produce anything ==== 
- 
-:!: //20/01/2011// : This plugin doesn't produce anything, either on this page or on my installation with the very latest Dokuwiki version. 
-> This plugin is not installed on dokuwiki.org, so wouldn't work on this page. Did you have a look at the [[faq:pluginproblems|FAQ on plugin problems]]? 
->> Thanks for your answer. Well, I tried what's suggested over there, installing through the manager, various methods to force a page refresh, etc, still nogo. Not sure if there is a way to debug or log the failure ? 
->>> Hmm, this is weird, especially since the plugin is a really simple one. You could start by defining what "doesn't produce anything" means? E.g. if you write ''%%<WRAP tip>test</WRAP>%%'' what do you see? 
->>> a) "%%<WRAP tip>test</WRAP>%%" 
->>> b) "test" (unstyled) 
->>> c) nothing at all 
->>>> Don´t forget to set the class! In this case %%<WRAP **tip**>test</WRAP>%% --- Peter 
->>>>>It worked when I deleted  the contents of <dokuwiki>/data/cache/ ,I think it's the solution --Zhe 
- 
-==== Shorter code for empty div?  ==== 
- 
-It would be nice if there could be a shorter code for empty divs like  %%<WRAP clear></WRAP>%% → %%<WRAP clear />%%  
- 
-> Good idea. But this has not a very high priority for me. If someone sends a patch, I will implement it. --- [[user>ach|Anika Henke]] //2011/05/02 20:50// 
->> To better keep track of things, I just [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/9|added this request to the bugtracker]]. --- [[user>ach|Anika Henke]] //2011/05/29 13:44// 
- 
-==== CSS unwanted behaviour in IE ==== 
-The following CSS statement leads to different behaviour between firefox and internet explorer: 
-<code css>/* tables in columns and boxes should span the whole width */ 
-.dokuwiki .plugin_wrap table { 
-    width: 100%; 
-}</code> 
- 
-If you create boxes like this one: 
- 
-<code wiki> 
-<WRAP column> 
-//**Headline**// 
-^Column 1 Row 1 |Column 2 Row 1  |  
-^Column 1 Row 2 |Column 2 Row 2  |  
-^Column 1 Row 3 |Column 2 Row 3  |  
-^Column 1 Row 4 |Column 2 Row 4  |  
-^Column 1 Row 5 |Column 2 Row 5  |  
-</WRAP> 
-</code> 
- 
-firefox will display a box as large as needed by the content of the box. Internet explorer (tested with version 7) displays a box with 100% page width. 
- 
-IMHO table width: 100% is only needed if a fixed size is given. May a class wrap_fixsize should be added to wraps that include size information. 
- 
-<code css>/* tables in columns and boxes should span the whole width */ 
-.dokuwiki .plugin_wrap .wrap_fixsize table { 
-    width: 100%; 
-}</code> 
- 
-and modified helper.php 
-<code php> 
-            //get width 
-            if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|pc|cm|mm|in)$/', $token)) { 
-                $attr['width'] = $token; 
-                $attr['class'] = (isset($attr['class']) ? $attr['class'].' ' : '')."wrap_fixsize"; 
-                continue; 
-            } 
-</code> 
- 
-greetz\\ 
-Frank 
- 
-> I couldn't reproduce this in any IE (tested in IE9, IE8 and IE7). The width in IE7 is much bigger, but not 100% of the page. Maybe it depends on additional styling in your template? I would also only use ''%%<WRAP column>%%'' together with a **width** as it makes less sense to use it otherwise. --- [[user>ach|Anika Henke]] //2012/08/19 11:36// 
-==== ID attribute ==== 
- 
-A quick modification to be able to add an ID to a box (I use it to make empty <div> that are processed by javascript). 
- 
-In helpher.php#getAttributes 
-<code php> 
-            //get id 
-            if (preg_match('/#([A-Za-z0-9_-]+)/', $token)) { 
-                $attr['id'] = trim($token,'#'); 
-                continue; 
-            } 
-</code> 
-In helper.php#buildAttributes 
-<code php> 
-            if($attr['id']) $out .= ' id="'.hsc($attr['id']).'"'; 
-</code> 
- 
-And then you can use <html><div #test></div></html>. 
- 
-> Thanks for this. I just implemented it, so it will be part of the next release. --- [[user>ach|Anika Henke]] //2012/08/19 12:58// 
-==== Just to let you know  == 
- 
-Your's is ALWAYS the first plugin I install on a fresh DokuWiki system. Thank you SO MUCH Anika. This is a true jewel. 
- 
-Louis 
- 
-==== ODT Support? ==== 
- 
-This is a wonderful plugin.  The icing on the cake would be ODT support.  Is that a possible future enhancement or is it a bridge too far?  
- 
-- Lar 
- 
-==== Not working, default template in 2012-01-25 "Angua" ==== 
- 
-Great plug-in, but default template doesn't display it correctly.  Was able to view via Safari on iPad, but not in OSX in any browser.  Changed to "vector" template and all is well.  -Bruce 
- 
-> I am not aware of any issues with the default template. This will most likely have been due to [[faq:pluginproblems|caching issues]] and was otherwise working fine. --- [[user>ach|Anika Henke]] //2012/08/19 12:17// 
- 
-==== Printing boxes and notes ==== 
- 
-Hi, is there any possibility to print out the boxes and notes including the icon, which is shown on the screen? I use the vector template. When I open the print preview in this template, everything is ok. When using the print preview of firefox or when printing, the icons are not printed out. - [[user>Juergen Schuemmer|Juergen Schuemmer]] 
- 
-> This is basically not fixable. See [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/11#issuecomment-6721471|my reply to this issue]] in the issue tracker for a more exhaustive explanation. --- [[user>ach|Anika Henke]] //2012/08/19 12:20// 
- 
-==== CSS tabs for the Wrap plugin ==== 
- 
-I've created a new style that converts a simple <ul> list into beautiful tabs. It works great. I use it all the time on my wiki so I decided to share it with you. It's designed to play nicely with the [[template:dokuwiki|new DokuWiki template]]. Hope you'll like it :)\\ 
-And thank you Anika for this wonderful plugin ! --- [[user>Laynee|Laynee]] //2012/05/07 17:48// 
- 
-=== The markup: === 
- 
-<code> 
-<WRAP tabs> 
-  * [[Features]] 
-  * [[Manual]] 
-  * [[Plugins]] 
-  * [[Template]] 
-</WRAP> 
-</code> 
  
-=== The result: ===+===== Demo =====
  
-{{http://nsm05.casimages.com/img/2012/05/07//1205070553391460209819488.png?nolink|preview}}+You can see a demo of the plugin on [[wrap_example]].
  
-First tab is a non existing link, second is the current page, third is an existing link and fourth is an existing link hovered. 
  
-=== The CSS: ===+===== Configuration options =====
  
-Add it to your ''conf/[[devel:css#user_styles|userstyle.css]]''.+^ Option               ^ Description                                                 ^ Default value ^ 
 +|''noPrefix''          | Which (comma separated) class names should be excluded from being prefixed with "wrap_" | tabs, group | 
 +|''restrictedClasses'' | restrict usage of plugin to these (comma separated) classes | //(empty)// | 
 +|''restrictionType''   | restriction type, specifies if classes above shall be included or excluded | 0 | 
 +|''syntaxDiv''         | Which syntax should be used in the toolbar picker for block wraps? | WRAP (other choicesdiv, block) | 
 +|''syntaxSpan''        | Which syntax should be used in the toolbar picker for inline wraps? | wrap (other choices: span, inline) |
  
-<code css userstyle.css> +===== Toolbar picker =====
-/** New Tabs style for the Wrap Plugin +
- * +
- * Original tabs code : Eric Meyer +
- * Dokuwiki convertion : Laynee +
-   +
- */ +
-  +
-.wrap_tabs .li { +
-display:inline; +
-}+
  
-.wrap_tabs ul { +{{ wrap_plugin_toolbar_picker_1_.png?nolink}}
-padding: 3px 0; +
-margin-left: 0; +
-border-bottom: 1px solid __text_alt__; +
-font: bold 12px Verdana, sans-serif; +
-+
-  +
-.wrap_tabs ul li { +
-list-style: none; +
-margin: 0; +
-display: inline; +
-+
-  +
-.dokuwiki .wrap_tabs ul li a { +
-padding: 3px 0.5em; +
-margin-left: 3px; +
-border: 1px solid __text_alt__; +
-border-bottom: none; +
-background: __background_alt__; +
-text-decoration: none; +
-} +
-  +
-.dokuwiki .wrap_tabs ul a:link { color: __text__; } +
-.dokuwiki .wrap_tabs ul a:visited { color: __text__; } +
-  +
-.dokuwiki .wrap_tabs ul li a:hover { +
-color: black; +
-background: __background_neu__;+
  
-+The wrap picker in the editing toolbar adds the most common wrap syntaxes.
-  +
-#dokuwiki__content .wrap_tabs ul li span.curid a { +
-background: __background__; +
-border-bottom: 1px solid __background__; +
-font-weight: bold; +
-+
-</code>+
  
-> I like them and actually planned to do something similar for while. They will definitely go into the next release. I've also added this to the issue tracker as reminder (see https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/12).+  * "columns" creates set of half columns 
 +  * "simple centered box" creates standard box (60% wide, centered) 
 +  * "info, tip, important, alert, help, download, todo box" creates specifically themed boxes (also 60% wide, centered) 
 +  * "clear floats" creates a ''%%<WRAP clear></WRAP>%%'' 
 +  * "especially emphasised, highlighted, less significant" creates the respective marks
  
  
wiki/pluginsyntax/wrap.1357930533.txt.gz · Last modified: 2018/05/28 22:28 (external edit)