From 8ea29624679886249160c6c97662b95da51374d5 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 16 May 2019 14:05:36 +0200 Subject: [PATCH 1/4] remove jquery references in toast docs --- site/content/docs/4.3/components/toasts.md | 25 +++++++++++----------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/site/content/docs/4.3/components/toasts.md b/site/content/docs/4.3/components/toasts.md index a8c1d97847e7..ae53d9d451b5 100644 --- a/site/content/docs/4.3/components/toasts.md +++ b/site/content/docs/4.3/components/toasts.md @@ -12,7 +12,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th Things to know when using the toast plugin: -- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}). - Toasts are opt-in for performance reasons, so **you must initialize them yourself**. - **Please note that you are responsible for positioning toasts.** - Toasts will automatically hide if you do not specify `autohide: false`. @@ -220,7 +219,10 @@ When using `autohide: false`, you must add a close button to allow users to dism Initialize toasts via JavaScript: {{< highlight js >}} -$('.toast').toast(option) +var toastElList = [].slice.call(document.querySelectorAll('.toast')) +var toastList = toastElList.map(function (toastEl) { + return new bootstrap.Toast(toastEl, option) +}) {{< /highlight >}} ### Options @@ -266,28 +268,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### `$().toast(options)` - -Attaches a toast handler to an element collection. - -#### `.toast('show')` +#### show Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. -{{< highlight js >}}$('#element').toast('show'){{< /highlight >}} +{{< highlight js >}}toast.show(){{< /highlight >}} -#### `.toast('hide')` +#### hide Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. -{{< highlight js >}}$('#element').toast('hide'){{< /highlight >}} +{{< highlight js >}}toast.hide(){{< /highlight >}} -#### `.toast('dispose')` +#### dispose Hides an element's toast. Your toast will remain on the DOM but won't show anymore. -{{< highlight js >}}$('#element').toast('dispose'){{< /highlight >}} +{{< highlight js >}}toast.dispose(){{< /highlight >}} ### Events @@ -319,7 +317,8 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo {{< highlight js >}} -$('#myToast').on('hidden.bs.toast', function () { +var myToastEl = document.getElementById('myToast') +myToastEl.addEventListener('hidden.bs.toast', function () { // do something... }) {{< /highlight >}} From 1ea886a24aff76cc21a638de072c5c8826c27e32 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 16 May 2019 14:09:11 +0200 Subject: [PATCH 2/4] remove jquery references in browsers-devices docs --- .../4.3/getting-started/browsers-devices.md | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/site/content/docs/4.3/getting-started/browsers-devices.md b/site/content/docs/4.3/getting-started/browsers-devices.md index 3b6c05ee8348..891efe9f3e22 100644 --- a/site/content/docs/4.3/getting-started/browsers-devices.md +++ b/site/content/docs/4.3/getting-started/browsers-devices.md @@ -129,28 +129,6 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds. -## Android stock browser - -Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general. - -#### Select menu - -On `` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers. - -{{< highlight html >}} - -{{< /highlight >}} - -Want to see an example? [Check out this JS Bin demo](http://jsbin.com/OyaqoDO/2). - ## Validators In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com/) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement. From 631baa6dd74179386ceffccf73a994872bc2283a Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 16 May 2019 14:18:12 +0200 Subject: [PATCH 3/4] remove jquery references from tooltip docs --- site/content/docs/4.3/components/tooltips.md | 56 +++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/site/content/docs/4.3/components/tooltips.md b/site/content/docs/4.3/components/tooltips.md index 0ecf71cca2ca..adf3da03911e 100644 --- a/site/content/docs/4.3/components/tooltips.md +++ b/site/content/docs/4.3/components/tooltips.md @@ -32,8 +32,9 @@ Got all that? Great, let's see how they work with some examples. One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute: {{< highlight js >}} -$(function () { - $('[data-toggle="tooltip"]').tooltip() +var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) +var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl) }) {{< /highlight >}} @@ -88,7 +89,8 @@ The tooltip plugin generates content and markup on demand, and by default places Trigger the tooltip via JavaScript: {{< highlight js >}} -$('#example').tooltip(options) +var exampleEl = document.getElementById('example') +var tooltip = new bootstrap.Tooltip(exampleEl, options) {{< /highlight >}} {{< callout warning >}} @@ -97,7 +99,10 @@ $('#example').tooltip(options) Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`: {{< highlight js >}} -$('#example').tooltip({ boundary: 'window' }) +var exampleEl = document.getElementById('example') +var tooltip = new bootstrap.Tooltip(exampleEl, { + boundary: 'window' +}) {{< /highlight >}} {{< /callout >}} @@ -291,57 +296,53 @@ Options for individual tooltips can alternatively be specified through the use o {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### `$().tooltip(options)` - -Attaches a tooltip handler to an element collection. - -#### `.tooltip('show')` +#### show Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. -{{< highlight js >}}$('#element').tooltip('show'){{< /highlight >}} +{{< highlight js >}}tooltip.show(){{< /highlight >}} -#### `.tooltip('hide')` +#### hide Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. -{{< highlight js >}}$('#element').tooltip('hide'){{< /highlight >}} +{{< highlight js >}}tooltip.hide(){{< /highlight >}} -#### `.tooltip('toggle')` +#### toggle Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. -{{< highlight js >}}$('#element').tooltip('toggle'){{< /highlight >}} +{{< highlight js >}}tooltip.toggle(){{< /highlight >}} -#### `.tooltip('dispose')` +#### dispose Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. -{{< highlight js >}}$('#element').tooltip('dispose'){{< /highlight >}} +{{< highlight js >}}tooltip.dispose(){{< /highlight >}} -#### `.tooltip('enable')` +#### enable Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** -{{< highlight js >}}$('#element').tooltip('enable'){{< /highlight >}} +{{< highlight js >}}tooltip.enable(){{< /highlight >}} -#### `.tooltip('disable')` +#### disable Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. -{{< highlight js >}}$('#element').tooltip('disable'){{< /highlight >}} +{{< highlight js >}}tooltip.disable(){{< /highlight >}} -#### `.tooltip('toggleEnabled')` +#### toggleEnabled Toggles the ability for an element's tooltip to be shown or hidden. -{{< highlight js >}}$('#element').tooltip('toggleEnabled'){{< /highlight >}} +{{< highlight js >}}tooltip.toggleEnabled(){{< /highlight >}} -#### `.tooltip('update')` +#### update Updates the position of an element's tooltip. -{{< highlight js >}}$('#element').tooltip('update'){{< /highlight >}} +{{< highlight js >}}tooltip.update(){{< /highlight >}} ### Events @@ -377,7 +378,12 @@ Updates the position of an element's tooltip. {{< highlight js >}} -$('#myTooltip').on('hidden.bs.tooltip', function () { +var myTooltipEl = document.getElementById('myTooltip') +var tooltip = new bootstrap.Tooltip(myTooltipEl) + +myTooltipEl.addEventListener('hidden.bs.tooltip', function () { // do something... }) + +tooltip.hide() {{< /highlight >}} From 25a69dd4c220c1cce2088e8d4506763e07295031 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 16 May 2019 14:28:48 +0200 Subject: [PATCH 4/4] remove util references from our docs --- site/content/docs/4.3/components/alerts.md | 1 - site/content/docs/4.3/components/carousel.md | 2 -- site/content/docs/4.3/components/dropdowns.md | 2 -- site/content/docs/4.3/components/navs.md | 2 -- site/content/docs/4.3/components/popovers.md | 1 - site/content/docs/4.3/components/scrollspy.md | 1 - site/content/docs/4.3/components/tooltips.md | 1 - 7 files changed, 10 deletions(-) diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md index ee0cbab1a6c7..fa5e5b24cf67 100644 --- a/site/content/docs/4.3/components/alerts.md +++ b/site/content/docs/4.3/components/alerts.md @@ -58,7 +58,6 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. -- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}). The compiled version includes this. - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `