Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a couple of new options #898

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,19 @@
placeholder="Toast message"
></textarea>
</div>

<div class="form-group mb-3">
<label for="toastMessage">
<strong>Close Button HTML</strong>
</label>
<textarea
[(ngModel)]="options.closeHtml"
rows="2"
class="form-control"
name="closeHtml"
id="closeHtml"
placeholder="HTML for the close button"
></textarea>
</div>
<div class="form-group mb-3">
<div class="form-check">
<input
Expand Down Expand Up @@ -281,6 +293,38 @@
id="toastExtendedTimeout"
/>
</div>
<div class="form-group mb-3">
<label for="toastHideEaseTime">
<strong>Hide Ease Time</strong>
</label>
<input
type="text"
[(ngModel)]="toastr.toastrConfig.hideEaseTime"
(ngModelChange)="fixNumber('hideEaseTime')"
class="form-control"
id="toastHideEaseTime"
/>
</div>
<div class="form-group mb-3">
<label for="toastShowEaseType">Ease Type</label>
<select class="form-control"
name="easeType"
id="toastShowEaseType"
[(ngModel)]="toastr.toastrConfig.easing">
<option [ngValue]="null" disabled>Select Ease Type</option>
<option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
</select>
</div>
<div class="form-group mb-3">
<label for="toastHideEaseType">Hide Ease Type</label>
<select class="form-control"
name="hideEaseType"
id="toastHideEaseType"
[(ngModel)]="toastr.toastrConfig.hideEasing">
<option [ngValue]="null" disabled>Select Hide Ease Type</option>
<option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="row">
Expand Down
1 change: 1 addition & 0 deletions src/app/home/home.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export class HomeComponent {
inlinePositionIndex = 0;
@ViewChildren(ToastContainerDirective) inlineContainers!: QueryList<ToastContainerDirective>;

easeTypes = [ "ease", "ease-in", "ease-out", "ease-in-out", "linear", "step-start", "step-end" ];

constructor(public toastr: ToastrService, private renderer: Renderer2) {
this.options = this.toastr.toastrConfig;
Expand Down
14 changes: 10 additions & 4 deletions src/lib/toastr/toast.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import { ToastrService } from './toastr.service';
@Component({
selector: '[toast-component]',
template: `
<button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button" aria-label="Close">
<button *ngIf="options.closeButton && options.closeHtml" (click)="remove()"
class="toast-close-button" aria-label="Close" aria-hidden="true" [innerHTML]="options.closeHtml">
</button>
<button *ngIf="options.closeButton && !options.closeHtml" (click)="remove()" class="toast-close-button" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
Expand Down Expand Up @@ -47,7 +50,7 @@ import { ToastrService } from './toastr.service';
),
transition(
'active => removed',
animate('{{ easeTime }}ms {{ easing }}')
animate('{{ hideEaseTime }}ms {{ hideEasing }}')
)
])
],
Expand All @@ -69,7 +72,9 @@ export class Toast implements OnDestroy {
value: 'inactive',
params: {
easeTime: this.toastPackage.config.easeTime,
easing: 'ease-in'
hideEaseTime: this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime,
easing: this.toastPackage.config.easing,
hideEasing: this.toastPackage.config.hideEasing ? this.toastPackage.config.hideEasing : this.toastPackage.config.easing
}
};

Expand Down Expand Up @@ -181,9 +186,10 @@ export class Toast implements OnDestroy {
}
clearTimeout(this.timeout);
this.state = { ...this.state, value: 'removed' };
const hideEaseTime = this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime;
this.outsideTimeout(
() => this.toastrService.remove(this.toastPackage.toastId),
+this.toastPackage.config.easeTime
+ hideEaseTime
);
}
@HostListener('click')
Expand Down
18 changes: 18 additions & 0 deletions src/lib/toastr/toastr-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ export interface IndividualConfig {
* default: false
*/
enableHtml: boolean;
/**
* html for the close button (possibly unsafe)
* default: undefined
*/
closeHtml: string | undefined;
/**
* css class on toast component
* default: ngx-toastr
Expand All @@ -73,11 +78,21 @@ export interface IndividualConfig {
* default: ease-in
*/
easing: string;
/**
* animation hide easing on toast
* default: ease-out
*/
hideEasing: string;
/**
* animation ease time on toast
* default: 300
*/
easeTime: string | number;
/**
* animation hide ease time on toast
* default: 0
*/
hideEaseTime: string | number;
/**
* clicking on toast dismisses it
* default: true
Expand Down Expand Up @@ -220,13 +235,16 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = {
timeOut: 5000,
extendedTimeOut: 1000,
enableHtml: false,
closeHtml: undefined,
progressBar: false,
toastClass: 'ngx-toastr',
positionClass: 'toast-top-right',
titleClass: 'toast-title',
messageClass: 'toast-message',
easing: 'ease-in',
hideEasing: 'ease-out',
easeTime: 300,
hideEaseTime: 0,
tapToDismiss: true,
onActivateTick: false,
progressAnimation: 'decreasing',
Expand Down