2.4 Enhance the Functionality With Methods

In the previous lesson we enhanced our plugin by adding a setting. And then we modified the behavior of our plugin based upon that setting. Well we can also enhance our plugins by adding extra functionality through methods. But this is going to be a little bit different because whenever you think of a method, you think of, well, a method, like we would call the accordion method. And then let's say if we wanted to expand all of the items within our accordion, then we would normally say, okay, we'll just call the expand method. Now we can't do this, or well really we can, but the jQuery team doesn't want us to because, let's think about what this actually is. If we call the accordion method and then we call expand after that, well, this expanded method would actually be a plugin method. Because, if we remember how we implemented the accordion method, we did so on the prototype $.fn and then we are returning this. So in order to call an expand method on this, which is a jQuery object, then we would have to also define and expand method on $.fn. And we don't want to do that because then you end up with a plugin that is actually more than one plugin, it's several plugins. And you always run the risk of stepping on another plugin's toes or some other plugin stepping on our toes. Like expand is a common term, there might be another plugin called expand that would overwrite ours. So instead, we will access our methods by passing the name of the method to our accordion method. So this is what it would look like. If we wanted to expand all of the items, we would call accordion and then pass in expand. And if we wanted to collapse all of the items, then we would pass in collapse. And we could also set it up that if we needed to pass other arguments to expand or collapse, that we could do that as well, but we don't need to because expand and collapse are pretty simple. We don't need any extra data. So this is going to force us to check our type for options. If options is a string, then we want to try to execute a method. If it is not a string, then we can assume that we want to initialize our accordion just like we always have. And we're going to implement all of this by creating an object called methods. Now this is going to be defined outside of our accordion method, because we don't want to define it inside of it, because every time we call accordion, then this method's object would be created. So we are going to define it outside and then we are going to have three methods. We're going to have one called Init, that is going to be the method for initializing our plugin. It's basically going to be all of the code that we have right now, but we're going to cut it from here. In fact let's go ahead and do that and we're going to paste it inside of this Init method and then we are going to define two others. The first is going to be expand, so let's go ahead and write that. That's going to be a function that doesn't have any parameters and then we will also have collapse and we'll finish that function. So our code inside of the accordion method could look like this. We can go ahead and say that if methods and then if options is the name of a method, then this expression is going to be truthy. Then we're going to go ahead and execute that method. So we'll say methods and then options, but we want to call this within the context of our jQuery object. So we're going to call the call method. We'll pass in this. And really that's all that we need to do. Now if we needed to pass other arguments, then we would need to call Apply. And then we would still pass in this, but then we would slice our arguments, so that we would remove the first argument, which would be our options. And then pass in all of the remainder arguments, but in our case we don't need to do that, because our expand and our collapse methods are pretty simple. And we will also return these, because inside of expand and collapse, we are going to return this. So let's go ahead and add those statements there. So if we have a method, then we are going to execute it. Otherwise, we're just going to initialize our plugin. So we will do that with methods.init, we will use the Call method, pass in this, and we also need to pass in our options so that we can take advantage of those. And then finally, we will return the call to that. So if we go to the browser, we should see everything, well no. I would say that everything should be collapsed. We shouldn't see any problems here, but there is. Let's look at the console, see if there's any errors and there's not. So the problem isn't with some bad code. Let's go to index.html and there's the problem. We are calling the collapse method before we have initialized our accordion. So our methods are only going to work on an accordion that has been initialized and really that's what we want anyway. So let's do this, we'll say var ACC= and then we will initialize our accordion. If we go to the browser, then we see what's we have before and we haven't broken anything, thankfully. So let's go to the console and then we would call acc and then accordion, and then let's say that we wanted to expand them. Now we haven't completely implemented expand, so nothing is going to happen. But, at least, we don't have any errors, [LAUGH] whenever we try to call that. So, let's go back to our accordion, and let's implement that expand method. Now, basically, we want to do what we have done inside of our event listener except we want to do so on a grander scale. We want to select all of the panels and expand them. So we could do this by finding all of the div elements, but really our panels could have divs inside of them and we don't want to select those. Instead, we want to select only those panels. So we're going to do so based upon our accordion-panel class. And then we want to add that data-active attribute, because we are expanding them, we want them to have this. So data-active is true, and then we want to expand them. So we are going to call the slideDown method. We don't want to call slideToggle. Because if we already have one item that is expanded and then we call the expand method, then it would expand everything that is currently collapsed and it would collapse everything that has currently been expanded. So we want to ensure that we are sliding down everything. And we basically want to do the reverse in the collapse method. In fact, we already have that code where we are finding all of the active items, we are removing that attribute and then toggling the slide. But in this case, we want to slideUp instead of slideToggle. So let's change that. We also need to change this variable to just plain this. And we should be good to go. So let's go back to the browser. Let's do acc.accordion and then we will call the expand the method. All of those items expanded. Let's call the collapse method and they all collapse. So enhancing a plugin with extra functionality by providing methods is relatively straightforward. Once you realize how the jQuery team wants you to implement those methods, it becomes pretty simple.