release: 6.4.0

README.txt

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

package.json

@@ -1,6 +1,6 @@
 {
  "name": "mdb-ui-kit",
- "version": "6.3.1",
+ "version": "6.4.0",
  "main": "js/mdb.min.js",
  "homepage": "https://mdbootstrap.com/docs/standard/",
  "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

src/js/bootstrap/mdb-prefix/dropdown.js

@@ -269,7 +269,7 @@ class Dropdown extends BaseComponent {
  }
 
  // We need to trim the value because custom properties can also include spaces
- const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end';
+ const isEnd = getComputedStyle(this._menu).getPropertyValue('--mdb-position').trim() === 'end';
 
  if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
  return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;

src/js/free/alert.js

@@ -10,14 +10,11 @@ import BSAlert from '../bootstrap/mdb-prefix/alert';
  */
 
 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 EXTENDED_EVENTS = [{ name: 'close' }, { name: 'closed' }];
 
 const SELECTOR_ALERT = '.alert';
 
@@ -42,20 +39,11 @@ class Alert extends BSAlert {
 
  // Private
  _init() {
- this._bindCloseEvent();
- this._bindClosedEvent();
+ this._bindMdbEvents();
  }
 
- _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);
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }
 

src/js/free/carousel.js

@@ -11,14 +11,14 @@ import BSCarousel from '../bootstrap/mdb-prefix/carousel';
  */
 
 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 EXTENDED_EVENTS = [
+ { name: 'slide', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
+ { name: 'slid', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
+];
 
 const SELECTOR_DATA_RIDE = '[data-mdb-ride="carousel"]';
 
@@ -43,30 +43,11 @@ class Carousel extends BSCarousel {
 
  // Private
  _init() {
- this._bindSlideEvent();
- this._bindSlidEvent();
+ this._bindMdbEvents();
  }
 
- _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,
- });
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }
 

src/js/free/collapse.js

@@ -10,18 +10,13 @@ import BSCollapse from '../bootstrap/mdb-prefix/collapse';
  */
 
 const NAME = 'collapse';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_SHOW_BS = 'show.bs.collapse';
 const EVENT_SHOWN_BS = 'shown.bs.collapse';
 const EVENT_HIDE_BS = 'hide.bs.collapse';
 const EVENT_HIDDEN_BS = 'hidden.bs.collapse';
 
-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 EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
 
@@ -48,34 +43,11 @@ class Collapse extends BSCollapse {
 
  // Private
  _init() {
- this._bindShowEvent();
- this._bindShownEvent();
- this._bindHideEvent();
- this._bindHiddenEvent();
+ this._bindMdbEvents();
  }
 
- _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);
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }
 

src/js/free/modal.js

@@ -10,20 +10,20 @@ import BSModal from '../bootstrap/mdb-prefix/modal';
  */
 
 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 EXTENDED_EVENTS = [
+ { name: 'show', parametersToCopy: ['relatedTarget'] },
+ { name: 'shown', parametersToCopy: ['relatedTarget'] },
+ { name: 'hide' },
+ { name: 'hidePrevented' },
+ { name: 'hidden' },
+];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="modal"]';
 
@@ -51,41 +51,11 @@ class Modal extends BSModal {
 
  // Private
  _init() {
- this._bindShowEvent();
- this._bindShownEvent();
- this._bindHideEvent();
- this._bindHiddenEvent();
- this._bindHidePreventedEvent();
+ this._bindMdbEvents();
  }
 
- _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);
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }
 

src/js/free/popover.js

@@ -10,20 +10,20 @@ import BSPopover from '../bootstrap/mdb-prefix/popover';
  */
 
 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 EXTENDED_EVENTS = [
+ { name: 'show' },
+ { name: 'shown' },
+ { name: 'hide' },
+ { name: 'hidden' },
+ { name: 'inserted' },
+];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="popover"]';
 
@@ -51,41 +51,11 @@ class Popover extends BSPopover {
 
  // Private
  _init() {
- this._bindShowEvent();
- this._bindShownEvent();
- this._bindHideEvent();
- this._bindHiddenEvent();
- this._bindInsertedEvent();
+ this._bindMdbEvents();
  }
 
- _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);
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }
 

src/js/free/ripple.js

@@ -165,6 +165,10 @@ class Ripple {
  }
 
  _createRipple(event) {
+ if (this._element === null) {
+ return;
+ }
+
  if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
  Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
  }

src/js/free/toast.js

@@ -10,18 +10,13 @@ import BSToast from '../bootstrap/mdb-prefix/toast';
  */
 
 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 EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
 
 const SELECTOR_TOAST = '.toast';
 
@@ -48,34 +43,11 @@ class Toast extends BSToast {
 
  // Private
  _init() {
- this._bindShowEvent();
- this._bindShownEvent();
- this._bindHideEvent();
- this._bindHiddenEvent();
+ this._bindMdbEvents();
  }
 
- _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);
- });
+ _bindMdbEvents() {
+ EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
  }
 }