mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
style(toast): fix linter issues and typo
This commit is contained in:
@ -68,10 +68,12 @@ export class Toast extends ViewController {
|
|||||||
constructor(opts: ToastOptions = {}) {
|
constructor(opts: ToastOptions = {}) {
|
||||||
opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
|
opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
|
||||||
super(ToastCmp, opts);
|
super(ToastCmp, opts);
|
||||||
|
|
||||||
// set the position to the bottom if not provided
|
// set the position to the bottom if not provided
|
||||||
if ( ! opts.position || ! this.isVaidPosition(opts.position)) {
|
if ( ! opts.position || ! this.isValidPosition(opts.position)) {
|
||||||
opts.position = TOAST_POSITION_BOTTOM;
|
opts.position = TOAST_POSITION_BOTTOM;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.viewType = 'toast';
|
this.viewType = 'toast';
|
||||||
this.isOverlay = true;
|
this.isOverlay = true;
|
||||||
this.usePortal = true;
|
this.usePortal = true;
|
||||||
@ -94,7 +96,7 @@ export class Toast extends ViewController {
|
|||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
isVaidPosition(position: string) {
|
isValidPosition(position: string) {
|
||||||
return position === TOAST_POSITION_TOP || position === TOAST_POSITION_MIDDLE || position === TOAST_POSITION_BOTTOM;
|
return position === TOAST_POSITION_TOP || position === TOAST_POSITION_MIDDLE || position === TOAST_POSITION_BOTTOM;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,7 +115,7 @@ export class Toast extends ViewController {
|
|||||||
* |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
|
* |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
|
||||||
* | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
|
* | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
|
||||||
* | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
|
* | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
|
||||||
* | position | `string` | "bottom" | The position of the toast on the screen. "top", "middle", and "bottom" are the accepted values. |
|
* | position | `string` | "bottom" | The position of the toast on the screen. Accepted values: "top", "middle", "bottom". |
|
||||||
* | cssClass | `string` | - | Any additional class for custom styles. |
|
* | cssClass | `string` | - | Any additional class for custom styles. |
|
||||||
* | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
|
* | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
|
||||||
* | closeButtonText | `string` | "Close" | Text to display in the close button. |
|
* | closeButtonText | `string` | "Close" | Text to display in the close button. |
|
||||||
@ -250,16 +252,14 @@ class ToastSlideIn extends Transition {
|
|||||||
// by default, it is -100% hidden (above the screen)
|
// by default, it is -100% hidden (above the screen)
|
||||||
// so move from that to 10px below top: 0px;
|
// so move from that to 10px below top: 0px;
|
||||||
wrapper.fromTo('translateY', '-100%', `${10}px`);
|
wrapper.fromTo('translateY', '-100%', `${10}px`);
|
||||||
}
|
} else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just center it and fade it in
|
// just center it and fade it in
|
||||||
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
||||||
// DOM WRITE
|
// DOM WRITE
|
||||||
wrapperEle.style.top = `${topPosition}px`;
|
wrapperEle.style.top = `${topPosition}px`;
|
||||||
wrapper.fromTo('opacity', '0.01', '1.0');
|
wrapper.fromTo('opacity', '0.01', '1.0');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
// by default, it is 100% hidden (below the screen),
|
// by default, it is 100% hidden (below the screen),
|
||||||
// so move from that to 10 px above bottom: 0px
|
// so move from that to 10 px above bottom: 0px
|
||||||
@ -286,13 +286,11 @@ class ToastSlideOut extends Transition {
|
|||||||
// top
|
// top
|
||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('translateY', `${10}px`, '-100%');
|
wrapper.fromTo('translateY', `${10}px`, '-100%');
|
||||||
}
|
} else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just fade it out
|
// just fade it out
|
||||||
wrapper.fromTo('opacity', '1.0', '0.0');
|
wrapper.fromTo('opacity', '1.0', '0.0');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('translateY', `${0 - 10}px`, '100%');
|
wrapper.fromTo('translateY', `${0 - 10}px`, '100%');
|
||||||
@ -319,16 +317,14 @@ class ToastMdSlideIn extends Transition {
|
|||||||
// by default, it is -100% hidden (above the screen)
|
// by default, it is -100% hidden (above the screen)
|
||||||
// so move from that to top: 0px;
|
// so move from that to top: 0px;
|
||||||
wrapper.fromTo('translateY', '-100%', `0px`);
|
wrapper.fromTo('translateY', '-100%', `0px`);
|
||||||
}
|
} else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just center it and fade it in
|
// just center it and fade it in
|
||||||
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
||||||
// DOM WRITE
|
// DOM WRITE
|
||||||
wrapperEle.style.top = `${topPosition}px`;
|
wrapperEle.style.top = `${topPosition}px`;
|
||||||
wrapper.fromTo('opacity', '0.01', '1.0');
|
wrapper.fromTo('opacity', '0.01', '1.0');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
// by default, it is 100% hidden (below the screen),
|
// by default, it is 100% hidden (below the screen),
|
||||||
// so move from that to bottom: 0px
|
// so move from that to bottom: 0px
|
||||||
@ -355,13 +351,11 @@ class ToastMdSlideOut extends Transition {
|
|||||||
// top
|
// top
|
||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('translateY', `${0}px`, '-100%');
|
wrapper.fromTo('translateY', `${0}px`, '-100%');
|
||||||
}
|
} else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just fade it out
|
// just fade it out
|
||||||
wrapper.fromTo('opacity', '1.0', '0.0');
|
wrapper.fromTo('opacity', '1.0', '0.0');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('translateY', `${0}px`, '100%');
|
wrapper.fromTo('translateY', `${0}px`, '100%');
|
||||||
@ -389,8 +383,7 @@ class ToastWpPopIn extends Transition {
|
|||||||
// top
|
// top
|
||||||
wrapper.fromTo('opacity', '0.01', '1');
|
wrapper.fromTo('opacity', '0.01', '1');
|
||||||
wrapper.fromTo('scale', '1.3', '1');
|
wrapper.fromTo('scale', '1.3', '1');
|
||||||
}
|
} else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( enteringView.data && enteringView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just center it and fade it in
|
// just center it and fade it in
|
||||||
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
|
||||||
@ -398,8 +391,7 @@ class ToastWpPopIn extends Transition {
|
|||||||
wrapperEle.style.top = `${topPosition}px`;
|
wrapperEle.style.top = `${topPosition}px`;
|
||||||
wrapper.fromTo('opacity', '0.01', '1.0');
|
wrapper.fromTo('opacity', '0.01', '1.0');
|
||||||
wrapper.fromTo('scale', '1.3', '1');
|
wrapper.fromTo('scale', '1.3', '1');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
wrapper.fromTo('opacity', '0.01', '1');
|
wrapper.fromTo('opacity', '0.01', '1');
|
||||||
wrapper.fromTo('scale', '1.3', '1');
|
wrapper.fromTo('scale', '1.3', '1');
|
||||||
@ -426,14 +418,12 @@ class ToastWpPopOut extends Transition {
|
|||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('opacity', '1', '0.00');
|
wrapper.fromTo('opacity', '1', '0.00');
|
||||||
wrapper.fromTo('scale', '1', '1.3');
|
wrapper.fromTo('scale', '1', '1.3');
|
||||||
}
|
} else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
||||||
else if ( leavingView.data && leavingView.data.position === TOAST_POSITION_MIDDLE ) {
|
|
||||||
// Middle
|
// Middle
|
||||||
// just fade it out
|
// just fade it out
|
||||||
wrapper.fromTo('opacity', '1.0', '0.00');
|
wrapper.fromTo('opacity', '1.0', '0.00');
|
||||||
wrapper.fromTo('scale', '1', '1.3');
|
wrapper.fromTo('scale', '1', '1.3');
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// bottom
|
// bottom
|
||||||
// reverse arguments from enter transition
|
// reverse arguments from enter transition
|
||||||
wrapper.fromTo('opacity', '1', '0.00');
|
wrapper.fromTo('opacity', '1', '0.00');
|
||||||
|
Reference in New Issue
Block a user