Modular component scripts

README.md

@@ -45,7 +45,7 @@ If you'd like to use Vrembem for prototyping or just want to take it for a test
 
 <!-- Instantiate the component rendered in the document -->
 <script>
-  const modal = vrembem.Modal();
+  const modal = new vrembem.Modal();
   modal.init();
 </script>
 ```
@@ -122,8 +122,8 @@ Include the component's markup into your project. Use the [online docs](https://
 
 ```html
 <button data-modal-open="[unique-id]">Modal</button>
-<div class="modal" data-modal="[unique-id]">
-  <div class="modal__dialog">
+<div data-modal="[unique-id]" class="modal">
+  <div data-modal-dialog class="modal__dialog">
     <button data-modal-close>Close</button>
     ...
   </div>

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 { }
+```

docs/_packages/modal.md

@@ -200,8 +200,8 @@ const modal = new Modal({
   autoInit: true,
   selectorInert: '[role="main"]',
   moveModals: {
-     selector: '[role="main"]',
-     location: 'after'
+     ref: '[role="main"]',
+     type: 'after'
   }
 });
 ```
@@ -587,11 +587,11 @@ Adjusts the size of modals. This modifier provides two options, `modal_size_sm`
       <td data-mobile-label="Key"><code class="code text-nowrap">moveModals</code></td>
       <td data-mobile-label="Default">
         <pre class="code color-secondary">{ 
-  selector: null,
-  location: null
+  ref: null,
+  type: null
 }</pre>
       </td>
-      <td data-mobile-label="Desc">Moves all modals to a location in the DOM relative to the passed selector on <code class="code">init()</code>. Location options include <code class="code">after</code>, <code class="code">before</code>, <code class="code">append</code> and <code class="code">prepend</code>.</td>
+      <td data-mobile-label="Desc">Moves all modals to a location in the DOM relative to the passed reference selector on <code class="code">init()</code>. Move type options include <code class="code">after</code>, <code class="code">before</code>, <code class="code">append</code> and <code class="code">prepend</code>.</td>
     </tr>
     <tr>
       <td data-mobile-label="Key"><code class="code text-nowrap">setTabindex</code></td>
@@ -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 -->

docs/_packages/vrembem.md

@@ -56,7 +56,7 @@ Include the component's markup into your project. Use the [online documentation]
 ```html
 <div class="drawer__wrapper">
   <aside data-drawer="[unique-id]" class="drawer">
-    <div class="drawer__item">
+    <div data-drawer-dialog class="drawer__dialog">
       <button data-drawer-close>...</button>
     </div>
   </aside>