From c19de37338994bb629c9ec55a463aaf99c4e25dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Fri, 9 Jun 2023 16:31:34 -0300 Subject: [PATCH 1/3] style(components): fix indentation and whitespaces - Removed unnecessary whitespaces on line ending; - Fixed indentation for every component. --- src/autocomplete.ts | 7 +- src/buttons.ts | 488 +++++++------- src/cards.ts | 11 +- src/carousel.ts | 1074 +++++++++++++++--------------- src/chips.ts | 2 +- src/collapsible.ts | 2 +- src/datepicker.ts | 1506 +++++++++++++++++++++---------------------- src/dropdown.ts | 964 +++++++++++++-------------- src/forms.ts | 18 +- src/global.ts | 30 +- src/materialbox.ts | 590 ++++++++--------- src/modal.ts | 418 ++++++------ src/parallax.ts | 201 +++--- src/pushpin.ts | 198 +++--- src/range.ts | 295 +++++---- src/scrollspy.ts | 343 +++++----- src/select.ts | 784 +++++++++++----------- src/sidenav.ts | 756 +++++++++++----------- src/slider.ts | 717 ++++++++++---------- src/tabs.ts | 464 ++++++------- src/tapTarget.ts | 415 ++++++------ src/timepicker.ts | 1217 +++++++++++++++++----------------- src/toasts.ts | 456 ++++++------- src/tooltip.ts | 489 +++++++------- src/waves.ts | 20 +- 25 files changed, 5716 insertions(+), 5749 deletions(-) diff --git a/src/autocomplete.ts b/src/autocomplete.ts index 5920444e9b..511ded0555 100644 --- a/src/autocomplete.ts +++ b/src/autocomplete.ts @@ -134,7 +134,7 @@ export class Autocomplete extends Component { } } - _setupDropdown() { + _setupDropdown() { this.container = document.createElement('ul'); this.container.style.maxHeight = this.options.maxDropDownHeight; this.container.id = `autocomplete-options-${M.guid()}`; @@ -142,7 +142,7 @@ export class Autocomplete extends Component { this.el.setAttribute('data-target', this.container.id); // ! Issue in Component Dropdown: _placeDropdown moves dom-position - this.el.parentElement.appendChild(this.container); + this.el.parentElement.appendChild(this.container); // Initialize dropdown let dropdownOptions = { @@ -174,7 +174,7 @@ export class Autocomplete extends Component { const div = document.createElement('div'); div.classList.add('status-info'); div.setAttribute('style', 'position: absolute;right:0;top:0;'); - this.el.parentElement.appendChild(div); + this.el.parentElement.appendChild(div); this._updateSelectedInfo(); } @@ -456,4 +456,3 @@ export class Autocomplete extends Component { this._triggerChanged(); } } - diff --git a/src/buttons.ts b/src/buttons.ts index d960e64797..424ad90efd 100644 --- a/src/buttons.ts +++ b/src/buttons.ts @@ -1,295 +1,293 @@ import { Component } from "./component"; import anim from "animejs"; - let _defaults = { - direction: 'top', - hoverEnabled: true, - toolbarEnabled: false - }; - - export class FloatingActionButton extends Component { - el: HTMLElement; - isOpen: boolean; - private _anchor: HTMLAnchorElement; - private _menu: HTMLElement|null; - private _floatingBtns: HTMLElement[]; - private _floatingBtnsReverse: HTMLElement[]; - offsetY: number; - offsetX: number; - private _handleFABClickBound: any; - private _handleOpenBound: any; - private _handleCloseBound: any; - private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; - btnBottom: number; - btnLeft: number; - btnWidth: number; - - constructor(el, options) { - super(FloatingActionButton, el, options); - - (this.el as any).M_FloatingActionButton = this; - - this.options = {...FloatingActionButton.defaults, ...options}; - this.isOpen = false; - this._anchor = this.el.querySelector('a'); - this._menu = this.el.querySelector('ul'); - this._floatingBtns = Array.from(this.el.querySelectorAll('ul .btn-floating')); - this._floatingBtnsReverse = this._floatingBtns.reverse(); - this.offsetY = 0; - this.offsetX = 0; - - this.el.classList.add(`direction-${this.options.direction}`); - if (this.options.direction === 'top') - this.offsetY = 40; - else if (this.options.direction === 'right') - this.offsetX = -40; - else if (this.options.direction === 'bottom') - this.offsetY = -40; - else - this.offsetX = 40; - this._setupEventHandlers(); - } +let _defaults = { + direction: 'top', + hoverEnabled: true, + toolbarEnabled: false +}; + +export class FloatingActionButton extends Component { + el: HTMLElement; + isOpen: boolean; + private _anchor: HTMLAnchorElement; + private _menu: HTMLElement|null; + private _floatingBtns: HTMLElement[]; + private _floatingBtnsReverse: HTMLElement[]; + offsetY: number; + offsetX: number; + private _handleFABClickBound: any; + private _handleOpenBound: any; + private _handleCloseBound: any; + private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; + btnBottom: number; + btnLeft: number; + btnWidth: number; + + constructor(el, options) { + super(FloatingActionButton, el, options); + + (this.el as any).M_FloatingActionButton = this; + + this.options = {...FloatingActionButton.defaults, ...options}; + this.isOpen = false; + this._anchor = this.el.querySelector('a'); + this._menu = this.el.querySelector('ul'); + this._floatingBtns = Array.from(this.el.querySelectorAll('ul .btn-floating')); + this._floatingBtnsReverse = this._floatingBtns.reverse(); + this.offsetY = 0; + this.offsetX = 0; + + this.el.classList.add(`direction-${this.options.direction}`); + if (this.options.direction === 'top') + this.offsetY = 40; + else if (this.options.direction === 'right') + this.offsetX = -40; + else if (this.options.direction === 'bottom') + this.offsetY = -40; + else + this.offsetX = 40; + this._setupEventHandlers(); + } - static get defaults() { - return _defaults; - } + static get defaults() { + return _defaults; + } - static init(els, options) { - return super.init(this, els, options); - } + static init(els, options) { + return super.init(this, els, options); + } - static getInstance(el) { - let domElem = !!el.jquery ? el[0] : el; - return domElem.M_FloatingActionButton; - } + static getInstance(el) { + let domElem = !!el.jquery ? el[0] : el; + return domElem.M_FloatingActionButton; + } - destroy() { - this._removeEventHandlers(); - (this.el as any).M_FloatingActionButton = undefined; - } + destroy() { + this._removeEventHandlers(); + (this.el as any).M_FloatingActionButton = undefined; + } - _setupEventHandlers() { - this._handleFABClickBound = this._handleFABClick.bind(this); - this._handleOpenBound = this.open.bind(this); - this._handleCloseBound = this.close.bind(this); - - if (this.options.hoverEnabled && !this.options.toolbarEnabled) { - this.el.addEventListener('mouseenter', this._handleOpenBound); - this.el.addEventListener('mouseleave', this._handleCloseBound); - } else { - this.el.addEventListener('click', this._handleFABClickBound); - } - } + _setupEventHandlers() { + this._handleFABClickBound = this._handleFABClick.bind(this); + this._handleOpenBound = this.open.bind(this); + this._handleCloseBound = this.close.bind(this); - _removeEventHandlers() { - if (this.options.hoverEnabled && !this.options.toolbarEnabled) { - this.el.removeEventListener('mouseenter', this._handleOpenBound); - this.el.removeEventListener('mouseleave', this._handleCloseBound); - } else { - this.el.removeEventListener('click', this._handleFABClickBound); - } + if (this.options.hoverEnabled && !this.options.toolbarEnabled) { + this.el.addEventListener('mouseenter', this._handleOpenBound); + this.el.addEventListener('mouseleave', this._handleCloseBound); + } else { + this.el.addEventListener('click', this._handleFABClickBound); } + } - _handleFABClick() { - if (this.isOpen) { - this.close(); - } else { - this.open(); - } + _removeEventHandlers() { + if (this.options.hoverEnabled && !this.options.toolbarEnabled) { + this.el.removeEventListener('mouseenter', this._handleOpenBound); + this.el.removeEventListener('mouseleave', this._handleCloseBound); + } else { + this.el.removeEventListener('click', this._handleFABClickBound); } + } - _handleDocumentClick(e) { - const elem = e.target; - if (elem !== this._menu) this.close; - /* - if (!elem.closest(this.$menu)) { - this.close(); - }*/ + _handleFABClick() { + if (this.isOpen) { + this.close(); + } else { + this.open(); } + } - open() { - if (this.isOpen) return; - if (this.options.toolbarEnabled) - this._animateInToolbar(); - else - this._animateInFAB(); - this.isOpen = true; - } + _handleDocumentClick(e) { + const elem = e.target; + if (elem !== this._menu) this.close; + /* + if (!elem.closest(this.$menu)) { + this.close(); + }*/ + } - close() { - if (!this.isOpen) return; - if (this.options.toolbarEnabled) { - window.removeEventListener('scroll', this._handleCloseBound, true); - document.body.removeEventListener('click', this._handleDocumentClickBound, true); - this._animateOutToolbar(); - } - else { - this._animateOutFAB(); - } - this.isOpen = false; - } + open() { + if (this.isOpen) return; + if (this.options.toolbarEnabled) + this._animateInToolbar(); + else + this._animateInFAB(); + this.isOpen = true; + } - _animateInFAB() { - this.el.classList.add('active'); - let time = 0; - this._floatingBtnsReverse.forEach((el) => { - anim({ - targets: el, - opacity: 1, - scale: [0.4, 1], - translateY: [this.offsetY, 0], - translateX: [this.offsetX, 0], - duration: 275, - delay: time, - easing: 'easeInOutQuad' - }); - time += 40; - }); + close() { + if (!this.isOpen) return; + if (this.options.toolbarEnabled) { + window.removeEventListener('scroll', this._handleCloseBound, true); + document.body.removeEventListener('click', this._handleDocumentClickBound, true); + this._animateOutToolbar(); } - - _animateOutFAB() { - this._floatingBtnsReverse.forEach((el) => { - anim.remove(el); - anim({ - targets: el, - opacity: 0, - scale: 0.4, - translateY: this.offsetY, - translateX: this.offsetX, - duration: 175, - easing: 'easeOutQuad', - complete: () => { - this.el.classList.remove('active'); - } - }); - }); + else { + this._animateOutFAB(); } + this.isOpen = false; + } - _animateInToolbar() { - let scaleFactor; - let windowWidth = window.innerWidth; - let windowHeight = window.innerHeight; - let btnRect = this.el.getBoundingClientRect(); + _animateInFAB() { + this.el.classList.add('active'); + let time = 0; + this._floatingBtnsReverse.forEach((el) => { + anim({ + targets: el, + opacity: 1, + scale: [0.4, 1], + translateY: [this.offsetY, 0], + translateX: [this.offsetX, 0], + duration: 275, + delay: time, + easing: 'easeInOutQuad' + }); + time += 40; + }); + } - const backdrop = document.createElement('div'); - backdrop.classList.add('fab-backdrop'); // $('
'); + _animateOutFAB() { + this._floatingBtnsReverse.forEach((el) => { + anim.remove(el); + anim({ + targets: el, + opacity: 0, + scale: 0.4, + translateY: this.offsetY, + translateX: this.offsetX, + duration: 175, + easing: 'easeOutQuad', + complete: () => { + this.el.classList.remove('active'); + } + }); + }); + } - const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color'); + _animateInToolbar() { + let scaleFactor; + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; + let btnRect = this.el.getBoundingClientRect(); - this._anchor.append(backdrop); + const backdrop = document.createElement('div'); + backdrop.classList.add('fab-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; + const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color'); - // Set initial state - this.el.classList.add('active'); - this.el.style.textAlign = 'center'; - this.el.style.width = '100%'; - this.el.style.bottom = '0'; - this.el.style.left = '0'; - this.el.style.transform = 'translateX(' + this.offsetX + 'px)'; - this.el.style.transition = 'none'; + this._anchor.append(backdrop); - this._anchor.style.transform = `translateY(${this.offsetY}px`; - this._anchor.style.transition = 'none'; + 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; - (backdrop).style.backgroundColor = fabColor; + // Set initial state + this.el.classList.add('active'); + this.el.style.textAlign = 'center'; + this.el.style.width = '100%'; + this.el.style.bottom = '0'; + this.el.style.left = '0'; + this.el.style.transform = 'translateX(' + this.offsetX + 'px)'; + this.el.style.transition = 'none'; - 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'; + this._anchor.style.transform = `translateY(${this.offsetY}px`; + this._anchor.style.transition = 'none'; - this._anchor.style.overflow = 'visible'; - this._anchor.style.transform = ''; - this._anchor.style.transition = 'transform .2s'; + (backdrop).style.backgroundColor = fabColor; - setTimeout(() => { - this.el.style.overflow = 'hidden'; - this.el.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'; - backdrop.style.transform = 'scale(' + scaleFactor + ')'; - backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'; + this._anchor.style.overflow = 'visible'; + this._anchor.style.transform = ''; + this._anchor.style.transition = 'transform .2s'; - this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => a.style.opacity = '1'); + setTimeout(() => { + this.el.style.overflow = 'hidden'; + this.el.style.backgroundColor = fabColor; - // Scroll to close. - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - window.addEventListener('scroll', this._handleCloseBound, true); - document.body.addEventListener('click', this._handleDocumentClickBound, true); - }, 100); - }, 0); - } + backdrop.style.transform = 'scale(' + scaleFactor + ')'; + backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'; + this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => a.style.opacity = '1'); + // Scroll to close. + this._handleDocumentClickBound = this._handleDocumentClick.bind(this); + window.addEventListener('scroll', this._handleCloseBound, true); + document.body.addEventListener('click', this._handleDocumentClickBound, true); + }, 100); + }, 0); + } - _animateOutToolbar() { - return; - /* - let windowWidth = window.innerWidth; - let windowHeight = window.innerHeight; - let backdrop = this.$el.find('.fab-backdrop'); - let fabColor = this.$anchor.css('background-color'); - this.offsetX = this.btnLeft - windowWidth / 2 + this.btnWidth / 2; - this.offsetY = windowHeight - this.btnBottom; - // Hide backdrop - this.$el.removeClass('active'); + _animateOutToolbar() { + return; + /* + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; + let backdrop = this.$el.find('.fab-backdrop'); + let fabColor = this.$anchor.css('background-color'); + + this.offsetX = this.btnLeft - windowWidth / 2 + this.btnWidth / 2; + this.offsetY = windowHeight - this.btnBottom; + + // Hide backdrop + this.$el.removeClass('active'); + this.$el.css({ + 'background-color': 'transparent', + transition: 'none' + }); + // this.$anchor.css({ + // transition: 'none' + // }); + backdrop.css({ + transform: 'scale(0)', + 'background-color': fabColor + }); + + // this.$menu + // .children('li') + // .children('a') + // .css({ + // opacity: '' + // }); + + setTimeout(() => { + backdrop.remove(); + + // Set initial state. this.$el.css({ - 'background-color': 'transparent', - transition: 'none' + 'text-align': '', + width: '', + bottom: '', + left: '', + overflow: '', + 'background-color': '', + transform: 'translate3d(' + -this.offsetX + 'px,0,0)' }); // this.$anchor.css({ - // transition: 'none' + // overflow: '', + // transform: 'translate3d(0,' + this.offsetY + 'px,0)' // }); - backdrop.css({ - transform: 'scale(0)', - 'background-color': fabColor - }); - - // this.$menu - // .children('li') - // .children('a') - // .css({ - // opacity: '' - // }); setTimeout(() => { - backdrop.remove(); - - // Set initial state. this.$el.css({ - 'text-align': '', - width: '', - bottom: '', - left: '', - overflow: '', - 'background-color': '', - transform: 'translate3d(' + -this.offsetX + 'px,0,0)' + transform: 'translate3d(0,0,0)', + transition: 'transform .2s' }); // this.$anchor.css({ - // overflow: '', - // transform: 'translate3d(0,' + this.offsetY + 'px,0)' + // transform: 'translate3d(0,0,0)', + // transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)' // }); - - setTimeout(() => { - this.$el.css({ - transform: 'translate3d(0,0,0)', - transition: 'transform .2s' - }); - // this.$anchor.css({ - // transform: 'translate3d(0,0,0)', - // transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)' - // }); - }, 20); - }, 200); - */ - } + }, 20); + }, 200); + */ } - - \ No newline at end of file +} diff --git a/src/cards.ts b/src/cards.ts index 5cf3af0469..bc2171a6ba 100644 --- a/src/cards.ts +++ b/src/cards.ts @@ -15,7 +15,7 @@ export class Cards { if (!cardReveal) return; const initialOverflow = getComputedStyle(card).overflow; - // Close Card + // Close Card const closeArea = cardReveal.querySelector('.card-reveal .card-title'); if (trigger === closeArea || closeArea.contains(trigger)) { anim({ @@ -29,7 +29,7 @@ export class Cards { } }); }; - + // Reveal Card const activators = card.querySelectorAll('.activator'); activators.forEach(activator => { @@ -44,11 +44,10 @@ export class Cards { }); } }); - - }); + + }); }); - } + } } - \ No newline at end of file diff --git a/src/carousel.ts b/src/carousel.ts index 1e57a5639e..23962e6388 100644 --- a/src/carousel.ts +++ b/src/carousel.ts @@ -1,607 +1,607 @@ import { Component } from "./component"; import { M } from "./global"; - let _defaults = { - duration: 200, // ms - dist: -100, // zoom scale TODO: make this more intuitive as an option - shift: 0, // spacing for center image - padding: 0, // Padding between non center items - numVisible: 5, // Number of visible items in carousel - fullWidth: false, // Change to full width styles - indicators: false, // Toggle indicators - noWrap: false, // Don't wrap around and cycle through items. - onCycleTo: null // Callback for when a new slide is cycled to. - }; - - export class Carousel extends Component { - el: HTMLElement; - hasMultipleSlides: boolean; - showIndicators: boolean; - noWrap: any; - pressed: boolean; - dragged: boolean; - offset: number; - target: number; - images: HTMLElement[]; - itemWidth: any; - itemHeight: any; - dim: number; - _autoScrollBound: any; - _trackBound: any; - _indicators: any; - count: number; - xform: string; - private _handleCarouselTapBound: any; - private _handleCarouselDragBound: any; - private _handleCarouselReleaseBound: any; - private _handleCarouselClickBound: any; - _handleIndicatorClickBound: any; - _handleThrottledResizeBound: any; - verticalDragged: boolean; - reference: any; - referenceY: any; - velocity: number; - frame: number; - timestamp: number; - ticker: NodeJS.Timer; - amplitude: number; - center: number = 0; - imageHeight: any; - scrollingTimeout: any; - oneTimeCallback: any; - - constructor(el: Element, options: Object) { - super(Carousel, el, options); - (this.el as any).M_Carousel = this; - this.options = {...Carousel.defaults, ...options}; - - // Setup - this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1; - this.showIndicators = this.options.indicators && this.hasMultipleSlides; - this.noWrap = this.options.noWrap || !this.hasMultipleSlides; - this.pressed = false; - this.dragged = false; - this.offset = this.target = 0; - this.images = []; - this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; - this.itemHeight = this.el.querySelector('.carousel-item').clientHeight; - this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions. - this._autoScrollBound = this._autoScroll.bind(this); - this._trackBound = this._track.bind(this); +let _defaults = { + duration: 200, // ms + dist: -100, // zoom scale TODO: make this more intuitive as an option + shift: 0, // spacing for center image + padding: 0, // Padding between non center items + numVisible: 5, // Number of visible items in carousel + fullWidth: false, // Change to full width styles + indicators: false, // Toggle indicators + noWrap: false, // Don't wrap around and cycle through items. + onCycleTo: null // Callback for when a new slide is cycled to. +}; + +export class Carousel extends Component { + el: HTMLElement; + hasMultipleSlides: boolean; + showIndicators: boolean; + noWrap: any; + pressed: boolean; + dragged: boolean; + offset: number; + target: number; + images: HTMLElement[]; + itemWidth: any; + itemHeight: any; + dim: number; + _autoScrollBound: any; + _trackBound: any; + _indicators: any; + count: number; + xform: string; + private _handleCarouselTapBound: any; + private _handleCarouselDragBound: any; + private _handleCarouselReleaseBound: any; + private _handleCarouselClickBound: any; + _handleIndicatorClickBound: any; + _handleThrottledResizeBound: any; + verticalDragged: boolean; + reference: any; + referenceY: any; + velocity: number; + frame: number; + timestamp: number; + ticker: NodeJS.Timer; + amplitude: number; + center: number = 0; + imageHeight: any; + scrollingTimeout: any; + oneTimeCallback: any; + + constructor(el: Element, options: Object) { + super(Carousel, el, options); + (this.el as any).M_Carousel = this; + this.options = {...Carousel.defaults, ...options}; + + // Setup + this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1; + this.showIndicators = this.options.indicators && this.hasMultipleSlides; + this.noWrap = this.options.noWrap || !this.hasMultipleSlides; + this.pressed = false; + this.dragged = false; + this.offset = this.target = 0; + this.images = []; + this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; + this.itemHeight = this.el.querySelector('.carousel-item').clientHeight; + this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions. + this._autoScrollBound = this._autoScroll.bind(this); + this._trackBound = this._track.bind(this); + + // Full Width carousel setup + if (this.options.fullWidth) { + this.options.dist = 0; + this._setCarouselHeight(); + + // Offset fixed items when indicators. + if (this.showIndicators) { + this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators'); + } + } - // Full Width carousel setup - if (this.options.fullWidth) { - this.options.dist = 0; - this._setCarouselHeight(); + // Iterate through slides + this._indicators = document.createElement('ul'); + this._indicators.classList.add('indicators'); - // Offset fixed items when indicators. - if (this.showIndicators) { - this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators'); + this.el.querySelectorAll('.carousel-item').forEach((item: HTMLElement, i) => { + this.images.push(item); + if (this.showIndicators) { + const indicator = document.createElement('li'); + indicator.classList.add('indicator-item'); + if (i === 0) { + indicator.classList.add('active'); } + this._indicators.appendChild(indicator); } + }); - // Iterate through slides - this._indicators = document.createElement('ul'); - this._indicators.classList.add('indicators'); - - this.el.querySelectorAll('.carousel-item').forEach((item: HTMLElement, i) => { - this.images.push(item); - if (this.showIndicators) { - const indicator = document.createElement('li'); - indicator.classList.add('indicator-item'); - if (i === 0) { - indicator.classList.add('active'); - } - this._indicators.appendChild(indicator); - } - }); - - if (this.showIndicators) - this.el.appendChild(this._indicators); + if (this.showIndicators) + this.el.appendChild(this._indicators); - this.count = this.images.length; + this.count = this.images.length; - // Cap numVisible at count - this.options.numVisible = Math.min(this.count, this.options.numVisible); + // Cap numVisible at count + this.options.numVisible = Math.min(this.count, this.options.numVisible); - // Setup cross browser string - this.xform = 'transform'; - ['webkit', 'Moz', 'O', 'ms'].every((prefix) => { - var e = prefix + 'Transform'; - if (typeof document.body.style[e] !== 'undefined') { - this.xform = e; - return false; - } - return true; - }); - - this._setupEventHandlers(); - this._scroll(this.offset); - } - - static get defaults() { - return _defaults; - } - - static init(els, options) { - return super.init(this, els, options); + // Setup cross browser string + this.xform = 'transform'; + ['webkit', 'Moz', 'O', 'ms'].every((prefix) => { + var e = prefix + 'Transform'; + if (typeof document.body.style[e] !== 'undefined') { + this.xform = e; + return false; + } + return true; + }); + + this._setupEventHandlers(); + this._scroll(this.offset); + } + + static get defaults() { + return _defaults; + } + + static init(els, options) { + return super.init(this, els, options); + } + + static getInstance(el) { + let domElem = !!el.jquery ? el[0] : el; + return domElem.M_Carousel; + } + + destroy() { + this._removeEventHandlers(); + (this.el as any).M_Carousel = undefined; + } + + _setupEventHandlers() { + this._handleCarouselTapBound = this._handleCarouselTap.bind(this); + this._handleCarouselDragBound = this._handleCarouselDrag.bind(this); + this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this); + this._handleCarouselClickBound = this._handleCarouselClick.bind(this); + if (typeof window.ontouchstart !== 'undefined') { + this.el.addEventListener('touchstart', this._handleCarouselTapBound); + this.el.addEventListener('touchmove', this._handleCarouselDragBound); + this.el.addEventListener('touchend', this._handleCarouselReleaseBound); } - - static getInstance(el) { - let domElem = !!el.jquery ? el[0] : el; - return domElem.M_Carousel; + this.el.addEventListener('mousedown', this._handleCarouselTapBound); + this.el.addEventListener('mousemove', this._handleCarouselDragBound); + this.el.addEventListener('mouseup', this._handleCarouselReleaseBound); + this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound); + this.el.addEventListener('click', this._handleCarouselClickBound); + if (this.showIndicators && this._indicators) { + this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this); + this._indicators.querySelectorAll('.indicator-item').forEach((el) => { + el.addEventListener('click', this._handleIndicatorClickBound); + }); } - - destroy() { - this._removeEventHandlers(); - (this.el as any).M_Carousel = undefined; + // Resize + let throttledResize = M.throttle(this._handleResize, 200, null); + this._handleThrottledResizeBound = throttledResize.bind(this); + window.addEventListener('resize', this._handleThrottledResizeBound); + } + + _removeEventHandlers() { + if (typeof window.ontouchstart !== 'undefined') { + this.el.removeEventListener('touchstart', this._handleCarouselTapBound); + this.el.removeEventListener('touchmove', this._handleCarouselDragBound); + this.el.removeEventListener('touchend', this._handleCarouselReleaseBound); } - - _setupEventHandlers() { - this._handleCarouselTapBound = this._handleCarouselTap.bind(this); - this._handleCarouselDragBound = this._handleCarouselDrag.bind(this); - this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this); - this._handleCarouselClickBound = this._handleCarouselClick.bind(this); - if (typeof window.ontouchstart !== 'undefined') { - this.el.addEventListener('touchstart', this._handleCarouselTapBound); - this.el.addEventListener('touchmove', this._handleCarouselDragBound); - this.el.addEventListener('touchend', this._handleCarouselReleaseBound); - } - this.el.addEventListener('mousedown', this._handleCarouselTapBound); - this.el.addEventListener('mousemove', this._handleCarouselDragBound); - this.el.addEventListener('mouseup', this._handleCarouselReleaseBound); - this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound); - this.el.addEventListener('click', this._handleCarouselClickBound); - if (this.showIndicators && this._indicators) { - this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this); - this._indicators.querySelectorAll('.indicator-item').forEach((el) => { - el.addEventListener('click', this._handleIndicatorClickBound); - }); - } - // Resize - let throttledResize = M.throttle(this._handleResize, 200, null); - this._handleThrottledResizeBound = throttledResize.bind(this); - window.addEventListener('resize', this._handleThrottledResizeBound); + this.el.removeEventListener('mousedown', this._handleCarouselTapBound); + this.el.removeEventListener('mousemove', this._handleCarouselDragBound); + this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound); + this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound); + this.el.removeEventListener('click', this._handleCarouselClickBound); + if (this.showIndicators && this._indicators) { + this._indicators.querySelectorAll('.indicator-item').forEach((el) => { + el.removeEventListener('click', this._handleIndicatorClickBound); + }); } + window.removeEventListener('resize', this._handleThrottledResizeBound); + } - _removeEventHandlers() { - if (typeof window.ontouchstart !== 'undefined') { - this.el.removeEventListener('touchstart', this._handleCarouselTapBound); - this.el.removeEventListener('touchmove', this._handleCarouselDragBound); - this.el.removeEventListener('touchend', this._handleCarouselReleaseBound); - } - this.el.removeEventListener('mousedown', this._handleCarouselTapBound); - this.el.removeEventListener('mousemove', this._handleCarouselDragBound); - this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound); - this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound); - this.el.removeEventListener('click', this._handleCarouselClickBound); - if (this.showIndicators && this._indicators) { - this._indicators.querySelectorAll('.indicator-item').forEach((el) => { - el.removeEventListener('click', this._handleIndicatorClickBound); - }); - } - window.removeEventListener('resize', this._handleThrottledResizeBound); + _handleCarouselTap(e) { + // Fixes firefox draggable image bug + if (e.type === 'mousedown' && (e.target).tagName === 'IMG') { + e.preventDefault(); } - - _handleCarouselTap(e) { - // Fixes firefox draggable image bug - if (e.type === 'mousedown' && (e.target).tagName === 'IMG') { - e.preventDefault(); - } - this.pressed = true; - this.dragged = false; - this.verticalDragged = false; - this.reference = this._xpos(e); - this.referenceY = this._ypos(e); - - this.velocity = this.amplitude = 0; - this.frame = this.offset; - this.timestamp = Date.now(); - clearInterval(this.ticker); - this.ticker = setInterval(this._trackBound, 100); - } - - _handleCarouselDrag(e) { - let x, y, delta, deltaY; - if (this.pressed) { - x = this._xpos(e); - y = this._ypos(e); - delta = this.reference - x; - deltaY = Math.abs(this.referenceY - y); - if (deltaY < 30 && !this.verticalDragged) { - // If vertical scrolling don't allow dragging. - if (delta > 2 || delta < -2) { - this.dragged = true; - this.reference = x; - this._scroll(this.offset + delta); - } - } else if (this.dragged) { - // If dragging don't allow vertical scroll. - e.preventDefault(); - e.stopPropagation(); - return false; - } else { - // Vertical scrolling. - this.verticalDragged = true; + this.pressed = true; + this.dragged = false; + this.verticalDragged = false; + this.reference = this._xpos(e); + this.referenceY = this._ypos(e); + + this.velocity = this.amplitude = 0; + this.frame = this.offset; + this.timestamp = Date.now(); + clearInterval(this.ticker); + this.ticker = setInterval(this._trackBound, 100); + } + + _handleCarouselDrag(e) { + let x, y, delta, deltaY; + if (this.pressed) { + x = this._xpos(e); + y = this._ypos(e); + delta = this.reference - x; + deltaY = Math.abs(this.referenceY - y); + if (deltaY < 30 && !this.verticalDragged) { + // If vertical scrolling don't allow dragging. + if (delta > 2 || delta < -2) { + this.dragged = true; + this.reference = x; + this._scroll(this.offset + delta); } - } - if (this.dragged) { + } else if (this.dragged) { // If dragging don't allow vertical scroll. e.preventDefault(); e.stopPropagation(); return false; + } else { + // Vertical scrolling. + this.verticalDragged = true; } } + if (this.dragged) { + // If dragging don't allow vertical scroll. + e.preventDefault(); + e.stopPropagation(); + return false; + } + } - _handleCarouselRelease(e) { - if (this.pressed) { - this.pressed = false; - } else { - return; - } - clearInterval(this.ticker); - this.target = this.offset; - if (this.velocity > 10 || this.velocity < -10) { - this.amplitude = 0.9 * this.velocity; - this.target = this.offset + this.amplitude; - } - this.target = Math.round(this.target / this.dim) * this.dim; - // No wrap of items. - if (this.noWrap) { - if (this.target >= this.dim * (this.count - 1)) { - this.target = this.dim * (this.count - 1); - } else if (this.target < 0) { - this.target = 0; - } - } - this.amplitude = this.target - this.offset; - this.timestamp = Date.now(); - requestAnimationFrame(this._autoScrollBound); - if (this.dragged) { - e.preventDefault(); - e.stopPropagation(); + _handleCarouselRelease(e) { + if (this.pressed) { + this.pressed = false; + } else { + return; + } + clearInterval(this.ticker); + this.target = this.offset; + if (this.velocity > 10 || this.velocity < -10) { + this.amplitude = 0.9 * this.velocity; + this.target = this.offset + this.amplitude; + } + this.target = Math.round(this.target / this.dim) * this.dim; + // No wrap of items. + if (this.noWrap) { + if (this.target >= this.dim * (this.count - 1)) { + this.target = this.dim * (this.count - 1); + } else if (this.target < 0) { + this.target = 0; } - return false; } + this.amplitude = this.target - this.offset; + this.timestamp = Date.now(); + requestAnimationFrame(this._autoScrollBound); + if (this.dragged) { + e.preventDefault(); + e.stopPropagation(); + } + return false; + } - _handleCarouselClick(e) { - // Disable clicks if carousel was dragged. - if (this.dragged) { + _handleCarouselClick(e) { + // Disable clicks if carousel was dragged. + if (this.dragged) { + e.preventDefault(); + e.stopPropagation(); + return false; + } + else if (!this.options.fullWidth) { + const clickedElem = (e.target).closest('.carousel-item'); + const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem); + const diff = this._wrap(this.center) - clickedIndex; + // Disable clicks if carousel was shifted by click + if (diff !== 0) { e.preventDefault(); e.stopPropagation(); - return false; } - else if (!this.options.fullWidth) { - const clickedElem = (e.target).closest('.carousel-item'); - const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem); - const diff = this._wrap(this.center) - clickedIndex; - // Disable clicks if carousel was shifted by click - if (diff !== 0) { - e.preventDefault(); - e.stopPropagation(); - } - // fixes https://github.com/materializecss/materialize/issues/180 - if (clickedIndex < 0) { - // relative X position > center of carousel = clicked at the right part of the carousel - if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) { - this.next(); - } else { - this.prev(); - } + // fixes https://github.com/materializecss/materialize/issues/180 + if (clickedIndex < 0) { + // relative X position > center of carousel = clicked at the right part of the carousel + if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) { + this.next(); } else { - this._cycleTo(clickedIndex); + this.prev(); } + } else { + this._cycleTo(clickedIndex); } } + } - _handleIndicatorClick(e: Event) { - e.stopPropagation(); - const indicator = (e.target).closest('.indicator-item'); - if (indicator) { - const index = [...indicator.parentNode.children].indexOf(indicator); - this._cycleTo(index); - } + _handleIndicatorClick(e: Event) { + e.stopPropagation(); + const indicator = (e.target).closest('.indicator-item'); + if (indicator) { + const index = [...indicator.parentNode.children].indexOf(indicator); + this._cycleTo(index); } + } - _handleResize(e) { - if (this.options.fullWidth) { - this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; - this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight; - this.dim = this.itemWidth * 2 + this.options.padding; - this.offset = this.center * 2 * this.itemWidth; - this.target = this.offset; - this._setCarouselHeight(true); - } - else { - this._scroll(); - } + _handleResize(e) { + if (this.options.fullWidth) { + this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; + this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight; + this.dim = this.itemWidth * 2 + this.options.padding; + this.offset = this.center * 2 * this.itemWidth; + this.target = this.offset; + this._setCarouselHeight(true); } - - _setCarouselHeight(imageOnly: boolean = false) { - const firstSlide = this.el.querySelector('.carousel-item.active') - ? this.el.querySelector('.carousel-item.active') - : this.el.querySelector('.carousel-item'); - - const firstImage = firstSlide.querySelector('img'); - if (firstImage) { - if (firstImage.complete) { - // If image won't trigger the load event - const imageHeight = firstImage.clientHeight; - if (imageHeight > 0) { - this.el.style.height = imageHeight+'px'; - } - else { - // If image still has no height, use the natural dimensions to calculate - const naturalWidth = firstImage.naturalWidth; - const naturalHeight = firstImage.naturalHeight; - const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight; - this.el.style.height = adjustedHeight+'px'; - } - } else { - // Get height when image is loaded normally - firstImage.addEventListener('load', () => { - this.el.style.height = firstImage.offsetHeight+'px'; - }); + else { + this._scroll(); + } + } + + _setCarouselHeight(imageOnly: boolean = false) { + const firstSlide = this.el.querySelector('.carousel-item.active') + ? this.el.querySelector('.carousel-item.active') + : this.el.querySelector('.carousel-item'); + + const firstImage = firstSlide.querySelector('img'); + if (firstImage) { + if (firstImage.complete) { + // If image won't trigger the load event + const imageHeight = firstImage.clientHeight; + if (imageHeight > 0) { + this.el.style.height = imageHeight+'px'; } - } - else if (!imageOnly) { - const slideHeight = firstSlide.clientHeight; - this.el.style.height = slideHeight+'px'; + else { + // If image still has no height, use the natural dimensions to calculate + const naturalWidth = firstImage.naturalWidth; + const naturalHeight = firstImage.naturalHeight; + const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight; + this.el.style.height = adjustedHeight+'px'; + } + } else { + // Get height when image is loaded normally + firstImage.addEventListener('load', () => { + this.el.style.height = firstImage.offsetHeight+'px'; + }); } } + else if (!imageOnly) { + const slideHeight = firstSlide.clientHeight; + this.el.style.height = slideHeight+'px'; + } + } - _xpos(e) { - // touch event - if (e.targetTouches && e.targetTouches.length >= 1) { - return e.targetTouches[0].clientX; + _xpos(e) { + // touch event + if (e.targetTouches && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientX; + } + // mouse event + return e.clientX; + } + + _ypos(e) { + // touch event + if (e.targetTouches && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientY; + } + // mouse event + return e.clientY; + } + + _wrap(x: number) { + return x >= this.count + ? x % this.count + : x < 0 + ? this._wrap(this.count + (x % this.count)) + : x; + } + + _track() { + let now, elapsed, delta, v; + now = Date.now(); + elapsed = now - this.timestamp; + this.timestamp = now; + delta = this.offset - this.frame; + this.frame = this.offset; + v = (1000 * delta) / (1 + elapsed); + this.velocity = 0.8 * v + 0.2 * this.velocity; + } + + _autoScroll() { + let elapsed, delta; + if (this.amplitude) { + elapsed = Date.now() - this.timestamp; + delta = this.amplitude * Math.exp(-elapsed / this.options.duration); + if (delta > 2 || delta < -2) { + this._scroll(this.target - delta); + requestAnimationFrame(this._autoScrollBound); + } else { + this._scroll(this.target); } - // mouse event - return e.clientX; } + } - _ypos(e) { - // touch event - if (e.targetTouches && e.targetTouches.length >= 1) { - return e.targetTouches[0].clientY; - } - // mouse event - return e.clientY; - } - - _wrap(x: number) { - return x >= this.count - ? x % this.count - : x < 0 - ? this._wrap(this.count + (x % this.count)) - : x; - } - - _track() { - let now, elapsed, delta, v; - now = Date.now(); - elapsed = now - this.timestamp; - this.timestamp = now; - delta = this.offset - this.frame; - this.frame = this.offset; - v = (1000 * delta) / (1 + elapsed); - this.velocity = 0.8 * v + 0.2 * this.velocity; - } - - _autoScroll() { - let elapsed, delta; - if (this.amplitude) { - elapsed = Date.now() - this.timestamp; - delta = this.amplitude * Math.exp(-elapsed / this.options.duration); - if (delta > 2 || delta < -2) { - this._scroll(this.target - delta); - requestAnimationFrame(this._autoScrollBound); - } else { - this._scroll(this.target); - } - } + _scroll(x: number = 0) { + // Track scrolling state + if (!this.el.classList.contains('scrolling')) { + this.el.classList.add('scrolling'); + } + if (this.scrollingTimeout != null) { + window.clearTimeout(this.scrollingTimeout); + } + this.scrollingTimeout = window.setTimeout(() => { + this.el.classList.remove('scrolling'); + }, this.options.duration); + + // Start actual scroll + let i, + half, + delta, + dir, + tween, + el, + alignment, + zTranslation, + tweenedOpacity, + centerTweenedOpacity; + 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); + + 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)'; + centerTweenedOpacity = 1; + } + else { + alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) '; + alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)'; + centerTweenedOpacity = 1 - numVisibleOffset * tween; } - _scroll(x: number = 0) { - // Track scrolling state - if (!this.el.classList.contains('scrolling')) { - this.el.classList.add('scrolling'); - } - if (this.scrollingTimeout != null) { - window.clearTimeout(this.scrollingTimeout); + // Set indicator active + if (this.showIndicators) { + const diff = this.center % this.count; + const activeIndicator = this._indicators.querySelector('.indicator-item.active'); + const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator); + if (activeIndicatorIndex !== diff) { + activeIndicator.classList.remove('active'); + const pos = diff < 0 ? this.count + diff : diff; + this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active'); } - this.scrollingTimeout = window.setTimeout(() => { - this.el.classList.remove('scrolling'); - }, this.options.duration); - - // Start actual scroll - let i, - half, - delta, - dir, - tween, - el, - alignment, - zTranslation, - tweenedOpacity, - centerTweenedOpacity; - 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); - - 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)'; - centerTweenedOpacity = 1; - } - else { - alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) '; - alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)'; - centerTweenedOpacity = 1 - numVisibleOffset * tween; - } + // center + // Don't show wrapped items. + if (!this.noWrap || (this.center >= 0 && this.center < this.count)) { + el = this.images[this._wrap(this.center)]; - // Set indicator active - if (this.showIndicators) { - const diff = this.center % this.count; - const activeIndicator = this._indicators.querySelector('.indicator-item.active'); - const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator); - if (activeIndicatorIndex !== diff) { - activeIndicator.classList.remove('active'); - const pos = diff < 0 ? this.count + diff : diff; - this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active'); - } + // Add active class to center item. + if (!el.classList.contains('active')) { + this.el.querySelector('.carousel-item').classList.remove('active'); + el.classList.add('active'); } - // center - // Don't show wrapped items. - if (!this.noWrap || (this.center >= 0 && this.center < this.count)) { - el = this.images[this._wrap(this.center)]; - - // Add active class to center item. - if (!el.classList.contains('active')) { - this.el.querySelector('.carousel-item').classList.remove('active'); - el.classList.add('active'); - } - - let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * - this.options.shift * - tween * - i}px) translateZ(${this.options.dist * tween}px)`; - this._updateItemStyle(el, centerTweenedOpacity, 0, transformString); - } + let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * + this.options.shift * + tween * + i}px) translateZ(${this.options.dist * tween}px)`; + this._updateItemStyle(el, centerTweenedOpacity, 0, transformString); + } - for (i = 1; i <= half; ++i) { - // right side - if (this.options.fullWidth) { - zTranslation = this.options.dist; - tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1; - } else { - zTranslation = this.options.dist * (i * 2 + tween * dir); - tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir); - } - // 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 + - (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`; - this._updateItemStyle(el, tweenedOpacity, -i, transformString); - } - // left side - if (this.options.fullWidth) { - zTranslation = this.options.dist; - tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1; - } else { - zTranslation = this.options.dist * (i * 2 - tween * dir); - tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir); - } - // 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 + - (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`; - this._updateItemStyle(el, tweenedOpacity, -i, transformString); - } + for (i = 1; i <= half; ++i) { + // right side + if (this.options.fullWidth) { + zTranslation = this.options.dist; + tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1; + } else { + zTranslation = this.options.dist * (i * 2 + tween * dir); + tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir); } - // center // 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 * - this.options.shift * - tween}px) translateZ(${this.options.dist * tween}px)`; - this._updateItemStyle(el, centerTweenedOpacity, 0, transformString); + if (!this.noWrap || this.center + i < this.count) { + el = this.images[this._wrap(this.center + i)]; + let transformString = `${alignment} translateX(${this.options.shift + + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`; + this._updateItemStyle(el, tweenedOpacity, -i, transformString); } - // onCycleTo callback - const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)]; - - if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') { - this.options.onCycleTo.call(this, _currItem, this.dragged); + // left side + if (this.options.fullWidth) { + zTranslation = this.options.dist; + tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1; + } else { + zTranslation = this.options.dist * (i * 2 - tween * dir); + tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir); } - // One time callback - if (typeof this.oneTimeCallback === 'function') { - this.oneTimeCallback.call(this, _currItem, this.dragged); - this.oneTimeCallback = null; + // 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 + + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`; + this._updateItemStyle(el, tweenedOpacity, -i, transformString); } } + // center + // 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 * + this.options.shift * + tween}px) translateZ(${this.options.dist * tween}px)`; + this._updateItemStyle(el, centerTweenedOpacity, 0, transformString); + } + // onCycleTo callback + const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)]; - _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string) { - el.style[this.xform] = transform; - el.style.zIndex = zIndex.toString(); - el.style.opacity = opacity.toString(); - el.style.visibility = 'visible'; - } - - _cycleTo(n: number, callback: Function = null) { - let diff = (this.center % this.count) - n; - // Account for wraparound. - if (!this.noWrap) { - if (diff < 0) { - if (Math.abs(diff + this.count) < Math.abs(diff)) { - diff += this.count; - } - } else if (diff > 0) { - if (Math.abs(diff - this.count) < diff) { - diff -= this.count; - } - } - } - this.target = this.dim * Math.round(this.offset / this.dim); - // Next + if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') { + this.options.onCycleTo.call(this, _currItem, this.dragged); + } + // One time callback + if (typeof this.oneTimeCallback === 'function') { + this.oneTimeCallback.call(this, _currItem, this.dragged); + this.oneTimeCallback = null; + } + } + + _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string) { + el.style[this.xform] = transform; + el.style.zIndex = zIndex.toString(); + el.style.opacity = opacity.toString(); + el.style.visibility = 'visible'; + } + + _cycleTo(n: number, callback: Function = null) { + let diff = (this.center % this.count) - n; + // Account for wraparound. + if (!this.noWrap) { if (diff < 0) { - this.target += this.dim * Math.abs(diff); - } // Prev - else if (diff > 0) { - this.target -= this.dim * diff; - } - // Set one time callback - if (typeof callback === 'function') { - this.oneTimeCallback = callback; - } - // Scroll - if (this.offset !== this.target) { - this.amplitude = this.target - this.offset; - this.timestamp = Date.now(); - requestAnimationFrame(this._autoScrollBound); + if (Math.abs(diff + this.count) < Math.abs(diff)) { + diff += this.count; + } + } else if (diff > 0) { + if (Math.abs(diff - this.count) < diff) { + diff -= this.count; + } } } + this.target = this.dim * Math.round(this.offset / this.dim); + // Next + if (diff < 0) { + this.target += this.dim * Math.abs(diff); + } // Prev + else if (diff > 0) { + this.target -= this.dim * diff; + } + // Set one time callback + if (typeof callback === 'function') { + this.oneTimeCallback = callback; + } + // Scroll + if (this.offset !== this.target) { + this.amplitude = this.target - this.offset; + this.timestamp = Date.now(); + requestAnimationFrame(this._autoScrollBound); + } + } - next(n: number = 1) { - if (n === undefined || isNaN(n)) { - n = 1; - } - let index = this.center + n; - if (index >= this.count || index < 0) { - if (this.noWrap) return; - index = this._wrap(index); - } - this._cycleTo(index); + next(n: number = 1) { + if (n === undefined || isNaN(n)) { + n = 1; + } + let index = this.center + n; + if (index >= this.count || index < 0) { + if (this.noWrap) return; + index = this._wrap(index); } + this._cycleTo(index); + } - prev(n: number = 1) { - if (n === undefined || isNaN(n)) { - n = 1; - } - let index = this.center - n; - if (index >= this.count || index < 0) { - if (this.noWrap) return; - index = this._wrap(index); - } - this._cycleTo(index); + prev(n: number = 1) { + if (n === undefined || isNaN(n)) { + n = 1; } + let index = this.center - n; + if (index >= this.count || index < 0) { + if (this.noWrap) return; + index = this._wrap(index); + } + this._cycleTo(index); + } - set(n: number, callback: Function) { - if (n === undefined || isNaN(n)) { - n = 0; - } - if (n > this.count || n < 0) { - if (this.noWrap) return; - n = this._wrap(n); - } - this._cycleTo(n, callback); + set(n: number, callback: Function) { + if (n === undefined || isNaN(n)) { + n = 0; + } + if (n > this.count || n < 0) { + if (this.noWrap) return; + n = this._wrap(n); } - } \ No newline at end of file + this._cycleTo(n, callback); + } +} diff --git a/src/chips.ts b/src/chips.ts index e56ef0777a..340737c05f 100644 --- a/src/chips.ts +++ b/src/chips.ts @@ -142,7 +142,7 @@ export class Chips extends Component { // Don't handle keydown inputs on input and textarea const tag = (e.target).tagName; if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown) return; - + const currChips: Chips = (chips as any).M_Chips; // backspace and delete if (e.keyCode === 8 || e.keyCode === 46) { diff --git a/src/collapsible.ts b/src/collapsible.ts index e6956d1b88..40c9a7f681 100644 --- a/src/collapsible.ts +++ b/src/collapsible.ts @@ -29,7 +29,7 @@ export class Collapsible extends Component { if (this.options.accordion) if (activeBodies.length > 0) activeBodies[0].style.display = 'block'; // Accordion - else + else activeBodies.forEach(el => el.style.display = 'block'); // Expandables } diff --git a/src/datepicker.ts b/src/datepicker.ts index 8e05e2bd2a..e12ce9d6d9 100644 --- a/src/datepicker.ts +++ b/src/datepicker.ts @@ -88,810 +88,810 @@ let _defaults = { onDraw: null }; - export class Datepicker extends Component { - el: HTMLInputElement - id: string; - isOpen: boolean; - modal: Modal; - calendarEl: HTMLElement; - clearBtn: HTMLElement; - doneBtn: HTMLElement; - cancelBtn: HTMLElement; - modalEl: HTMLElement; - yearTextEl: HTMLElement; - dateTextEl: HTMLElement; - date: any; - formats: any; - calendars: any; - private _y: any; - private _m: any; - private _handleInputKeydownBound: any; - private _handleInputClickBound: any; - private _handleInputChangeBound: any; - private _handleCalendarClickBound: any; - private _finishSelectionBound: any; - private _closeBound: any; - private _handleClearClickBound: any; - static _template: string; - - constructor(el, options) { - super(Datepicker, el, options); - (this.el as any).M_Datepicker = this; - this.options = {...Datepicker.defaults, ...options}; - - // make sure i18n defaults are not lost when only few i18n option properties are passed - if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') { - this.options.i18n = {...Datepicker.defaults.i18n, ...options.i18n}; - } - - // Remove time component from minDate and maxDate options - if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0); - if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0); - - this.id = M.guid(); - - this._setupVariables(); - this._insertHTMLIntoDOM(); - this._setupModal(); - this._setupEventHandlers(); - - if (!this.options.defaultDate) { - this.options.defaultDate = new Date(Date.parse(this.el.value)); - } - - let defDate = this.options.defaultDate; - if (Datepicker._isDate(defDate)) { - if (this.options.setDefaultDate) { - this.setDate(defDate, true); - this.setInputValue(); - } - else { - this.gotoDate(defDate); - } +export class Datepicker extends Component { + el: HTMLInputElement + id: string; + isOpen: boolean; + modal: Modal; + calendarEl: HTMLElement; + clearBtn: HTMLElement; + doneBtn: HTMLElement; + cancelBtn: HTMLElement; + modalEl: HTMLElement; + yearTextEl: HTMLElement; + dateTextEl: HTMLElement; + date: any; + formats: any; + calendars: any; + private _y: any; + private _m: any; + private _handleInputKeydownBound: any; + private _handleInputClickBound: any; + private _handleInputChangeBound: any; + private _handleCalendarClickBound: any; + private _finishSelectionBound: any; + private _closeBound: any; + private _handleClearClickBound: any; + static _template: string; + + constructor(el, options) { + super(Datepicker, el, options); + (this.el as any).M_Datepicker = this; + this.options = {...Datepicker.defaults, ...options}; + + // make sure i18n defaults are not lost when only few i18n option properties are passed + if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') { + this.options.i18n = {...Datepicker.defaults.i18n, ...options.i18n}; + } + + // Remove time component from minDate and maxDate options + if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0); + if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0); + + this.id = M.guid(); + + this._setupVariables(); + this._insertHTMLIntoDOM(); + this._setupModal(); + this._setupEventHandlers(); + + if (!this.options.defaultDate) { + this.options.defaultDate = new Date(Date.parse(this.el.value)); + } + + let defDate = this.options.defaultDate; + if (Datepicker._isDate(defDate)) { + if (this.options.setDefaultDate) { + this.setDate(defDate, true); + this.setInputValue(); } else { - this.gotoDate(new Date()); - } - this.isOpen = false; - } - - static get defaults() { - return _defaults; - } - - static init(els, options) { - return super.init(this, els, options); - } - - static _isDate(obj) { - return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime()); - } - - static _isWeekend(date) { - let day = date.getDay(); - return day === 0 || day === 6; - } - - static _setToStartOfDay(date) { - if (Datepicker._isDate(date)) date.setHours(0, 0, 0, 0); - } - - static _getDaysInMonth(year, month) { - return [31, Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][ - month + this.gotoDate(defDate); + } + } + else { + this.gotoDate(new Date()); + } + this.isOpen = false; + } + + static get defaults() { + return _defaults; + } + + static init(els, options) { + return super.init(this, els, options); + } + + static _isDate(obj) { + return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime()); + } + + static _isWeekend(date) { + let day = date.getDay(); + return day === 0 || day === 6; + } + + static _setToStartOfDay(date) { + if (Datepicker._isDate(date)) date.setHours(0, 0, 0, 0); + } + + static _getDaysInMonth(year, month) { + return [31, Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][ + month + ]; + } + + static _isLeapYear(year) { + // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951 + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + } + + static _compareDates(a, b) { + // weak date comparison (use setToStartOfDay(date) to ensure correct result) + return a.getTime() === b.getTime(); + } + + static getInstance(el) { + let domElem = !!el.jquery ? el[0] : el; + return domElem.M_Datepicker; + } + + destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + this.modalEl.remove(); + this.destroySelects(); + (this.el as any).M_Datepicker = undefined; + } + + destroySelects() { + let oldYearSelect = this.calendarEl.querySelector('.orig-select-year'); + if (oldYearSelect) { + FormSelect.getInstance(oldYearSelect).destroy(); + } + let oldMonthSelect = this.calendarEl.querySelector('.orig-select-month'); + if (oldMonthSelect) { + FormSelect.getInstance(oldMonthSelect).destroy(); + } + } + + _insertHTMLIntoDOM() { + if (this.options.showClearBtn) { + this.clearBtn.style.visibility = ''; + this.clearBtn.innerText = this.options.i18n.clear; + } + this.doneBtn.innerText = this.options.i18n.done; + this.cancelBtn.innerText = this.options.i18n.cancel; + + if (this.options.container) { + const optEl = this.options.container; + this.options.container = + optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); + this.options.container.append(this.modalEl); + } + else { + //this.modalEl.before(this.el); + this.el.parentElement.appendChild(this.modalEl); + } + } + + _setupModal() { + this.modalEl.id = 'modal-' + this.id; + this.modal = Modal.init(this.modalEl, { + onCloseEnd: () => { + this.isOpen = false; + } + }); + } + + toString(format: string | ((d: Date) => string) = null): string { + format = format || this.options.format; + if (typeof format === 'function') return format(this.date); + if (!Datepicker._isDate(this.date)) return ''; + // String Format + const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g); + const formattedDate = formatArray + .map(label => this.formats[label] ? this.formats[label]() : label) + .join(''); + return formattedDate; + } + + setDate(date, preventOnSelect: boolean = false) { + if (!date) { + this.date = null; + this._renderDateDisplay(); + return this.draw(); + } + if (typeof date === 'string') { + date = new Date(Date.parse(date)); + } + if (!Datepicker._isDate(date)) { + return; + } + let min = this.options.minDate, + max = this.options.maxDate; + if (Datepicker._isDate(min) && date < min) { + date = min; + } + else if (Datepicker._isDate(max) && date > max) { + date = max; + } + this.date = new Date(date.getTime()); + this._renderDateDisplay(); + Datepicker._setToStartOfDay(this.date); + this.gotoDate(this.date); + if (!preventOnSelect && typeof this.options.onSelect === 'function') { + this.options.onSelect.call(this, this.date); + } + } + + setInputValue() { + this.el.value = this.toString(); + this.el.dispatchEvent(new CustomEvent('change', {detail: {firedBy: this}})); + } + + _renderDateDisplay() { + let displayDate = Datepicker._isDate(this.date) ? this.date : new Date(); + let i18n = this.options.i18n; + let day = i18n.weekdaysShort[displayDate.getDay()]; + let month = i18n.monthsShort[displayDate.getMonth()]; + let date = displayDate.getDate(); + this.yearTextEl.innerHTML = displayDate.getFullYear(); + this.dateTextEl.innerHTML = `${day}, ${month} ${date}`; + } + + gotoDate(date) { + let newCalendar = true; + if (!Datepicker._isDate(date)) { + return; + } + if (this.calendars) { + let firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), + lastVisibleDate = new Date( + this.calendars[this.calendars.length - 1].year, + this.calendars[this.calendars.length - 1].month, + 1 + ), + visibleDate = date.getTime(); + // get the end of the month + lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1); + lastVisibleDate.setDate(lastVisibleDate.getDate() - 1); + newCalendar = + visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate; + } + if (newCalendar) { + this.calendars = [ + { + month: date.getMonth(), + year: date.getFullYear() + } ]; } - - static _isLeapYear(year) { - // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951 - return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; - } - - static _compareDates(a, b) { - // weak date comparison (use setToStartOfDay(date) to ensure correct result) - return a.getTime() === b.getTime(); - } - - static getInstance(el) { - let domElem = !!el.jquery ? el[0] : el; - return domElem.M_Datepicker; - } - - destroy() { - this._removeEventHandlers(); - this.modal.destroy(); - this.modalEl.remove(); - this.destroySelects(); - (this.el as any).M_Datepicker = undefined; - } - - destroySelects() { - let oldYearSelect = this.calendarEl.querySelector('.orig-select-year'); - if (oldYearSelect) { - FormSelect.getInstance(oldYearSelect).destroy(); - } - let oldMonthSelect = this.calendarEl.querySelector('.orig-select-month'); - if (oldMonthSelect) { - FormSelect.getInstance(oldMonthSelect).destroy(); - } - } - - _insertHTMLIntoDOM() { - if (this.options.showClearBtn) { - this.clearBtn.style.visibility = ''; - this.clearBtn.innerText = this.options.i18n.clear; - } - this.doneBtn.innerText = this.options.i18n.done; - this.cancelBtn.innerText = this.options.i18n.cancel; - - if (this.options.container) { - const optEl = this.options.container; - this.options.container = - optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); - this.options.container.append(this.modalEl); - } - else { - //this.modalEl.before(this.el); - this.el.parentElement.appendChild(this.modalEl); - } - } - - _setupModal() { - this.modalEl.id = 'modal-' + this.id; - this.modal = Modal.init(this.modalEl, { - onCloseEnd: () => { - this.isOpen = false; + this.adjustCalendars(); + } + + adjustCalendars() { + this.calendars[0] = this.adjustCalendar(this.calendars[0]); + this.draw(); + } + + adjustCalendar(calendar) { + if (calendar.month < 0) { + calendar.year -= Math.ceil(Math.abs(calendar.month) / 12); + calendar.month += 12; + } + if (calendar.month > 11) { + calendar.year += Math.floor(Math.abs(calendar.month) / 12); + calendar.month -= 12; + } + return calendar; + } + + nextMonth() { + this.calendars[0].month++; + this.adjustCalendars(); + } + + prevMonth() { + this.calendars[0].month--; + this.adjustCalendars(); + } + + render(year, month, randId) { + let opts = this.options, + now = new Date(), + days = Datepicker._getDaysInMonth(year, month), + before = new Date(year, month, 1).getDay(), + data = [], + row = []; + Datepicker._setToStartOfDay(now); + if (opts.firstDay > 0) { + before -= opts.firstDay; + if (before < 0) { + before += 7; + } + } + let previousMonth = month === 0 ? 11 : month - 1, + nextMonth = month === 11 ? 0 : month + 1, + yearOfPreviousMonth = month === 0 ? year - 1 : year, + yearOfNextMonth = month === 11 ? year + 1 : year, + daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth); + let cells = days + before, + after = cells; + while (after > 7) { + after -= 7; + } + cells += 7 - after; + let isWeekSelected = false; + for (let i = 0, r = 0; i < cells; i++) { + let day = new Date(year, month, 1 + (i - before)), + isSelected = Datepicker._isDate(this.date) + ? Datepicker._compareDates(day, this.date) + : false, + isToday = Datepicker._compareDates(day, now), + hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false, + isEmpty = i < before || i >= days + before, + dayNumber = 1 + (i - before), + monthNumber = month, + yearNumber = year, + isStartRange = opts.startRange && Datepicker._compareDates(opts.startRange, day), + isEndRange = opts.endRange && Datepicker._compareDates(opts.endRange, day), + isInRange = + opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, + isDisabled = + (opts.minDate && day < opts.minDate) || + (opts.maxDate && day > opts.maxDate) || + (opts.disableWeekends && Datepicker._isWeekend(day)) || + (opts.disableDayFn && opts.disableDayFn(day)); + + if (isEmpty) { + if (i < before) { + dayNumber = daysInPreviousMonth + dayNumber; + monthNumber = previousMonth; + yearNumber = yearOfPreviousMonth; + } else { + dayNumber = dayNumber - days; + monthNumber = nextMonth; + yearNumber = yearOfNextMonth; } - }); - } - - toString(format: string | ((d: Date) => string) = null): string { - format = format || this.options.format; - if (typeof format === 'function') return format(this.date); - if (!Datepicker._isDate(this.date)) return ''; - // String Format - const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g); - const formattedDate = formatArray - .map(label => this.formats[label] ? this.formats[label]() : label) - .join(''); - return formattedDate; - } - - setDate(date, preventOnSelect: boolean = false) { - if (!date) { - this.date = null; - this._renderDateDisplay(); - return this.draw(); - } - if (typeof date === 'string') { - date = new Date(Date.parse(date)); - } - if (!Datepicker._isDate(date)) { - return; - } - let min = this.options.minDate, - max = this.options.maxDate; - if (Datepicker._isDate(min) && date < min) { - date = min; } - else if (Datepicker._isDate(max) && date > max) { - date = max; - } - this.date = new Date(date.getTime()); - this._renderDateDisplay(); - Datepicker._setToStartOfDay(this.date); - this.gotoDate(this.date); - if (!preventOnSelect && typeof this.options.onSelect === 'function') { - this.options.onSelect.call(this, this.date); - } - } - setInputValue() { - this.el.value = this.toString(); - this.el.dispatchEvent(new CustomEvent('change', {detail: {firedBy: this}})); - } - - _renderDateDisplay() { - let displayDate = Datepicker._isDate(this.date) ? this.date : new Date(); - let i18n = this.options.i18n; - let day = i18n.weekdaysShort[displayDate.getDay()]; - let month = i18n.monthsShort[displayDate.getMonth()]; - let date = displayDate.getDate(); - this.yearTextEl.innerHTML = displayDate.getFullYear(); - this.dateTextEl.innerHTML = `${day}, ${month} ${date}`; - } - - gotoDate(date) { - let newCalendar = true; - if (!Datepicker._isDate(date)) { - return; - } - if (this.calendars) { - let firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), - lastVisibleDate = new Date( - this.calendars[this.calendars.length - 1].year, - this.calendars[this.calendars.length - 1].month, - 1 - ), - visibleDate = date.getTime(); - // get the end of the month - lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1); - lastVisibleDate.setDate(lastVisibleDate.getDate() - 1); - newCalendar = - visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate; - } - if (newCalendar) { - this.calendars = [ - { - month: date.getMonth(), - year: date.getFullYear() - } - ]; - } - this.adjustCalendars(); - } - - adjustCalendars() { - this.calendars[0] = this.adjustCalendar(this.calendars[0]); - this.draw(); - } - - adjustCalendar(calendar) { - if (calendar.month < 0) { - calendar.year -= Math.ceil(Math.abs(calendar.month) / 12); - calendar.month += 12; - } - if (calendar.month > 11) { - calendar.year += Math.floor(Math.abs(calendar.month) / 12); - calendar.month -= 12; - } - return calendar; - } - - nextMonth() { - this.calendars[0].month++; - this.adjustCalendars(); - } + let dayConfig = { + day: dayNumber, + month: monthNumber, + year: yearNumber, + hasEvent: hasEvent, + isSelected: isSelected, + isToday: isToday, + isDisabled: isDisabled, + isEmpty: isEmpty, + isStartRange: isStartRange, + isEndRange: isEndRange, + isInRange: isInRange, + showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths + }; - prevMonth() { - this.calendars[0].month--; - this.adjustCalendars(); - } + row.push(this.renderDay(dayConfig)); - render(year, month, randId) { - let opts = this.options, - now = new Date(), - days = Datepicker._getDaysInMonth(year, month), - before = new Date(year, month, 1).getDay(), - data = [], + if (++r === 7) { + data.push(this.renderRow(row, opts.isRTL, isWeekSelected)); row = []; - Datepicker._setToStartOfDay(now); - if (opts.firstDay > 0) { - before -= opts.firstDay; - if (before < 0) { - before += 7; - } - } - let previousMonth = month === 0 ? 11 : month - 1, - nextMonth = month === 11 ? 0 : month + 1, - yearOfPreviousMonth = month === 0 ? year - 1 : year, - yearOfNextMonth = month === 11 ? year + 1 : year, - daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth); - let cells = days + before, - after = cells; - while (after > 7) { - after -= 7; - } - cells += 7 - after; - let isWeekSelected = false; - for (let i = 0, r = 0; i < cells; i++) { - let day = new Date(year, month, 1 + (i - before)), - isSelected = Datepicker._isDate(this.date) - ? Datepicker._compareDates(day, this.date) - : false, - isToday = Datepicker._compareDates(day, now), - hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false, - isEmpty = i < before || i >= days + before, - dayNumber = 1 + (i - before), - monthNumber = month, - yearNumber = year, - isStartRange = opts.startRange && Datepicker._compareDates(opts.startRange, day), - isEndRange = opts.endRange && Datepicker._compareDates(opts.endRange, day), - isInRange = - opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, - isDisabled = - (opts.minDate && day < opts.minDate) || - (opts.maxDate && day > opts.maxDate) || - (opts.disableWeekends && Datepicker._isWeekend(day)) || - (opts.disableDayFn && opts.disableDayFn(day)); - - if (isEmpty) { - if (i < before) { - dayNumber = daysInPreviousMonth + dayNumber; - monthNumber = previousMonth; - yearNumber = yearOfPreviousMonth; - } else { - dayNumber = dayNumber - days; - monthNumber = nextMonth; - yearNumber = yearOfNextMonth; - } - } - - let dayConfig = { - day: dayNumber, - month: monthNumber, - year: yearNumber, - hasEvent: hasEvent, - isSelected: isSelected, - isToday: isToday, - isDisabled: isDisabled, - isEmpty: isEmpty, - isStartRange: isStartRange, - isEndRange: isEndRange, - isInRange: isInRange, - showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths - }; - - row.push(this.renderDay(dayConfig)); - - if (++r === 7) { - data.push(this.renderRow(row, opts.isRTL, isWeekSelected)); - row = []; - r = 0; - isWeekSelected = false; - } + r = 0; + isWeekSelected = false; } - return this.renderTable(opts, data, randId); } + return this.renderTable(opts, data, randId); + } - renderDay(opts) { - let arr = []; - let ariaSelected = 'false'; - if (opts.isEmpty) { - if (opts.showDaysInNextAndPreviousMonths) { - arr.push('is-outside-current-month'); - arr.push('is-selection-disabled'); - } else { - return ''; - } - } - if (opts.isDisabled) { - arr.push('is-disabled'); - } - - if (opts.isToday) { - arr.push('is-today'); - } - if (opts.isSelected) { - arr.push('is-selected'); - ariaSelected = 'true'; - } - if (opts.hasEvent) { - arr.push('has-event'); - } - if (opts.isInRange) { - arr.push('is-inrange'); - } - if (opts.isStartRange) { - arr.push('is-startrange'); - } - if (opts.isEndRange) { - arr.push('is-endrange'); - } - return ( - `` + - `` + - '' - ); - } - - renderRow(days, isRTL, isRowSelected) { - return ( - '' + - (isRTL ? days.reverse() : days).join('') + - '' + renderDay(opts) { + let arr = []; + let ariaSelected = 'false'; + if (opts.isEmpty) { + if (opts.showDaysInNextAndPreviousMonths) { + arr.push('is-outside-current-month'); + arr.push('is-selection-disabled'); + } else { + return ''; + } + } + if (opts.isDisabled) { + arr.push('is-disabled'); + } + + if (opts.isToday) { + arr.push('is-today'); + } + if (opts.isSelected) { + arr.push('is-selected'); + ariaSelected = 'true'; + } + if (opts.hasEvent) { + arr.push('has-event'); + } + if (opts.isInRange) { + arr.push('is-inrange'); + } + if (opts.isStartRange) { + arr.push('is-startrange'); + } + if (opts.isEndRange) { + arr.push('is-endrange'); + } + return ( + `` + + `` + + '' + ); + } + + renderRow(days, isRTL, isRowSelected) { + return ( + '' + + (isRTL ? days.reverse() : days).join('') + + '' + ); + } + + renderTable(opts, data, randId) { + return ( + '
' + + this.renderHead(opts) + + this.renderBody(data) + + '
' + ); + } + + renderHead(opts) { + let i, + arr = []; + for (i = 0; i < 7; i++) { + arr.push( + `${this.renderDayName( + opts, + i, + true + )}` ); } - - renderTable(opts, data, randId) { - return ( - '
' + - this.renderHead(opts) + - this.renderBody(data) + - '
' + '" class="datepicker-controls" role="heading" aria-live="assertive">', + monthHtml, + yearHtml, + prev = true, + next = true; + + for (arr = [], i = 0; i < 12; i++) { + arr.push( + '' ); } - renderHead(opts) { - let i, - arr = []; - for (i = 0; i < 7; i++) { - arr.push( - `${this.renderDayName( - opts, - i, - true - )}` - ); - } - return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; - } - - renderBody(rows) { - return '' + rows.join('') + ''; - } - - renderTitle(instance, c, year, month, refYear, randId) { - let i, - j, - arr, - opts = this.options, - isMinYear = year === opts.minYear, - isMaxYear = year === opts.maxYear, - html = - '
', - monthHtml, - yearHtml, - prev = true, - next = true; - - for (arr = [], i = 0; i < 12; i++) { - arr.push( - '' - ); - } - - monthHtml = ''; - - if (Array.isArray(opts.yearRange)) { - i = opts.yearRange[0]; - j = opts.yearRange[1] + 1; - } - else { - i = year - opts.yearRange; - j = 1 + year + opts.yearRange; - } + monthHtml = ''; - for (arr = []; i < j && i <= opts.maxYear; i++) { - if (i >= opts.minYear) { - arr.push(``); - } - } - if (opts.yearRangeReverse) arr.reverse(); - - yearHtml = ``; - - let leftArrow = - ''; - html += ``; + if (Array.isArray(opts.yearRange)) { + i = opts.yearRange[0]; + j = opts.yearRange[1] + 1; + } + else { + i = year - opts.yearRange; + j = 1 + year + opts.yearRange; + } - html += '
'; - if (opts.showMonthAfterYear) { - html += yearHtml + monthHtml; - } else { - html += monthHtml + yearHtml; + for (arr = []; i < j && i <= opts.maxYear; i++) { + if (i >= opts.minYear) { + arr.push(``); } - html += '
'; + } + if (opts.yearRangeReverse) arr.reverse(); - if (isMinYear && (month === 0 || opts.minMonth >= month)) { - prev = false; - } + yearHtml = ``; - if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { - next = false; - } + let leftArrow = + ''; + html += ``; - let rightArrow = - ''; - html += ``; - - return (html += '
'); - } - - // refresh HTML - draw(force: boolean = false) { - if (!this.isOpen && !force) return; - let opts = this.options, - minYear = opts.minYear, - maxYear = opts.maxYear, - minMonth = opts.minMonth, - maxMonth = opts.maxMonth, - html = '', - randId; - - if (this._y <= minYear) { - this._y = minYear; - if (!isNaN(minMonth) && this._m < minMonth) { - this._m = minMonth; - } - } - if (this._y >= maxYear) { - this._y = maxYear; - if (!isNaN(maxMonth) && this._m > maxMonth) { - this._m = maxMonth; - } - } + html += '
'; + if (opts.showMonthAfterYear) { + html += yearHtml + monthHtml; + } else { + html += monthHtml + yearHtml; + } + html += '
'; - randId = - 'datepicker-title-' + - Math.random() - .toString(36) - .replace(/[^a-z]+/g, '') - .substr(0, 2); - - for (let c = 0; c < 1; c++) { - this._renderDateDisplay(); - html += - this.renderTitle( - this, - c, - this.calendars[c].year, - this.calendars[c].month, - this.calendars[0].year, - randId - ) + this.render(this.calendars[c].year, this.calendars[c].month, randId); - } + if (isMinYear && (month === 0 || opts.minMonth >= month)) { + prev = false; + } - this.destroySelects(); + if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { + next = false; + } - this.calendarEl.innerHTML = html; + let rightArrow = + ''; + html += ``; - // Init Materialize Select - let yearSelect = this.calendarEl.querySelector('.orig-select-year'); - let monthSelect = this.calendarEl.querySelector('.orig-select-month'); - FormSelect.init(yearSelect, { - classes: 'select-year', - dropdownOptions: { container: document.body, constrainWidth: false } - }); - FormSelect.init(monthSelect, { - classes: 'select-month', - dropdownOptions: { container: document.body, constrainWidth: false } - }); + return (html += ''); + } - // Add change handlers for select - yearSelect.addEventListener('change', this._handleYearChange.bind(this)); - monthSelect.addEventListener('change', this._handleMonthChange.bind(this)); + // refresh HTML + draw(force: boolean = false) { + if (!this.isOpen && !force) return; + let opts = this.options, + minYear = opts.minYear, + maxYear = opts.maxYear, + minMonth = opts.minMonth, + maxMonth = opts.maxMonth, + html = '', + randId; - if (typeof this.options.onDraw === 'function') { - this.options.onDraw(this); + if (this._y <= minYear) { + this._y = minYear; + if (!isNaN(minMonth) && this._m < minMonth) { + this._m = minMonth; } } - - _setupEventHandlers() { - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleInputChangeBound = this._handleInputChange.bind(this); - this._handleCalendarClickBound = this._handleCalendarClick.bind(this); - this._finishSelectionBound = this._finishSelection.bind(this); - this._handleMonthChange = this._handleMonthChange.bind(this); - this._closeBound = this.close.bind(this); - - this.el.addEventListener('click', this._handleInputClickBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.el.addEventListener('change', this._handleInputChangeBound); - this.calendarEl.addEventListener('click', this._handleCalendarClickBound); - this.doneBtn.addEventListener('click', this._finishSelectionBound); - this.cancelBtn.addEventListener('click', this._closeBound); - - if (this.options.showClearBtn) { - this._handleClearClickBound = this._handleClearClick.bind(this); - this.clearBtn.addEventListener('click', this._handleClearClickBound); + if (this._y >= maxYear) { + this._y = maxYear; + if (!isNaN(maxMonth) && this._m > maxMonth) { + this._m = maxMonth; } } - _setupVariables() { - const template = document.createElement('template'); - template.innerHTML = Datepicker._template.trim(); - this.modalEl = template.content.firstChild; + randId = + 'datepicker-title-' + + Math.random() + .toString(36) + .replace(/[^a-z]+/g, '') + .substr(0, 2); - this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); - this.yearTextEl = this.modalEl.querySelector('.year-text'); - this.dateTextEl = this.modalEl.querySelector('.date-text'); - if (this.options.showClearBtn) { - this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); - } - this.doneBtn = this.modalEl.querySelector('.datepicker-done'); - this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); - - this.formats = { - d: () => { - return this.date.getDate(); - }, - dd: () => { - let d = this.date.getDate(); - return (d < 10 ? '0' : '') + d; - }, - ddd: () => { - return this.options.i18n.weekdaysShort[this.date.getDay()]; - }, - dddd: () => { - return this.options.i18n.weekdays[this.date.getDay()]; - }, - m: () => { - return this.date.getMonth() + 1; - }, - mm: () => { - let m = this.date.getMonth() + 1; - return (m < 10 ? '0' : '') + m; - }, - mmm: () => { - return this.options.i18n.monthsShort[this.date.getMonth()]; - }, - mmmm: () => { - return this.options.i18n.months[this.date.getMonth()]; - }, - yy: () => { - return ('' + this.date.getFullYear()).slice(2); - }, - yyyy: () => { - return this.date.getFullYear(); - } - }; - } - - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClickBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); - this.el.removeEventListener('change', this._handleInputChangeBound); - this.calendarEl.removeEventListener('click', this._handleCalendarClickBound); - } - - _handleInputClick() { + for (let c = 0; c < 1; c++) { + this._renderDateDisplay(); + html += + this.renderTitle( + this, + c, + this.calendars[c].year, + this.calendars[c].month, + this.calendars[0].year, + randId + ) + this.render(this.calendars[c].year, this.calendars[c].month, randId); + } + + this.destroySelects(); + + this.calendarEl.innerHTML = html; + + // Init Materialize Select + let yearSelect = this.calendarEl.querySelector('.orig-select-year'); + let monthSelect = this.calendarEl.querySelector('.orig-select-month'); + FormSelect.init(yearSelect, { + classes: 'select-year', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + FormSelect.init(monthSelect, { + classes: 'select-month', + dropdownOptions: { container: document.body, constrainWidth: false } + }); + + // Add change handlers for select + yearSelect.addEventListener('change', this._handleYearChange.bind(this)); + monthSelect.addEventListener('change', this._handleMonthChange.bind(this)); + + if (typeof this.options.onDraw === 'function') { + this.options.onDraw(this); + } + } + + _setupEventHandlers() { + this._handleInputKeydownBound = this._handleInputKeydown.bind(this); + this._handleInputClickBound = this._handleInputClick.bind(this); + this._handleInputChangeBound = this._handleInputChange.bind(this); + this._handleCalendarClickBound = this._handleCalendarClick.bind(this); + this._finishSelectionBound = this._finishSelection.bind(this); + this._handleMonthChange = this._handleMonthChange.bind(this); + this._closeBound = this.close.bind(this); + + this.el.addEventListener('click', this._handleInputClickBound); + this.el.addEventListener('keydown', this._handleInputKeydownBound); + this.el.addEventListener('change', this._handleInputChangeBound); + this.calendarEl.addEventListener('click', this._handleCalendarClickBound); + this.doneBtn.addEventListener('click', this._finishSelectionBound); + this.cancelBtn.addEventListener('click', this._closeBound); + + if (this.options.showClearBtn) { + this._handleClearClickBound = this._handleClearClick.bind(this); + this.clearBtn.addEventListener('click', this._handleClearClickBound); + } + } + + _setupVariables() { + const template = document.createElement('template'); + template.innerHTML = Datepicker._template.trim(); + this.modalEl = template.content.firstChild; + + this.calendarEl = this.modalEl.querySelector('.datepicker-calendar'); + this.yearTextEl = this.modalEl.querySelector('.year-text'); + this.dateTextEl = this.modalEl.querySelector('.date-text'); + if (this.options.showClearBtn) { + this.clearBtn = this.modalEl.querySelector('.datepicker-clear'); + } + this.doneBtn = this.modalEl.querySelector('.datepicker-done'); + this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel'); + + this.formats = { + d: () => { + return this.date.getDate(); + }, + dd: () => { + let d = this.date.getDate(); + return (d < 10 ? '0' : '') + d; + }, + ddd: () => { + return this.options.i18n.weekdaysShort[this.date.getDay()]; + }, + dddd: () => { + return this.options.i18n.weekdays[this.date.getDay()]; + }, + m: () => { + return this.date.getMonth() + 1; + }, + mm: () => { + let m = this.date.getMonth() + 1; + return (m < 10 ? '0' : '') + m; + }, + mmm: () => { + return this.options.i18n.monthsShort[this.date.getMonth()]; + }, + mmmm: () => { + return this.options.i18n.months[this.date.getMonth()]; + }, + yy: () => { + return ('' + this.date.getFullYear()).slice(2); + }, + yyyy: () => { + return this.date.getFullYear(); + } + }; + } + + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClickBound); + this.el.removeEventListener('keydown', this._handleInputKeydownBound); + this.el.removeEventListener('change', this._handleInputChangeBound); + this.calendarEl.removeEventListener('click', this._handleCalendarClickBound); + } + + _handleInputClick() { + this.open(); + } + + _handleInputKeydown(e) { + if (e.which === M.keys.ENTER) { + e.preventDefault(); this.open(); } - - _handleInputKeydown(e) { - if (e.which === M.keys.ENTER) { - e.preventDefault(); - this.open(); - } - } - - _handleCalendarClick(e) { - if (!this.isOpen) return; - const target = (e.target); - if (!target.classList.contains('is-disabled')) { - if ( - target.classList.contains('datepicker-day-button') && - !target.classList.contains('is-empty') && - !target.parentElement.classList.contains('is-disabled') - ) { - this.setDate( - new Date( - e.target.getAttribute('data-year'), - e.target.getAttribute('data-month'), - e.target.getAttribute('data-day') - ) - ); - if (this.options.autoClose) { - this._finishSelection(); - } - } - else if (target.closest('.month-prev')) { - this.prevMonth(); - } - else if (target.closest('.month-next')) { - this.nextMonth(); + } + + _handleCalendarClick(e) { + if (!this.isOpen) return; + const target = (e.target); + if (!target.classList.contains('is-disabled')) { + if ( + target.classList.contains('datepicker-day-button') && + !target.classList.contains('is-empty') && + !target.parentElement.classList.contains('is-disabled') + ) { + this.setDate( + new Date( + e.target.getAttribute('data-year'), + e.target.getAttribute('data-month'), + e.target.getAttribute('data-day') + ) + ); + if (this.options.autoClose) { + this._finishSelection(); } } - } - - _handleClearClick() { - this.date = null; - this.setInputValue(); - this.close(); - } - - _handleMonthChange(e) { - this.gotoMonth(e.target.value); - } - - _handleYearChange(e) { - this.gotoYear(e.target.value); - } - - // change view to a specific month (zero-index, e.g. 0: January) - gotoMonth(month) { - if (!isNaN(month)) { - this.calendars[0].month = parseInt(month, 10); - this.adjustCalendars(); + else if (target.closest('.month-prev')) { + this.prevMonth(); } - } - - // change view to a specific full year (e.g. "2012") - gotoYear(year) { - if (!isNaN(year)) { - this.calendars[0].year = parseInt(year, 10); - this.adjustCalendars(); + else if (target.closest('.month-next')) { + this.nextMonth(); } } + } - _handleInputChange(e: Event) { - let date; - // Prevent change event from being fired when triggered by the plugin - if (e['detail']?.firedBy === this) return; - if (this.options.parse) { - date = this.options.parse(this.el.value, this.options.format); - } - else { - date = new Date(Date.parse(this.el.value)); - } - if (Datepicker._isDate(date)) this.setDate(date); - } + _handleClearClick() { + this.date = null; + this.setInputValue(); + this.close(); + } - renderDayName(opts, day, abbr: boolean = false) { - day += opts.firstDay; - while (day >= 7) { - day -= 7; - } - return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; - } + _handleMonthChange(e) { + this.gotoMonth(e.target.value); + } - // Set input value to the selected date and close Datepicker - _finishSelection() { - this.setInputValue(); - this.close(); - } + _handleYearChange(e) { + this.gotoYear(e.target.value); + } - open() { - if (this.isOpen) return; - this.isOpen = true; - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this); - } - this.draw(); - this.modal.open(undefined); - return this; + // change view to a specific month (zero-index, e.g. 0: January) + gotoMonth(month) { + if (!isNaN(month)) { + this.calendars[0].month = parseInt(month, 10); + this.adjustCalendars(); } + } - close() { - if (!this.isOpen) return; - this.isOpen = false; - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this); - } - this.modal.close(); - return this; + // change view to a specific full year (e.g. "2012") + gotoYear(year) { + if (!isNaN(year)) { + this.calendars[0].year = parseInt(year, 10); + this.adjustCalendars(); } - - static { - Datepicker._template = ` -
-
-
- - -
-
-
-
- -
- - -
+ } + + _handleInputChange(e: Event) { + let date; + // Prevent change event from being fired when triggered by the plugin + if (e['detail']?.firedBy === this) return; + if (this.options.parse) { + date = this.options.parse(this.el.value, this.options.format); + } + else { + date = new Date(Date.parse(this.el.value)); + } + if (Datepicker._isDate(date)) this.setDate(date); + } + + renderDayName(opts, day, abbr: boolean = false) { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day]; + } + + // Set input value to the selected date and close Datepicker + _finishSelection() { + this.setInputValue(); + this.close(); + } + + open() { + if (this.isOpen) return; + this.isOpen = true; + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this); + } + this.draw(); + this.modal.open(undefined); + return this; + } + + close() { + if (!this.isOpen) return; + this.isOpen = false; + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this); + } + this.modal.close(); + return this; + } + + static { + Datepicker._template = ` +
+
+
+ + +
+
+
+
+ +
+ +
-
`; - } - } +
+
`; + } +} diff --git a/src/dropdown.ts b/src/dropdown.ts index 236cd45d3f..63147a75b4 100644 --- a/src/dropdown.ts +++ b/src/dropdown.ts @@ -2,554 +2,554 @@ import { Component } from "./component"; import { M } from "./global"; import anim from "animejs"; - const _defaults = { - alignment: 'left', - autoFocus: true, - constrainWidth: true, - container: null, - coverTrigger: true, - closeOnClick: true, - hover: false, - inDuration: 150, - outDuration: 250, - onOpenStart: null, - onOpenEnd: null, - onCloseStart: null, - onCloseEnd: null, - onItemClick: null - }; +const _defaults = { + alignment: 'left', + autoFocus: true, + constrainWidth: true, + container: null, + coverTrigger: true, + closeOnClick: true, + hover: false, + inDuration: 150, + outDuration: 250, + onOpenStart: null, + onOpenEnd: null, + onCloseStart: null, + onCloseEnd: null, + onItemClick: null +}; + +export class Dropdown extends Component { + el: HTMLElement; + static _dropdowns: Dropdown[] = []; + id: string; + dropdownEl: HTMLElement; + isOpen: boolean; + isScrollable: boolean; + isTouchMoving: boolean; + focusedIndex: number; + filterQuery: any[]; + private _resetFilterQueryBound: any; + private _handleDocumentClickBound: any; + private _handleDocumentTouchmoveBound: any; + private _handleDropdownClickBound: any; + private _handleDropdownKeydownBound: any; + private _handleTriggerKeydownBound: any; + private _handleMouseEnterBound: any; + private _handleMouseLeaveBound: any; + _handleClickBound: any; + filterTimeout: NodeJS.Timeout; + + constructor(el, options) { + super(Dropdown, el, options); + (this.el as any).M_Dropdown = this; + Dropdown._dropdowns.push(this); + this.id = M.getIdFromTrigger(el); + this.dropdownEl = document.getElementById(this.id); + //this.$dropdownEl = $(this.dropdownEl); + this.options = {...Dropdown.defaults, ...options}; + + this.isOpen = false; + this.isScrollable = false; + this.isTouchMoving = false; + this.focusedIndex = -1; + this.filterQuery = []; + + // Move dropdown-content after dropdown-trigger + this._moveDropdown(); + this._makeDropdownFocusable(); + this._resetFilterQueryBound = this._resetFilterQuery.bind(this); + this._handleDocumentClickBound = this._handleDocumentClick.bind(this); + this._handleDocumentTouchmoveBound = this._handleDocumentTouchmove.bind(this); + this._handleDropdownClickBound = this._handleDropdownClick.bind(this); + this._handleDropdownKeydownBound = this._handleDropdownKeydown.bind(this); + this._handleTriggerKeydownBound = this._handleTriggerKeydown.bind(this); + this._setupEventHandlers(); + } - export class Dropdown extends Component { - el: HTMLElement; - static _dropdowns: Dropdown[] = []; - id: string; - dropdownEl: HTMLElement; - isOpen: boolean; - isScrollable: boolean; - isTouchMoving: boolean; - focusedIndex: number; - filterQuery: any[]; - private _resetFilterQueryBound: any; - private _handleDocumentClickBound: any; - private _handleDocumentTouchmoveBound: any; - private _handleDropdownClickBound: any; - private _handleDropdownKeydownBound: any; - private _handleTriggerKeydownBound: any; - private _handleMouseEnterBound: any; - private _handleMouseLeaveBound: any; - _handleClickBound: any; - filterTimeout: NodeJS.Timeout; - - constructor(el, options) { - super(Dropdown, el, options); - (this.el as any).M_Dropdown = this; - Dropdown._dropdowns.push(this); - this.id = M.getIdFromTrigger(el); - this.dropdownEl = document.getElementById(this.id); - //this.$dropdownEl = $(this.dropdownEl); - this.options = {...Dropdown.defaults, ...options}; - - this.isOpen = false; - this.isScrollable = false; - this.isTouchMoving = false; - this.focusedIndex = -1; - this.filterQuery = []; - - // Move dropdown-content after dropdown-trigger - this._moveDropdown(); - this._makeDropdownFocusable(); - this._resetFilterQueryBound = this._resetFilterQuery.bind(this); - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - this._handleDocumentTouchmoveBound = this._handleDocumentTouchmove.bind(this); - this._handleDropdownClickBound = this._handleDropdownClick.bind(this); - this._handleDropdownKeydownBound = this._handleDropdownKeydown.bind(this); - this._handleTriggerKeydownBound = this._handleTriggerKeydown.bind(this); - this._setupEventHandlers(); - } + static get defaults() { + return _defaults; + } - static get defaults() { - return _defaults; - } + static init(els, options) { + return super.init(this, els, options); + } - static init(els, options) { - return super.init(this, els, options); - } + static getInstance(el) { + const domElem = !!el.jquery ? el[0] : el; + return domElem.M_Dropdown; + } - static getInstance(el) { - const domElem = !!el.jquery ? el[0] : el; - return domElem.M_Dropdown; - } + destroy() { + this._resetDropdownStyles(); + this._removeEventHandlers(); + Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); + (this.el as any).M_Dropdown = undefined; + } - destroy() { - this._resetDropdownStyles(); - this._removeEventHandlers(); - Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1); - (this.el as any).M_Dropdown = undefined; + _setupEventHandlers() { + // Trigger keydown handler + this.el.addEventListener('keydown', this._handleTriggerKeydownBound); + // Item click handler + this.dropdownEl?.addEventListener('click', this._handleDropdownClickBound); + // Hover event handlers + if (this.options.hover) { + this._handleMouseEnterBound = this._handleMouseEnter.bind(this); + this.el.addEventListener('mouseenter', this._handleMouseEnterBound); + this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); + this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); + this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeaveBound); + // Click event handlers + } else { + this._handleClickBound = this._handleClick.bind(this); + this.el.addEventListener('click', this._handleClickBound); } + } - _setupEventHandlers() { - // Trigger keydown handler - this.el.addEventListener('keydown', this._handleTriggerKeydownBound); - // Item click handler - this.dropdownEl?.addEventListener('click', this._handleDropdownClickBound); - // Hover event handlers - if (this.options.hover) { - this._handleMouseEnterBound = this._handleMouseEnter.bind(this); - this.el.addEventListener('mouseenter', this._handleMouseEnterBound); - this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); - this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); - this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeaveBound); - // Click event handlers - } else { - this._handleClickBound = this._handleClick.bind(this); - this.el.addEventListener('click', this._handleClickBound); - } + _removeEventHandlers() { + this.el.removeEventListener('keydown', this._handleTriggerKeydownBound); + this.dropdownEl.removeEventListener('click', this._handleDropdownClickBound); + if (this.options.hover) { + this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); + this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); + this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeaveBound); + } else { + this.el.removeEventListener('click', this._handleClickBound); } + } - _removeEventHandlers() { - this.el.removeEventListener('keydown', this._handleTriggerKeydownBound); - this.dropdownEl.removeEventListener('click', this._handleDropdownClickBound); - if (this.options.hover) { - this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); - this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); - this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeaveBound); - } else { - this.el.removeEventListener('click', this._handleClickBound); - } - } + _setupTemporaryEventHandlers() { + // Use capture phase event handler to prevent click + document.body.addEventListener('click', this._handleDocumentClickBound, true); + document.body.addEventListener('touchmove', this._handleDocumentTouchmoveBound); + this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydownBound); + } - _setupTemporaryEventHandlers() { - // Use capture phase event handler to prevent click - document.body.addEventListener('click', this._handleDocumentClickBound, true); - document.body.addEventListener('touchmove', this._handleDocumentTouchmoveBound); - this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydownBound); - } + _removeTemporaryEventHandlers() { + // Use capture phase event handler to prevent click + document.body.removeEventListener('click', this._handleDocumentClickBound, true); + document.body.removeEventListener('touchmove', this._handleDocumentTouchmoveBound); + this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydownBound); + } - _removeTemporaryEventHandlers() { - // Use capture phase event handler to prevent click - document.body.removeEventListener('click', this._handleDocumentClickBound, true); - document.body.removeEventListener('touchmove', this._handleDocumentTouchmoveBound); - this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydownBound); - } + _handleClick(e) { + e.preventDefault(); + this.open(); + } - _handleClick(e) { - e.preventDefault(); - this.open(); - } + _handleMouseEnter() { + this.open(); + } - _handleMouseEnter() { - this.open(); + _handleMouseLeave(e) { + const toEl = e.toElement || e.relatedTarget; + const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); + let leaveToActiveDropdownTrigger = false; + const closestTrigger = toEl.closest('.dropdown-trigger'); + if ( + closestTrigger && + !!(closestTrigger).M_Dropdown && + (closestTrigger).M_Dropdown.isOpen + ) { + leaveToActiveDropdownTrigger = true; } - - _handleMouseLeave(e) { - const toEl = e.toElement || e.relatedTarget; - const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); - let leaveToActiveDropdownTrigger = false; - const closestTrigger = toEl.closest('.dropdown-trigger'); - if ( - closestTrigger && - !!(closestTrigger).M_Dropdown && - (closestTrigger).M_Dropdown.isOpen - ) { - leaveToActiveDropdownTrigger = true; - } - // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content - if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { - this.close(); - } + // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content + if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) { + this.close(); } + } - _handleDocumentClick(e) { - const target = e.target; - if ( - this.options.closeOnClick && - target.closest('.dropdown-content') && - !this.isTouchMoving - ) { - // isTouchMoving to check if scrolling on mobile. - //setTimeout(() => { - this.close(); - //}, 0); - } - else if ( - target.closest('.dropdown-trigger') || - !target.closest('.dropdown-content') - ) { - //setTimeout(() => { - this.close(); - //}, 0); - } - this.isTouchMoving = false; + _handleDocumentClick(e) { + const target = e.target; + if ( + this.options.closeOnClick && + target.closest('.dropdown-content') && + !this.isTouchMoving + ) { + // isTouchMoving to check if scrolling on mobile. + //setTimeout(() => { + this.close(); + //}, 0); } + else if ( + target.closest('.dropdown-trigger') || + !target.closest('.dropdown-content') + ) { + //setTimeout(() => { + this.close(); + //}, 0); + } + this.isTouchMoving = false; + } - _handleTriggerKeydown(e) { - // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown - if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ENTER) && !this.isOpen) { - e.preventDefault(); - this.open(); - } + _handleTriggerKeydown(e) { + // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown + if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ENTER) && !this.isOpen) { + e.preventDefault(); + this.open(); } + } - _handleDocumentTouchmove(e) { - const target = e.target; - if (target.closest('.dropdown-content')) { - this.isTouchMoving = true; - } + _handleDocumentTouchmove(e) { + const target = e.target; + if (target.closest('.dropdown-content')) { + this.isTouchMoving = true; } + } - _handleDropdownClick(e) { - // onItemClick callback - if (typeof this.options.onItemClick === 'function') { - const itemEl = e.target.closest('li'); - this.options.onItemClick.call(this, itemEl); - } + _handleDropdownClick(e) { + // onItemClick callback + if (typeof this.options.onItemClick === 'function') { + const itemEl = e.target.closest('li'); + this.options.onItemClick.call(this, itemEl); } + } - _handleDropdownKeydown(e) { - if (e.which === M.keys.TAB) { - e.preventDefault(); - this.close(); - } - // Navigate down dropdown list - else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) { - e.preventDefault(); - const direction = e.which === M.keys.ARROW_DOWN ? 1 : -1; - let newFocusedIndex = this.focusedIndex; - let hasFoundNewIndex = false; - do { - newFocusedIndex = newFocusedIndex + direction; - if ( - !!this.dropdownEl.children[newFocusedIndex] && - (this.dropdownEl.children[newFocusedIndex]).tabIndex !== -1 - ) { - hasFoundNewIndex = true; - break; - } - } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0); - - if (hasFoundNewIndex) { - // Remove active class from old element - if (this.focusedIndex >= 0) - this.dropdownEl.children[this.focusedIndex].classList.remove('active'); - this.focusedIndex = newFocusedIndex; - this._focusFocusedItem(); - } - } - // ENTER selects choice on focused item - else if (e.which === M.keys.ENTER && this.isOpen) { - // Search for and `; - arrLi.push(li); - ul.append(li); - }); - - this.el.append(ul); - this._indicators = arrLi; - } + _handleAutoStartHover() { + this._hovered = false; + if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { + this.start(); } + } - _removeIndicators() { - this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); + _handleAutoStartFocus() { + this._focused = false; + if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { + this.start(); } + } - set(index: number) { - // Wrap around indices. - if (index >= this._slides.length) index = 0; - else if (index < 0) index = this._slides.length - 1; - - // Only do if index changes - if (this.activeIndex === index) return; - - this._activeSlide = this._slides[this.activeIndex]; - const _caption = this._activeSlide.querySelector('.caption'); - - this._activeSlide.classList.remove('active'); - // Enables every slide - this._slides.forEach(slide => slide.style.visibility = 'visible'); - - //--- Hide active Slide + Caption - // TODO: What does this do? - anim({ - targets: this._activeSlide, - opacity: 0, - duration: this.options.duration, - easing: 'easeOutQuad', - complete: () => { - this._slides.forEach(el => { - if (el.classList.contains('active')) return; - anim({ - targets: el, - opacity: 0, - translateX: 0, - translateY: 0, - duration: 0, // Animation with duration 0... why use anim at all then? - easing: 'easeOutQuad' - }); - // Disables invisible slides (for assistive technologies) - el.style.visibility = 'hidden'; - }); - } - }); + _handleInterval() { + const activeElem = this._slider.querySelector('.active'); + let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); + if (this._slides.length === newActiveIndex + 1) + newActiveIndex = 0; // loop to start + else + newActiveIndex += 1; + this.set(newActiveIndex); + } - // Hide active Caption - //this._animateCaptionIn(_caption, this.options.duration); - _caption.style.opacity = '0'; + _animateSlide(slide: HTMLElement, isDirectionIn: boolean): void { + let dx = 0, dy = 0; + anim({ + targets: slide, + opacity: isDirectionIn ? [0, 1] : [1, 0], + duration: this.options.duration, + easing: 'easeOutQuad' + }); + + const caption = slide.querySelector('.caption'); + if (!caption) return; + if (caption.classList.contains('center-align')) dy = -100; + else if (caption.classList.contains('right-align')) dx = 100; + else if (caption.classList.contains('left-align')) dx = -100; + anim({ + targets: caption, + opacity: isDirectionIn ? [0, 1] : [1, 0], + translateX: isDirectionIn ? [dx, 0] : [0, dx], + translateY: isDirectionIn ? [dy, 0] : [0, dy], + duration: this.options.duration, + delay: this.options.duration, + easing: 'easeOutQuad' + }); + } - // Update indicators + _setSliderHeight() { + // If fullscreen, do nothing + if (!this.el.classList.contains('fullscreen')) { if (this.options.indicators) { - const activeIndicator = this._indicators[this.activeIndex].children[0]; - const nextIndicator = this._indicators[index].children[0]; - activeIndicator.classList.remove('active'); - nextIndicator.classList.add('active'); - if (typeof this.options.indicatorLabelFunc === "function"){ - activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); - nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); - } + // Add height if indicators are present + this.el.style.height = (this.options.height + 40)+'px'; //.css('height', this.options.height + 40 + 'px'); + } + else { + this.el.style.height = this.options.height+'px'; } - - //--- Show new Slide + Caption - this._animateSlide(this._slides[index], true); + this._slider.style.height = this.options.height+'px'; + } + } - this._slides[index].classList.add('active'); + _setupIndicators() { + if (this.options.indicators) { + const ul = document.createElement('ul'); + ul.classList.add('indicators'); + + const arrLi = []; + this._slides.forEach((el, i) => { + const label = this.options.indicatorLabelFunc + ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) + : `${i + 1}`; + const li = document.createElement('li'); + li.classList.add('indicator-item'); + li.innerHTML = ``; + arrLi.push(li); + ul.append(li); + }); - // TODO: Why focus? => causes uncontrollable page scroll - /* - if (this._focusCurrent) { - this._slides[index].focus(); - this._focusCurrent = false; - } - */ + this.el.append(ul); + this._indicators = arrLi; + } + } - this.activeIndex = index; + _removeIndicators() { + this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove(); + } - // Reset interval, if allowed. This check prevents autostart - // when slider is paused, since it can be changed though indicators. - if (this.interval != null) { - this.start(); + set(index: number) { + // Wrap around indices. + if (index >= this._slides.length) index = 0; + else if (index < 0) index = this._slides.length - 1; + + // Only do if index changes + if (this.activeIndex === index) return; + + this._activeSlide = this._slides[this.activeIndex]; + const _caption = this._activeSlide.querySelector('.caption'); + + this._activeSlide.classList.remove('active'); + // Enables every slide + this._slides.forEach(slide => slide.style.visibility = 'visible'); + + //--- Hide active Slide + Caption + // TODO: What does this do? + anim({ + targets: this._activeSlide, + opacity: 0, + duration: this.options.duration, + easing: 'easeOutQuad', + complete: () => { + this._slides.forEach(el => { + if (el.classList.contains('active')) return; + anim({ + targets: el, + opacity: 0, + translateX: 0, + translateY: 0, + duration: 0, // Animation with duration 0... why use anim at all then? + easing: 'easeOutQuad' + }); + // Disables invisible slides (for assistive technologies) + el.style.visibility = 'hidden'; + }); + } + }); + + // Hide active Caption + //this._animateCaptionIn(_caption, this.options.duration); + _caption.style.opacity = '0'; + + // Update indicators + if (this.options.indicators) { + const activeIndicator = this._indicators[this.activeIndex].children[0]; + const nextIndicator = this._indicators[index].children[0]; + activeIndicator.classList.remove('active'); + nextIndicator.classList.add('active'); + if (typeof this.options.indicatorLabelFunc === "function"){ + activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false); + nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true); } } - _pause(fromEvent: boolean) { - clearInterval(this.interval); - this.eventPause = fromEvent; - this.interval = null; - } + //--- Show new Slide + Caption + this._animateSlide(this._slides[index], true); - pause() { - this._pause(false); - } + this._slides[index].classList.add('active'); - start() { - clearInterval(this.interval); - this.interval = setInterval( - this._handleIntervalBound, - this.options.duration + this.options.interval - ); - this.eventPause = false; + // TODO: Why focus? => causes uncontrollable page scroll + /* + if (this._focusCurrent) { + this._slides[index].focus(); + this._focusCurrent = false; } + */ - next() { - let newIndex = this.activeIndex + 1; - // Wrap around indices. - if (newIndex >= this._slides.length) newIndex = 0; - else if (newIndex < 0) newIndex = this._slides.length - 1; - this.set(newIndex); - } + this.activeIndex = index; - prev() { - let newIndex = this.activeIndex - 1; - // Wrap around indices. - if (newIndex >= this._slides.length) newIndex = 0; - else if (newIndex < 0) newIndex = this._slides.length - 1; - this.set(newIndex); + // Reset interval, if allowed. This check prevents autostart + // when slider is paused, since it can be changed though indicators. + if (this.interval != null) { + this.start(); } } - - + _pause(fromEvent: boolean) { + clearInterval(this.interval); + this.eventPause = fromEvent; + this.interval = null; + } + + pause() { + this._pause(false); + } + + start() { + clearInterval(this.interval); + this.interval = setInterval( + this._handleIntervalBound, + this.options.duration + this.options.interval + ); + this.eventPause = false; + } + + next() { + let newIndex = this.activeIndex + 1; + // Wrap around indices. + if (newIndex >= this._slides.length) newIndex = 0; + else if (newIndex < 0) newIndex = this._slides.length - 1; + this.set(newIndex); + } + + prev() { + let newIndex = this.activeIndex - 1; + // Wrap around indices. + if (newIndex >= this._slides.length) newIndex = 0; + else if (newIndex < 0) newIndex = this._slides.length - 1; + this.set(newIndex); + } +} diff --git a/src/tabs.ts b/src/tabs.ts index d7109e7ac7..6aa2e8ced9 100644 --- a/src/tabs.ts +++ b/src/tabs.ts @@ -24,267 +24,267 @@ export class Tabs extends Component { constructor(el, options: any) { super(Tabs, el, options); - (this.el as any).M_Tabs = this; - - this.options = {...Tabs.defaults, ...options}; - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - this._index = 0; - this._setupActiveTabLink(); - if (this.options.swipeable) { - this._setupSwipeableTabs(); - } else { - this._setupNormalTabs(); - } - // Setup tabs indicator after content to ensure accurate widths - this._setTabsAndTabWidth(); - this._createIndicator(); - this._setupEventHandlers(); - } - - static get defaults() { - return _defaults; + (this.el as any).M_Tabs = this; + + this.options = {...Tabs.defaults, ...options}; + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + this._index = 0; + this._setupActiveTabLink(); + if (this.options.swipeable) { + this._setupSwipeableTabs(); + } else { + this._setupNormalTabs(); } + // Setup tabs indicator after content to ensure accurate widths + this._setTabsAndTabWidth(); + this._createIndicator(); + this._setupEventHandlers(); + } - static init(els, options) { - return super.init(this, els, options); - } + static get defaults() { + return _defaults; + } - static getInstance(el) { - const domElem = !!el.jquery ? el[0] : el; - return domElem.M_Tabs; - } + static init(els, options) { + return super.init(this, els, options); + } - destroy() { - this._removeEventHandlers(); - this._indicator.parentNode.removeChild(this._indicator); - if (this.options.swipeable) { - this._teardownSwipeableTabs(); - } - else { - this._teardownNormalTabs(); - } - (this.el as any).M_Tabs = undefined; - } + static getInstance(el) { + const domElem = !!el.jquery ? el[0] : el; + return domElem.M_Tabs; + } - _setupEventHandlers() { - this._handleWindowResizeBound = this._handleWindowResize.bind(this); - window.addEventListener('resize', this._handleWindowResizeBound); - this._handleTabClickBound = this._handleTabClick.bind(this); - this.el.addEventListener('click', this._handleTabClickBound); + destroy() { + this._removeEventHandlers(); + this._indicator.parentNode.removeChild(this._indicator); + if (this.options.swipeable) { + this._teardownSwipeableTabs(); } - - _removeEventHandlers() { - window.removeEventListener('resize', this._handleWindowResizeBound); - this.el.removeEventListener('click', this._handleTabClickBound); + else { + this._teardownNormalTabs(); } + (this.el as any).M_Tabs = undefined; + } - _handleWindowResize() { - this._setTabsAndTabWidth(); - if (this._tabWidth !== 0 && this._tabsWidth !== 0) { - this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px'; - this._indicator.style.right = this._calcRightPos(this._activeTabLink)+'px'; - } - } + _setupEventHandlers() { + this._handleWindowResizeBound = this._handleWindowResize.bind(this); + window.addEventListener('resize', this._handleWindowResizeBound); + this._handleTabClickBound = this._handleTabClick.bind(this); + this.el.addEventListener('click', this._handleTabClickBound); + } - _handleTabClick(e) { - const tabLink = e.target; - const tab = tabLink.parentElement; - // Handle click on tab link only - if (!tabLink || !tab.classList.contains('tab')) return; - // is disabled? - if (tab.classList.contains('disabled')) { - e.preventDefault(); - return; - } - // Act as regular link if target attribute is specified. - if (tabLink.hasAttribute('target')) return; - // Make the old tab inactive. - this._activeTabLink.classList.remove('active'); - const _oldContent = this._content; - // Update the variables with the new link and content - - this._activeTabLink = tabLink; - this._content = document.querySelector(tabLink.hash); - this._tabLinks = this.el.querySelectorAll('li.tab > a'); - // Make the tab active - this._activeTabLink.classList.add('active'); - const prevIndex = this._index; - this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); - - // Swap content - if (this.options.swipeable) { - if (this._tabsCarousel) { - this._tabsCarousel.set(this._index, () => { - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - }); - } - } else { - if (this._content) { - this._content.style.display = 'block'; - this._content.classList.add('active'); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - if (_oldContent && _oldContent !== this._content) { - _oldContent.style.display = 'none'; - _oldContent.classList.remove('active'); - } - } - } - // Update widths after content is swapped (scrollbar bugfix) - this._setTabsAndTabWidth(); - this._animateIndicator(prevIndex); - e.preventDefault(); - } + _removeEventHandlers() { + window.removeEventListener('resize', this._handleWindowResizeBound); + this.el.removeEventListener('click', this._handleTabClickBound); + } - _createIndicator() { - const indicator = document.createElement('li'); - indicator.classList.add('indicator'); - this.el.appendChild(indicator); - this._indicator = indicator; + _handleWindowResize() { + this._setTabsAndTabWidth(); + if (this._tabWidth !== 0 && this._tabsWidth !== 0) { this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px'; this._indicator.style.right = this._calcRightPos(this._activeTabLink)+'px'; } + } - _setupActiveTabLink() { - // If the location.hash matches one of the links, use that as the active tab. - this._activeTabLink = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === location.hash); - // If no match is found, use the first link or any with class 'active' as the initial active tab. - if (!this._activeTabLink) { - this._activeTabLink = this.el.querySelector('li.tab a.active'); - } - if (this._activeTabLink.length === 0) { - this._activeTabLink = this.el.querySelector('li.tab a'); + _handleTabClick(e) { + const tabLink = e.target; + const tab = tabLink.parentElement; + // Handle click on tab link only + if (!tabLink || !tab.classList.contains('tab')) return; + // is disabled? + if (tab.classList.contains('disabled')) { + e.preventDefault(); + return; + } + // Act as regular link if target attribute is specified. + if (tabLink.hasAttribute('target')) return; + // Make the old tab inactive. + this._activeTabLink.classList.remove('active'); + const _oldContent = this._content; + // Update the variables with the new link and content + + this._activeTabLink = tabLink; + this._content = document.querySelector(tabLink.hash); + this._tabLinks = this.el.querySelectorAll('li.tab > a'); + // Make the tab active + this._activeTabLink.classList.add('active'); + const prevIndex = this._index; + this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0); + + // Swap content + if (this.options.swipeable) { + if (this._tabsCarousel) { + this._tabsCarousel.set(this._index, () => { + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + }); } - Array.from(this._tabLinks).forEach((a: HTMLAnchorElement) => a.classList.remove('active')); - this._activeTabLink.classList.add('active'); - - this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); - if (this._activeTabLink) { - this._content = document.querySelector(this._activeTabLink.hash); + } else { + if (this._content) { + this._content.style.display = 'block'; this._content.classList.add('active'); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + if (_oldContent && _oldContent !== this._content) { + _oldContent.style.display = 'none'; + _oldContent.classList.remove('active'); + } } } + // Update widths after content is swapped (scrollbar bugfix) + this._setTabsAndTabWidth(); + this._animateIndicator(prevIndex); + e.preventDefault(); + } - _setupSwipeableTabs() { - // Change swipeable according to responsive threshold - if (window.innerWidth > this.options.responsiveThreshold) - this.options.swipeable = false; + _createIndicator() { + const indicator = document.createElement('li'); + indicator.classList.add('indicator'); + this.el.appendChild(indicator); + this._indicator = indicator; + this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px'; + this._indicator.style.right = this._calcRightPos(this._activeTabLink)+'px'; + } - const tabsContent = []; - this._tabLinks.forEach(a => { - const currContent = document.querySelector(a.hash); - currContent.classList.add('carousel-item'); - tabsContent.push(currContent); - }); - - // Create Carousel-Wrapper around Tab-Contents - const tabsWrapper = document.createElement('div'); - tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); - - // Wrap around - tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); - tabsContent.forEach(tabContent => { - tabsWrapper.appendChild(tabContent); - tabContent.style.display = ''; - }); - - // Keep active tab index to set initial carousel slide - const tab = this._activeTabLink.parentElement; - const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); - - this._tabsCarousel = Carousel.init(tabsWrapper, { - fullWidth: true, - noWrap: true, - onCycleTo: (item) => { - const prevIndex = this._index; - this._index = Array.from(item.parentNode.children).indexOf(item); - this._activeTabLink.classList.remove('active'); - this._activeTabLink = Array.from(this._tabLinks)[this._index]; - this._activeTabLink.classList.add('active'); - this._animateIndicator(prevIndex); - if (typeof this.options.onShow === 'function') - this.options.onShow.call(this, this._content); - } - }); - // Set initial carousel slide to active tab - this._tabsCarousel.set(activeTabIndex); + _setupActiveTabLink() { + // If the location.hash matches one of the links, use that as the active tab. + this._activeTabLink = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === location.hash); + // If no match is found, use the first link or any with class 'active' as the initial active tab. + if (!this._activeTabLink) { + this._activeTabLink = this.el.querySelector('li.tab a.active'); } - - _teardownSwipeableTabs() { - const tabsWrapper = this._tabsCarousel.el; - this._tabsCarousel.destroy(); - // Unwrap - tabsWrapper.after(tabsWrapper.children); - tabsWrapper.remove(); + if (this._activeTabLink.length === 0) { + this._activeTabLink = this.el.querySelector('li.tab a'); } + Array.from(this._tabLinks).forEach((a: HTMLAnchorElement) => a.classList.remove('active')); + this._activeTabLink.classList.add('active'); - _setupNormalTabs() { - // Hide Tabs Content - Array.from(this._tabLinks).forEach(a => { - if (a === this._activeTabLink) return; - if ((a).hash) { - const currContent = document.querySelector((a).hash); - if (currContent) (currContent).style.display = 'none'; - } - }); + this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0); + if (this._activeTabLink) { + this._content = document.querySelector(this._activeTabLink.hash); + this._content.classList.add('active'); } + } - _teardownNormalTabs() { - // show Tabs Content - this._tabLinks.forEach(a => { - if (a.hash) { - const currContent = document.querySelector(a.hash); - if (currContent) currContent.style.display = ''; - } - }); - } + _setupSwipeableTabs() { + // Change swipeable according to responsive threshold + if (window.innerWidth > this.options.responsiveThreshold) + this.options.swipeable = false; + + const tabsContent = []; + this._tabLinks.forEach(a => { + const currContent = document.querySelector(a.hash); + currContent.classList.add('carousel-item'); + tabsContent.push(currContent); + }); + + // Create Carousel-Wrapper around Tab-Contents + const tabsWrapper = document.createElement('div'); + tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider'); + + // Wrap around + tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]); + tabsContent.forEach(tabContent => { + tabsWrapper.appendChild(tabContent); + tabContent.style.display = ''; + }); + + // Keep active tab index to set initial carousel slide + const tab = this._activeTabLink.parentElement; + const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab); + + this._tabsCarousel = Carousel.init(tabsWrapper, { + fullWidth: true, + noWrap: true, + onCycleTo: (item) => { + const prevIndex = this._index; + this._index = Array.from(item.parentNode.children).indexOf(item); + this._activeTabLink.classList.remove('active'); + this._activeTabLink = Array.from(this._tabLinks)[this._index]; + this._activeTabLink.classList.add('active'); + this._animateIndicator(prevIndex); + if (typeof this.options.onShow === 'function') + this.options.onShow.call(this, this._content); + } + }); + // Set initial carousel slide to active tab + this._tabsCarousel.set(activeTabIndex); + } - _setTabsAndTabWidth() { - this._tabsWidth = this.el.getBoundingClientRect().width; - this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; - } + _teardownSwipeableTabs() { + const tabsWrapper = this._tabsCarousel.el; + this._tabsCarousel.destroy(); + // Unwrap + tabsWrapper.after(tabsWrapper.children); + tabsWrapper.remove(); + } - _calcRightPos(el) { - return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); - } + _setupNormalTabs() { + // Hide Tabs Content + Array.from(this._tabLinks).forEach(a => { + if (a === this._activeTabLink) return; + if ((a).hash) { + const currContent = document.querySelector((a).hash); + if (currContent) (currContent).style.display = 'none'; + } + }); + } - _calcLeftPos(el) { - return Math.floor(el.offsetLeft); - } + _teardownNormalTabs() { + // show Tabs Content + this._tabLinks.forEach(a => { + if (a.hash) { + const currContent = document.querySelector(a.hash); + if (currContent) currContent.style.display = ''; + } + }); + } - updateTabIndicator() { - this._setTabsAndTabWidth(); - this._animateIndicator(this._index); - } + _setTabsAndTabWidth() { + this._tabsWidth = this.el.getBoundingClientRect().width; + this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length; + } - _animateIndicator(prevIndex) { - let leftDelay = 0, rightDelay = 0; - - if (this._index - prevIndex >= 0) - leftDelay = 90; - else - rightDelay = 90; - - const animOptions = { - targets: this._indicator, - left: { - value: this._calcLeftPos(this._activeTabLink), - delay: leftDelay - }, - right: { - value: this._calcRightPos(this._activeTabLink), - delay: rightDelay - }, - duration: this.options.duration, - easing: 'easeOutQuad' - }; - anim.remove(this._indicator); - anim(animOptions); - } + _calcRightPos(el) { + return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width); + } - select(tabId) { - const tab = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === '#'+tabId); - if (tab) (tab).click(); - } + _calcLeftPos(el) { + return Math.floor(el.offsetLeft); + } + + updateTabIndicator() { + this._setTabsAndTabWidth(); + this._animateIndicator(this._index); + } + + _animateIndicator(prevIndex) { + let leftDelay = 0, rightDelay = 0; + + if (this._index - prevIndex >= 0) + leftDelay = 90; + else + rightDelay = 90; + + const animOptions = { + targets: this._indicator, + left: { + value: this._calcLeftPos(this._activeTabLink), + delay: leftDelay + }, + right: { + value: this._calcRightPos(this._activeTabLink), + delay: rightDelay + }, + duration: this.options.duration, + easing: 'easeOutQuad' + }; + anim.remove(this._indicator); + anim(animOptions); + } + + select(tabId) { + const tab = Array.from(this._tabLinks).find((a: HTMLAnchorElement) => a.getAttribute('href') === '#'+tabId); + if (tab) (tab).click(); } +} diff --git a/src/tapTarget.ts b/src/tapTarget.ts index d6eb5137d7..9ec7b36e7a 100644 --- a/src/tapTarget.ts +++ b/src/tapTarget.ts @@ -6,235 +6,232 @@ let _defaults = { onClose: undefined }; - export class TapTarget extends Component { - el: HTMLElement - isOpen: boolean; - private wrapper: HTMLElement; - private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; - private _origin: HTMLElement; - private _handleTargetClickBound: EventListenerOrEventListenerObject; - private originEl: HTMLElement; - private _handleOriginClickBound: any; - private _handleThrottledResizeBound: any; - private waveEl: HTMLElement & Element & Node; - private contentEl: HTMLElement; - - constructor(el, options) { - super(TapTarget, el, options); - (this.el as any).M_TapTarget = this; - this.options = {...TapTarget.defaults, ...options}; - this.isOpen = false; - // setup - this._origin = document.querySelector('#'+this.el.getAttribute('data-target')); - this._setup(); - this._calculatePositioning(); - this._setupEventHandlers(); - } +export class TapTarget extends Component { + el: HTMLElement + isOpen: boolean; + private wrapper: HTMLElement; + private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; + private _origin: HTMLElement; + private _handleTargetClickBound: EventListenerOrEventListenerObject; + private originEl: HTMLElement; + private _handleOriginClickBound: any; + private _handleThrottledResizeBound: any; + private waveEl: HTMLElement & Element & Node; + private contentEl: HTMLElement; + + constructor(el, options) { + super(TapTarget, el, options); + (this.el as any).M_TapTarget = this; + this.options = {...TapTarget.defaults, ...options}; + this.isOpen = false; + // setup + this._origin = document.querySelector('#'+this.el.getAttribute('data-target')); + this._setup(); + this._calculatePositioning(); + this._setupEventHandlers(); + } - static get defaults() { - return _defaults; - } + static get defaults() { + return _defaults; + } - static init(els, options) { - return super.init(this, els, options); - } + static init(els, options) { + return super.init(this, els, options); + } - static getInstance(el) { - let domElem = !!el.jquery ? el[0] : el; - return domElem.M_TapTarget; - } + static getInstance(el) { + let domElem = !!el.jquery ? el[0] : el; + return domElem.M_TapTarget; + } - destroy() { - this._removeEventHandlers(); - (this.el as any).TapTarget = undefined; - } + destroy() { + this._removeEventHandlers(); + (this.el as any).TapTarget = undefined; + } - _setupEventHandlers() { - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - this._handleTargetClickBound = this._handleTargetClick.bind(this); - this._handleOriginClickBound = this._handleOriginClick.bind(this); - this.el.addEventListener('click', this._handleTargetClickBound); - this.originEl.addEventListener('click', this._handleOriginClickBound); - // Resize - let throttledResize = M.throttle(this._handleResize, 200); - this._handleThrottledResizeBound = throttledResize.bind(this); - window.addEventListener('resize', this._handleThrottledResizeBound); - } + _setupEventHandlers() { + this._handleDocumentClickBound = this._handleDocumentClick.bind(this); + this._handleTargetClickBound = this._handleTargetClick.bind(this); + this._handleOriginClickBound = this._handleOriginClick.bind(this); + this.el.addEventListener('click', this._handleTargetClickBound); + this.originEl.addEventListener('click', this._handleOriginClickBound); + // Resize + let throttledResize = M.throttle(this._handleResize, 200); + this._handleThrottledResizeBound = throttledResize.bind(this); + window.addEventListener('resize', this._handleThrottledResizeBound); + } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleTargetClickBound); - this.originEl.removeEventListener('click', this._handleOriginClickBound); - window.removeEventListener('resize', this._handleThrottledResizeBound); - } + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleTargetClickBound); + this.originEl.removeEventListener('click', this._handleOriginClickBound); + window.removeEventListener('resize', this._handleThrottledResizeBound); + } - _handleTargetClick(e) { - this.open(); - } + _handleTargetClick(e) { + this.open(); + } - _handleOriginClick(e) { - this.close(); - } + _handleOriginClick(e) { + this.close(); + } - _handleResize(e) { - this._calculatePositioning(); - } + _handleResize(e) { + this._calculatePositioning(); + } - _handleDocumentClick(e) { - if (!e.target.closest('.tap-target-wrapper')) { - this.close(); - e.preventDefault(); - e.stopPropagation(); - } + _handleDocumentClick(e) { + if (!e.target.closest('.tap-target-wrapper')) { + this.close(); + e.preventDefault(); + e.stopPropagation(); } + } - _setup() { - // Creating tap target - this.wrapper = this.el.parentElement; - this.waveEl = this.wrapper.querySelector('.tap-target-wave'); - this.originEl = this.wrapper.querySelector('.tap-target-origin'); - this.contentEl = this.el.querySelector('.tap-target-content'); - // Creating wrapper - if (!this.wrapper.classList.contains('.tap-target-wrapper')) { - this.wrapper = document.createElement('div'); - this.wrapper.classList.add('tap-target-wrapper'); - this.el.before(this.wrapper); - this.wrapper.append(this.el); - } - // Creating content - if (!this.contentEl) { - this.contentEl = document.createElement('div'); - this.contentEl.classList.add('tap-target-content'); - this.el.append(this.contentEl); - } - // Creating foreground wave - if (!this.waveEl) { - this.waveEl = document.createElement('div'); - this.waveEl.classList.add('tap-target-wave'); - // Creating origin - if (!this.originEl) { - this.originEl = this._origin.cloneNode(true); // .clone(true, true); - this.originEl.classList.add('tap-target-origin'); - this.originEl.removeAttribute('id'); - this.originEl.removeAttribute('style'); - this.waveEl.append(this.originEl); - } - this.wrapper.append(this.waveEl); + _setup() { + // Creating tap target + this.wrapper = this.el.parentElement; + this.waveEl = this.wrapper.querySelector('.tap-target-wave'); + this.originEl = this.wrapper.querySelector('.tap-target-origin'); + this.contentEl = this.el.querySelector('.tap-target-content'); + // Creating wrapper + if (!this.wrapper.classList.contains('.tap-target-wrapper')) { + this.wrapper = document.createElement('div'); + this.wrapper.classList.add('tap-target-wrapper'); + this.el.before(this.wrapper); + this.wrapper.append(this.el); + } + // Creating content + if (!this.contentEl) { + this.contentEl = document.createElement('div'); + this.contentEl.classList.add('tap-target-content'); + this.el.append(this.contentEl); + } + // Creating foreground wave + if (!this.waveEl) { + this.waveEl = document.createElement('div'); + this.waveEl.classList.add('tap-target-wave'); + // Creating origin + if (!this.originEl) { + this.originEl = this._origin.cloneNode(true); // .clone(true, true); + this.originEl.classList.add('tap-target-origin'); + this.originEl.removeAttribute('id'); + this.originEl.removeAttribute('style'); + this.waveEl.append(this.originEl); } + this.wrapper.append(this.waveEl); } + } - private _offset(el) { - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } + private _offset(el) { + const box = el.getBoundingClientRect(); + const docElem = document.documentElement; + return { + top: box.top + window.pageYOffset - docElem.clientTop, + left: box.left + window.pageXOffset - docElem.clientLeft + }; + } - _calculatePositioning() { - // Element or parent is fixed position? - let isFixed = getComputedStyle(this._origin).position === 'fixed'; - if (!isFixed) { - - let currentElem: any = this._origin; - const parents = []; - while ((currentElem = currentElem.parentNode) && currentElem !== document) - parents.push(currentElem); - - for (let i = 0; i < parents.length; i++) { - isFixed = getComputedStyle(parents[i]).position === 'fixed'; - if (isFixed) break; - } - } - // Calculating origin - const originWidth = this._origin.offsetWidth; - const originHeight = this._origin.offsetHeight; - const originTop = isFixed ? this._offset(this._origin).top - M.getDocumentScrollTop() : this._offset(this._origin).top; - const originLeft = isFixed ? this._offset(this._origin).left - M.getDocumentScrollLeft() : this._offset(this._origin).left; - - // Calculating screen - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - const scrollBarWidth = windowWidth - document.documentElement.clientWidth; - const centerX = windowWidth / 2; - const centerY = windowHeight / 2; - const isLeft = originLeft <= centerX; - const isRight = originLeft > centerX; - const isTop = originTop <= centerY; - const isBottom = originTop > centerY; - const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; - - // Calculating tap target - const tapTargetWidth = this.el.offsetWidth; - const tapTargetHeight = this.el.offsetHeight; - const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; - const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; - const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; - - // Calculating content - const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; - const tapTargetTextHeight = tapTargetHeight / 2; - const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; - const tapTargetTextBottom = 0; - const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; - const tapTargetTextRight = 0; - const tapTargetTextPadding = originWidth; - const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; - - // Calculating wave - const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; - const tapTargetWaveHeight = tapTargetWaveWidth; - const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; - const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; - - // Setting tap target - this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; - this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; - this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; - this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; - this.wrapper.style.position = tapTargetPosition; - - // Setting content - this.contentEl.style.width = tapTargetTextWidth + 'px'; - this.contentEl.style.height = tapTargetTextHeight + 'px'; - this.contentEl.style.top = tapTargetTextTop + 'px'; - this.contentEl.style.right = tapTargetTextRight + 'px'; - this.contentEl.style.bottom = tapTargetTextBottom + 'px'; - this.contentEl.style.left = tapTargetTextLeft + 'px'; - this.contentEl.style.padding = tapTargetTextPadding + 'px'; - this.contentEl.style.verticalAlign = tapTargetTextAlign; - - // Setting wave - this.waveEl.style.top = tapTargetWaveTop+'px'; - this.waveEl.style.left = tapTargetWaveLeft+'px'; - this.waveEl.style.width = tapTargetWaveWidth+'px'; - this.waveEl.style.height = tapTargetWaveHeight+'px'; - } + _calculatePositioning() { + // Element or parent is fixed position? + let isFixed = getComputedStyle(this._origin).position === 'fixed'; + if (!isFixed) { - open() { - if (this.isOpen) return; - // onOpen callback - if (typeof this.options.onOpen === 'function') { - this.options.onOpen.call(this, this._origin); - } - this.isOpen = true; - this.wrapper.classList.add('open'); - document.body.addEventListener('click', this._handleDocumentClickBound, true); - document.body.addEventListener('touchend', this._handleDocumentClickBound); - } + let currentElem: any = this._origin; + const parents = []; + while ((currentElem = currentElem.parentNode) && currentElem !== document) + parents.push(currentElem); - close() { - if (!this.isOpen) return; - // onClose callback - if (typeof this.options.onClose === 'function') { - this.options.onClose.call(this, this._origin); + for (let i = 0; i < parents.length; i++) { + isFixed = getComputedStyle(parents[i]).position === 'fixed'; + if (isFixed) break; } - this.isOpen = false; - this.wrapper.classList.remove('open'); - document.body.removeEventListener('click', this._handleDocumentClickBound, true); - document.body.removeEventListener('touchend', this._handleDocumentClickBound); } + // Calculating origin + const originWidth = this._origin.offsetWidth; + const originHeight = this._origin.offsetHeight; + const originTop = isFixed ? this._offset(this._origin).top - M.getDocumentScrollTop() : this._offset(this._origin).top; + const originLeft = isFixed ? this._offset(this._origin).left - M.getDocumentScrollLeft() : this._offset(this._origin).left; + + // Calculating screen + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const scrollBarWidth = windowWidth - document.documentElement.clientWidth; + const centerX = windowWidth / 2; + const centerY = windowHeight / 2; + const isLeft = originLeft <= centerX; + const isRight = originLeft > centerX; + const isTop = originTop <= centerY; + const isBottom = originTop > centerY; + const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75; + + // Calculating tap target + const tapTargetWidth = this.el.offsetWidth; + const tapTargetHeight = this.el.offsetHeight; + const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2; + const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2; + const tapTargetPosition = isFixed ? 'fixed' : 'absolute'; + + // Calculating content + const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth; + const tapTargetTextHeight = tapTargetHeight / 2; + const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0; + const tapTargetTextBottom = 0; + const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0; + const tapTargetTextRight = 0; + const tapTargetTextPadding = originWidth; + const tapTargetTextAlign = isBottom ? 'bottom' : 'top'; + + // Calculating wave + const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2; + const tapTargetWaveHeight = tapTargetWaveWidth; + const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2; + const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2; + + // Setting tap target + this.wrapper.style.top = isTop ? tapTargetTop + 'px' : ''; + this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : ''; + this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : ''; + this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : ''; + this.wrapper.style.position = tapTargetPosition; + + // Setting content + this.contentEl.style.width = tapTargetTextWidth + 'px'; + this.contentEl.style.height = tapTargetTextHeight + 'px'; + this.contentEl.style.top = tapTargetTextTop + 'px'; + this.contentEl.style.right = tapTargetTextRight + 'px'; + this.contentEl.style.bottom = tapTargetTextBottom + 'px'; + this.contentEl.style.left = tapTargetTextLeft + 'px'; + this.contentEl.style.padding = tapTargetTextPadding + 'px'; + this.contentEl.style.verticalAlign = tapTargetTextAlign; + + // Setting wave + this.waveEl.style.top = tapTargetWaveTop+'px'; + this.waveEl.style.left = tapTargetWaveLeft+'px'; + this.waveEl.style.width = tapTargetWaveWidth+'px'; + this.waveEl.style.height = tapTargetWaveHeight+'px'; } - + open() { + if (this.isOpen) return; + // onOpen callback + if (typeof this.options.onOpen === 'function') { + this.options.onOpen.call(this, this._origin); + } + this.isOpen = true; + this.wrapper.classList.add('open'); + document.body.addEventListener('click', this._handleDocumentClickBound, true); + document.body.addEventListener('touchend', this._handleDocumentClickBound); + } + close() { + if (!this.isOpen) return; + // onClose callback + if (typeof this.options.onClose === 'function') { + this.options.onClose.call(this, this._origin); + } + this.isOpen = false; + this.wrapper.classList.remove('open'); + document.body.removeEventListener('click', this._handleDocumentClickBound, true); + document.body.removeEventListener('touchend', this._handleDocumentClickBound); + } +} diff --git a/src/timepicker.ts b/src/timepicker.ts index fc29c2c291..e3f33c77af 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -34,675 +34,674 @@ type Point = { y: number }; - export class Timepicker extends Component { - el: HTMLInputElement; - id: string; - modal: Modal; - modalEl: HTMLElement; - private _handleInputKeydownBound: any; - private _handleInputClickBound: any; - private _handleClockClickStartBound: any; - private _handleDocumentClickMoveBound: any; - private _handleDocumentClickEndBound: any; - private _inputFromTextFieldBound: any; - plate: any; - digitalClock: any; - inputHours: HTMLInputElement; - inputMinutes: HTMLInputElement; - x0: number; - y0: number; - moved: boolean; - dx: number; - dy: number; - currentView: string; - hand: any; - minutesView: HTMLElement; - hours: any; - minutes: any; - time: string; - amOrPm: any; - static _template: any; - isOpen: boolean; - vibrate: string; - _canvas: HTMLElement; - hoursView: any; - spanAmPm: HTMLSpanElement; - footer: HTMLElement; - private _amBtn: HTMLElement; - private _pmBtn: HTMLElement; - bg: Element; - bearing: Element; - g: Element; - toggleViewTimer: string | number | NodeJS.Timeout; - canvas: any; - vibrateTimer: any; - - constructor(el, options) { - super(Timepicker, el, options); - (this.el as any).M_Timepicker = this; - this.options = {...Timepicker.defaults, ...options}; - this.id = M.guid(); - this._insertHTMLIntoDOM(); - this._setupModal(); - this._setupVariables(); - this._setupEventHandlers(); - this._clockSetup(); - this._pickerSetup(); - } - - static get defaults() { - return _defaults; - } - - static init(els, options) { - return super.init(this, els, options); - } - - static _addLeadingZero(num) { - return (num < 10 ? '0' : '') + num; - } - - static _createSVGEl(name) { - let svgNS = 'http://www.w3.org/2000/svg'; - return document.createElementNS(svgNS, name); - } - - static _Pos(e): Point { - if (e.targetTouches && e.targetTouches.length >= 1) { - return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; - } - // mouse event - return { x: e.clientX, y: e.clientY }; - } +export class Timepicker extends Component { + el: HTMLInputElement; + id: string; + modal: Modal; + modalEl: HTMLElement; + private _handleInputKeydownBound: any; + private _handleInputClickBound: any; + private _handleClockClickStartBound: any; + private _handleDocumentClickMoveBound: any; + private _handleDocumentClickEndBound: any; + private _inputFromTextFieldBound: any; + plate: any; + digitalClock: any; + inputHours: HTMLInputElement; + inputMinutes: HTMLInputElement; + x0: number; + y0: number; + moved: boolean; + dx: number; + dy: number; + currentView: string; + hand: any; + minutesView: HTMLElement; + hours: any; + minutes: any; + time: string; + amOrPm: any; + static _template: any; + isOpen: boolean; + vibrate: string; + _canvas: HTMLElement; + hoursView: any; + spanAmPm: HTMLSpanElement; + footer: HTMLElement; + private _amBtn: HTMLElement; + private _pmBtn: HTMLElement; + bg: Element; + bearing: Element; + g: Element; + toggleViewTimer: string | number | NodeJS.Timeout; + canvas: any; + vibrateTimer: any; + + constructor(el, options) { + super(Timepicker, el, options); + (this.el as any).M_Timepicker = this; + this.options = {...Timepicker.defaults, ...options}; + this.id = M.guid(); + this._insertHTMLIntoDOM(); + this._setupModal(); + this._setupVariables(); + this._setupEventHandlers(); + this._clockSetup(); + this._pickerSetup(); + } - static getInstance(el) { - const domElem = !!el.jquery ? el[0] : el; - return domElem.M_Timepicker; - } + static get defaults() { + return _defaults; + } - destroy() { - this._removeEventHandlers(); - this.modal.destroy(); - this.modalEl.remove(); - (this.el as any).M_Timepicker = undefined; - } + static init(els, options) { + return super.init(this, els, options); + } - _setupEventHandlers() { - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleClockClickStartBound = this._handleClockClickStart.bind(this); - this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this); - this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this); - this._inputFromTextFieldBound = this._handleTimeInputEnterKey.bind(this); - this.el.addEventListener('click', this._handleInputClickBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.plate.addEventListener('mousedown', this._handleClockClickStartBound); - this.plate.addEventListener('touchstart', this._handleClockClickStartBound); - this.digitalClock.addEventListener('keyup', this._inputFromTextFieldBound); - this.inputHours.addEventListener('click', this.showView.bind(this, 'hours')); - this.inputMinutes.addEventListener('click', this.showView.bind(this, 'minutes')); - } + static _addLeadingZero(num) { + return (num < 10 ? '0' : '') + num; + } - _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClickBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); - } + static _createSVGEl(name) { + let svgNS = 'http://www.w3.org/2000/svg'; + return document.createElementNS(svgNS, name); + } - _handleInputClick() { - this.open(); + static _Pos(e): Point { + if (e.targetTouches && e.targetTouches.length >= 1) { + return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; } + // mouse event + return { x: e.clientX, y: e.clientY }; + } - _handleInputKeydown(e) { - if (e.which === M.keys.ENTER) { - e.preventDefault(); - this.open(); - } - } + static getInstance(el) { + const domElem = !!el.jquery ? el[0] : el; + return domElem.M_Timepicker; + } - _handleTimeInputEnterKey(e) { - if (e.which === M.keys.ENTER) { - e.preventDefault(); - this._inputFromTextField(); - } - } + destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + this.modalEl.remove(); + (this.el as any).M_Timepicker = undefined; + } - _handleClockClickStart(e) { - e.preventDefault(); - let clockPlateBR = this.plate.getBoundingClientRect(); - let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; - - this.x0 = offset.x + this.options.dialRadius; - this.y0 = offset.y + this.options.dialRadius; - this.moved = false; - let clickPos = Timepicker._Pos(e); - this.dx = clickPos.x - this.x0; - this.dy = clickPos.y - this.y0; - - // Set clock hands - this.setHand(this.dx, this.dy, false); - // Mousemove on document - document.addEventListener('mousemove', this._handleDocumentClickMoveBound); - document.addEventListener('touchmove', this._handleDocumentClickMoveBound); - // Mouseup on document - document.addEventListener('mouseup', this._handleDocumentClickEndBound); - document.addEventListener('touchend', this._handleDocumentClickEndBound); - } - - _handleDocumentClickMove(e) { + _setupEventHandlers() { + this._handleInputKeydownBound = this._handleInputKeydown.bind(this); + this._handleInputClickBound = this._handleInputClick.bind(this); + this._handleClockClickStartBound = this._handleClockClickStart.bind(this); + this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this); + this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this); + this._inputFromTextFieldBound = this._handleTimeInputEnterKey.bind(this); + this.el.addEventListener('click', this._handleInputClickBound); + this.el.addEventListener('keydown', this._handleInputKeydownBound); + this.plate.addEventListener('mousedown', this._handleClockClickStartBound); + this.plate.addEventListener('touchstart', this._handleClockClickStartBound); + this.digitalClock.addEventListener('keyup', this._inputFromTextFieldBound); + this.inputHours.addEventListener('click', this.showView.bind(this, 'hours')); + this.inputMinutes.addEventListener('click', this.showView.bind(this, 'minutes')); + } + + _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClickBound); + this.el.removeEventListener('keydown', this._handleInputKeydownBound); + } + + _handleInputClick() { + this.open(); + } + + _handleInputKeydown(e) { + if (e.which === M.keys.ENTER) { e.preventDefault(); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - this.moved = true; - this.setHand(x, y, false); + this.open(); } + } - _handleDocumentClickEnd(e) { + _handleTimeInputEnterKey(e) { + if (e.which === M.keys.ENTER) { e.preventDefault(); - document.removeEventListener('mouseup', this._handleDocumentClickEndBound); - document.removeEventListener('touchend', this._handleDocumentClickEndBound); - let clickPos = Timepicker._Pos(e); - let x = clickPos.x - this.x0; - let y = clickPos.y - this.y0; - if (this.moved && x === this.dx && y === this.dy) { - this.setHand(x, y); - } - if (this.currentView === 'hours') { - this.showView('minutes', this.options.duration / 2); - } - else if (this.options.autoClose) { - this.minutesView.classList.add('timepicker-dial-out'); - setTimeout(() => { - this.done(); - }, this.options.duration / 2); - } - if (typeof this.options.onSelect === 'function') { - this.options.onSelect.call(this, this.hours, this.minutes); - } - // Unbind mousemove event - document.removeEventListener('mousemove', this._handleDocumentClickMoveBound); - document.removeEventListener('touchmove', this._handleDocumentClickMoveBound); - } - - _insertHTMLIntoDOM() { - const template = document.createElement('template'); - template.innerHTML = Timepicker._template.trim(); - this.modalEl = template.content.firstChild; - this.modalEl.id = 'modal-' + this.id; - - // Append popover to input by default - const optEl = this.options.container; - const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); - - if (this.options.container && !!containerEl) { - containerEl.append(this.modalEl); - } - else { - this.el.parentElement.appendChild(this.modalEl); - } + this._inputFromTextField(); + } + } + + _handleClockClickStart(e) { + e.preventDefault(); + let clockPlateBR = this.plate.getBoundingClientRect(); + let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + let clickPos = Timepicker._Pos(e); + this.dx = clickPos.x - this.x0; + this.dy = clickPos.y - this.y0; + + // Set clock hands + this.setHand(this.dx, this.dy, false); + // Mousemove on document + document.addEventListener('mousemove', this._handleDocumentClickMoveBound); + document.addEventListener('touchmove', this._handleDocumentClickMoveBound); + // Mouseup on document + document.addEventListener('mouseup', this._handleDocumentClickEndBound); + document.addEventListener('touchend', this._handleDocumentClickEndBound); + } + + _handleDocumentClickMove(e) { + e.preventDefault(); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + this.moved = true; + this.setHand(x, y, false); + } + + _handleDocumentClickEnd(e) { + e.preventDefault(); + document.removeEventListener('mouseup', this._handleDocumentClickEndBound); + document.removeEventListener('touchend', this._handleDocumentClickEndBound); + let clickPos = Timepicker._Pos(e); + let x = clickPos.x - this.x0; + let y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } + if (this.currentView === 'hours') { + this.showView('minutes', this.options.duration / 2); + } + else if (this.options.autoClose) { + this.minutesView.classList.add('timepicker-dial-out'); + setTimeout(() => { + this.done(); + }, this.options.duration / 2); + } + if (typeof this.options.onSelect === 'function') { + this.options.onSelect.call(this, this.hours, this.minutes); + } + // Unbind mousemove event + document.removeEventListener('mousemove', this._handleDocumentClickMoveBound); + document.removeEventListener('touchmove', this._handleDocumentClickMoveBound); + } + + _insertHTMLIntoDOM() { + const template = document.createElement('template'); + template.innerHTML = Timepicker._template.trim(); + this.modalEl = template.content.firstChild; + this.modalEl.id = 'modal-' + this.id; + + // Append popover to input by default + const optEl = this.options.container; + const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); + + if (this.options.container && !!containerEl) { + containerEl.append(this.modalEl); } + else { + this.el.parentElement.appendChild(this.modalEl); + } + } - _setupModal() { - this.modal = M.Modal.init(this.modalEl, { - onOpenStart: this.options.onOpenStart, - onOpenEnd: this.options.onOpenEnd, - onCloseStart: this.options.onCloseStart, - onCloseEnd: () => { - if (typeof this.options.onCloseEnd === 'function') { - this.options.onCloseEnd.call(this); - } - this.isOpen = false; + _setupModal() { + this.modal = M.Modal.init(this.modalEl, { + onOpenStart: this.options.onOpenStart, + onOpenEnd: this.options.onOpenEnd, + onCloseStart: this.options.onCloseStart, + onCloseEnd: () => { + if (typeof this.options.onCloseEnd === 'function') { + this.options.onCloseEnd.call(this); } - }); - } - - _setupVariables() { - this.currentView = 'hours'; - this.vibrate = navigator.vibrate - ? 'vibrate' - : (navigator as any).webkitVibrate - ? 'webkitVibrate' - : null; - this._canvas = this.modalEl.querySelector('.timepicker-canvas'); - this.plate = this.modalEl.querySelector('.timepicker-plate'); - this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); - this.hoursView = this.modalEl.querySelector('.timepicker-hours'); - this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); - this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); - this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); - this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); - this.footer = this.modalEl.querySelector('.timepicker-footer'); - this.amOrPm = 'PM'; - } - - private _createButton(text: string, visibility: string): HTMLButtonElement { - const button = document.createElement('button'); - button.classList.add('btn-flat', 'waves-effect'); - button.style.visibility = visibility; - button.type = 'button'; - button.tabIndex = this.options.twelveHour ? 3 : 1; - button.innerText = text; - return button; - } - - _pickerSetup() { - const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); - clearButton.classList.add('timepicker-clear'); - clearButton.addEventListener('click', this.clear.bind(this)); - this.footer.appendChild(clearButton); - - const confirmationBtnsContainer = document.createElement('div'); - confirmationBtnsContainer.classList.add('confirmation-btns'); - this.footer.append(confirmationBtnsContainer); - - const cancelButton = this._createButton(this.options.i18n.cancel, ''); - cancelButton.classList.add('timepicker-close'); - cancelButton.addEventListener('click', this.close.bind(this)); - confirmationBtnsContainer.appendChild(cancelButton); - - const doneButton = this._createButton(this.options.i18n.done, ''); - doneButton.classList.add('timepicker-close'); - doneButton.addEventListener('click', this.done.bind(this)); - confirmationBtnsContainer.appendChild(doneButton); - } - - _clockSetup() { - if (this.options.twelveHour) { - // AM Button - this._amBtn = document.createElement('div'); - this._amBtn.classList.add('am-btn'); - this._amBtn.innerText = 'AM'; - this._amBtn.addEventListener('click', this._handleAmPmClick.bind(this)); - this.spanAmPm.appendChild(this._amBtn); - // PM Button - this._pmBtn = document.createElement('div'); - this._pmBtn.classList.add('pm-btn'); - this._pmBtn.innerText = 'PM'; - this._pmBtn.addEventListener('click', this._handleAmPmClick.bind(this)); - this.spanAmPm.appendChild(this._pmBtn); + this.isOpen = false; } - this._buildHoursView(); - this._buildMinutesView(); - this._buildSVGClock(); - } - - _buildSVGClock() { - // Draw clock hands and others - let dialRadius = this.options.dialRadius; - let tickRadius = this.options.tickRadius; - let diameter = dialRadius * 2; - let svg = Timepicker._createSVGEl('svg'); - svg.setAttribute('class', 'timepicker-svg'); - svg.setAttribute('width', diameter.toString()); - svg.setAttribute('height', diameter.toString()); - let g = Timepicker._createSVGEl('g'); - g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); - let bearing = Timepicker._createSVGEl('circle'); - bearing.setAttribute('class', 'timepicker-canvas-bearing'); - bearing.setAttribute('cx', '0'); - bearing.setAttribute('cy', '0'); - bearing.setAttribute('r', '4'); - let hand = Timepicker._createSVGEl('line'); - hand.setAttribute('x1', '0'); - hand.setAttribute('y1', '0'); - let bg = Timepicker._createSVGEl('circle'); - bg.setAttribute('class', 'timepicker-canvas-bg'); - bg.setAttribute('r', tickRadius); - g.appendChild(hand); - g.appendChild(bg); - g.appendChild(bearing); - svg.appendChild(g); - this._canvas.appendChild(svg); - this.hand = hand; - this.bg = bg; - this.bearing = bearing; - this.g = g; - } - - _buildHoursView() { - const $tick = document.createElement('div'); - $tick.classList.add('timepicker-tick'); - // Hours view - if (this.options.twelveHour) { - for (let i = 1; i < 13; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const radius = this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } - } - else { - for (let i = 0; i < 24; i += 1) { - const tick = $tick.cloneNode(true); - const radian = (i / 6) * Math.PI; - const inner = i > 0 && i < 13; - const radius = inner ? this.options.innerRadius : this.options.outerRadius; - tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; - tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; - tick.innerHTML = i === 0 ? '00' : i.toString(); - this.hoursView.appendChild(tick); - // tick.on(mousedownEvent, mousedown); - } + }); + } + + _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate + ? 'vibrate' + : (navigator as any).webkitVibrate + ? 'webkitVibrate' + : null; + this._canvas = this.modalEl.querySelector('.timepicker-canvas'); + this.plate = this.modalEl.querySelector('.timepicker-plate'); + this.digitalClock = this.modalEl.querySelector('.timepicker-display-column'); + this.hoursView = this.modalEl.querySelector('.timepicker-hours'); + this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); + this.inputHours = this.modalEl.querySelector('.timepicker-input-hours'); + this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes'); + this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.modalEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + + private _createButton(text: string, visibility: string): HTMLButtonElement { + const button = document.createElement('button'); + button.classList.add('btn-flat', 'waves-effect'); + button.style.visibility = visibility; + button.type = 'button'; + button.tabIndex = this.options.twelveHour ? 3 : 1; + button.innerText = text; + return button; + } + + _pickerSetup() { + const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); + clearButton.classList.add('timepicker-clear'); + clearButton.addEventListener('click', this.clear.bind(this)); + this.footer.appendChild(clearButton); + + const confirmationBtnsContainer = document.createElement('div'); + confirmationBtnsContainer.classList.add('confirmation-btns'); + this.footer.append(confirmationBtnsContainer); + + const cancelButton = this._createButton(this.options.i18n.cancel, ''); + cancelButton.classList.add('timepicker-close'); + cancelButton.addEventListener('click', this.close.bind(this)); + confirmationBtnsContainer.appendChild(cancelButton); + + const doneButton = this._createButton(this.options.i18n.done, ''); + doneButton.classList.add('timepicker-close'); + doneButton.addEventListener('click', this.done.bind(this)); + confirmationBtnsContainer.appendChild(doneButton); + } + + _clockSetup() { + if (this.options.twelveHour) { + // AM Button + this._amBtn = document.createElement('div'); + this._amBtn.classList.add('am-btn'); + this._amBtn.innerText = 'AM'; + this._amBtn.addEventListener('click', this._handleAmPmClick.bind(this)); + this.spanAmPm.appendChild(this._amBtn); + // PM Button + this._pmBtn = document.createElement('div'); + this._pmBtn.classList.add('pm-btn'); + this._pmBtn.innerText = 'PM'; + this._pmBtn.addEventListener('click', this._handleAmPmClick.bind(this)); + this.spanAmPm.appendChild(this._pmBtn); + } + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + + _buildSVGClock() { + // Draw clock hands and others + let dialRadius = this.options.dialRadius; + let tickRadius = this.options.tickRadius; + let diameter = dialRadius * 2; + let svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter.toString()); + svg.setAttribute('height', diameter.toString()); + let g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + let bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', '0'); + bearing.setAttribute('cy', '0'); + bearing.setAttribute('r', '4'); + let hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', '0'); + hand.setAttribute('y1', '0'); + let bg = Timepicker._createSVGEl('circle'); + bg.setAttribute('class', 'timepicker-canvas-bg'); + bg.setAttribute('r', tickRadius); + g.appendChild(hand); + g.appendChild(bg); + g.appendChild(bearing); + svg.appendChild(g); + this._canvas.appendChild(svg); + this.hand = hand; + this.bg = bg; + this.bearing = bearing; + this.g = g; + } + + _buildHoursView() { + const $tick = document.createElement('div'); + $tick.classList.add('timepicker-tick'); + // Hours view + if (this.options.twelveHour) { + for (let i = 1; i < 13; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const radius = this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); + } + } + else { + for (let i = 0; i < 24; i += 1) { + const tick = $tick.cloneNode(true); + const radian = (i / 6) * Math.PI; + const inner = i > 0 && i < 13; + const radius = inner ? this.options.innerRadius : this.options.outerRadius; + tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px'; + tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px'; + tick.innerHTML = i === 0 ? '00' : i.toString(); + this.hoursView.appendChild(tick); + // tick.on(mousedownEvent, mousedown); } } + } - _buildMinutesView() { - const _tick = document.createElement('div'); - _tick.classList.add('timepicker-tick'); - // Minutes view - for (let i = 0; i < 60; i += 5) { - const tick = _tick.cloneNode(true); - const radian = (i / 30) * Math.PI; - tick.style.left = - this.options.dialRadius + - Math.sin(radian) * this.options.outerRadius - + _buildMinutesView() { + const _tick = document.createElement('div'); + _tick.classList.add('timepicker-tick'); + // Minutes view + for (let i = 0; i < 60; i += 5) { + const tick = _tick.cloneNode(true); + const radian = (i / 30) * Math.PI; + tick.style.left = + this.options.dialRadius + + Math.sin(radian) * this.options.outerRadius - + this.options.tickRadius + + 'px'; + tick.style.top = + this.options.dialRadius - + Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px'; - tick.style.top = - this.options.dialRadius - - Math.cos(radian) * this.options.outerRadius - - this.options.tickRadius + - 'px'; - tick.innerHTML = Timepicker._addLeadingZero(i); - this.minutesView.appendChild(tick); - } + tick.innerHTML = Timepicker._addLeadingZero(i); + this.minutesView.appendChild(tick); } + } - _handleAmPmClick(e) { - const btnClicked = e.target; - this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; - this._updateAmPmView(); - } + _handleAmPmClick(e) { + const btnClicked = e.target; + this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + } - _updateAmPmView() { - if (this.options.twelveHour) { - if (this.amOrPm === 'PM') { - this._amBtn.classList.remove('text-primary'); - this._pmBtn.classList.add('text-primary'); - } - else if (this.amOrPm === 'AM') { - this._amBtn.classList.add('text-primary'); - this._pmBtn.classList.remove('text-primary'); - } + _updateAmPmView() { + if (this.options.twelveHour) { + if (this.amOrPm === 'PM') { + this._amBtn.classList.remove('text-primary'); + this._pmBtn.classList.add('text-primary'); + } + else if (this.amOrPm === 'AM') { + this._amBtn.classList.add('text-primary'); + this._pmBtn.classList.remove('text-primary'); } } + } - _updateTimeFromInput() { - // Get the time - let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); - if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { - if (value[1].toUpperCase().indexOf('AM') > 0) { - this.amOrPm = 'AM'; - } else { - this.amOrPm = 'PM'; - } - value[1] = value[1].replace('AM', '').replace('PM', ''); + _updateTimeFromInput() { + // Get the time + let value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); + if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { + if (value[1].toUpperCase().indexOf('AM') > 0) { + this.amOrPm = 'AM'; + } else { + this.amOrPm = 'PM'; } - if (value[0] === 'now') { - let now = new Date(+new Date() + this.options.fromNow); - value = [now.getHours().toString(), now.getMinutes().toString()]; - if (this.options.twelveHour) { - this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; - } + value[1] = value[1].replace('AM', '').replace('PM', ''); + } + if (value[0] === 'now') { + let now = new Date(+new Date() + this.options.fromNow); + value = [now.getHours().toString(), now.getMinutes().toString()]; + if (this.options.twelveHour) { + this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM'; } - this.hours = +value[0] || 0; - this.minutes = +value[1] || 0; - this.inputHours.value = this.hours; - this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + } + this.hours = +value[0] || 0; + this.minutes = +value[1] || 0; + this.inputHours.value = this.hours; + this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); - this._updateAmPmView(); + this._updateAmPmView(); + } + + showView(view, delay: number = null) { + if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') { + // raiseCallback(this.options.beforeHourSelect); } + let isHours = view === 'hours', + nextView = isHours ? this.hoursView : this.minutesView, + hideView = isHours ? this.minutesView : this.hoursView; + this.currentView = view; - showView(view, delay: number = null) { - if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') { - // raiseCallback(this.options.beforeHourSelect); - } - let isHours = view === 'hours', - nextView = isHours ? this.hoursView : this.minutesView, - hideView = isHours ? this.minutesView : this.hoursView; - this.currentView = view; + if (isHours) { + this.inputHours.classList.add('text-primary'); + this.inputMinutes.classList.remove('text-primary'); + } + else { + this.inputHours.classList.remove('text-primary'); + this.inputMinutes.classList.add('text-primary'); + } - if (isHours) { - this.inputHours.classList.add('text-primary'); - this.inputMinutes.classList.remove('text-primary'); - } - else { - this.inputHours.classList.remove('text-primary'); - this.inputMinutes.classList.add('text-primary'); - } + // Transition view + hideView.classList.add('timepicker-dial-out'); + + nextView.style.visibility = 'visible'; + nextView.classList.remove('timepicker-dial-out'); - // Transition view - hideView.classList.add('timepicker-dial-out'); - - nextView.style.visibility = 'visible'; - nextView.classList.remove('timepicker-dial-out'); - - // Reset clock hand - this.resetClock(delay); - // After transitions ended - clearTimeout(this.toggleViewTimer); - this.toggleViewTimer = setTimeout(() => { - hideView.style.visibility = 'hidden'; - }, this.options.duration); - } - - resetClock(delay) { - let view = this.currentView, - value = this[view], - isHours = view === 'hours', - unit = Math.PI / (isHours ? 6 : 30), - radian = value * unit, - radius = - isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, - x = Math.sin(radian) * radius, - y = -Math.cos(radian) * radius, - self = this; - - if (delay) { - this.canvas?.classList.add('timepicker-canvas-out'); - setTimeout(() => { - self.canvas?.classList.remove('timepicker-canvas-out'); - self.setHand(x, y); - }, delay); + // Reset clock hand + this.resetClock(delay); + // After transitions ended + clearTimeout(this.toggleViewTimer); + this.toggleViewTimer = setTimeout(() => { + hideView.style.visibility = 'hidden'; + }, this.options.duration); + } + + resetClock(delay) { + let view = this.currentView, + value = this[view], + isHours = view === 'hours', + unit = Math.PI / (isHours ? 6 : 30), + radian = value * unit, + radius = + isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, + x = Math.sin(radian) * radius, + y = -Math.cos(radian) * radius, + self = this; + + if (delay) { + this.canvas?.classList.add('timepicker-canvas-out'); + setTimeout(() => { + self.canvas?.classList.remove('timepicker-canvas-out'); + self.setHand(x, y); + }, delay); + } + else { + this.setHand(x, y); + } + } + + _inputFromTextField() { + const isHours = this.currentView === 'hours'; + if (isHours) { + const value = parseInt(this.inputHours.value); + if (value > 0 && value < 13) { + this.drawClockFromTimeInput(value, isHours); + this.showView('minutes', this.options.duration / 2); + this.hours = value; + this.inputMinutes.focus(); } else { - this.setHand(x, y); + const hour = new Date().getHours(); + this.inputHours.value = (hour % 12).toString(); } } - - _inputFromTextField() { - const isHours = this.currentView === 'hours'; - if (isHours) { - const value = parseInt(this.inputHours.value); - if (value > 0 && value < 13) { - this.drawClockFromTimeInput(value, isHours); - this.showView('minutes', this.options.duration / 2); - this.hours = value; - this.inputMinutes.focus(); - } - else { - const hour = new Date().getHours(); - this.inputHours.value = (hour % 12).toString(); - } + else { + const value = parseInt(this.inputMinutes.value); + if (value >= 0 && value < 60) { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + this.drawClockFromTimeInput(value, isHours); + this.minutes = value; + (this.modalEl.querySelector('.confirmation-btns :nth-child(2)')).focus(); } else { - const value = parseInt(this.inputMinutes.value); - if (value >= 0 && value < 60) { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - this.drawClockFromTimeInput(value, isHours); - this.minutes = value; - (this.modalEl.querySelector('.confirmation-btns :nth-child(2)')).focus(); - } - else { - const minutes = new Date().getMinutes(); - this.inputMinutes.value = Timepicker._addLeadingZero(minutes); - } + const minutes = new Date().getMinutes(); + this.inputMinutes.value = Timepicker._addLeadingZero(minutes); } } + } - drawClockFromTimeInput(value, isHours) { - const unit = Math.PI / (isHours ? 6 : 30); - const radian = value * unit; - let radius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), - cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), - cx2 = Math.sin(radian) * radius, - cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - - setHand(x, y, roundBy5: boolean = false) { - let radian = Math.atan2(x, -y), - isHours = this.currentView === 'hours', - unit = Math.PI / (isHours || roundBy5 ? 6 : 30), - z = Math.sqrt(x * x + y * y), - inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, - radius = inner ? this.options.innerRadius : this.options.outerRadius; + drawClockFromTimeInput(value, isHours) { + const unit = Math.PI / (isHours ? 6 : 30); + const radian = value * unit; + let radius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), + cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), + cx2 = Math.sin(radian) * radius, + cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } + setHand(x, y, roundBy5: boolean = false) { + let radian = Math.atan2(x, -y), + isHours = this.currentView === 'hours', + unit = Math.PI / (isHours || roundBy5 ? 6 : 30), + z = Math.sqrt(x * x + y * y), + inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, + radius = inner ? this.options.innerRadius : this.options.outerRadius; - // Radian should in range [0, 2PI] - if (radian < 0) { - radian = Math.PI * 2 + radian; - } + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } - // Get the round value - let value = Math.round(radian / unit); + // Radian should in range [0, 2PI] + if (radian < 0) { + radian = Math.PI * 2 + radian; + } - // Get the round radian - radian = value * unit; + // Get the round value + let value = Math.round(radian / unit); - // Correct the hours or minutes - if (this.options.twelveHour) { - if (isHours) { - if (value === 0) value = 12; - } else { - if (roundBy5) value *= 5; - if (value === 60) value = 0; + // Get the round radian + radian = value * unit; + + // Correct the hours or minutes + if (this.options.twelveHour) { + if (isHours) { + if (value === 0) value = 12; + } else { + if (roundBy5) value *= 5; + if (value === 60) value = 0; + } + } else { + if (isHours) { + if (value === 12) { + value = 0; } + value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; } else { - if (isHours) { - if (value === 12) { - value = 0; - } - value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; - } else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } + if (roundBy5) { + value *= 5; + } + if (value === 60) { + value = 0; } } + } - // Once hours or minutes changed, vibrate the device - if (this[this.currentView] !== value) { - if (this.vibrate && this.options.vibrate) { - // Do not vibrate too frequently - if (!this.vibrateTimer) { - navigator[this.vibrate](10); - this.vibrateTimer = setTimeout(() => { - this.vibrateTimer = null; - }, 100); - } + // Once hours or minutes changed, vibrate the device + if (this[this.currentView] !== value) { + if (this.vibrate && this.options.vibrate) { + // Do not vibrate too frequently + if (!this.vibrateTimer) { + navigator[this.vibrate](10); + this.vibrateTimer = setTimeout(() => { + this.vibrateTimer = null; + }, 100); } } + } - this[this.currentView] = value; - if (isHours) { - this.inputHours.value = value.toString(); - } - else { - this.inputMinutes.value = Timepicker._addLeadingZero(value); - } + this[this.currentView] = value; + if (isHours) { + this.inputHours.value = value.toString(); + } + else { + this.inputMinutes.value = Timepicker._addLeadingZero(value); + } - // Set clock hand and others' position - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), - cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), - cx2 = Math.sin(radian) * radius, - cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); - } - - open() { - if (this.isOpen) return; - this.isOpen = true; - this._updateTimeFromInput(); - this.showView('hours'); - this.modal.open(undefined); - } - - close() { - if (!this.isOpen) return; - this.isOpen = false; - this.modal.close(); - } - - done(e = null, clearValue = null) { - // Set input value - let last = this.el.value; - let value = clearValue - ? '' - : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); - this.time = value; - if (!clearValue && this.options.twelveHour) { - value = `${value} ${this.amOrPm}`; - } - this.el.value = value; - // Trigger change event - if (value !== last) { - this.el.dispatchEvent(new Event('change')); - } - this.close(); - this.el.focus(); - } - - clear() { - this.done(null, true); - } - - static { - Timepicker._template = ` -
-
-
-
-
- - : - -
-
-
-
+ // Set clock hand and others' position + let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), + cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), + cx2 = Math.sin(radian) * radius, + cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1.toString()); + this.hand.setAttribute('y2', cy1.toString()); + this.bg.setAttribute('cx', cx2.toString()); + this.bg.setAttribute('cy', cy2.toString()); + } + + open() { + if (this.isOpen) return; + this.isOpen = true; + this._updateTimeFromInput(); + this.showView('hours'); + this.modal.open(undefined); + } + + close() { + if (!this.isOpen) return; + this.isOpen = false; + this.modal.close(); + } + + done(e = null, clearValue = null) { + // Set input value + let last = this.el.value; + let value = clearValue + ? '' + : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); + this.time = value; + if (!clearValue && this.options.twelveHour) { + value = `${value} ${this.amOrPm}`; + } + this.el.value = value; + // Trigger change event + if (value !== last) { + this.el.dispatchEvent(new Event('change')); + } + this.close(); + this.el.focus(); + } + + clear() { + this.done(null, true); + } + + static { + Timepicker._template = ` +
+
+
+
+
+ + : +
-
-
-
-
-
-
+
+
-
- +
+
+
+
+
+
+
+
+ e.target).closest('.toast')) { - const toastElem = (e.target).closest('.toast'); - const toast: Toast = (toastElem as any).M_Toast; - toast.panning = true; - Toast._draggedToast = toast; - toast.el.classList.add('panning'); - toast.el.style.transition = ''; - toast.startingXPos = Toast._xPos(e); - toast.time = Date.now(); - toast.xPos = Toast._xPos(e); - } + static _onDragStart(e) { + if (e.target && (e.target).closest('.toast')) { + const toastElem = (e.target).closest('.toast'); + const toast: Toast = (toastElem as any).M_Toast; + toast.panning = true; + Toast._draggedToast = toast; + toast.el.classList.add('panning'); + toast.el.style.transition = ''; + toast.startingXPos = Toast._xPos(e); + toast.time = Date.now(); + toast.xPos = Toast._xPos(e); } + } - static _onDragMove(e) { - if (!!Toast._draggedToast) { - e.preventDefault(); - const toast = Toast._draggedToast; - toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); - toast.xPos = Toast._xPos(e); - toast.velocityX = toast.deltaX / (Date.now() - toast.time); - toast.time = Date.now(); + static _onDragMove(e) { + if (!!Toast._draggedToast) { + e.preventDefault(); + const toast = Toast._draggedToast; + toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e)); + toast.xPos = Toast._xPos(e); + toast.velocityX = toast.deltaX / (Date.now() - toast.time); + toast.time = Date.now(); - const totalDeltaX = toast.xPos - toast.startingXPos; - const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - toast.el.style.transform = `translateX(${totalDeltaX}px)`; - toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); - } + const totalDeltaX = toast.xPos - toast.startingXPos; + const activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + toast.el.style.transform = `translateX(${totalDeltaX}px)`; + toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString(); } + } - static _onDragEnd() { - if (!!Toast._draggedToast) { - let toast = Toast._draggedToast; - toast.panning = false; - toast.el.classList.remove('panning'); + static _onDragEnd() { + if (!!Toast._draggedToast) { + let toast = Toast._draggedToast; + toast.panning = false; + toast.el.classList.remove('panning'); - let totalDeltaX = toast.xPos - toast.startingXPos; - let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; - let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; + let totalDeltaX = toast.xPos - toast.startingXPos; + let activationDistance = toast.el.offsetWidth * toast.options.activationPercent; + let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1; - // Remove toast - if (shouldBeDismissed) { - toast.wasSwiped = true; - toast.dismiss(); - // Animate toast back to original position - } - else { - toast.el.style.transition = 'transform .2s, opacity .2s'; - toast.el.style.transform = ''; - toast.el.style.opacity = ''; - } - Toast._draggedToast = null; + // Remove toast + if (shouldBeDismissed) { + toast.wasSwiped = true; + toast.dismiss(); + // Animate toast back to original position } + else { + toast.el.style.transition = 'transform .2s, opacity .2s'; + toast.el.style.transform = ''; + toast.el.style.opacity = ''; + } + Toast._draggedToast = null; } + } - static _xPos(e) { - if (e.targetTouches && e.targetTouches.length >= 1) { - return e.targetTouches[0].clientX; - } - // mouse event - return e.clientX; + static _xPos(e) { + if (e.targetTouches && e.targetTouches.length >= 1) { + return e.targetTouches[0].clientX; } + // mouse event + return e.clientX; + } - static dismissAll() { - for (let toastIndex in Toast._toasts) { - Toast._toasts[toastIndex].dismiss(); - } + static dismissAll() { + for (let toastIndex in Toast._toasts) { + Toast._toasts[toastIndex].dismiss(); } + } - _createToast() { - const toast = document.createElement('div'); - toast.classList.add('toast'); - toast.setAttribute('role', 'alert'); - toast.setAttribute('aria-live', 'assertive'); - toast.setAttribute('aria-atomic', 'true'); + _createToast() { + const toast = document.createElement('div'); + toast.classList.add('toast'); + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'assertive'); + toast.setAttribute('aria-atomic', 'true'); - // Add custom classes onto toast - if (this.options.classes.length > 0) { - toast.classList.add(...this.options.classes.split(' ')); - } + // Add custom classes onto toast + if (this.options.classes.length > 0) { + toast.classList.add(...this.options.classes.split(' ')); + } - // Set safe text content - toast.innerText = this.message; + // Set safe text content + toast.innerText = this.message; - // if ( - // typeof HTMLElement === 'object' - // ? this.htmlMessage instanceof HTMLElement - // : this.htmlMessage && - // typeof this.htmlMessage === 'object' && - // this.htmlMessage !== null && - // this.htmlMessage.nodeType === 1 && - // typeof this.htmlMessage.nodeName === 'string' - // ) { - // //if the htmlMessage is an HTML node, append it directly - // toast.appendChild(this.htmlMessage); - // } - // else if (!!this.htmlMessage.jquery) { - // // Check if it is jQuery object, append the node - // $(toast).append(this.htmlMessage[0]); - // } - // else { - // // Append as unsanitized html; - // $(toast).append(this.htmlMessage); - // } + // if ( + // typeof HTMLElement === 'object' + // ? this.htmlMessage instanceof HTMLElement + // : this.htmlMessage && + // typeof this.htmlMessage === 'object' && + // this.htmlMessage !== null && + // this.htmlMessage.nodeType === 1 && + // typeof this.htmlMessage.nodeName === 'string' + // ) { + // //if the htmlMessage is an HTML node, append it directly + // toast.appendChild(this.htmlMessage); + // } + // else if (!!this.htmlMessage.jquery) { + // // Check if it is jQuery object, append the node + // $(toast).append(this.htmlMessage[0]); + // } + // else { + // // Append as unsanitized html; + // $(toast).append(this.htmlMessage); + // } - // Append toast - Toast._container.appendChild(toast); - return toast; - } + // Append toast + Toast._container.appendChild(toast); + return toast; + } - _animateIn() { - // Animate toast in - anim({ - targets: this.el, - top: 0, - opacity: 1, - duration: this.options.inDuration, - easing: 'easeOutCubic' - }); - } + _animateIn() { + // Animate toast in + anim({ + targets: this.el, + top: 0, + opacity: 1, + duration: this.options.inDuration, + easing: 'easeOutCubic' + }); + } - /** - * Create setInterval which automatically removes toast when timeRemaining >= 0 - * has been reached - */ - _setTimer() { - if (this.timeRemaining !== Infinity) { - this.counterInterval = setInterval(() => { - // If toast is not being dragged, decrease its time remaining - if (!this.panning) { - this.timeRemaining -= 20; - } - // Animate toast out - if (this.timeRemaining <= 0) { - this.dismiss(); - } - }, 20); - } + /** + * Create setInterval which automatically removes toast when timeRemaining >= 0 + * has been reached + */ + _setTimer() { + if (this.timeRemaining !== Infinity) { + this.counterInterval = setInterval(() => { + // If toast is not being dragged, decrease its time remaining + if (!this.panning) { + this.timeRemaining -= 20; + } + // Animate toast out + if (this.timeRemaining <= 0) { + this.dismiss(); + } + }, 20); } + } - /** - * Dismiss toast with animation - */ - dismiss() { - window.clearInterval(this.counterInterval); - let activationDistance = this.el.offsetWidth * this.options.activationPercent; + /** + * Dismiss toast with animation + */ + dismiss() { + window.clearInterval(this.counterInterval); + let activationDistance = this.el.offsetWidth * this.options.activationPercent; - if (this.wasSwiped) { - this.el.style.transition = 'transform .05s, opacity .05s'; - this.el.style.transform = `translateX(${activationDistance}px)`; - this.el.style.opacity = '0'; - } + if (this.wasSwiped) { + this.el.style.transition = 'transform .05s, opacity .05s'; + this.el.style.transform = `translateX(${activationDistance}px)`; + this.el.style.opacity = '0'; + } - anim({ - targets: this.el, - opacity: 0, - marginTop: -40, - duration: this.options.outDuration, - easing: 'easeOutExpo', - complete: () => { - // Call the optional callback - if (typeof this.options.completeCallback === 'function') { - this.options.completeCallback(); - } - // Remove toast from DOM - this.el.remove(); - Toast._toasts.splice(Toast._toasts.indexOf(this), 1); - if (Toast._toasts.length === 0) { - Toast._removeContainer(); - } + anim({ + targets: this.el, + opacity: 0, + marginTop: -40, + duration: this.options.outDuration, + easing: 'easeOutExpo', + complete: () => { + // Call the optional callback + if (typeof this.options.completeCallback === 'function') { + this.options.completeCallback(); } - }); - } + // Remove toast from DOM + this.el.remove(); + Toast._toasts.splice(Toast._toasts.indexOf(this), 1); + if (Toast._toasts.length === 0) { + Toast._removeContainer(); + } + } + }); + } - static { - Toast._toasts = []; - Toast._container = null; - Toast._draggedToast = null; - } + static { + Toast._toasts = []; + Toast._container = null; + Toast._draggedToast = null; } +} \ No newline at end of file diff --git a/src/tooltip.ts b/src/tooltip.ts index a0b1baf057..0d4fcf4654 100644 --- a/src/tooltip.ts +++ b/src/tooltip.ts @@ -1,283 +1,270 @@ -import { Component } from "./component"; -import { M } from "./global"; import anim from "animejs"; + +import { M } from "./global"; import { Bounding } from "./bounding"; +import { Component } from "./component"; - const _defaults = { - exitDelay: 200, - enterDelay: 0, - //html: null, - text: '', - //unsafeHTML: null, - margin: 5, - inDuration: 250, - outDuration: 200, - position: 'bottom', - transitionMovement: 10 - }; - - export class Tooltip extends Component { - isOpen: boolean; - isHovered: boolean; - isFocused: boolean; - tooltipEl: HTMLElement; - private _handleMouseEnterBound: any; - private _handleMouseLeaveBound: any; - private _handleFocusBound: any; - private _handleBlurBound: any; - private _exitDelayTimeout: string | number | NodeJS.Timeout; - private _enterDelayTimeout: string | number | NodeJS.Timeout; - xMovement: number; - yMovement: number; - - constructor(el, options) { - super(Tooltip, el, options); - (this.el as any).M_Tooltip = this; - this.options = {...Tooltip.defaults, ...options}; - this.isOpen = false; - this.isHovered = false; - this.isFocused = false; - this._appendTooltipEl(); - this._setupEventHandlers(); - } +const _defaults = { + exitDelay: 200, + enterDelay: 0, + //html: null, + text: '', + //unsafeHTML: null, + margin: 5, + inDuration: 250, + outDuration: 200, + position: 'bottom', + transitionMovement: 10 +}; + +export class Tooltip extends Component { + isOpen: boolean; + isHovered: boolean; + isFocused: boolean; + tooltipEl: HTMLElement; + private _handleMouseEnterBound: any; + private _handleMouseLeaveBound: any; + private _handleFocusBound: any; + private _handleBlurBound: any; + private _exitDelayTimeout: string | number | NodeJS.Timeout; + private _enterDelayTimeout: string | number | NodeJS.Timeout; + xMovement: number; + yMovement: number; + + constructor(el, options) { + super(Tooltip, el, options); + (this.el as any).M_Tooltip = this; + this.options = {...Tooltip.defaults, ...options}; + this.isOpen = false; + this.isHovered = false; + this.isFocused = false; + this._appendTooltipEl(); + this._setupEventHandlers(); + } - static get defaults() { - return _defaults; - } + static get defaults() { + return _defaults; + } - static init(els, options) { - return super.init(this, els, options); - } + static init(els, options) { + return super.init(this, els, options); + } - static getInstance(el) { - const domElem = !!el.jquery ? el[0] : el; - return domElem.M_Tooltip; - } + static getInstance(el) { + const domElem = !!el.jquery ? el[0] : el; + return domElem.M_Tooltip; + } - destroy() { - this.tooltipEl.remove(); - this._removeEventHandlers(); - (this.el as any).M_Tooltip = undefined; - } + destroy() { + this.tooltipEl.remove(); + this._removeEventHandlers(); + (this.el as any).M_Tooltip = undefined; + } - _appendTooltipEl() { - this.tooltipEl = document.createElement('div'); - this.tooltipEl.classList.add('material-tooltip'); + _appendTooltipEl() { + this.tooltipEl = document.createElement('div'); + this.tooltipEl.classList.add('material-tooltip'); - const tooltipContentEl = document.createElement('div'); - tooltipContentEl.classList.add('tooltip-content'); - this._setTooltipContent(tooltipContentEl); - this.tooltipEl.appendChild(tooltipContentEl); - document.body.appendChild(this.tooltipEl); - } + const tooltipContentEl = document.createElement('div'); + tooltipContentEl.classList.add('tooltip-content'); + this._setTooltipContent(tooltipContentEl); + this.tooltipEl.appendChild(tooltipContentEl); + document.body.appendChild(this.tooltipEl); + } - _setTooltipContent(tooltipContentEl: HTMLElement) { - tooltipContentEl.innerText = this.options.text; - /* - if (!!this.options.html) { - // Warn when using html - console.warn( - 'The html option is deprecated and will be removed in the future. See https://github.com/materializecss/materialize/pull/49' - ); - $(tooltipContentEl).append(this.options.html); - } - if (!!this.options.unsafeHTML) { - $(tooltipContentEl).append(this.options.unsafeHTML); - } - */ - } + _setTooltipContent(tooltipContentEl: HTMLElement) { + tooltipContentEl.innerText = this.options.text; + } - _updateTooltipContent() { - this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content')); - } + _updateTooltipContent() { + this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content')); + } - _setupEventHandlers() { - this._handleMouseEnterBound = this._handleMouseEnter.bind(this); - this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); - this._handleFocusBound = this._handleFocus.bind(this); - this._handleBlurBound = this._handleBlur.bind(this); - this.el.addEventListener('mouseenter', this._handleMouseEnterBound); - this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); - this.el.addEventListener('focus', this._handleFocusBound, true); - this.el.addEventListener('blur', this._handleBlurBound, true); - } + _setupEventHandlers() { + this._handleMouseEnterBound = this._handleMouseEnter.bind(this); + this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); + this._handleFocusBound = this._handleFocus.bind(this); + this._handleBlurBound = this._handleBlur.bind(this); + this.el.addEventListener('mouseenter', this._handleMouseEnterBound); + this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); + this.el.addEventListener('focus', this._handleFocusBound, true); + this.el.addEventListener('blur', this._handleBlurBound, true); + } - _removeEventHandlers() { - this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); - this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); - this.el.removeEventListener('focus', this._handleFocusBound, true); - this.el.removeEventListener('blur', this._handleBlurBound, true); - } + _removeEventHandlers() { + this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); + this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); + this.el.removeEventListener('focus', this._handleFocusBound, true); + this.el.removeEventListener('blur', this._handleBlurBound, true); + } - open(isManual) { - if (this.isOpen) return; - isManual = isManual === undefined ? true : undefined; // Default value true - this.isOpen = true; - // Update tooltip content with HTML attribute options - this.options = {...this.options, ...this._getAttributeOptions()}; - this._updateTooltipContent(); - this._setEnterDelayTimeout(isManual); - } + open(isManual) { + if (this.isOpen) return; + isManual = isManual === undefined ? true : undefined; // Default value true + this.isOpen = true; + // Update tooltip content with HTML attribute options + this.options = {...this.options, ...this._getAttributeOptions()}; + this._updateTooltipContent(); + this._setEnterDelayTimeout(isManual); + } - close() { - if (!this.isOpen) return; - this.isHovered = false; - this.isFocused = false; - this.isOpen = false; - this._setExitDelayTimeout(); - } + close() { + if (!this.isOpen) return; + this.isHovered = false; + this.isFocused = false; + this.isOpen = false; + this._setExitDelayTimeout(); + } - _setExitDelayTimeout() { - clearTimeout(this._exitDelayTimeout); - this._exitDelayTimeout = setTimeout(() => { - if (this.isHovered || this.isFocused) return; - this._animateOut(); - }, this.options.exitDelay); - } + _setExitDelayTimeout() { + clearTimeout(this._exitDelayTimeout); + this._exitDelayTimeout = setTimeout(() => { + if (this.isHovered || this.isFocused) return; + this._animateOut(); + }, this.options.exitDelay); + } - _setEnterDelayTimeout(isManual) { - clearTimeout(this._enterDelayTimeout); - this._enterDelayTimeout = setTimeout(() => { - if (!this.isHovered && !this.isFocused && !isManual) return; - this._animateIn(); - }, this.options.enterDelay); - } + _setEnterDelayTimeout(isManual) { + clearTimeout(this._enterDelayTimeout); + this._enterDelayTimeout = setTimeout(() => { + if (!this.isHovered && !this.isFocused && !isManual) return; + this._animateIn(); + }, this.options.enterDelay); + } - _positionTooltip() { - const tooltip: HTMLElement = this.tooltipEl; - const origin = (this.el as HTMLElement), - originHeight = origin.offsetHeight, - originWidth = origin.offsetWidth, - tooltipHeight = tooltip.offsetHeight, - tooltipWidth = tooltip.offsetWidth, - margin = this.options.margin; - - (this.xMovement = 0), (this.yMovement = 0); - - let targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop(); - let targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft(); - if (this.options.position === 'top') { - targetTop += -tooltipHeight - margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = -this.options.transitionMovement; - } else if (this.options.position === 'right') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += originWidth + margin; - this.xMovement = this.options.transitionMovement; - } else if (this.options.position === 'left') { - targetTop += originHeight / 2 - tooltipHeight / 2; - targetLeft += -tooltipWidth - margin; - this.xMovement = -this.options.transitionMovement; - } else { - targetTop += originHeight + margin; - targetLeft += originWidth / 2 - tooltipWidth / 2; - this.yMovement = this.options.transitionMovement; - } - - const newCoordinates = this._repositionWithinScreen( - targetLeft, - targetTop, - tooltipWidth, - tooltipHeight - ); - - tooltip.style.top = newCoordinates.y+'px'; - tooltip.style.left = newCoordinates.x+'px'; + _positionTooltip() { + const tooltip: HTMLElement = this.tooltipEl; + const origin = (this.el as HTMLElement), + originHeight = origin.offsetHeight, + originWidth = origin.offsetWidth, + tooltipHeight = tooltip.offsetHeight, + tooltipWidth = tooltip.offsetWidth, + margin = this.options.margin; + + (this.xMovement = 0), (this.yMovement = 0); + + let targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop(); + let targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft(); + if (this.options.position === 'top') { + targetTop += -tooltipHeight - margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = -this.options.transitionMovement; + } else if (this.options.position === 'right') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += originWidth + margin; + this.xMovement = this.options.transitionMovement; + } else if (this.options.position === 'left') { + targetTop += originHeight / 2 - tooltipHeight / 2; + targetLeft += -tooltipWidth - margin; + this.xMovement = -this.options.transitionMovement; + } else { + targetTop += originHeight + margin; + targetLeft += originWidth / 2 - tooltipWidth / 2; + this.yMovement = this.options.transitionMovement; } - _repositionWithinScreen(x, y, width, height) { - const scrollLeft = M.getDocumentScrollLeft(); - const scrollTop = M.getDocumentScrollTop(); - let newX = x - scrollLeft; - let newY = y - scrollTop; - - const bounding: Bounding = { - left: newX, - top: newY, - width: width, - height: height - }; - const offset = this.options.margin + this.options.transitionMovement; - const edges = M.checkWithinContainer(document.body, bounding, offset); - - if (edges.left) { - newX = offset; - } else if (edges.right) { - newX -= newX + width - window.innerWidth; - } - if (edges.top) { - newY = offset; - } else if (edges.bottom) { - newY -= newY + height - window.innerHeight; - } - return { - x: newX + scrollLeft, - y: newY + scrollTop - }; - } + const newCoordinates = this._repositionWithinScreen( + targetLeft, + targetTop, + tooltipWidth, + tooltipHeight + ); - _animateIn() { - this._positionTooltip(); - this.tooltipEl.style.visibility = 'visible'; - anim.remove(this.tooltipEl); - anim({ - targets: this.tooltipEl, - opacity: this.options.opacity || 1, - translateX: this.xMovement, - translateY: this.yMovement, - duration: this.options.inDuration, - easing: 'easeOutCubic' - }); - } + tooltip.style.top = newCoordinates.y+'px'; + tooltip.style.left = newCoordinates.x+'px'; + } - _animateOut() { - anim.remove(this.tooltipEl); - anim({ - targets: this.tooltipEl, - opacity: 0, - translateX: 0, - translateY: 0, - duration: this.options.outDuration, - easing: 'easeOutCubic' - }); + _repositionWithinScreen(x, y, width, height) { + const scrollLeft = M.getDocumentScrollLeft(); + const scrollTop = M.getDocumentScrollTop(); + let newX = x - scrollLeft; + let newY = y - scrollTop; + + const bounding: Bounding = { + left: newX, + top: newY, + width: width, + height: height + }; + const offset = this.options.margin + this.options.transitionMovement; + const edges = M.checkWithinContainer(document.body, bounding, offset); + + if (edges.left) { + newX = offset; + } else if (edges.right) { + newX -= newX + width - window.innerWidth; } - - _handleMouseEnter() { - this.isHovered = true; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.open(false); + if (edges.top) { + newY = offset; + } else if (edges.bottom) { + newY -= newY + height - window.innerHeight; } + return { + x: newX + scrollLeft, + y: newY + scrollTop + }; + } - _handleMouseLeave() { - this.isHovered = false; - this.isFocused = false; // Allows close of tooltip when opened by focus. - this.close(); - } + _animateIn() { + this._positionTooltip(); + this.tooltipEl.style.visibility = 'visible'; + anim.remove(this.tooltipEl); + anim({ + targets: this.tooltipEl, + opacity: this.options.opacity || 1, + translateX: this.xMovement, + translateY: this.yMovement, + duration: this.options.inDuration, + easing: 'easeOutCubic' + }); + } - _handleFocus() { - if (M.tabPressed) { - this.isFocused = true; - this.open(false); - } - } + _animateOut() { + anim.remove(this.tooltipEl); + anim({ + targets: this.tooltipEl, + opacity: 0, + translateX: 0, + translateY: 0, + duration: this.options.outDuration, + easing: 'easeOutCubic' + }); + } - _handleBlur() { - this.isFocused = false; - this.close(); - } + _handleMouseEnter() { + this.isHovered = true; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.open(false); + } - _getAttributeOptions() { - const attributeOptions = {}; - const tooltipTextOption = this.el.getAttribute('data-tooltip'); - const positionOption = this.el.getAttribute('data-position'); - if (tooltipTextOption) { - (attributeOptions as any).text = tooltipTextOption; - } - if (positionOption) { - (attributeOptions as any).position = positionOption; - } - return attributeOptions; + _handleMouseLeave() { + this.isHovered = false; + this.isFocused = false; // Allows close of tooltip when opened by focus. + this.close(); + } + + _handleFocus() { + if (M.tabPressed) { + this.isFocused = true; + this.open(false); } } + _handleBlur() { + this.isFocused = false; + this.close(); + } + _getAttributeOptions() { + const attributeOptions = {}; + const tooltipTextOption = this.el.getAttribute('data-tooltip'); + const positionOption = this.el.getAttribute('data-position'); + if (tooltipTextOption) { + (attributeOptions as any).text = tooltipTextOption; + } + if (positionOption) { + (attributeOptions as any).position = positionOption; + } + return attributeOptions; + } +} diff --git a/src/waves.ts b/src/waves.ts index bde7f76223..6639054526 100644 --- a/src/waves.ts +++ b/src/waves.ts @@ -10,8 +10,8 @@ type Position = { } export class Waves { - - private static _offset(el) { + + private static _offset(el: HTMLElement) { const box = el.getBoundingClientRect(); const docElem = document.documentElement; return { @@ -19,24 +19,24 @@ export class Waves { left: box.left + window.pageXOffset - docElem.clientLeft }; } - + // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/ public static renderWaveEffect(targetElement: HTMLElement, position: Position|null = null, color: RGBColor|null = null): void { const isCentered = position === null; const duration = 500; - let animationFrame, animationStart; - const animationStep = function(timestamp) { + let animationFrame: number, animationStart: number; + const animationStep = function(timestamp: number) { if (!animationStart) { animationStart = timestamp; - } + } const frame = timestamp - animationStart; if (frame < duration) { const easing = (frame/duration) * (2 - (frame/duration)); const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`; const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${ 0.3 * (1-easing) })`; - const stop = 90 * easing + "%"; - targetElement.style.backgroundImage = "radial-gradient("+circle+", "+waveColor+" "+stop+", transparent "+stop+")"; + const stop = 90 * easing + "%"; + targetElement.style.backgroundImage = "radial-gradient("+circle+", "+waveColor+" "+stop+", transparent "+stop+")"; animationFrame = window.requestAnimationFrame(animationStep); } else { @@ -44,7 +44,7 @@ export class Waves { window.cancelAnimationFrame(animationFrame); } }; - animationFrame = window.requestAnimationFrame(animationStep); + animationFrame = window.requestAnimationFrame(animationStep); } static Init() { @@ -60,7 +60,7 @@ export class Waves { let color = null; if (el.classList.contains('waves-light')) color = {r:255, g:255, b:255}; - + Waves.renderWaveEffect(el, isCircular ? null : {x, y}, color); } }); From ff61c9f9fbf462e59e076894790a64caa27c82d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Fri, 9 Jun 2023 17:50:18 -0300 Subject: [PATCH 2/3] refactor(components): remove bound functions - Replaced event handlers by arrow expressions (class members); - Replaced calls to "bound function" to class property methods; - Removed declarations for "bound functions"; - Removed unused variables. --- src/autocomplete.ts | 67 ++++++++++++-------------------- src/buttons.ts | 37 +++++++----------- src/carousel.ts | 85 +++++++++++++++++------------------------ src/characterCounter.ts | 12 +++--- src/chips.ts | 32 ++++++---------- src/collapsible.ts | 18 ++++----- src/datepicker.ts | 60 +++++++++++------------------ src/dropdown.ts | 74 ++++++++++++++--------------------- src/materialbox.ts | 32 ++++++---------- src/modal.ts | 34 +++++++---------- src/parallax.ts | 20 +++------- src/range.ts | 68 ++++++++++++++------------------- src/scrollspy.ts | 19 ++++----- src/select.ts | 26 +++++-------- src/sidenav.ts | 62 ++++++++++++------------------ src/slider.ts | 46 +++++++++------------- src/tabs.ts | 18 ++++----- src/tapTarget.ts | 39 ++++++++----------- src/timepicker.ts | 80 +++++++++++++++++--------------------- src/tooltip.ts | 32 ++++++---------- 20 files changed, 336 insertions(+), 525 deletions(-) diff --git a/src/autocomplete.ts b/src/autocomplete.ts index 511ded0555..8ca593f9c7 100644 --- a/src/autocomplete.ts +++ b/src/autocomplete.ts @@ -32,15 +32,8 @@ export class Autocomplete extends Component { count: number; activeIndex: number; private oldVal: any; - private $inputField: any; private $active: HTMLElement|null; private _mousedown: boolean; - private _handleInputBlurBound: any; - private _handleInputKeyupAndFocusBound: any; - private _handleInputKeydownBound: any; - private _handleInputClickBound: any; - private _handleContainerMousedownAndTouchstartBound: any; - private _handleContainerMouseupAndTouchendBound: any; container: HTMLElement; dropdown: Dropdown; static _keydown: boolean; @@ -81,55 +74,45 @@ export class Autocomplete extends Component { } _setupEventHandlers() { - this._handleInputBlurBound = this._handleInputBlur.bind(this); - this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.bind(this); - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleContainerMousedownAndTouchstartBound = this._handleContainerMousedownAndTouchstart.bind( - this - ); - this._handleContainerMouseupAndTouchendBound = this._handleContainerMouseupAndTouchend.bind( - this - ); - this.el.addEventListener('blur', this._handleInputBlurBound); - this.el.addEventListener('keyup', this._handleInputKeyupAndFocusBound); - this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.el.addEventListener('click', this._handleInputClickBound); + this.el.addEventListener('blur', this._handleInputBlur); + this.el.addEventListener('keyup', this._handleInputKeyupAndFocus); + this.el.addEventListener('focus', this._handleInputKeyupAndFocus); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.el.addEventListener('click', this._handleInputClick); this.container.addEventListener( 'mousedown', - this._handleContainerMousedownAndTouchstartBound + this._handleContainerMousedownAndTouchstart ); - this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchendBound); + this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend); if (typeof window.ontouchstart !== 'undefined') { this.container.addEventListener( 'touchstart', - this._handleContainerMousedownAndTouchstartBound + this._handleContainerMousedownAndTouchstart ); - this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchendBound); + this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend); } } _removeEventHandlers() { - this.el.removeEventListener('blur', this._handleInputBlurBound); - this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound); - this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); - this.el.removeEventListener('click', this._handleInputClickBound); + this.el.removeEventListener('blur', this._handleInputBlur); + this.el.removeEventListener('keyup', this._handleInputKeyupAndFocus); + this.el.removeEventListener('focus', this._handleInputKeyupAndFocus); + this.el.removeEventListener('keydown', this._handleInputKeydown); + this.el.removeEventListener('click', this._handleInputClick); this.container.removeEventListener( 'mousedown', - this._handleContainerMousedownAndTouchstartBound + this._handleContainerMousedownAndTouchstart ); - this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchendBound); + this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend); if (typeof window.ontouchstart !== 'undefined') { this.container.removeEventListener( 'touchstart', - this._handleContainerMousedownAndTouchstartBound + this._handleContainerMousedownAndTouchstart ); this.container.removeEventListener( 'touchend', - this._handleContainerMouseupAndTouchendBound + this._handleContainerMouseupAndTouchend ); } } @@ -167,7 +150,7 @@ export class Autocomplete extends Component { if (label) this.el.after(label); // Sketchy removal of dropdown click handler - this.el.removeEventListener('click', this.dropdown._handleClickBound); + this.el.removeEventListener('click', this.dropdown._handleClick); // Set Value if already set in HTML if (this.el.value) this.selectOption(this.el.value); // Add StatusInfo @@ -182,14 +165,14 @@ export class Autocomplete extends Component { this.container.parentNode.removeChild(this.container); } - _handleInputBlur() { + _handleInputBlur = () => { if (!this._mousedown) { this.close(); this._resetAutocomplete(); } } - _handleInputKeyupAndFocus(e) { + _handleInputKeyupAndFocus = (e) => { if (e.type === 'keyup') Autocomplete._keydown = false; this.count = 0; const actualValue = this.el.value.toLowerCase(); @@ -213,7 +196,7 @@ export class Autocomplete extends Component { this.oldVal = actualValue; } - _handleInputKeydown(e) { + _handleInputKeydown = (e) => { Autocomplete._keydown = true; // Arrow keys and enter key usage const keyCode = e.keyCode; @@ -246,15 +229,15 @@ export class Autocomplete extends Component { } } - _handleInputClick(e) { + _handleInputClick = () => { this.open(); } - _handleContainerMousedownAndTouchstart(e) { + _handleContainerMousedownAndTouchstart = () => { this._mousedown = true; } - _handleContainerMouseupAndTouchend(e) { + _handleContainerMouseupAndTouchend = () => { this._mousedown = false; } diff --git a/src/buttons.ts b/src/buttons.ts index 424ad90efd..a11150df20 100644 --- a/src/buttons.ts +++ b/src/buttons.ts @@ -16,10 +16,6 @@ export class FloatingActionButton extends Component { private _floatingBtnsReverse: HTMLElement[]; offsetY: number; offsetX: number; - private _handleFABClickBound: any; - private _handleOpenBound: any; - private _handleCloseBound: any; - private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; btnBottom: number; btnLeft: number; btnWidth: number; @@ -69,28 +65,24 @@ export class FloatingActionButton extends Component { } _setupEventHandlers() { - this._handleFABClickBound = this._handleFABClick.bind(this); - this._handleOpenBound = this.open.bind(this); - this._handleCloseBound = this.close.bind(this); - if (this.options.hoverEnabled && !this.options.toolbarEnabled) { - this.el.addEventListener('mouseenter', this._handleOpenBound); - this.el.addEventListener('mouseleave', this._handleCloseBound); + this.el.addEventListener('mouseenter', this.open); + this.el.addEventListener('mouseleave', this.close); } else { - this.el.addEventListener('click', this._handleFABClickBound); + this.el.addEventListener('click', this._handleFABClick); } } _removeEventHandlers() { if (this.options.hoverEnabled && !this.options.toolbarEnabled) { - this.el.removeEventListener('mouseenter', this._handleOpenBound); - this.el.removeEventListener('mouseleave', this._handleCloseBound); + this.el.removeEventListener('mouseenter', this.open); + this.el.removeEventListener('mouseleave', this.close); } else { - this.el.removeEventListener('click', this._handleFABClickBound); + this.el.removeEventListener('click', this._handleFABClick); } } - _handleFABClick() { + _handleFABClick = () => { if (this.isOpen) { this.close(); } else { @@ -98,7 +90,7 @@ export class FloatingActionButton extends Component { } } - _handleDocumentClick(e) { + _handleDocumentClick = (e) => { const elem = e.target; if (elem !== this._menu) this.close; /* @@ -107,7 +99,7 @@ export class FloatingActionButton extends Component { }*/ } - open() { + open = () => { if (this.isOpen) return; if (this.options.toolbarEnabled) this._animateInToolbar(); @@ -116,11 +108,11 @@ export class FloatingActionButton extends Component { this.isOpen = true; } - close() { + close = () => { if (!this.isOpen) return; if (this.options.toolbarEnabled) { - window.removeEventListener('scroll', this._handleCloseBound, true); - document.body.removeEventListener('click', this._handleDocumentClickBound, true); + window.removeEventListener('scroll', this.close, true); + document.body.removeEventListener('click', this._handleDocumentClick, true); this._animateOutToolbar(); } else { @@ -217,9 +209,8 @@ export class FloatingActionButton extends Component { this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => a.style.opacity = '1'); // Scroll to close. - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - window.addEventListener('scroll', this._handleCloseBound, true); - document.body.addEventListener('click', this._handleDocumentClickBound, true); + window.addEventListener('scroll', this.close, true); + document.body.addEventListener('click', this._handleDocumentClick, true); }, 100); }, 0); } diff --git a/src/carousel.ts b/src/carousel.ts index 23962e6388..286aa1ca86 100644 --- a/src/carousel.ts +++ b/src/carousel.ts @@ -26,17 +26,9 @@ export class Carousel extends Component { itemWidth: any; itemHeight: any; dim: number; - _autoScrollBound: any; - _trackBound: any; _indicators: any; count: number; xform: string; - private _handleCarouselTapBound: any; - private _handleCarouselDragBound: any; - private _handleCarouselReleaseBound: any; - private _handleCarouselClickBound: any; - _handleIndicatorClickBound: any; - _handleThrottledResizeBound: any; verticalDragged: boolean; reference: any; referenceY: any; @@ -66,8 +58,6 @@ export class Carousel extends Component { this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; this.itemHeight = this.el.querySelector('.carousel-item').clientHeight; this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions. - this._autoScrollBound = this._autoScroll.bind(this); - this._trackBound = this._track.bind(this); // Full Width carousel setup if (this.options.fullWidth) { @@ -138,52 +128,47 @@ export class Carousel extends Component { } _setupEventHandlers() { - this._handleCarouselTapBound = this._handleCarouselTap.bind(this); - this._handleCarouselDragBound = this._handleCarouselDrag.bind(this); - this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this); - this._handleCarouselClickBound = this._handleCarouselClick.bind(this); if (typeof window.ontouchstart !== 'undefined') { - this.el.addEventListener('touchstart', this._handleCarouselTapBound); - this.el.addEventListener('touchmove', this._handleCarouselDragBound); - this.el.addEventListener('touchend', this._handleCarouselReleaseBound); - } - this.el.addEventListener('mousedown', this._handleCarouselTapBound); - this.el.addEventListener('mousemove', this._handleCarouselDragBound); - this.el.addEventListener('mouseup', this._handleCarouselReleaseBound); - this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound); - this.el.addEventListener('click', this._handleCarouselClickBound); + this.el.addEventListener('touchstart', this._handleCarouselTap); + this.el.addEventListener('touchmove', this._handleCarouselDrag); + this.el.addEventListener('touchend', this._handleCarouselRelease); + } + this.el.addEventListener('mousedown', this._handleCarouselTap); + this.el.addEventListener('mousemove', this._handleCarouselDrag); + this.el.addEventListener('mouseup', this._handleCarouselRelease); + this.el.addEventListener('mouseleave', this._handleCarouselRelease); + this.el.addEventListener('click', this._handleCarouselClick); if (this.showIndicators && this._indicators) { - this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this); this._indicators.querySelectorAll('.indicator-item').forEach((el) => { - el.addEventListener('click', this._handleIndicatorClickBound); + el.addEventListener('click', this._handleIndicatorClick); }); } // Resize - let throttledResize = M.throttle(this._handleResize, 200, null); - this._handleThrottledResizeBound = throttledResize.bind(this); - window.addEventListener('resize', this._handleThrottledResizeBound); + window.addEventListener('resize', this._handleThrottledResize); } _removeEventHandlers() { if (typeof window.ontouchstart !== 'undefined') { - this.el.removeEventListener('touchstart', this._handleCarouselTapBound); - this.el.removeEventListener('touchmove', this._handleCarouselDragBound); - this.el.removeEventListener('touchend', this._handleCarouselReleaseBound); - } - this.el.removeEventListener('mousedown', this._handleCarouselTapBound); - this.el.removeEventListener('mousemove', this._handleCarouselDragBound); - this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound); - this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound); - this.el.removeEventListener('click', this._handleCarouselClickBound); + this.el.removeEventListener('touchstart', this._handleCarouselTap); + this.el.removeEventListener('touchmove', this._handleCarouselDrag); + this.el.removeEventListener('touchend', this._handleCarouselRelease); + } + this.el.removeEventListener('mousedown', this._handleCarouselTap); + this.el.removeEventListener('mousemove', this._handleCarouselDrag); + this.el.removeEventListener('mouseup', this._handleCarouselRelease); + this.el.removeEventListener('mouseleave', this._handleCarouselRelease); + this.el.removeEventListener('click', this._handleCarouselClick); if (this.showIndicators && this._indicators) { this._indicators.querySelectorAll('.indicator-item').forEach((el) => { - el.removeEventListener('click', this._handleIndicatorClickBound); + el.removeEventListener('click', this._handleIndicatorClick); }); } - window.removeEventListener('resize', this._handleThrottledResizeBound); + window.removeEventListener('resize', this._handleThrottledResize); } - _handleCarouselTap(e) { + _handleThrottledResize = () => M.throttle(this._handleResize, 200, null); + + _handleCarouselTap = (e) => { // Fixes firefox draggable image bug if (e.type === 'mousedown' && (e.target).tagName === 'IMG') { e.preventDefault(); @@ -198,10 +183,10 @@ export class Carousel extends Component { this.frame = this.offset; this.timestamp = Date.now(); clearInterval(this.ticker); - this.ticker = setInterval(this._trackBound, 100); + this.ticker = setInterval(this._track, 100); } - _handleCarouselDrag(e) { + _handleCarouselDrag = (e) => { let x, y, delta, deltaY; if (this.pressed) { x = this._xpos(e); @@ -233,7 +218,7 @@ export class Carousel extends Component { } } - _handleCarouselRelease(e) { + _handleCarouselRelease = (e) => { if (this.pressed) { this.pressed = false; } else { @@ -256,7 +241,7 @@ export class Carousel extends Component { } this.amplitude = this.target - this.offset; this.timestamp = Date.now(); - requestAnimationFrame(this._autoScrollBound); + requestAnimationFrame(this._autoScroll); if (this.dragged) { e.preventDefault(); e.stopPropagation(); @@ -264,7 +249,7 @@ export class Carousel extends Component { return false; } - _handleCarouselClick(e) { + _handleCarouselClick = (e) => { // Disable clicks if carousel was dragged. if (this.dragged) { e.preventDefault(); @@ -294,7 +279,7 @@ export class Carousel extends Component { } } - _handleIndicatorClick(e: Event) { + _handleIndicatorClick = (e: Event) => { e.stopPropagation(); const indicator = (e.target).closest('.indicator-item'); if (indicator) { @@ -376,7 +361,7 @@ export class Carousel extends Component { : x; } - _track() { + _track = () => { let now, elapsed, delta, v; now = Date.now(); elapsed = now - this.timestamp; @@ -387,14 +372,14 @@ export class Carousel extends Component { this.velocity = 0.8 * v + 0.2 * this.velocity; } - _autoScroll() { + _autoScroll = () => { let elapsed, delta; if (this.amplitude) { elapsed = Date.now() - this.timestamp; delta = this.amplitude * Math.exp(-elapsed / this.options.duration); if (delta > 2 || delta < -2) { this._scroll(this.target - delta); - requestAnimationFrame(this._autoScrollBound); + requestAnimationFrame(this._autoScroll); } else { this._scroll(this.target); } @@ -566,7 +551,7 @@ export class Carousel extends Component { if (this.offset !== this.target) { this.amplitude = this.target - this.offset; this.timestamp = Date.now(); - requestAnimationFrame(this._autoScrollBound); + requestAnimationFrame(this._autoScroll); } } diff --git a/src/characterCounter.ts b/src/characterCounter.ts index 421b664ca0..029fd11290 100644 --- a/src/characterCounter.ts +++ b/src/characterCounter.ts @@ -5,7 +5,6 @@ let _defaults = {}; export class CharacterCounter extends Component { isInvalid: boolean; isValidLength: boolean; - private _handleUpdateCounterBound: any; counterEl: HTMLSpanElement; constructor(el: Element, options: Object) { @@ -38,14 +37,13 @@ export class CharacterCounter extends Component { } _setupEventHandlers() { - this._handleUpdateCounterBound = this.updateCounter.bind(this); - this.el.addEventListener('focus', this._handleUpdateCounterBound, true); - this.el.addEventListener('input', this._handleUpdateCounterBound, true); + this.el.addEventListener('focus', this.updateCounter, true); + this.el.addEventListener('input', this.updateCounter, true); } _removeEventHandlers() { - this.el.removeEventListener('focus', this._handleUpdateCounterBound, true); - this.el.removeEventListener('input', this._handleUpdateCounterBound, true); + this.el.removeEventListener('focus', this.updateCounter, true); + this.el.removeEventListener('input', this.updateCounter, true); } _setupCounter() { @@ -61,7 +59,7 @@ export class CharacterCounter extends Component { this.counterEl.remove(); } - updateCounter() { + updateCounter = () => { let maxLength = parseInt(this.el.getAttribute('data-length')), actualLength = (this.el as HTMLInputElement).value.length; diff --git a/src/chips.ts b/src/chips.ts index 340737c05f..e9c5509a6a 100644 --- a/src/chips.ts +++ b/src/chips.ts @@ -33,10 +33,6 @@ export class Chips extends Component { _input: HTMLInputElement; _label: any; _chips: HTMLElement[]; - private _handleChipClickBound: any; - private _handleInputKeydownBound: any; - private _handleInputFocusBound: any; - private _handleInputBlurBound: any; static _keydown: boolean; private _selectedChip: any; @@ -92,30 +88,26 @@ export class Chips extends Component { } _setupEventHandlers() { - this._handleChipClickBound = this._handleChipClick.bind(this); - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputFocusBound = this._handleInputFocus.bind(this); - this._handleInputBlurBound = this._handleInputBlur.bind(this); - this.el.addEventListener('click', this._handleChipClickBound); + this.el.addEventListener('click', this._handleChipClick); document.addEventListener('keydown', Chips._handleChipsKeydown); document.addEventListener('keyup', Chips._handleChipsKeyup); this.el.addEventListener('blur', Chips._handleChipsBlur, true); - this._input.addEventListener('focus', this._handleInputFocusBound); - this._input.addEventListener('blur', this._handleInputBlurBound); - this._input.addEventListener('keydown', this._handleInputKeydownBound); + this._input.addEventListener('focus', this._handleInputFocus); + this._input.addEventListener('blur', this._handleInputBlur); + this._input.addEventListener('keydown', this._handleInputKeydown); } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleChipClickBound); + this.el.removeEventListener('click', this._handleChipClick); document.removeEventListener('keydown', Chips._handleChipsKeydown); document.removeEventListener('keyup', Chips._handleChipsKeyup); this.el.removeEventListener('blur', Chips._handleChipsBlur, true); - this._input.removeEventListener('focus', this._handleInputFocusBound); - this._input.removeEventListener('blur', this._handleInputBlurBound); - this._input.removeEventListener('keydown', this._handleInputKeydownBound); + this._input.removeEventListener('focus', this._handleInputFocus); + this._input.removeEventListener('blur', this._handleInputBlur); + this._input.removeEventListener('keydown', this._handleInputKeydown); } - _handleChipClick(e) { + _handleChipClick = (e) => { const _chip = (e.target).closest('.chip'); const clickedClose = (e.target).classList.contains('close'); if (_chip) { @@ -192,15 +184,15 @@ export class Chips extends Component { } } - _handleInputFocus() { + _handleInputFocus = () => { this.el.classList.add('focus'); } - _handleInputBlur() { + _handleInputBlur = () => { this.el.classList.remove('focus'); } - _handleInputKeydown(e) { + _handleInputKeydown = (e) => { Chips._keydown = true; // enter if (e.keyCode === 13) { diff --git a/src/collapsible.ts b/src/collapsible.ts index 40c9a7f681..f744492c0b 100644 --- a/src/collapsible.ts +++ b/src/collapsible.ts @@ -13,8 +13,6 @@ const _defaults = { export class Collapsible extends Component { private _headers: HTMLElement[]; - private _handleCollapsibleClickBound: any; - private _handleCollapsibleKeydownBound: any; constructor(el, options) { super(Collapsible, el, options); @@ -52,18 +50,16 @@ export class Collapsible extends Component { } _setupEventHandlers() { - this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this); - this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this); - this.el.addEventListener('click', this._handleCollapsibleClickBound); - this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydownBound)); + this.el.addEventListener('click', this._handleCollapsibleClick); + this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydown)); } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleCollapsibleClickBound); - this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydownBound)); + this.el.removeEventListener('click', this._handleCollapsibleClick); + this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydown)); } - _handleCollapsibleClick(e) { + _handleCollapsibleClick = (e) => { const header = e.target.closest('.collapsible-header'); if (e.target && header) { const collapsible = header.closest('.collapsible'); @@ -80,9 +76,9 @@ export class Collapsible extends Component { } } - _handleCollapsibleKeydown(e) { + _handleCollapsibleKeydown = (e) => { if (e.keyCode === 13) { - this._handleCollapsibleClickBound(e); + this._handleCollapsibleClick(e); } } diff --git a/src/datepicker.ts b/src/datepicker.ts index e12ce9d6d9..411c190c90 100644 --- a/src/datepicker.ts +++ b/src/datepicker.ts @@ -105,13 +105,6 @@ export class Datepicker extends Component { calendars: any; private _y: any; private _m: any; - private _handleInputKeydownBound: any; - private _handleInputClickBound: any; - private _handleInputChangeBound: any; - private _handleCalendarClickBound: any; - private _finishSelectionBound: any; - private _closeBound: any; - private _handleClearClickBound: any; static _template: string; constructor(el, options) { @@ -668,8 +661,8 @@ export class Datepicker extends Component { }); // Add change handlers for select - yearSelect.addEventListener('change', this._handleYearChange.bind(this)); - monthSelect.addEventListener('change', this._handleMonthChange.bind(this)); + yearSelect.addEventListener('change', () => this._handleYearChange); + monthSelect.addEventListener('change', () => this._handleMonthChange); if (typeof this.options.onDraw === 'function') { this.options.onDraw(this); @@ -677,24 +670,15 @@ export class Datepicker extends Component { } _setupEventHandlers() { - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleInputChangeBound = this._handleInputChange.bind(this); - this._handleCalendarClickBound = this._handleCalendarClick.bind(this); - this._finishSelectionBound = this._finishSelection.bind(this); - this._handleMonthChange = this._handleMonthChange.bind(this); - this._closeBound = this.close.bind(this); - - this.el.addEventListener('click', this._handleInputClickBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.el.addEventListener('change', this._handleInputChangeBound); - this.calendarEl.addEventListener('click', this._handleCalendarClickBound); - this.doneBtn.addEventListener('click', this._finishSelectionBound); - this.cancelBtn.addEventListener('click', this._closeBound); + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.el.addEventListener('change', this._handleInputChange); + this.calendarEl.addEventListener('click', this._handleCalendarClick); + this.doneBtn.addEventListener('click', this._finishSelection); + this.cancelBtn.addEventListener('click', this.close); if (this.options.showClearBtn) { - this._handleClearClickBound = this._handleClearClick.bind(this); - this.clearBtn.addEventListener('click', this._handleClearClickBound); + this.clearBtn.addEventListener('click', this._handleClearClick); } } @@ -749,24 +733,24 @@ export class Datepicker extends Component { } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClickBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); - this.el.removeEventListener('change', this._handleInputChangeBound); - this.calendarEl.removeEventListener('click', this._handleCalendarClickBound); + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); + this.el.removeEventListener('change', this._handleInputChange); + this.calendarEl.removeEventListener('click', this._handleCalendarClick); } - _handleInputClick() { + _handleInputClick = () => { this.open(); } - _handleInputKeydown(e) { + _handleInputKeydown = (e) => { if (e.which === M.keys.ENTER) { e.preventDefault(); this.open(); } } - _handleCalendarClick(e) { + _handleCalendarClick = (e) => { if (!this.isOpen) return; const target = (e.target); if (!target.classList.contains('is-disabled')) { @@ -795,17 +779,17 @@ export class Datepicker extends Component { } } - _handleClearClick() { + _handleClearClick = () => { this.date = null; this.setInputValue(); this.close(); } - _handleMonthChange(e) { + _handleMonthChange = (e) => { this.gotoMonth(e.target.value); } - _handleYearChange(e) { + _handleYearChange = (e) => { this.gotoYear(e.target.value); } @@ -825,7 +809,7 @@ export class Datepicker extends Component { } } - _handleInputChange(e: Event) { + _handleInputChange = (e: Event) => { let date; // Prevent change event from being fired when triggered by the plugin if (e['detail']?.firedBy === this) return; @@ -847,7 +831,7 @@ export class Datepicker extends Component { } // Set input value to the selected date and close Datepicker - _finishSelection() { + _finishSelection = () => { this.setInputValue(); this.close(); } @@ -863,7 +847,7 @@ export class Datepicker extends Component { return this; } - close() { + close = () => { if (!this.isOpen) return; this.isOpen = false; if (typeof this.options.onClose === 'function') { diff --git a/src/dropdown.ts b/src/dropdown.ts index 63147a75b4..dc3ba458e3 100644 --- a/src/dropdown.ts +++ b/src/dropdown.ts @@ -29,15 +29,6 @@ export class Dropdown extends Component { isTouchMoving: boolean; focusedIndex: number; filterQuery: any[]; - private _resetFilterQueryBound: any; - private _handleDocumentClickBound: any; - private _handleDocumentTouchmoveBound: any; - private _handleDropdownClickBound: any; - private _handleDropdownKeydownBound: any; - private _handleTriggerKeydownBound: any; - private _handleMouseEnterBound: any; - private _handleMouseLeaveBound: any; - _handleClickBound: any; filterTimeout: NodeJS.Timeout; constructor(el, options) { @@ -58,12 +49,6 @@ export class Dropdown extends Component { // Move dropdown-content after dropdown-trigger this._moveDropdown(); this._makeDropdownFocusable(); - this._resetFilterQueryBound = this._resetFilterQuery.bind(this); - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - this._handleDocumentTouchmoveBound = this._handleDocumentTouchmove.bind(this); - this._handleDropdownClickBound = this._handleDropdownClick.bind(this); - this._handleDropdownKeydownBound = this._handleDropdownKeydown.bind(this); - this._handleTriggerKeydownBound = this._handleTriggerKeydown.bind(this); this._setupEventHandlers(); } @@ -89,59 +74,56 @@ export class Dropdown extends Component { _setupEventHandlers() { // Trigger keydown handler - this.el.addEventListener('keydown', this._handleTriggerKeydownBound); + this.el.addEventListener('keydown', this._handleTriggerKeydown); // Item click handler - this.dropdownEl?.addEventListener('click', this._handleDropdownClickBound); + this.dropdownEl?.addEventListener('click', this._handleDropdownClick); // Hover event handlers if (this.options.hover) { - this._handleMouseEnterBound = this._handleMouseEnter.bind(this); - this.el.addEventListener('mouseenter', this._handleMouseEnterBound); - this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); - this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); - this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeaveBound); + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave); // Click event handlers } else { - this._handleClickBound = this._handleClick.bind(this); - this.el.addEventListener('click', this._handleClickBound); + this.el.addEventListener('click', this._handleClick); } } _removeEventHandlers() { - this.el.removeEventListener('keydown', this._handleTriggerKeydownBound); - this.dropdownEl.removeEventListener('click', this._handleDropdownClickBound); + this.el.removeEventListener('keydown', this._handleTriggerKeydown); + this.dropdownEl.removeEventListener('click', this._handleDropdownClick); if (this.options.hover) { - this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); - this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); - this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeaveBound); + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave); } else { - this.el.removeEventListener('click', this._handleClickBound); + this.el.removeEventListener('click', this._handleClick); } } _setupTemporaryEventHandlers() { // Use capture phase event handler to prevent click - document.body.addEventListener('click', this._handleDocumentClickBound, true); - document.body.addEventListener('touchmove', this._handleDocumentTouchmoveBound); - this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydownBound); + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown); } _removeTemporaryEventHandlers() { // Use capture phase event handler to prevent click - document.body.removeEventListener('click', this._handleDocumentClickBound, true); - document.body.removeEventListener('touchmove', this._handleDocumentTouchmoveBound); - this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydownBound); + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('touchmove', this._handleDocumentTouchmove); + this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown); } - _handleClick(e) { + _handleClick = (e) => { e.preventDefault(); this.open(); } - _handleMouseEnter() { + _handleMouseEnter = () => { this.open(); } - _handleMouseLeave(e) { + _handleMouseLeave = (e) => { const toEl = e.toElement || e.relatedTarget; const leaveToDropdownContent = !!toEl.closest('.dropdown-content'); let leaveToActiveDropdownTrigger = false; @@ -159,7 +141,7 @@ export class Dropdown extends Component { } } - _handleDocumentClick(e) { + _handleDocumentClick = (e) => { const target = e.target; if ( this.options.closeOnClick && @@ -182,7 +164,7 @@ export class Dropdown extends Component { this.isTouchMoving = false; } - _handleTriggerKeydown(e) { + _handleTriggerKeydown = (e) => { // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ENTER) && !this.isOpen) { e.preventDefault(); @@ -190,14 +172,14 @@ export class Dropdown extends Component { } } - _handleDocumentTouchmove(e) { + _handleDocumentTouchmove = (e) => { const target = e.target; if (target.closest('.dropdown-content')) { this.isTouchMoving = true; } } - _handleDropdownClick(e) { + _handleDropdownClick = (e) => { // onItemClick callback if (typeof this.options.onItemClick === 'function') { const itemEl = e.target.closest('li'); @@ -205,7 +187,7 @@ export class Dropdown extends Component { } } - _handleDropdownKeydown(e) { + _handleDropdownKeydown = (e) => { if (e.which === M.keys.TAB) { e.preventDefault(); this.close(); @@ -269,10 +251,10 @@ export class Dropdown extends Component { this._focusFocusedItem(); } } - this.filterTimeout = setTimeout(this._resetFilterQueryBound, 1000); + this.filterTimeout = setTimeout(this._resetFilterQuery, 1000); } - _resetFilterQuery() { + _resetFilterQuery = () => { this.filterQuery = []; } diff --git a/src/materialbox.ts b/src/materialbox.ts index bfd2cbedb2..23e4a30b8f 100644 --- a/src/materialbox.ts +++ b/src/materialbox.ts @@ -29,10 +29,6 @@ export class Materialbox extends Component { private attrHeight: string; private _overlay: HTMLElement; private _photoCaption: HTMLElement; - private _handleMaterialboxClickBound: any; - private _handleWindowScrollBound: any; - private _handleWindowResizeBound: any; - private _handleWindowEscapeBound: any; constructor(el, options) { super(Materialbox, el, options); @@ -75,15 +71,14 @@ export class Materialbox extends Component { } _setupEventHandlers() { - this._handleMaterialboxClickBound = this._handleMaterialboxClick.bind(this); - this.el.addEventListener('click', this._handleMaterialboxClickBound); + this.el.addEventListener('click', this._handleMaterialboxClick); } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleMaterialboxClickBound); + this.el.removeEventListener('click', this._handleMaterialboxClick); } - _handleMaterialboxClick(e) { + _handleMaterialboxClick = () => { // If already modal, return to original if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) this.close(); @@ -91,15 +86,15 @@ export class Materialbox extends Component { this.open(); } - _handleWindowScroll() { + _handleWindowScroll = () => { if (this.overlayActive) this.close(); } - _handleWindowResize() { + _handleWindowResize = () => { if (this.overlayActive) this.close(); } - _handleWindowEscape(e) { + _handleWindowEscape = (e) => { // ESC key if (e.keyCode === 27 && this.doneAnimating && this.overlayActive) this.close(); } @@ -299,12 +294,9 @@ export class Materialbox extends Component { this._animateImageIn(); // Handle Exit triggers - this._handleWindowScrollBound = this._handleWindowScroll.bind(this); - this._handleWindowResizeBound = this._handleWindowResize.bind(this); - this._handleWindowEscapeBound = this._handleWindowEscape.bind(this); - window.addEventListener('scroll', this._handleWindowScrollBound); - window.addEventListener('resize', this._handleWindowResizeBound); - window.addEventListener('keyup', this._handleWindowEscapeBound); + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleWindowResize); + window.addEventListener('keyup', this._handleWindowEscape); } close() { @@ -318,9 +310,9 @@ export class Materialbox extends Component { anim.remove(this._overlay); if (this.caption !== '') anim.remove(this._photoCaption); // disable exit handlers - window.removeEventListener('scroll', this._handleWindowScrollBound); - window.removeEventListener('resize', this._handleWindowResizeBound); - window.removeEventListener('keyup', this._handleWindowEscapeBound); + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleWindowResize); + window.removeEventListener('keyup', this._handleWindowEscape); anim({ targets: this._overlay, opacity: 0, diff --git a/src/modal.ts b/src/modal.ts index 24be1e5b3c..afcbc6b9d2 100644 --- a/src/modal.ts +++ b/src/modal.ts @@ -25,10 +25,6 @@ export class Modal extends Component { private _openingTrigger: any; private _overlay: HTMLElement; private _nthModalOpened: number; - private _handleOverlayClickBound: any; - private _handleModalCloseClickBound: any; - private _handleKeydownBound: any; - private _handleFocusBound: any; constructor(el, options) { super(Modal, el, options); @@ -67,24 +63,22 @@ export class Modal extends Component { } _setupEventHandlers() { - this._handleOverlayClickBound = this._handleOverlayClick.bind(this); - this._handleModalCloseClickBound = this._handleModalCloseClick.bind(this); if (Modal._count === 1) { document.body.addEventListener('click', this._handleTriggerClick); } - this._overlay.addEventListener('click', this._handleOverlayClickBound); - this.el.addEventListener('click', this._handleModalCloseClickBound); + this._overlay.addEventListener('click', this._handleOverlayClick); + this.el.addEventListener('click', this._handleModalCloseClick); } _removeEventHandlers() { if (Modal._count === 0) { document.body.removeEventListener('click', this._handleTriggerClick); } - this._overlay.removeEventListener('click', this._handleOverlayClickBound); - this.el.removeEventListener('click', this._handleModalCloseClickBound); + this._overlay.removeEventListener('click', this._handleOverlayClick); + this.el.removeEventListener('click', this._handleModalCloseClick); } - _handleTriggerClick(e) { + _handleTriggerClick = (e) => { const trigger = e.target.closest('.modal-trigger'); if (!trigger) return; const modalId = M.getIdFromTrigger(trigger); @@ -93,21 +87,21 @@ export class Modal extends Component { e.preventDefault(); } - _handleOverlayClick() { + _handleOverlayClick = () => { if (this.options.dismissible) this.close(); } - _handleModalCloseClick(e) { + _handleModalCloseClick = (e) => { const closeTrigger = e.target.closest('.modal-close'); if (closeTrigger) this.close(); } - _handleKeydown(e) { + _handleKeydown = (e) => { // ESC key if (e.keyCode === 27 && this.options.dismissible) this.close(); } - _handleFocus(e) { + _handleFocus = (e) => { // Only trap focus if this modal is the last model opened (prevents loops in nested modals). if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) { this.el.focus(); @@ -212,10 +206,8 @@ export class Modal extends Component { this.el.classList.add('open'); this.el.insertAdjacentElement('afterend', this._overlay); if (this.options.dismissible) { - this._handleKeydownBound = this._handleKeydown.bind(this); - this._handleFocusBound = this._handleFocus.bind(this); - document.addEventListener('keydown', this._handleKeydownBound); - document.addEventListener('focus', this._handleFocusBound, true); + document.addEventListener('keydown', this._handleKeydown); + document.addEventListener('focus', this._handleFocus, true); } anim.remove(this.el); anim.remove(this._overlay); @@ -240,8 +232,8 @@ export class Modal extends Component { document.body.style.overflow = ''; } if (this.options.dismissible) { - document.removeEventListener('keydown', this._handleKeydownBound); - document.removeEventListener('focus', this._handleFocusBound, true); + document.removeEventListener('keydown', this._handleKeydown); + document.removeEventListener('focus', this._handleFocus, true); } anim.remove(this.el); anim.remove(this._overlay); diff --git a/src/parallax.ts b/src/parallax.ts index a246b24f9d..b8fcd85033 100644 --- a/src/parallax.ts +++ b/src/parallax.ts @@ -8,10 +8,9 @@ let _defaults = { export class Parallax extends Component { private _enabled: boolean; private _img: HTMLImageElement; - private _handleImageLoadBound: any; - static _parallaxes: any; - static _handleScrollThrottled: any; - static _handleWindowResizeThrottled: () => any; + static _parallaxes : Parallax[] = []; + static _handleScrollThrottled = M.throttle(Parallax._handleScroll, 5); + static _handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5); constructor(el, options) { super(Parallax, el, options); @@ -61,18 +60,15 @@ export class Parallax extends Component { } _setupEventHandlers() { - this._handleImageLoadBound = this._handleImageLoad.bind(this); - this._img.addEventListener('load', this._handleImageLoadBound); + this._img.addEventListener('load', this._handleImageLoad); if (Parallax._parallaxes.length === 0) { - Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5); window.addEventListener('scroll', Parallax._handleScrollThrottled); - Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5); window.addEventListener('resize', Parallax._handleWindowResizeThrottled); } } _removeEventHandlers() { - this._img.removeEventListener('load', this._handleImageLoadBound); + this._img.removeEventListener('load', this._handleImageLoad); if (Parallax._parallaxes.length === 0) { window.removeEventListener('scroll', Parallax._handleScrollThrottled); window.removeEventListener('resize', Parallax._handleWindowResizeThrottled); @@ -83,7 +79,7 @@ export class Parallax extends Component { this._img.style.opacity = '1'; } - _handleImageLoad() { + _handleImageLoad = () => { this._updateParallax(); } @@ -115,8 +111,4 @@ export class Parallax extends Component { this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`; } } - - static { - Parallax._parallaxes = []; - } } diff --git a/src/range.ts b/src/range.ts index d6397aa153..7da90015d5 100644 --- a/src/range.ts +++ b/src/range.ts @@ -8,11 +8,6 @@ const _defaults = {}; export class Range extends Component { el: HTMLInputElement; private _mousedown: boolean; - private _handleRangeChangeBound: any; - private _handleRangeMousedownTouchstartBound: any; - private _handleRangeInputMousemoveTouchmoveBound: any; - private _handleRangeMouseupTouchendBound: any; - private _handleRangeBlurMouseoutTouchleaveBound: any; value: HTMLElement; thumb: HTMLElement; @@ -45,39 +40,34 @@ export class Range extends Component { } _setupEventHandlers() { - this._handleRangeChangeBound = this._handleRangeChange.bind(this); - this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this); - this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(this); - this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this); - this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(this); - this.el.addEventListener('change', this._handleRangeChangeBound); - this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound); - this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound); - this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmoveBound); - this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound); - this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound); - this.el.addEventListener('mouseup', this._handleRangeMouseupTouchendBound); - this.el.addEventListener('touchend', this._handleRangeMouseupTouchendBound); - this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound); - this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound); - this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound); + this.el.addEventListener('change', this._handleRangeChange); + this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.addEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); } _removeEventHandlers() { - this.el.removeEventListener('change', this._handleRangeChangeBound); - this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound); - this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound); - this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmoveBound); - this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound); - this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound); - this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchendBound); - this.el.removeEventListener('touchend', this._handleRangeMouseupTouchendBound); - this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound); - this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound); - this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound); - } - - _handleRangeChange() { + this.el.removeEventListener('change', this._handleRangeChange); + this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart); + this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove); + this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend); + this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend); + this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave); + this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave); + } + + _handleRangeChange = () => { this.value.innerHTML = this.el.value; if (!this.thumb.classList.contains('active')) { this._showRangeBubble(); @@ -87,7 +77,7 @@ export class Range extends Component { this.thumb.style.left = offsetLeft+'px'; } - _handleRangeMousedownTouchstart(e) { + _handleRangeMousedownTouchstart = (e) => { // Set indicator value this.value.innerHTML = this.el.value; this._mousedown = true; @@ -102,7 +92,7 @@ export class Range extends Component { } } - _handleRangeInputMousemoveTouchmove() { + _handleRangeInputMousemoveTouchmove = () => { if (this._mousedown) { if (!this.thumb.classList.contains('active')) { this._showRangeBubble(); @@ -114,12 +104,12 @@ export class Range extends Component { } } - _handleRangeMouseupTouchend() { + _handleRangeMouseupTouchend = () => { this._mousedown = false; this.el.classList.remove('active'); } - _handleRangeBlurMouseoutTouchleave() { + _handleRangeBlurMouseoutTouchleave = () => { if (!this._mousedown) { const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft); const marginLeft = 7 + paddingLeft + 'px'; diff --git a/src/scrollspy.ts b/src/scrollspy.ts index 0ed0104c48..e004fc7cac 100644 --- a/src/scrollspy.ts +++ b/src/scrollspy.ts @@ -18,8 +18,6 @@ export class ScrollSpy extends Component { id: any; static _elementsInView: ScrollSpy[]; static _visibleElements: any[]; - private _handleThrottledResizeBound: any; - private _handleWindowScrollBound: any; static _ticks: number; constructor(el, options) { @@ -60,25 +58,24 @@ export class ScrollSpy extends Component { } _setupEventHandlers() { - let throttledResize = M.throttle(this._handleWindowScroll, 200); - this._handleThrottledResizeBound = throttledResize.bind(this); - this._handleWindowScrollBound = this._handleWindowScroll.bind(this); if (ScrollSpy._count === 1) { - window.addEventListener('scroll', this._handleWindowScrollBound); - window.addEventListener('resize', this._handleThrottledResizeBound); + window.addEventListener('scroll', this._handleWindowScroll); + window.addEventListener('resize', this._handleThrottledResize); document.body.addEventListener('click', this._handleTriggerClick); } } _removeEventHandlers() { if (ScrollSpy._count === 0) { - window.removeEventListener('scroll', this._handleWindowScrollBound); - window.removeEventListener('resize', this._handleThrottledResizeBound); + window.removeEventListener('scroll', this._handleWindowScroll); + window.removeEventListener('resize', this._handleThrottledResize); document.body.removeEventListener('click', this._handleTriggerClick); } } - _handleTriggerClick(e) { + _handleThrottledResize = () => M.throttle(this._handleWindowScroll, 200); + + _handleTriggerClick = (e) => { const trigger = e.target; for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) { const scrollspy = ScrollSpy._elements[i]; @@ -100,7 +97,7 @@ export class ScrollSpy extends Component { } } - _handleWindowScroll() { + _handleWindowScroll = () => { // unique tick id ScrollSpy._ticks++; diff --git a/src/select.ts b/src/select.ts index 1b63a4a22f..3829db54ca 100644 --- a/src/select.ts +++ b/src/select.ts @@ -23,9 +23,6 @@ export class FormSelect extends Component { dropdown: Dropdown; wrapper: HTMLDivElement; selectOptions: HTMLElement[]; - private _handleSelectChangeBound: any; - private _handleOptionClickBound: any; - private _handleInputClickBound: any; constructor(el, options) { super(FormSelect, el, options); @@ -63,32 +60,29 @@ export class FormSelect extends Component { } _setupEventHandlers() { - this._handleSelectChangeBound = this._handleSelectChange.bind(this); - this._handleOptionClickBound = this._handleOptionClick.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => { - el.addEventListener('click', this._handleOptionClickBound); + el.addEventListener('click', this._handleOptionClick); el.addEventListener('keydown', (e: KeyboardEvent) => { - if (e.key === " " || e.key === "Enter") this._handleOptionClickBound(e); + if (e.key === " " || e.key === "Enter") this._handleOptionClick(e); }); }); - this.el.addEventListener('change', this._handleSelectChangeBound); - this.input.addEventListener('click', this._handleInputClickBound); + this.el.addEventListener('change', this._handleSelectChange); + this.input.addEventListener('click', this._handleInputClick); } _removeEventHandlers() { this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => { - el.removeEventListener('click', this._handleOptionClickBound); + el.removeEventListener('click', this._handleOptionClick); }); - this.el.removeEventListener('change', this._handleSelectChangeBound); - this.input.removeEventListener('click', this._handleInputClickBound); + this.el.removeEventListener('change', this._handleSelectChange); + this.input.removeEventListener('click', this._handleInputClick); } - _handleSelectChange(e) { + _handleSelectChange = () => { this._setValueToInput(); } - _handleOptionClick(e) { + _handleOptionClick = (e) => { e.preventDefault(); const virtualOption = e.target.closest('li'); this._selectOptionElement(virtualOption); @@ -129,7 +123,7 @@ export class FormSelect extends Component { if (!this.isMultiple) this.dropdown.close(); } - _handleInputClick() { + _handleInputClick = () => { if (this.dropdown && this.dropdown.isOpen) { this._setValueToInput(); this._setSelectedStates(); diff --git a/src/sidenav.ts b/src/sidenav.ts index 631a3ad282..c93183476d 100644 --- a/src/sidenav.ts +++ b/src/sidenav.ts @@ -25,13 +25,6 @@ export class Sidenav extends Component { static _sidenavs: any; private _overlay: HTMLElement; dragTarget: Element; - private _closeBound: any; - private _handleDragTargetDragBound: any; - private _handleDragTargetReleaseBound: any; - private _handleCloseDragBound: any; - private _handleCloseReleaseBound: any; - private _handleCloseTriggerClickBound: any; - private _handleWindowResizeBound: any; private _startingXpos: number; private _xPos: number; private _time: number; @@ -89,9 +82,8 @@ export class Sidenav extends Component { _createOverlay() { this._overlay = document.createElement('div'); - this._closeBound = this.close.bind(this); this._overlay.classList.add('sidenav-overlay'); - this._overlay.addEventListener('click', this._closeBound); + this._overlay.addEventListener('click', this.close); document.body.appendChild(this._overlay); } @@ -99,23 +91,17 @@ export class Sidenav extends Component { if (Sidenav._sidenavs.length === 0) { document.body.addEventListener('click', this._handleTriggerClick); } - this._handleDragTargetDragBound = this._handleDragTargetDrag.bind(this); - this._handleDragTargetReleaseBound = this._handleDragTargetRelease.bind(this); - this._handleCloseDragBound = this._handleCloseDrag.bind(this); - this._handleCloseReleaseBound = this._handleCloseRelease.bind(this); - this._handleCloseTriggerClickBound = this._handleCloseTriggerClick.bind(this); var passiveIfSupported: boolean = null; - this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound, passiveIfSupported); - this.dragTarget.addEventListener('touchend', this._handleDragTargetReleaseBound); - this._overlay.addEventListener('touchmove', this._handleCloseDragBound, passiveIfSupported); - this._overlay.addEventListener('touchend', this._handleCloseReleaseBound); - this.el.addEventListener('touchmove', this._handleCloseDragBound, passiveIfSupported); - this.el.addEventListener('touchend', this._handleCloseReleaseBound); - this.el.addEventListener('click', this._handleCloseTriggerClickBound); + this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported); + this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease); + this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this._overlay.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported); + this.el.addEventListener('touchend', this._handleCloseRelease); + this.el.addEventListener('click', this._handleCloseTriggerClick); // Add resize for side nav fixed if (this.isFixed) { - this._handleWindowResizeBound = this._handleWindowResize.bind(this); - window.addEventListener('resize', this._handleWindowResizeBound); + window.addEventListener('resize', this._handleWindowResize); } } @@ -123,17 +109,17 @@ export class Sidenav extends Component { if (Sidenav._sidenavs.length === 1) { document.body.removeEventListener('click', this._handleTriggerClick); } - this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDragBound); - this.dragTarget.removeEventListener('touchend', this._handleDragTargetReleaseBound); - this._overlay.removeEventListener('touchmove', this._handleCloseDragBound); - this._overlay.removeEventListener('touchend', this._handleCloseReleaseBound); - this.el.removeEventListener('touchmove', this._handleCloseDragBound); - this.el.removeEventListener('touchend', this._handleCloseReleaseBound); - this.el.removeEventListener('click', this._handleCloseTriggerClickBound); + this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag); + this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease); + this._overlay.removeEventListener('touchmove', this._handleCloseDrag); + this._overlay.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('touchmove', this._handleCloseDrag); + this.el.removeEventListener('touchend', this._handleCloseRelease); + this.el.removeEventListener('click', this._handleCloseTriggerClick); // Remove resize for side nav fixed if (this.isFixed) { - window.removeEventListener('resize', this._handleWindowResizeBound); + window.removeEventListener('resize', this._handleWindowResize); } } @@ -177,7 +163,7 @@ export class Sidenav extends Component { } } - _handleDragTargetDrag(e) { + _handleDragTargetDrag = (e) => { // Check if draggable if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { return; @@ -215,7 +201,7 @@ export class Sidenav extends Component { this._overlay.style.opacity = this.percentOpen.toString(); } - _handleDragTargetRelease() { + _handleDragTargetRelease = () => { if (this.isDragged) { if (this.percentOpen > 0.2) { this.open(); @@ -227,7 +213,7 @@ export class Sidenav extends Component { } } - _handleCloseDrag(e) { + _handleCloseDrag = (e) => { if (this.isOpen) { // Check if draggable if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) { @@ -260,7 +246,7 @@ export class Sidenav extends Component { } } - _handleCloseRelease() { + _handleCloseRelease = () => { if (this.isOpen && this.isDragged) { if (this.percentOpen > 0.8) { this._animateIn(); @@ -273,14 +259,14 @@ export class Sidenav extends Component { } // Handles closing of Sidenav when element with class .sidenav-close - _handleCloseTriggerClick(e) { + _handleCloseTriggerClick = (e) => { const closeTrigger = e.target.closest('.sidenav-close'); if (closeTrigger && !this._isCurrentlyFixed()) { this.close(); } } - _handleWindowResize() { + _handleWindowResize = () => { // Only handle horizontal resizes if (this.lastWindowWidth !== window.innerWidth) { if (window.innerWidth > 992) { @@ -360,7 +346,7 @@ export class Sidenav extends Component { } } - close() { + close = () => { if (this.isOpen === false) return; this.isOpen = false; // Run onCloseStart callback diff --git a/src/slider.ts b/src/slider.ts index 157569b9b4..4924aba546 100644 --- a/src/slider.ts +++ b/src/slider.ts @@ -19,18 +19,12 @@ export class Slider extends Component { activeIndex: number; _activeSlide: HTMLLIElement; _indicators: HTMLLIElement[]; - private _handleIntervalBound: any; - private _handleIndicatorClickBound: any; interval: string | number | NodeJS.Timeout; eventPause: any; _hovered: boolean; _focused: boolean; _focusCurrent: boolean; _sliderId: string; - private _handleAutoPauseFocusBound: any; - private _handleAutoStartFocusBound: any; - private _handleAutoPauseHoverBound: any; - private _handleAutoStartHoverBound: any; constructor(el, options) { super(Slider, el, options); @@ -151,79 +145,73 @@ export class Slider extends Component { } _setupEventHandlers() { - this._handleIntervalBound = this._handleInterval.bind(this); - this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this); - this._handleAutoPauseFocusBound = this._handleAutoPauseFocus.bind(this); - this._handleAutoStartFocusBound = this._handleAutoStartFocus.bind(this); - this._handleAutoPauseHoverBound = this._handleAutoPauseHover.bind(this); - this._handleAutoStartHoverBound = this._handleAutoStartHover.bind(this); if (this.options.pauseOnFocus) { - this.el.addEventListener('focusin', this._handleAutoPauseFocusBound); - this.el.addEventListener('focusout', this._handleAutoStartFocusBound); + this.el.addEventListener('focusin', this._handleAutoPauseFocus); + this.el.addEventListener('focusout', this._handleAutoStartFocus); } if (this.options.pauseOnHover) { - this.el.addEventListener('mouseenter', this._handleAutoPauseHoverBound); - this.el.addEventListener('mouseleave', this._handleAutoStartHoverBound); + this.el.addEventListener('mouseenter', this._handleAutoPauseHover); + this.el.addEventListener('mouseleave', this._handleAutoStartHover); } if (this.options.indicators) { this._indicators.forEach((el) => { - el.addEventListener('click', this._handleIndicatorClickBound); + el.addEventListener('click', this._handleIndicatorClick); }); } } _removeEventHandlers() { if (this.options.pauseOnFocus) { - this.el.removeEventListener('focusin', this._handleAutoPauseFocusBound); - this.el.removeEventListener('focusout', this._handleAutoStartFocusBound); + this.el.removeEventListener('focusin', this._handleAutoPauseFocus); + this.el.removeEventListener('focusout', this._handleAutoStartFocus); } if (this.options.pauseOnHover) { - this.el.removeEventListener('mouseenter', this._handleAutoPauseHoverBound); - this.el.removeEventListener('mouseleave', this._handleAutoStartHoverBound); + this.el.removeEventListener('mouseenter', this._handleAutoPauseHover); + this.el.removeEventListener('mouseleave', this._handleAutoStartHover); } if (this.options.indicators) { this._indicators.forEach((el) => { - el.removeEventListener('click', this._handleIndicatorClickBound); + el.removeEventListener('click', this._handleIndicatorClick); }); } } - _handleIndicatorClick(e) { + _handleIndicatorClick = (e) => { const el = (e.target).parentElement; const currIndex = [...el.parentNode.children].indexOf(el); this._focusCurrent = true; this.set(currIndex); } - _handleAutoPauseHover() { + _handleAutoPauseHover = () => { this._hovered = true; if (this.interval != null) { this._pause(true); } } - _handleAutoPauseFocus() { + _handleAutoPauseFocus = () => { this._focused = true; if (this.interval != null) { this._pause(true); } } - _handleAutoStartHover() { + _handleAutoStartHover = () => { this._hovered = false; if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) { this.start(); } } - _handleAutoStartFocus() { + _handleAutoStartFocus = () => { this._focused = false; if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) { this.start(); } } - _handleInterval() { + _handleInterval = () => { const activeElem = this._slider.querySelector('.active'); let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem); if (this._slides.length === newActiveIndex + 1) @@ -388,7 +376,7 @@ export class Slider extends Component { start() { clearInterval(this.interval); this.interval = setInterval( - this._handleIntervalBound, + this._handleInterval, this.options.duration + this.options.interval ); this.eventPause = false; diff --git a/src/tabs.ts b/src/tabs.ts index 6aa2e8ced9..af58a93626 100644 --- a/src/tabs.ts +++ b/src/tabs.ts @@ -14,8 +14,6 @@ export class Tabs extends Component { _tabLinks: any; _index: number; _indicator: any; - _handleWindowResizeBound: (this: Window, ev: UIEvent) => any; - _handleTabClickBound: (this: Window, ev: UIEvent) => any; _tabWidth: number; _tabsWidth: number; _tabsCarousel: any; @@ -67,18 +65,16 @@ export class Tabs extends Component { } _setupEventHandlers() { - this._handleWindowResizeBound = this._handleWindowResize.bind(this); - window.addEventListener('resize', this._handleWindowResizeBound); - this._handleTabClickBound = this._handleTabClick.bind(this); - this.el.addEventListener('click', this._handleTabClickBound); + window.addEventListener('resize', this._handleWindowResize); + this.el.addEventListener('click', this._handleTabClick); } _removeEventHandlers() { - window.removeEventListener('resize', this._handleWindowResizeBound); - this.el.removeEventListener('click', this._handleTabClickBound); + window.removeEventListener('resize', this._handleWindowResize); + this.el.removeEventListener('click', this._handleTabClick); } - _handleWindowResize() { + _handleWindowResize = () => { this._setTabsAndTabWidth(); if (this._tabWidth !== 0 && this._tabsWidth !== 0) { this._indicator.style.left = this._calcLeftPos(this._activeTabLink)+'px'; @@ -86,7 +82,7 @@ export class Tabs extends Component { } } - _handleTabClick(e) { + _handleTabClick = (e) => { const tabLink = e.target; const tab = tabLink.parentElement; // Handle click on tab link only @@ -221,7 +217,7 @@ export class Tabs extends Component { _setupNormalTabs() { // Hide Tabs Content - Array.from(this._tabLinks).forEach(a => { + Array.from(this._tabLinks).forEach((a) => { if (a === this._activeTabLink) return; if ((a).hash) { const currContent = document.querySelector((a).hash); diff --git a/src/tapTarget.ts b/src/tapTarget.ts index 9ec7b36e7a..59478b65f9 100644 --- a/src/tapTarget.ts +++ b/src/tapTarget.ts @@ -10,12 +10,8 @@ export class TapTarget extends Component { el: HTMLElement isOpen: boolean; private wrapper: HTMLElement; - private _handleDocumentClickBound: (this: HTMLElement, ev: MouseEvent) => any; private _origin: HTMLElement; - private _handleTargetClickBound: EventListenerOrEventListenerObject; private originEl: HTMLElement; - private _handleOriginClickBound: any; - private _handleThrottledResizeBound: any; private waveEl: HTMLElement & Element & Node; private contentEl: HTMLElement; @@ -50,36 +46,33 @@ export class TapTarget extends Component { } _setupEventHandlers() { - this._handleDocumentClickBound = this._handleDocumentClick.bind(this); - this._handleTargetClickBound = this._handleTargetClick.bind(this); - this._handleOriginClickBound = this._handleOriginClick.bind(this); - this.el.addEventListener('click', this._handleTargetClickBound); - this.originEl.addEventListener('click', this._handleOriginClickBound); + this.el.addEventListener('click', this._handleTargetClick); + this.originEl.addEventListener('click', this._handleOriginClick); // Resize - let throttledResize = M.throttle(this._handleResize, 200); - this._handleThrottledResizeBound = throttledResize.bind(this); - window.addEventListener('resize', this._handleThrottledResizeBound); + window.addEventListener('resize', this._handleThrottledResize); } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleTargetClickBound); - this.originEl.removeEventListener('click', this._handleOriginClickBound); - window.removeEventListener('resize', this._handleThrottledResizeBound); + this.el.removeEventListener('click', this._handleTargetClick); + this.originEl.removeEventListener('click', this._handleOriginClick); + window.removeEventListener('resize', this._handleThrottledResize); } - _handleTargetClick(e) { + _handleThrottledResize = () => M.throttle(this._handleResize, 200); + + _handleTargetClick = () => { this.open(); } - _handleOriginClick(e) { + _handleOriginClick = () => { this.close(); } - _handleResize(e) { + _handleResize = () => { this._calculatePositioning(); } - _handleDocumentClick(e) { + _handleDocumentClick = (e) => { if (!e.target.closest('.tap-target-wrapper')) { this.close(); e.preventDefault(); @@ -219,8 +212,8 @@ export class TapTarget extends Component { } this.isOpen = true; this.wrapper.classList.add('open'); - document.body.addEventListener('click', this._handleDocumentClickBound, true); - document.body.addEventListener('touchend', this._handleDocumentClickBound); + document.body.addEventListener('click', this._handleDocumentClick, true); + document.body.addEventListener('touchend', this._handleDocumentClick); } close() { @@ -231,7 +224,7 @@ export class TapTarget extends Component { } this.isOpen = false; this.wrapper.classList.remove('open'); - document.body.removeEventListener('click', this._handleDocumentClickBound, true); - document.body.removeEventListener('touchend', this._handleDocumentClickBound); + document.body.removeEventListener('click', this._handleDocumentClick, true); + document.body.removeEventListener('touchend', this._handleDocumentClick); } } diff --git a/src/timepicker.ts b/src/timepicker.ts index e3f33c77af..ba7d867a8a 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -39,12 +39,6 @@ export class Timepicker extends Component { id: string; modal: Modal; modalEl: HTMLElement; - private _handleInputKeydownBound: any; - private _handleInputClickBound: any; - private _handleClockClickStartBound: any; - private _handleDocumentClickMoveBound: any; - private _handleDocumentClickEndBound: any; - private _inputFromTextFieldBound: any; plate: any; digitalClock: any; inputHours: HTMLInputElement; @@ -128,45 +122,39 @@ export class Timepicker extends Component { } _setupEventHandlers() { - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleClockClickStartBound = this._handleClockClickStart.bind(this); - this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this); - this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this); - this._inputFromTextFieldBound = this._handleTimeInputEnterKey.bind(this); - this.el.addEventListener('click', this._handleInputClickBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.plate.addEventListener('mousedown', this._handleClockClickStartBound); - this.plate.addEventListener('touchstart', this._handleClockClickStartBound); - this.digitalClock.addEventListener('keyup', this._inputFromTextFieldBound); - this.inputHours.addEventListener('click', this.showView.bind(this, 'hours')); - this.inputMinutes.addEventListener('click', this.showView.bind(this, 'minutes')); + this.el.addEventListener('click', this._handleInputClick); + this.el.addEventListener('keydown', this._handleInputKeydown); + this.plate.addEventListener('mousedown', this._handleClockClickStart); + this.plate.addEventListener('touchstart', this._handleClockClickStart); + this.digitalClock.addEventListener('keyup', this._inputFromTextField); + this.inputHours.addEventListener('click', () => this.showView('hours')); + this.inputMinutes.addEventListener('click', () => this.showView('minutes')); } _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClickBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); + this.el.removeEventListener('click', this._handleInputClick); + this.el.removeEventListener('keydown', this._handleInputKeydown); } - _handleInputClick() { + _handleInputClick = () => { this.open(); } - _handleInputKeydown(e) { + _handleInputKeydown = (e) => { if (e.which === M.keys.ENTER) { e.preventDefault(); this.open(); } } - _handleTimeInputEnterKey(e) { + _handleTimeInputEnterKey = (e) => { if (e.which === M.keys.ENTER) { e.preventDefault(); this._inputFromTextField(); } } - _handleClockClickStart(e) { + _handleClockClickStart = (e) => { e.preventDefault(); let clockPlateBR = this.plate.getBoundingClientRect(); let offset = { x: clockPlateBR.left, y: clockPlateBR.top }; @@ -181,14 +169,14 @@ export class Timepicker extends Component { // Set clock hands this.setHand(this.dx, this.dy, false); // Mousemove on document - document.addEventListener('mousemove', this._handleDocumentClickMoveBound); - document.addEventListener('touchmove', this._handleDocumentClickMoveBound); + document.addEventListener('mousemove', this._handleDocumentClickMove); + document.addEventListener('touchmove', this._handleDocumentClickMove); // Mouseup on document - document.addEventListener('mouseup', this._handleDocumentClickEndBound); - document.addEventListener('touchend', this._handleDocumentClickEndBound); + document.addEventListener('mouseup', this._handleDocumentClickEnd); + document.addEventListener('touchend', this._handleDocumentClickEnd); } - _handleDocumentClickMove(e) { + _handleDocumentClickMove = (e) => { e.preventDefault(); let clickPos = Timepicker._Pos(e); let x = clickPos.x - this.x0; @@ -197,10 +185,10 @@ export class Timepicker extends Component { this.setHand(x, y, false); } - _handleDocumentClickEnd(e) { + _handleDocumentClickEnd = (e) => { e.preventDefault(); - document.removeEventListener('mouseup', this._handleDocumentClickEndBound); - document.removeEventListener('touchend', this._handleDocumentClickEndBound); + document.removeEventListener('mouseup', this._handleDocumentClickEnd); + document.removeEventListener('touchend', this._handleDocumentClickEnd); let clickPos = Timepicker._Pos(e); let x = clickPos.x - this.x0; let y = clickPos.y - this.y0; @@ -220,8 +208,8 @@ export class Timepicker extends Component { this.options.onSelect.call(this, this.hours, this.minutes); } // Unbind mousemove event - document.removeEventListener('mousemove', this._handleDocumentClickMoveBound); - document.removeEventListener('touchmove', this._handleDocumentClickMoveBound); + document.removeEventListener('mousemove', this._handleDocumentClickMove); + document.removeEventListener('touchmove', this._handleDocumentClickMove); } _insertHTMLIntoDOM() { @@ -288,7 +276,7 @@ export class Timepicker extends Component { _pickerSetup() { const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden'); clearButton.classList.add('timepicker-clear'); - clearButton.addEventListener('click', this.clear.bind(this)); + clearButton.addEventListener('click', this.clear); this.footer.appendChild(clearButton); const confirmationBtnsContainer = document.createElement('div'); @@ -297,12 +285,12 @@ export class Timepicker extends Component { const cancelButton = this._createButton(this.options.i18n.cancel, ''); cancelButton.classList.add('timepicker-close'); - cancelButton.addEventListener('click', this.close.bind(this)); + cancelButton.addEventListener('click', this.close); confirmationBtnsContainer.appendChild(cancelButton); const doneButton = this._createButton(this.options.i18n.done, ''); doneButton.classList.add('timepicker-close'); - doneButton.addEventListener('click', this.done.bind(this)); + doneButton.addEventListener('click', this.done); confirmationBtnsContainer.appendChild(doneButton); } @@ -312,13 +300,13 @@ export class Timepicker extends Component { this._amBtn = document.createElement('div'); this._amBtn.classList.add('am-btn'); this._amBtn.innerText = 'AM'; - this._amBtn.addEventListener('click', this._handleAmPmClick.bind(this)); + this._amBtn.addEventListener('click', this._handleAmPmClick); this.spanAmPm.appendChild(this._amBtn); // PM Button this._pmBtn = document.createElement('div'); this._pmBtn.classList.add('pm-btn'); this._pmBtn.innerText = 'PM'; - this._pmBtn.addEventListener('click', this._handleAmPmClick.bind(this)); + this._pmBtn.addEventListener('click', this._handleAmPmClick); this.spanAmPm.appendChild(this._pmBtn); } this._buildHoursView(); @@ -412,7 +400,7 @@ export class Timepicker extends Component { } } - _handleAmPmClick(e) { + _handleAmPmClick = (e) => { const btnClicked = e.target; this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM'; this._updateAmPmView(); @@ -457,7 +445,7 @@ export class Timepicker extends Component { this._updateAmPmView(); } - showView(view, delay: number = null) { + showView = (view, delay: number = null) => { if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') { // raiseCallback(this.options.beforeHourSelect); } @@ -514,7 +502,7 @@ export class Timepicker extends Component { } } - _inputFromTextField() { + _inputFromTextField = () => { const isHours = this.currentView === 'hours'; if (isHours) { const value = parseInt(this.inputHours.value); @@ -648,13 +636,13 @@ export class Timepicker extends Component { this.modal.open(undefined); } - close() { + close = () => { if (!this.isOpen) return; this.isOpen = false; this.modal.close(); } - done(e = null, clearValue = null) { + done = (e = null, clearValue = null) => { // Set input value let last = this.el.value; let value = clearValue @@ -673,7 +661,7 @@ export class Timepicker extends Component { this.el.focus(); } - clear() { + clear = () => { this.done(null, true); } diff --git a/src/tooltip.ts b/src/tooltip.ts index 0d4fcf4654..e4745b34a6 100644 --- a/src/tooltip.ts +++ b/src/tooltip.ts @@ -22,10 +22,6 @@ export class Tooltip extends Component { isHovered: boolean; isFocused: boolean; tooltipEl: HTMLElement; - private _handleMouseEnterBound: any; - private _handleMouseLeaveBound: any; - private _handleFocusBound: any; - private _handleBlurBound: any; private _exitDelayTimeout: string | number | NodeJS.Timeout; private _enterDelayTimeout: string | number | NodeJS.Timeout; xMovement: number; @@ -81,21 +77,17 @@ export class Tooltip extends Component { } _setupEventHandlers() { - this._handleMouseEnterBound = this._handleMouseEnter.bind(this); - this._handleMouseLeaveBound = this._handleMouseLeave.bind(this); - this._handleFocusBound = this._handleFocus.bind(this); - this._handleBlurBound = this._handleBlur.bind(this); - this.el.addEventListener('mouseenter', this._handleMouseEnterBound); - this.el.addEventListener('mouseleave', this._handleMouseLeaveBound); - this.el.addEventListener('focus', this._handleFocusBound, true); - this.el.addEventListener('blur', this._handleBlurBound, true); + this.el.addEventListener('mouseenter', this._handleMouseEnter); + this.el.addEventListener('mouseleave', this._handleMouseLeave); + this.el.addEventListener('focus', this._handleFocus, true); + this.el.addEventListener('blur', this._handleBlur, true); } _removeEventHandlers() { - this.el.removeEventListener('mouseenter', this._handleMouseEnterBound); - this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound); - this.el.removeEventListener('focus', this._handleFocusBound, true); - this.el.removeEventListener('blur', this._handleBlurBound, true); + this.el.removeEventListener('mouseenter', this._handleMouseEnter); + this.el.removeEventListener('mouseleave', this._handleMouseLeave); + this.el.removeEventListener('focus', this._handleFocus, true); + this.el.removeEventListener('blur', this._handleBlur, true); } open(isManual) { @@ -231,26 +223,26 @@ export class Tooltip extends Component { }); } - _handleMouseEnter() { + _handleMouseEnter = () => { this.isHovered = true; this.isFocused = false; // Allows close of tooltip when opened by focus. this.open(false); } - _handleMouseLeave() { + _handleMouseLeave = () => { this.isHovered = false; this.isFocused = false; // Allows close of tooltip when opened by focus. this.close(); } - _handleFocus() { + _handleFocus = () => { if (M.tabPressed) { this.isFocused = true; this.open(false); } } - _handleBlur() { + _handleBlur = () => { this.isFocused = false; this.close(); } From ef7e5d498ccd9e61dd06ee436e9672c6953ae576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Fri, 9 Jun 2023 19:06:57 -0300 Subject: [PATCH 3/3] fix(components): resize handlers - Fixed resize handlers for "throttled" callbacks; - Affected components: - Carousel; - Parallax; - ScrollSpy; - TapTarget; --- src/carousel.ts | 4 ++-- src/parallax.ts | 12 +++++++++--- src/scrollspy.ts | 2 +- src/tapTarget.ts | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/carousel.ts b/src/carousel.ts index 286aa1ca86..f0b91e2580 100644 --- a/src/carousel.ts +++ b/src/carousel.ts @@ -166,7 +166,7 @@ export class Carousel extends Component { window.removeEventListener('resize', this._handleThrottledResize); } - _handleThrottledResize = () => M.throttle(this._handleResize, 200, null); + _handleThrottledResize = (() => M.throttle(function(){ this._handleResize(); }, 200, null).bind(this))(); _handleCarouselTap = (e) => { // Fixes firefox draggable image bug @@ -288,7 +288,7 @@ export class Carousel extends Component { } } - _handleResize(e) { + _handleResize = () => { if (this.options.fullWidth) { this.itemWidth = this.el.querySelector('.carousel-item').clientWidth; this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight; diff --git a/src/parallax.ts b/src/parallax.ts index b8fcd85033..412a2b83f6 100644 --- a/src/parallax.ts +++ b/src/parallax.ts @@ -8,9 +8,9 @@ let _defaults = { export class Parallax extends Component { private _enabled: boolean; private _img: HTMLImageElement; - static _parallaxes : Parallax[] = []; - static _handleScrollThrottled = M.throttle(Parallax._handleScroll, 5); - static _handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5); + static _parallaxes: Parallax[] = []; + static _handleScrollThrottled: () => any; + static _handleWindowResizeThrottled: () => any; constructor(el, options) { super(Parallax, el, options); @@ -62,6 +62,12 @@ export class Parallax extends Component { _setupEventHandlers() { this._img.addEventListener('load', this._handleImageLoad); if (Parallax._parallaxes.length === 0) { + if (!Parallax._handleScrollThrottled){ + Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5); + } + if (!Parallax._handleWindowResizeThrottled){ + Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5); + } window.addEventListener('scroll', Parallax._handleScrollThrottled); window.addEventListener('resize', Parallax._handleWindowResizeThrottled); } diff --git a/src/scrollspy.ts b/src/scrollspy.ts index e004fc7cac..6192376449 100644 --- a/src/scrollspy.ts +++ b/src/scrollspy.ts @@ -73,7 +73,7 @@ export class ScrollSpy extends Component { } } - _handleThrottledResize = () => M.throttle(this._handleWindowScroll, 200); + _handleThrottledResize = (() => M.throttle(function(){ this._handleWindowScroll(); }, 200).bind(this))(); _handleTriggerClick = (e) => { const trigger = e.target; diff --git a/src/tapTarget.ts b/src/tapTarget.ts index 59478b65f9..321a3d9c8b 100644 --- a/src/tapTarget.ts +++ b/src/tapTarget.ts @@ -58,7 +58,7 @@ export class TapTarget extends Component { window.removeEventListener('resize', this._handleThrottledResize); } - _handleThrottledResize = () => M.throttle(this._handleResize, 200); + _handleThrottledResize = (() => M.throttle(function(){ this._handleResize(); }, 200).bind(this))(); _handleTargetClick = () => { this.open();