mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 12:54:13 +03:00
debugging more buttons, fixed ripples errors in conversion to es6
This commit is contained in:
Kevin Ross
parent
36a11b2c0a
commit
43ac25ae01
|
|
@ -12,8 +12,6 @@ group: material-design
|
|||
## Flat
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
|
|
@ -21,6 +19,8 @@ group: material-design
|
|||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn active"><code>.active</code></button>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled
|
||||
|
|
@ -41,7 +41,6 @@ group: material-design
|
|||
## Raised
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-raised active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-raised btn-success">Success</button>
|
||||
|
|
@ -49,6 +48,7 @@ group: material-design
|
|||
<button type="button" class="btn btn-raised btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-raised btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-raised btn-link">Link</button>
|
||||
<button type="button" class="btn btn-raised active"><code>.active</code></button>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled
|
||||
|
|
|
|||
|
|
@ -5,26 +5,5 @@ group: material-design
|
|||
---
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleSelect1" class="mdb-label-floating">Example select</label>
|
||||
<select class="form-control" id="exampleSelect1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleSelect2" class="mdb-label-floating">Example multiple select</label>
|
||||
<select multiple class="form-control" id="exampleSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ const Autofill = (($) => {
|
|||
// ------------------------------------------------------------------------
|
||||
// static
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(() => {
|
||||
return this.each(function () {
|
||||
let $element = $(this)
|
||||
let data = $element.data(DATA_KEY)
|
||||
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@ const BaseInput = (($) => {
|
|||
}
|
||||
|
||||
if (label !== undefined && label.length > 0) {
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
3
js/src/bootstrapMaterialDesign.js
vendored
3
js/src/bootstrapMaterialDesign.js
vendored
|
|
@ -36,6 +36,7 @@ const BootstrapMaterialDesign = (($) => {
|
|||
}
|
||||
},
|
||||
ripples: {
|
||||
//selector: ['.btn:not(.btn-link):not(.ripple-none)'] // testing only
|
||||
selector: [
|
||||
'.btn:not(.btn-link):not(.ripple-none)',
|
||||
'.card-image:not(.ripple-none)',
|
||||
|
|
@ -124,7 +125,7 @@ const BootstrapMaterialDesign = (($) => {
|
|||
let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}`
|
||||
|
||||
// instantiate component on selector elements with config
|
||||
// console.debug(`instantiating: ${component}`)
|
||||
// console.debug(`instantiating: $('${selector}')[${jqueryFn}](${componentConfig})`) // eslint-disable-line no-console
|
||||
$(selector)[jqueryFn](componentConfig)
|
||||
|
||||
// add to arrive if present and enabled
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const Ripples = (($) => {
|
|||
template: `<div class='${ClassName.CONTAINER}'></div>`
|
||||
},
|
||||
decorator: {
|
||||
template: `${ClassName.DECORATOR}'></div>`
|
||||
template: `<div class='${ClassName.DECORATOR}'></div>`
|
||||
},
|
||||
trigger: {
|
||||
start: 'mousedown touchstart',
|
||||
|
|
@ -52,14 +52,17 @@ const Ripples = (($) => {
|
|||
this.config = $.extend(true, {}, Default, config)
|
||||
|
||||
// attach initial listener
|
||||
this.$element.on(this.config.triggerStart, this._onStartRipple)
|
||||
this.$element.on(this.config.trigger.start, (event) => {
|
||||
this._onStartRipple(event)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
dispose() {
|
||||
$.removeData(this.$element, DATA_KEY)
|
||||
this.$element = null
|
||||
this.containerElement = null
|
||||
this.decoratorElement = null
|
||||
this.$container = null
|
||||
this.$decorator = null
|
||||
this.config = null
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +72,7 @@ const Ripples = (($) => {
|
|||
_onStartRipple(event) {
|
||||
|
||||
// Verify if the user is just touching on a device and return if so
|
||||
if (this.isTouch() && event.type === 'mousedown') {
|
||||
if (this._isTouch() && event.type === 'mousedown') {
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +89,7 @@ const Ripples = (($) => {
|
|||
}
|
||||
|
||||
// set the location and color each time (even if element is cached)
|
||||
this.decoratorElement.css({
|
||||
this.$decorator.css({
|
||||
left: relX,
|
||||
top: relY,
|
||||
'background-color': this._getRipplesColor()
|
||||
|
|
@ -103,40 +106,43 @@ const Ripples = (($) => {
|
|||
this.rippleEnd()
|
||||
}, this.config.duration)
|
||||
|
||||
// Detect when the user leaves the element (attach only when necessary for performance)
|
||||
this.$element.on(this.config.triggerEnd, () => {
|
||||
this.decoratorElement.data('mousedown', 'off')
|
||||
// Detect when the user leaves the element to cleanup if not already done?
|
||||
this.$element.on(this.config.trigger.end, () => {
|
||||
if (this.$decorator) { // guard against race condition/mouse attack
|
||||
this.$decorator.data('mousedown', 'off')
|
||||
|
||||
if (this.decoratorElement.data('animating') === 'off') {
|
||||
this.rippleOut()
|
||||
if (this.$decorator.data('animating') === 'off') {
|
||||
this.rippleOut()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_findOrCreateContainer() {
|
||||
if (!this.containerElement || !this.containerElement.length > 0) {
|
||||
if (!this.$container || !this.$container.length > 0) {
|
||||
this.$element.append(this.config.container.template)
|
||||
this.containerElement = this.$element.find(Selector.CONTAINER)
|
||||
this.$container = this.$element.find(Selector.CONTAINER)
|
||||
}
|
||||
|
||||
// always add the rippleElement, it is always removed
|
||||
this.containerElement.append(this.config.$element.template)
|
||||
this.decoratorElement = this.containerElement.find(Selector.DECORATOR)
|
||||
this.$container.append(this.config.decorator.template)
|
||||
this.$decorator = this.$container.find(Selector.DECORATOR)
|
||||
}
|
||||
|
||||
// Make sure the ripple has the styles applied (ugly hack but it works)
|
||||
_forceStyleApplication() {
|
||||
return window.getComputedStyle(this.decoratorElement[0]).opacity
|
||||
return window.getComputedStyle(this.$decorator[0]).opacity
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the relX
|
||||
*/
|
||||
_getRelX(event) {
|
||||
let wrapperOffset = this.containerElement.offset()
|
||||
let wrapperOffset = this.$container.offset()
|
||||
|
||||
let result = null
|
||||
if (!this.isTouch()) {
|
||||
if (!this._isTouch()) {
|
||||
// Get the mouse position relative to the ripple wrapper
|
||||
result = event.pageX - wrapperOffset.left
|
||||
} else {
|
||||
|
|
@ -158,10 +164,10 @@ const Ripples = (($) => {
|
|||
* Get the relY
|
||||
*/
|
||||
_getRelY(event) {
|
||||
let containerOffset = this.containerElement.offset()
|
||||
let containerOffset = this.$container.offset()
|
||||
let result = null
|
||||
|
||||
if (!this.isTouch()) {
|
||||
if (!this._isTouch()) {
|
||||
/**
|
||||
* Get the mouse position relative to the ripple wrapper
|
||||
*/
|
||||
|
|
@ -194,7 +200,7 @@ const Ripples = (($) => {
|
|||
/**
|
||||
* Verify if the client is using a mobile device
|
||||
*/
|
||||
isTouch() {
|
||||
_isTouch() {
|
||||
return this.config.touchUserAgentRegex.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
|
|
@ -202,10 +208,12 @@ const Ripples = (($) => {
|
|||
* End the animation of the ripple
|
||||
*/
|
||||
rippleEnd() {
|
||||
this.decoratorElement.data('animating', 'off')
|
||||
if (this.$decorator) { // guard against race condition/mouse attack
|
||||
this.$decorator.data('animating', 'off')
|
||||
|
||||
if (this.decoratorElement.data('mousedown') === 'off') {
|
||||
this.rippleOut(this.decoratorElement)
|
||||
if (this.$decorator.data('mousedown') === 'off') {
|
||||
this.rippleOut(this.$decorator)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,19 +221,21 @@ const Ripples = (($) => {
|
|||
* Turn off the ripple effect
|
||||
*/
|
||||
rippleOut() {
|
||||
this.decoratorElement.off()
|
||||
this.$decorator.off()
|
||||
|
||||
if (Util.transitionEndSupported()) {
|
||||
this.decoratorElement.addClass('ripple-out')
|
||||
this.$decorator.addClass('ripple-out')
|
||||
} else {
|
||||
this.decoratorElement.animate({opacity: 0}, 100, () => {
|
||||
this.decoratorElement.triggerStart('transitionend')
|
||||
this.$decorator.animate({opacity: 0}, 100, () => {
|
||||
this.$decorator.trigger('transitionend')
|
||||
})
|
||||
}
|
||||
|
||||
this.decoratorElement.on(Util.transitionEndSelector(), () => {
|
||||
this.decoratorElement.remove()
|
||||
this.decoratorElement = null
|
||||
this.$decorator.on(Util.transitionEndSelector(), () => {
|
||||
if (this.$decorator) {
|
||||
this.$decorator.remove()
|
||||
this.$decorator = null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +246,7 @@ const Ripples = (($) => {
|
|||
let size = this._getNewSize()
|
||||
|
||||
if (Util.transitionEndSupported()) {
|
||||
this.decoratorElement
|
||||
this.$decorator
|
||||
.css({
|
||||
'-ms-transform': `scale(${size})`,
|
||||
'-moz-transform': `scale(${size})`,
|
||||
|
|
@ -247,14 +257,14 @@ const Ripples = (($) => {
|
|||
.data('animating', 'on')
|
||||
.data('mousedown', 'on')
|
||||
} else {
|
||||
this.decoratorElement.animate({
|
||||
this.$decorator.animate({
|
||||
width: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
|
||||
height: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
|
||||
'margin-left': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
|
||||
'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
|
||||
opacity: 0.2
|
||||
}, this.config.duration, () => {
|
||||
this.decoratorElement.triggerStart('transitionend')
|
||||
this.$decorator.triggerStart('transitionend')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -263,14 +273,14 @@ const Ripples = (($) => {
|
|||
* Get the new size based on the element height/width and the ripple width
|
||||
*/
|
||||
_getNewSize() {
|
||||
return (Math.max(this.$element.outerWidth(), this.$element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5
|
||||
return (Math.max(this.$element.outerWidth(), this.$element.outerHeight()) / this.$decorator.outerWidth()) * 2.5
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(() => {
|
||||
return this.each(function () {
|
||||
let $element = $(this)
|
||||
let data = $element.data(DATA_KEY)
|
||||
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@ const Util = (($) => {
|
|||
!event.ctrlKey
|
||||
&& !event.metaKey
|
||||
&& !event.altKey
|
||||
&& event.which != 8 // backspace
|
||||
&& event.which != 9 // tab
|
||||
&& event.which != 13 // enter
|
||||
&& event.which != 16 // shift
|
||||
&& event.which != 17 // ctrl
|
||||
&& event.which != 20 // caps lock
|
||||
&& event.which != 27 // escape
|
||||
&& event.which !== 8 // backspace
|
||||
&& event.which !== 9 // tab
|
||||
&& event.which !== 13 // enter
|
||||
&& event.which !== 16 // shift
|
||||
&& event.which !== 17 // ctrl
|
||||
&& event.which !== 20 // caps lock
|
||||
&& event.which !== 27 // escape
|
||||
)
|
||||
}
|
||||
return false
|
||||
|
|
@ -90,8 +90,7 @@ const Util = (($) => {
|
|||
describe($element) {
|
||||
if ($element === undefined) {
|
||||
return 'undefined'
|
||||
}
|
||||
else if ($element.length === 0){
|
||||
} else if ($element.length === 0) {
|
||||
return '(no matching elements)'
|
||||
}
|
||||
return `${$element[0].outerHTML.split('>')[0]}>`
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
// mdb default buttons are flat by default
|
||||
.btn {
|
||||
position: relative;
|
||||
margin-bottom: $mdb-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
|
||||
font-size: $mdb-btn-font-size;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
|
||||
will-change: box-shadow, transform;
|
||||
|
||||
@include undo-tab-focus(); // clear out the tab-focus() from BS
|
||||
@include undo-bs-tab-focus();
|
||||
|
||||
//--
|
||||
// Colors
|
||||
|
|
@ -34,28 +35,40 @@
|
|||
// btn-raised
|
||||
&.btn-raised,
|
||||
.btn-group-raised & {
|
||||
&:not(.btn-link) {
|
||||
@include shadow-2dp();
|
||||
|
||||
// contrast bg colors on hover, focus, active
|
||||
// baseline shadow
|
||||
@include shadow-2dp();
|
||||
|
||||
// contrast bg colors on hover, focus, active
|
||||
@include mdb-hover-focus-active() {
|
||||
@include mdb-button-colored-bg(true);
|
||||
//border: 1px solid $red;
|
||||
}
|
||||
|
||||
// enlarged shadow on hover, focus
|
||||
@include hover-focus() {
|
||||
//border: 1px solid $blue;
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
// :active - momentary press: big shadow, release and it is gone
|
||||
// .active - persistent big shadow
|
||||
&.active,
|
||||
&:active {
|
||||
@include focus-shadow();
|
||||
//border: 1px solid $green;
|
||||
}
|
||||
|
||||
// reverse any of the above for links
|
||||
&.btn-link {
|
||||
box-shadow: none;
|
||||
@include mdb-hover-focus-active() {
|
||||
@include mdb-button-colored-bg(true);
|
||||
//border: 1px solid $red;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// enlarged shadow on hover, focus
|
||||
@include hover-focus() {
|
||||
//border: 1px solid $blue;
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
// :active - momentary press: big shadow, release and it is gone
|
||||
// .active - persistent big shadow
|
||||
&.active,
|
||||
&:active {
|
||||
@include focus-shadow();
|
||||
//border: 1px solid $green;
|
||||
}
|
||||
@include mdb-disabled() {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +84,7 @@
|
|||
font-size: $mdb-btn-fab-font-size;
|
||||
line-height: normal;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba($black, 0.12), 0 1px 1px 0 rgba($black, 0.24);
|
||||
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
|
||||
|
||||
.ripple-container {
|
||||
border-radius: 50%;
|
||||
|
|
@ -122,10 +135,7 @@
|
|||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
|
||||
fieldset[disabled][disabled] &,
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled][disabled] {
|
||||
@include mdb-disabled() {
|
||||
color: $mdb-btn-disabled;
|
||||
.theme-dark & {
|
||||
color: $mdb-btn-disabled-dark;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@ form {
|
|||
border-bottom: $input-btn-border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
@include mdb-disabled() {
|
||||
border-bottom: $input-btn-border-width dotted $input-border-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ $mdb-radio-color-disabled-dark: rgba($white, 0.30); // dark theme spec: Disable
|
|||
$mdb-btn-font-size: .875rem !default; // 14px
|
||||
$mdb-btn-font-size-lg: 1rem !default;
|
||||
$mdb-btn-font-size-sm: .75rem !default; // 12px
|
||||
$mdl-btn-border-radius: 2px !default;
|
||||
$mdb-btn-margin-bottom: .3125rem !default; // 5px
|
||||
|
||||
// btn with no other designation
|
||||
$mdb-btn-color: $gray-dark !default;
|
||||
|
|
|
|||
|
|
@ -86,6 +86,11 @@
|
|||
// default
|
||||
@include mdb-button-bg($mdb-btn-bg, $contrast);
|
||||
|
||||
// no bg for links
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
@include mdb-button-bg($btn-primary-bg, $contrast);
|
||||
}
|
||||
|
|
@ -106,7 +111,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin undo-tab-focus() {
|
||||
@mixin undo-bs-tab-focus() {
|
||||
// clear out the tab-focus() from BS
|
||||
&,
|
||||
&:active,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
@mixin mdb-disabled() {
|
||||
fieldset[disabled][disabled] &,
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-selection-color() {
|
||||
.radio label,
|
||||
.radio-inline,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user