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”> <div class=“ui”> <button {{action ‘togglePreview‘}} class=“ui basic orange button” data-tooltip=“Toggle Preview (WIP)” data-position=“right center”>{{prevButton}}</button> </div> </div>

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.

.ui{ .column{ color: black; .create-badge { position: relative; padding-left: 6%; padding-right: 6%; top: –50px; } } }

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, prevButton     : ‘<‘,

Now we add the method to control the toggle feature in the component.

togglePreview() { this.set(‘previewToggled’, !this.previewToggled); if (this.previewToggled) { this.set(‘prevButton’, ‘>’); } else { this.set(‘prevButton’, ‘<‘); } }

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

Resources

• 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/