mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

debugging more buttons, fixed ripples errors in conversion to es6

Browse Source
This commit is contained in:
Kevin Ross 2015-12-16 17:19:02 -06:00
parent 36a11b2c0a
commit 43ac25ae01
12 changed files with 113 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/material-design/buttons.md
View File

@ -12,8 +12,6 @@ group: material-design
## Flat ## Flat
{% example html %} {% 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-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</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-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</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 %} {% endexample %}
### Disabled ### Disabled
@ -41,7 +41,6 @@ group: material-design
## Raised ## Raised
{% example html %} {% 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-primary">Primary</button>
<button type="button" class="btn btn-raised btn-secondary">Secondary</button> <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
<button type="button" class="btn btn-raised btn-success">Success</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-warning">Warning</button>
<button type="button" class="btn btn-raised btn-danger">Danger</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 btn-link">Link</button>
<button type="button" class="btn btn-raised active"><code>.active</code></button>
{% endexample %} {% endexample %}
### Disabled ### Disabled

23
docs/material-design/test.md
View File

@ -5,26 +5,5 @@ group: material-design
--- ---
{% example html %} {% example html %}
<form> <button type="button" class="btn btn-primary">Primary</button>
<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>
{% endexample %} {% endexample %}

2
js/src/autofill.js
View File

@ -79,7 +79,7 @@ const Autofill = (($) => {
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// static // static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(() => { return this.each(function () {
let $element = $(this) let $element = $(this)
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)

2
js/src/baseInput.js
View File

@ -254,7 +254,7 @@ const BaseInput = (($) => {
} }
if (label !== undefined && label.length > 0) { if (label !== undefined && label.length > 0) {
break; break
} }
} }

3
js/src/bootstrapMaterialDesign.js vendored
View File

@ -36,6 +36,7 @@ const BootstrapMaterialDesign = (($) => {
} }
}, },
ripples: { ripples: {
//selector: ['.btn:not(.btn-link):not(.ripple-none)'] // testing only
selector: [ selector: [
'.btn:not(.btn-link):not(.ripple-none)', '.btn:not(.btn-link):not(.ripple-none)',
'.card-image:not(.ripple-none)', '.card-image:not(.ripple-none)',
@ -124,7 +125,7 @@ const BootstrapMaterialDesign = (($) => {
let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}` let jqueryFn = `mdb${component.charAt(0).toUpperCase() + component.slice(1)}`
// instantiate component on selector elements with config // 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) $(selector)[jqueryFn](componentConfig)
// add to arrive if present and enabled // add to arrive if present and enabled

80
js/src/ripples.js
View File

@ -28,7 +28,7 @@ const Ripples = (($) => {
template: `<div class='${ClassName.CONTAINER}'></div>` template: `<div class='${ClassName.CONTAINER}'></div>`
}, },
decorator: { decorator: {
template: `${ClassName.DECORATOR}'></div>` template: `<div class='${ClassName.DECORATOR}'></div>`
}, },
trigger: { trigger: {
start: 'mousedown touchstart', start: 'mousedown touchstart',
@ -52,14 +52,17 @@ const Ripples = (($) => {
this.config = $.extend(true, {}, Default, config) this.config = $.extend(true, {}, Default, config)
// attach initial listener // attach initial listener
this.$element.on(this.config.triggerStart, this._onStartRipple) this.$element.on(this.config.trigger.start, (event) => {
this._onStartRipple(event)
})
} }
dispose() { dispose() {
$.removeData(this.$element, DATA_KEY) $.removeData(this.$element, DATA_KEY)
this.$element = null this.$element = null
this.containerElement = null this.$container = null
this.decoratorElement = null this.$decorator = null
this.config = null this.config = null
} }
@ -69,7 +72,7 @@ const Ripples = (($) => {
_onStartRipple(event) { _onStartRipple(event) {
// Verify if the user is just touching on a device and return if so // 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 return
} }
@ -86,7 +89,7 @@ const Ripples = (($) => {
} }
// set the location and color each time (even if element is cached) // set the location and color each time (even if element is cached)
this.decoratorElement.css({ this.$decorator.css({
left: relX, left: relX,
top: relY, top: relY,
'background-color': this._getRipplesColor() 'background-color': this._getRipplesColor()
@ -103,40 +106,43 @@ const Ripples = (($) => {
this.rippleEnd() this.rippleEnd()
}, this.config.duration) }, this.config.duration)
// Detect when the user leaves the element (attach only when necessary for performance) // Detect when the user leaves the element to cleanup if not already done?
this.$element.on(this.config.triggerEnd, () => { this.$element.on(this.config.trigger.end, () => {
this.decoratorElement.data('mousedown', 'off') if (this.$decorator) { // guard against race condition/mouse attack
this.$decorator.data('mousedown', 'off')
if (this.decoratorElement.data('animating') === 'off') { if (this.$decorator.data('animating') === 'off') {
this.rippleOut() this.rippleOut()
} }
}
}) })
} }
_findOrCreateContainer() { _findOrCreateContainer() {
if (!this.containerElement || !this.containerElement.length > 0) { if (!this.$container || !this.$container.length > 0) {
this.$element.append(this.config.container.template) 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 // always add the rippleElement, it is always removed
this.containerElement.append(this.config.$element.template) this.$container.append(this.config.decorator.template)
this.decoratorElement = this.containerElement.find(Selector.DECORATOR) this.$decorator = this.$container.find(Selector.DECORATOR)
} }
// Make sure the ripple has the styles applied (ugly hack but it works) // Make sure the ripple has the styles applied (ugly hack but it works)
_forceStyleApplication() { _forceStyleApplication() {
return window.getComputedStyle(this.decoratorElement[0]).opacity return window.getComputedStyle(this.$decorator[0]).opacity
} }
/** /**
* Get the relX * Get the relX
*/ */
_getRelX(event) { _getRelX(event) {
let wrapperOffset = this.containerElement.offset() let wrapperOffset = this.$container.offset()
let result = null let result = null
if (!this.isTouch()) { if (!this._isTouch()) {
// Get the mouse position relative to the ripple wrapper // Get the mouse position relative to the ripple wrapper
result = event.pageX - wrapperOffset.left result = event.pageX - wrapperOffset.left
} else { } else {
@ -158,10 +164,10 @@ const Ripples = (($) => {
* Get the relY * Get the relY
*/ */
_getRelY(event) { _getRelY(event) {
let containerOffset = this.containerElement.offset() let containerOffset = this.$container.offset()
let result = null let result = null
if (!this.isTouch()) { if (!this._isTouch()) {
/** /**
* Get the mouse position relative to the ripple wrapper * Get the mouse position relative to the ripple wrapper
*/ */
@ -194,7 +200,7 @@ const Ripples = (($) => {
/** /**
* Verify if the client is using a mobile device * Verify if the client is using a mobile device
*/ */
isTouch() { _isTouch() {
return this.config.touchUserAgentRegex.test(navigator.userAgent) return this.config.touchUserAgentRegex.test(navigator.userAgent)
} }
@ -202,10 +208,12 @@ const Ripples = (($) => {
* End the animation of the ripple * End the animation of the ripple
*/ */
rippleEnd() { 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') { if (this.$decorator.data('mousedown') === 'off') {
this.rippleOut(this.decoratorElement) this.rippleOut(this.$decorator)
}
} }
} }
@ -213,19 +221,21 @@ const Ripples = (($) => {
* Turn off the ripple effect * Turn off the ripple effect
*/ */
rippleOut() { rippleOut() {
this.decoratorElement.off() this.$decorator.off()
if (Util.transitionEndSupported()) { if (Util.transitionEndSupported()) {
this.decoratorElement.addClass('ripple-out') this.$decorator.addClass('ripple-out')
} else { } else {
this.decoratorElement.animate({opacity: 0}, 100, () => { this.$decorator.animate({opacity: 0}, 100, () => {
this.decoratorElement.triggerStart('transitionend') this.$decorator.trigger('transitionend')
}) })
} }
this.decoratorElement.on(Util.transitionEndSelector(), () => { this.$decorator.on(Util.transitionEndSelector(), () => {
this.decoratorElement.remove() if (this.$decorator) {
this.decoratorElement = null this.$decorator.remove()
this.$decorator = null
}
}) })
} }
@ -236,7 +246,7 @@ const Ripples = (($) => {
let size = this._getNewSize() let size = this._getNewSize()
if (Util.transitionEndSupported()) { if (Util.transitionEndSupported()) {
this.decoratorElement this.$decorator
.css({ .css({
'-ms-transform': `scale(${size})`, '-ms-transform': `scale(${size})`,
'-moz-transform': `scale(${size})`, '-moz-transform': `scale(${size})`,
@ -247,14 +257,14 @@ const Ripples = (($) => {
.data('animating', 'on') .data('animating', 'on')
.data('mousedown', 'on') .data('mousedown', 'on')
} else { } else {
this.decoratorElement.animate({ this.$decorator.animate({
width: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2, width: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
height: 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-left': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1), 'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
opacity: 0.2 opacity: 0.2
}, this.config.duration, () => { }, 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 * Get the new size based on the element height/width and the ripple width
*/ */
_getNewSize() { _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
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(() => { return this.each(function () {
let $element = $(this) let $element = $(this)
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)

17
js/src/util.js
View File

@ -65,13 +65,13 @@ const Util = (($) => {
!event.ctrlKey !event.ctrlKey
&& !event.metaKey && !event.metaKey
&& !event.altKey && !event.altKey
&& event.which != 8 // backspace && event.which !== 8 // backspace
&& event.which != 9 // tab && event.which !== 9 // tab
&& event.which != 13 // enter && event.which !== 13 // enter
&& event.which != 16 // shift && event.which !== 16 // shift
&& event.which != 17 // ctrl && event.which !== 17 // ctrl
&& event.which != 20 // caps lock && event.which !== 20 // caps lock
&& event.which != 27 // escape && event.which !== 27 // escape
) )
} }
return false return false
@ -90,8 +90,7 @@ const Util = (($) => {
describe($element) { describe($element) {
if ($element === undefined) { if ($element === undefined) {
return 'undefined' return 'undefined'
} } else if ($element.length === 0) {
else if ($element.length === 0){
return '(no matching elements)' return '(no matching elements)'
} }
return `${$element[0].outerHTML.split('>')[0]}>` return `${$element[0].outerHTML.split('>')[0]}>`

24
scss/_buttons.scss
View File

@ -3,6 +3,7 @@
// mdb default buttons are flat by default // mdb default buttons are flat by default
.btn { .btn {
position: relative; 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; font-size: $mdb-btn-font-size;
text-decoration: none; text-decoration: none;
text-transform: uppercase; 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; 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; will-change: box-shadow, transform;
@include undo-tab-focus(); // clear out the tab-focus() from BS @include undo-bs-tab-focus();
//-- //--
// Colors // Colors
@ -34,7 +35,8 @@
// btn-raised // btn-raised
&.btn-raised, &.btn-raised,
.btn-group-raised & { .btn-group-raised & {
&:not(.btn-link) {
// baseline shadow
@include shadow-2dp(); @include shadow-2dp();
// contrast bg colors on hover, focus, active // contrast bg colors on hover, focus, active
@ -56,6 +58,17 @@
@include focus-shadow(); @include focus-shadow();
//border: 1px solid $green; //border: 1px solid $green;
} }
// reverse any of the above for links
&.btn-link {
box-shadow: none;
@include mdb-hover-focus-active() {
box-shadow: none;
}
}
@include mdb-disabled() {
box-shadow: none;
} }
} }
@ -71,7 +84,7 @@
font-size: $mdb-btn-fab-font-size; font-size: $mdb-btn-fab-font-size;
line-height: normal; line-height: normal;
border-radius: 50%; 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 { .ripple-container {
border-radius: 50%; border-radius: 50%;
@ -122,10 +135,7 @@
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
fieldset[disabled][disabled] &, @include mdb-disabled() {
&.disabled,
&:disabled,
&[disabled][disabled] {
color: $mdb-btn-disabled; color: $mdb-btn-disabled;
.theme-dark & { .theme-dark & {
color: $mdb-btn-disabled-dark; color: $mdb-btn-disabled-dark;

3
scss/_forms.scss
View File

@ -17,8 +17,7 @@ form {
border-bottom: $input-btn-border-width solid $input-border-color; border-bottom: $input-btn-border-width solid $input-border-color;
} }
&[disabled], @include mdb-disabled() {
fieldset[disabled] & {
border-bottom: $input-btn-border-width dotted $input-border-color; border-bottom: $input-btn-border-width dotted $input-border-color;
} }
} }

2
scss/_variables.scss
View File

@ -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: .875rem !default; // 14px
$mdb-btn-font-size-lg: 1rem !default; $mdb-btn-font-size-lg: 1rem !default;
$mdb-btn-font-size-sm: .75rem !default; // 12px $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 // btn with no other designation
$mdb-btn-color: $gray-dark !default; $mdb-btn-color: $gray-dark !default;

7
scss/mixins/_buttons.scss
View File

@ -86,6 +86,11 @@
// default // default
@include mdb-button-bg($mdb-btn-bg, $contrast); @include mdb-button-bg($mdb-btn-bg, $contrast);
// no bg for links
&.btn-link {
background-color: transparent;
}
&.btn-primary { &.btn-primary {
@include mdb-button-bg($btn-primary-bg, $contrast); @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 // clear out the tab-focus() from BS
&, &,
&:active, &:active,

9
scss/mixins/_forms.scss
View File

@ -1,3 +1,12 @@
@mixin mdb-disabled() {
fieldset[disabled][disabled] &,
&.disabled,
&:disabled,
&[disabled] {
@content
}
}
@mixin mdb-selection-color() { @mixin mdb-selection-color() {
.radio label, .radio label,
.radio-inline, .radio-inline,