Skip to content

Commit 969703b

Browse files
danicedanice
committed
chore(ts): conversion to ts with minimal changes
# Conflicts: # src/autocomplete.ts # src/chips.ts # src/dropdown.ts
1 parent 6fc58b6 commit 969703b

26 files changed

+1075
-711
lines changed

‎src/autocomplete.ts

+77-23
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
(function($) {
2-
'use strict';
1+
import { Component } from "./component";
2+
import { M } from "./global";
3+
import $ from "cash-dom";
4+
import { Dropdown } from "./dropdown";
5+
import { Forms } from "./forms";
36

47
let _defaults = {
5-
data: [], // Autocomplete data set
8+
data: {}, // Autocomplete data set
9+
limit: Infinity, // Limit of results the autocomplete shows
610
onAutocomplete: null, // Callback for when autocompleted
711
dropdownOptions: {
812
// Default dropdown options
@@ -11,6 +15,11 @@
1115
coverTrigger: false
1216
},
1317
minLength: 1, // Min characters before autocomplete starts
18+
sortFunction: function(a, b, inputString) {
19+
// Sort function for sorting autocomplete results
20+
return a.indexOf(inputString) - b.indexOf(inputString);
21+
},
22+
1423
isMultiSelect: false,
1524
onSearch: function(text, autocomplete) {
1625
const filteredData = autocomplete.options.data.filter(item => {
@@ -24,10 +33,52 @@
2433
allowUnsafeHTML: false
2534
};
2635

27-
class Autocomplete extends Component {
36+
/**
37+
* @class
38+
*
39+
*/
40+
export class Autocomplete extends Component {
41+
private isOpen: boolean;
42+
private count: number;
43+
private activeIndex: number;
44+
private oldVal: any;
45+
private $inputField: any;
46+
private $active: any;
47+
private _mousedown: boolean;
48+
private _handleInputBlurBound: any;
49+
private _handleInputKeyupAndFocusBound: any;
50+
private _handleInputKeydownBound: any;
51+
private _handleInputClickBound: any;
52+
private _handleContainerMousedownAndTouchstartBound: any;
53+
private _handleContainerMouseupAndTouchendBound: any;
54+
container: any;
55+
dropdown: any;
56+
static _keydown: boolean;
57+
selectedValues: any[];
58+
menuItems: any[];
59+
/**
60+
* Construct Autocomplete instance
61+
* @constructor
62+
* @param {Element} el
63+
* @param {Object} options
64+
*/
2865
constructor(el, options) {
2966
super(Autocomplete, el, options);
30-
this.el.M_Autocomplete = this;
67+
68+
(this.el as any).M_Autocomplete = this;
69+
70+
/**
71+
* Options for the autocomplete
72+
* @member Autocomplete#options
73+
* @prop {Number} duration
74+
* @prop {Number} dist
75+
* @prop {number} shift
76+
* @prop {number} padding
77+
* @prop {Boolean} fullWidth
78+
* @prop {Boolean} indicators
79+
* @prop {Boolean} noWrap
80+
* @prop {Function} onCycleTo
81+
*/
3182
this.options = $.extend({}, Autocomplete.defaults, options);
3283
this.isOpen = false;
3384
this.count = 0;
@@ -54,7 +105,7 @@
54105
destroy() {
55106
this._removeEventHandlers();
56107
this._removeDropdown();
57-
this.el.M_Autocomplete = undefined;
108+
(this.el as any).M_Autocomplete = undefined;
58109
}
59110

60111
_setupEventHandlers() {
@@ -132,11 +183,13 @@
132183
if (userOnItemClick && typeof userOnItemClick === 'function')
133184
userOnItemClick.call(this.dropdown, this.el);
134185
};
135-
this.dropdown = M.Dropdown.init(this.el, dropdownOptions);
186+
187+
this.dropdown = Dropdown.init(this.el, dropdownOptions);
188+
136189
// Sketchy removal of dropdown click handler
137190
this.el.removeEventListener('click', this.dropdown._handleClickBound);
138191
// Set Value if already set in HTML
139-
if (this.el.value) this.selectOption(this.el.value);
192+
if ( (this.el as HTMLInputElement).value) this.selectOption((this.el as HTMLInputElement).value);
140193
// Add StatusInfo
141194
const div = document.createElement('div');
142195
div.classList.add('status-info');
@@ -156,7 +209,8 @@
156209
_handleInputKeyupAndFocus(e) {
157210
if (e.type === 'keyup') Autocomplete._keydown = false;
158211
this.count = 0;
159-
const actualValue = this.el.value.toLowerCase();
212+
const actualValue = (this.el as HTMLInputElement).value.toLowerCase();
213+
160214
// Don't capture enter or arrow key usage.
161215
if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40) return;
162216
// Check if the input isn't empty
@@ -167,10 +221,10 @@
167221
// Value has changed!
168222
if (this.oldVal !== actualValue) {
169223
this._setStatusLoading();
170-
this.options.onSearch(this.el.value, this);
224+
this.options.onSearch( (this.el as HTMLInputElement).value, this);
171225
}
172226
// Reset Single-Select when Input cleared
173-
if (!this.options.isMultiSelect && this.el.value.length === 0) {
227+
if (!this.options.isMultiSelect && (this.el as HTMLInputElement).value.length === 0) {
174228
this.selectedValues = [];
175229
this._triggerChanged();
176230
}
@@ -221,6 +275,7 @@
221275
_handleContainerMouseupAndTouchend(e) {
222276
this._mousedown = false;
223277
}
278+
224279
_resetCurrentElementPosition() {
225280
this.activeIndex = -1;
226281
this.$active.removeClass('active');
@@ -243,6 +298,8 @@
243298
return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
244299
}
245300

301+
302+
246303
_createDropdownItem(entry) {
247304
const item = document.createElement('li');
248305
item.setAttribute('data-id', entry.id);
@@ -268,7 +325,7 @@
268325
}
269326

270327
// Text
271-
const inputText = this.el.value.toLowerCase();
328+
const inputText = (this.el as HTMLInputElement).value.toLowerCase();
272329
const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
273330
const div = document.createElement('div');
274331
div.setAttribute('style', 'line-height:1.2;font-weight:500;');
@@ -335,16 +392,17 @@
335392
_updateSelectedInfo() {
336393
const statusElement = this.el.parentElement.querySelector('.status-info');
337394
if (statusElement) {
338-
if (this.options.isMultiSelect) statusElement.innerHTML = this.selectedValues.length;
395+
if (this.options.isMultiSelect)
396+
statusElement.innerHTML = this.selectedValues.length.toString();
339397
else statusElement.innerHTML = '';
340398
}
341399
}
342400
_refreshInputText() {
343401
if (this.selectedValues.length === 1) {
344402
const entry = this.selectedValues[0];
345-
this.el.value = entry.text || entry.id; // Write Text to Input
403+
(this.el as HTMLInputElement).value = entry.text || entry.id; // Write Text to Input
346404
}
347-
M.updateTextFields();
405+
Forms.updateTextFields();
348406
}
349407
_triggerChanged() {
350408
this.$el.trigger('change');
@@ -354,7 +412,8 @@
354412
}
355413

356414
open() {
357-
const inputText = this.el.value.toLowerCase();
415+
const inputText = (this.el as HTMLInputElement).value.toLowerCase();
416+
358417
this._resetAutocomplete();
359418
if (inputText.length >= this.options.minLength) {
360419
this.isOpen = true;
@@ -398,7 +457,7 @@
398457
this.selectedValues = this.selectedValues.filter(
399458
(selectedEntry) => selectedEntry.id !== entry.id
400459
);
401-
this.el.focus();
460+
(this.el as HTMLInputElement).focus();
402461
} else {
403462
// Single-Select
404463
this.selectedValues = [entry];
@@ -411,9 +470,4 @@
411470
}
412471
}
413472

414-
Autocomplete._keydown = false;
415-
M.Autocomplete = Autocomplete;
416-
if (M.jQueryLoaded) {
417-
M.initializeJqueryWrapper(Autocomplete, 'autocomplete', 'M_Autocomplete');
418-
}
419-
})(cash);
473+

‎src/buttons.ts

+25-18
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
1-
(function($, anim) {
2-
'use strict';
1+
import { Component } from "./component";
2+
import $ from "cash-dom";
3+
import anim from "animejs";
34

45
let _defaults = {
56
direction: 'top',
67
hoverEnabled: true,
78
toolbarEnabled: false
89
};
910

10-
$.fn.reverse = [].reverse;
11+
($.fn as any).reverse = [].reverse;
12+
1113

1214
/**
1315
* @class
1416
*
1517
*/
16-
class FloatingActionButton extends Component {
18+
export class FloatingActionButton extends Component {
19+
isOpen: boolean;
20+
$anchor: any;
21+
$menu: any;
22+
$floatingBtns: any;
23+
$floatingBtnsReverse: any;
24+
offsetY: number;
25+
offsetX: number;
26+
private _handleFABClickBound: any;
27+
private _handleOpenBound: any;
28+
private _handleCloseBound: any;
29+
private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any;
30+
btnBottom: number;
31+
btnLeft: number;
32+
btnWidth: number;
1733
/**
1834
* Construct FloatingActionButton instance
1935
* @constructor
@@ -23,7 +39,7 @@
2339
constructor(el, options) {
2440
super(FloatingActionButton, el, options);
2541

26-
this.el.M_FloatingActionButton = this;
42+
(this.el as any).M_FloatingActionButton = this;
2743

2844
/**
2945
* Options for the fab
@@ -76,7 +92,7 @@
7692
*/
7793
destroy() {
7894
this._removeEventHandlers();
79-
this.el.M_FloatingActionButton = undefined;
95+
(this.el as any).M_FloatingActionButton = undefined;
8096
}
8197

8298
/**
@@ -169,7 +185,7 @@
169185
this.$el.addClass('active');
170186

171187
let time = 0;
172-
this.$floatingBtnsReverse.each((el) => {
188+
this.$floatingBtnsReverse.each((i, el) => {
173189
anim({
174190
targets: el,
175191
opacity: 1,
@@ -188,7 +204,7 @@
188204
* Classic FAB Menu close
189205
*/
190206
_animateOutFAB() {
191-
this.$floatingBtnsReverse.each((el) => {
207+
this.$floatingBtnsReverse.each((i, el) => {
192208
anim.remove(el);
193209
anim({
194210
targets: el,
@@ -342,13 +358,4 @@
342358
}
343359
}
344360

345-
M.FloatingActionButton = FloatingActionButton;
346-
347-
if (M.jQueryLoaded) {
348-
M.initializeJqueryWrapper(
349-
FloatingActionButton,
350-
'floatingActionButton',
351-
'M_FloatingActionButton'
352-
);
353-
}
354-
})(cash, M.anime);
361+

‎src/cards.js renamed to ‎src/cards.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
(function($, anim) {
1+
import $ from "cash-dom";
2+
import anim from "animejs";
3+
24
$(document).on('click', '.card', function(e) {
35
if ($(this).children('.card-reveal').length) {
46
var $card = $(e.target).closest('.card');
@@ -37,4 +39,3 @@
3739
}
3840
}
3941
});
40-
})(cash, M.anime);

0 commit comments

Comments
 (0)