Skip to content

Commit

Permalink
Merge branch 'gselderslaghs-eslint-coding-standards' into v2-dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@wuda-io
wuda-io committed Dec 23, 2024
2 parents 24daf93 + 4afb62e commit 34593d0
Show file tree
Hide file tree
Showing 22 changed files with 400 additions and 327 deletions.
2 changes: 1 addition & 1 deletion eslint.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default [
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/no-unused-expressions': 'error',
'@typescript-eslint/no-this-alias': 'warn',
'@typescript-eslint/no-empty-object-type': 'error',
'@typescript-eslint/no-empty-object-type': ['error' , { allowWithName: 'BaseOptions$' }],
'@typescript-eslint/no-require-imports': 'error',
'@typescript-eslint/no-unsafe-function-type': 'error'
}
Expand Down
43 changes: 27 additions & 16 deletions src/autocomplete.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Dropdown, DropdownOptions } from "./dropdown";
import { Component, BaseOptions, InitElements, MElement } from "./component";

export interface AutocompleteData {
/**
/**
* A primitive value that can be converted to string.
* If "text" is not provided, it will also be used as "option text" as well
*/
Expand Down Expand Up @@ -66,9 +66,9 @@ export interface AutocompleteOptions extends BaseOptions {
* @default {}
*/
dropdownOptions: Partial<DropdownOptions>;
};
}

let _defaults: AutocompleteOptions = {
const _defaults: AutocompleteOptions = {
data: [], // Autocomplete data set
onAutocomplete: null, // Callback for when autocompleted
dropdownOptions: {
Expand All @@ -82,7 +82,7 @@ let _defaults: AutocompleteOptions = {
onSearch: (text: string, autocomplete: Autocomplete) => {
const normSearch = text.toLocaleLowerCase();
autocomplete.setMenuItems(
autocomplete.options.data.filter((option) =>
autocomplete.options.data.filter((option) =>
option.id.toString().toLocaleLowerCase().includes(normSearch)
|| option.text?.toLocaleLowerCase().includes(normSearch)
)
Expand Down Expand Up @@ -118,7 +118,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
...Autocomplete.defaults,
...options
};

this.isOpen = false;
this.count = 0;
this.activeIndex = -1;
Expand Down Expand Up @@ -168,8 +168,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {

_setupEventHandlers() {
this.el.addEventListener('blur', this._handleInputBlur);
this.el.addEventListener('keyup', this._handleInputKeyupAndFocus);
this.el.addEventListener('focus', this._handleInputKeyupAndFocus);
this.el.addEventListener('keyup', this._handleInputKeyup);
this.el.addEventListener('focus', this._handleInputFocus);
this.el.addEventListener('keydown', this._handleInputKeydown);
this.el.addEventListener('click', this._handleInputClick);
this.container.addEventListener(
Expand All @@ -188,8 +188,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {

_removeEventHandlers() {
this.el.removeEventListener('blur', this._handleInputBlur);
this.el.removeEventListener('keyup', this._handleInputKeyupAndFocus);
this.el.removeEventListener('focus', this._handleInputKeyupAndFocus);
this.el.removeEventListener('keyup', this._handleInputKeyup);
this.el.removeEventListener('focus', this._handleInputFocus);
this.el.removeEventListener('keydown', this._handleInputKeydown);
this.el.removeEventListener('click', this._handleInputClick);
this.container.removeEventListener(
Expand Down Expand Up @@ -226,11 +226,12 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.el.parentElement.appendChild(this.container);

// Initialize dropdown
let dropdownOptions = {
const dropdownOptions = {
...Autocomplete.defaults.dropdownOptions,
...this.options.dropdownOptions
};
let userOnItemClick = dropdownOptions.onItemClick;
// @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
const userOnItemClick = dropdownOptions.onItemClick;
// Ensuring the select Option call when user passes custom onItemClick function to dropdown
dropdownOptions.onItemClick = (li) => {
if (!li) return;
Expand Down Expand Up @@ -270,19 +271,29 @@ export class Autocomplete extends Component<AutocompleteOptions> {
}
}

_handleInputKeyupAndFocus = (e: KeyboardEvent) => {
_handleInputKeyup = (e: KeyboardEvent) => {
if (e.type === 'keyup') Autocomplete._keydown = false;
this.count = 0;
const actualValue = this.el.value.toLocaleLowerCase();
// Don't capture enter or arrow key usage.
if (Utils.keys.ENTER.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) return;
// Check if the input isn't empty
// Check if focus triggered by tab
if (this.oldVal !== actualValue && (Utils.tabPressed || e.type !== 'focus')) {
if (this.oldVal !== actualValue && (Utils.tabPressed)) {
this.open();
}
this._inputChangeDetection(actualValue);
};

_handleInputFocus = () => {
this.count = 0;
const actualValue = this.el.value.toLocaleLowerCase();
this._inputChangeDetection(actualValue);
}

_inputChangeDetection = (value: string) => {
// Value has changed!
if (this.oldVal !== actualValue) {
if (this.oldVal !== value) {
this._setStatusLoading();
this.options.onSearch(this.el.value, this);
}
Expand All @@ -291,8 +302,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.selectedValues = [];
this._triggerChanged();
}
this.oldVal = actualValue;
}
this.oldVal = value;
};

_handleInputKeydown = (e: KeyboardEvent) => {
Autocomplete._keydown = true;
Expand Down
24 changes: 10 additions & 14 deletions src/buttons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export interface FloatingActionButtonOptions extends BaseOptions {
toolbarEnabled: boolean;
};

let _defaults: FloatingActionButtonOptions = {
const _defaults: FloatingActionButtonOptions = {
direction: 'top',
hoverEnabled: true,
toolbarEnabled: false
Expand Down Expand Up @@ -132,7 +132,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>

_handleDocumentClick = (e: MouseEvent) => {
const elem = e.target;
if (elem !== this._menu) this.close;
if (elem !== this._menu) this.close();
}

/**
Expand Down Expand Up @@ -166,7 +166,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
this.el.classList.add('active');
const delayIncrement = 40;
const duration = 275;

this._floatingBtnsReverse.forEach((el, index) => {
const delay = delayIncrement * index;
el.style.transition = 'none';
Expand Down Expand Up @@ -198,21 +198,19 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
}

_animateInToolbar() {
let scaleFactor;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let btnRect = this.el.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const btnRect = this.el.getBoundingClientRect();

const backdrop = document.createElement('div');
const backdrop = document.createElement('div'),
scaleFactor = windowWidth / backdrop[0].clientWidth,
fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
backdrop.classList.add('fab-backdrop'); // $('<div class="fab-backdrop"></div>');

const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');

backdrop.style.backgroundColor = fabColor;
this._anchor.append(backdrop);

this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
this.offsetY = windowHeight - btnRect.bottom;
scaleFactor = windowWidth / backdrop[0].clientWidth;
this.btnBottom = btnRect.bottom;
this.btnLeft = btnRect.left;
this.btnWidth = btnRect.width;
Expand All @@ -229,8 +227,6 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
this._anchor.style.transform = `translateY(${this.offsetY}px`;
this._anchor.style.transition = 'none';

backdrop.style.backgroundColor = fabColor;

setTimeout(() => {
this.el.style.transform = '';
this.el.style.transition = 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
Expand Down
71 changes: 37 additions & 34 deletions src/carousel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export interface CarouselOptions extends BaseOptions{
onCycleTo: (current: Element, dragged: boolean) => void;
}

let _defaults: CarouselOptions = {
const _defaults: CarouselOptions = {
duration: 200, // ms
dist: -100, // zoom scale TODO: make this more intuitive as an option
shift: 0, // spacing for center image
Expand All @@ -72,25 +72,25 @@ export class Carousel extends Component<CarouselOptions> {
offset: number;
target: number;
images: HTMLElement[];
itemWidth: any;
itemHeight: any;
itemWidth: number;
itemHeight: number;
dim: number;
_indicators: any;
_indicators: HTMLUListElement;
count: number;
xform: string;
verticalDragged: boolean;
reference: any;
referenceY: any;
reference: number;
referenceY: number;
velocity: number;
frame: number;
timestamp: number;
ticker: string | number | NodeJS.Timeout;
amplitude: number;
/** The index of the center carousel item. */
center: number = 0;
imageHeight: any;
scrollingTimeout: any;
oneTimeCallback: any;
imageHeight: number;
scrollingTimeout: number | NodeJS.Timeout;
oneTimeCallback: (current: Element, dragged: boolean) => void | null;

constructor(el: HTMLElement, options: Partial<CarouselOptions>) {
super(el, options, Carousel);
Expand Down Expand Up @@ -152,7 +152,7 @@ export class Carousel extends Component<CarouselOptions> {
// Setup cross browser string
this.xform = 'transform';
['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
var e = prefix + 'Transform';
const e = prefix + 'Transform';
if (typeof document.body.style[e] !== 'undefined') {
this.xform = e;
return false;
Expand Down Expand Up @@ -446,13 +446,16 @@ export class Carousel extends Component<CarouselOptions> {
}

_track = () => {
let now: number, elapsed: number, delta: number, v: number;
now = Date.now();
elapsed = now - this.timestamp;
const now: number = Date.now(),
elapsed: number = now - this.timestamp,
delta: number = this.offset - this.frame,
v: number = (1000 * delta) / (1 + elapsed);
// now = Date.now();
// elapsed = now - this.timestamp;
this.timestamp = now;
delta = this.offset - this.frame;
// delta = this.offset - this.frame;
this.frame = this.offset;
v = (1000 * delta) / (1 + elapsed);
// v = (1000 * delta) / (1 + elapsed);
this.velocity = 0.8 * v + 0.2 * this.velocity;
}

Expand All @@ -476,33 +479,33 @@ export class Carousel extends Component<CarouselOptions> {
this.el.classList.add('scrolling');
}
if (this.scrollingTimeout != null) {
window.clearTimeout(this.scrollingTimeout);
clearTimeout(this.scrollingTimeout);
}
this.scrollingTimeout = window.setTimeout(() => {
this.scrollingTimeout = setTimeout(() => {
this.el.classList.remove('scrolling');
}, this.options.duration);

// Start actual scroll
this.offset = typeof x === 'number' ? x : this.offset;
this.center = Math.floor((this.offset + this.dim / 2) / this.dim);

const half: number = this.count >> 1,
delta: number = this.offset - this.center * this.dim,
dir: number = delta < 0 ? 1 : -1,
tween: number = (-dir * delta * 2) / this.dim;
let i: number,
half: number,
delta: number,
dir: number,
tween: number,
el: HTMLElement,
alignment: string,
zTranslation: number,
tweenedOpacity: number,
centerTweenedOpacity: number;
let lastCenter = this.center;
let numVisibleOffset = 1 / this.options.numVisible;

this.offset = typeof x === 'number' ? x : this.offset;
this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
const lastCenter = this.center;
const numVisibleOffset = 1 / this.options.numVisible;

delta = this.offset - this.center * this.dim;
dir = delta < 0 ? 1 : -1;
tween = (-dir * delta * 2) / this.dim;
half = this.count >> 1;
// delta = this.offset - this.center * this.dim;
// dir = delta < 0 ? 1 : -1;
// tween = (-dir * delta * 2) / this.dim;
// half = this.count >> 1;

if (this.options.fullWidth) {
alignment = 'translateX(0)';
Expand Down Expand Up @@ -537,7 +540,7 @@ export class Carousel extends Component<CarouselOptions> {
el.classList.add('active');
}

let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
this.options.shift *
tween *
i}px) translateZ(${this.options.dist * tween}px)`;
Expand All @@ -556,7 +559,7 @@ export class Carousel extends Component<CarouselOptions> {
// Don't show wrapped items.
if (!this.noWrap || this.center + i < this.count) {
el = this.images[this._wrap(this.center + i)];
let transformString = `${alignment} translateX(${this.options.shift +
const transformString = `${alignment} translateX(${this.options.shift +
(this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
Expand All @@ -571,7 +574,7 @@ export class Carousel extends Component<CarouselOptions> {
// Don't show wrapped items.
if (!this.noWrap || this.center - i >= 0) {
el = this.images[this._wrap(this.center - i)];
let transformString = `${alignment} translateX(${-this.options.shift +
const transformString = `${alignment} translateX(${-this.options.shift +
(-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
Expand All @@ -580,7 +583,7 @@ export class Carousel extends Component<CarouselOptions> {
// Don't show wrapped items.
if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
el = this.images[this._wrap(this.center)];
let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
this.options.shift *
tween}px) translateZ(${this.options.dist * tween}px)`;
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
Expand Down
Loading

0 comments on commit 34593d0

Please sign in to comment.