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

release: 3.2.0

Browse Source
This commit is contained in:
Grzegorz 2021-01-25 09:33:57 +01:00
parent 4c1af6d5c3
commit 8482ccd236
17 changed files with 438 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.txt
View File

@ -1,5 +1,5 @@
MDB5 MDB5
Version: FREE 3.1.0 Version: FREE 3.2.0
Documentation: Documentation:
https://mdbootstrap.com/docs/standard/ https://mdbootstrap.com/docs/standard/

4
css/mdb.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.min.css.map
View File

File diff suppressed because one or more lines are too long

2
css/mdb.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.rtl.min.css.map
View File

File diff suppressed because one or more lines are too long

14
index.html
View File

@ -20,12 +20,12 @@
<body> <body>
<!-- Start your project here--> <!-- Start your project here-->
<div class="container"> <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"> <div class="text-center">
<img <img
class="mb-4" class="mb-4"
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png" 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> <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> <p class="mb-3">MDB Team</p>
@ -40,10 +40,10 @@
</div> </div>
</div> </div>
<!-- End your project here--> <!-- End your project here-->
</body>
<!-- MDB --> <!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script> <script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts --> <!-- Custom scripts -->
<script type="text/javascript"></script> <script type="text/javascript"></script>
</body>
</html> </html>

4
js/mdb.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/mdb.min.js.map
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mdb-ui-kit", "name": "mdb-ui-kit",
"version": "3.1.0", "version": "3.2.0",
"main": "js/mdb.min.js", "main": "js/mdb.min.js",
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git", "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
"author": "MDBootstrap", "author": "MDBootstrap",

258
src/js/free/button.js Normal file
View 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;

57
src/js/free/input.js
View File

@ -20,12 +20,15 @@ const CLASSNAME_NOTCH_LEADING = 'form-notch-leading';
const CLASSNAME_NOTCH_MIDDLE = 'form-notch-middle'; const CLASSNAME_NOTCH_MIDDLE = 'form-notch-middle';
const CLASSNAME_NOTCH_TRAILING = 'form-notch-trailing'; const CLASSNAME_NOTCH_TRAILING = 'form-notch-trailing';
const CLASSNAME_PLACEHOLDER_ACTIVE = 'placeholder-active'; 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_INPUT = `.${CLASSNAME_WRAPPER} input`;
const SELECTOR_OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`; const SELECTOR_OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
const SELECTOR_NOTCH = `.${CLASSNAME_NOTCH}`; const SELECTOR_NOTCH = `.${CLASSNAME_NOTCH}`;
const SELECTOR_NOTCH_LEADING = `.${CLASSNAME_NOTCH_LEADING}`; const SELECTOR_NOTCH_LEADING = `.${CLASSNAME_NOTCH_LEADING}`;
const SELECTOR_NOTCH_MIDDLE = `.${CLASSNAME_NOTCH_MIDDLE}`; const SELECTOR_NOTCH_MIDDLE = `.${CLASSNAME_NOTCH_MIDDLE}`;
const SELECTOR_HELPER = `.${CLASSNAME_HELPER}`;
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
@ -43,7 +46,11 @@ class Input {
this._notchMiddle = null; this._notchMiddle = null;
this._notchTrailing = null; this._notchTrailing = null;
this._initiated = false; this._initiated = false;
this._helper = null;
this._counter = false;
this._counterElement = null;
this._maxLength = 0;
this._leadingIcon = null;
if (this._element) { if (this._element) {
Data.setData(element, DATA_KEY, this); Data.setData(element, DATA_KEY, this);
this.init(); this.init();
@ -71,6 +78,8 @@ class Input {
this._applyDivs(); this._applyDivs();
this._applyNotch(); this._applyNotch();
this._activate(); this._activate();
this._getHelper();
this._getCounter();
this._initiated = true; this._initiated = true;
} }
@ -79,6 +88,8 @@ class Input {
this._getNotchData(); this._getNotchData();
this._applyNotch(); this._applyNotch();
this._activate(); this._activate();
this._getHelper();
this._getCounter();
} }
forceActive() { forceActive() {
@ -97,6 +108,22 @@ class Input {
} }
// Private // 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() { _getLabelData() {
this._label = SelectorEngine.findOne('label', this._element); this._label = SelectorEngine.findOne('label', this._element);
if (this._label === null) { 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() { _showPlaceholder() {
Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE); Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
} }

2
src/js/mdb.free.js
View File

@ -1,5 +1,5 @@
// BOOTSTRAP CORE COMPONENTS // BOOTSTRAP CORE COMPONENTS
import Button from './bootstrap/mdb-prefix/button'; import Button from './free/button';
import Collapse from './bootstrap/mdb-prefix/collapse'; import Collapse from './bootstrap/mdb-prefix/collapse';
import Alert from './free/alert'; import Alert from './free/alert';
import Carousel from './free/carousel'; import Carousel from './free/carousel';

62
src/scss/free/_buttons.scss
View File

@ -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;
}
}

2
src/scss/free/_functions.scss
View File

@ -14,5 +14,5 @@
$color-base: if($level > 0, $black, $white); $color-base: if($level > 0, $black, $white);
$level: abs($level); $level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval); @return mix($color-base, $color, $level);
} }

7
src/scss/free/_variables.scss
View File

@ -475,6 +475,12 @@ $btn-outline-floating-icon-line-height-sm: 1.5625rem !default;
$btn-floating-border-radius: 50% !default; $btn-floating-border-radius: 50% !default;
$btn-block-spacing-y: 0.5rem !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 // Button group
// //
// Material styling for group of buttons // Material styling for group of buttons
@ -732,6 +738,7 @@ $form-validation-states-mdb: (
// scss-docs-end form-validation-states // scss-docs-end form-validation-states
// scss-docs-start zindex-stack // scss-docs-start zindex-stack
$zindex-fixed-action-button: 1030 !default;
$zindex-toast: 1060 !default; $zindex-toast: 1060 !default;
$zindex-alert: 1070 !default; $zindex-alert: 1070 !default;
$zindex-popover: 1080 !default; $zindex-popover: 1080 !default;

27
src/scss/free/forms/_form-control.scss
View File

@ -4,9 +4,10 @@
.form-control { .form-control {
min-height: auto; min-height: auto;
padding-top: 5.28px; padding-top: 4px;
padding-bottom: 3.28px; padding-bottom: 3.28px;
transition: all 0.1s linear; transition: all 0.1s linear;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
transition: all 0.1s linear; transition: all 0.1s linear;
@ -25,6 +26,30 @@
.form-outline { .form-outline {
position: relative; 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 { .form-control {
min-height: auto; min-height: auto;
padding-top: $input-padding-top; padding-top: $input-padding-top;

10
src/scss/free/forms/_input-group.scss
View File

@ -64,6 +64,16 @@
$input-group-form-outline-border-left-color; $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-'] { .input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {