Multiple Views Part 2

By adam
Thu, 2014-08-21 06:47
Daily Dose of Drupal Episode #163

Share with Others

In part 2 of the multiple views series you will learn how to add the jQuery needed to switch between multiple classes. By having the ability to use multiple classes, we will (in part 3) be able to use CSS to change the look and feel of the same view.

Here is the jQuery code used to switch between grid and list view:

    //Sets default class for course views and toggles class when changing view.
    $('#content').once('course-view', function() {
      if ($(".view").hasClass("course-view")) {
        $(".view").addClass("grid-view"); // Sets .grid-view as default class on the view
        $(".list").click(function() {      
          if ($(".view").hasClass("grid-view")) {
            $(".view").addClass("list-view"); // adds .list-view to the view class
            $(".view").removeClass("grid-view"); // removes .grid-view from the view class
        $(".table").click(function() {
          if ($(".view").hasClass("list-view")) {
            $(".view").addClass("grid-view"); // adds .grid-view to the view class
            $(".view").removeClass("list-view"); // removes .list-view from the view class

Hi everybody and welcome to Code Karate and another edition of the Daily Dose of Drupal. Today we’re on Episode Number 163 and making our way to 200. This is the second series or video to an earlier part on building a custom view and using Java Script with CSS to switch between of a grid view and a list view.

I’ll provide on the comments below a link back to the other video. But today we’re going to be using Java Script to change classes so we can then style and change between a list and a grid view. I’m going to give you an idea again if you’re not familiar with the first video.

This is what we’re trying to accomplish. We’re trying to spill the search between a list view and a grid view all at the same time view on Drupal. So that’s what we’re going to do at the end but today we’re just focusing on be able to switch this VC, there’s a grid view here, switch to in that in the list view so we can menu CSS as to styling, I’m going to then change the outlook of the view.

So that’s what we’re going to be doing here in the next minute. Before we get started though, again, Code Karate, make sure to check out our EBook, do yourself a favor there and get that for yourself because to follow myself and Shane on Twitter. I’m @ AdamLearing and Shane is @ smthomas3. I appreciate that.

Alright let’s get started. Again this is the second series, the first series we did go through building the content type and the View. So we’ll start by looking at the View that we built. So here’s the View, barely a simple View. We’re just pulling in the different fields with the content type, type of body, height, picture, weight and then a custom text field which we’re using to override the output. So there you can see how we are displaying it. I built this custom. So we’re just using the different replacement patterns for the fields.

So now that we have the View built and you saw that one when it first started. One thing we need to do is we need to add a trigger to be able to switch between a list and a grid view. That can easily be done by just adding in header text into the View. I kind of cheated and done a little bit of this before I got started the video but I’m going to walk you through what I did. So all I did is I made a simple Div with a couple of A links inside.

So you see here I have A link with a class of Table and then an A link with a class of List. These are going to be my two triggers that switch between obviously a table and a list view. Nothing really revolutionary about HTML but just something that we can actually click on. So the other thing that you’ll want to do and that’s just how I built my Java Script. You don’t necessarily have to do it this way. You could build your own Java Script but you’re following on and you want to actually add course view as a class on the view.

This is just adds right under the wrapper of all on the view so we’ll just have a classic course view that we can use the Call from. So that’s only additional changes you’re going to make to your view to get this to work. So once you save your view I will show you what it should look like at least via HTML. And you may develop to pull up. There we go. Alright so in the HTML here we’ll be able to see here’s the header I put in. So again just a simple Div with a class of table and a class of list. Also you’ll see right here is the course View Class that I added. And again we’re just using that to call the View, nothing else pertinent there.

So now let’s hop over to our Java Script file. Again I did a little bit of work here before you…just going to want to waste time watching me type but I added on all the Java Script that we’ll need to make this work. And again I’ll add this in the post so if you want you just copy and paste it directly and use it for your own sites. But I will walk you through here quickly on what’s going on.

One thing I’ve note is I’m using just Zen subtheme from my Java Script stuff. But make sure again if you do your Zen, that you comment out the [inaudible - 0:04:39.4] scripts, it initially comes out uncommented, otherwise you can’t scripts like JS file and then it’ll frustrate you because it won’t read in. But once that’s done, you save it, make sure you’re aggregating Java Script and all that stuff so it actually does read in. But once you master all those, it looks easy techniques we get to the Java Script.

So for those of you who are not too familiar with Java Script I’m going to walk you through this. Bear with me if you are familiar or just skip along and get to the point where you learn something. But in general here, what’s going on is we’re saying for the Java Script to look at the content and once you find this course view class, and that’s where I put that course view on the View. So once you find that, if the view class and I’ll jump over here back to my thing. So if this view class right here has a class of course view which it does. So we add it then we want to add a class to the view of grid view. So that’s basically the page loads, before anything happens, this is what the grid view will be loaded.

So as you see if I refresh the page here you’ll see now there’s a grid view added. Because what’s going on is it’s saying if the view has a class of course view which it does, so it checks that, then we’re going to add a class to the view of grid view. So there you go. So now we can always use that to style based on and I’ll show you that on the next video but now we have some unique class that separates us from the list versus a grid view. So let’s take it one step further. So now that we have the grid view of this, what if I click on List, I needed this Grid view to switch to list view. So that’s what’s going on here.

So if I click List, so again in my view header, you’ll see here if I click List or this button right here, A tag, then I need to do this, I need to say if the class has a grid view, which it does. View has grid view, then I need to add the list view class and then immediately after I need to remove the grid view class. So when I click this list view you should look down right here in this grid view.

You’ll see the grid view will go away and list view will take its place. And there it goes. So what’s happening again is we’re adding a class of list view and immediately removing a class of grid view. So there’s two things going on there but they happen so fast that we can’t tell. So then if I click…I’m not in there. If I go back to my Java Script and say it’s now on list view and now I want to go back to grid view which is drop down a little bit further, is that if I click Table, its right here, then if it has class list view which it does, then did the exact opposite thing. We’re going to add the class of grid view and then remove class of list view. So we click table, there we go. Switch it back to grid view versus list view.

And obviously I can switch back and forth and then of course once add styling which we’ll see in this third video, we’ll be able to do this like you said. We’ll be able to switch the output. So it looks like we have two separate views but the secret is it’s all running up the same view. We’re just using CSS to display different outputs. Alright I think that’s what I wanted to cover, all I wanted to cover in this. Again I’m going to provide you with this code in this post on Episode 163 and then in Episode 164 we’re actually going to take if you have to change the styling with some CSS, nothing too crazy.
Obviously you can feel free to do your own unique styling and stuffs like that but that’s what we’ll cover in episode 163. I think everything else is covered. So that’s your work for today, again what we covered is we just covered a way to build your Java Script to be able to switch between two different classes so then we can use CSS as our styling agent. So that’s it. Alright guys, until episode 164. Take care.