mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

2.2.0

Browse Source
This commit is contained in:
Adam Jakubowski 2020-12-29 14:26:41 +01:00
parent 360fc5c0d2
commit d84fef8677
26 changed files with 4146 additions and 1794 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
Version: FREE 2.1.0
Version: FREE 2.2.0
Documentation:
https://mdbootstrap.com/docs/standard/

14
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

118
index.html
View File

@ -17,53 +17,38 @@
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
<!-- Custom styles -->
<style></style>
<style>
body {
background-color: #2e2e2e;
}
.text-poppy-red {
color: #ef5350 !important;
}
​ .btn-poppy-red {
background-color: #ef5350 !important;
}
​ .bg-poppy-red {
background-color: #ef5350 !important;
}
</style>
</head>
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="text-center">
<!-- <i class="fas fa-ticket-alt fa-10x"></i> -->
<img
src="https://mdbootstrap.com/img/Marketing/other/mdb50off.png"
height="150px"
width="150px"
/>
<h5 class="mb-3">Release surprise! 50% OFF MDB 5 PRO</h5>
<p>
Use this coupon code before the next release to claim the reward.<br />Hurry up & don't
<h1 class="text-white text-poppy-red">BLACK NOVEMBER SURPRISE!</h1>
<i class="fas fa-shopping-basket text-white fa-10x"></i>
<p class="mt-2 text-white">
Check what we have prepared and start using the richest UI Kit today.<br />Hurry up & don't
loose your chance.
</p>
<p>
<code class="text-uppercase h1 px-2 rounded bg-dark text-white">MB8XW23V</code>
<a type="button" class="btn btn-danger btn-rounded btn-lg text-white bg-poppy-red" href="https://mdbootstrap.com/sale/" ><i class="fas fa-cart-arrow-down"></i> CLAIM OFFER</a>
</p>
<a
class="btn btn-primary btn-lg"
onclick="copy('MB8XW23V');toastr.info('Coupon code copied! Use it on the checkout.');"
target="_blank"
role="button"
id="code-button"
>CLAIM DISCOUNT</a
>
<a
class="btn btn-outline-primary btn-lg"
href="https://mdbootstrap.com/docs/standard/getting-started/"
target="_blank"
role="button"
>START TUTORIAL</a
>
<div class="my-2 alert alert-success" id="code-success" style="display: none;">
Copied
</div>
<p>See <a href="https://mdbootstrap.com/docs/standard/pro/">prices</a></p>
<h5 class="h1-responsive text-uppercase mt-3">
the code <span class="font-weight-bold"></span> expires in:<br />
<span class="font-weight-bold" id="time-counter"></span>
</h5>
</div>
</div>
</div>
@ -73,62 +58,5 @@
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript">
var button = document.getElementById('code-button');
button.onclick = function () {
var div = document.getElementById('code-success');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
function copy(text) {
var textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
// Ad counter
// Set the date we're counting down to
var countDownDate = new Date(Date.UTC(2020, 10, 17, 10, 00, 00));
var counterElement = document.getElementById('time-counter');
// Update the count down every 1 second
function startCounter() {
//wrapped in an if to prevent console errors if the element isn't found on the page
if (counterElement == null) {
return;
} else {
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
counterElement.innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById('time-counter').innerHTML =
'<p class="h3 grey-text">Sale ended :(</p>';
}
}, 1000);
}
}
startCounter();
</script>
<script type="text/javascript"></script>
</html>

6
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",
"version": "2.1.0",
"version": "2.2.0",
"main": "js/mdb.min.js",
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
"author": "MDBootstrap",

94
src/js/free/alert.js Normal file
View File

@ -0,0 +1,94 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSAlert from '../bootstrap/src/alert';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'alert';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_CLOSE_BS = 'close.bs.alert';
const EVENT_CLOSED_BS = 'closed.bs.alert';
const EVENT_CLOSE = `close${EVENT_KEY}`;
const EVENT_CLOSED = `closed${EVENT_KEY}`;
const SELECTOR_ALERT = '.alert';
class Alert extends BSAlert {
constructor(element, data = {}) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_CLOSE_BS);
EventHandler.off(this._element, EVENT_CLOSED_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindCloseEvent();
this._bindClosedEvent();
}
_bindCloseEvent() {
EventHandler.on(this._element, EVENT_CLOSE_BS, () => {
EventHandler.trigger(this._element, EVENT_CLOSE);
});
}
_bindClosedEvent() {
EventHandler.on(this._element, EVENT_CLOSED_BS, () => {
EventHandler.trigger(this._element, EVENT_CLOSED);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_ALERT).forEach((el) => {
let instance = Alert.getInstance(el);
if (!instance) {
instance = new Alert(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Alert.jQueryInterface;
$.fn[NAME].Constructor = Alert;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Alert.jQueryInterface;
};
}
export default Alert;

104
src/js/free/carousel.js Normal file
View File

@ -0,0 +1,104 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSCarousel from '../bootstrap/src/carousel';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'carousel';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SLIDE_BS = 'slide.bs.carousel';
const EVENT_SLID_BS = 'slid.bs.carousel';
const EVENT_SLIDE = `slide${EVENT_KEY}`;
const EVENT_SLID = `slid${EVENT_KEY}`;
const SELECTOR_DATA_RIDE = '[data-ride="carousel"]';
class Carousel extends BSCarousel {
constructor(element, data) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SLIDE_BS);
EventHandler.off(this._element, EVENT_SLID_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindSlideEvent();
this._bindSlidEvent();
}
_bindSlideEvent() {
EventHandler.on(this._element, EVENT_SLIDE_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SLIDE, {
relatedTarget: e.relatedTarget,
direction: e.direction,
from: e.from,
to: e.to,
});
});
}
_bindSlidEvent() {
EventHandler.on(this._element, EVENT_SLID_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SLID, {
relatedTarget: e.relatedTarget,
direction: e.direction,
from: e.from,
to: e.to,
});
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_RIDE).forEach((el) => {
let instance = Carousel.getInstance(el);
if (!instance) {
instance = new Carousel(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Carousel.jQueryInterface;
$.fn[NAME].Constructor = Carousel;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Carousel.jQueryInterface;
};
}
export default Carousel;

29
src/js/free/dropdown.js
View File

@ -11,6 +11,9 @@ import Manipulator from '../bootstrap/src/dom/manipulator';
*/
const NAME = 'dropdown';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const SELECTOR_EXPAND = '[data-toggle="dropdown"]';
const Default = {
@ -36,6 +39,12 @@ const DefaultType = {
const EVENT_HIDE = 'hide.bs.dropdown';
const EVENT_HIDDEN = 'hidden.bs.dropdown';
const EVENT_SHOW = 'show.bs.dropdown';
const EVENT_SHOWN = 'shown.bs.dropdown';
const EVENT_HIDE_MDB = `hide${EVENT_KEY}`;
const EVENT_HIDDEN_MDB = `hidden${EVENT_KEY}`;
const EVENT_SHOW_MDB = `show${EVENT_KEY}`;
const EVENT_SHOWN_MDB = `shown${EVENT_KEY}`;
const ANIMATION_CLASS = 'animation';
const ANIMATION_SHOW_CLASS = 'fade-in';
@ -59,6 +68,7 @@ class Dropdown extends BSDropdown {
dispose() {
EventHandler.off(this._element, EVENT_SHOW);
EventHandler.off(this._parent, EVENT_SHOWN);
EventHandler.off(this._parent, EVENT_HIDE);
EventHandler.off(this._parent, EVENT_HIDDEN);
super.dispose();
@ -72,6 +82,7 @@ class Dropdown extends BSDropdown {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
}
@ -87,20 +98,32 @@ class Dropdown extends BSDropdown {
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW, () => {
EventHandler.on(this._element, EVENT_SHOW, (e) => {
EventHandler.trigger(this._element, EVENT_SHOW_MDB, { relatedTarget: e.relatedTarget });
this._dropdownAnimationStart('show');
});
}
_bindShownEvent() {
EventHandler.on(this._parent, EVENT_SHOWN, (e) => {
EventHandler.trigger(this._parent, EVENT_SHOWN_MDB, { relatedTarget: e.relatedTarget });
});
}
_bindHideEvent() {
EventHandler.on(this._parent, EVENT_HIDE, () => {
EventHandler.on(this._parent, EVENT_HIDE, (e) => {
EventHandler.trigger(this._parent, EVENT_HIDE_MDB, { relatedTarget: e.relatedTarget });
this._menuStyle = this._menu.style.cssText;
this._xPlacement = this._menu.getAttribute('x-placement');
});
}
_bindHiddenEvent() {
EventHandler.on(this._parent, EVENT_HIDDEN, () => {
EventHandler.on(this._parent, EVENT_HIDDEN, (e) => {
EventHandler.trigger(this._parent, EVENT_HIDDEN_MDB, { relatedTarget: e.relatedTarget });
this._menu.style.cssText = this._menuStyle;
this._menu.setAttribute('x-placement', this._xPlacement);

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

@ -1,4 +1,4 @@
import { element } from '../mdb/util/index';
import { element, getjQuery } from '../mdb/util/index';
import Data from '../mdb/dom/data';
import EventHandler from '../bootstrap/src/dom/event-handler';
import Manipulator from '../mdb/dom/manipulator';
@ -86,6 +86,10 @@ class Input {
Manipulator.addClass(this.input, CLASSNAME_ACTIVE);
}
forceInactive() {
Manipulator.removeClass(this.input, CLASSNAME_ACTIVE);
}
dispose() {
this._removeBorder();
@ -208,6 +212,25 @@ class Input {
};
}
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 Input(this, _config);
}
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`);
}
data[config](options);
}
});
}
static getInstance(element) {
return Data.getData(element, DATA_KEY);
}
@ -224,12 +247,16 @@ EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(ne
EventHandler.on(window, 'shown.bs.modal', (e) => {
SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
});
@ -237,12 +264,16 @@ EventHandler.on(window, 'shown.bs.modal', (e) => {
EventHandler.on(window, 'shown.bs.dropdown', (e) => {
SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
});
@ -252,12 +283,16 @@ EventHandler.on(window, 'shown.bs.tab', (e) => {
const target = SelectorEngine.findOne(`#${targetId}`);
SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) return;
if (!instance) {
return;
}
instance.update();
});
});
@ -265,11 +300,43 @@ EventHandler.on(window, 'shown.bs.tab', (e) => {
// auto-init
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).map((element) => new Input(element));
// form reset handler
EventHandler.on(window, 'reset', (e) => {
SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) {
return;
}
instance.forceInactive();
});
SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode);
if (!instance) {
return;
}
instance.forceInactive();
});
});
// auto-fill
EventHandler.on(window, 'onautocomplete', (e) => {
const instance = Input.getInstance(e.target.parentNode);
if (!instance) return;
if (!instance || !e.cancelable) {
return;
}
instance.forceActive();
});
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Input.jQueryInterface;
$.fn[NAME].Constructor = Input;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Input.jQueryInterface;
};
}
export default Input;

127
src/js/free/modal.js Normal file
View File

@ -0,0 +1,127 @@
import { getjQuery, getSelectorFromElement } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSModal from '../bootstrap/src/modal';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'modal';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_HIDE_BS = 'hide.bs.modal';
const EVENT_HIDE_PREVENTED_BS = 'hidePrevented.bs.modal';
const EVENT_HIDDEN_BS = 'hidden.bs.modal';
const EVENT_SHOW_BS = 'show.bs.modal';
const EVENT_SHOWN_BS = 'shown.bs.modal';
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]';
class Modal extends BSModal {
constructor(element, data) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SHOW_BS);
EventHandler.off(this._element, EVENT_SHOWN_BS);
EventHandler.off(this._element, EVENT_HIDE_BS);
EventHandler.off(this._element, EVENT_HIDDEN_BS);
EventHandler.off(this._element, EVENT_HIDE_PREVENTED_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindHidePreventedEvent();
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget: e.relatedTarget });
});
}
_bindShownEvent() {
EventHandler.on(this._element, EVENT_SHOWN_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget: e.relatedTarget });
});
}
_bindHideEvent() {
EventHandler.on(this._element, EVENT_HIDE_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDDEN);
});
}
_bindHidePreventedEvent() {
EventHandler.on(this._element, EVENT_HIDE_PREVENTED_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
const selector = getSelectorFromElement(el);
const selectorElement = SelectorEngine.findOne(selector);
let instance = Modal.getInstance(selectorElement);
if (!instance) {
instance = new Modal(selectorElement);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Modal.jQueryInterface;
$.fn[NAME].Constructor = Modal;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Modal.jQueryInterface;
};
}
export default Modal;

124
src/js/free/popover.js Normal file
View File

@ -0,0 +1,124 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSPopover from '../bootstrap/src/popover';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'popover';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.bs.popover';
const EVENT_SHOWN_BS = 'shown.bs.popover';
const EVENT_HIDE_BS = 'hide.bs.popover';
const EVENT_HIDDEN_BS = 'hidden.bs.popover';
const EVENT_INSERTED_BS = 'inserted.bs.popover';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_INSERTED = `inserted${EVENT_KEY}`;
const SELECTOR_DATA_TOGGLE = '[data-toggle="popover"]';
class Popover extends BSPopover {
constructor(element, data) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this.element, EVENT_SHOW_BS);
EventHandler.off(this.element, EVENT_SHOWN_BS);
EventHandler.off(this.element, EVENT_HIDE_BS);
EventHandler.off(this.element, EVENT_HIDDEN_BS);
EventHandler.off(this.element, EVENT_INSERTED_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindInsertedEvent();
}
_bindShowEvent() {
EventHandler.on(this.element, EVENT_SHOW_BS, () => {
EventHandler.trigger(this.element, EVENT_SHOW);
});
}
_bindShownEvent() {
EventHandler.on(this.element, EVENT_SHOWN_BS, () => {
EventHandler.trigger(this.element, EVENT_SHOWN);
});
}
_bindHideEvent() {
EventHandler.on(this.element, EVENT_HIDE_BS, () => {
EventHandler.trigger(this.element, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this.element, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this.element, EVENT_HIDDEN);
});
}
_bindInsertedEvent() {
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
EventHandler.trigger(this.element, EVENT_INSERTED);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
let instance = Popover.getInstance(el);
if (!instance) {
instance = new Popover(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Popover.jQueryInterface;
$.fn[NAME].Constructor = Popover;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Popover.jQueryInterface;
};
}
export default Popover;

157
src/js/free/range.js Normal file
View File

@ -0,0 +1,157 @@
import { getjQuery, element } 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';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'range';
const DATA_KEY = 'mdb.range';
const CLASSNAME_THUMB = 'thumb';
const CLASSNAME_WRAPPER = 'range';
const CLASSNAME_ACTIVE = 'thumb-active';
const CLASSNAME_THUMB_VALUE = 'thumb-value';
const SELECTOR_THUMB_VALUE = `.${CLASSNAME_THUMB_VALUE}`;
const SELECTOR_WRAPPER = `.${CLASSNAME_WRAPPER}`;
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Range {
constructor(element) {
this._element = element;
this._initiated = false;
if (this._element) {
Data.setData(element, DATA_KEY, this);
this.init();
}
}
// Getters
static get NAME() {
return NAME;
}
get rangeInput() {
return SelectorEngine.findOne('input[type=range]', this._element);
}
// Public
init() {
if (this._initiated) {
return;
}
this._addThumb();
this._updateValue();
this._thumbPositionUpdate();
this._handleEvents();
this._initiated = true;
}
dispose() {
this._disposeEvents();
Data.removeData(this._element, DATA_KEY);
this._element = null;
}
// Private
_addThumb() {
const RANGE_THUMB = element('span');
Manipulator.addClass(RANGE_THUMB, CLASSNAME_THUMB);
RANGE_THUMB.innerHTML = '<span class="thumb-value"></span>';
this._element.append(RANGE_THUMB);
}
_updateValue() {
const thumbValue = SelectorEngine.findOne(SELECTOR_THUMB_VALUE, this._element);
thumbValue.textContent = this.rangeInput.value;
this.rangeInput.oninput = () => (thumbValue.textContent = this.rangeInput.value);
}
_handleEvents() {
EventHandler.on(this.rangeInput, 'mousedown', () => this._showThumb());
EventHandler.on(this.rangeInput, 'mouseup', () => this._hideThumb());
EventHandler.on(this.rangeInput, 'touchstart', () => this._showThumb());
EventHandler.on(this.rangeInput, 'touchend', () => this._hideThumb());
EventHandler.on(this.rangeInput, 'input', () => this._thumbPositionUpdate());
}
_disposeEvents() {
EventHandler.off(this.rangeInput, 'mousedown', this._showThumb);
EventHandler.off(this.rangeInput, 'mouseup', this._hideThumb);
EventHandler.off(this.rangeInput, 'touchstart', this._showThumb);
EventHandler.off(this.rangeInput, 'touchend', this._hideThumb);
EventHandler.off(this.rangeInput, 'input', this._thumbPositionUpdate);
}
_showThumb() {
Manipulator.addClass(this._element.lastElementChild, CLASSNAME_ACTIVE);
}
_hideThumb() {
Manipulator.removeClass(this._element.lastElementChild, CLASSNAME_ACTIVE);
}
_thumbPositionUpdate() {
const rangeInput = this.rangeInput;
const inputValue = rangeInput.value;
const minValue = rangeInput.min ? rangeInput.min : 0;
const maxValue = rangeInput.max ? rangeInput.max : 100;
const thumb = this._element.lastElementChild;
const newValue = Number(((inputValue - minValue) * 100) / (maxValue - minValue));
thumb.firstElementChild.textContent = inputValue;
Manipulator.style(thumb, { left: `calc(${newValue}% + (${8 - newValue * 0.15}px))` });
}
// Static
static getInstance(element) {
return Data.getData(element, DATA_KEY);
}
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 Range(this, _config);
}
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`);
}
data[config](options);
}
});
}
}
// auto-init
SelectorEngine.find(SELECTOR_WRAPPER).map((element) => new Range(element));
// jQuery init
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Range.jQueryInterface;
$.fn[NAME].Constructor = Range;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Range.jQueryInterface;
};
}
export default Range;

8
src/js/free/ripple.js
View File

@ -31,7 +31,7 @@ const BOOTSTRAP_COLORS = [
'dark',
];
// Sets walue when run opacity transition
// Sets value when run opacity transition
// Hide element after 50% (0.5) time of animation and finish on 100%
const TRANSITION_BREAK_OPACITY = 0.5;
@ -105,7 +105,7 @@ class Ripple {
}
_addClickEvent(target) {
EventHandler.on(target, 'click', this._clickHandler);
EventHandler.on(target, 'mousedown', this._clickHandler);
}
_createRipple(event) {
@ -342,8 +342,8 @@ class Ripple {
* ------------------------------------------------------------------------
*/
SELECTOR_COMPONENT.forEach((slector) => {
EventHandler.one(document, 'click', slector, Ripple.autoInitial(new Ripple()));
SELECTOR_COMPONENT.forEach((selector) => {
EventHandler.one(document, 'mousedown', selector, Ripple.autoInitial(new Ripple()));
});
/**

90
src/js/free/scrollspy.js Normal file
View File

@ -0,0 +1,90 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import Manipulator from '../mdb/dom/manipulator';
import BSScrollSpy from '../bootstrap/src/scrollspy';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'scrollspy';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_ACTIVATE_BS = 'activate.bs.scrollspy';
const EVENT_ACTIVATE = `activate${EVENT_KEY}`;
const SELECTOR_DATA_SPY = '[data-spy="scroll"]';
class ScrollSpy extends BSScrollSpy {
constructor(element, data) {
super(element, data);
this._scrollElement = element.tagName === 'BODY' ? window : element;
this._init();
}
dispose() {
EventHandler.off(this._scrollElement, EVENT_ACTIVATE_BS);
this._scrollElement = null;
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindActivateEvent();
}
_bindActivateEvent() {
EventHandler.on(this._scrollElement, EVENT_ACTIVATE_BS, (e) => {
EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
relatedTarget: e.relatedTarget,
});
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_SPY).forEach((el) => {
let instance = ScrollSpy.getInstance(el);
if (!instance) {
instance = new ScrollSpy(el, Manipulator.getDataAttributes(el));
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = ScrollSpy.jQueryInterface;
$.fn[NAME].Constructor = ScrollSpy;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return ScrollSpy.jQueryInterface;
};
}
export default ScrollSpy;

195
src/js/free/tab.js Normal file
View File

@ -0,0 +1,195 @@
import { getjQuery, getElementFromSelector } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSTab from '../bootstrap/src/tab';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tab';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.bs.tab';
const EVENT_SHOWN_BS = 'shown.bs.tab';
const EVENT_HIDE_BS = 'hide.bs.tab';
const EVENT_HIDDEN_BS = 'hidden.bs.tab';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const CLASS_NAME_ACTIVE = 'active';
const CLASS_NAME_DISABLED = 'disabled';
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group';
const SELECTOR_ACTIVE = '.active';
const SELECTOR_ACTIVE_UL = ':scope > li > .active';
const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]';
class Tab extends BSTab {
constructor(element) {
super(element);
this._previous = null;
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SHOW_BS);
EventHandler.off(this._element, EVENT_SHOWN_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Override
show() {
if (
(this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
this._element.classList.contains(CLASS_NAME_ACTIVE)) ||
this._element.classList.contains(CLASS_NAME_DISABLED)
) {
return;
}
const target = getElementFromSelector(this._element);
const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP);
if (listElement) {
const itemSelector =
listElement.nodeName === 'UL' || listElement.nodeName === 'OL'
? SELECTOR_ACTIVE_UL
: SELECTOR_ACTIVE;
this._previous = SelectorEngine.find(itemSelector, listElement);
this._previous = this._previous[this._previous.length - 1];
}
let hideEvent = null;
let hideEventMdb = null;
if (this._previous) {
hideEvent = EventHandler.trigger(this._previous, EVENT_HIDE_BS, {
relatedTarget: this._element,
});
hideEventMdb = EventHandler.trigger(this._previous, EVENT_HIDE, {
relatedTarget: this._element,
});
}
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW_BS, {
relatedTarget: this._previous,
});
if (
showEvent.defaultPrevented ||
(hideEvent !== null && hideEvent.defaultPrevented) ||
(hideEventMdb !== null && hideEventMdb.defaultPrevented)
) {
return;
}
this._activate(this._element, listElement);
const complete = () => {
EventHandler.trigger(this._previous, EVENT_HIDDEN_BS, {
relatedTarget: this._element,
});
EventHandler.trigger(this._previous, EVENT_HIDDEN, {
relatedTarget: this._element,
});
EventHandler.trigger(this._element, EVENT_SHOWN_BS, {
relatedTarget: this._previous,
});
};
if (target) {
this._activate(target, target.parentNode, complete);
} else {
complete();
}
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SHOW, {
relatedTarget: e.relatedTarget,
});
});
}
_bindShownEvent() {
EventHandler.on(this._element, EVENT_SHOWN_BS, (e) => {
EventHandler.trigger(this._element, EVENT_SHOWN, {
relatedTarget: e.relatedTarget,
});
});
}
_bindHideEvent() {
EventHandler.on(this._previous, EVENT_HIDE_BS, () => {
EventHandler.trigger(this._previous, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this._previous, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this._previous, EVENT_HIDDEN);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
let instance = Tab.getInstance(el);
if (!instance) {
instance = new Tab(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Tab.jQueryInterface;
$.fn[NAME].Constructor = Tab;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Tab.jQueryInterface;
};
}
export default Tab;

114
src/js/free/toast.js Normal file
View File

@ -0,0 +1,114 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSToast from '../bootstrap/src/toast';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'toast';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.bs.toast';
const EVENT_SHOWN_BS = 'shown.bs.toast';
const EVENT_HIDE_BS = 'hide.bs.toast';
const EVENT_HIDDEN_BS = 'hidden.bs.toast';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const SELECTOR_TOAST = '.toast';
class Toast extends BSToast {
constructor(element, data) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SHOW_BS);
EventHandler.off(this._element, EVENT_SHOWN_BS);
EventHandler.off(this._element, EVENT_HIDE_BS);
EventHandler.off(this._element, EVENT_HIDDEN_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW_BS, () => {
EventHandler.trigger(this._element, EVENT_SHOW);
});
}
_bindShownEvent() {
EventHandler.on(this._element, EVENT_SHOWN_BS, () => {
EventHandler.trigger(this._element, EVENT_SHOWN);
});
}
_bindHideEvent() {
EventHandler.on(this._element, EVENT_HIDE_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDDEN);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_TOAST).forEach((el) => {
let instance = Toast.getInstance(el);
if (!instance) {
instance = new Toast(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Toast.jQueryInterface;
$.fn[NAME].Constructor = Toast;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Toast.jQueryInterface;
};
}
export default Toast;

124
src/js/free/tooltip.js Normal file
View File

@ -0,0 +1,124 @@
import { getjQuery } from '../mdb/util/index';
import EventHandler from '../bootstrap/src/dom/event-handler';
import BSTooltip from '../bootstrap/src/tooltip';
import SelectorEngine from '../mdb/dom/selector-engine';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tooltip';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_HIDE_BS = 'hide.bs.tooltip';
const EVENT_HIDDEN_BS = 'hidden.bs.tooltip';
const EVENT_SHOW_BS = 'show.bs.tooltip';
const EVENT_SHOWN_BS = 'shown.bs.tooltip';
const EVENT_INSERTED_BS = 'inserted.bs.tooltip';
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 EVENT_INSERTED = `inserted${EVENT_KEY}`;
const SELECTOR_DATA_TOGGLE = '[data-toggle="tooltip"]';
class Tooltip extends BSTooltip {
constructor(element, data) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SHOW_BS);
EventHandler.off(this._element, EVENT_SHOWN_BS);
EventHandler.off(this._element, EVENT_HIDE_BS);
EventHandler.off(this._element, EVENT_HIDDEN_BS);
EventHandler.off(this._element, EVENT_INSERTED_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindHidePreventedEvent();
}
_bindShowEvent() {
EventHandler.on(this.element, EVENT_SHOW_BS, () => {
EventHandler.trigger(this.element, EVENT_SHOW);
});
}
_bindShownEvent() {
EventHandler.on(this.element, EVENT_SHOWN_BS, () => {
EventHandler.trigger(this.element, EVENT_SHOWN);
});
}
_bindHideEvent() {
EventHandler.on(this.element, EVENT_HIDE_BS, () => {
EventHandler.trigger(this.element, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this.element, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this.element, EVENT_HIDDEN);
});
}
_bindHidePreventedEvent() {
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
EventHandler.trigger(this.element, EVENT_INSERTED);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
let instance = Tooltip.getInstance(el);
if (!instance) {
instance = new Tooltip(el);
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Tooltip.jQueryInterface;
$.fn[NAME].Constructor = Tooltip;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Tooltip.jQueryInterface;
};
}
export default Tooltip;

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

@ -1,24 +1,20 @@
// BOOTSTRAP CORE COMPONENTS
import Alert from './bootstrap/src/alert';
import Button from './bootstrap/src/button';
import Carousel from './bootstrap/src/carousel';
import Collapse from './bootstrap/src/collapse';
import Modal from './bootstrap/src/modal';
import Popover from './bootstrap/src/popover';
import ScrollSpy from './bootstrap/src/scrollspy';
import Tab from './bootstrap/src/tab';
import Tooltip from './bootstrap/src/tooltip';
import Toast from './bootstrap/src/toast';
import Alert from './free/alert';
import Button from './bootstrap/src/button';
import Carousel from './free/carousel';
import Modal from './free/modal';
import Popover from './free/popover';
import ScrollSpy from './free/scrollspy';
import Tab from './free/tab';
import Tooltip from './free/tooltip';
import Toast from './free/toast';
// MDB FREE COMPONENTS
import Input from './free/input';
import Dropdown from './free/dropdown';
import Ripple from './free/ripple';
// AUTO INIT
[...document.querySelectorAll('[data-toggle="tooltip"]')].map((tooltip) => new Tooltip(tooltip));
[...document.querySelectorAll('[data-toggle="popover"]')].map((popover) => new Popover(popover));
[...document.querySelectorAll('.toast')].map((toast) => new Toast(toast));
import Range from './free/range';
export {
Alert,
@ -34,4 +30,5 @@ export {
Tab,
Toast,
Tooltip,
Range,
};

104
src/js/mdb/util/stack.js Normal file
View File

@ -0,0 +1,104 @@
import SelectorEngine from '../dom/selector-engine';
import { isVisible, typeCheckConfig } from './index';
const NAME = 'Stack';
const DEFAULT_OPTIONS = {
position: 'top',
container: null,
refresh: 1000,
filter: (el) => {
return el;
},
};
const TYPE_OPTIONS = {
position: 'string',
container: '(undefined|null|string)',
refresh: 'number',
filter: 'function',
};
class Stack {
constructor(element, selector, options) {
this._element = element;
this._selector = selector;
this._options = this._getConfig(options);
this._offset = null;
if (this._options.container) {
this._parent = SelectorEngine.findOne(this._options.container);
}
}
get stackableElements() {
return SelectorEngine.find(this._selector)
.filter((el, i) => this._options.filter(el, i))
.map((el) => ({ el, rect: el.getBoundingClientRect() }))
.filter(({ el, rect }) => {
const basicCondition = el !== this._element && isVisible(el);
if (this._offset === null) {
return basicCondition;
}
return basicCondition && this._getBoundryOffset(rect) < this._offset;
})
.sort((a, b) => {
return this._getBoundryOffset(b.rect) - this._getBoundryOffset(a.rect);
});
}
get nextElements() {
return SelectorEngine.find(this._selector)
.filter((el) => el !== this._element)
.filter((el, i) => this._options.filter(el, i))
.filter((el) => {
return this._getBoundryOffset(el.getBoundingClientRect()) > this._offset;
});
}
_getConfig(options) {
const config = {
...DEFAULT_OPTIONS,
...options,
};
typeCheckConfig(NAME, config, TYPE_OPTIONS);
return config;
}
_getBoundryOffset(rect) {
const { position } = this._options;
let parentTopOffset = 0;
let parentBottomBoundry = window.innerHeight;
if (this._parent) {
const parentRect = this._parent.getBoundingClientRect();
parentTopOffset = parentRect.top;
parentBottomBoundry = parentRect.bottom;
}
if (position === 'top') {
return rect.top - parentTopOffset;
}
return parentBottomBoundry - rect.bottom;
}
calculateOffset() {
const [previousElement] = this.stackableElements;
if (!previousElement) {
this._offset = 0;
} else {
this._offset = this._getBoundryOffset(previousElement.rect) + previousElement.rect.height;
}
return this._offset;
}
}
export default Stack;

1034
src/scss/free/_deprecated.scss
View File

File diff suppressed because it is too large Load Diff

2007
src/scss/free/_flag.scss
View File

File diff suppressed because it is too large Load Diff

45
src/scss/free/_range.scss Normal file
View File

@ -0,0 +1,45 @@
// range
.range {
position: relative;
.thumb {
position: absolute;
display: block;
height: 30px;
width: 30px;
top: -35px;
margin-left: -15px;
text-align: center;
border-radius: 50% 50% 50% 0;
transform: scale(0);
transform-origin: bottom;
transition: transform 0.2s ease-in-out;
&:after {
position: absolute;
display: block;
content: '';
transform: translateX(-50%);
width: 100%;
height: 100%;
top: 0;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: #1266f1;
z-index: -1;
}
.thumb-value {
display: block;
font-size: 12px;
line-height: 30px;
color: rgb(255, 255, 255);
font-weight: 500;
z-index: 2;
}
&.thumb-active {
transform: scale(1);
}
}
}

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

File diff suppressed because it is too large Load Diff

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

@ -3,6 +3,7 @@
@import './free/functions';
// CORE VARIABLES
@import './custom/variables';
@import './free/variables';
@import './bootstrap/variables';
@ -92,3 +93,4 @@
@import './free/popover';
@import './free/scrollspy';
@import './free/ripple';
@import './free/range';