docs: add new api to docs

sebnitu · Aug 16, 2020 · c6fa039 · c6fa039
1 parent e6e19bc
commit c6fa039
Show file tree

Hide file tree

Showing 18 changed files with 533 additions and 288 deletions.
diff --git a/docs/_packages/drawer.md b/docs/_packages/drawer.md
@@ -689,6 +689,30 @@ drawer.close('drawer-key').then((result) => {
 });
 ```
 
+### `drawer.getDrawer(key)`
+
+Returns a drawer that matches the provided unique drawer key.
+
+**Parameters**
+
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
+
+**Returns**
+
+- `HTML object` The matching drawer element.
+
+
+```html
+<div class="drawer" data-drawer="drawer-key">...</div>
+```
+
+```js
+const el = drawer.getDrawer('drawer-key');
+
+// Returns HTML Element Object
+console.log(el);
+```
+
 ### `drawer.setTabindex`
 
 Sets the `tabindex="-1"` attribute on all drawer dialogs. This makes it possible to set focus on the dialog when opened but won't allow users to focus it using the keyboard. This is ran automatically on `drawer.init()` if the `setTabindex` option is set to `true`.
@@ -828,3 +852,75 @@ drawer.switchToDefault('drawer-key');
 <!-- Output -->
 <div class="drawer" data-drawer="drawer-key">...</div>
 ```
+
+### `drawer.stateSet()`
+
+Sets the current saved state of all drawer elements based on the values set in localStorage and updates the instance `drawer.state` object.
+
+```html
+<!-- Initial HTML -->
+<aside data-drawer="drawer-1" class="drawer is-opened">...</aside>
+<aside data-drawer="drawer-2" class="drawer is-opened">...</aside>
+```
+
+```js
+// If the current saved state in localStorage looks like this:
+// { 
+//   "drawer-1": "is-closed", 
+//   "drawer-2": "is-closed" 
+// }
+drawer.stateSet();
+```
+
+```html
+<!-- Output -->
+<aside data-drawer="drawer-1" class="drawer is-closed">...</aside>
+<aside data-drawer="drawer-2" class="drawer is-closed">...</aside>
+```
+
+### `drawer.stateSave(target)`
+
+Saves the current state of drawers to localStorage and drawer's `drawer.state` object. This is useful when state becomes out of sync or the DOM is re-rendered in a way that breaks current state.
+
+**Parameters**
+
+- `HTML Element [Object]` (Default: null) A specific target to save state. If nothing is passed, all drawers in the DOM will have their state saved.
+
+```html
+<!-- Initial HTML -->
+<aside data-drawer="drawer-1" class="drawer is-closed">...</aside>
+<aside data-drawer="drawer-2" class="drawer is-opened">...</aside>
+```
+
+```js
+// If current saved state looks like:
+console.log(drawer.state);
+// { 
+//   "drawer-1": "is-closed", 
+//   "drawer-2": "is-closed" 
+// }
+drawer.stateSave();
+
+// Result
+console.log(drawer.state);
+// { 
+//   "drawer-1": "is-closed", 
+//   "drawer-2": "is-opened" 
+// }
+```
+
+### `drawer.stateClear()`
+
+Clears the existing saved states in both localStorage and drawer's `drawer.state` object.
+
+```js
+console.log(drawer.state);
+// Returns: { 
+//   "drawer-1": "is-closed", 
+//   "drawer-2": "is-closed" 
+// }
+drawer.stateClear();
+
+console.log(drawer.state);
+// Returns: Object { }
+```
diff --git a/docs/_packages/modal.md b/docs/_packages/modal.md
@@ -665,7 +665,7 @@ modal.open('modal-key');
 
 // Run some code after promise resolves
 modal.open('modal-key').then((result) => {
-  console.log(result); // result = HTML Object || null
+  console.log(result);
 });
 ```
 
@@ -695,35 +695,33 @@ modal.close().then((result) => {
 });
 ```
 
-### `modal.setInitialState()`
+### `modal.getModal(key)`
 
-Sets the initial state of all modals. This includes removing all transitional classes, opened states and applies the closed state class. This is ran automatically on `init()` but is exposed if states need to be reset for some reason.
+Returns a modal that matches the provided unique modal key.
 
-```html
-<!-- Missing a state class... -->
-<div data-modal="[unique-id]" class="modal">...</div>
+**Parameters**
 
-<!-- Opened state... -->
-<div data-modal="[unique-id]" class="modal is-opened">...</div>
+- `key [String]` A unique key that matches the value of a modal `data-modal` attribute.
 
-<!-- Transitioning state... -->
-<div data-modal="[unique-id]" class="modal is-opening">...</div>
-<div data-modal="[unique-id]" class="modal is-closing">...</div>
+**Returns**
+
+- `HTML object` The matching modal element.
+
+
+```html
+<div class="modal is-closed" data-modal="modal-key">...</div>
 ```
+
 ```js
-modal.setInitialState();
-```
-```html
-<!-- Output -->
-<div data-modal="[unique-id]" class="modal is-closed"></div>
-<div data-modal="[unique-id]" class="modal is-closed"></div>
-<div data-modal="[unique-id]" class="modal is-closed"></div>
-<div data-modal="[unique-id]" class="modal is-closed"></div>
+const el = modal.getModal('modal-key');
+
+// Returns HTML Element Object
+console.log(el);
 ```
 
 ### `modal.setTabindex()`
 
-Sets the `tabindex="-1"` attribute on all modal dialogs. This makes it possible to set focus on the dialog when opened but won't allow users to focus it using the keyboard. This is ran automatically on `init()` if `setTabindex` is set to `true`.
+Sets the `tabindex="-1"` attribute on all modal dialogs. This makes it possible to set focus on the dialog when opened but won't allow users to focus it using the keyboard. This is ran automatically on `modal.init()` if the `setTabindex` option is set to `true`.
 
 ```html
 <!-- Initial HTML -->
@@ -747,14 +745,40 @@ modal.setTabindex();
 </div>
 ```
 
-### `modal.moveModals(selector, location)`
+### `modal.setInitialState()`
+
+Sets the initial state of all modals. This includes removing all transitional classes, opened states and applies the closed state class. This is ran automatically on `modal.init()` but is exposed if states need to be reset for some reason.
+
+```html
+<!-- Missing a state class... -->
+<div data-modal="[unique-id]" class="modal">...</div>
+
+<!-- Opened state... -->
+<div data-modal="[unique-id]" class="modal is-opened">...</div>
+
+<!-- Transitioning state... -->
+<div data-modal="[unique-id]" class="modal is-opening">...</div>
+<div data-modal="[unique-id]" class="modal is-closing">...</div>
+```
+```js
+modal.setInitialState();
+```
+```html
+<!-- Output -->
+<div data-modal="[unique-id]" class="modal is-closed"></div>
+<div data-modal="[unique-id]" class="modal is-closed"></div>
+<div data-modal="[unique-id]" class="modal is-closed"></div>
+<div data-modal="[unique-id]" class="modal is-closed"></div>
+```
+
+### `modal.moveModals(ref, type)`
 
 Moves all modals to a location in the DOM relative to the passed selector and location reference.
 
 **Parameters**
 
-- `selector [String]` The selector that modals should be moved relative to.
-- `location [String]` The location to move modals relative to the selector. Options include `after`, `before`, `append` and `prepend`.
+- `ref [String]` The reference selector that modals should be moved relative to.
+- `type [String]` The move type to move modals relative to the reference selector. Options include `after`, `before`, `append` and `prepend`.
 
 ```html
 <!-- Initial HTML -->