Toggling preview section in Badgeyay
A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the addition of a preview section in the badge generator. It is discussed as to how the feature of toggling the preview section was implemented in the project
Adding the functionality to badgeyay
Let us see how we implemented this functionality into the frontend of the project.
Step 1 : Adding the toggle button to the frontend UI
We add the button to toggle the preview on and off the screen using the standard handlebars convention. We add a button with the action ‘togglePreview’ to toggle the preview section in frontend.
<div class=“right floated right aligned six wide column”>
Step 2 : Adding the styling in the scss file
Now we add the required styling in the SCSS file to ensure that the preview button appears at the exact desired position only.
Step 3 : Now we need to define states
Now we need to define the states that will control the text inside the preview button and the preview controller.
previewToggled : false,
Now we add the method to control the toggle feature in the component.
The ‘togglePreview’ function changes the state of the preview, either rendering it on screen or off the screen. This is how we control the preview section being displayed on the screen.
Screenshot of changes
- The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1459
- The Issue for the same : https://github.com/fossasia/badgeyay/issues/1458
- Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html
- Read about Handlebars : https://guides.emberjs.com/release/templates/handlebars-basics/