mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
release: 3.2.0
This commit is contained in:
Grzegorz
parent
4c1af6d5c3
commit
8482ccd236
|
|
@ -1,5 +1,5 @@
|
|||
MDB5
|
||||
Version: FREE 3.1.0
|
||||
Version: FREE 3.2.0
|
||||
|
||||
Documentation:
|
||||
https://mdbootstrap.com/docs/standard/
|
||||
|
|
|
|||
4
css/mdb.min.css
vendored
4
css/mdb.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/mdb.rtl.min.css
vendored
2
css/mdb.rtl.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
14
index.html
14
index.html
|
|
@ -20,12 +20,12 @@
|
|||
<body>
|
||||
<!-- Start your project here-->
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="mb-4"
|
||||
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
|
||||
style="width: 250px; height: 90px;"
|
||||
style="width: 250px; height: 90px"
|
||||
/>
|
||||
<h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
|
||||
<p class="mb-3">MDB Team</p>
|
||||
|
|
@ -40,10 +40,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- End your project here-->
|
||||
</body>
|
||||
|
||||
<!-- MDB -->
|
||||
<script type="text/javascript" src="js/mdb.min.js"></script>
|
||||
<!-- Custom scripts -->
|
||||
<script type="text/javascript"></script>
|
||||
<!-- MDB -->
|
||||
<script type="text/javascript" src="js/mdb.min.js"></script>
|
||||
<!-- Custom scripts -->
|
||||
<script type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
4
js/mdb.min.js
vendored
4
js/mdb.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mdb-ui-kit",
|
||||
"version": "3.1.0",
|
||||
"version": "3.2.0",
|
||||
"main": "js/mdb.min.js",
|
||||
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
|
||||
"author": "MDBootstrap",
|
||||
|
|
|
|||
258
src/js/free/button.js
Normal file
258
src/js/free/button.js
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
import { getjQuery, onDOMContentLoaded } from '../mdb/util/index';
|
||||
import Data from '../mdb/dom/data';
|
||||
import EventHandler from '../mdb/dom/event-handler';
|
||||
import Manipulator from '../mdb/dom/manipulator';
|
||||
import SelectorEngine from '../mdb/dom/selector-engine';
|
||||
|
||||
import BSButton from '../bootstrap/mdb-prefix/button';
|
||||
|
||||
const NAME = 'button';
|
||||
const DATA_KEY = `mdb.${NAME}`;
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
|
||||
const EVENT_CLICK = `click${EVENT_KEY}`;
|
||||
const EVENT_TRANSITIONEND = 'transitionend';
|
||||
const EVENT_MOUSEENTER = 'mouseenter';
|
||||
const EVENT_MOUSELEAVE = 'mouseleave';
|
||||
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
||||
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
||||
|
||||
const CLASS_NAME_ACTIVE = 'active';
|
||||
const CLASS_NAME_SHOWN = 'shown';
|
||||
const CLASS_NAME_FIXED_ACTION_BTN = 'fixed-action-btn';
|
||||
|
||||
const SELECTOR_BUTTON = '[data-mdb-toggle="button"]';
|
||||
const SELECTOR_FIXED_CONTAINER = '.fixed-action-btn';
|
||||
const SELECTOR_ACTION_BUTTON = '.fixed-action-btn:not(.smooth-scroll) > .btn-floating';
|
||||
const SELECTOR_LIST_ELEMENT = 'ul .btn';
|
||||
const SELECTOR_LIST = 'ul';
|
||||
|
||||
class Button extends BSButton {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this._fn = {};
|
||||
|
||||
if (this._element) {
|
||||
Data.setData(this._element, DATA_KEY, this);
|
||||
this._init();
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
static jQueryInterface(config, options) {
|
||||
return this.each(function () {
|
||||
let data = Data.getData(this, DATA_KEY);
|
||||
const _config = typeof config === 'object' && config;
|
||||
if (!data && /dispose/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this, _config);
|
||||
}
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
data[config](options);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Getters
|
||||
get _actionButton() {
|
||||
return SelectorEngine.findOne(SELECTOR_ACTION_BUTTON, this._element);
|
||||
}
|
||||
|
||||
get _buttonListElements() {
|
||||
return SelectorEngine.find(SELECTOR_LIST_ELEMENT, this._element);
|
||||
}
|
||||
|
||||
get _buttonList() {
|
||||
return SelectorEngine.findOne(SELECTOR_LIST, this._element);
|
||||
}
|
||||
|
||||
get _isTouchDevice() {
|
||||
return 'ontouchstart' in document.documentElement;
|
||||
}
|
||||
|
||||
// Public
|
||||
show() {
|
||||
if (Manipulator.hasClass(this._element, CLASS_NAME_FIXED_ACTION_BTN)) {
|
||||
EventHandler.off(this._buttonList, EVENT_TRANSITIONEND);
|
||||
EventHandler.trigger(this._element, EVENT_SHOW);
|
||||
// EventHandler.on(this._buttonList, EVENT_TRANSITIONEND, this._bindListOpenTransitionEnd);
|
||||
this._bindListOpenTransitionEnd();
|
||||
Manipulator.addStyle(this._element, { height: `${this._fullContainerHeight}px` });
|
||||
this._toggleVisibility(true);
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (Manipulator.hasClass(this._element, CLASS_NAME_FIXED_ACTION_BTN)) {
|
||||
EventHandler.off(this._buttonList, EVENT_TRANSITIONEND);
|
||||
EventHandler.trigger(this._element, EVENT_HIDE);
|
||||
// EventHandler.on(this._buttonList, EVENT_TRANSITIONEND, this._bindListHideTransitionEnd);
|
||||
this._bindListHideTransitionEnd();
|
||||
this._toggleVisibility(false);
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
if (Manipulator.hasClass(this._element, CLASS_NAME_FIXED_ACTION_BTN)) {
|
||||
EventHandler.off(this._actionButton, EVENT_CLICK);
|
||||
this._actionButton.removeEventListener(EVENT_MOUSEENTER, this._fn.mouseenter);
|
||||
this._element.removeEventListener(EVENT_MOUSELEAVE, this._fn.mouseleave);
|
||||
}
|
||||
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// Private
|
||||
_init() {
|
||||
if (Manipulator.hasClass(this._element, CLASS_NAME_FIXED_ACTION_BTN)) {
|
||||
this._saveInitialHeights();
|
||||
this._setInitialStyles();
|
||||
this._bindInitialEvents();
|
||||
}
|
||||
}
|
||||
|
||||
_bindMouseEnter() {
|
||||
this._actionButton.addEventListener(
|
||||
EVENT_MOUSEENTER,
|
||||
// prettier-ignore
|
||||
this._fn.mouseenter = () => {
|
||||
if (!this._isTouchDevice) {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
// prettier-ignore
|
||||
);
|
||||
}
|
||||
|
||||
_bindMouseLeave() {
|
||||
this._element.addEventListener(
|
||||
EVENT_MOUSELEAVE,
|
||||
// prettier-ignore
|
||||
this._fn.mouseleave = () => {
|
||||
this.hide();
|
||||
}
|
||||
// prettier-ignore
|
||||
);
|
||||
}
|
||||
|
||||
_bindClick() {
|
||||
EventHandler.on(this._actionButton, EVENT_CLICK, () => {
|
||||
if (Manipulator.hasClass(this._element, CLASS_NAME_ACTIVE)) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_bindListHideTransitionEnd() {
|
||||
EventHandler.on(this._buttonList, EVENT_TRANSITIONEND, (event) => {
|
||||
if (event.propertyName === 'transform') {
|
||||
EventHandler.off(this._buttonList, EVENT_TRANSITIONEND);
|
||||
this._element.style.height = `${this._initialContainerHeight}px`;
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_bindListOpenTransitionEnd() {
|
||||
EventHandler.on(this._buttonList, EVENT_TRANSITIONEND, (event) => {
|
||||
if (event.propertyName === 'transform') {
|
||||
EventHandler.off(this._buttonList, EVENT_TRANSITIONEND);
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_toggleVisibility(isVisible) {
|
||||
const action = isVisible ? 'addClass' : 'removeClass';
|
||||
const listTranslate = isVisible ? 'translate(0)' : `translateY(${this._fullContainerHeight}px)`;
|
||||
Manipulator.addStyle(this._buttonList, { transform: listTranslate });
|
||||
|
||||
if (this._buttonListElements) {
|
||||
this._buttonListElements.forEach((el) => Manipulator[action](el, CLASS_NAME_SHOWN));
|
||||
}
|
||||
Manipulator[action](this._element, CLASS_NAME_ACTIVE);
|
||||
}
|
||||
|
||||
_getHeight(element) {
|
||||
const computed = window.getComputedStyle(element);
|
||||
const height = parseFloat(computed.getPropertyValue('height'));
|
||||
return height;
|
||||
}
|
||||
|
||||
_saveInitialHeights() {
|
||||
this._initialContainerHeight = this._getHeight(this._element);
|
||||
this._initialListHeight = this._getHeight(this._buttonList);
|
||||
this._fullContainerHeight = this._initialContainerHeight + this._initialListHeight;
|
||||
}
|
||||
|
||||
_bindInitialEvents() {
|
||||
this._bindClick();
|
||||
this._bindMouseEnter();
|
||||
this._bindMouseLeave();
|
||||
}
|
||||
|
||||
_setInitialStyles() {
|
||||
this._buttonList.style.marginBottom = `${this._initialContainerHeight}px`;
|
||||
this._buttonList.style.transform = `translateY(${this._fullContainerHeight}px)`;
|
||||
|
||||
this._element.style.height = `${this._initialContainerHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation - auto initialization
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
SelectorEngine.find(SELECTOR_FIXED_CONTAINER).forEach((element) => {
|
||||
let instance = Button.getInstance(element);
|
||||
if (!instance) {
|
||||
instance = new Button(element);
|
||||
}
|
||||
return instance;
|
||||
});
|
||||
|
||||
SelectorEngine.find(SELECTOR_BUTTON).forEach((element) => {
|
||||
let instance = Button.getInstance(element);
|
||||
if (!instance) {
|
||||
instance = new Button(element);
|
||||
}
|
||||
return instance;
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery();
|
||||
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
$.fn[NAME] = Button.jQueryInterface;
|
||||
$.fn[NAME].Constructor = Button;
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Button.jQueryInterface;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default Button;
|
||||
|
|
@ -20,12 +20,15 @@ const CLASSNAME_NOTCH_LEADING = 'form-notch-leading';
|
|||
const CLASSNAME_NOTCH_MIDDLE = 'form-notch-middle';
|
||||
const CLASSNAME_NOTCH_TRAILING = 'form-notch-trailing';
|
||||
const CLASSNAME_PLACEHOLDER_ACTIVE = 'placeholder-active';
|
||||
const CLASSNAME_HELPER = 'form-helper';
|
||||
const CLASSNAME_COUNTER = 'form-counter';
|
||||
|
||||
const SELECTOR_OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
|
||||
const SELECTOR_OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
|
||||
const SELECTOR_NOTCH = `.${CLASSNAME_NOTCH}`;
|
||||
const SELECTOR_NOTCH_LEADING = `.${CLASSNAME_NOTCH_LEADING}`;
|
||||
const SELECTOR_NOTCH_MIDDLE = `.${CLASSNAME_NOTCH_MIDDLE}`;
|
||||
const SELECTOR_HELPER = `.${CLASSNAME_HELPER}`;
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
|
|
@ -43,7 +46,11 @@ class Input {
|
|||
this._notchMiddle = null;
|
||||
this._notchTrailing = null;
|
||||
this._initiated = false;
|
||||
|
||||
this._helper = null;
|
||||
this._counter = false;
|
||||
this._counterElement = null;
|
||||
this._maxLength = 0;
|
||||
this._leadingIcon = null;
|
||||
if (this._element) {
|
||||
Data.setData(element, DATA_KEY, this);
|
||||
this.init();
|
||||
|
|
@ -71,6 +78,8 @@ class Input {
|
|||
this._applyDivs();
|
||||
this._applyNotch();
|
||||
this._activate();
|
||||
this._getHelper();
|
||||
this._getCounter();
|
||||
this._initiated = true;
|
||||
}
|
||||
|
||||
|
|
@ -79,6 +88,8 @@ class Input {
|
|||
this._getNotchData();
|
||||
this._applyNotch();
|
||||
this._activate();
|
||||
this._getHelper();
|
||||
this._getCounter();
|
||||
}
|
||||
|
||||
forceActive() {
|
||||
|
|
@ -97,6 +108,22 @@ class Input {
|
|||
}
|
||||
|
||||
// Private
|
||||
|
||||
/*
|
||||
_getIcons() {
|
||||
this._leadingIcon = SelectorEngine.findOne('i.leading', this._element);
|
||||
|
||||
if (this._leadingIcon !== null) {
|
||||
this._applyLeadingIcon();
|
||||
}
|
||||
}
|
||||
|
||||
_applyLeadingIcon() {
|
||||
this._label.innerHTML = ` ${this._label.innerHTML}`;
|
||||
this._label.insertBefore(this._leadingIcon, this._label.firstChild);
|
||||
}
|
||||
*/
|
||||
|
||||
_getLabelData() {
|
||||
this._label = SelectorEngine.findOne('label', this._element);
|
||||
if (this._label === null) {
|
||||
|
|
@ -107,6 +134,34 @@ class Input {
|
|||
}
|
||||
}
|
||||
|
||||
_getHelper() {
|
||||
this._helper = SelectorEngine.findOne(SELECTOR_HELPER, this._element);
|
||||
}
|
||||
|
||||
_getCounter() {
|
||||
this._counter = Manipulator.getDataAttribute(this.input, 'showcounter');
|
||||
if (this._counter) {
|
||||
this._maxLength = this.input.maxLength;
|
||||
this._showCounter();
|
||||
}
|
||||
}
|
||||
|
||||
_showCounter() {
|
||||
this._counterElement = document.createElement('div');
|
||||
Manipulator.addClass(this._counterElement, CLASSNAME_COUNTER);
|
||||
const actualLength = this.input.value.length;
|
||||
this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;
|
||||
this._helper.appendChild(this._counterElement);
|
||||
this._bindCounter();
|
||||
}
|
||||
|
||||
_bindCounter() {
|
||||
EventHandler.on(this.input, 'input', () => {
|
||||
const actualLength = this.input.value.length;
|
||||
this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;
|
||||
});
|
||||
}
|
||||
|
||||
_showPlaceholder() {
|
||||
Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// BOOTSTRAP CORE COMPONENTS
|
||||
import Button from './bootstrap/mdb-prefix/button';
|
||||
import Button from './free/button';
|
||||
import Collapse from './bootstrap/mdb-prefix/collapse';
|
||||
import Alert from './free/alert';
|
||||
import Carousel from './free/carousel';
|
||||
|
|
|
|||
|
|
@ -290,3 +290,65 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Fixed option
|
||||
//
|
||||
|
||||
.fixed-action-btn {
|
||||
position: fixed;
|
||||
right: $fixed-action-btn-right;
|
||||
bottom: $fixed-action-btn-bottom;
|
||||
z-index: $zindex-fixed-action-button;
|
||||
display: flex;
|
||||
flex-flow: column-reverse nowrap;
|
||||
align-items: center;
|
||||
padding: $fixed-action-btn-padding-top 20px 20px 20px;
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
& > .btn-floating {
|
||||
position: relative;
|
||||
transform: scale(1.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: transform 0.4s, opacity 0.4s;
|
||||
z-index: -1;
|
||||
li {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
margin-right: auto;
|
||||
margin-bottom: $fixed-action-btn-li-margin-bottom;
|
||||
margin-left: auto;
|
||||
&:first-of-type {
|
||||
margin-top: $fixed-action-btn-li-margin-bottom / 2;
|
||||
}
|
||||
}
|
||||
a {
|
||||
&.btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in;
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active ul {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,5 +14,5 @@
|
|||
$color-base: if($level > 0, $black, $white);
|
||||
$level: abs($level);
|
||||
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
@return mix($color-base, $color, $level);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -475,6 +475,12 @@ $btn-outline-floating-icon-line-height-sm: 1.5625rem !default;
|
|||
$btn-floating-border-radius: 50% !default;
|
||||
|
||||
$btn-block-spacing-y: 0.5rem !default;
|
||||
|
||||
$fixed-action-btn-right: 2.1875rem !default;
|
||||
$fixed-action-btn-bottom: 2.1875rem !default;
|
||||
$fixed-action-btn-padding-top: 0.9375rem !default;
|
||||
$fixed-action-btn-li-margin-bottom: 1.5rem !default;
|
||||
|
||||
// Button group
|
||||
//
|
||||
// Material styling for group of buttons
|
||||
|
|
@ -732,6 +738,7 @@ $form-validation-states-mdb: (
|
|||
// scss-docs-end form-validation-states
|
||||
|
||||
// scss-docs-start zindex-stack
|
||||
$zindex-fixed-action-button: 1030 !default;
|
||||
$zindex-toast: 1060 !default;
|
||||
$zindex-alert: 1070 !default;
|
||||
$zindex-popover: 1080 !default;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
|
||||
.form-control {
|
||||
min-height: auto;
|
||||
padding-top: 5.28px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3.28px;
|
||||
transition: all 0.1s linear;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
transition: all 0.1s linear;
|
||||
|
|
@ -25,6 +26,30 @@
|
|||
|
||||
.form-outline {
|
||||
position: relative;
|
||||
|
||||
.form-helper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
font-size: 0.875em;
|
||||
color: #757575;
|
||||
.form-counter {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.trailing {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
left: initial;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-icon-trailing {
|
||||
padding-right: 2rem !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
min-height: auto;
|
||||
padding-top: $input-padding-top;
|
||||
|
|
|
|||
|
|
@ -64,6 +64,16 @@
|
|||
$input-group-form-outline-border-left-color;
|
||||
}
|
||||
}
|
||||
.form-outline:not(:first-child),
|
||||
.form-outline:not(:first-child) .form-notch-leading {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
.form-outline:not(:last-child),
|
||||
.form-outline:not(:last-child) .form-notch-trailing {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user