mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
Merge branch 'v4-dev' into fix-jumping-modal-on-resize
This commit is contained in:
commit
e04e42d08c
4
.babelrc
4
.babelrc
@ -8,7 +8,5 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": ["external-helpers"]
|
||||||
"transform-es2015-modules-strip"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@ Several quick start options are available:
|
|||||||
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
|
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
|
||||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
||||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
|
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
|
||||||
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-beta`
|
- Install with [yarn](https://yarnpkg.com): `yarn add bootstrap@4.0.0-beta`
|
||||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
|
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
|
||||||
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-beta`
|
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-beta`
|
||||||
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
|
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
|
||||||
|
@ -204,7 +204,7 @@
|
|||||||
summary: >
|
summary: >
|
||||||
`table-cell` borders not overlapping despite `margin-right: -1px`
|
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||||
upstream_bug: >
|
upstream_bug: >
|
||||||
Chromium#568691
|
Chromium#749848
|
||||||
origin: >
|
origin: >
|
||||||
Bootstrap#17438, Bootstrap#14237
|
Bootstrap#17438, Bootstrap#14237
|
||||||
|
|
||||||
|
51
build/rollup.config.js
Normal file
51
build/rollup.config.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
const path = require('path')
|
||||||
|
const babel = require('rollup-plugin-babel')
|
||||||
|
const resolve = require('rollup-plugin-node-resolve')
|
||||||
|
const pkg = require(path.resolve(__dirname, '../package.json'))
|
||||||
|
const BUNDLE = process.env.BUNDLE === 'true'
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
|
||||||
|
var fileDest = 'bootstrap.js'
|
||||||
|
var external = ['jquery', 'popper.js']
|
||||||
|
const plugins = [
|
||||||
|
babel({
|
||||||
|
exclude: 'node_modules/**', // only transpile our source code
|
||||||
|
externalHelpersWhitelist: [ // include only required helpers
|
||||||
|
'typeof',
|
||||||
|
'classCallCheck',
|
||||||
|
'createClass',
|
||||||
|
'inherits',
|
||||||
|
'possibleConstructorReturn'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
const globals = {
|
||||||
|
jquery: '$',
|
||||||
|
'popper.js': 'Popper'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (BUNDLE) {
|
||||||
|
fileDest = 'bootstrap.bundle.js'
|
||||||
|
// remove last entry in external array to bundle Popper
|
||||||
|
external.pop()
|
||||||
|
delete globals['popper.js']
|
||||||
|
plugins.push(resolve())
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
input: path.resolve(__dirname, '../js/src/index.js'),
|
||||||
|
output: {
|
||||||
|
file: path.resolve(__dirname, `../dist/js/${fileDest}`),
|
||||||
|
format: 'iife'
|
||||||
|
},
|
||||||
|
name: 'bootstrap',
|
||||||
|
external: external,
|
||||||
|
globals: globals,
|
||||||
|
plugins: plugins,
|
||||||
|
banner: `/*!
|
||||||
|
* Bootstrap v${pkg.version} (${pkg.homepage})
|
||||||
|
* Copyright 2011-${year} ${pkg.author}
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
`
|
||||||
|
}
|
@ -1,41 +0,0 @@
|
|||||||
const fs = require('fs')
|
|
||||||
|
|
||||||
fs.readFile('package.json', (err, data) => {
|
|
||||||
if (err) {
|
|
||||||
throw err
|
|
||||||
}
|
|
||||||
|
|
||||||
const pkg = JSON.parse(data)
|
|
||||||
const year = new Date().getFullYear()
|
|
||||||
|
|
||||||
const stampTop =
|
|
||||||
`/*!
|
|
||||||
* Bootstrap v${pkg.version} (${pkg.homepage})
|
|
||||||
* Copyright 2011-${year} ${pkg.author}
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (typeof jQuery === 'undefined') {
|
|
||||||
throw new Error('Bootstrap\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\'s JavaScript.')
|
|
||||||
}
|
|
||||||
|
|
||||||
(function ($) {
|
|
||||||
var version = $.fn.jquery.split(' ')[0].split('.')
|
|
||||||
if ((version[0] < 3) || (version[0] >= 4)) {
|
|
||||||
throw new Error('Bootstrap\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
|
|
||||||
}
|
|
||||||
})(jQuery);
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
`
|
|
||||||
const stampEnd = `
|
|
||||||
})();`
|
|
||||||
|
|
||||||
process.stdout.write(stampTop)
|
|
||||||
|
|
||||||
process.stdin.on('end', () => {
|
|
||||||
process.stdout.write(stampEnd)
|
|
||||||
})
|
|
||||||
|
|
||||||
process.stdin.pipe(process.stdout)
|
|
||||||
})
|
|
@ -1,5 +1,8 @@
|
|||||||
{
|
{
|
||||||
"output" : {
|
"output": {
|
||||||
"comments": "/^!/"
|
"comments": "/^!/"
|
||||||
}
|
},
|
||||||
|
"compress": {
|
||||||
|
"typeofs": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,31 +4,36 @@ title: Breadcrumb
|
|||||||
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
|
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
|
||||||
group: components
|
group: components
|
||||||
---
|
---
|
||||||
|
## Overview
|
||||||
|
|
||||||
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li class="breadcrumb-item active">Home</li>
|
|
||||||
</ol>
|
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
||||||
<li class="breadcrumb-item active">Library</li>
|
|
||||||
</ol>
|
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
||||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
||||||
<li class="breadcrumb-item active">Data</li>
|
|
||||||
</ol>
|
|
||||||
{% endexample %}
|
|
||||||
|
|
||||||
Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
{% example html %}
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
<nav class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<a class="breadcrumb-item" href="#">Home</a>
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
<a class="breadcrumb-item" href="#">Library</a>
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
<a class="breadcrumb-item" href="#">Data</a>
|
</ol>
|
||||||
<span class="breadcrumb-item active">Bootstrap</span>
|
</nav>
|
||||||
|
|
||||||
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||||
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
|
## Accessibility
|
||||||
|
|
||||||
|
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
|
||||||
|
|
||||||
|
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
|
||||||
|
@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc
|
|||||||
{% example html %}
|
{% example html %}
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button>
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||||
</p>
|
</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -684,7 +684,7 @@ Here's how form validation works with Bootstrap:
|
|||||||
- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class.
|
- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class.
|
||||||
- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
|
- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
|
||||||
- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
|
- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
|
||||||
- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
|
- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
|
||||||
- You may provide custom validity messages with `setCustomValidity` in JavaScript.
|
- You may provide custom validity messages with `setCustomValidity` in JavaScript.
|
||||||
|
|
||||||
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
|
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
|
||||||
|
@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
|
|||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
#### jQuery incompatibility
|
#### jQuery incompatibility
|
||||||
|
|
||||||
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||||
{% endcallout %}
|
{% endcallout %}
|
||||||
|
|
||||||
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
|
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
|
||||||
|
@ -727,4 +727,4 @@ $container-max-widths: (
|
|||||||
);
|
);
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
|
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
|
||||||
|
@ -114,7 +114,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
|
|||||||
|
|
||||||
- Renamed `.btn-default` to `.btn-secondary`.
|
- Renamed `.btn-default` to `.btn-secondary`.
|
||||||
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
||||||
- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||||
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
||||||
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Alert = (($) => {
|
const Alert = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.0.0-beta): button.js
|
* Bootstrap (v4.0.0-beta): button.js
|
||||||
@ -5,7 +6,7 @@
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Button = (($) => {
|
const Button = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Carousel = (($) => {
|
const Carousel = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Collapse = (($) => {
|
const Collapse = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
/* global Popper */
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Dropdown = (($) => {
|
const Dropdown = (() => {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@ -445,6 +445,6 @@ const Dropdown = (($) => {
|
|||||||
|
|
||||||
return Dropdown
|
return Dropdown
|
||||||
|
|
||||||
})(jQuery)
|
})(jQuery, Popper)
|
||||||
|
|
||||||
export default Dropdown
|
export default Dropdown
|
||||||
|
46
js/src/index.js
Normal file
46
js/src/index.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
|
import Alert from './alert'
|
||||||
|
import Button from './button'
|
||||||
|
import Carousel from './carousel'
|
||||||
|
import Collapse from './collapse'
|
||||||
|
import Dropdown from './dropdown'
|
||||||
|
import Modal from './modal'
|
||||||
|
import Popover from './popover'
|
||||||
|
import Scrollspy from './scrollspy'
|
||||||
|
import Tab from './tab'
|
||||||
|
import Tooltip from './tooltip'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
* Bootstrap (v4.0.0-alpha.6): index.js
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
if (typeof jQuery === 'undefined') {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
|
||||||
|
}
|
||||||
|
|
||||||
|
const version = $.fn.jquery.split(' ')[0].split('.')
|
||||||
|
const min = 3
|
||||||
|
const max = 4
|
||||||
|
if (version[0] < min || version[0] >= max) {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
|
||||||
|
}
|
||||||
|
})(jQuery)
|
||||||
|
|
||||||
|
export {
|
||||||
|
Util,
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Carousel,
|
||||||
|
Collapse,
|
||||||
|
Dropdown,
|
||||||
|
Modal,
|
||||||
|
Popover,
|
||||||
|
Scrollspy,
|
||||||
|
Tab,
|
||||||
|
Tooltip
|
||||||
|
}
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Modal = (($) => {
|
const Modal = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -428,7 +429,8 @@ const Modal = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_checkScrollbar() {
|
_checkScrollbar() {
|
||||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth
|
const rect = document.body.getBoundingClientRect()
|
||||||
|
this._isBodyOverflowing = rect.left + rect.right < window.innerWidth
|
||||||
this._scrollbarWidth = this._getScrollbarWidth()
|
this._scrollbarWidth = this._getScrollbarWidth()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Tooltip from './tooltip'
|
import Tooltip from './tooltip'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Tooltip from './tooltip'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Popover = (($) => {
|
const Popover = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const ScrollSpy = (($) => {
|
const ScrollSpy = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Tab = (($) => {
|
const Tab = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
/* global Popper */
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Tooltip = (($) => {
|
const Tooltip = (() => {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@ -728,6 +728,6 @@ const Tooltip = (($) => {
|
|||||||
|
|
||||||
return Tooltip
|
return Tooltip
|
||||||
|
|
||||||
})(jQuery)
|
})(jQuery, Popper)
|
||||||
|
|
||||||
export default Tooltip
|
export default Tooltip
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.0.0-beta): util.js
|
* Bootstrap (v4.0.0-beta): util.js
|
||||||
@ -5,7 +7,7 @@
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Util = (($) => {
|
const Util = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
"global-require": "off",
|
"global-require": "off",
|
||||||
"no-process-env": "off",
|
"no-process-env": "off",
|
||||||
"no-process-exit": "off",
|
"no-process-exit": "off",
|
||||||
|
"no-sync": "off",
|
||||||
|
|
||||||
// Stylistic Issues
|
// Stylistic Issues
|
||||||
"brace-style": "off",
|
"brace-style": "off",
|
||||||
|
@ -21,6 +21,8 @@ $(function () {
|
|||||||
document.body.removeChild(scrollDiv)
|
document.body.removeChild(scrollDiv)
|
||||||
return scrollbarWidth
|
return scrollbarWidth
|
||||||
}
|
}
|
||||||
|
// Simulate scrollbars in PhantomJS
|
||||||
|
$('html').css('padding-right', '16px')
|
||||||
},
|
},
|
||||||
beforeEach: function () {
|
beforeEach: function () {
|
||||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||||
@ -405,6 +407,30 @@ $(function () {
|
|||||||
.bootstrapModal('show')
|
.bootstrapModal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not adjust the inline body padding when it does not overflow', function (assert) {
|
||||||
|
assert.expect(1)
|
||||||
|
var done = assert.async()
|
||||||
|
var $body = $(document.body)
|
||||||
|
var originalPadding = $body.css('padding-right')
|
||||||
|
|
||||||
|
// Hide scrollbars to prevent the body overflowing
|
||||||
|
$body.css('overflow', 'hidden') // real scrollbar (for in-browser testing)
|
||||||
|
$('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS)
|
||||||
|
|
||||||
|
$('<div id="modal-test"/>')
|
||||||
|
.on('shown.bs.modal', function () {
|
||||||
|
var currentPadding = $body.css('padding-right')
|
||||||
|
assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
|
||||||
|
$(this).bootstrapModal('hide')
|
||||||
|
|
||||||
|
// restore scrollbars
|
||||||
|
$body.css('overflow', 'auto')
|
||||||
|
$('html').css('padding-right', '16px')
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
.bootstrapModal('show')
|
||||||
|
})
|
||||||
|
|
||||||
QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
|
QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
|
||||||
assert.expect(2)
|
assert.expect(2)
|
||||||
var done = assert.async()
|
var done = assert.async()
|
||||||
@ -539,7 +565,7 @@ $(function () {
|
|||||||
|
|
||||||
$('<div id="modal-test"/>')
|
$('<div id="modal-test"/>')
|
||||||
.on('hidden.bs.modal', function () {
|
.on('hidden.bs.modal', function () {
|
||||||
assert.ok(!$body.attr('style'), 'body does not have inline padding set')
|
assert.strictEqual($body.attr('style').indexOf('padding-right'), -1, 'body does not have inline padding set')
|
||||||
$style.remove()
|
$style.remove()
|
||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
|
73
package-lock.json
generated
73
package-lock.json
generated
@ -513,6 +513,15 @@
|
|||||||
"babel-runtime": "6.26.0"
|
"babel-runtime": "6.26.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"babel-plugin-external-helpers": {
|
||||||
|
"version": "6.22.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
|
||||||
|
"integrity": "sha1-IoX0iwK9Xe3oUXXK+MYuhq3M76E=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"babel-runtime": "6.26.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"babel-plugin-transform-es2015-arrow-functions": {
|
"babel-plugin-transform-es2015-arrow-functions": {
|
||||||
"version": "6.22.0",
|
"version": "6.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
|
||||||
@ -963,6 +972,15 @@
|
|||||||
"repeat-element": "1.1.2"
|
"repeat-element": "1.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"browser-resolve": {
|
||||||
|
"version": "1.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz",
|
||||||
|
"integrity": "sha1-j/CbCixCFxihBRwmCzLkj0QpOM4=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"resolve": "1.1.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.3.3.tgz",
|
||||||
@ -1714,6 +1732,12 @@
|
|||||||
"integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
|
"integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"estree-walker": {
|
||||||
|
"version": "0.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
|
||||||
|
"integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"esutils": {
|
"esutils": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
|
||||||
@ -2987,6 +3011,12 @@
|
|||||||
"is-extglob": "1.0.0"
|
"is-extglob": "1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"is-module": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||||
|
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"is-npm": {
|
"is-npm": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
|
||||||
@ -4429,6 +4459,12 @@
|
|||||||
"integrity": "sha1-WbcIwcAZCi9pLxx2GMRGsFL9F2I=",
|
"integrity": "sha1-WbcIwcAZCi9pLxx2GMRGsFL9F2I=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"popper.js": {
|
||||||
|
"version": "1.12.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.5.tgz",
|
||||||
|
"integrity": "sha512-6R2eXIy1xYukMNutoD+y/Gj0IpjEQhivyZonm5Vz0Fp8jdc7kvheKCvpM/t+PxqKb7VbLVnvPVEdTyslEb7f6w==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"version": "6.0.9",
|
"version": "6.0.9",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.9.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.9.tgz",
|
||||||
@ -5238,6 +5274,43 @@
|
|||||||
"glob": "7.1.2"
|
"glob": "7.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"rollup": {
|
||||||
|
"version": "0.49.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-0.49.2.tgz",
|
||||||
|
"integrity": "sha512-9mySqItSwq5/dXYQyFGrrzqV282EZfz4kSCU2m4e6OjgqLmIsp9zK6qNQ6wbBWR4EhASEqQMBQ/IF45jaNPAtw==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"rollup-plugin-babel": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-ALGPBFtwJZcYHsNPM6RGJlEncTzAARPvZOGjNPZgDe5hS5t6sJGjiOWibEFVEz5LQN7S7spvCBILaS4N1Cql2w==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"rollup-pluginutils": "1.5.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rollup-plugin-node-resolve": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz",
|
||||||
|
"integrity": "sha1-i4l8TDAw1QASd7BRSyXSygloPuA=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"browser-resolve": "1.11.2",
|
||||||
|
"builtin-modules": "1.1.1",
|
||||||
|
"is-module": "1.0.0",
|
||||||
|
"resolve": "1.1.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rollup-pluginutils": {
|
||||||
|
"version": "1.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
|
||||||
|
"integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"estree-walker": "0.2.1",
|
||||||
|
"minimatch": "3.0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"run-async": {
|
"run-async": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
|
||||||
|
14
package.json
14
package.json
@ -33,9 +33,12 @@
|
|||||||
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
|
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
|
||||||
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ sw.js",
|
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ sw.js",
|
||||||
"js-compile": "npm-run-all --parallel js-compile-*",
|
"js-compile": "npm-run-all --parallel js-compile-*",
|
||||||
"js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed \"s/^(import|export).*//\" | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
|
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js",
|
||||||
"js-compile-plugins": "babel js/src/ --out-dir js/dist/ --source-maps",
|
"js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js",
|
||||||
"js-minify": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
|
"js-compile-plugins": "babel --no-babelrc js/src/ --out-dir js/dist/ --source-maps --presets=es2015 --plugins=transform-es2015-modules-strip",
|
||||||
|
"js-minify": "npm-run-all --parallel js-minify-*",
|
||||||
|
"js-minify-standalone": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
|
||||||
|
"js-minify-bundle": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
|
||||||
"js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
|
"js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
|
||||||
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
|
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
|
||||||
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
|
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
|
||||||
@ -74,6 +77,7 @@
|
|||||||
"autoprefixer": "^7.1.2",
|
"autoprefixer": "^7.1.2",
|
||||||
"babel-cli": "^6.24.1",
|
"babel-cli": "^6.24.1",
|
||||||
"babel-eslint": "^7.2.3",
|
"babel-eslint": "^7.2.3",
|
||||||
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
"babel-plugin-transform-es2015-modules-strip": "^0.1.1",
|
"babel-plugin-transform-es2015-modules-strip": "^0.1.1",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"clean-css-cli": "^4.1.6",
|
"clean-css-cli": "^4.1.6",
|
||||||
@ -86,9 +90,13 @@
|
|||||||
"nodemon": "^1.11.0",
|
"nodemon": "^1.11.0",
|
||||||
"npm-run-all": "^4.0.2",
|
"npm-run-all": "^4.0.2",
|
||||||
"phantomjs-prebuilt": "^2.1.14",
|
"phantomjs-prebuilt": "^2.1.14",
|
||||||
|
"popper.js": "^1.12.5",
|
||||||
"postcss-cli": "^4.1.0",
|
"postcss-cli": "^4.1.0",
|
||||||
"qunit-phantomjs-runner": "^2.3.0",
|
"qunit-phantomjs-runner": "^2.3.0",
|
||||||
"qunitjs": "^2.4.0",
|
"qunitjs": "^2.4.0",
|
||||||
|
"rollup": "^0.49.2",
|
||||||
|
"rollup-plugin-babel": "^3.0.2",
|
||||||
|
"rollup-plugin-node-resolve": "^3.0.0",
|
||||||
"shelljs": "^0.7.8",
|
"shelljs": "^0.7.8",
|
||||||
"shx": "^0.2.2",
|
"shx": "^0.2.2",
|
||||||
"uglify-js": "^3.0.24"
|
"uglify-js": "^3.0.24"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user