You are here

function theme_layout_responsive in Layout 7

Draw the responsive layout.

@todo Embeddig the grid CSS inline is evil. Fix it.

1 call to theme_layout_responsive()
theme_layout_responsive_admin in plugins/layouts/responsive.inc
Draw the responsive layout admin interface.

File

plugins/layouts/responsive.inc, line 207

Code

function theme_layout_responsive($vars) {
  $css_id = $vars['css_id'];
  $content = $vars['content'];
  $settings = $vars['settings'];
  $display = $vars['display'];
  $layout = $vars['layout'];
  $handler = $vars['renderer'];
  layout_responsive_merge_default_settings($settings, $layout);
  $breakpoints = layout_breakpoint_load_all();
  $grids = gridbuilder_load_all();

  // Render the regions ordered as configured with minimal wrappers.
  $output = '';
  $breakpoint_counters = array();
  foreach ($content as $name => $rendered) {
    if (!empty($rendered)) {

      // Add a minimal wrapper with some common classes + configured custom classes.
      // The custom classes are used for grid placement.
      $classes = array();
      $classes[] = 'layout-responsive-region';
      $classes[] = 'layout-responsive-region-' . $name;
      $classes[] = 'rld-col';

      // Add breakpoint specific column number classes.
      foreach ($settings['overrides'] as $breakpoint_name => $breakpoint_overrides) {

        // Initialize breakpoint counter. We use this counter to figure out when
        // to inject 'first' regions depending on breakpoints. This ensures the
        // spacing of regions is properly maintained.
        if (!isset($breakpoint_counters[$breakpoint_name])) {
          $breakpoint_counters[$breakpoint_name] = 0;
        }

        // Assume that this column will span the whole width.
        $this_column = $all_columns = $grids[$breakpoints[$breakpoint_name]->grid_name]->columns;

        // If the existing counters indicate we were at the end of a row with
        // the previous region, mark this one up as being the first.
        if (is_int($breakpoint_counters[$breakpoint_name] / $all_columns)) {
          $classes[] = 'rld-span-' . $breakpoint_name . '_first';
        }

        // Check if we have region specific overrides for this breakpoint.
        foreach ($breakpoint_overrides as $region_override) {
          if ($region_override['name'] == $name) {

            // Found a region override. Modify the column width to this value.
            $this_column = $region_override['columns'];
            break;
          }
        }
        $classes[] = 'rld-span-' . $breakpoint_name . '_' . $this_column;
        $breakpoint_counters[$breakpoint_name] += $this_column;
      }
      $output .= '<div class="' . join(' ', $classes) . '">';
      $output .= $rendered;
      $output .= '</div>';
    }
  }

  // Embed the grid css inline for now. Yeah, I know this is evil.
  // It is just a prototype for now, ok? I know it is evil. Yes.
  $grid_css = layout_breakpoint_get_css();
  drupal_add_css($grid_css, array(
    'type' => 'inline',
  ));
  return '<div class="panel-responsive clearfix">' . $output . '</div>';
}