Skip to content
Permalink
Browse files

Remove jQuery from docs/repo.

Some of the snippets need to be updated later.
  • Loading branch information
XhmikosR committed Feb 19, 2019
1 parent 1da5b9f commit 7f7f858cb907da0c67b00cf6fc80f5dc1108cba0
@@ -224,7 +224,6 @@ includes code changes) and under the terms of the
- 2 spaces (no tabs)
- strict mode
- "Attractive"
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](https://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](https://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.

### Checking coding style

@@ -101,7 +101,7 @@ bootstrap/
└── bootstrap.min.js.map
```

We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).


## Bugs and feature requests
@@ -55,8 +55,6 @@ cdn:
js_hash: "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
js_bundle: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
js_bundle_hash: "sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
jquery: "https://code.jquery.com/jquery-3.3.1.slim.min.js"
jquery_hash: "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
popper_hash: "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

@@ -17,8 +17,6 @@ const fs = require('fs')
const path = require('path')
const sh = require('shelljs')

const pkg = require('../package.json')

sh.config.fatal = true

const configFile = path.join(__dirname, '../_config.yml')
@@ -39,10 +37,6 @@ const files = [
file: 'dist/js/bootstrap.bundle.min.js',
configPropertyName: 'js_bundle_hash'
},
{
file: `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`,
configPropertyName: 'jquery_hash'
},
{
file: 'node_modules/popper.js/dist/umd/popper.min.js',
configPropertyName: 'popper_hash'
@@ -16,7 +16,6 @@
<copyright>Copyright 2017-2019</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
<dependency id="jQuery" version="[3.0.0,4)" />
<dependency id="popper.js" version="[1.14.0,2)" />
</dependencies>
<tags>css mobile-first responsive front-end framework web</tags>
@@ -16,7 +16,6 @@
<copyright>Copyright 2017-2019</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
<dependency id="jQuery" version="[3.0.0,4)" />
<dependency id="popper.js" version="[1.14.0,2)" />
</dependencies>
<tags>css sass mobile-first responsive front-end framework web</tags>
@@ -9,7 +9,6 @@ Package.describe({

Package.onUse(function (api) {
api.versionsFrom('METEOR@1.0');
api.use('jquery', 'client');
api.addFiles([
'dist/css/bootstrap.css',
'dist/js/bootstrap.js'
@@ -38,9 +38,6 @@
{{ content }}

{%- if page.include_js != false -%}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>

{%- if jekyll.environment == "production" -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script>
{%- else -%}
@@ -67,11 +67,10 @@
var exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget // Button that triggered the modal
var button = event.relatedTarget // Button that triggered the modal
var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes

// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

This file was deleted.

@@ -14,7 +14,6 @@ See also:
* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://bugs.chromium.org/p/chromium/issues/detail?id=536263)
* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)

<table class="bd-browser-bugs table table-bordered table-hover">
<thead>
@@ -11,7 +11,7 @@ toc: true

## Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).

{% capture example %}
{% for color in site.data.theme-colors %}
@@ -41,7 +41,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`

## Multiple targets

A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-target` attribute.
Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute

{% capture example %}
@@ -498,7 +498,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w

### Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.

@@ -542,8 +542,9 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
@@ -192,7 +192,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
<td>Insert HTML into the popover. If false, <code>innerText</code> property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
@@ -264,9 +264,9 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
{% include callout.html content=callout type="danger" %}

{% capture callout %}
#### Non-`:visible` target elements ignored
#### Non-visible target elements ignored

Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
{% endcapture %}
{% include callout.html content=callout type="info" %}

@@ -310,7 +310,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>method</td>
<td>string</td>
<td>auto</td>
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method get scroll coordinates. <code>offset</code> will use jQuery offset method to get scroll coordinates. <code>position</code> will use jQuery position method to get scroll coordinates.</td>
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
</tr>
<tr>
<td>target</td>
@@ -188,7 +188,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>false</td>
<td>
<p>Allow HTML in the tooltip.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</td>
</tr>
@@ -1,7 +1,7 @@
---
layout: docs
title: Contents
description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
group: getting-started
toc: true
---
@@ -38,7 +38,7 @@ bootstrap/
└── bootstrap.min.js.map
{% endhighlight %}

This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).

## CSS files

@@ -97,7 +97,6 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<tr>
<th scope="col">JS files</th>
<th scope="col">Popper</th>
<th scope="col">jQuery</th>
</tr>
</thead>
<tbody>
@@ -107,15 +106,13 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td class="text-success">Included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
</tbody>
</table>
@@ -13,7 +13,7 @@ Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}**
- Compiled and minified CSS bundles (see [CSS files comparison]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#css-files))
- Compiled and minified JavaScript plugins

This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.

<a href="{{ site.download.dist }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>

@@ -37,10 +37,9 @@ Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}

If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it.
If you're using our compiled JavaScript, don't forget to include Popper.js, via a CDN preferably, before our JS.

{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}

@@ -56,7 +55,7 @@ Install Bootstrap in your Node.js powered apps with [the npm package](https://ww
npm install bootstrap
{% endhighlight %}

`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
`require('bootstrap')` will load all of Bootstrap's plugins onto the `window` object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's plugins individually by loading the `/js/*.js` files under the package's top-level directory.

Bootstrap's `package.json` contains some additional metadata under the following keys:

@@ -26,19 +26,16 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee

### JS

Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported.
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper.js](https://popper.js.org/). Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. Popper.js must come first, and then our JavaScript plugins.

{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.

Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.

<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
@@ -77,8 +74,7 @@ Be sure to have your pages set up with the latest design and development standar
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<!-- Popper.js first, then Bootstrap JS -->
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
</body>

0 comments on commit 7f7f858

Please sign in to comment.
You can’t perform that action at this time.