mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
2.2.0
This commit is contained in:
Adam Jakubowski
parent
360fc5c0d2
commit
d84fef8677
|
|
@ -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
14
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
120
index.html
120
index.html
|
|
@ -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>
|
||||
</html>
|
||||
<script type="text/javascript"></script>
|
||||
</html>
|
||||
6
js/mdb.min.js
vendored
6
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": "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
94
src/js/free/alert.js
Normal 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
104
src/js/free/carousel.js
Normal 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;
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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
127
src/js/free/modal.js
Normal 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
124
src/js/free/popover.js
Normal 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
157
src/js/free/range.js
Normal 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;
|
||||
|
|
@ -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
90
src/js/free/scrollspy.js
Normal 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
195
src/js/free/tab.js
Normal 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
114
src/js/free/toast.js
Normal 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
124
src/js/free/tooltip.js
Normal 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;
|
||||
|
|
@ -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
104
src/js/mdb/util/stack.js
Normal 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;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
45
src/scss/free/_range.scss
Normal file
45
src/scss/free/_range.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user