Added Box, Buttons and Flex shortcodes

This commit is contained in:
pmoreno.rodriguez 2024-08-11 22:44:41 +02:00
parent a0626a7d9f
commit 0713cc7493
6 changed files with 193 additions and 0 deletions

View file

@ -34,6 +34,11 @@ class Future2021 extends Theme
}
}
public function onShortcodeHandlers()
{
$this->grav['shortcode']->registerAllShortcodes(__DIR__ . '/shortcodes');
}
// Add images to twig template paths to allow inclusion of SVG files
public function onTwigLoader()
{

View file

@ -0,0 +1,29 @@
<?php
/**
* @author Pedro Moreno https://pmdesign.dev
* @license Public Domain
* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
*/
namespace Grav\Plugin\Shortcodes;
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
class BoxShortcode extends Shortcode
{
public function init()
{
$this->shortcode->getHandlers()->add('sc-box', function (ShortcodeInterface $sc) {
$output = $this->grav['twig']->processTemplate(
'partials/shortcodes/box.html.twig',
[
'shortcode' => $sc,
]
);
return $output;
});
}
}

View file

@ -0,0 +1,72 @@
<?php
/**
* @author Pedro Moreno https://pmdesign.dev
* @license Public Domain
* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
*/
namespace Grav\Plugin\Shortcodes;
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
class ButtonsShortcode extends Shortcode
{
public function init()
{
$this->shortcode->getHandlers()->add('sc-buttons', function (ShortcodeInterface $sc) {
$content = $sc->getContent();
$buttons = $this->parseContent($content);
$ulclass= $sc->getParameter('ulclass', $sc->getBbCode());
$output = '<ul class="actions '.$ulclass.'">';
foreach ($buttons as $button) {
$text = $button['content'] ?? 'Button'; // Get the button content
$class = $button['class'] ?? '';
$type = $button['type'] ?? 'default';
$size = $button['size'] ?? '';
$target = $button['target'] ?? '_self';
$url = $button['url'] ?? '#';
$buttonClass = 'button ' . $type . ' ' . $size . ' ' . $class;
$output .= '<li><a class="' . $buttonClass . '" href="' . $url . '" target="' . $target . '">' . $text . '</a></li>';
}
$output .= '</ul>';
return $output;
});
}
private function parseContent($content)
{
$buttons = [];
preg_match_all('/\[sc-button(.*?)\](.*?)\[\/sc-button\]/s', $content, $matches, PREG_SET_ORDER);
foreach ($matches as $match) {
$buttonParams = $this->parseButtonParams($match[1]);
$buttonParams['content'] = $match[2]; // Save the content in the parameters array
$buttons[] = $buttonParams;
}
return $buttons;
}
private function parseButtonParams($paramsString)
{
$params = [];
if (is_string($paramsString)) {
$matches = [];
preg_match_all('/(\w+)\s*=\s*(?:"([^"]*)"|\'([^\']*)\'|(\S+))/', $paramsString, $matches, PREG_SET_ORDER);
foreach ($matches as $match) {
$key = $match[1];
$value = $match[2] ?? $match[3] ?? $match[4];
$params[$key] = $value;
}
}
return $params;
}
}

View file

@ -0,0 +1,43 @@
<?php
/**
* @author Pedro Moreno https://pmdesign.dev
* @license Public Domain
* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
*/
namespace Grav\Plugin\Shortcodes;
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
class FlexShortcode extends Shortcode
{
public function init()
{
$this->shortcode->getHandlers()->add('sc-flex', function (ShortcodeInterface $sc) {
$hash = $this->shortcode->getId($sc);
$output = $this->twig->processTemplate(
'partials/shortcodes/flex.html.twig', // Twig template for shortcode
[
'hash' => $hash,
'section_id' => $sc->getParameter('id','features'), // ID for Section, 'features' is default
'row_class' => 'row gtr-uniform' . $sc->getParameter('class', ''), // Concatenate 'row' with user-provided class
'row_styles' => $sc->getParameter('style',''), // Define inline styles
'columns' => $this->shortcode->getStates($hash),
]
);
return $output;
});
$this->shortcode->getHandlers()->add('column', function (ShortcodeInterface $sc) {
// Add column to layout state using parent layout id
$hash = $this->shortcode->getId($sc->getParent());
$this->shortcode->setStates($hash, $sc);
return '';
});
}
}

View file

@ -0,0 +1,35 @@
{#{% set boxStyle = shortcode.getParameter('style', '') %}#}
{% set boxHeading = shortcode.getParameter('heading', shortcode.getBbCode()) %}
{% set boxLevel = shortcode.getParameter('level', '3') %}
{% set boxImage = shortcode.getParameter('image', '') %}
{% set boxImageAlt = shortcode.getParameter('alt', '') %}
{% set boxImageTitle = shortcode.getParameter('title', '') %}
{# Options for button in box #}
{% set buttonLabel = shortcode.getParameter('button-label', '') %}
{% set buttonUrl = shortcode.getParameter('button-url', '') %}
{% set buttonTarget = shortcode.getParameter('button-target', 'self') %}
{% set buttonClasses = shortcode.getParameter('button-classes', '') %}
{# Get the relative path to the current page #}
{% set pagePath = uri.route(true) %}
{% set imagePath = pagePath ~ '/' ~ boxImage %}
<article class="box">
{% if boxImage %}
<span class="image fit">
<img src="{{ imagePath }}" alt="{{ boxImageAlt }}" title="{{ boxImageTitle }}"/>
</span>
{% endif %}
<header>
{% if boxHeading %}
<h{{ boxLevel }}>{{ boxHeading|raw }}</h{{ boxLevel }}>
{% endif %}
{{ shortcode.content|raw }}
{% if buttonLabel and buttonUrl %}
<p>
<a href="{{ buttonUrl }}" class="button {{ buttonClasses }}" target="_{{ buttonTarget }}">{{ buttonLabel }}</a>
</p>
{% endif %}
</header>
</article>

View file

@ -0,0 +1,9 @@
<section {% if section_id %} id="{{ section_id }}" {% endif %}>
<div class="{{ row_class }}" {% if row_styles %}style="{{ row_styles }}"{% endif %}>
{% for key, column in columns %}
<div class="{{ column.getParameter('class', 'col-4 col-6-medium col-12-small') }}">
{{ column.getContent()|raw }}
</div>
{% endfor %}
</div>
</section>