1====== dirtylittlehelper Plugin ====== 2 3---- plugin ---- 4description: 5author : KalleAPunkt 6email : dokuwiki@kallearsch.de 7type : 8lastupdate : 2021-05-11 9compatible : Hogfather 10depends : bureaucracy, struct 11conflicts : 12similar : 13tags : 14 15downloadurl: https://github.com/KalleAPunkt/Dokuwiki-DirtyLittleHelper/archive/refs/heads/master.zip 16bugtracker : 17sourcerepo : https://github.com/KalleAPunkt/Dokuwiki-DirtyLittleHelper 18donationurl: 19 20screenshot_img : https://raw.githubusercontent.com/KalleAPunkt/Dokuwiki-DirtyLittleHelper/master/images/dlh_screenshot.png 21---- 22 23 24===== Note ===== 25 26:!: **only admins** can use all things this plugin provides (editor, topbar are for admins only!) 27 28:!: This plugin is tested (and used) with the dokuwiki **release 2020-07-29 "Hogfather"** and the standard template. 29 30---- 31 32===== Installation ===== 33 34:!: **External requirements:** This plugin requires the following additional components that must be installed separately: 35 * [[struct]] (needed for autocomplete search in editor and topbar) 36 * [[bureaucracy]] (needed for autocomplete search in editor and topbar) 37 * [[svgembed]] (optional - dlh ships a nice button for the editor) 38 39Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually. 40 41---- 42 43===== THANK YOU ===== 44@turnermm: [[https://github.com/turnermm/Dokuwiki-Nav-Overlay|overlay plugin]] - the base I began with \\ 45@samfisch: [[https://github.com/samfisch/dokuwiki-template-dokubook|dokubook template]] - here I found the tree \\ 46@lisps: [[https://github.com/lisps/plugin-linksuggest/|linksuggest plugin]] - yes, I copied it \\ 47@giterlizzi [[https://github.com/giterlizzi/dokuwiki-template-bootstrap3|bootstrap3 template]] - there I found the inspiration for the admin menu \\ 48@jakob1111 [[https://github.com/jakob1111/dokuwiki-plugin-flowcharts/|flowcharts plugin]] - the base for mermaid integration \\ 49@mermaid-js [[https://github.com/mermaid-js/mermaid-live-editor|mermaid-live-editor]] - the mermaid live editor \\ 50 51 52---- 53 54 55===== Why? / History ===== 56I wanted a better way for inserting wiki-internal-links in the editor. After some searching and probing I found the way that fits best for me: with "bureaucracy" and "struct" plugin you can build nice lookups for namespaces... 57 58Then I took the "overlay" plugin and modified it for my needs. After a while I thought that it would be cool not to click on a button to have the search input and the insert button. 59 60Some jQuery later: it works. After the editor ist opened the dlh-page is loaded in the overlay, then the elements are transferred in a new line under the toolbar in the editor. The overlay is not shown anymore - but it's still there. 61 62Building and integrating flow-charts with mermaid: integrated. And dlh ships a mermaid live editor (the first chart in the wiki-editor is now transferred to the live editor; the rest: copy and paste). 63 64And i needed / wanted a quick-admin-menu -> added (inspired by bootstrap3 template) 65 66And sometimes the wiki should be wider - especially when editing and with "advanced config" plugin - done ...that means that after install of this plugin your wiki can look a bit different (thats life). 67 68Then i thought it would be nice to have a tree on the left side like "dokubook" template -> added syntax for the tree. 69 70The tree on the left is not always needed - added syntax for "no sidebar"... 71 72I like comments -> syntax added 73 74right now it works fine... 75 76 77---- 78 79===== what can dlh do four you? (syntax and more) ===== 80 81 82==== main feature - page-search in the editor ==== 83 84== you need: == 85[[https://www.dokuwiki.org/plugin:bureaucracy|bureaucracy-plugin]] \\ 86[[https://www.dokuwiki.org/plugin:struct|struct-plugin]] \\ 87 88== let's go == 89 90 * install the both plugins 91 * create a struct-scheme 92 * create at least one field in this scheme 93 * typ "page" 94 * config "usetitles" > thats better 95 * config "autocomplete" - "namespace" > put your namespace here 96 * create the dokuwiki page that is configured "plugin»dirtylittlehelper»page" 97 98<code> 99~~NOCACHE~~ 100~~NOTOC~~ 101=== DLH === 102<form> 103action script dummy.php 104struct_field "scheme_name.field_name_1" ! 105struct_field "scheme_name.field_name_2" ! 106</form> 107</code> 108 109 * open the editor and smile 110 111---- 112 113==== wiki-editor ==== 114 115in the config you can switch several buttons on and off.\\ 116a button for maximizing the editor (and auto maximize)\\ 117buttons for inserting code tags for several languages\\ 118buttons for mermaid (look a bit down)\\ 119buttons for svg-image (needs [[https://www.dokuwiki.org/plugin:svgembed|svgEmbed Plugin]] )\\ 120input and buttons for dlhID (look [[#dlhID]]) 121 122 123---- 124 125==== dlh tree ==== 126 127<code> <dlh.tree> </code> 128put it in your sidebar page and be happy \\ 129if there would be several trees -> only the first one is displayed 130 131<code> <dlh.notree> </code> 132no tree will be rendered 133 134<code> <dlh.forcetree> </code> 135only this tree will be rendered (overrides ''%%<dlh.notree>%%'') 136works only once 137 138---- 139 140==== sidebar ==== 141<code> <dlh.nosb> </code> 142The sidebar will not be shown (css) - beware that the sidebar / tree will be generated. 143 144<code> <dlh.togglesb> </code> 145there will be a button at the top left of the sidebar to toggle it 146with 147 148<code> <dlh.hidesb> </code> 149you can hide the sidebar 150 151---- 152 153==== mermaid ==== 154<code> 155<dlh.mm> 156graph LR 157DOKUWIKI----DLH 158</dlh.mm> 159</code> 160When you click the mermaid live editor you can follow the links to syntax etc. 161 162---- 163 164==== comments ==== 165<code> 166<dlh.*> this one line comment will only be seen in the editor / pagesource </dlh.*> 167 168<dlh.*> 169this 170multi 171line 172comment will also only be seen in the editor / pagesource 173</dlh.*> 174</code> 175 176---- 177 178==== div ==== 179 180<code> <dlh.div.html[ id="" class="" style=""...]> Your html content </dlh.div.html></code> 181will build a html div like ''%%<html><div>Your html content</div></html>%%'' 182 183<code> <dlh.div.wiki [ id="" class="" style=""...]> **Your** WIKI __content__ </dlh.div.wiki></code> 184will build a div around your wiki code like ''%%<html><div></html>**Your** WIKI __content__ <html></div></html>%%'' 185 186---- 187 188==== table ==== 189<code> 190<dlh.table.html[ id="" class="" style=""...]> 191 <caption>your caption</caption> 192 <tr> 193 <th>tablehead a</th> 194 <th>tablehead b</th> 195 </tr> 196 <tr> 197 <td> cell with text </td> 198 <td> amnother cell </td> 199 </tr> 200<dlh.table.html> 201</code> 202 203is for pure html and like ''%% <dlh.div.wiki> %%'' you can build a table around wiki content 204 205<code> 206<dlh.table.wiki [ id="" class="" style=""...]> 207 <dlh.caption.wiki> **wiki caption content** </dlh.caption.wiki> 208 <dlh.tr.wiki> 209 <dlh.th.wiki> table head __wiki__ syntax </dlh.th.wiki> 210 <dlh.th.wiki> **another** table head __wiki__ syntax </dlh.th.wiki> 211 </dlh.tr.wiki> 212 <dlh.tr.wiki> 213 <dlh.td.wiki> call a plugin or some other cool stuff </dlh.td.wiki> 214 <dlh.td.wiki> **wiki syntax here** </dlh.td.wiki> 215 </dlh.tr.wiki> 216</dlh.table.wiki> 217 218</code> 219 220---- 221 222==== the top bar ==== 223 224you can have an additional bar at the top of your wiki. \\ 225**this is something very special I built for my needs... that's why it's a bit tricky...** 226 227the bar has several sections from left to right\\ 228 * HELPER-ICON - on mouseover the helper page is displayed 229 * template list - configured via configuration 230 * call button 231 * struct autocomplete (like the dlh page in the editor BUT only one field) 232 * pagesuggest inspired input for path to wiki id 233 * call button 234 * dlhID field 235 * renew Button for dlhID 236 237the both call buttons will open a new window with the id from the input left to the button.\\ 238A ''%%*%%'' in these inputs will be replaced with the dlhID that is in the most right input\\ 239 240=== the helper page === 241 242in the config you can define a helper page which will be displayed in the top bar **width is 600px**\\ 243here I have some useful infos and things i often need... 244 245=== template list === 246 247in the config you can define a list of templates that shall be in the dropdown. Empty config = no dropdown 248 249=== struct field === 250 251in the config define a pageid for a page that contains **ONE** autocomplete struct field\\ 252Example: 253<code> 254~~NOCACHE~~ 255~~NOTOC~~ 256<form> 257action script dummy.php 258struct_field "wiki42.all_title" ! 259</form> 260</code> 261 262ALSO 263 264<code> 265~~NOCACHE~~ 266~~NOTOC~~ 267---- struct serial ---- 268schema: wiki42 269---- 270</code> 271will work 272 273=== Menu === 274 275in the config you can define a wikiid and a label for a link that will be displayed in the menu\\ 276 277there will be two columns: 278| your link | links to admin plugin pages | 279| ?do=check |::: | 280| ?purge=true |::: | 281| ?do=export_xhtmlbody |::: | 282| ?do=export_raw |::: | 283| ACL |::: | 284| Config |::: | 285| Extension Manager |::: | 286| Revert Manager |::: | 287| Template Style Settings |::: | 288| User Manager |::: | 289 290 291---- 292 293==== dlhID ==== 294 295The dlhID is a TwoDigitSixChars ID based on the time.\\ 296The first two digits stand for the year (20=2020, 21=2021 ...)\\ 297The six letters are for the seconds since the year began.\\ 298This ID is shorter than only digits and i found that it is easier to use\\ 299 300''21fwkntf'' is 2021-05-11 15:03:05 301 302---- 303 304 305 306===== Design / css ===== 307 308dlh changes som css 309<code css> 310 311/* no footer */ 312 313 #dokuwiki__footer { 314 display: none; 315 } 316 317/* buttons not so white */ 318 button{ 319 background-color:rgba(222, 222, 222, 0.3) !important; 320 /* background-image: none !important; */ 321 } 322 323/* the page content is horizontal scrollabale */ 324 .page { 325 overflow-x: auto !important; 326 } 327 328 329/* docInfo brighter */ 330 .dokuwiki .docInfo{ 331 color: #AAAAAA; 332 } 333 334/* preview gets a border etc */ 335 .preview{ 336 border: 1px solid #777777 !important; 337 max-width: 900px; 338 resize: both; 339 overflow: auto; 340 } 341 342/* top bar no margin-bottom */ 343 #dokuwiki__header .tools { 344 margin-bottom: 0px !important; 345 } 346 347 348 349 350/* autocomplete on top */ 351.ui-autocomplete{ z-index: 99999 !important; } 352 353.textcomplete-dropdown{ z-index: 999999 !important; } 354 355/* search info wider */ 356.dokuwiki form.search div.ajax_qsearch{ 357 left: -21.5em; 358 width: 20em; 359} 360 361 362 363 364</code> 365 366---- 367 368 369 370===== beware! ===== 371This plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 372This plugin is generally made for MY personal needs. 373 374This plugin is tested with the dokuwiki **release 2020-07-29 "Hogfather"** and the standard template.\\ 375 376---- 377 378===== SORRY ===== 379 380 * for my english 381 * for errors - if you find some 382 * for everything I did the wrong way 383 384 385 386===== ToDo/Wish List ===== 387 388 * dont be dirty on mobile devices 389 * build config for design changes 390 * clean up 391