Skip to content

Commit c3ca02a

Browse files
bwskyAbwskyA
committed
1.0.0-alpha3
1 parent df88893 commit c3ca02a

22 files changed

Lines changed: 358 additions & 127 deletions

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010

1111
**[>> Demo](https://mdbootstrap.com/docs/standard/#demo)**
1212

13-
<a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg" alt="Downloads"></a><a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"> <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>
13+
<a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=MDB%20Downloads" alt="Downloads"></a>
14+
<a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
15+
<a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
16+
<a href="https://www.youtube.com/watch?v=c9B4TPnak1A&t=6s"><img alt="YouTube Video Views" src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a>
1417
___
1518

1619
<table>

‎README.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
MDB5
2-
Version: FREE 1.0.0-alpha2
2+
Version: FREE 1.0.0-alpha3
33

44
Documentation:
55
https://mdbootstrap.com/docs/standard/

‎css/mdb.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/mdb.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/mdb.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-ui-kit",
3-
"version": "1.0.0-alpha2",
3+
"version": "1.0.0-alpha3",
44
"main": "js/mdb.min.js",
55
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
66
"author": "MDBootstrap",

‎src/js/free/dropdown.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { getjQuery } from '../mdb/util/index';
2+
import EventHandler from '../bootstrap/src/dom/event-handler';
3+
import SelectorEngine from '../mdb/dom/selector-engine';
4+
import BSDropdown from '../bootstrap/src/dropdown';
5+
/**
6+
* ------------------------------------------------------------------------
7+
* Constants
8+
* ------------------------------------------------------------------------
9+
*/
10+
11+
const NAME = 'dropdown';
12+
const SELECTOR_EXPAND = '[data-toggle="dropdown"]';
13+
14+
const EVENT_HIDE = 'hide.bs.dropdown';
15+
const EVENT_HIDDEN = 'hidden.bs.dropdown';
16+
const EVENT_SHOW = 'show.bs.dropdown';
17+
18+
const ANIMATION_CLASS = 'animation';
19+
const ANIMATION_SHOW_CLASS = 'fade-in';
20+
const ANIMATION_HIDE_CLASS = 'fade-out';
21+
22+
class Dropdown extends BSDropdown {
23+
constructor(element, data) {
24+
super(element, data);
25+
this._options = this._getConfig(data);
26+
this._parent = Dropdown.getParentFromElement(this._element);
27+
this._menuStyle = '';
28+
this._xPlacement = '';
29+
this._init();
30+
}
31+
32+
dispose() {
33+
EventHandler.off(this._element, EVENT_SHOW);
34+
EventHandler.off(this._parent, EVENT_HIDE);
35+
EventHandler.off(this._parent, EVENT_HIDDEN);
36+
super.dispose();
37+
}
38+
39+
// Getters
40+
static get NAME() {
41+
return NAME;
42+
}
43+
44+
// Private
45+
_init() {
46+
this._bindShowEvent();
47+
this._bindHideEvent();
48+
this._bindHiddenEvent();
49+
}
50+
51+
_bindShowEvent() {
52+
EventHandler.on(this._element, EVENT_SHOW, () => {
53+
this._dropdownAnimationStart('show');
54+
});
55+
}
56+
57+
_bindHideEvent() {
58+
EventHandler.on(this._parent, EVENT_HIDE, () => {
59+
this._menuStyle = this._menu.style.cssText;
60+
this._xPlacement = this._menu.getAttribute('x-placement');
61+
});
62+
}
63+
64+
_bindHiddenEvent() {
65+
EventHandler.on(this._parent, EVENT_HIDDEN, () => {
66+
this._menu.style.cssText = this._menuStyle;
67+
this._menu.setAttribute('x-placement', this._xPlacement);
68+
69+
this._dropdownAnimationStart('hide');
70+
});
71+
}
72+
73+
_dropdownAnimationStart(action) {
74+
switch (action) {
75+
case 'show':
76+
this._menu.classList.add(ANIMATION_CLASS, ANIMATION_SHOW_CLASS);
77+
this._menu.classList.remove(ANIMATION_HIDE_CLASS);
78+
break;
79+
default:
80+
// hide
81+
this._menu.classList.add(ANIMATION_CLASS, ANIMATION_HIDE_CLASS);
82+
this._menu.classList.remove(ANIMATION_SHOW_CLASS);
83+
break;
84+
}
85+
86+
this._bindAnimationEnd();
87+
}
88+
89+
_bindAnimationEnd() {
90+
EventHandler.one(this._menu, 'animationend', () => {
91+
this._menu.classList.remove(ANIMATION_CLASS, ANIMATION_HIDE_CLASS, ANIMATION_SHOW_CLASS);
92+
});
93+
}
94+
}
95+
96+
/**
97+
* ------------------------------------------------------------------------
98+
* Data Api implementation - auto initialization
99+
* ------------------------------------------------------------------------
100+
*/
101+
102+
SelectorEngine.find(SELECTOR_EXPAND).forEach((el) => {
103+
let instance = Dropdown.getInstance(el);
104+
if (!instance) {
105+
instance = new Dropdown(el);
106+
}
107+
});
108+
109+
/**
110+
* ------------------------------------------------------------------------
111+
* jQuery
112+
* ------------------------------------------------------------------------
113+
* add .rating to jQuery only if jQuery is present
114+
*/
115+
116+
const $ = getjQuery();
117+
118+
if ($) {
119+
const JQUERY_NO_CONFLICT = $.fn[NAME];
120+
$.fn[NAME] = Dropdown.jQueryInterface;
121+
$.fn[NAME].Constructor = Dropdown;
122+
$.fn[NAME].noConflict = () => {
123+
$.fn[NAME] = JQUERY_NO_CONFLICT;
124+
return Dropdown.jQueryInterface;
125+
};
126+
}
127+
128+
export default Dropdown;

‎src/js/free/input.js‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Data from '../mdb/dom/data';
33
import EventHandler from '../bootstrap/src/dom/event-handler';
44
import Manipulator from '../mdb/dom/manipulator';
55
import SelectorEngine from '../mdb/dom/selector-engine';
6+
import 'detect-autofill';
67

78
/**
89
* ------------------------------------------------------------------------
@@ -47,10 +48,26 @@ class Input {
4748
this._getLabelData();
4849
this._applyDivs();
4950
this._applyNotch();
50-
this._applyActiveClass();
51+
this._activate();
52+
}
53+
54+
update() {
55+
this._getLabelData();
56+
this._getNotchData();
57+
this._applyNotch();
58+
this._activate();
59+
}
60+
61+
forceActive() {
62+
const input =
63+
SelectorEngine.findOne('input', this._element) ||
64+
SelectorEngine.findOne('textarea', this._element);
65+
Manipulator.addClass(input, 'active');
5166
}
5267

5368
dispose() {
69+
this._removeBorder();
70+
5471
Data.removeData(this._element, DATA_KEY);
5572
this._element = null;
5673
}
@@ -65,6 +82,11 @@ class Input {
6582
this._getLabelPositionInInputGroup();
6683
}
6784

85+
_getNotchData() {
86+
this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', this._element);
87+
this._notchLeading = SelectorEngine.findOne('.form-notch-leading', this._element);
88+
}
89+
6890
_getLabelWidth() {
6991
this._labelWidth = this._label.clientWidth * 0.8 + 8;
7092
}
@@ -102,7 +124,24 @@ class Input {
102124
this._label.style.marginLeft = `${this._labelMarginLeft}px`;
103125
}
104126

105-
_applyActiveClass(event) {
127+
_removeBorder() {
128+
const border = SelectorEngine.findOne('.form-notch', this._element);
129+
if (border) border.remove();
130+
}
131+
132+
_activate(event) {
133+
if (event) this._label = SelectorEngine.findOne('label', event.target.parentNode);
134+
if (event && this._label) {
135+
const prevLabelWidth = this._labelWidth;
136+
this._getLabelWidth();
137+
138+
if (prevLabelWidth !== this._labelWidth) {
139+
this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', event.target.parentNode);
140+
this._notchLeading = SelectorEngine.findOne('.form-notch-leading', event.target.parentNode);
141+
this._applyNotch();
142+
}
143+
}
144+
106145
const input = event
107146
? event.target
108147
: SelectorEngine.findOne('input', this._element) ||
@@ -112,7 +151,7 @@ class Input {
112151
}
113152
}
114153

115-
_removeActiveClass(event) {
154+
_deactivate(event) {
116155
const input = event
117156
? event.target
118157
: SelectorEngine.findOne('input', this._element) ||
@@ -122,15 +161,15 @@ class Input {
122161
}
123162
}
124163

125-
static applyActiveClass(instance) {
164+
static activate(instance) {
126165
return function (event) {
127-
instance._applyActiveClass(event);
166+
instance._activate(event);
128167
};
129168
}
130169

131-
static removeActiveClass(instance) {
170+
static deactivate(instance) {
132171
return function (event) {
133-
instance._removeActiveClass(event);
172+
instance._deactivate(event);
134173
};
135174
}
136175

@@ -139,17 +178,27 @@ class Input {
139178
}
140179
}
141180

142-
EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
143-
EventHandler.on(document, 'input', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
144-
EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.removeActiveClass(new Input()));
181+
EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.activate(new Input()));
182+
EventHandler.on(document, 'input', OUTLINE_INPUT, Input.activate(new Input()));
183+
EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.deactivate(new Input()));
184+
185+
EventHandler.on(document, 'focus', OUTLINE_TEXTAREA, Input.activate(new Input()));
186+
EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.activate(new Input()));
187+
EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.deactivate(new Input()));
145188

146-
EventHandler.on(document, 'focus', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
147-
EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
148-
EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.removeActiveClass(new Input()));
189+
EventHandler.on(window, 'shown.bs.modal', Input.activate(new Input()));
190+
EventHandler.on(window, 'shown.bs.dropdown', Input.activate(new Input()));
149191

150192
// auto-init
151193
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
152194
new Input(element).init();
153195
});
154196

197+
// auto-fill
198+
EventHandler.on(window, 'onautocomplete', (e) => {
199+
const instance = Input.getInstance(e.target.parentNode);
200+
if (!instance) return;
201+
instance.forceActive();
202+
});
203+
155204
export default Input;

‎src/js/mdb.free.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Alert from './bootstrap/src/alert';
33
import Button from './bootstrap/src/button';
44
import Carousel from './bootstrap/src/carousel';
55
import Collapse from './bootstrap/src/collapse';
6-
import Dropdown from './bootstrap/src/dropdown';
76
import Modal from './bootstrap/src/modal';
87
import Popover from './bootstrap/src/popover';
98
import ScrollSpy from './bootstrap/src/scrollspy';
@@ -13,13 +12,12 @@ import Tooltip from './bootstrap/src/tooltip';
1312

1413
// MDB FREE COMPONENTS
1514
import Input from './free/input';
16-
import Animate from './free/animate';
15+
import Dropdown from './free/dropdown';
1716
import Treeview from './free/treeview';
1817
import Ripple from './free/ripple';
1918

2019
export {
2120
Alert,
22-
Animate,
2321
Button,
2422
Carousel,
2523
Collapse,

0 commit comments

Comments
 (0)