PDF: Added tests for pdf command, fixed old tests for changes

[bookstack] / dev / docs / javascript-code.md

diff --git a/dev/docs/javascript-code.md b/dev/docs/javascript-code.md
index 3d47a1ad8a240e6fe9c1fc48826809018807856a..ba7d799724896700b53b70e4172697971a995c1c 100644 (file)
--- a/dev/docs/javascript-code.md
+++ b/dev/docs/javascript-code.md
@@ -24,7 +24,7 @@ class Dropdown {
 
 All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen.
 
 
 All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen.
 

-Once defined, the component has to be registered for use. This is done in the `resources/js/components/index.js` file. You'll need to import the component class then add it to `componentMapping` object, following the pattern of other components. 
+Once defined, the component has to be registered for use. This is done in the `resources/js/components/index.js` file by defining an additional export, following the pattern of other components. 

 
 ### Using a Component in HTML
 
 
 ### Using a Component in HTML
 


@@ -80,24 +80,33 @@ Will result with `this.$opts` being:
 }
 ```
 
 }
 ```
 

-#### Component Properties
+#### Component Properties & Methods

 
 

-A component has the below shown properties available for use. As mentioned above, most of these should be used within the `setup()` function to make the requirements/dependencies of the component clear.
+A component has the below shown properties & methods available for use. As mentioned above, most of these should be used within the `setup()` function to make the requirements/dependencies of the component clear.

 
 ```javascript
 
 ```javascript

-// The root element that the compontent has been applied to.
+// The root element that the component has been applied to.

 this.$el
 
 this.$el
 

-// A map of defined element references within the compontent.
+// A map of defined element references within the component.

 // See "Element References" above.
 this.$refs
 
 // See "Element References" above.
 this.$refs
 

-// A map of defined multi-element references within the compontent.
+// A map of defined multi-element references within the component.

 // See "Element References" above.
 this.$manyRefs
 
 // See "Element References" above.
 this.$manyRefs
 

-// Options defined for the compontent.
+// Options defined for the component.

 this.$opts
 this.$opts

+
+// The registered name of the component, usually kebab-case.
+this.$name
+
+// Emit a custom event from this component.
+// Will be bubbled up from the dom element this is registered on, 
+// as a custom event with the name `<elementName>-<eventName>`,
+// with the provided data in the event detail.
+this.$emit(eventName, data = {})

 ```
 
 ## Global JavaScript Helpers
 ```
 
 ## Global JavaScript Helpers


@@ -106,6 +115,7 @@ There are various global helper libraries in BookStack which can be accessed via
 
 ```js
 // HTTP service
 
 ```js
 // HTTP service

+// Relative URLs will be resolved against the instance BASE_URL

 window.$http.get(url, params);
 window.$http.post(url, data);
 window.$http.put(url, data);
 window.$http.get(url, params);
 window.$http.post(url, data);
 window.$http.put(url, data);


@@ -132,7 +142,22 @@ window.trans_plural(translationString, count, replacements);
 
 // Component System
 // Parse and initialise any components from the given root el down.
 
 // 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
+window.$components.init(rootEl);
+// Register component models to be used by the component system.
+// Takes a mapping of classes/constructors keyed by component names.
+// Names will be converted to kebab-case.
+window.$components.register(mapping);
+// Get the first active component of the given name.
+window.$components.first(name);
+// Get all the active components of the given name. 
+window.$components.get(name);
+// Get the first active component of the given name that's been
+// created on the given element.
+window.$components.firstOnElement(element, name);
+```
+
+## Public Events
+
+There are a range of available events that are emitted as part of a public & supported API for accessing or extending JavaScript libraries & components used in the system.
+
+Details on these events can be found in the [JavaScript Public Events file](javascript-public-events.md).