X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/76d02cd4725633c87c7885a319411a0671e814ae..refs/pull/2238/head:/dev/docs/components.md

diff --git a/dev/docs/components.md b/dev/docs/components.md
index 2f59ae344..832765dd6 100644
--- a/dev/docs/components.md
+++ b/dev/docs/components.md
@@ -1,16 +1,22 @@
 # JavaScript Components
 
-This document details the format for JavaScript components in BookStack.
+This document details the format for JavaScript components in BookStack. This is a really simple class-based setup with a few helpers provided.
 
 #### Defining a Component in JS
 
 ```js
 class Dropdown {
     setup() {
+        this.toggle = this.$refs.toggle;
+        this.menu = this.$refs.menu;
+    
+        this.speed = parseInt(this.$opts.speed);
     }
 }
 ```
 
+All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen.
+
 #### Using a Component in HTML
 
 A component is used like so:
@@ -53,4 +59,41 @@ Will result with `this.$opts` being:
     "delay": "500",
     "show": ""  
 }
+```
+
+#### Global Helpers
+
+There are various global helper libraries which can be used in components:
+
+```js
+// HTTP service
+window.$http.get(url, params);
+window.$http.post(url, data);
+window.$http.put(url, data);
+window.$http.delete(url, data);
+window.$http.patch(url, data);
+
+// Global event system
+// Emit a global event
+window.$events.emit(eventName, eventData);
+// Listen to a global event
+window.$events.listen(eventName, callback);
+// Show a success message
+window.$events.success(message);
+// Show an error message
+window.$events.error(message);
+// Show validation errors, if existing, as an error notification
+window.$events.showValidationErrors(error);
+
+// Translator
+// Take the given plural text and count to decide on what plural option
+// to use, Similar to laravel's trans_choice function but instead
+// takes the direction directly instead of a translation key.
+window.trans_plural(translationString, count, replacements);
+
+// Component System
+// Parse and initialise any components from the given root el down.
+window.components.init(rootEl);
+// Get the first active component of the given name
+window.components.first(name);
 ```
\ No newline at end of file