rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

button -> es6

Browse Source
This commit is contained in:
fat 2015-05-07 17:07:38 -07:00
parent c3a79b1a8c
commit 6605051882
14 changed files with 338 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gruntfile.js
View File

@ -64,7 +64,8 @@ module.exports = function (grunt) {
dist: {
files: {
'js/dist/util.js': 'js/src/util.js',
'js/dist/alert.js': 'js/src/alert.js'
'js/dist/alert.js': 'js/src/alert.js',
'js/dist/button.js': 'js/src/button.js',
}
}
},

8
js/dist/alert.js vendored
View File

@ -11,7 +11,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
* --------------------------------------------------------------------------
*/
var Alert = (function () {
var Alert = (function ($) {
/**
* ------------------------------------------------------------------------
@ -62,6 +62,8 @@ var Alert = (function () {
// public
value: function close(element) {
element = element || this.element;
var rootElement = this._getRootElement(element);
var customEvent = this._triggerCloseEvent(rootElement);
@ -167,10 +169,10 @@ var Alert = (function () {
$.fn[NAME] = Alert._jQueryInterface;
$.fn[NAME].Constructor = Alert;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = Alert._JQUERY_NO_CONFLICT;
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Alert._jQueryInterface;
};
return Alert;
})();
})(jQuery);
//# sourceMappingURL=alert.js.map

2
js/dist/alert.js.map vendored
View File

File diff suppressed because one or more lines are too long

158
js/dist/button.js vendored Normal file
View File

@ -0,0 +1,158 @@
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
var Button = (function ($) {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
var NAME = 'button';
var VERSION = '4.0.0';
var DATA_KEY = 'bs.button';
var JQUERY_NO_CONFLICT = $.fn[NAME];
var TRANSITION_DURATION = 150;
var ClassName = {
ACTIVE: 'active',
BUTTON: 'btn',
FOCUS: 'focus'
};
var Selector = {
DATA_TOGGLE_CARROT: '[data-toggle^="button"]',
DATA_TOGGLE: '[data-toggle="buttons"]',
INPUT: 'input',
ACTIVE: '.active',
BUTTON: '.btn'
};
var Event = {
CLICK: 'click.bs.button.data-api',
FOCUS_BLUR: 'focus.bs.button.data-api blur.bs.button.data-api'
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Button = (function () {
function Button(element) {
_classCallCheck(this, Button);
this.element = element;
}
_createClass(Button, [{
key: 'toggle',
// public
value: function toggle() {
var triggerChangeEvent = true;
var rootElement = $(this.element).closest(Selector.DATA_TOGGLE)[0];
if (rootElement) {
var input = $(this.element).find(Selector.INPUT)[0];
if (input) {
if (input.type === 'radio') {
if (input.checked && $(this.element).hasClass(ClassName.ACTIVE)) {
triggerChangeEvent = false;
} else {
var activeElement = $(rootElement).find(Selector.ACTIVE)[0];
if (activeElement) {
$(activeElement).removeClass(ClassName.ACTIVE);
}
}
}
if (triggerChangeEvent) {
input.checked = !$(this.element).hasClass(ClassName.ACTIVE);
$(this.element).trigger('change');
}
}
} else {
this.element.setAttribute('aria-pressed', !$(this.element).hasClass(ClassName.ACTIVE));
}
if (triggerChangeEvent) {
$(this.element).toggleClass(ClassName.ACTIVE);
}
}
}], [{
key: '_jQueryInterface',
// static
value: function _jQueryInterface(config) {
return this.each(function () {
var data = $(this).data(DATA_KEY);
if (!data) {
data = new Button(this);
$(this).data(DATA_KEY, data);
}
if (config === 'toggle') {
data[config]();
}
});
}
}]);
return Button;
})();
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
$(document).on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) {
event.preventDefault();
var button = event.target;
if (!$(button).hasClass(ClassName.BUTTON)) {
button = $(button).closest(Selector.BUTTON);
}
Button._jQueryInterface.call($(button), 'toggle');
}).on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) {
var button = $(event.target).closest(Selector.BUTTON)[0];
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type));
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Button._jQueryInterface;
$.fn[NAME].Constructor = Button;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Button._jQueryInterface;
};
return Button;
})(jQuery);
//# sourceMappingURL=button.js.map

1
js/dist/button.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
js/dist/util.js vendored
View File

@ -7,7 +7,7 @@
'use strict';
var Util = (function () {
var Util = (function ($) {
/**
* ------------------------------------------------------------------------
@ -119,5 +119,5 @@ var Util = (function () {
setTransitionEndSupport();
return Util;
})();
})(jQuery);
//# sourceMappingURL=util.js.map

2
js/dist/util.js.map vendored
View File

File diff suppressed because one or more lines are too long

305
js/script-compiled.js
View File

@ -1,305 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
var _util = require('util');
var _util2 = _interopRequireDefault(_util);
/**
* --------------------------------------------------------------------------
* Constants
* --------------------------------------------------------------------------
*/
var NAME = 'alert';
var VERSION = '4.0.0';
var DATA_KEY = 'bs.alert';
var JQUERY_NO_CONFLICT = $.fn[NAME];
var TRANSITION_DURATION = 150;
var Selector = {
DISMISS: '[data-dismiss="alert"]'
};
var Event = {
CLOSE: 'close.bs.alert',
CLOSED: 'closed.bs.alert',
CLICK: 'click.bs.alert.data-api'
};
var ClassName = {
ALERT: 'alert',
FADE: 'fade',
IN: 'in'
};
/**
* --------------------------------------------------------------------------
* Class Definition
* --------------------------------------------------------------------------
*/
var Alert = (function () {
function Alert(element) {
_classCallCheck(this, Alert);
if (element) {
this.element = element;
}
}
_createClass(Alert, [{
key: 'close',
// public
value: function close(element) {
var rootElement = this._getRootElement(element);
var customEvent = this._triggerCloseEvent(rootElement);
if (customEvent.isDefaultPrevented()) {
return;
}
this._removeElement(rootElement);
}
}, {
key: '_getRootElement',
// private
value: function _getRootElement(element) {
var parent = false;
var selector = _util2['default'].getSelectorFromElement(element);
if (selector) {
parent = $(selector)[0];
}
if (!parent) {
parent = $(element).closest('.' + ClassName.ALERT)[0];
}
return parent;
}
}, {
key: '_triggerCloseEvent',
value: function _triggerCloseEvent(element) {
var closeEvent = $.Event(Event.CLOSE);
$(element).trigger(closeEvent);
return closeEvent;
}
}, {
key: '_removeElement',
value: function _removeElement(element) {
$(element).removeClass(ClassName.IN);
if (!_util2['default'].supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) {
this._destroyElement(element);
return;
}
$(element).one(_util2['default'].TRANSITION_END, this._destroyElement.bind(this, element)).emulateTransitionEnd(TRANSITION_DURATION);
}
}, {
key: '_destroyElement',
value: function _destroyElement(element) {
$(element).detach().trigger(Event.CLOSED).remove();
}
}], [{
key: '_jQueryInterface',
// static
value: function _jQueryInterface(config) {
return this.each(function () {
var $element = $(this);
var data = $element.data(DATA_KEY);
if (!data) {
data = new Alert(this);
$element.data(DATA_KEY, data);
}
if (config === 'close') {
data[config](this);
}
});
}
}, {
key: '_handleDismiss',
value: function _handleDismiss(alertInstance) {
return function (event) {
if (event) {
event.preventDefault();
}
alertInstance.close(this);
};
}
}]);
return Alert;
})();
exports.Alert = Alert;
/**
* --------------------------------------------------------------------------
* Data Api implementation
* --------------------------------------------------------------------------
*/
$(document).on(Event.CLICK, Selector.DISMISS, Alert._handleDismiss(new Alert()));
/**
* --------------------------------------------------------------------------
* jQuery
* --------------------------------------------------------------------------
*/
$.fn[NAME] = Alert._jQueryInterface;
$.fn[NAME].Constructor = Alert;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = Alert._JQUERY_NO_CONFLICT;
return Alert._jQueryInterface;
};
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* --------------------------------------------------------------------------
* Public Util Api
* --------------------------------------------------------------------------
*/
var Util = {
TRANSITION_END: 'bsTransitionEnd',
getUID: function getUID(prefix) {
do prefix += ~ ~(Math.random() * 1000000); while (document.getElementById(prefix));
return prefix;
},
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector) {
selector = element.getAttribute('href') || '';
selector = /^#[a-z]/i.test(selector) ? selector : null;
}
return selector;
},
reflow: function reflow(element) {
new Function('bs', 'return bs')(element.offsetHeight);
},
supportsTransitionEnd: function supportsTransitionEnd() {
return !!transition;
}
};
exports['default'] = Util;
/**
* --------------------------------------------------------------------------
* Private TransitionEnd Helpers
* --------------------------------------------------------------------------
*/
var transition = false;
var TransitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
};
function getSpecialTransitionEndEvent() {
return {
bindType: transition.end,
delegateType: transition.end,
handle: function handle(event) {
if ($(event.target).is(this)) {
return event.handleObj.handler.apply(this, arguments);
}
}
};
}
function transitionEndTest() {
if (window.QUnit) {
return false;
}
var el = document.createElement('bootstrap');
for (var name in TransitionEndEvent) {
if (el.style[name] !== undefined) {
return { end: TransitionEndEvent[name] };
}
}
return false;
}
function transitionEndEmulator(duration) {
var _this = this;
var called = false;
$(this).one(Util.TRANSITION_END, function () {
called = true;
});
setTimeout(function () {
if (!called) {
$(_this).trigger(transition.end);
}
}, duration);
return this;
}
function setTransitionEndSupport() {
transition = transitionEndTest();
$.fn.emulateTransitionEnd = transitionEndEmulator;
if (Util.supportsTransitionEnd()) {
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
}
}
setTransitionEndSupport();
module.exports = exports['default'];

8
js/src/alert.js
View File

@ -8,7 +8,7 @@ import Util from './util'
* --------------------------------------------------------------------------
*/
const Alert = (() => {
const Alert = (($) => {
/**
@ -58,6 +58,8 @@ const Alert = (() => {
// public
close(element) {
element = element || this.element
let rootElement = this._getRootElement(element)
let customEvent = this._triggerCloseEvent(rootElement)
@ -167,12 +169,12 @@ const Alert = (() => {
$.fn[NAME] = Alert._jQueryInterface
$.fn[NAME].Constructor = Alert
$.fn[NAME].noConflict = function () {
$.fn[NAME] = Alert._JQUERY_NO_CONFLICT
$.fn[NAME] = JQUERY_NO_CONFLICT
return Alert._jQueryInterface
}
return Alert
})()
})(jQuery)
export default Alert

158
js/src/button.js Normal file
View File

@ -0,0 +1,158 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const Button = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'button'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.button'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150
const ClassName = {
ACTIVE : 'active',
BUTTON : 'btn',
FOCUS : 'focus'
}
const Selector = {
DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
DATA_TOGGLE : '[data-toggle="buttons"]',
INPUT : 'input',
ACTIVE : '.active',
BUTTON : '.btn'
}
const Event = {
CLICK : 'click.bs.button.data-api',
FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Button {
constructor(element) {
this.element = element
}
// public
toggle() {
let triggerChangeEvent = true
let rootElement = $(this.element).closest(
Selector.DATA_TOGGLE
)[0]
if (rootElement) {
let input = $(this.element).find(Selector.INPUT)[0]
if (input) {
if (input.type === 'radio') {
if (input.checked &&
$(this.element).hasClass(ClassName.ACTIVE)) {
triggerChangeEvent = false
} else {
let activeElement = $(rootElement).find(Selector.ACTIVE)[0]
if (activeElement) {
$(activeElement).removeClass(ClassName.ACTIVE)
}
}
}
if (triggerChangeEvent) {
input.checked = !$(this.element).hasClass(ClassName.ACTIVE)
$(this.element).trigger('change')
}
}
} else {
this.element.setAttribute('aria-pressed',
!$(this.element).hasClass(ClassName.ACTIVE))
}
if (triggerChangeEvent) {
$(this.element).toggleClass(ClassName.ACTIVE)
}
}
// static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new Button(this)
$(this).data(DATA_KEY, data)
}
if (config === 'toggle') {
data[config]()
}
})
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
$(document)
.on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) {
event.preventDefault()
let button = event.target
if (!$(button).hasClass(ClassName.BUTTON)) {
button = $(button).closest(Selector.BUTTON)
}
Button._jQueryInterface.call($(button), 'toggle')
})
.on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) {
var button = $(event.target).closest(Selector.BUTTON)[0]
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Button._jQueryInterface
$.fn[NAME].Constructor = Button
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Button._jQueryInterface
}
return Button
})(jQuery)
export default Button

4
js/src/util.js
View File

@ -5,7 +5,7 @@
* --------------------------------------------------------------------------
*/
const Util = (() => {
const Util = (($) => {
/**
@ -119,6 +119,6 @@ const Util = (() => {
return Util
})()
})(jQuery)
export default Util

2
js/tests/index.html
View File

@ -132,9 +132,9 @@
<!-- es6 Plugin sources -->
<script src="../../js/dist/util.js"></script>
<script src="../../js/dist/alert.js"></script>
<script src="../../js/dist/button.js"></script>
<!-- Old Plugin sources -->
<script src="../../js/button.js"></script>
<script src="../../js/carousel.js"></script>
<script src="../../js/collapse.js"></script>
<script src="../../js/dropdown.js"></script>

58
js/tests/unit/button.js
View File

@ -32,64 +32,6 @@ $(function () {
assert.strictEqual($button[0], $el[0], 'collection contains element')
})
QUnit.test('should return set state to loading', function (assert) {
assert.expect(4)
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
var done = assert.async()
setTimeout(function () {
assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
done()
}, 0)
})
QUnit.test('should return reset state', function (assert) {
assert.expect(7)
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
var doneOne = assert.async()
setTimeout(function () {
assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
doneOne()
var doneTwo = assert.async()
$btn.bootstrapButton('reset')
setTimeout(function () {
assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
doneTwo()
}, 0)
}, 0)
})
QUnit.test('should work with an empty string as reset state', function (assert) {
assert.expect(7)
var $btn = $('<button class="btn" data-loading-text="fat"/>')
assert.strictEqual($btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('loading')
var doneOne = assert.async()
setTimeout(function () {
assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
doneOne()
var doneTwo = assert.async()
$btn.bootstrapButton('reset')
setTimeout(function () {
assert.strictEqual($btn.html(), '', 'btn text equals ""')
assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
doneTwo()
}, 0)
}, 0)
})
QUnit.test('should toggle active', function (assert) {
assert.expect(2)
var $btn = $('<button class="btn" data-toggle="button">mdo</button>')

8
js/tests/visual/button.html
View File

@ -22,10 +22,6 @@
<h1>Button <small>Bootstrap Visual Test</small></h1>
</div>
<button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button">
Loading state
</button>
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
<div class="btn-group" data-toggle="buttons">
@ -56,8 +52,8 @@
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../button.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/button.js"></script>
<!-- JavaScript Test -->
<script>