7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 A Very Simple Toolbar

Now we'll write a very simple toolbar that will give us an easy-to-use API for manipulating the underlying elements in the DOM. This API will also provide custom events with the previous lesson's event system.

5.2 A Very Simple Toolbar

When I hear the phrase Object-Oriented JavaScript, I immediately think of the UI because that is the perfect place where we can design an API that sits on top of the DOM that makes it easier to manipulate the things that we need to manipulate. That's why I chose to do a UI component for this course. Now what we are going to write is a very, very simple toolbar. Now I cannot stress enough that this is extremely simple. 98% of the functionality is not going to be here. We are however going to implement a few things like enabling and disabling toolbar items. We will also be able to add items, but that's about it. So let's go ahead and let's look at what it looks like. It's not pretty, but it's going to serve our purposes. We have a toolbar which is the gray area, and inside of the toolbar our toolbar items. They are individual elements and they will essentially be individual objects that we can then manipulate by enabling them or disabling them. And if we look at the HTML we see that it is extremely simple. We have a div element with an idea of my toolbar. It has a class of toolbar and then we have the individual toolbar items, and they have a class called toolbar-item. Now there is a class called disabled. So whenever we disable an item we are going to be adding this disabled class to the elements representing a toolbar item. And then whenever we enable that item again, we will remove that class. So let's get started. Let's add a new JavaScript file, and I'm just going to call it toolbar. Now, the things that we're going to write in this lesson are going to inherit from event target. So let's go ahead and import EventTarget, and that is in the eventtarget.js file. And we will have two objects, we will have the toolbar and then we will have the toolbar item. So let's go ahead and define those classes. So the first is Toolbar. We'll go ahead and say that it extends EventTarget. And let's go ahead and write the beginning of the constructor. Now inside of a constructor that extends a class, we need to call super. In fact we will get an error, if we don't. So the first thing we need to do is call super here. Even though we aren't passing anything to it as just copied this and paste it and then this will be ToolbarItem. And that will also inherit EventTarget and call the super constructor. Now, whenever I am writing more complex components, I like to start with the smallest piece. Not necessarily code wise but in regards to a toolbar, we have the toolbar and then we have the ToolbarIems inside of that toolbar. So let's start with the ToolbarItem class. We will write that, and then we will focus on the toolbar. Now if we look at the markup, a ToolbarItem is just a span element. So our toolbar class is going to wrap around that span element. And we need that element as a parameter to the constructor. And then after we call super, we want to store the reference to this element object. Now we don't really want this to be publicly available. So let's use a weak map to store our private data. So let's map = new WeakMap, and that will give us our data store. And then inside of this constructor, we will say map.sets. We will pass in this. And let's just call this property el for element. And that's really all that we need to do here in the constructor. Now the ToolbarItem is going to have a single property called enabled. So that we can either enable it by assigning it to true or we can disable it by assigning it to false. So let's start with the getter and it will be called enabled. And in order to determine if a ToolbarItem is enabled or disabled, we will look at the classes applied to that element. If it has the disabled class, then we know that the ToolbarItem is disabled. So we will return, and we want to get our elements from our map. Now we're going to be retrieving information from our WeakMap quite a bit. So let's write a function, let's just call it data and we will accept an object. And we will simply return map.get, and we will pass an object. That will save us a little bit of keystrokes. So we will have data, we will pass in this then we will have our elements and we will use the classList, and we want to check if it contains disabled. However, if this is true then that means that the ToolbarItem is disabled so we want to reverse that. So if not classless contains disabled, then we know that it is enabled. Let's write the setter. And this is going to be a little bit more involved. We need to accept a value. And the first thing we need to do is make sure that the value that was passed is not the same as the current state of our item. So if (this.enabled = value) then we just want to return because there's nothing else that we need to do. However, if it's different then we want to either add or remove the disabled class. Now we can do that with if value, and then remove the class and then have an else to add it. But let's do this. Let's create a variable called method. And we will check if value you is true, if it is then the method that we want to use is remove cuz that will remove the disabled class otherwise we want to use the add method. So then we will say data(this). We want our elements classList, and here we are going to use that method and then we will pass in disabled. So we will call the remove method if the value is true, if it's false we will call the add method. And if we are changing the state of this ToolbarItem, let's go ahead and fire an event. And we can call it enabled change. And so we want to call super because that is where the fire events method is. And the name is ("enabledchange") and for our object we could pass in the new value. So we can see value is value and of that ought a work. Well, let's move on to the toolbar class. And for the constructor, we kind of wanted to do the same thing that we did for the ToolbarItem. We want the div element that is serving as the toolbar. So we will except that in the constructor and then we will store that in private data. So once again, we will use math set this. And we will have our el property which is going to be our element. Now we will also need to get to the existing items in the toolbar because as we can see in the browser there are three here. So whenever we create a toolbar object, we want to go ahead and find all of the items with in the toolbar. Create those toolbar item objects and store them within an array that we will just call items. So let's do let items = array. And then we want to get all of those elements. So we will call this variable item elements. And we will use the query selector all method. That way we can select all of the elements that have a class of toolbar-item. And then we want to create a ToolbarItem object for each one of these elements. And we can do that with a loop, so let's use the forEach loop. We will call it using our itemElements. And then our function is just going to have that element item. So inside of the function, we will create the item object itself so we will create a new ToolbarItem. We will pass in the element, and then we will push that item into our items array and that will give us the existing items within the toolbar. So then we can also store this inside of our week map. So let's call this property items and we will just set that to items as well. Next, we want to write a method that will add a new item to our toolbar. Now, normally we would accept some options, so that we could create whatever item that we needed to. So if it had an image or text or things like that, then we would have those options. We're not going to worry about that. We are just going to dynamically create span elements, assign them their necessary class name and then add them to the toolbar. So let's start by getting our private data. Let's just call it d to be lazy, and we want to call data and we will pass in this. So we have our private data. Next we want to create our span element. So we will do so with the create element method and passing in span. Now the class is going to be that toolbar item class. So we will set className to toolbar-item. And then we want to append this span element to our toolbar. So d.el and then append child, and we will pass in span. Now after we do that we need to create our toolbar item for this new span element. So let item = new ToolbarItem. We will pass in that span element and then we will push that item into our items. So d.items.push and then item. And this is also a place where we could fire an event. If we add an item to the toolbar. It would be nice to know when that happens. So let's fire the event and let's just call this ("itemadded"). I don't really like that name but that's going to be fine. And as far as data is concerned we could supply the item that was added to the toolbar. So we will just call that item, and as far as the add method is concerned that should be all that we need to do. Let's write a property that's going to let us get the items. So that will be a getter. We don't want a setter here, just a getter. And we will return map.gets this and then our items. So we have two classes, a toolbar class and a ToolbarItem class, and everything should just work. Now we just need to see if it's going to work. Let's export toolbar. Now, we could export toolbar item if we wanted to. Let's leave this private for now. We might want to expose that later on. That just depends upon what our goals are. Oh, and we also need to import. Oh, we already did that. I was gonna say, we need to import event targets but we did so. But inside of the HTML file, we will need to import our toolbar. So let's imports and toolbar from, and the file was toolbar.js. Let's create our toolbar object. Let's just call it tb = new Toolbar(). And we want to pass in the div element. So document.getElemnentById, that id is ("myToolbar"). And that will give us our toolbar. So then we could add a listener on the toolbar for the ("itemadded"). And then our function which we can just say, alert and then (e.type). Now did I call that itemadded? I think I did. We can easily go back and check. And let's see add, add, add itemadded there it is. So that is the event. And now let's set up an events for one of the items on the toolbar, so we can say tb.items. Let's do the first item, and we want to listen for enabled changed. And here we have the values. So let's do e.value, and then let's make these events fire, so we will call the add method on the toolbar and then we will disable the first item in the toolbar. So then we will say, enabled = false; and so now the moment of truth. Let's go to the browser. Let's refresh, and hopefully we will see some results. We do. An item was added to the toolbar, and we see the event item added. So now we should see false for when the first item was disabled. That new value is false so that's what we see. So using Object-Oriented JavaScript, we made it a lot easier to manipulate the elements within our UI. Now of course this was a very, very simple example. But you can see with just a little bit of work, we can make it very easy to do the things that we need to do within our UI. But of course, Object-Oriented JavaScript principles can be applied anywhere. It doesn't have to be the UI. Anything can benefit from Object-Oriented design.

Back to the top