drupal views responsive tables and the enlightenment process

Christopher Bloom (illepic)

SuperStar Media

Goal

Make


Play nice with


Solution

Just write a custom module, find the right hook and make a new views plugin display format that adds a class to the table and injects both the Zurb javascript and css file.


Everyone's First Reaction


Drupal Learning curve


"But we're Front-enders!"


Like everything in Drupal, there are dozens of ways to reach the same outcome.

We could accomplish responsive tables using just the theme layer, but should we?

Let's do it the right way.

Thought process

According to Zurb, we need the following for responsive tables:
  1. A javascript file (responsive-tables.js)
  2. A CSS file (responsive-tables.css)
  3. A class on our table (<table class="responsive">)

Thought Process

At the Drupal level we know:

  1. We want to select a Views "format" for responsive tables like we already do for "HTML list" or "Table"

  2. This is probably a "views plugin" or something.
  3. Many other modules do exactly this already

Implementation

OK, so the first thing we're going to do is pull up all the Views 3.0 api information and start reading.


Implementation for reals

Let's find an existing module that does something similar already.

Googling "drupal views plugin table" strikes gold with Views Hacks, specifically submodule Views Flipped Table.

 

Repo

Follow along:

A quick word about knowing what to do

  1. Start with a conceptual grasp ("Our view needs a display plugin")
  2. Dig through others' code
  3. Write your own from what you've learned
  4. Strengthen grasp
  5. Repeat


From here on out, we're going to use Views Flipped Table as our guide (Step 2-3).

(I've never had an original thought in my life and most people are WAY better at this than me.)

Starting Off

responsive_tables.info
name = Responsive tables
description = Zurb responsive tables
core = 7.x
dependencies[] = views

files[] = responsive_tables.module
files[] = responsive_tables.views.inc
files[] = responsive_tables_plugin_style_responsive_table.inc

Views api and Views Hooks

responsive_tables.module
function responsive_tables_views_api() {
  return array(
    'api' => 3.0,
  );
}

We'll come back to the following

function responsive_tables_preprocess_views_view_table(&$vars) {
  // hook just views that have our style plugin
  if ($vars['view']->style_plugin->plugin_name == 'responsive'){
    // add the class that zurb wants
    $vars['classes_array'][] = 'responsive';
    // add the css that zurb expects
    drupal_add_css(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.css');
    // add the slightly modified js that zurb wants
    drupal_add_js(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.js');
  }
}

Defining a Views plugin

responsive_tables.views.inc
function responsive_tables_views_plugins() {
  return array(
    'style' => array(
      'responsive' => array(
        'title' => t('Responsive tables'),
        'help' => t('Displays a Zurb responsive table'),
        'handler' => 'responsive_tables_plugin_style_responsive_table',
        'parent' => 'table',
        'uses row plugin' => FALSE,
        'uses fields' => TRUE,
        'uses options' => TRUE,
        'type' => 'normal',
        'theme' => 'views_view_table',
        'even empty' => TRUE,
      ),
    ),
  );
}

Views pLugin Custom Fields

class responsive_tables_plugin_style_responsive_table extends views_plugin_style_table {
  
  function option_definition() {
    $options = parent::option_definition();
    $options['responsive_tables_add_awesomesauce'] = array('default' => TRUE);
    return $options;
  }

  function options_form(&$form, &$form_state) {
    parent::options_form($form, $form_state);
    $form['responsive_tables_add_awesomesauce'] = array(
      '#type' => 'checkbox',
      '#title' => t("Add awesomesauce?"),
      '#default_value' => $this->options['responsive_tables_add_awesomesauce'],
      '#description' => t("A demo of a checkbox that can be used in a views plugin form."),
    );
  }
}

Check for View display, add CSS/JS

responsive_tables.module (again)

function responsive_tables_preprocess_views_view_table(&$vars) {
  // hook just views that have our style plugin
  if ($vars['view']->style_plugin->plugin_name == 'responsive'){
    // add the class that zurb wants
    $vars['classes_array'][] = 'responsive';
    // add the css that zurb expects
    drupal_add_css(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.css');
    // add the slightly modified js that zurb wants
    drupal_add_js(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.js');
  }
}

A note about the busted JS library


Add to the top of responsive-tables.js

$ = jQuery;

(Suggestions from the audience for a less janky way to do this?)

IT WERKZ


Reverse Engineering Views PLugins

  1. hook_views_plugins() - Define a style and various facts about the style
  2. Extend views_plugin_style_table with our (fake) views style options
  3. Preprocess any view that has our display and add in Zurb's classes,  CSS,  and JS!

Thank you!


drupal views responsive tables and the enlightenment process

By Christopher Bloom

Made with Slides.com

drupal views responsive tables and the enlightenment process

  • 5,073

More from Christopher Bloom