Toggling edit mode

[00:00 - 00:08] All those edit buttons are a bit distracting. If we could toggle edit mode on or off, we could hide them when edit mode is off.

[00:09 - 00:15] The user could then look at their resume without distractions. For that, we will need three things.

[00:16 - 00:33] A new toggle component, a data property in our app that tells us if edit mode is on or off, is CSS class that gets added dynamically when the edit mode is off so that we can hide all edit buttons. Let's start by creating a toggle component.

[00:34 - 00:52] Since the switch will toggle the edit mode, I will call the component edit toggle. First, we create the template of the component.

[00:53 - 01:00] A toggle switch does not exist in HTML. It is an input of type checkbox with adjusted styling.

[01:01 - 01:16] There's quite a lot of CSS necessary to make a checkbox look like a toggle switch, so let's check if we can find something online that we can reuse here. I found this tutorial from W3 Schools about how to create a toggle switch.

[01:17 - 01:25] Let's copy over the code. I will adjust the markup a bit so we can add label text within the label element.

[01:26 - 01:34] This is a tutorial from W3 Schools. You can see the text in our screen.

[01:35 - 01:43] It's a tutorial that you can use when you're using a toggle. I will see you in the next video.

[01:44 - 01:51] I will see you in the next video. I will see you in the next video.

[01:52 - 02:09] I will see you in the next video. In our app component, we import and register the new component and add it at the top above the resume.

[02:10 - 03:05] We need to add a label to make it clear what this toggle switch is for. Adding added mode should make it clear.

[03:06 - 03:32] Per default, we want the toggle to be on, so we add the attribute checked. We also add a click event listener that sends the value of event target checked along.

[03:33 - 03:53] Event target checked will contain true or false depending on if the checkbox is checked or not. When the toggle switch is active, the checkbox is checked.

[03:54 - 04:08] Now we are done with the added toggle component and we can take care of the necessary logic in the app component. We want to show or hide the edit buttons depending on whether the added toggle is on or off.

[04:09 - 04:24] For that, we will add the property editing to the data object and set its default value to true. We need to toggle this data property when we receive the event from the added toggle component.

[04:25 - 05:00] For that, we add an event listener that listens to the added mode toggle event. The event listener will have the added mode to the data object.

[05:01 - 05:10] The event listener receives the Boolean value contained in event.target.checked . So we will call this argument "is checked".

[05:11 - 05:33] In the event listener, we set the data property editing to the value of event target checked. Depending on which value the editing property holds, we will hide or show the added buttons.

[05:34 - 05:46] In view, we can dynamically toggle classes. For this, we use a dynamic class attribute with the vbind directive and then class attached to it.

[05:47 - 05:59] So colon class as an abbreviated version. colon class receives a JavaScript object that consists of a property and a value.

[06:00 - 06:09] The property is the CSS class that should be applied if the value evaluates to true. You can reference a data property here.

[06:10 - 06:26] As you can see in this example, we use the dynamic class attribute side by side with a normal class attribute. When the data property editing is false, the class added off will be added because we negate the value.

[06:27 - 06:36] If editing is true, no class will be added. This is what we want because the default should be added mode on.

[06:37 - 07:06] If the user toggles it off, the class will be added to the outer wrapper of the resume. We can reference this class within the edit buttons component and hide the edit buttons when editing is off.

[07:07 - 07:18] We have successfully added the added toggle switch and are able to hide and show the edit buttons. That is great and we are only missing one thing.

[07:19 - 07:37] The text can currently be edited even though edit mode is off because every text element has the content editable attribute equals to true. We can easily change that by turning content editable into a dynamic attribute with VBIND.

[07:38 - 07:47] I am using the search and replace feature here so I don't have to replace them one by one. We are using the search and replace feature.

[07:48 - 08:22] We are using the search and replace feature. We are using the search and replace feature.

[08:23 - 08:42] We are using the search and replace feature. We are using the search and replace feature.

[08:43 - 09:13] We are using the search and replace feature. In the components we also turn content editable into a dynamic attribute.

[09:14 - 09:22] This time the value is a prop. By turning the props registration we previously created as an array into an object.

[09:23 - 09:38] We can declare a default value just like we did in the edit buttons component. We are using the search and replace feature.

[09:39 - 09:58] We are using the search and replace feature. We are using the search and replace feature.

[09:59 - 10:40] We are using the search and replace feature. Now the text becomes editable or read only depending on the toggle switch.

[10:41 - 10:59] To signal this to the user we give the text a light gray background when editing is turned on. We will add the styling and main CSS file because the styling affects several components.

[11:00 - 11:08] Let's check it out in the browser. In my opinion the gray background makes it clearer where the user can edit and this is an improvement.

[11:09 - 11:18] Feel free to adjust the styling according to your preferences. I personally find the toggle switch a bit big and I want to change the colors from blue to black.

[11:19 - 12:32] So I am also adjusting that styling. [ Silence ] [ Silence ] [ Silence ] [ Silence ] [ Silence ] And with this, we wrap up the module about making the content editor.