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/

css/mdb.min.css

@@ -1,6 +1,6 @@
 /*!
  * MDB5
- *   Version: FREE 6.1.0
+ *   Version: FREE 6.2.0
  * 
  * 
  *   Copyright: Material Design for Bootstrap

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,12 +72,7 @@ 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() {
@@ -83,7 +80,7 @@ class Range {
     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() {
@@ -91,26 +88,26 @@ class Range {
     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';