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