release: 6.2.0

README.txt

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

package.json

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

src/js/free/collapse.js

@@ -0,0 +1,115 @@
+import { getjQuery, onDOMContentLoaded } from '../mdb/util/index';
+import EventHandler from '../mdb/dom/event-handler';
+import SelectorEngine from '../mdb/dom/selector-engine';
+import BSCollapse from '../bootstrap/mdb-prefix/collapse';
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+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 SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
+
+class Collapse extends BSCollapse {
+ 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_DATA_TOGGLE).forEach((el) => {
+ let instance = Collapse.getInstance(el);
+ if (!instance) {
+ instance = new Collapse(el, { toggle: false });
+ }
+});
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .rating to jQuery only if jQuery is present
+ */
+onDOMContentLoaded(() => {
+ const $ = getjQuery();
+
+ if ($) {
+ const JQUERY_NO_CONFLICT = $.fn[NAME];
+ $.fn[NAME] = Collapse.jQueryInterface;
+ $.fn[NAME].Constructor = Collapse;
+ $.fn[NAME].noConflict = () => {
+ $.fn[NAME] = JQUERY_NO_CONFLICT;
+ return Collapse.jQueryInterface;
+ };
+ }
+});
+
+export default Collapse;

src/js/free/range.js

@@ -18,6 +18,7 @@ const CLASSNAME_ACTIVE = 'thumb-active';
 const CLASSNAME_THUMB_VALUE = 'thumb-value';
 
 const SELECTOR_THUMB_VALUE = `.${CLASSNAME_THUMB_VALUE}`;
+const SELECTOR_THUMB = `.${CLASSNAME_THUMB}`;
 const SELECTOR_WRAPPER = `.${CLASSNAME_WRAPPER}`;
 
 /**
@@ -30,6 +31,7 @@ class Range {
  constructor(element) {
  this._element = element;
  this._initiated = false;
+ this._thumb = null;
 
  if (this._element) {
  Data.setData(element, DATA_KEY, this);
@@ -52,8 +54,7 @@ class Range {
  return;
  }
  this._addThumb();
- this._updateValue();
- this._thumbPositionUpdate();
+ this._thumbUpdate();
  this._handleEvents();
  this._initiated = true;
  }
@@ -62,6 +63,7 @@ class Range {
  this._disposeEvents();
  Data.removeData(this._element, DATA_KEY);
  this._element = null;
+ this._thumb = null;
  }
 
  // Private
@@ -70,47 +72,42 @@ class Range {
  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);
+ this._thumb = SelectorEngine.findOne(SELECTOR_THUMB, this._element);
  }
 
  _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());
+ EventHandler.on(this.rangeInput, 'input', () => this._thumbUpdate());
  }
 
  _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);
+ EventHandler.off(this.rangeInput, 'input', this._thumbUpdate);
  }
 
  _showThumb() {
- Manipulator.addClass(this._element.lastElementChild, CLASSNAME_ACTIVE);
+ Manipulator.addClass(this._thumb, CLASSNAME_ACTIVE);
  }
 
  _hideThumb() {
- Manipulator.removeClass(this._element.lastElementChild, CLASSNAME_ACTIVE);
+ Manipulator.removeClass(this._thumb, CLASSNAME_ACTIVE);
  }
 
- _thumbPositionUpdate() {
+ _thumbUpdate() {
  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 thumbValue = SelectorEngine.findOne(SELECTOR_THUMB_VALUE, this._thumb);
+ thumbValue.textContent = inputValue;
  const newValue = Number(((inputValue - minValue) * 100) / (maxValue - minValue));
- thumb.firstElementChild.textContent = inputValue;
- Manipulator.style(thumb, { left: `calc(${newValue}% + (${8 - newValue * 0.15}px))` });
+ Manipulator.style(this._thumb, { left: `calc(${newValue}% + (${8 - newValue * 0.15}px))` });
  }
  // Static
 

src/js/mdb.free.js

@@ -1,6 +1,5 @@
 // BOOTSTRAP CORE COMPONENTS
 import Button from './free/button';
-import Collapse from './bootstrap/mdb-prefix/collapse';
 import Offcanvas from './bootstrap/mdb-prefix/offcanvas';
 import Alert from './free/alert';
 import Carousel from './free/carousel';
@@ -13,6 +12,7 @@ import Toast from './free/toast';
 
 // MDB FREE COMPONENTS
 import Input from './free/input';
+import Collapse from './free/collapse';
 import Dropdown from './free/dropdown';
 import Ripple from './free/ripple';
 import Range from './free/range';