plugin:wrap
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:wrap [2023-10-18 12:26] – 193.48.117.200 | plugin:wrap [2024-03-07 08:53] (current) – [Demo] 223.70.253.246 | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | cc | + | ====== Wrap Plugin ====== |
+ | |||
+ | ---- plugin ---- | ||
+ | description: | ||
+ | author | ||
+ | email : anika@selfthinker.org | ||
+ | type : syntax, action, helper | ||
+ | lastupdate : 2023-08-13 | ||
+ | compatible : !Greebo, Hogfather, Igor, Jack Jackrum | ||
+ | depends | ||
+ | conflicts | ||
+ | similar | ||
+ | tags : anchor, annotations, | ||
+ | |||
+ | downloadurl: | ||
+ | bugtracker : https:// | ||
+ | sourcerepo : https:// | ||
+ | donationurl: | ||
+ | ---- | ||
+ | |||
+ | |||
+ | ===== One plugin to rule them all ===== | ||
+ | |||
+ | This plugin gives you the ability to wrap wiki text inside containers (divs or spans) and give them | ||
+ | - a certain class (with loads of useful preset classes) | ||
+ | - a width | ||
+ | - a language with its associated text direction | ||
+ | |||
+ | It potentially replaces a lot of other plugins and is IMHO the better alternative for many. | ||
+ | |||
+ | It fully replaces: [[class]], [[clearfloat]], | ||
+ | |||
+ | It partly replaces: [[box]], [[button]], [[color]], [[columns]], | ||
+ | |||
+ | |||
+ | ===== Installation ===== | ||
+ | |||
+ | Search and install the plugin using the [[plugin: | ||
+ | |||
+ | ===== Syntax ===== | ||
+ | |||
+ | Basic Syntax: | ||
+ | <WRAP classes #id width : | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | **or** | ||
+ | <block classes #id width : | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | or | ||
+ | <div classes #id width : | ||
+ | " | ||
+ | </ | ||
+ | An uppercase **%%< | ||
+ | |||
+ | <wrap classes #id width : | ||
+ | |||
+ | or | ||
+ | <inline classes #id width : | ||
+ | |||
+ | or | ||
+ | <span classes #id width : | ||
+ | A lowercase **%%< | ||
+ | |||
+ | Since version 2013-06-13 there is also a shorthand syntax (for wraps without content): | ||
+ | |||
+ | <WRAP classes #id /> or <block classes #id /> or <div classes #id /> | ||
+ | |||
+ | and | ||
+ | |||
+ | <wrap classes #id /> or <inline classes #id /> or <span classes #id /> | ||
+ | |||
+ | :!: Please note, some things **won' | ||
+ | |||
+ | ==== Examples ==== | ||
+ | |||
+ | The plugin comes with an example page, which should explain a lot and looks like this in the default template (see below). | ||
+ | |||
+ | ==== Classes ==== | ||
+ | |||
+ | The following classes are currently available: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | ^ class name ^ description/ | ||
+ | ^ __columns__ -- similar to [[columns]], | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | ^ __widths__ -- :!: **experimental**, | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | ^ __alignments__ -- similar to [[divalign]], | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | ^ __boxes and notes__ -- similar to [[box]], [[note]], [[tip]] | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | ^ __marks__ -- similar to [[emphasis]], | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | ^ __miscellaneous__ | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | | **'' | ||
+ | |||
+ | === Known restrictions === | ||
+ | |||
+ | * WRAPs export to ODT format but not everything works 100% | ||
+ | * Round corners only work in modern browsers (no IE8 and below). | ||
+ | * Multiple columns only work in modern browsers (no IE9 and below). | ||
+ | * Width classes are experimental and only work in modern browsers (no IE8 and below). | ||
+ | * 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. It was deprecated in version 2018-04-22 and disabled by default. They can be enabled by using the '' | ||
+ | * %%//**__Big Underlined Headline__**// | ||
+ | * %%//**Small Headline**// | ||
+ | * do not include ~~DISCUSSION~~ within a WRAP noprint block | ||
+ | |||
+ | You might need to adjust a few of the classes to your template' | ||
+ | |||
+ | The classes are easily adjustable and extensible. Any wishes are welcome. | ||
+ | |||
+ | ==== Widths ==== | ||
+ | |||
+ | You can set any valid widths on any uppercase %%< | ||
+ | <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 '' | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <WRAP half column> | ||
+ | </ | ||
+ | will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices. | ||
+ | |||
+ | |||
+ | ==== Anchor ==== | ||
+ | |||
+ | To define an anchor, the following syntax applies: | ||
+ | <wrap #ankername /> | ||
+ | |||
+ | The anchor is accessible via: ''# | ||
+ | |||
+ | ==== Languages and Text Directions ==== | ||
+ | |||
+ | You can change the language and the direction of a container by simply adding a colon followed by the language code, like this: | ||
+ | |||
+ | <wrap :en>This text is explicitly marked as English.</ | ||
+ | |||
+ | The text direction ('' | ||
+ | |||
+ | If you like to mark a text with a different text direction than the default one, you should use divs, i.e. uppercase '' | ||
+ | |||
+ | This makes it a better replacement of [[ltr]] (and [[lang]]). | ||
+ | |||
+ | ===== Demo ===== | ||
+ | |||
+ | You can see a demo of the plugin on [[http:// | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | [[http:// | ||
+ | ===== Configuration options ===== | ||
+ | |||
+ | ^ Option | ||
+ | |'' | ||
+ | |'' | ||
+ | |'' | ||
+ | |'' | ||
+ | |'' | ||
+ | |'' | ||
+ | |'' | ||
+ | |||
+ | ===== ODT Support ===== | ||
+ | |||
+ | FIXME There have been more updates to the Wrap as well as the ODT plugin, so more stuff works. The below should be updated with what works and what doesn' | ||
+ | |||
+ | Since version 2015-06-13 the Wrap plugin supports exporting most of its functionality/ | ||
+ | |||
+ | * add wrap to the ' | ||
+ | * set the ' | ||
+ | |||
+ | If you prefer a user defined CSS style for the Wrap ODT export, then simply place a file ' | ||
+ | |||
+ | Here is what is currently **not** supported: | ||
+ | |||
+ | * columns: left/ | ||
+ | * widths are not supported except % and half/ | ||
+ | * boxes and notes: hardly any formatting inside them is supported, therefore emulated headings also don't work | ||
+ | * tabs will just show a list of links | ||
+ | * noprint | ||
+ | * nopagebreak | ||
+ | * onlyprint only works on boxes | ||
+ | * languages are set correctly but do not seem to affect text alignment | ||
+ | * shorthand syntax | ||
+ | * Not supported because not relevant in ODT: clear, prewrap | ||
+ | |||
+ | ===== Toolbar picker ===== | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | The wrap picker in the editing toolbar adds the most common wrap syntaxes. | ||
+ | |||
+ | * " | ||
+ | * " | ||
+ | * "info, tip, important, alert, help, download, todo box" creates specifically themed boxes (also 60% wide, centered) | ||
+ | * "clear floats" | ||
+ | * " | ||
+ | |||
+ | ===== 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 "'' | ||
+ | |||
+ | E.g. if you need a '' | ||
+ | |||
+ | User permissions for every file used must be similar to original DokuWiki files. | ||
+ | |||
+ | |||
+ | Since version 2010-03-14 you have the possibility to exclude certain class names from being prefixed with " | ||
+ | |||
+ | ==== Examples ==== | ||
+ | |||
+ | in userall.css: | ||
+ | |||
+ | <code css> | ||
+ | .dokuwiki div.wrap_note{ /* added */ | ||
+ | background-color: | ||
+ | color: #000; | ||
+ | padding: .5em .5em .5em .5em; | ||
+ | margin-bottom: | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | call in DW-page: | ||
+ | <WRAP note> | ||
+ | |||
+ | Here are some [[plugin: | ||
+ | ==== 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. Or you can use your own and 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 = plugin_load(' | ||
+ | $attr = $wrap-> | ||
+ | if($attr[' | ||
+ | } | ||
+ | |||
+ | // add lang to your plugin' | ||
+ | $renderer-> | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ==== Example how to get all attributes ==== | ||
+ | |||
+ | <code php> | ||
+ | // get attributes from wrap helper plugin | ||
+ | $attr = ''; | ||
+ | if(!plugin_isdisabled(' | ||
+ | $wrap = plugin_load(' | ||
+ | $attr = $wrap-> | ||
+ | } | ||
+ | |||
+ | // add those attributes to your plugin' | ||
+ | $renderer-> | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | |||
+ | ===== Development ===== | ||
+ | |||
+ | ==== Done ==== | ||
+ | |||
+ | [[https:// | ||
+ | {{rss> | ||
+ | |||
+ | ==== Localization ==== | ||
+ | |||
+ | You can help me with translations and [[https:// | ||
+ | |||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | ===== Credits ===== | ||
+ | |||
+ | * The code reuses parts of the [[box]] plugin by [[chris@jalakai.co.uk|Christopher Smith]]. | ||
+ | * The ODT support was implemented by [[https:// | ||
+ | * The images for the notes are taken from the [[http:// | ||
+ | * The toolbar uses images from the [[http:// | ||
+ | * Thanks to [[https:// | ||
+ | |||
+ | ===== See also ===== | ||
+ | |||
+ | * [[.: | ||
+ | * [[.wrap: | ||
+ | |||
+ | ===== Discussion ===== | ||
+ | |||
+ | Before reporting any issues (bugs or requests), please first take a look at the [[faq: | ||
+ | |||
+ | You can report any issues either on the [[https:// | ||
+ | |||
+ | Not understand how works " | ||
+ | |||
+ | |||
+ | Example how to add new button into the picker: [[http:// | ||
+ | This patch adds button for ''< | ||
+ | |||
+ | |||
+ | Is it possible to edit the selection in the ' |
plugin/wrap.1697624815.txt.gz · Last modified: 2023-10-18 12:26 by 193.48.117.200