static function responsive_grid(array $wrapper_settings) { global $wrapper_css_flags; /* If wrapper is mirrored then use settings from it for the grid */ if ($potential_wrapper_mirror = HeadwayWrappers::get_wrapper_mirror($wrapper_settings)) { $wrapper_settings = $potential_wrapper_mirror; } $round_precision = 9; $return = ''; $grid_number = headway_get('columns', $wrapper_settings); $column_width = headway_get('use-independent-grid', $wrapper_settings) ? headway_get('column-width', $wrapper_settings) : HeadwayOption::get('column-width', false, HeadwayWrappers::$default_column_width); $gutter_width = headway_get('use-independent-grid', $wrapper_settings) ? headway_get('gutter-width', $wrapper_settings) : HeadwayOption::get('gutter-width', false, HeadwayWrappers::$default_gutter_width); /* Render the Grid into arrays to see if sub column CSS will be needed */ $wrapper_blocks = HeadwayBlocksData::get_blocks_by_wrapper(headway_get('layout-in-use'), $wrapper_settings['id']); $wrapper_rendered = new HeadwayGridRenderer($wrapper_blocks, $wrapper_settings); /* Process the blocks into arrays */ $wrapper_rendered->process(); $blocks_in_sub_columns = !empty($wrapper_rendered->blocks_in_sub_columns) ? true : false; /* Keep extraneous CSS from be created by wrappers that have the same settings */ $grid_class = 'grid-fluid-' . $grid_number . '-' . $column_width . '-' . $gutter_width; /* If there are no sub columns and the main CSS has already been outputted, just stop here */ if (isset($wrapper_css_flags[$grid_class]) && !$blocks_in_sub_columns) { return; } /* End extraneous CSS check */ /* Make calculations for the percentages */ $grid_wrapper_width = $column_width * $grid_number + ($grid_number - 1) * $gutter_width; $resp_width_ratio = $column_width * $grid_number / $grid_wrapper_width; $resp_gutter_ratio = $gutter_width * $grid_number / $grid_wrapper_width; $resp_single_column_width = 100 / $grid_number * $resp_width_ratio; $resp_single_column_margin = 100 / $grid_number * $resp_gutter_ratio; /* Add CSS prefix */ $prefix = 'div.' . $grid_class . ' '; /* Generate the main Grid CSS */ if (!isset($wrapper_css_flags[$grid_class])) { $return .= $prefix . '.column { margin-left: ' . round($resp_single_column_margin, $round_precision) . '%; }' . "\n"; for ($i = 1; $i <= $grid_number; $i++) { /* Vars */ $resp_grid_width = $resp_single_column_width * $i + $i * $resp_single_column_margin; $resp_grid_left_margin = ($resp_single_column_width + $resp_single_column_margin) * $i + $resp_single_column_margin; /* Output */ $return .= $prefix . '.grid-width-' . $i . ' { width: ' . round($resp_grid_width - $resp_single_column_margin, $round_precision) . '%; }' . "\n"; if ($i < $grid_number) { $return .= $prefix . '.grid-left-' . $i . ' { margin-left: ' . round($resp_grid_left_margin, $round_precision) . '%; }' . "\n"; } } /* Create a flag keeping this same Grid CSS from being outputted */ $wrapper_css_flags['grid-fluid-' . $grid_number . '-' . $column_width . '-' . $gutter_width] = true; } /* End main grid CSS */ /* Responsive Sub Column CSS */ if ($blocks_in_sub_columns) { /* Get the columns required for sub columns */ $required_columns_for_sub_columns = array(); foreach ($wrapper_rendered->blocks_in_sub_columns as $block_in_sub_column_id) { if (isset($wrapper_rendered->blocks[$block_in_sub_column_id]['parent-column-width'])) { $required_columns_for_sub_columns[] = $wrapper_rendered->blocks[$block_in_sub_column_id]['parent-column-width']; } } $required_columns_for_sub_columns = array_filter(array_unique($required_columns_for_sub_columns)); /* End getting columns required for sub columns */ for ($i = 1; $i <= $grid_number; $i++) { /* Don't output the sub column CSS if there's no column of this number with sub columns and don't output it if has already by a previous wrapper. */ if (!in_array($i, $required_columns_for_sub_columns) || isset($wrapper_css_flags['grid-fluid-' . $grid_number . '-' . $column_width . '-' . $gutter_width . '-sub-columns-column-' . $i])) { continue; } /* Vars */ $resp_grid_width = $resp_single_column_width * $i + $i * $resp_single_column_margin; $resp_grid_left_margin = ($resp_single_column_width + $resp_single_column_margin) * $i + $resp_single_column_margin; $sub_column_single_width = $resp_single_column_width / $resp_grid_width * 100; $sub_column_single_margin = $resp_single_column_margin / $resp_grid_width * 100; $return .= $prefix . '.grid-width-' . $i . ' .sub-column { margin-left: ' . round($sub_column_single_margin, $round_precision) . '%; }' . "\n"; for ($sub_column_i = 1; $sub_column_i < $i; $sub_column_i++) { /* Sub column vars */ $sub_column_width = $sub_column_single_width * $sub_column_i + $sub_column_i * $sub_column_single_margin; $sub_column_margin = ($sub_column_single_width + $sub_column_single_margin) * $sub_column_i + $sub_column_single_margin; $return .= $prefix . '.grid-width-' . $i . ' .sub-column.grid-width-' . $sub_column_i . ' { width: ' . round($sub_column_width - $sub_column_single_margin, $round_precision) . '%; }' . "\n"; $return .= $prefix . '.grid-width-' . $i . ' .sub-column.grid-width-' . $sub_column_i . '.column-1 { width: ' . round($sub_column_width, $round_precision) . '%; }' . "\n"; $return .= $prefix . '.grid-width-' . $i . ' .sub-column.grid-left-' . $sub_column_i . ' { margin-left: ' . round($sub_column_margin, $round_precision) . '%; }' . "\n"; $return .= $prefix . '.grid-width-' . $i . ' .sub-column.grid-left-' . $sub_column_i . '.column-1 { margin-left: ' . round($sub_column_margin - $sub_column_single_margin, $round_precision) . '%; }' . "\n"; } /* Create a flag keeping this same sub column CSS from being outputted */ $wrapper_css_flags['grid-fluid-' . $grid_number . '-' . $column_width . '-' . $gutter_width . '-sub-columns-column-' . $i] = true; } } /* End responsive sub column CSS */ return $return; }
public function display() { if (!$this->blocks) { return $this->display_no_blocks_message(); } foreach ($this->wrappers as $wrapper_id => $wrapper_settings) { $wrapper_id_for_blocks = $wrapper_id; /* Check if mirroring. If mirroring, change wrapper ID to the wrapper being mirrored and preserve original ID for a later class */ if ($wrapper_being_mirrored = HeadwayWrappers::get_wrapper_mirror($wrapper_settings)) { $mirrored_wrapper_id = $wrapper_being_mirrored['id']; $wrapper_id_for_blocks = $mirrored_wrapper_id; foreach (HeadwayBlocksData::get_blocks_by_wrapper($wrapper_being_mirrored['layout'], $mirrored_wrapper_id) as $block_from_mirrored_wrapper) { $this->blocks[$block_from_mirrored_wrapper['id']] = $block_from_mirrored_wrapper; } } /* Grab blocks belonging to this wrapper */ $wrapper_blocks = array(); foreach ($this->blocks as $block_id => $block) { if (headway_get('wrapper', $block, HeadwayWrappers::$default_wrapper_id) === $wrapper_id_for_blocks) { $wrapper_blocks[$block_id] = $block; } /* If there's only one wrapper and the block does not have a proper ID or is default, move it to that wrapper */ if (count($this->wrappers) === 1 && (headway_get('wrapper', $block) === null || headway_get('wrapper', $block) == 'wrapper-default' || !isset($this->wrappers[headway_get('wrapper', $block)]))) { $wrapper_blocks[$block_id] = $block; } } /* Setup wrapper classes */ $wrapper_column_width = headway_get('use-independent-grid', $wrapper_settings) ? headway_get('column-width', $wrapper_settings) : HeadwayOption::get('column-width', false, HeadwayWrappers::$default_column_width); $wrapper_gutter_width = headway_get('use-independent-grid', $wrapper_settings) ? headway_get('gutter-width', $wrapper_settings) : HeadwayOption::get('gutter-width', false, HeadwayWrappers::$default_gutter_width); $wrapper_classes = array('wrapper'); $wrapper_classes[] = $wrapper_settings['fluid'] ? 'wrapper-fluid' : 'wrapper-fixed'; $wrapper_classes[] = HeadwayResponsiveGrid::is_active() ? 'responsive-grid' : null; $wrapper_classes[] = headway_get('use-independent-grid', $wrapper_settings) ? 'independent-grid' : null; $wrapper_classes[] = 'grid-' . ($wrapper_settings['fluid-grid'] || HeadwayResponsiveGrid::is_enabled() ? 'fluid' : 'fixed') . '-' . $wrapper_settings['columns'] . '-' . $wrapper_column_width . '-' . $wrapper_gutter_width; $wrapper_classes[] = $wrapper_being_mirrored ? 'wrapper-mirroring-' . HeadwayWrappers::format_wrapper_id($mirrored_wrapper_id) : null; $last_wrapper_id = array_slice(array_keys($this->wrappers), -1, 1); $last_wrapper_id = $last_wrapper_id[0]; $first_wrapper_id = array_keys($this->wrappers); $first_wrapper_id = $first_wrapper_id[0]; if ($last_wrapper_id == $wrapper_id) { $wrapper_classes[] = 'wrapper-last'; } else { if ($first_wrapper_id == $wrapper_id) { $wrapper_classes[] = 'wrapper-first'; } } /* Custom wrapper classes */ $custom_css_classes = explode(' ', str_replace(' ', ' ', str_replace(',', ' ', htmlspecialchars(strip_tags(headway_get('css-classes', $wrapper_settings, '')))))); $wrapper_classes = array_merge($wrapper_classes, $custom_css_classes); /* Display the wrapper */ do_action('headway_before_wrapper'); echo '<div id="' . $wrapper_id . '" class="' . implode(' ', array_unique(array_filter($wrapper_classes))) . '">' . "\n\n"; do_action('headway_wrapper_open'); $wrapper = new HeadwayGridRenderer($wrapper_blocks, $wrapper_settings); $wrapper->render_grid(); do_action('headway_wrapper_close'); echo '</div><!-- .wrapper -->' . "\n\n"; do_action('headway_after_wrapper'); /* End displaying wrapper */ } }