Rating alert/feature using Ionic alert - ionic-framework

Question

I wanted to create a rating alert feature using Ionic alert. This is how it looks.
Go through the answer for detailed codes.
This works properly in all browsers and platforms(as much as I have tested on).

Answer 1

The JS/TS part to create alert -
showRatingAlert() {
const alert = this.alertCtrl.create({
title: 'Rate this app',
cssClass: 'rating_alert',
buttons: [
{ text: '1',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '2',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '3',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '4',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '5',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: 'Later', handler: data => { }, cssClass: 'rate-action-button rate-later' },
{ text: 'Submit', handler: data => { }, cssClass: 'rate-action-button rate-now' },
],
});
// add event listener for icon buttons in ask rating alert popup
setTimeout(()=>{
const buttonElms: NodeList = document.querySelectorAll('.rating_alert .alert-button-group .rate-icon-button');
for(let index = 0; index < buttonElms.length; index++) {
buttonElms[index].addEventListener('click', this.selectedRatingHandler);
}
}, 500);
}
selectedRatingHandler = (event: MouseEvent)=>{
// handler for clicked rating icon button
let target: any = event.target; // target element
let siblings: HTMLCollection = target.parentElement.children; // list of all siblings
for(let index = 0; index < siblings.length; index++){
siblings[index].classList.remove('selected-rating'); // remove selected class from all siblings
}
target.classList.add('selected-rating'); // add selected class to currently selected item
};
The CSS/SCSS part to style elements/buttons -
.rating_alert{
border-radius: 8px;
.alert-wrapper{ border-radius: 8px; }
.alert-button-group{
padding:0;
margin-top: 10px;
flex-direction: row;
justify-content: space-around;
// flex-direction: row; justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
button{
flex: 1 1 20%;
&.rate-icon-button{
width: 40px;
max-width: 20%;
min-width: auto;
height: 40px;
margin: 0 !important;
background-image:url('../assets/img/emotions.png');
background-repeat: no-repeat;
background-position: center;
border: none;
.button-inner{
visibility: hidden;
}
&:nth-child(1){ background-position-y: 3px; }
&:nth-child(2){ background-position-y: -36px; }
&:nth-child(3){ background-position-y: -76px; }
&:nth-child(4){ background-position-y: -114px; }
&:nth-child(5){ background-position-y: -153px; }
&.selected-rating{
position: relative;
overflow: visible;
&:after{
content: '';
position: absolute;
bottom: -4px;
height: 4px;
background-color: #2E6DFF;
width: 80%;
left: 10%;
}
}
}
&.rate-action-button{
text-align: center;
margin-top: 20px;
margin-right: 0;
border-top: 1px solid #c3c3c3;
.button-inner{
justify-content: center;
}
&.rate-later{
border-right: 1px solid #c3c3c3;
}
&.rate-now{
border-left: 1px solid #c3c3c3;
}
}
}
}
The image file used in this example.