<?php get_header(); global $posts; global $post; $wrapper_class = get_option('patterns_settings'); $wrapper_class = isset($wrapper['patterns_wrapper_class']) ? $wrapper_class['patterns_wrapper_class'] : 'container'; if (have_posts()) { echo '<div class="patterns--wrapper">'; // View Function Class require trailingslashit(dirname(__FILE__)) . 'class-patterns-view-functions.php'; $view = new Patterns__View_Funcs(); $posts_ordered = $view->Patterns__Post_Sort($posts); /** * Break apart the ordered post to make life easier * @var null if key exists, @var is array */ $color_posts = null; $typography_posts = null; $pattern_posts = null; if (array_key_exists('patterns_colors', $posts_ordered)) { $color_posts = $posts_ordered['patterns_colors']; } if (array_key_exists('patterns_typography', $posts_ordered)) { $typography_posts = $posts_ordered['patterns_typography']; } if ($posts_ordered['patterns']) { $pattern_posts = $posts_ordered['patterns']; } /** * Build the navigation
/** * Determine and generate the Compiler Output */ public function Patterns_Style_Output() { // Get View Function Class require trailingslashit(dirname(__DIR__)) . 'views/class-patterns-view-functions.php'; $values = array(); $html = ''; $args = array('post_type' => 'patterns_colors', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC'); $colors = get_posts($args); // Add Color Value to Values array if ($colors) { $values = array(); $compiler_content = ''; $color_list = ''; $vars_list = ''; $sep = ', '; $step = 1; foreach ($colors as $color) { $view = new Patterns__View_Funcs(); $color_info = $view->Patterns__Colors_Class($color); $value = key($color_info); $values[$value] = $color_info[$value]; } $value_count = count($values); if (array_key_exists('patterns_compiler', $this->_patterns_options)) { $compiler = $this->_patterns_options['patterns_compiler']; } else { $compiler = 'css'; } // Create parsable content based on compiler type if ($compiler === 'sass') { // SASS foreach ($values as $value => $class) { if ($step >= $value_count) { $sep = ''; } $color_list .= '"' . $class . '"' . $sep; $vars_list .= $value . $sep; $step++; } $compiler_content .= '$patterns--colors-list: ' . $color_list . ';' . "\n"; $compiler_content .= '$patterns--vars-list: ' . $vars_list . ';' . "\n"; $compiler_content .= "\n"; $compiler_content .= '// Loop through lists to output classes with background color' . "\n"; $compiler_content .= '@each $patterns--current-color in $patterns--colors-list {' . "\n"; $compiler_content .= ' $i: index($patterns--colors-list, $patterns--current-color);' . "\n"; $compiler_content .= ' .patterns--colors-#{$patterns--current-color} {' . "\n"; $compiler_content .= ' background-color: nth($patterns--vars-list, $i);' . "\n"; $compiler_content .= ' }' . "\n"; $compiler_content .= '}' . "\n"; } elseif ($compiler === 'less') { // LESS CSS foreach ($values as $value => $class) { if ($step >= $value_count) { $sep = ''; } $color_list .= $class . $sep; $step++; } $compiler_content .= '@patterns--colors: ' . $color_list . ';' . "\n"; $compiler_content .= "\n"; $compiler_content .= '.-(@i: length(@patterns--colors)) when (@i > 0) {' . "\n"; $compiler_content .= ' @name: extract(@patterns--colors, @i);' . "\n"; $compiler_content .= ' &.patterns--colors-@{name} {' . "\n"; $compiler_content .= ' background-color: @@name;' . "\n"; $compiler_content .= ' }' . "\n"; $compiler_content .= ' .-((@i - 1));' . "\n"; $compiler_content .= '} .-;' . "\n"; } else { // Basic CSS $sep = "\n"; foreach ($values as $value => $class) { if ($step >= $value_count) { $sep = ''; } $step++; $compiler_content .= '.patterns--colors-' . $class . ' {' . "\n"; $compiler_content .= ' background-color: ' . $value . ';' . "\n"; $compiler_content .= '}' . "\n"; $compiler_content .= $sep; } } $html .= '<div class="wrap">'; $html .= '<h2>Compiler Output for Colors</h2><hr>'; $html .= '<p><strong>Copy and Paste into your ' . $compiler . ' file</strong></p>'; $html .= '<textarea rows="10" cols="30" class="large-text code">'; $html .= $compiler_content; $html .= '</textarea>'; $html .= '</div>'; } return $html; }