maint(docs): Add a Pattern overview page.

README.md

@@ -21,6 +21,80 @@ Mockup is the JavaScript stack of the Plone Classic UI.
     On this port our demo and documentation pages are served.
 
 
+## Mockup overview
+
+Mockup is a JavaScrip UI library which provides widgets, apps and functionality for the Plone Classic UI variant.
+It is based on Patternslib(XXX) and provides it's functionality through so-called Patterns which are initialized and get active if a triggering CSS selector is found in the DOM tree.
+For example, the related items widget is initialized on a form input field with the CSS class `pat-relateditems`.
+The configuration is done via data attributes, in case of the related items pattern it's an attribute called `data-pat-relateditems`.
+The data strucutre of the configuration can be a JSON string or CSS declaration like key-value pairs separated by a semicolon.
+Defining a JSON structure is more flexible though.
+
+Here are two examples.
+
+`pat-relateditems` configuration as JSON structure:
+```html
+<input
+    type="text"
+    class="pat-relateditems"
+    data-pat-relateditems='{
+        "selectableTypes": ["Document"],
+        "vocabularyUrl": "relateditems-test.json"
+    }'
+/>
+```
+
+`pat-relateditems` configuration as CSS declarations:
+```html
+<input
+    type="text"
+    class="pat-relateditems"
+    data-pat-relateditems="
+        selectableTypes: Document;
+        vocabularyUrl: relateditems-test.json;
+    "
+/>
+```
+
+Because of historic reasons the Mockup Pattern attributes are written in "camelCase" like the `vocabularyUrl`.
+But in order to resemble the CSS syntax new Patterns should rather separate each word with a dash, like `vocabulary-url`.
+
+
+## Mockup Patterns
+
+- [pat-autotoc](src/pat/autotoc/README.md): Automatically create a table of contents.
+- [pat-cookietrigger](src/pat/cookietrigger/README.md): Show a DOM element if browser cookies are disabled.
+- [pat-datatables](src/pat/datatables/README.md): This pattern provides the functionality from https://datatables.net/
+- [pat-formautofocus](src/pat/formautofocus/README.md): Automatically set the focus on a form input field.
+- [pat-formunloadalert](src/pat/formunloadalert/README.md): Show a warning if the user leaves an unsaved form.
+- [pat-livesearch](src/pat/livesearch/README.md): Provide Plone's live search functionality.
+- [pat-manage-portlets](src/pat/manageportlets/README.md): Used by plone.app.portlets to manage portlets.
+- [pat-markspeciallinks](src/pat/markspeciallinks/README.md): Add a special class to links in certain conditions.
+- [pat-modal](src/pat/modal/README.md): Show content in a modal.
+- [pat-navigationmarker](src/pat/navigationmarker/README.md): Add classes to the main navigation.
+- [pat-passwordstrength](src/pat/passwordstrength/README.md): Check the strength of a password.
+- [pat-preventdoublesubmit](src/pat/preventdoublesubmit/README.md): Prevent multiple submissions of the same forn.
+- [pat-querystring](src/pat/querystring/README.md): Show the querystring selection app.
+- [pat-recurrence](src/pat/recurrence/README.md): Show the recurrence widget.
+- [pat-relateditems](src/pat/relateditems/README.md): Show a widget to select related items.
+- [pat-select2](src/pat/select2/README.md): Show a widget which enhances dropdown selections with automatic suggestions, search and tagging functionality.
+- [pat-sortable](src/pat/sortable/README.md): A pattern to make listings sortable.
+- [pat-structure](src/pat/structure/README.md): Plone's folder contents app.
+- [pat-structureupdater](src/pat/structure-updater/README.md): Update title and description based on the current folder contents location.
+- [pat-textareamimetypeselector](src/pat/textareamimetypeselector/README.md): Display the mime type selection widget for textareas.
+- [pat-tinymce](src/pat/tinymce/README.md): Use the TinyMCE editor for HTML editing.
+- [pat-toggle](src/pat/toggle/README.md): A pattern to toggle classes on HTML elements.
+- [pat-toolbar](src/pat/toolbar/README.md): Render the Plone toolbar.
+- [pat-tree](src/pat/tree/README.md): Renders a navigatable tree from a data structure.
+- [pat-upload](src/pat/upload/README.md): Upload files to Plone.
+
+Deprecated patterns:
+
+- [pat-backdrop](src/pat/backdrop/README.md) (_deprecated_): Renders a dark background.
+- [pat-contentloader](src/pat/contentloader/README.md) (_deprecated_): Load remote or local content into a target.
+- [pat-texteditor](src/pat/texteditor/README.md) (_deprecated_): Show a code editor.
+
+
 ## Development
 
 You can directly develop with the 11ty based documentation / demo server by running ``make serve``.

src/pat/backdrop/README.md

@@ -5,6 +5,15 @@ title: Backdrop
 
 # Backdrop pattern.
 
+Renders a dark background.
+
+---
+**Deprecated**
+
+This pattern is deprecated. Just use plain CSS instead.
+
+---
+
 ## Configuration
 
 |     Option      |  Type   |      Default      |                  Description                   |

src/pat/contentloader/README.md

@@ -7,6 +7,13 @@ title: Content loader
 
 Load remote or local content into a target.
 
+---
+**Deprecated**
+
+Please use `pat-inject` from Patternslib instead.
+
+---
+
 ## Configuration
 
 | Option  |  Type  | Default |                                                                            Description                                                                            |

src/pat/formautofocus/README.md

@@ -5,6 +5,9 @@ title: Formautofocus
 
 # Formautofocus pattern.
 
+Automatically set the focus on a form input field.
+
+
 ## Configuration
 
 |  Option   |  Type  |                     Default                     | Description |

src/pat/formunloadalert/README.md

@@ -5,7 +5,8 @@ title: Formunloadalert
 
 # Formunloadalert pattern.
 
-PATTERN description
+Show a warning if the user leaves an unsaved form.
+
 
 ## Configuration
 

src/pat/livesearch/README.md

@@ -5,6 +5,8 @@ title: Livesearch
 
 # Livesearch pattern.
 
+Provide Plone's live search functionality.
+
 ## Configuration
 
 |   Option    |  Type   | Default |                                  Description                                  |

src/pat/markspeciallinks/README.md

@@ -5,6 +5,8 @@ title: MarkSpecialLinks
 
 # MarkSpecialLinks pattern.
 
+Add a special class to links in certain conditions.
+
 Scan all links in the container and mark external links with class if they point outside the site, or are special protocols.
 Also implements new window opening for external links.
 To disable this effect for links on a one-by-one-basis, give them a class of 'link-plain'

src/pat/modal/README.md

@@ -5,7 +5,8 @@ title: Modal
 
 # Modal
 
-This is the modal pattern.
+Show content in a modal.
+
 
 ## Basic Modal
 

src/pat/navigationmarker/README.md

@@ -5,5 +5,7 @@ title: Navigation marker
 
 # Navigation marker pattern.
 
+Add classes to the main navigation.
+
 This pattern adds `inPath` and `current` classes to the navigation to allow a different style on selected navigation items or navigation items which are in the current path.
 This is done in JavaScript, so that the navigation pattern can be cached for the whole site.

src/pat/passwordstrength/README.md

@@ -5,6 +5,9 @@ title: Password strength
 
 # Password strength pattern.
 
+Check the strength of a password.
+
+
 ## Configuration
 
 | Option |  Type  | Default |                   Description                   |

src/pat/preventdoublesubmit/README.md

@@ -5,6 +5,8 @@ title: Prevent double submit
 
 # Prevent double submit pattern.
 
+Prevent multiple submissions of the same forn.
+
 ## Configuration
 
 |     Option      |  Type  |                                        Default                                         |                                  Description                                   |

src/pat/querystring/README.md

@@ -5,6 +5,8 @@ title: Querystring
 
 # Querystring
 
+Show the querystring selection app.
+
 ## Configuration
 
 |             Option             |  Type   |                    Default                     |                                                                    Description                                                                    |

src/pat/recurrence/README.md

@@ -5,6 +5,8 @@ title: Recurrence
 
 # Recurrence pattern.
 
+Show the recurrence widget.
+
 ## Configuration
 
 |    Option     |  Type  | Default |             Description              |

src/pat/relateditems/README.md

@@ -5,7 +5,8 @@ title: Related items
 
 # Related items
 
-This is the related items pattern.
+Show a widget to select related items.
+
 
 ## Configuration
 

src/pat/select2/README.md

@@ -5,7 +5,8 @@ title: Select2
 
 # Select2 pattern.
 
-Autoselection widget.
+Show a widget which enhances dropdown selections with automatic suggestions, search and tagging functionality.
+
 
 ## Configuration
 

src/pat/sortable/README.md

@@ -5,6 +5,9 @@ title: Sortable
 
 # Sortable pattern.
 
+A pattern to make listings sortable.
+
+
 ## Configuration
 
 |   Option   |       Type       |     Default     |                                              Description                                              |

src/pat/structure-updater/README.md

@@ -5,6 +5,8 @@ title: Structure Updater
 
 # Structure updater pattern.
 
+Update title and description based on the current folder contents location.
+
 The Structure Updater pattern updates the information of the current context after a user navigated to a new folder.
 
 ## Configuration

src/pat/structure/README.md

@@ -5,6 +5,9 @@ title: Structure
 
 # Structure pattern.
 
+Plone's folder contents app.
+
+
 ## Configuration
 
 |     Option      |  Type  | Default |               Description                |

src/pat/textareamimetypeselector/README.md

@@ -5,7 +5,10 @@ title: Textarea Mimetype Selector
 
 # Textarea Mimetype Selector pattern.
 
-This pattern displays a mimetype selection widget for textareas. It switches the widget according to the selected mimetype.
+Display the mime type selection widget for textareas.
+
+This pattern displays a mimetype selection widget for textareas.
+It switches the widget according to the selected mimetype.
 
 ## widgets option Structure
 

src/pat/texteditor/README.md

@@ -5,6 +5,15 @@ title: Text Editor
 
 # Text Editor pattern.
 
+Show a code editor.
+
+---
+**Deprecated**
+
+This pattern is deprecated. Use Patternslib' pat-code-editor instead.
+
+---
+
 ## Configuration
 
 |     Option      |  Type   |          Default           |                          Description                          |

src/pat/tinymce/README.md

@@ -3,7 +3,9 @@ permalink: "pat/tinymce/"
 title: tinyMCE
 ---
 
-# tinyMCE pattern.
+# TinyMCE pattern.
+
+Use the TinyMCE editor for HTML editing.
 
 ## Configuration
 

src/pat/toggle/README.md

@@ -5,7 +5,8 @@ title: Toggle
 
 # Toggle pattern
 
-Toggles things.
+A pattern to toggle classes on HTML elements.
+
 
 ## Migration note (Plone 6)
 

src/pat/toolbar/README.md

@@ -5,6 +5,9 @@ title: Toolbar
 
 # Toolbar pattern.
 
+Render the Plone toolbar.
+
+
 ## Example
 
 ```html

src/pat/tree/README.md

@@ -5,6 +5,8 @@ title: Tree
 
 # Tree
 
+Renders a navigatable tree from a data structure.
+
 Tree pattern.
 
 ## Configuration

src/pat/upload/README.md

@@ -5,6 +5,9 @@ title: Upload
 
 # Upload pattern.
 
+Upload files to Plone.
+
+
 ## Configuration
 
 |       Option       |   Type   |                                                                                                                 Default                                                                                                                 |                                                            Description                                                            |