/** * Generate the CSS for the page layout. * * @param $post_id * @param $panels_data * @return string */ function siteorigin_panels_generate_css($post_id, $panels_data = false) { // Exit if we don't have panels data if (empty($panels_data)) { $panels_data = get_post_meta($post_id, 'panels_data', true); } if (empty($panels_data) || empty($panels_data['grids'])) { return; } // Get some of the default settings $settings = siteorigin_panels_setting(); $panels_tablet_width = $settings['tablet-width']; $panels_mobile_width = $settings['mobile-width']; $panels_margin_bottom = $settings['margin-bottom']; $panels_margin_bottom_last_row = $settings['margin-bottom-last-row']; $panels_data = apply_filters('siteorigin_panels_data', $panels_data, $post_id); $css = new SiteOrigin_Panels_Css_Builder(); $ci = 0; foreach ($panels_data['grids'] as $gi => $grid) { $cell_count = intval($grid['cells']); $grid_id = !empty($grid['style']['id']) ? (string) sanitize_html_class($grid['style']['id']) : intval($gi); // Add the cell sizing for ($i = 0; $i < $cell_count; $i++) { $cell = $panels_data['grid_cells'][$ci++]; if ($cell_count > 1) { $width = round($cell['weight'] * 100, 3) . '%'; $width = apply_filters('siteorigin_panels_css_cell_width', $width, $grid, $gi, $cell, $ci - 1, $panels_data, $post_id); // Add the width and ensure we have correct formatting for CSS. $css->add_cell_css($post_id, $grid_id, $i, '', array('width' => str_replace(',', '.', $width))); } } // Add the bottom margin to any grids that aren't the last if ($gi != count($panels_data['grids']) - 1 || !empty($grid['style']['bottom_margin']) || !empty($panels_margin_bottom_last_row)) { // Filter the bottom margin for this row with the arguments $css->add_row_css($post_id, $grid_id, '', array('margin-bottom' => apply_filters('siteorigin_panels_css_row_margin_bottom', $panels_margin_bottom . 'px', $grid, $gi, $panels_data, $post_id))); } $collapse_order = !empty($grid['style']['collapse_order']) ? $grid['style']['collapse_order'] : (!is_rtl() ? 'left-top' : 'right-top'); if ($cell_count > 1) { $css->add_cell_css($post_id, $grid_id, false, '', array('float' => $collapse_order == 'left-top' ? 'left' : 'right')); } if ($settings['responsive']) { if ($settings['tablet-layout'] && $cell_count >= 3 && $panels_tablet_width > $panels_mobile_width) { // Tablet Responsive $css->add_cell_css($post_id, $grid_id, false, '', array('width' => '50%'), $panels_tablet_width); } // Mobile Responsive $css->add_cell_css($post_id, $grid_id, false, '', array('float' => 'none', 'width' => 'auto'), $panels_mobile_width); for ($i = 0; $i < $cell_count; $i++) { if ($collapse_order == 'left-top' && $i != $cell_count - 1 || $collapse_order == 'right-top' && $i !== 0) { $css->add_cell_css($post_id, $grid_id, $i, '', array('margin-bottom' => $panels_margin_bottom . 'px'), $panels_mobile_width); } } } } if ($settings['responsive']) { // Add CSS to prevent overflow on mobile resolution. $css->add_row_css($post_id, false, '', array('margin-left' => 0, 'margin-right' => 0), $panels_mobile_width); $css->add_cell_css($post_id, false, false, '', array('padding' => 0), $panels_mobile_width); } // Add the bottom margins $css->add_cell_css($post_id, false, false, '.so-panel', array('margin-bottom' => apply_filters('siteorigin_panels_css_cell_margin_bottom', $panels_margin_bottom . 'px', $grid, $gi, $panels_data, $post_id))); $css->add_cell_css($post_id, false, false, '.so-panel:last-child', array('margin-bottom' => apply_filters('siteorigin_panels_css_cell_last_margin_bottom', '0px', $grid, $gi, $panels_data, $post_id))); // Let other plugins customize various aspects of the rows (grids) foreach ($panels_data['grids'] as $gi => $grid) { // Rows with only one cell don't need gutters if ($grid['cells'] <= 1) { continue; } $grid_id = !empty($grid['style']['id']) ? (string) sanitize_html_class($grid['style']['id']) : intval($gi); // Let other themes and plugins change the gutter. $gutter = apply_filters('siteorigin_panels_css_row_gutter', $settings['margin-sides'] . 'px', $grid, $gi, $panels_data); if (!empty($gutter)) { // We actually need to find half the gutter. preg_match('/([0-9\\.,]+)(.*)/', $gutter, $match); if (!empty($match[1])) { $margin_half = floatval($match[1]) / 2 . $match[2]; $css->add_row_css($post_id, $grid_id, '', array('margin-left' => '-' . $margin_half, 'margin-right' => '-' . $margin_half)); $css->add_cell_css($post_id, $grid_id, false, '', array('padding-left' => $margin_half, 'padding-right' => $margin_half)); } } } foreach ($panels_data['widgets'] as $widget_id => $widget) { if (!empty($widget['panels_info']['style']['link_color'])) { $selector = '#panel-' . $post_id . '-' . $widget['panels_info']['grid'] . '-' . $widget['panels_info']['cell'] . '-' . $widget['panels_info']['cell_index'] . ' a'; $css->add_css($selector, array('color' => $widget['panels_info']['style']['link_color'])); } } // Let other plugins and components filter the CSS object. $css = apply_filters('siteorigin_panels_css_object', $css, $panels_data, $post_id); return $css->get_css(); }