<commit_before># Modal System

We have a centralized modal architecture. In other words, We only have 1 main dynamic modal that changes its content based on the current open modal by using `:is` Vue feature.

Then we can easily open/close any modal from anywhere in the app using `sbp()`.

Let's see a real example working: **the Login modal**:

### The Modal content
Each modal should be composed by the following components so we keep consistence in the spacers and text across the different modals.

- `<modal-header>`
- `<modal-body>`
- `<modal-footer>`

You can check how Login is done at `containers/LoginModal.vue`.

### How to open a modal

From anywhere in the App we can open any modal by using the `sbp` event `OPEN_MODAL` with the Vue Component that contains the modal Content

```html
<!-- NavBar.vue -->
<template>
  <button @click="openLoginModal">Sign up</button>
</template>

<script>
import LoginModal from './LoginModal.vue'
import sbp from '../../../../shared/sbp.js'

openLoginModal () {
  sbp('okTurtles.events/emit', OPEN_MODAL, LoginModal)
}
</script>
```

### How to close a modal
In the same way we can also close the modal by using the event `CLOSE_MODAL`:

```js
// LoginModal.vue

closeModal () {
  sbp('okTurtles.events/emit', CLOSE_MODAL)
}
```

### The `<modal-dynamic />`

The `<modal-dynamic />` is imported at `simple/index.html` at the bottom of the DOM.

Its only responsability is to import `<modal-basic />`, add its content as a dynamic component [(Know more about Vue Dynamic Components)](https://vuejs.org/v2/api/#is) and listen for `sbp` events `OPEN_MODAL` and `CLOSE_MODAL`.

---

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!<commit_msg>Update Modal/README.md to add OPEN_MODAL to code example<commit_after># Modal System

We have a centralized modal architecture. In other words, We only have 1 main dynamic modal that changes its content based on the current open modal by using `:is` Vue feature.

Then we can easily open/close any modal from anywhere in the app using `sbp()`.

Let's see a real example working: **the Login modal**:

### The Modal content
Each modal should be composed by the following components so we keep consistence in the spacers and text across the different modals.

- `<modal-header>`
- `<modal-body>`
- `<modal-footer>`

You can check how Login is done at `containers/LoginModal.vue`.

### How to open a modal

From anywhere in the App we can open any modal by using the `sbp` event `OPEN_MODAL` with the Vue Component that contains the modal Content

```html
<!-- NavBar.vue -->
<template>
  <button @click="openLoginModal">Sign up</button>
</template>

<script>
import LoginModal from './LoginModal.vue'
import sbp from '../../../../shared/sbp.js'
import { OPEN_MODAL } from '../../utils/events.js'

openLoginModal () {
  sbp('okTurtles.events/emit', OPEN_MODAL, LoginModal)
}
</script>
```

### How to close a modal
In the same way we can also close the modal by using the event `CLOSE_MODAL`:

```js
// LoginModal.vue

closeModal () {
  sbp('okTurtles.events/emit', CLOSE_MODAL)
}
```

### The `<modal-dynamic />`

The `<modal-dynamic />` is imported at `simple/index.html` at the bottom of the DOM.

Its only responsability is to import `<modal-basic />`, add its content as a dynamic component [(Know more about Vue Dynamic Components)](https://vuejs.org/v2/api/#is) and listen for `sbp` events `OPEN_MODAL` and `CLOSE_MODAL`.

---

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!
{'fraction_non_alphanumeric': 0.11801242236024845, 'fraction_numerical': 0.001129305477131564, 'mean_word_length': 4.061428571428571, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7550899', 'n_tokens_mistral': 1101, 'n_tokens_neox': 1063, 'n_words': 464}