refactor(macros): convert to templates
This commit is contained in:
Jérémy Dufraisse
parent
9dd29d0441
commit
5905ee4d17
@ -1,8 +1,5 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
|
||||
{% from "includes/macros/actions.twig" import actions %}
|
||||
{% from "includes/macros/video.twig" import video %}
|
||||
<!-- Content Section-->
|
||||
<section class="page-section content" id="content">
|
||||
<div class="container">
|
||||
@ -16,12 +13,12 @@
|
||||
<div class="divider-custom-line"></div>
|
||||
</div>
|
||||
{% if meta.video %}
|
||||
{{ video(meta.video, meta.image, "content") }}
|
||||
{{ include("includes/blocks/_video.twig",{video:meta.video,image:meta.image,mode:"content"}) }}
|
||||
{% elseif meta.image %}
|
||||
<img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
|
||||
{% endif %}
|
||||
{{ content }}
|
||||
{{ actions(meta.actions, "single_page") }}
|
||||
{{ include('includes/blocks/_actions.twig',{actions:meta.actions, mode:"single_page"}) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
|
||||
{% from "includes/macros/actions.twig" import actions %}
|
||||
{% if not (index.location.disabled and index.social.disabled and index.footer.disabled) %}
|
||||
<!-- Footer-->
|
||||
<footer role="contentinfo">
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
|
||||
{% from "includes/macros/actions.twig" import actions %}
|
||||
{% from "includes/macros/video.twig" import video %}
|
||||
<section id="hero" class="layout-maxed bg-blue">
|
||||
<div class="layout-hero bg-section bg-overlay bg-gradient sm:py-36 py-8" <?php bg('bg-hero')?>>
|
||||
<div class="hero-content grid md:grid-cols-2 flex flex-wrap sm:my-36 my-8 sm:py-36 py-8">
|
||||
@ -84,11 +81,11 @@
|
||||
</div>
|
||||
<div class="layout-maxed py-36">
|
||||
{# {% if meta.video %}
|
||||
{{ video(meta.video, meta.image, "content") }}
|
||||
{{ include("includes/blocks/_video.twig",{video:meta.video,image:meta.image,mode:"content"}) }}
|
||||
{% elseif meta.image %}
|
||||
<img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
|
||||
{% endif %} #}
|
||||
{{ content }}
|
||||
{# {{ actions(meta.actions, "single_page") }} #}
|
||||
{# {{ include('includes/blocks/_actions.twig',{actions:meta.actions, mode:"single_page"}) }} #}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
67
includes/blocks/_actions.twig
Normal file
67
includes/blocks/_actions.twig
Normal file
@ -0,0 +1,67 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
|
||||
{% if mode == "portfolio" and (not (include_close_button is defined) or (include_close_button is same as(true))) %}
|
||||
{% set actions = (actions ? actions : [])|merge([{
|
||||
"icon": "times",
|
||||
"content": "Close Window",
|
||||
"color": "primary",
|
||||
"outline": false,
|
||||
"close_button": true}]) %}
|
||||
{% endif %}
|
||||
|
||||
{% if actions %}
|
||||
<div class="text-center mt-4">
|
||||
{% block actionscontent %}
|
||||
{% for action in actions %}
|
||||
{% if action.close_button %}
|
||||
<button data-bs-dismiss="modal"
|
||||
|
||||
{% block attributes %}
|
||||
class="btn {{
|
||||
(mode == "social")
|
||||
? 'btn-social mx-1'
|
||||
: 'mx-1 my-1'
|
||||
}}
|
||||
{%- if mode != "social" and not action.close_button and action.size != "medium"
|
||||
%} {% if action.size in ["small", "large", "xlarge"] -%}
|
||||
{{- action.size|replace({"small": "btn-sm", "large": "btn-lg", "xlarge": "btn-xl"}) -}}
|
||||
{% else %}btn-xl
|
||||
{%- endif -%}
|
||||
{%- endif %} btn-{{
|
||||
(
|
||||
action.outline is same as(true) or
|
||||
mode in ["about", "social"]
|
||||
) ? 'outline-' }}{{
|
||||
(action.color in ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"])
|
||||
? action.color
|
||||
: (
|
||||
(mode in ["about", "social"])
|
||||
? 'light'
|
||||
: 'primary'
|
||||
)
|
||||
}}{% if action.disabled %} disabled{% endif %}
|
||||
{%- if action.close_button %} d-block mx-auto mt-4{% endif %}"
|
||||
{% if action.link and not action.disabled %} href="{{ action.link|url }}" {% endif %}
|
||||
{% endblock attributes %}
|
||||
>
|
||||
|
||||
{% block contentlink %}
|
||||
{% if action.icon %}
|
||||
<i class="{{ [(action.brands ? 'fab' : 'fas'), 'fa-fw', ('fa-' ~ action.icon), (mode != 'social' ? 'me-2')]|join(' ')}}"></i>
|
||||
{% endif %}
|
||||
{{ mode != "social" ? action.content }}
|
||||
{% endblock contentlink %}
|
||||
|
||||
</button>
|
||||
{% else %}
|
||||
<a {{ block('attributes') }}>
|
||||
{{ block('contentlink') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endblock actionscontent %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ block('actionscontent') }}
|
||||
{% endif %}
|
||||
19
includes/blocks/_markdown_by_paragraph.twig
Normal file
19
includes/blocks/_markdown_by_paragraph.twig
Normal file
@ -0,0 +1,19 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% for paragraph in content|split("\n")|filter(e=>e is not empty) %} {# small mb-0 #}
|
||||
{% if mode == "about" %}
|
||||
<div class="col-lg-4{{ loop.first : " ms-auto" : "" }}{{ loop.last : " me-auto" : "" }}">
|
||||
{% block paragapheblock %}
|
||||
<p class="{{ (mode == "about") ? "lead" : (
|
||||
(mode == "footer") ? "lead mb-0" : (
|
||||
(mode == "copyright") ? "small mb-0" : ""
|
||||
)
|
||||
) }}">
|
||||
{{ paragraph|markdown(singleLine=true) }}
|
||||
</p>
|
||||
{% endblock paragapheblock %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ block('paragapheblock') }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
26
includes/blocks/_video.twig
Normal file
26
includes/blocks/_video.twig
Normal file
@ -0,0 +1,26 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% set known_video_types = {
|
||||
"3gp":"video/3gpp",
|
||||
"3g2":"video/3gpp2",
|
||||
"avi":"video/x-msvideo",
|
||||
"mpg":"video/mpeg",
|
||||
"mpeg":"video/mpeg",
|
||||
"mp4":"video/mp4",
|
||||
"mov":"video/quicktime",
|
||||
"ogv":"video/ogg",
|
||||
"ts":"video/mp2t",
|
||||
"qt":"video/quicktime",
|
||||
"webm":"video/webm",
|
||||
"wmv":"video/x-ms-wmv",
|
||||
} %}
|
||||
<video
|
||||
class="img-fluid rounded d-block mx-auto{% if mode == "content" %} mb-5{% endif %}"
|
||||
{% if image %} poster="{{ image|url }}" {% endif %}
|
||||
{% if mode == "portfolio" %} autoplay muted loop {% else %} controls {% endif %}>
|
||||
{% for source in (video is iterable and (not (video[1] starts with "video/") or ("." in video[1])) ? video : [video]) %}
|
||||
{% set mime = (source is iterable) ? source[1] : known_video_types[source|split(".")|last] %}
|
||||
<source src="{{ source is iterable ? source[0]|url : source|url }}" {% if mime %} type="{{ mime }}" {% endif %}>
|
||||
{% endfor %}
|
||||
Your browser does not support this video!
|
||||
</video>
|
||||
@ -1,53 +0,0 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% macro actions(actions, mode, include_close_button = true) %}
|
||||
{% set has_actions = actions ? true : false %}
|
||||
{{ has_actions ? '<div class="text-center mt-4">' }}
|
||||
{% if mode == "portfolio" and include_close_button %}
|
||||
{% set close_button = {"icon": "times", "content": "Close Window", "color": "primary", "outline": false, "close_button": true} %}
|
||||
{% set actions = actions ? actions|merge([close_button]) : [close_button] %}
|
||||
{% endif %}
|
||||
|
||||
{% for action in actions %}
|
||||
{% set classes = ["btn"] %}
|
||||
{% if mode == "social" %}
|
||||
{% set classes = classes|merge(["btn-social","mx-1"]) %}
|
||||
{% else %}
|
||||
{% set classes = classes|merge(["mx-1", "my-1"]) %}
|
||||
{% endif %}
|
||||
{% set size = "btn-xl" %}
|
||||
{% set color = mode in ["about", "social"] ? "light" : "primary" %}
|
||||
{% set outline = mode in ["about", "social"] ? true : false %}
|
||||
|
||||
{% if action.size in ["small", "large", "xlarge"] %}
|
||||
{% set size = action.size|replace({"small": "btn-sm", "large": "btn-lg", "xlarge": "btn-xl"}) %}
|
||||
{% endif %}
|
||||
|
||||
{% if action.color in ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"] %}
|
||||
{% set color = action.color %}
|
||||
{% endif %}
|
||||
|
||||
{% if action.outline is defined and action.outline in [true, false] %}
|
||||
{% set outline = action.outline %}
|
||||
{% endif %}
|
||||
|
||||
{% if mode != "social" and not action.close_button and action.size != "medium" %}{% set classes = classes|merge([size]) %}{% endif %}
|
||||
|
||||
{% set classes = classes|merge([["btn-", (outline ? "outline-"), color ]|join]) %}
|
||||
|
||||
{% if action.disabled %}{% set classes = classes|merge(["disabled"]) %}{% endif %}
|
||||
|
||||
{% if action.close_button %}
|
||||
{% set classes = classes|merge(["d-block", "mx-auto", "mt-4"]) %}
|
||||
{% endif %}
|
||||
|
||||
{{ action.close_button ? '<button data-bs-dismiss="modal"' : "<a" }} class="{{ classes|join(" ") }}" {% if action.link and not action.disabled %} href="{{ action.link|url }}" {% endif %}>
|
||||
{% if action.icon %}
|
||||
<i class="{{ [(action.brands ? 'fab' : 'fas'), 'fa-fw', ('fa-' ~ action.icon), (mode != 'social' ? 'me-2')]|join(' ')}}"></i>
|
||||
{% endif %}
|
||||
{{ mode != "social" ? action.content }}
|
||||
{{ action.close_button ? "</button>" : "</a>" }}
|
||||
|
||||
{% endfor %}
|
||||
{{ has_actions ? "</div>" }}
|
||||
{% endmacro %}
|
||||
@ -1,30 +0,0 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% macro markdown_by_paragraph(content, mode) %}
|
||||
{% set content_array = [] %}
|
||||
{% for paragraph in content|split("\n") %}
|
||||
{% if paragraph %}
|
||||
{% set content_array = content_array|merge([paragraph]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for paragraph in content_array %} {# small mb-0 #}
|
||||
{% set p_class = [] %}
|
||||
{% if mode == "footer" or mode == "about" %}{% set p_class = p_class|merge(["lead"]) %}{% endif %}
|
||||
{% if mode == "copyright" %}{% set p_class = p_class|merge(["small"]) %}{% endif %}
|
||||
{% if mode == "footer" or mode == "copyright" %}{% set p_class = p_class|merge(["mb-0"]) %}{% endif %}
|
||||
|
||||
{% if mode == "about" %}
|
||||
{% set div_class = ["col-lg-4"] %}
|
||||
{% if loop.first %}
|
||||
{% set div_class = div_class|merge(["ms-auto"]) %}
|
||||
{% endif %}
|
||||
{% if loop.last %}
|
||||
{% set div_class = div_class|merge(["me-auto"]) %}
|
||||
{% endif %}
|
||||
<div class="{{ div_class|join(" ") }}">
|
||||
{% endif %}
|
||||
<p class="{{ p_class|join(" ") }}">{{ paragraph|markdown(singleLine=true) }}</p>
|
||||
{{ mode == "about" ? "</div>" }}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
@ -1,37 +0,0 @@
|
||||
{# SPDX-License-Identifier: EUPL-1.2 #}
|
||||
|
||||
{% macro video(video, image, mode, loop_index=0) %}
|
||||
{% set known_video_types = {
|
||||
"3gp":"video/3gpp",
|
||||
"3g2":"video/3gpp2",
|
||||
"avi":"video/x-msvideo",
|
||||
"mpg":"video/mpeg",
|
||||
"mpeg":"video/mpeg",
|
||||
"mp4":"video/mp4",
|
||||
"mov":"video/quicktime",
|
||||
"ogv":"video/ogg",
|
||||
"ts":"video/mp2t",
|
||||
"qt":"video/quicktime",
|
||||
"webm":"video/webm",
|
||||
"wmv":"video/x-ms-wmv",
|
||||
} %}
|
||||
<video class="img-fluid rounded d-block mx-auto{% if mode == "content" %} mb-5{% endif %}" {% if image %} poster="{{ image|url }}" {% endif %} {% if mode == "portfolio" %} autoplay muted loop {% else %} controls {% endif %}>
|
||||
{% set sources = video is iterable and (not (video[1] starts with "video/") or ("." in video[1])) ? video : [video] %}
|
||||
{% for source in sources %}
|
||||
{% if source is iterable %}
|
||||
{% set mime = source[1] %}
|
||||
{% else %}
|
||||
{% set mime = known_video_types[source|split(".")|last] %}
|
||||
{% endif %}
|
||||
<source src="{{ source is iterable ? source[0]|url : source|url }}" {% if mime %} type="{{ mime }}" {% endif %}>
|
||||
{% endfor %}
|
||||
Your browser does not support this video!
|
||||
</video>
|
||||
{% if mode == "portfolio_modal" %}
|
||||
<script>
|
||||
jQuery('#portfolioModal{{ loop_index }}').on('hidden.bs.modal', function (e) {
|
||||
jQuery('#portfolioModal{{ loop_index }} video').trigger('pause');
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
Loading…
x
Reference in New Issue
Block a user