swipeable-toasts
Version:
Swipeable Toasts for the Ionic-Framework
74 lines • 3.23 kB
JavaScript
import { Component, Renderer2 } from '@angular/core';
import { SwipeableToastProvider } from "..";
import { DomSanitizer } from "@angular/platform-browser";
import { HTML } from "./swipeable-toast-component.html";
import { CSS } from "./swipeable-toast-component.css";
var TouchEvent;
(function (TouchEvent) {
TouchEvent["Start"] = "touchstart";
TouchEvent["Moving"] = "touchmove";
})(TouchEvent || (TouchEvent = {}));
var SwipeableToastComponent = (function () {
function SwipeableToastComponent(swipeableToastProvider, sanitizer, renderer) {
var _this = this;
this.renderer = renderer;
swipeableToastProvider.sendToastParams.subscribe(function (params) {
_this.state = params.state;
_this.message = params.message;
_this.messageType = params.messageType;
_this.cssClass = params.cssClass;
_this.margin = sanitizer.bypassSecurityTrustStyle(params.margin + "px");
_this.calculatedWidth = sanitizer.bypassSecurityTrustStyle("calc(100% - " + 2 * params.margin + "px)");
_this.top = sanitizer.bypassSecurityTrustStyle(-1 * (100 - params.margin) + "px");
});
swipeableToastProvider.hideToastEmitter.subscribe(function (hide) {
if (hide) {
_this.state = "hide-toast";
}
});
}
SwipeableToastComponent.prototype.dismiss = function (touchEvent) {
if (touchEvent.type === TouchEvent.Start) {
var touchedElement = touchEvent.changedTouches[0];
this.startY = parseInt(touchedElement.clientY);
this.offsetTop = this.getOffsetFromPxString(touchedElement);
touchEvent.preventDefault();
}
if (touchEvent.type === TouchEvent.Moving) {
var touchedElement = touchEvent.changedTouches[0];
this.distance = parseInt(touchedElement.clientY) - this.startY;
this.moveToastOnSwipe(touchedElement.target.parentElement);
this.hideToastOnSwipe();
touchEvent.preventDefault();
}
};
SwipeableToastComponent.prototype.getOffsetFromPxString = function (elem) {
return -(parseInt(elem.target.parentElement.style.top.match(/\d+/)[0]));
};
SwipeableToastComponent.prototype.moveToastOnSwipe = function (elem) {
if (this.distance < 0) {
this.renderer.setStyle(elem, 'top', (this.offsetTop + this.distance) + "px");
}
};
SwipeableToastComponent.prototype.hideToastOnSwipe = function () {
if (this.distance <= this.offsetTop / 2) {
this.state = "hide-toast";
}
};
SwipeableToastComponent.decorators = [
{ type: Component, args: [{
selector: 'swipeable-toast-component',
template: HTML,
styles: [CSS]
},] },
];
/** @nocollapse */
SwipeableToastComponent.ctorParameters = function () { return [
{ type: SwipeableToastProvider, },
{ type: DomSanitizer, },
{ type: Renderer2, },
]; };
return SwipeableToastComponent;
}());
export { SwipeableToastComponent };
//# sourceMappingURL=swipeable-toast-component.js.map