A set of instructions that fire on certain system events

Looks for resource IDs of key Romanesco pages that were built by the Romanesco Backyard package. Updates system setting with corresponding ID if resource is found. Disabled by default.

/**
 * setResourceIDs
 *
 * This plugin looks for resource IDs of Romanesco pages that were built by the
 * Romanesco Backyard package. When a resource is found, the referring system
 * setting is updated with the corresponding ID.
 *
 * It's deactivated by default, because the Backyard package includes a resolver
 * that does the same thing.
 *
 * @var modX $modx
 *
 * @package romanesco
 */

$eventName = $modx->event->name;

switch($eventName) {
    case 'OnDocFormSave':

        //$corePath = $modx->getOption('romanescobackyard.core_path', null, $modx->getOption('core_path') . 'components/romanescobackyard/');
        //$assetsPath = $modx->getOption('assets_path');

        if (!function_exists('setResourceID')) {
            function setResourceID($systemSetting, $contextKey, $alias)
            {
                global $modx;

                // Get the resource
                $query = $modx->newQuery('modResource');
                $query->where(array(
                    'context_key' => $contextKey,
                    'alias' => $alias,
                ));
                $query->select('id');
                $resourceID = $modx->getValue($query->prepare());

                if (!$resourceID) {
                    $modx->log(modX::LOG_LEVEL_ERROR, 'Could not find resource ID for: ' . $alias);
                    return;
                }

                // Update system setting
                $setting = $modx->getObject('modSystemSetting', array('key' => $systemSetting));

                if ($setting) {
                    $setting->set('value', $resourceID);
                    $setting->save();
                } else {
                    $modx->log(modX::LOG_LEVEL_ERROR, 'Could not find system setting with key: ' . $systemSetting);
                }
            }
        }

        if (!function_exists('setContextSetting')) {
            function setContextSetting($contextSetting, $contextKey, $alias)
            {
                global $modx;

                // Get the resource
                $query = $modx->newQuery('modResource');
                $query->where(array(
                    'context_key' => $contextKey,
                    'alias' => $alias,
                ));
                $query->select('id');
                $resourceID = $modx->getValue($query->prepare());

                if (!$resourceID) {
                    $modx->log(modX::LOG_LEVEL_ERROR, 'Could not find resource ID for: ' . $alias);
                    return;
                }

                // Update context setting
                $setting = $modx->getObject('modContextSetting', array(
                    'context_key' => $contextKey,
                    'key' => $contextSetting
                ));

                if ($setting) {
                    $setting->set('value', $resourceID);
                    $setting->save();
                } else {
                    $modx->log(modX::LOG_LEVEL_ERROR, 'Could not find context setting with key: ' . $contextSetting);
                }
            }
        }

        // Find resources and set correct IDs
        setResourceID('romanesco.footer_container_id', 'global','footers');
        setResourceID('romanesco.cta_container_id', 'global','call-to-actions');
        setResourceID('romanesco.global_backgrounds_id', 'global','backgrounds');
        setResourceID('formblocks.container_id', 'global','forms');
        setResourceID('romanesco.dashboard_id', 'hub','dashboard');
        setResourceID('romanesco.pattern_container_id', 'hub','patterns');
        setResourceID('romanesco.backyard_container_id', 'hub','backyard');

        // Set site_start for Project Hub context
        setContextSetting('site_start', 'hub','dashboard');

        break;
}

Fires when theme settings are changed under Configuration. It updates Semantic UI theme.variables and triggers a new SUI build in the background. Requires NPM and EXEC function on the server.

/**
 * UpdateStyling
 *
 * This plugin is activated when certain theme settings are changed in the
 * ClientConfig CMP.
 *
 * It changes some variables used by Semantic UI to generate the CSS, and it
 * triggers a new SUI build in the background. This requires NPM to be available
 * on the server.
 *
 * It also generates favicon images if a logo badge is provided. This relies on
 * a few Gulp dependencies (see package.json) and the Real Favicon service:
 * https://realfavicongenerator.net/favicon/gulp
 *
 * Update May 15, 2020:
 * This plugin is now able to process context-aware configuration settings.
 *
 * Update May 20, 2020:
 * The plugin no longer relies on an assets/css/theme.variables resource to be
 * present in MODX. The settings are directly written to a static file now.
 *
 * @var modX $modx
 * @package romanesco
 */

$eventName = $modx->event->name;

switch($eventName) {
    case 'ClientConfig_ConfigChange':
        $corePath = $modx->getOption('clientconfig.core_path', null, $modx->getOption('core_path') . 'components/clientconfig/');
        $clientConfig = $modx->getService('clientconfig','ClientConfig', $corePath . 'model/clientconfig/', array('core_path' => $corePath));
        $imgMediaSource = $modx->getObject('sources.modMediaSource', 15);
        $output = array();

        // Get saved values
        $savedSettings = (!empty($_POST['values'])) ? $_POST['values'] : '[]';
        $savedSettings = json_decode($savedSettings, true);
        if (!is_array($savedSettings)) {
            $modx->log(modX::LOG_LEVEL_ERROR, '[UpdateStyling] No values array available');
            break;
        }

        // Get current configuration settings (before save) for active context
        $currentContext = $savedSettings['context'] ?? '';
        $currentSettings = $clientConfig->getSettings($currentContext);
        if ($clientConfig instanceof ClientConfig) {
            $cacheOptions = array(xPDO::OPT_CACHE_KEY => 'system_settings');
            $settings = $modx->getCacheManager()->get('clientconfig', $cacheOptions);
        }

        // Continue with theme related settings only
        if (!function_exists('filterThemeSettings')) {
            function filterThemeSettings($settings): array
            {
                return array_filter(
                    $settings,
                    function ($key) {
                        if (strpos($key, 'theme_') === 0 || strpos($key, 'logo_') === 0) {
                            return $key;
                        }
                        else {
                            return false;
                        }
                    },
                    ARRAY_FILTER_USE_KEY
                );
            }
        }
        $currentSettingsTheme = filterThemeSettings($currentSettings);
        $savedSettingsTheme = filterThemeSettings($savedSettings);

        // Remove leading '/' slash from path values
        // This somehow gets added by MODX, resulting in these keys being incorrectly flagged as changed
        $currentSettingsTheme['logo_path'] = ltrim($currentSettingsTheme['logo_path'],'/') ?? '';
        $currentSettingsTheme['logo_inverted_path'] = ltrim($currentSettingsTheme['logo_inverted_path'],'/') ?? '';
        $currentSettingsTheme['logo_badge_path'] = ltrim($currentSettingsTheme['logo_badge_path'],'/') ?? '';
        $currentSettingsTheme['logo_badge_inverted_path'] = ltrim($currentSettingsTheme['logo_badge_inverted_path'],'/') ?? '';

        // Add media source to saved paths
        if (isset($savedSettingsTheme['logo_path'])) {
            $savedSettingsTheme['logo_path'] = $imgMediaSource->prepareOutputUrl($savedSettingsTheme['logo_path']);
        }
        if (isset($savedSettingsTheme['logo_inverted_path'])) {
            $savedSettingsTheme['logo_inverted_path'] = $imgMediaSource->prepareOutputUrl($savedSettingsTheme['logo_inverted_path']);
        }
        if (isset($savedSettingsTheme['logo_badge_path'])) {
            $savedSettingsTheme['logo_badge_path'] = $imgMediaSource->prepareOutputUrl($savedSettingsTheme['logo_badge_path']);
        }
        if (isset($savedSettingsTheme['logo_badge_inverted_path'])) {
            $savedSettingsTheme['logo_badge_inverted_path'] = $imgMediaSource->prepareOutputUrl($savedSettingsTheme['logo_badge_inverted_path']);
        }

        // Compare saved settings to current settings
        $updatedSettings = array_diff_assoc($savedSettingsTheme, $currentSettingsTheme);

        // Regenerate styling elements if theme settings were updated or deleted
        if ($updatedSettings) {
            $corePath = $modx->getOption('romanescobackyard.core_path', null, $modx->getOption('core_path') . 'components/romanescobackyard/');
            $romanesco = $modx->getService('romanesco','Romanesco', $corePath . 'model/romanescobackyard/', array('core_path' => $corePath));
            if (!($romanesco instanceof Romanesco)) {
                $modx->log(modX::LOG_LEVEL_ERROR, '[Romanesco] Class not found!');
                break;
            }

            // Clear cache, to ensure build process uses the latest values
            $modx->getCacheManager()->delete('clientconfig',array(xPDO::OPT_CACHE_KEY => 'system_settings'));

            // Grab variables after cache rebuild
            $latestSettings = $clientConfig->getSettings($currentContext);

            // Generate theme.variables file
            if (!$romanesco->generateThemeVariables($latestSettings, $currentContext)) {
                $modx->log(modX::LOG_LEVEL_ERROR, "[Romanesco] Could not generate theme.variables for context $currentContext");
                break;
            }

            // Generate custom CSS for this context
            if (!$romanesco->generateCustomCSS($currentContext, 1)) {
                $modx->log(modX::LOG_LEVEL_ERROR, "[Romanesco] Could not generate custom CSS for context $currentContext");
                break;
            }

            // Generate favicon if a new logo image was provided
            if (isset($updatedSettings['logo_badge_path'])) {
                if (!$romanesco->generateFavicons($latestSettings)) {
                    $modx->log(modX::LOG_LEVEL_ERROR, "[Romanesco] Could not generate favicon for context $currentContext");
                    break;
                }
            }

            // Prevent favicons from being loaded if badge image is not present at this point
            if (!isset($latestSettings['logo_badge_path'])) {
                $version = $modx->getObject('modSystemSetting', array('key' => 'romanesco.favicon_version'));
                if ($version) {
                    $version->set('value', '');
                    $version->save();
                } else {
                    $modx->log(modX::LOG_LEVEL_ERROR, 'Could not find favicon_version setting');
                }
            }

            // Clear cache
            $modx->cacheManager->refresh();
        }

        // Report any validation errors in log
        if (array_filter($output)) {
            $errorMsg = '';
            foreach ($output as $line) {
                $errorMsg .= "\n" . $line;
            }
            return (" Report: " . $errorMsg);
        }

        break;
}

Turn references to an external link (the ones you can create under TVs > Links) into an actual link. Links are referenced by their number value and must be enclosed in square brackets: [12].

/**
 * AutomaticReferences plugin
 *
 * Turn references to an external link (the ones you created under TVs > Links)
 * into an actual link. Links are referenced by their number value and must be
 * enclosed in square brackets: [12].
 *
 * @var modX $modx
 * @var array $scriptProperties
 * @package romanesco
 */

if (!class_exists(\Wa72\HtmlPageDom\HtmlPageCrawler::class)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[HtmlPageDom] Class not found!');
    return;
}

use \Wa72\HtmlPageDom\HtmlPageCrawler;

$tpl = $modx->getOption('tpl', $scriptProperties, 'externalNavItemLabel');

switch ($modx->event->name) {
    case 'OnWebPagePrerender':

        // Get processed output of resource
        $content = &$modx->resource->_output;

        // Generate links if requested
        if ($modx->resource->getTVValue('auto_references')) {
            $corePath = $modx->getOption('romanescobackyard.core_path', null, $modx->getOption('core_path') . 'components/romanescobackyard/');
            $romanesco = $modx->getService('romanesco','Romanesco', $corePath . 'model/romanescobackyard/', array('core_path' => $corePath));
            if (!($romanesco instanceof Romanesco)) {
                $modx->log(modX::LOG_LEVEL_ERROR, '[Romanesco] Class not found!');
                break;
            }

            // Get external links for this resource
            $linkObject = $modx->getIterator('rmExternalLink', [
                'resource_id' => $modx->resource->get('id'),
                'deleted' => 0
            ]);

            if (!is_object($linkObject)) break;

            // Prepare array with link tags
            $links = [];
            foreach ($linkObject as $link) {
                $links[$link->get('number')] = $modx->getChunk($tpl, $link->toArray());
            }

            // Feed output to HtmlPageDom
            $dom = new HtmlPageCrawler($content);

            // Search the content area for references
            $dom->filter('#content')
                ->filter('p,li')
                ->each(function (HtmlPageCrawler $node) use ($links) {
                    $text = $node->getInnerHtml();

                    // Only accept numeric values inside square brackets
                    preg_match_all('/\[[0-9]+\]/', $text, $matches);

                    // Filter duplicate matches to avoid glitches
                    $matches = array_unique($matches[0]);

                    if (!$matches) return true;

                    foreach ($matches as $match) {
                        $number = filter_var($match, FILTER_SANITIZE_NUMBER_INT);
                        $text = str_replace($match, $links[$number], $text);
                    }

                    $node->setInnerHtml($text);
                    return true;
                })
            ;

            $content = $dom->saveHTML();
        }

        break;
}

return true;

Manipulate DOM elements with HtmlPageDom. Yes, that's exactly what jQuery does... But now we can do it server side, before the page is rendered. Much faster and more reliable.

/**
 * ManipulateDOM plugin
 *
 * This plugin utilizes HtmlPageDom, a page crawler that can manipulate DOM
 * elements for us. Yes, that is exactly what jQuery does... But now we can do
 * it server side, before the page is rendered. Much faster and more reliable.
 *
 * @var modX $modx
 * @var array $scriptProperties
 * @package romanesco
 */

if (!class_exists(\Wa72\HtmlPageDom\HtmlPageCrawler::class)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[HtmlPageDom] Class not found!');
    return;
}

use \Wa72\HtmlPageDom\HtmlPageCrawler;

switch ($modx->event->name) {
    case 'OnWebPagePrerender':

        // Check if content type is text/html
        if (!in_array($modx->resource->get('content_type'), [1,11])) {
            break;
        }

        // Get processed output of resource
        $output = &$modx->resource->_output;

        // Feed output to HtmlPageDom
        $dom = new HtmlPageCrawler($output);

        // Add non-white class to body if custom background is set
        try {
            if ($modx->getObject('cgSetting', array('key' => 'theme_page_background_color'))->get('value') !== 'ffffff') {
                $dom->filter('body')->addClass('non-white');
            }
        }
        catch (Error $e) {
            $modx->log(modX::LOG_LEVEL_ERROR, $e);
        }

        // Read inverted parameter from URL (for testing purposes)
        $invertLayouts = $_GET['inverted'] ?? 0;
        if ($invertLayouts) {
            $dom->filter('.ui.menu')
                ->addClass('inverted')
            ;
            $dom->filter('.vertical.stripe.segment.white')
                ->removeClass('white')
                ->addClass('inverted')
            ;
            $dom->filter('.vertical.backyard.segment.secondary')
                ->removeClass('secondary')
                ->addClass('inverted black')
            ;
        }

        // Add header class to content headers without class name
        $dom->filter('h1:not(.header)')->addClass('ui header');
        $dom->filter('h2:not(.header)')->addClass('ui header');
        $dom->filter('h3:not(.header)')->addClass('ui header');
        $dom->filter('h4:not(.header)')->addClass('ui header');
        $dom->filter('h5:not(.header)')->addClass('ui header');

        // Inject inverted classes to elements inside inverted segments
        $dom->filter('.inverted.segment')
            ->each(function (HtmlPageCrawler $segment) {

                // Define elements that need to receive the inverted class
                $elements = array(
                    '.header',
                    '.grid',
                    'a:not(.button)',
                    '.button:not(.primary):not(.secondary)',
                    '.subtitle',
                    '.lead',
                    '.list',
                    '.quote',
                    '.divider:not(.hidden)',
                    '.accordion:not(.styled)',
                    '.text.menu',
                    '.secondary.menu',
                    '.basic.form',
                    '.basic.segment',
                    '.table',
                    '.steps',
                );

                // Revert inverted styling inside these nested elements
                $exceptions = array(
                    '.segment:not(.inverted):not(.transparent)',
                    '.card',
                    '.message',
                    '.accordion:not(.inverted)',
                    '.popup:not(.inverted)',
                    '.tabbed.menu',
                    '.form:not(.basic)',
                    '.leaflet-container',
                );

                // Prevent elements from having the same color as their parent background
                if ($segment->hasClass('primary-color') || $segment->hasClass('secondary-color') || $segment->hasClass('secondary')) {
                    $segment
                        ->filter('.primary.button')
                        ->addClass('white inverted')
                    ;
                    $segment
                        ->filter('.secondary.button')
                        ->removeClass('secondary')
                        ->addClass('inverted')
                    ;
                    $segment
                        ->filter('.bottom.attached.primary.button')
                        ->removeClass('primary')
                        ->addClass('secondary')
                    ;
                }

                // Elements
                foreach ($elements as $element) {
                    $segment
                        ->filter($element)
                        ->addClass('inverted')
                    ;
                }

                // Exceptions
                foreach ($exceptions as $exception) {
                    $segment
                        ->filter($exception)
                        ->each(function(HtmlPageCrawler $node) {
                            $node
                                ->filter('.inverted')
                                ->removeClass('inverted')
                            ;
                            $node
                                ->filter('.ui.white.button')
                                ->removeClass('white')
                            ;
                        })
                    ;
                }
            })
        ;

        // Remove rows from grids that have a reversed column order on mobile
        $dom->filter('.ui.reversed.grid > .row')->unwrapInner();

        // If grids are stackable on tablet, also hide (or show) designated mobile elements
        $dom->filter('.ui[class*="stackable on tablet"].grid [class*="mobile hidden"]')
            ->removeClass('mobile')
            ->removeClass('hidden')
            ->addClass('tablet or lower hidden')
        ;
        $dom->filter('.ui[class*="stackable on tablet"].grid [class*="mobile only"]')
            ->addClass('tablet only')
        ;

        // Responsive image sizes might be incorrect in responsive grids
        $dom->filter('.ui.stackable.grid, .ui.doubling.grid, .ui.stackable.cards')
            ->each(function(HtmlPageCrawler $grid) {
                $targetImg = '.row > .column > .ui.image > img, .column > .ui.image > img';
                if ($grid->matches('.cards')) {
                    $targetImg = '.card > .image > img';
                }

                // Tag images in stackable on tablet and two column doubling grids
                if ($grid->matches('[class*="stackable on tablet"]') || $grid->matches('[class*="two column"].doubling')) {
                    $grid->children($targetImg)->addClass('tablet-expand-full');
                }
                // Do the same for doubling grids with more than two columns
                else if ($grid->matches('.doubling:not([class*="two column"]):not([class*="equal width"])')) {
                    $grid->children($targetImg)->addClass('tablet-expand-half');

                    if ($grid->matches('.doubling:not(.stackable)')) {
                        $grid->children($targetImg)->addClass('mobile-expand-half');
                    }
                }

                // Only target direct descendants
                $grid->children($targetImg)
                    ->each(function(HtmlPageCrawler $img) {
                        $dataSizes = $img->getAttribute('data-sizes');
                        $sizes = $dataSizes ?? $img->getAttribute('sizes');

                        if (!$sizes) return;

                        // If lazy load is enabled, sizes are stored in data-sizes
                        $attribute = 'sizes';
                        if ($dataSizes) $attribute = 'data-sizes';

                        // Set mobile breakpoints to 100vw, because stacked means full width
                        $stackedSizes = preg_replace('/\(min-width: 360px\).+/','(min-width: 360px) 100vw,', $sizes);
                        $stackedSizes = preg_replace('/\(max-width: 359px\).+/','(max-width: 359px) 100vw', $stackedSizes);

                        // Set optional sizes, if indicated
                        if ($img->matches('.tablet-expand-full')) {
                            $stackedSizes = preg_replace('/\(min-width: 768px\).+/','(min-width: 768px) 100vw,', $stackedSizes);
                        }
                        if ($img->matches('.tablet-expand-half')) {
                            $stackedSizes = preg_replace('/\(min-width: 768px\).+/','(min-width: 768px) 50vw,', $stackedSizes);
                        }
                        if ($img->matches('.mobile-expand-half')) {
                            $stackedSizes = preg_replace('/\(min-width: 360px\).+/','(min-width: 360px) 50vw,', $stackedSizes);
                            $stackedSizes = preg_replace('/\(max-width: 359px\).+/','(max-width: 359px) 50vw', $stackedSizes);
                        }

                        $img->setAttribute($attribute, $stackedSizes);
                    })
                ;
            })
        ;

        // Add class to empty grid columns
        $dom->filter('.ui.grid .column')
            ->each(function(HtmlPageCrawler $column) {
                if($column->getInnerHtml() === '') {
                    $column->addClass('empty');
                }
            })
        ;

        // Add column class to nested grids
        //
        // If a nested grid contains multiple columns, these columns are
        //  arranged according to their size, combined with the 'equal width'
        //  classes on the grid container. This works well in most cases, but
        //  some grids don't scale down nicely on tablet / computer breakpoints
        //  because the parent doesn't know how many columns it should count on.
        // This addition sets these classes on the parent by counting the number
        //  of columns being parsed.
        // Only applies to nested grids containing a single row, as different
        //  column counts can be applied to multiple rows in the same grid.
        $dom->filter('.ui.nested.equal.width.grid')
            ->each(function(HtmlPageCrawler $grid) {
                $firstRow = $grid->filter('.row')->first()->filter('.column');
                $allRows = $grid->filter('.column');

                // Only operate on grids with a single row
                if ($firstRow->length == $allRows->length) {
                    $columns = $firstRow->length;
                    switch ($columns) {
                        case 4:
                            $grid->addClass('four column');
                            break;
                        case 3:
                            $grid->addClass('three column');
                            break;
                        case 2:
                            $grid->addClass('two column');
                            break;
                    }
                }
            })
        ;

        // Display bullets above list items in centered lists
        $dom->filter('.ui.center.aligned')
            ->each(function(HtmlPageCrawler $container) {
                $container->filter('.ui.list')->addClass('vertical');
                $container->filter('.aligned:not(.center) .ui.vertical.list')->removeClass('vertical');
            })
        ;

        // Make regular divider headers smaller
        $dom->filter('span.ui.divider.header')
            ->addClass('tiny')
        ;

        // Transform regular tables into SUI tables
        $dom->filter('table:not(.ui.table)')
            ->addClass('ui table')
        ;

        // Apply Swiper classes to appropriate slide elements
        $dom->filter('.swiper')
            ->each(function (HtmlPageCrawler $slider) {
                $slider
                    ->children('.nested.overview')
                    ->removeClass('stackable')
                    ->removeClass('doubling')
                    ->addClass('swiper-wrapper')
                ;
                $slider
                    ->children('.gallery')
                    ->addClass('swiper-wrapper')
                ;
                $slider
                    ->children('.cards')
                    ->addClass('swiper-wrapper')
                ;
                $slider
                    ->children('.swiper-wrapper > *')
                    ->each(function (HtmlPageCrawler $slide) {
                        if ($slide->hasClass('card')) {
                            $slide
                                ->addClass('ui fluid')
                                ->wrap('<div class="swiper-slide"></div>')
                            ;
                        }
                        elseif ($slide->hasClass('image')) {
                            $slide
                                ->removeClass('content')
                                ->removeClass('rounded')
                                ->addClass('swiper-slide')
                            ;
                        }
                        else {
                            $slide->addClass('swiper-slide');
                        }
                    })
                ;
                // Move prev/next buttons out of container
                // No longer used, but kept here as reference for how to find parent elements
                //$slider->parents()->each(function (HtmlPageCrawler $parent) {
                //    if ($parent->hasClass('nested','slider')) {
                //        $parent->filter('.swiper-button-prev')->appendTo($parent);
                //        $parent->filter('.swiper-button-next')->appendTo($parent);
                //    }
                //});
            })
        ;

        // Fill lightbox with gallery images
        $lightbox = array();
        $lightbox =
            $dom->filter('.gallery.with.lightbox')
                ->each(function (HtmlPageCrawler $gallery) {
                    global $modx;

                    // Grab images sources from data attributes
                    $images =
                        $gallery
                            ->filter('.lightbox > img')
                            ->each(function (HtmlPageCrawler $img) {
                                global $modx;
                                return $modx->getChunk('galleryRowImageLightbox', array(
                                    'src' => $img->attr('data-lightbox-img'),
                                    'caption' => $img->attr('data-caption'),
                                    'title' => $img->attr('alt'),
                                    'classes' => 'swiper-slide',
                                ));
                            })
                    ;

                    // Create lightbox for each gallery
                    return $modx->getChunk('lightboxOuter', array(
                        'uid' => $gallery->attr('data-uid'),
                        'output' => implode($images),
                    ));
                })
        ;

        // Add lightbox to HTML
        $dom->filter('#footer')
            ->after(implode($lightbox))
        ;

        // Manipulate images / SVGs
        $dom->filter('.ui.image, .ui.svg.image > svg, .ui.svg.image > img')
            ->each(function (HtmlPageCrawler $img) {
                $width = $img->getAttribute('width');
                $height = $img->getAttribute('height');

                // Remove empty width & height
                if (!$width) $img->removeAttr('width');
                if (!$height) $img->removeAttr('height');
            })
        ;

        // Fix inline form fields
        $dom->filter('.ui.form .inline.fields > .field')
            ->removeClass('horizontal')
            ->removeClass('vertical')
            ->filter('label')
            ->each(function(HtmlPageCrawler $label) {
                if($label->getInnerHtml() === '') {
                    $label->addClass('hidden');
                }
            })
        ;
        $dom->filter('.ui.form .inline.fields > .wide.field > .dropdown')
            ->addClass('fluid')
        ;

        // Format inline (equal width) forms
        // Counter to what you'd expect, the fields in this form shouldn't have
        //  class inline. So they need to be removed, and the fields need to be
        //  wrapped in a .fields container.
        // Special treatment for the submit button: it can be positioned inline
        //  via CB settings, after which it's inserted after the last form field.
        $dom->filter('form[id*="form-"].equal.width')
            ->each(function (HtmlPageCrawler $form) {
                $form
                    ->filter('fieldset:not(:last-child)')
                    ->wrapInner('<div class="fields"></div>')
                    ->filter('.field')
                    ->removeClass('inline')
                ;
                $form
                    ->filter('fieldset.submission')
                    ->removeClass('submission')
                    ->filter('input[type="submit"].inline')
                    ->appendTo($form->filter('fieldset .fields')->last())
                    ->wrap('<div class="compact submission field">')
                    ->before('<label>')
                ;
            })
        ;

        // Disable steps following an active step
        $dom->filter('.ui.consecutive.steps .active.step')
            ->each(function (HtmlPageCrawler $step) {
                $step
                    ->nextAll()
                    ->addClass('disabled')
                ;
            })
        ;
        // Mark previous steps as completed
        $dom->filter('.ui.completable.steps .active.step')
            ->each(function (HtmlPageCrawler $step) {
                $step
                    ->previousAll()
                    ->addClass('completed')
                ;
            })
        ;
        // Completed steps can't be disabled
        $dom->filter('.ui.steps .completed.step')->removeClass('disabled');

        // Make sure AjaxUpload scripts are run after jQuery is loaded
        $dom->filter('script')
            ->each(function (HtmlPageCrawler $script) {
                $src = $script->getAttribute('src');
                $code = $script->getInnerHtml();

                // Defer loading of AjaxUpload JS file
                if (strpos($src,'ajaxupload') !== false) {
                    $script->setAttribute('defer','');
                }

                // Wait for DOMContentLoaded event instead of using document.ready
                if (strpos($code,'$(document).ready') !== false) {
                    $code = str_replace('/* <![CDATA[ */', '', $code);
                    $code = str_replace('/* ]]> */', '', $code);

                    $script->setInnerHtml(
                        str_replace(
                            '$(document).ready(function ()',
                            'window.addEventListener(\'DOMContentLoaded\', function()',
                            $code
                        )
                    );
                }
            })
        ;

        // Fix ID conflicts in project hub
        $dom->filter('#hub .pattern.segment#content')->setAttribute('id','content-global');
        $dom->filter('#hub .pattern.segment#css')->setAttribute('id','css-global');
        $dom->filter('#hub .pattern.segment#footer')->setAttribute('id','footer-global');
        $dom->filter('#hub .pattern.segment#head')->setAttribute('id','head-global');
        $dom->filter('#hub .pattern.segment#script')->setAttribute('id','script-global');

        // Change links to fixed IDs
        $dom->filter('#hub .pattern.segment .list a.item')
            ->each(function (HtmlPageCrawler $link) {
                $href = $link->getAttribute('href');
                switch ($href) {
                    case ($href == 'patterns/organisms#content'):
                    case ($href == 'patterns/organisms#css'):
                    case ($href == 'patterns/organisms#footer'):
                    case ($href == 'patterns/organisms#head'):
                    case ($href == 'patterns/organisms#script'):
                        $link->setAttribute('href', $href . '-global');
                        break;
                }
            })
        ;

        // Save manipulated DOM
        $output = $dom->saveHTML();

        break;
}

A img O script

_GET

allRows

attribute

code

column

columns

container

dataSizes

dom

e

element

elements

exception

exceptions

firstRow

form

gallery

grid

height

href

images

invertLayouts

label

lightbox

link

modx

node

output

parent

scriptProperties

segment

sizes

slide

slider

src

stackedSizes

step

targetImg

width

F round

AjaxUpload

If

switch

No references found.

Ensure correct Markdown rendering by setting the proper MIME type. Set the MIME type back to HTML when viewing the resource in the browser, to prevent the page from being downloaded as file.

/**
 * ProcessMarkdown
 *
 * Retain original Markdown markup by setting the proper MIME type for a
 * Markdown resource. Set the MIME type back to HTML when viewing the resource
 * in the browser, to prevent the page from being downloaded as file.
 *
 * In addition, HtmlPageDom is used to optimize the output in order to receive
 * the correct styling from Semantic UI.
 *
 * For rendering Markdown as HTML, install the Markdown extra from modstore.pro:
 * https://modstore.pro/packages/content/markdown
 *
 * Process markdown in your template like this:
 *
 * [[*content:Markdown]]
 *
 * @var modX $modx
 * @var array $scriptProperties
 *
 * @package romanesco
 */

if (!class_exists(\Wa72\HtmlPageDom\HtmlPageCrawler::class)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[HtmlPageDom] Class not found!');
    return;
}

use \Wa72\HtmlPageDom\HtmlPageCrawler;

switch ($modx->event->name) {
    // Set content type to Markdown when resource has a markdown template
    case 'OnBeforeDocFormSave':
        /**
         * @var modResource $resource
         */

        $template = $modx->getObject('modTemplate', array('id' => $resource->get('template')));

        if (!is_object($template)) {
            break;
        }

        // Any template with 'Markdown' in its name qualifies
        // Note to self: you need to revert the content type manually if you assign a non-markdown template again
        if (stripos($template->get('templatename'), 'markdown') !== false) {
            $resource->set('contentType', 'text/x-markdown');
            $resource->set('content_type', '11');

            // Also disable any active text editor
            $resource->set('richtext', 0);
        }

        break;

    // Use HTML mime type when viewed as a web page
    // Based on: https://github.com/GoldCoastMedia/modx-xhtml-mime-switch
    case 'OnLoadWebDocument':
        $resource = &$modx->resource;

        // Make sure its Markdown
        if ($resource->get('content_type') !== 11) {
            break;
        }

        // Switch back to HTML
        $resource->ContentType->set('mime_type', 'text/html');
        break;

    // Process output with HtmlPageDom
    case 'OnWebPagePrerender':
        // Make sure its Markdown
        if ($modx->resource->get('content_type') !== 11) {
            break;
        }

        $output = &$modx->resource->_output;
        $dom = new HtmlPageCrawler($output);

        $dom->filter('#markdown img')
            ->each(function (HtmlPageCrawler $image)
            {
                // Prevent images from overflowing their container
                $image->addClass('ui rounded raised image');

                // Apply native lazy load
                $image->setAttribute('loading','lazy');
            })
        ;

        $dom->filter('#markdown a')
            ->each(function (HtmlPageCrawler $link)
            {
                // Turn into button if desired
                if (str_contains($link, 'Continue to:')) {
                    $link->addClass('ui big primary button');
                }
            })
        ;

        // Turn tables into Semantic tables (if needed)
        $dom->filter('#markdown table:not(.ui.table)')->addClass('ui table');

        // Add language class to code blocks that do not specify a language
        $dom->filter('pre')->addClass('language-html');
        $dom->filter('code')
            ->addClass('language-html')
            ->each(function (HtmlPageCrawler $code)
            {
                // Code snippets in markdown files are rendered by MODX.
                // To prevent this, you can add a space to all outer tags in
                //  your markdown file. So [[snippet]] becomes [ [snippet] ].
                // Annoying, but the easiest way around it.
                // At least we can revert it here again:
                $output = str_replace('[ [','[[',$code);
                $output = str_replace('] ]',']]',$output);
                $code->replaceWith($output);
            })
        ;

        // Prettier HR
        $dom->filter('#markdown hr')->replaceWith('<div class="ui divider"></div>');

        // Add SUI list class, but only to first level
        $dom->filter('#markdown ul > li > ul')->addClass('nested');
        $dom->filter('#markdown ul:not(.nested)')->addClass('ui list');
        $dom->filter('#markdown ol > li > ol')->addClass('nested');
        $dom->filter('#markdown ol:not(.nested)')->addClass('ui list');

        // Turn Obsidian callouts into FUI messages
        $dom->filter('#markdown blockquote')
            ->each(function (HtmlPageCrawler $quote)
            {
                if ($quote->hasClass('callout')) {
                    $classes = $quote->getAttribute('class');
                    $class = substr($classes, strpos($classes, ' ') + 1);

                    // Add FUI classes
                    switch ($class) {
                        case 'note':
                        case 'todo':
                            $class = 'info';
                            break;
                        case 'check':
                        case 'done':
                            $class = 'success';
                            break;
                        case 'caution':
                        case 'attention':
                            $class = 'warning';
                            break;
                        case 'failure':
                        case 'fail':
                        case 'missing':
                        case 'bug':
                            $class = 'error';
                            break;
                        case 'abstract':
                        case 'summary':
                        case 'tldr':
                        case 'important':
                            $class = 'primary';
                            break;
                        case 'question':
                        case 'help':
                        case 'faq':
                        case 'tip':
                        case 'hint':
                        case 'example':
                            $class = 'secondary';
                            break;
                        default:
                            $class = '';
                    }

                    // Apply FUI classes
                    $quote->addClass("ui $class message");
                };
            })
        ;

        // Remove redundant heading in articles
        $dom->filter('body.publication #markdown h1:first-child')->remove();

        $output = $dom->saveHTML();

        break;
}

Add resource to a specific group, based on certain conditions or variables.

/**
 * setResourceGroup
 *
 * Add resource to a specific group, based on certain conditions or variables.
 *
 * @var modX $modx
 * @package romanesco
 */

switch ($modx->event->name) {
    case 'OnDocFormSave':
        /**
         * @var modResource $resource
         */

        $resourceGroup = $modx->getObject('modResourceGroup',1);

        if (!is_object($resourceGroup)) {
            $modx->log(modX::LOG_LEVEL_INFO, '[setResourceGroup] No resource group was found.');
            break;
        } else {
            $resourceGroupName = $resourceGroup->get('name');
        }

        // Tickets
        if ($resource->get('class_key','Ticket')) {

            // If resource is a private ticket, add it to the KB private resource group
            if ($resource->get('privateweb') && !$resource->isMember($resourceGroupName)) {
                $resource->joinGroup(1);
                $modx->log(modX::LOG_LEVEL_INFO, '[setResourceGroup] Resource "' . $resource->get('pagetitle') . '" joined resource group: ' . $resourceGroupName);
            }

            // If the ticket is not private, remove it from the resource group
            if (!$resource->get('privateweb') && $resource->isMember($resourceGroup->get('name'))) {
                $resource->leaveGroup(1);
                $modx->log(modX::LOG_LEVEL_INFO, '[setResourceGroup] Resource "' . $resource->get('pagetitle') . '" left resource group: ' . $resourceGroupName);
            }
        }

        break;
}

Generate a menu with internal links to all headings in the content. The headers need to have an anchor, which can be automatically attached by switching on the auto_anchors TV.

/**
 * TableOfContents plugin
 *
 * Generate a menu with internal links to all headings in the content.
 *
 * @var modX $modx
 * @var array $scriptProperties
 * @package romanesco
 */

if (!class_exists(\Wa72\HtmlPageDom\HtmlPageCrawler::class)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[HtmlPageDom] Class not found!');
    return;
}

use \Wa72\HtmlPageDom\HtmlPageCrawler;

$tpl = $modx->getPlaceholder('toc.tpl') ?? 'tocNavItem';
$target = $modx->getPlaceholder('toc.target');

// Abort if ToC target is not set
if (!$target) {
    return true;
}

switch ($modx->event->name) {
    case 'OnWebPagePrerender':

        // Get processed output of resource
        $content = &$modx->resource->_output;
        $resourceURI = $modx->resource->get('uri');
        $headings = $modx->resource->getTVValue('toc_headings');

        // Feed output to HtmlPageDom
        $dom = new HtmlPageCrawler($content);

        // Generate anchors if requested
        if ($modx->resource->getTVValue('auto_anchors')) {
            $dom->filter('#content')
                ->filter('h1,h2,h3,h4,h5,h6')
                ->each(function (HtmlPageCrawler $node) {
                    $text = $node->getInnerHtml();
                    $anchor = $node->getAttribute('id');

                    // This is only needed if no anchor is currently present
                    if (!isset($anchor)) {
                        $text = strip_tags($text); // strip HTML
                        $text = strtolower($text); // convert to lowercase
                        $text = preg_replace('/[^.A-Za-z0-9 _-]/', '', $text); // strip non-alphanumeric characters
                        $text = preg_replace('/\s+/', '-', $text); // convert white-space to dash
                        $text = preg_replace('/-+/', '-', $text);  // convert multiple dashes to one
                        $text = trim($text, '-'); // trim excess
                        $text = rtrim($text, '.'); // trim closing period

                        $node->setAttribute('id', $text);
                        return true;
                    }

                    return false;
                })
            ;
        }

        // Get allowed headings on the page
        $toc = $dom
            ->filter('#content')
            ->filter(strtolower($headings))
            ->each(function (HtmlPageCrawler $node) {
                $text = $node->getInnerHtml();
                $anchor = $node->getAttribute('id');
                $level = $node->nodeName();

                // Remove nested troublemakers
                $text = strip_tags($text);

                if (isset($anchor)) {
                    return array(
                        "text" => $text,
                        "anchor" => $anchor,
                        "level" => $level,
                    );
                }

                return false;
            })
        ;

        // Remove empty headings from array (why are they there?)
        $toc = array_filter($toc);

        // Create menu
        $output = array();
        $idx = 0;
        foreach ($toc as $index => $item) {
            $output[] = $modx->getChunk($tpl, array(
                'link' => $resourceURI . '#' . $item['anchor'],
                'menutitle' => $item['text'] ?? '',
                'classnames' => $item['level'] ?? '',
                'idx' => $idx++,
            ));
        }

        // Append menu to HTML container
        $dom->filter($target)->append(implode($output));
        $content = $dom->saveHTML();

        break;

}

return true;

Load FormBlocks lexicon in MODX manager.

/**
 * fbLexiconManager
 *
 * Load FormBlocks lexicon in MODX manager.
 *
 * @var modX $modx
 * @package romanesco
 */

$modx->controller->addLexiconTopic('romanescobackyard:formblocks');

Load FormBlocks lexicon in web context.

/**
 * fbLexiconWeb
 *
 * Load FormBlocks lexicon in web context.
 *
 * @var modX $modx
 * @package romanesco
 */

$modx->lexicon->load('romanescobackyard:formblocks');

Only clears cache partitions of navigation groups, to make sure save actions are immediately reflected on frontend. In the future, other partitions should be cleared on certain triggers too.

/**
 * ClearCustomCache
 *
 * Currently this only clears cache partitions of navigation groups, to make
 * sure save actions are immediately reflected on frontend.
 *
 * In the future, other partitions can be cleared on certain triggers to lessen
 * the need of clearing the custom cache manually (in MODX manager).
 *
 * @var modX $modx
 * @package romanesco
 */

switch ($modx->event->name) {
    case 'OnSiteRefresh':
    case 'OnDocFormSave':

        if ($modx->getOption('romanesco.member_groups')) {
            $partitions = 'nav_anonymous,nav_member';
            $response = $modx->runProcessor('cache/partition/refresh', array(
                'partitions' => $partitions
            ), array(
                'processors_path' => MODX_CORE_PATH . 'components/getcache/processors/'
            ));

            if ($response->isError()) {
                $modx->log(modX::LOG_LEVEL_ERROR, 'There was an error refreshing (one of) your custom cache partitions. ' . $response->getMessage(), '', 'Cache Refresh');
            } else {
                //$oldLoglevel = $modx->getLogLevel();
                //$modx->setLogLevel(modX::LOG_LEVEL_INFO);
                $modx->log(modX::LOG_LEVEL_INFO, 'Cache partitions successfully cleared.', '', 'Cache Refresh');
                //$modx->setLogLevel($oldLoglevel);
            }
            break;
        }
}
return;

Load default lexicon in web context.

/**
 * LexiconWeb
 *
 * Load default lexicon in web context.
 *
 * @var modX $modx
 * @package romanesco
 */

if ($modx->event->name == 'OnHandleRequest') {
    $modx->lexicon->load('romanescobackyard:default');
}

Small tweaks to the MODX backend, to enhance the Romanesco experience.

/**
 * ManagerAugmentations
 *
 * Small tweaks to the MODX backend, to enhance the Romanesco experience.
 *
 * @var modX $modx
 * @var modManagerController $controller
 *
 * @package romanesco
 */

$versionCSS = $modx->getOption('romanesco.assets_version_css');
$versionJS = $modx->getOption('romanesco.assets_version_js');

switch ($modx->event->name) {
    case 'OnDocFormRender':
        /**
         * @var modResource $resource
         */

        // Load custom CSS styles
        $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/contentblocks.css?v=' . $versionCSS);
        $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/semantic.css?v=' . $versionCSS); # for CB chunk previews
        $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/step.css?v=' . $versionCSS); # for CB chunk previews

        // Load custom CSS for Global Backgrounds
        if ($resource->get('template') == 27) {
            $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/backgrounds.css?v=' . $versionCSS);
        }
        break;

    case 'OnManagerPageBeforeRender':
        $modx->controller->addLexiconTopic('romanescobackyard:manager');

        // Load CSS for manager on different event
        $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/semantic.css?v=' . $versionCSS); # for CB chunk previews
        $modx->regClientCss($modx->getOption('base_url') . 'assets/components/romanescobackyard/css/manager.css?v=' . $versionCSS);

        // Load JS and additional dependencies
        $controller->addHtml('<script src="/assets/components/romanescobackyard/js/jquery.min.js"></script>');
        $controller->addHtml('<script src="/assets/semantic/dist/themes/romanesco/assets/vendor/arrive/arrive.min.js"></script>');
        $controller->addHtml('<script src="/assets/components/romanescobackyard/js/manager.js?v=' . $versionJS . '"></script>');

        // Hide advanced ContentBlocks features
        $settings = $modx->getOption('romanesco.cb_hide_settings');
        $fields = $modx->getOption('romanesco.cb_hide_fields');
        //$sudo = $modx->user->get('sudo');

        if ($settings || $fields) {
            $controller->addHtml("
                <script>
                // Wait for ContentBlocks to finish loading.
                // Depends on arrive.js library (included in Romanesco theme).
                $(document).arrive('#contentblocks-modal', function() {
                    $(document).arrive('.contentblocks-modal-content', function() {
                        let settings = '$settings';
                        let fields = '$fields';

                        // Hide settings
                        if (settings) {
                            settings = settings.split(',');
                            for (const name of settings) {
                                $('.contentblocks-modal-field [data-name=' + name + ']').parent().hide();
                            }
                        }

                        // Hide CB fields
                        if (fields) {
                            fields = fields.split(',');
                            for (const id of fields) {
                                $('li.tooltip a[data-id=' + id + ']').closest('li').hide();
                            }
                        }
                    });
                });
                </script>
            ");
        }

        // Load Ybug widget for collecting manager feedback
        if ($modx->getOption('romanesco.manager_feedback') == 1) {
            if ($modx->user->hasSessionContext('mgr')) {
                $userName = $modx->user->get('username');
                $userEmail = $modx->user->getOne('Profile')->get('email');
            }
            $controller->addHtml($modx->getChunk('feedbackWidgetJS', [
                'project_id' => $modx->getOption('romanesco.ybug_project_id'),
                'username' => $userName ?? '',
                'email' => $userEmail ?? '',
                'button_text' => $modx->lexicon('romanesco.feedback.button_text'),
                'position' => 'bottom-right',
            ]));
        }
        break;

    case 'OnManagerPageAfterRender':
        // Mute rogue output lines from certain packages
        $removeLines = array(
            $modx->getOption('core_path') . 'components/imageplus/elements/tv/output/',
            $modx->getOption('core_path') . 'components/colorpicker/elements/tv/output/',
            $modx->getOption('core_path') . 'components/redactor/elements/tvs/output/',
        );

        $managerContent = $modx->controller->content;
        $managerContent = str_replace($removeLines, '', $managerContent);

        // Remove underscore prefix in TV category tabs (so custom categories can have same name as core categories)
        $managerContent = str_replace('class="x-tab" title="_', 'class="x-tab" title="', $managerContent);

        $controller->content = $managerContent;
        break;
}
return;

Determine which CSS styles are used above the fold and write them to a custom CSS file. This needs NPM and the critical package to be installed.

/**
 * GenerateCriticalCSS
 *
 * Determine which CSS styles are used above the fold and write them to a custom
 * CSS file. This needs NPM and the critical package to be installed.
 *
 * Because generating these stylesheets is very resource intensive, it is
 * inadvisable to run this in parallel (which is what would happen if you
 * trigger a save action on a batch of resources).
 *
 * To prevent performance issues, you should also install the Scheduler extra.
 * The plugin will then add each task to the Scheduler work queue, so they can
 * be executed serially (or in small batches).
 *
 * https://github.com/addyosmani/critical
 * https://github.com/modmore/Scheduler
 *
 * @var modX $modx
 * @var array $scriptProperties
 *
 * @package romanesco
 */

$corePath = $modx->getOption('romanescobackyard.core_path', null, $modx->getOption('core_path') . 'components/romanescobackyard/');
$romanesco = $modx->getService('romanesco','Romanesco',$corePath . 'model/romanescobackyard/',array('core_path' => $corePath));

if (!($romanesco instanceof Romanesco)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[Romanesco] Class not found!');
    return;
}

$basePath = $modx->getOption('base_path');
$context = $modx->resource->get('context_key');

// Abort if critical is not enabled for current context
if (!$romanesco->getConfigSetting('critical_css', $context)) return;

$cssPath = $romanesco->getContextSetting('romanesco.custom_css_path', $context);
$criticalPath = $romanesco->getContextSetting('romanesco.critical_css_path', $context);
$distPath = $romanesco->getContextSetting('romanesco.semantic_dist_path', $context);

switch ($modx->event->name) {
    case 'OnDocFormSave':
        /**
         * @var modResource $resource
         * @var int $id
         */

        $globalTemplates = [0,8,9,10,11,19,20,27]; // 0 = empty template
        $excludedTemplates = explode(',', $romanesco->getConfigSetting('critical_excluded_templates', $context));
        $excludedTemplates = array_merge($globalTemplates, $excludedTemplates);
        $sharedTemplates = explode(',', $romanesco->getConfigSetting('critical_shared_templates', $context));

        $template = $modx->getObject('modTemplate', array('id' => $resource->get('template')));
        $url = $modx->makeUrl($id,'','','full');
        $uri = ltrim($resource->get('uri'),'/');
        $uri = rtrim($uri,'/');
        $uri = str_replace('.html','',$uri);
        $criticalPath = rtrim($criticalPath,'/');

        // Empty and excluded templates
        if (in_array($resource->get('template'), $excludedTemplates) || !is_object($template)) {
            $resource->setTVValue('critical_css_uri', '');
            break;
        }

        // Templates with shared CSS
        if (in_array($resource->get('template'), $sharedTemplates)) {
            $uri = strtolower($template->get('templatename'));
            $uri = str_replace(' ', '', $uri);
        }

        // Store full path to css file in a TV
        $resource->setTVValue('critical_css_uri', "$criticalPath/$uri.css");

        // Use Scheduler for adding task to queue (if available)
        /** @var Scheduler $scheduler */
        $schedulerPath = $modx->getOption('scheduler.core_path', null, $modx->getOption('core_path') . 'components/scheduler/');
        $scheduler = $modx->getService('scheduler', 'Scheduler', $schedulerPath . 'model/scheduler/');

        if (!($scheduler instanceof Scheduler)) {
            $modx->log(modX::LOG_LEVEL_ERROR, '[GenerateCriticalCSS] Scheduler not found. Generating CSS directly.');

            // NB: this will delay the save action significantly!
            $romanesco->generateCriticalCSS(array(
                'id' => $id,
                'uri' => $uri,
                'cssPath' => $cssPath,
                'criticalPath' => $criticalPath,
                'distPath' => $distPath,
            ));

            break;
        }

        $task = $scheduler->getTask('romanesco', 'GenerateCriticalCSS');

        // Create task first if it doesn't exist
        if (!($task instanceof sTask)) {
            $task = $modx->newObject('sSnippetTask');
            $task->fromArray(array(
                'class_key' => 'sSnippetTask',
                'content' => 'generateCriticalCSS',
                'namespace' => 'romanesco',
                'reference' => 'GenerateCriticalCSS',
                'description' => 'Extract above-the-fold styling into custom CSS file.'
            ));
            if (!$task->save()) {
                return 'Error saving GenerateCriticalCSS task';
            }
        }

        // Check if task is not already scheduled
        $pendingTasks = $modx->getCollection('sTaskRun', array(
            'task' => $task->get('id'),
            'status' => 0,
            'executedon' => NULL,
        ));
        foreach ($pendingTasks as $pendingTask) {
            $data = $pendingTask->get('data');
            if (isset($data['id']) && $data['id'] == $id && isset($data['url']) && $data['url'] == $url) {
                return true;
            }
        }

        // Schedule a new run
        $task->schedule('+1 minutes', array(
            'id' => $id,
            'url' => $url,
            'uri' => $uri,
        ));

        break;

//    case 'OnWebPagePrerender':
//        if ($_SERVER['HTTPS'] === 'on') {
//            $cssFile = $modx->resource->getTVValue('critical_css_uri');
//
//            // Create array of objects for the header
//            $linkObjects = array();
//            if ($cssFile && file_exists($basePath . $cssFile)) {
//                $linkObjects[] = "</{$cssFile}>; as=style; rel=preload;";
//            }
//
//            // Set PHP header
//            header('Link: ' . implode(',',$linkObjects));
//        }
//
//        break;
}

_SERVER

basePath

context

corePath

criticalPath

cssFile

cssPath

data

distPath

excludedTemplates

globalTemplates

id

linkObjects

modx

pendingTask

pendingTasks

resource

romanesco

scheduler

schedulerPath

scriptProperties

sharedTemplates

task

template

uri

url

F generateCriticalCSS F getConfigSetting F getContextSetting

switch

No references found.

Creates site.css file for each context, with their own global backgrounds. If you want a context to have its own set of backgrounds, you need to add a child page under Global Backgrounds.

/**
 * GenerateSiteCSS
 *
 * Creates site.css file for each context, with their own global backgrounds.
 *
 * If you want a context to have its own set of backgrounds, you need to create
 * a child page under the Global Backgrounds container for it. Make sure the
 * template is GlobalBackgrounds too and that the alias matches the context_key!
 *
 * A default stylesheet (site.css) is also generated, containing only the
 * backgrounds at root level of the Global Backgrounds container.
 *
 * CSS files are regenerated each time a GlobalBackgrounds resource is saved.
 *
 * NB! The plugin priority should be set to something higher than 0. Otherwise,
 * users will need to save the resource twice to see their changes reflected.
 *
 * @var modX $modx
 * @var array $scriptProperties
 *
 * @package romanesco
 */

$corePath = $modx->getOption('romanescobackyard.core_path', null, $modx->getOption('core_path') . 'components/romanescobackyard/');
$romanesco = $modx->getService('romanesco','Romanesco',$corePath . 'model/romanescobackyard/',array('core_path' => $corePath));

if (!($romanesco instanceof Romanesco)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[Romanesco] Class not found!');
    return;
}

// Css validator should be loaded through Romanesco
if (!class_exists(CssLint\Linter::class)) {
    $modx->log(modX::LOG_LEVEL_ERROR, '[CssLint] Class not found!');
    return;
}

use CssLint\Linter;

switch ($modx->event->name) {
    case 'OnBeforeDocFormSave':
        /**
         * @var modResource $resource
         * @var int $id
         */

        // Exit if resource template is not GlobalBackground(s)
        $templateID = $resource->get('template');
        if ($templateID != 27 && $templateID != 8) {
            break;
        }

        // Clear event output to avoid rogue messages popping up again
        $modx->event->_output = '';

        // Init CSS linter
        $cssLinter = new Linter();

        // Validate the CSS gradient field
        if ($templateID == 27)
        {
            // Prepare an array with submitted ContentBlocks data
            $cbData = $resource->get('contentblocks');
            $cbData = json_decode($cbData, true);

            // It's probably just 1 background field, but let's not assume anything
            $fields = $cbData[0]['content']['main'] ?? [];
            foreach ($fields as $field) {
                if ($field['field'] != 109) continue;
                $i = 0;

                foreach ($field['rows'] as $row) {
                    $i++;

                    $image = 'url(' . $row['image']['url'] . ')';
                    $position = $row['position']['value'] ? : 'center center';
                    $size = $row['size']['value'] ? : 'cover';
                    $repeat = $row['repeat']['value'] ? : 'no-repeat';
                    $attachment = $row['attachment']['value'] ? : 'scroll';
                    $gradient = $row['gradient']['value'];
                    $background = $row['image']['url'] ? $image : $gradient;
                    $css = "
.background::before {
    background:
        $background
        $position /
        $size
        $repeat
        $attachment
        !important
    ;
}";

                    // Validate CSS
                    if ($cssLinter->lintString($css) !== true) {
                        $errors = implode("\n", $cssLinter->getErrors());
                        $modx->log(modX::LOG_LEVEL_ERROR, "CSS for background $id is not valid:" . $css . "\n" . $errors);
                        $modx->event->output("The CSS in layer $i is not valid! Please check the error log for details.<br>");
                    }
                }
            }
        }

        break;

    case 'OnDocFormSave':
        /**
         * @var modResource $resource
         * @var int $id
         */

        $exit = false;

        // Exit if resource template is not GlobalBackground(s)
        $templateID = $resource->get('template');
        if ($templateID != 27 && $templateID != 8) {
            $exit = true;
        }

        // ...but continue if a header background is (being) set
        if ($resource->getTVValue('header_background_img')) {
            $exit = false;
        }

        // Leave the EU?
        if ($exit) break;

        // Generate CSS
        $romanesco->generateBackgroundCSS();

        // Bump CSS version number to force refresh
        $romanesco->bumpVersionNumber();

        // Clear cache
        $modx->cacheManager->refresh();

        break;
}

Computations

c_configuration

setResourceIDs

Included patterns

Referring patterns

UpdateStyling

Included patterns

Referring patterns

c_content

AutomaticReferences

Included patterns

Referring patterns

ManipulateDOM

Included patterns

Referring patterns

ProcessMarkdown

Included patterns

Referring patterns

setResourceGroup

Included patterns

Referring patterns

TableOfContents

Included patterns

Referring patterns

c_contentblocks

c_formblocks

fbLexiconMgr

Included patterns

Referring patterns

fbLexiconWeb

Included patterns

Referring patterns

c_global

ClearCustomCache

Included patterns

Referring patterns

LexiconWeb

Included patterns

Referring patterns

ManagerAugmentations

Included patterns

Referring patterns

c_performance

GenerateCriticalCSS

Included patterns

Referring patterns

GenerateSiteCSS

Included patterns

Referring patterns