| 1 | {"version":3,"sources":["core/ripple/ripple-renderer.ts"],"names":[],"mappings":"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","file":"core/ripple/ripple-renderer.js","sourcesContent":["import {\n ElementRef,\n} from '@angular/core';\n\n/** TODO: internal */\nexport enum ForegroundRippleState {\n NEW,\n EXPANDING,\n FADING_OUT,\n}\n\n/**\n * Wrapper for a foreground ripple DOM element and its animation state.\n * TODO: internal\n */\nexport class ForegroundRipple {\n state = ForegroundRippleState.NEW;\n constructor(public rippleElement: Element) {}\n}\n\nconst RIPPLE_SPEED_PX_PER_SECOND = 1000;\nconst MIN_RIPPLE_FILL_TIME_SECONDS = 0.1;\nconst MAX_RIPPLE_FILL_TIME_SECONDS = 0.3;\n\n/**\n * Returns the distance from the point (x, y) to the furthest corner of a rectangle.\n */\nconst distanceToFurthestCorner = (x: number, y: number, rect: ClientRect) => {\n const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));\n const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));\n return Math.sqrt(distX * distX + distY * distY);\n};\n\n/**\n * Helper service that performs DOM manipulations. Not intended to be used outside this module.\n * The constructor takes a reference to the ripple directive's host element and a map of DOM\n * event handlers to be installed on the element that triggers ripple animations.\n * This will eventually become a custom renderer once Angular support exists.\n * TODO: internal\n */\nexport class RippleRenderer {\n private _backgroundDiv: HTMLElement;\n private _rippleElement: HTMLElement;\n private _triggerElement: HTMLElement;\n\n constructor(_elementRef: ElementRef, private _eventHandlers: Map<string, (e: Event) => void>) {\n this._rippleElement = _elementRef.nativeElement;\n // It might be nice to delay creating the background until it's needed, but doing this in\n // fadeInRippleBackground causes the first click event to not be handled reliably.\n this._backgroundDiv = document.createElement('div');\n this._backgroundDiv.classList.add('md-ripple-background');\n this._rippleElement.appendChild(this._backgroundDiv);\n }\n\n /**\n * Installs event handlers on the given trigger element, and removes event handlers from the\n * previous trigger if needed.\n */\n setTriggerElement(newTrigger: HTMLElement) {\n if (this._triggerElement !== newTrigger) {\n if (this._triggerElement) {\n this._eventHandlers.forEach((eventHandler, eventName) => {\n this._triggerElement.removeEventListener(eventName, eventHandler);\n });\n }\n this._triggerElement = newTrigger;\n if (this._triggerElement) {\n this._eventHandlers.forEach((eventHandler, eventName) => {\n this._triggerElement.addEventListener(eventName, eventHandler);\n });\n }\n }\n }\n\n /**\n * Installs event handlers on the host element of the md-ripple directive.\n */\n setTriggerElementToHost() {\n this.setTriggerElement(this._rippleElement);\n }\n\n /**\n * Removes event handlers from the current trigger element if needed.\n */\n clearTriggerElement() {\n this.setTriggerElement(null);\n }\n\n /**\n * Creates a foreground ripple and sets its animation to expand and fade in from the position\n * given by rippleOriginLeft and rippleOriginTop (or from the center of the <md-ripple>\n * bounding rect if centered is true).\n */\n createForegroundRipple(\n rippleOriginLeft: number,\n rippleOriginTop: number,\n color: string,\n centered: boolean,\n radius: number,\n speedFactor: number,\n transitionEndCallback: (r: ForegroundRipple, e: TransitionEvent) => void) {\n const parentRect = this._rippleElement.getBoundingClientRect();\n // Create a foreground ripple div with the size and position of the fully expanded ripple.\n // When the div is created, it's given a transform style that causes the ripple to be displayed\n // small and centered on the event location (or the center of the bounding rect if the centered\n // argument is true). Removing that transform causes the ripple to animate to its natural size.\n const startX = centered ? (parentRect.left + parentRect.width / 2) : rippleOriginLeft;\n const startY = centered ? (parentRect.top + parentRect.height / 2) : rippleOriginTop;\n const offsetX = startX - parentRect.left;\n const offsetY = startY - parentRect.top;\n const maxRadius = radius > 0 ? radius : distanceToFurthestCorner(startX, startY, parentRect);\n\n const rippleDiv = document.createElement('div');\n this._rippleElement.appendChild(rippleDiv);\n rippleDiv.classList.add('md-ripple-foreground');\n rippleDiv.style.left = `${offsetX - maxRadius}px`;\n rippleDiv.style.top = `${offsetY - maxRadius}px`;\n rippleDiv.style.width = `${2 * maxRadius}px`;\n rippleDiv.style.height = rippleDiv.style.width;\n // If color input is not set, this will default to the background color defined in CSS.\n rippleDiv.style.backgroundColor = color;\n // Start the ripple tiny.\n rippleDiv.style.transform = `scale(0.001)`;\n\n const fadeInSeconds = (1 / (speedFactor || 1)) * Math.max(\n MIN_RIPPLE_FILL_TIME_SECONDS,\n Math.min(MAX_RIPPLE_FILL_TIME_SECONDS, maxRadius / RIPPLE_SPEED_PX_PER_SECOND));\n rippleDiv.style.transitionDuration = `${fadeInSeconds}s`;\n\n // https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/\n window.getComputedStyle(rippleDiv).opacity;\n\n rippleDiv.classList.add('md-ripple-fade-in');\n // Clearing the transform property causes the ripple to animate to its full size.\n rippleDiv.style.transform = '';\n const ripple = new ForegroundRipple(rippleDiv);\n ripple.state = ForegroundRippleState.EXPANDING;\n\n rippleDiv.addEventListener('transitionend',\n (event: TransitionEvent) => transitionEndCallback(ripple, event));\n }\n\n /**\n * Fades out a foreground ripple after it has fully expanded and faded in.\n */\n fadeOutForegroundRipple(ripple: Element) {\n ripple.classList.remove('md-ripple-fade-in');\n ripple.classList.add('md-ripple-fade-out');\n }\n\n /**\n * Removes a foreground ripple from the DOM after it has faded out.\n */\n removeRippleFromDom(ripple: Element) {\n ripple.parentElement.removeChild(ripple);\n }\n\n /**\n * Fades in the ripple background.\n */\n fadeInRippleBackground(color: string) {\n this._backgroundDiv.classList.add('md-ripple-active');\n // If color is not set, this will default to the background color defined in CSS.\n this._backgroundDiv.style.backgroundColor = color;\n }\n\n /**\n * Fades out the ripple background.\n */\n fadeOutRippleBackground() {\n if (this._backgroundDiv) {\n this._backgroundDiv.classList.remove('md-ripple-active');\n }\n }\n}\n"],"sourceRoot":"/source/"} |