style(toast): fix linter issues and typo

This commit is contained in:
Brandy Carney
2016-06-08 12:04:44 -04:00
parent 82adf6f3d3
commit c67ce8c906

View File

@ -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');