webseite-grav/plugins/flex-objects/templates/forms/fields/pagemedia/pagemedia.html.twig

90 lines
4.6 KiB
Twig
Raw Permalink Normal View History

2021-04-30 11:23:26 +02:00
{% extends "forms/field.html.twig" %}
{% block field %}
{% set value = (value is null ? field.default : value) %}
{% set pagemedia = config.get('plugins.admin.pagemedia') %}
{% set pagemedia_settings = {
resolution: {
min: {
width: pagemedia.res_min_width ?: null,
height: pagemedia.res_min_height ?: null
},
max: {
width: pagemedia.res_max_width ?: null,
height: pagemedia.res_max_height ?: null
}
},
resizeWidth: pagemedia.resize_width ?: null,
resizeHeight: pagemedia.resize_height ?: null,
resizeQuality: pagemedia.resize_quality ?: 0.8
} %}
{% set route = admin ? admin.route : grav.uri.route() %}
<div class="form-field grid vertical {% if field.classes is defined %}{{ field.classes }}{% endif %}">
<div class="form-label">
<label>{{ field.label|tu }}</label>
</div>
<div class="form-data form-uploads-wrapper">
{% set uploadLimit = grav.config.system.media.upload_limit / 1024 / 1024 %}
{% set dropzoneSettings = { maxFilesize: uploadLimit }|merge(pagemedia_settings) %}
<div id="grav-dropzone"
class="form-input-file dropzone"
{% if admin %}
data-media-url="{{ base_url }}/media/{{ route|trim('/') }}.json"
data-media-local="{{ base_url_relative_frontend|rtrim('/') }}/{{ route|trim('/') }}"
data-media-path="{{ url(context.relativePagePath) }}"
data-media-uri="{{ context.mediaUri }}"
data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
data-dropzone-field="{{ (scope ~ field.name)|fieldName }}"
{% else %}
data-media-url="{{ base_url }}/{{ route|trim('/') }}.json"
data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
data-dropzone-field="{{ (scope ~ field.name)|fieldName }}"
{% endif %}
></div>
{% if not admin or admin.session.expert == '0' %}
<input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|e }}" />
{% endif %}
</div>
</div>
{% if grav.browser.browser == 'msie' and grav.browser.version < 12 %}
{% do assets.addJs('plugin://form/assets/object.assign.polyfill.js') %}
{% endif %}
{% do assets.addJs('jquery', 101) %}
{% do assets.addJs('plugin://form/assets/form.vendor.js', { 'loading': 'defer', 'group': 'bottom' }) %}
{% do assets.addJs('plugin://form/assets/form.min.js', { 'loading': 'defer', 'group': 'bottom' }) %}
{% do assets.addCss('plugin://form/assets/dropzone.min.css', { 'group': 'form'}) %}
{{ assets.css('form')|raw }}
{% do assets.addInlineJs("
window.GravForm = window.GravForm || {};
window.GravForm = Object.assign({}, window.GravForm, {
translations: {
PLUGIN_FORM: {
'DROPZONE_CANCEL_UPLOAD': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD'|t|json_encode ~ ",
'DROPZONE_CANCEL_UPLOAD_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD_CONFIRMATION'|t|json_encode ~ ",
'DROPZONE_DEFAULT_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_DEFAULT_MESSAGE'|t|json_encode ~ ",
'DROPZONE_FALLBACK_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_MESSAGE'|t|json_encode ~ ",
'DROPZONE_FALLBACK_TEXT': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_TEXT'|t|json_encode ~ ",
'DROPZONE_FILE_TOO_BIG': " ~ 'PLUGIN_FORM.DROPZONE_FILE_TOO_BIG'|t|json_encode ~ ",
'DROPZONE_INVALID_FILE_TYPE': " ~ 'PLUGIN_FORM.DROPZONE_INVALID_FILE_TYPE'|t|json_encode ~ ",
'DROPZONE_MAX_FILES_EXCEEDED': " ~ 'PLUGIN_FORM.DROPZONE_MAX_FILES_EXCEEDED'|t|json_encode ~ ",
'DROPZONE_REMOVE_FILE': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE'|t|json_encode ~ ",
'DROPZONE_REMOVE_FILE_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE_CONFIRMATION'|t|json_encode ~ ",
'DROPZONE_RESPONSE_ERROR': " ~ 'PLUGIN_FORM.DROPZONE_RESPONSE_ERROR'|t|json_encode ~ ",
'RESOLUTION_MIN': " ~ 'PLUGIN_FORM.RESOLUTION_MIN'|t|json_encode ~ ",
'RESOLUTION_MAX': " ~ 'PLUGIN_FORM.RESOLUTION_MAX'|t|json_encode ~ "
}
}
});
", { 'group': 'bottom', 'position': 'before' }) %}
{% if not config.flex.pagemedia.dropzone.template %}
{% do config.set('flex.pagemedia.dropzone.template', true) %}
<div id="dropzone-media-template" style="display:none;">
{% include 'forms/fields/pagemedia/template.html.twig' %}
</div>
{% endif %}
{% endblock %}