Skip to content

Commit 2118c79

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 824d470 commit 2118c79

File tree

2 files changed

+23
-24
lines changed

2 files changed

+23
-24
lines changed

‎docs/content/components/toasts.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,8 @@ We use the following JavaScript to trigger our live toast demo:
9191
const toastTrigger = document.getElementById('liveToastBtn')
9292
const toastLiveExample = document.getElementById('liveToast')
9393
if (toastTrigger) {
94-
toastTrigger.addEventListener('click', function () {
95-
var toast = new coreui.Toast(toastLiveExample)
96-
94+
toastTrigger.addEventListener('click', () => {
95+
const toast = new coreui.Toast(toastLiveExample)
9796
toast.show()
9897
})
9998
}

‎docs/content/getting-started/javascript.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ CoreUI for Bootstrap provides custom events for most plugins' unique actions. Ge
5959
All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
6060

6161
```js
62-
var myModal = document.getElementById('myModal')
62+
const myModal = document.getElementById('myModal')
6363

64-
myModal.addEventListener('show.coreui.modal', function (event) {
64+
myModal.addEventListener('show.coreui.modal', event => {
6565
if (!data) {
6666
return event.preventDefault() // stops modal from being shown
6767
}
@@ -74,7 +74,7 @@ myModal.addEventListener('show.coreui.modal', function (event) {
7474
CoreUI for Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-coreui-no-jquery` attribute set on `<body>`. If jQuery is found, CoreUI for Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to CoreUI's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
7575

7676
```js
77-
$('#myTab a').on('shown.coreui.tab', function () {
77+
$('#myTab a').on('shown.coreui.tab', () => {
7878
// do something...
7979
})
8080
```
@@ -85,10 +85,10 @@ $('#myTab a').on('shown.coreui.tab', function () {
8585
All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
8686

8787
```js
88-
var myModalEl = document.getElementById('myModal')
88+
const myModalEl = document.getElementById('myModal')
8989

90-
var modal = new coreui.Modal(myModalEl) // initialized with defaults
91-
var modal = new coreui.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
90+
const modal = new coreui.Modal(myModalEl) // initialized with defaults
91+
const modal1 = new coreui.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
9292
```
9393

9494
If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `coreui.Popover.getInstance(myPopoverEl)`.
@@ -98,8 +98,8 @@ If you'd like to get a particular plugin instance, each plugin exposes a `getIns
9898
You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
9999

100100
```js
101-
var modal = new coreui.Modal('#myModal')
102-
var dropdown = new coreui.Dropdown('[data-coreui-toggle="dropdown"]')
101+
const modal = new coreui.Modal('#myModal')
102+
const dropdown = new coreui.Dropdown('[data-coreui-toggle="dropdown"]')
103103
```
104104

105105
### Asynchronous functions and transitions
@@ -109,20 +109,20 @@ All programmatic API methods are **asynchronous** and return to the caller once
109109
In order to execute an action once the transition is complete, you can listen to the corresponding event.
110110

111111
```js
112-
var myCollapseEl = document.getElementById('myCollapse')
112+
const myCollapseEl = document.getElementById('myCollapse')
113113

114-
myCollapseEl.addEventListener('shown.coreui.collapse', function (event) {
114+
myCollapseEl.addEventListener('shown.coreui.collapse', event => {
115115
// Action to execute once the collapsible area is expanded
116116
})
117117
```
118118

119119
In addition a method call on a **transitioning component will be ignored**.
120120

121121
```js
122-
var myCarouselEl = document.getElementById('myCarousel')
123-
var carousel = coreui.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
122+
const myCarouselEl = document.getElementById('myCarousel')
123+
const carousel = coreui.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
124124

125-
myCarouselEl.addEventListener('slid.coreui.carousel', function (event) {
125+
myCarouselEl.addEventListener('slid.coreui.carousel', event => {
126126
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
127127
})
128128

@@ -144,7 +144,7 @@ coreui.Modal.Default.keyboard = false
144144
Sometimes it is necessary to use CoreUI for Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
145145

146146
```js
147-
var coreuiButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
147+
const coreuiButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
148148
$.fn.coreuiBtn = coreuiButton // give $().coreuiBtn the CoreUI for Bootstrap functionality
149149
```
150150

@@ -173,8 +173,8 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
173173
The default `allowList` value is the following:
174174

175175
```js
176-
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
177-
var DefaultAllowlist = {
176+
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
177+
const DefaultAllowlist = {
178178
// Global attributes allowed on any supplied element below.
179179
'*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
180180
a: ['target', 'href', 'title', 'rel'],
@@ -212,7 +212,7 @@ var DefaultAllowlist = {
212212
If you want to add new values to this default `allowList` you can do the following:
213213

214214
```js
215-
var myDefaultAllowList = coreui.Tooltip.Default.allowList
215+
const myDefaultAllowList = coreui.Tooltip.Default.allowList
216216

217217
// To allow table elements
218218
myDefaultAllowList.table = []
@@ -222,16 +222,16 @@ myDefaultAllowList.td = ['data-coreui-option']
222222

223223
// You can push your custom regex to validate your attributes.
224224
// Be careful about your regular expressions being too lax
225-
var myCustomRegex = /^data-my-app-[\w-]+/
225+
const myCustomRegex = /^data-my-app-[\w-]+/
226226
myDefaultAllowList['*'].push(myCustomRegex)
227227
```
228228

229229
If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
230230

231231
```js
232-
var yourTooltipEl = document.getElementById('yourTooltip')
233-
var tooltip = new coreui.Tooltip(yourTooltipEl, {
234-
sanitizeFn: function (content) {
232+
const yourTooltipEl = document.getElementById('yourTooltip')
233+
const tooltip = new coreui.Tooltip(yourTooltipEl, {
234+
sanitizeFn(content) {
235235
return DOMPurify.sanitize(content)
236236
}
237237
})

0 commit comments

Comments
 (0)