Yesterday, I mentioned I was working on the intro screen / on-boarding process for the Kids In Touch app using the Ionic Framework's SlideBox component. I was sort of stuck because I couldn't keep users from moving on to the next slide even if they hadn't completed the process on each slide.
So, after rolling up my sleeves and deep-diving into the Ionic code, I have a solution. I've submitted my hack as a Pull Request to the core Ionic team. Hopefully, they'll either accept my code or rewrite it to include similar functionality.
I've added a new attribute called 'maxViewableSlide' to the slideBox directive. Setting this attribute with a numeric value will prevent the user from moving on to the next slide. Since slides are 0 based, if you want to prevent the user from moving to the third slide, you'd need to set maxViewableSlide to 1. That will allow them to only reach the second slide.
If the user tries to see the next slide by swiping, it just snaps back into position on the slide they're limited to. In your controller you can decide what to do with the navigation buttons.
Sample code using the $scope.maxViewableSlide as the setting :
<slide-box on-slide-changed="slideChanged(index)" max-viewable-slide="{{maxViewableSlide}}"
Here's a full blown example:
Here's the link for seeing all of the code : http://jsbin.com/OHANuwU/2/edit?html,css,js,output
Please let me know what you think of this idea. Another possibility is to actually prevent the user from seeing the next slide at all when they try to drag. I kind of like the idea as it stands now. It lets the user know something else is coming if they just do whatever is required on the current slide.
