403 lines
22 KiB
PHP
403 lines
22 KiB
PHP
@if(!isset($slider))
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<div class="col-12 col-md-6 form-group">
|
|
<label for="sliderType" class="col-form-label"><b>{{ __('Type de slider') }}</b></label>
|
|
<select id="sliderType" class="form-select" name="type" aria-describedby="sliderTypeHelp" required>
|
|
<option value="" @if(is_null(old('type', $slider->type ?? null))) selected @endif disabled>{{ __('Séléctionnez un type') }}</option>
|
|
@foreach(App\Enums\Sliders\SliderType::toArray() as $type)
|
|
<option value="{{ $type->value }}" @if(old('type', optional($slider->type ?? null)->value) == $type->value) selected @endif>{{ $type->label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'type', 'helperId' => 'sliderTypeHelp' , 'helper' => __('Le type de slider à créer')
|
|
])
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<legend>{{ __('Titre et Sous-titre') }}</legend>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
<label for="sliderTitle"><b>{{ __('Titre') }}</b></label>
|
|
<div class="word-counter" data-json='@json(['id' => 'sliderTitle'])'></div>
|
|
<input name="title" type="text" value="{{ old('title', $slider->title ?? '') }}" class="form-control"
|
|
id="sliderTitle" aria-describedby="sliderTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'title', 'helperId' => 'sliderTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderTitleColor',
|
|
'name' => 'title_color',
|
|
'value' => old('title_color', optional($slider ?? null)->title_color),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur du titre'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderTitleColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'title_color'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderTitleBgColor',
|
|
'name' => 'title_color_bg',
|
|
'value' => old('title_color_bg', optional($slider ?? null)->title_color_bg),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur de fond du titre'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderTitleBgColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'title_color_bg'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
<label for="sliderSubTitle"><b>{{ __('Sous-titre') }}</b></label>
|
|
<div class="word-counter" data-json='@json(['id' => 'sliderSubTitle'])'></div>
|
|
<input name="subtitle" type="text" value="{{ old('subtitle', optional($slider ?? null)->subtitle ?? '') }}" class="form-control"
|
|
id="sliderSubTitle" aria-describedby="sliderSubTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'subtitle', 'helperId' => 'sliderSubTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderSubTitleColor',
|
|
'name' => 'subtitle_color',
|
|
'value' => old('subtitle_color', optional($slider ?? null)->subtitle_color),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur du sous-titre'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderSubTitleColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'subtitle_color'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderSubTitleBgColor',
|
|
'name' => 'subtitle_color_bg',
|
|
'value' => old('subtitle_color_bg', optional($slider ?? null)->subtitle_color_bg),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur de fond du sous-titre'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderSubTitleBgColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'subtitle_color_bg'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 form-group">
|
|
<label for="sliderTextPosition" class="col-form-label"><b>{{ __('Position des textes') }}</b></label>
|
|
<select id="sliderTextPosition" class="form-select" name="text_position_desktop" aria-describedby="sliderTextPositionHelp" required>
|
|
<option value="" @if(is_null(old('text_position_desktop', $slider->text_position_desktop ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
|
|
@foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
|
|
<option value="{{ $status->value }}" @if(old('text_position_desktop', optional($slider->text_position_desktop ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'text_position_desktop', 'helperId' => 'sliderTextPositionHelp' , 'helper' => __('Positionnement du titre/sous-titre et bouton sur l\'image (en desktop)')
|
|
])
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<legend>{{ __('Publication') }}</legend>
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<span class="h6 text-info">{{ __('La zone suivante à modifier la visibilité.') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label for="sliderPublishedAt"><b>{{ __('Date de publication (Europe/Paris)') }}</b></label>
|
|
<input id="sliderPublishedAt" name="publish_at" class="form-control publishTime" type="datetime-local" data-form-type="date" aria-describedby="sliderPublishAtHelp" value="{{ old('publish_at', ((isset($slider) and $slider->publish_at) ? $slider->publish_at->formatLocalized('%d/%m/%Y à %I:%M') : '')) }}">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'publish_at', 'helperId' => 'sliderPublishAtHelp' , 'helper' => __('Uniquement pour planifier la publication, le slider deviendra visible.')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label for="sliderUnPublishedAt"><b>{{ __('Date de fin de publication (Europe/Paris)') }}</b></label>
|
|
<input id="sliderUnPublishedAt" name="unpublish_at" class="form-control publishTime" type="datetime-local" data-form-type="date" aria-describedby="sliderUnPublishAtHelp" value="{{ old('unpublish_at', ((isset($slider) and $slider->unpublish_at) ? $slider->unpublish_at->formatLocalized('%d/%m/%Y à %I:%M') : '')) }}">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'unpublish_at', 'helperId' => 'sliderUnPublishAtHelp' , 'helper' => __('Uniquement pour planifier la fin de la publication, le slider deviendra invisible.')
|
|
])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<div class="row mb-1">
|
|
<div class="col">
|
|
<span class="h4">{{ __('Image du slider') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 form-group">
|
|
<label for="sliderPicturePosition" class="col-form-label"><b>{{ __('Position de centrage') }}</b></label>
|
|
<select id="sliderPicturePosition" class="form-select" name="picture_position_mobile" aria-describedby="sliderPicturePositionHelp" required>
|
|
<option value="" @if(is_null(old('picture_position_mobile', $slider->picture_position_mobile ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
|
|
@foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
|
|
<option value="{{ $status->value }}" @if(old('picture_position_mobile', optional($slider->picture_position_mobile ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'picture_position_mobile', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
|
|
])
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderImageInput',
|
|
'name' => 'picture',
|
|
'helper' => __('L\'image qui sera affiché sur le slide, doit être de 630px (hauteur) par 1400px (largeur)'),
|
|
'width' => 1400,
|
|
'height' => 630,
|
|
'value' => $slider->picture ?? '',
|
|
'pushString' => false
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'picture'])
|
|
<div id="image-input" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<legend>{{ __('Lien') }}</legend>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
<label for="sliderLink"><b>{{ __('Lien') }}</b></label>
|
|
<input name="link" type="text" value="{{ old('link', $slider->link ?? '') }}" class="form-control"
|
|
id="sliderLink" aria-describedby="sliderLinkHelp" placeholder="{{ __('Url') }}" required>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'link', 'helperId' => 'sliderLinkHelp' , 'helper' => __('Le lien vers lequel le bouton du slider renvois.')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
<label for="sliderLinkLabel"><b>{{ __('Titre du lien') }}</b></label>
|
|
<div class="word-counter" data-json='@json(['id' => 'sliderLinkLabel'])'></div>
|
|
<input name="link_title" type="text" value="{{ old('link_title', $slider->link_title ?? '') }}" class="form-control"
|
|
id="sliderLinkLabel" aria-describedby="sliderLinkLabelHelp" placeholder="{{ __('Text du lien') }}" required>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'link_title', 'helperId' => 'sliderLinkLabelHelp' , 'helper' => __('Le texte affiché du lien')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderLinkColor',
|
|
'name' => 'link_color',
|
|
'value' => old('link_color', optional($slider ?? null)->link_color),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur du lien'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderLinkColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'link_color'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderLinkBGColor',
|
|
'name' => 'link_color_bg',
|
|
'value' => old('link_color_bg', optional($slider ?? null)->link_color_bg),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur de fond du lien'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderLinkBGColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'link_color_bg'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderLinkHoverColor',
|
|
'name' => 'link_color_hover',
|
|
'value' => old('link_color_hover', optional($slider ?? null)->link_color_hover),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur du lien (au survol)'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderLinkHoverColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'link_color_hover'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-group">
|
|
@php
|
|
$data = [
|
|
'id' => 'sliderLinkBGHoverColor',
|
|
'name' => 'link_color_bg_hover',
|
|
'value' => old('link_color_bg_hover', optional($slider ?? null)->link_color_bg_hover),
|
|
'title' => __('Choisi ta couleur'),
|
|
'label' => __('Couleur de fond du lien (au survol)'),
|
|
'rgbaMode' => true,
|
|
'nullable' => true,
|
|
'ariaDescribedby' => 'sliderLinkBGHoverColorHelp'
|
|
];
|
|
@endphp
|
|
@include('back.modules.input-error', [ 'inputName' => 'link_color_bg_hover'])
|
|
<div class="color-picker" data-json='@json($data)'></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 mb-3">
|
|
<div class="form-check">
|
|
<input name="link_new_tab" class="form-check-input mt-2" type="checkbox" id="sliderLinkNewtab" aria-describedby="sliderLinkColorHelp" value="1" @if(old('link_new_tab', $slider->link_new_tab ?? ''))checked @endif>
|
|
<label class="form-check-label user-select-none pt-1" for="sliderLinkNewtab"><b>{{ __('Nouvel onglet') }}</b></label><br>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'link_new_tab', 'helperId' => 'sliderLinkColorHelp' , 'helper' => __('Le lien doit s\'ouvrir dans un nouvel onglet')
|
|
])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-check">
|
|
<input name="status" class="form-check-input mt-2" type="checkbox" id="sliderStatus" aria-describedby="sliderStatusHelp" value="1" @if(old('status', $slider->status ?? ''))checked @endif>
|
|
<label class="form-check-label user-select-none pt-1" for="sliderStatus"><b>{{ __('Publié') }}</b></label><br>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'status', 'helperId' => 'sliderStatusHelp' , 'helper' => __('Le slider est visible ou non')
|
|
])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@push('scripts')
|
|
<script nonce="{{ $nonce }}">
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
// Publish times
|
|
let publishTimes = document.getElementsByClassName('publishTime');
|
|
for (let input of publishTimes) {
|
|
let parent = input.parentNode,
|
|
dates = {
|
|
start: 0,
|
|
end: 0
|
|
};
|
|
input.originalValue = (new Date(input.value)).valueOf();
|
|
if(input.originalValue === NaN) {
|
|
input.originalValue = 0
|
|
}
|
|
if(input.id === 'sliderPublishedAt') {
|
|
dates.start = input.originalValue;
|
|
} else {
|
|
dates.end = input.originalValue;
|
|
}
|
|
let getEuropeParisTime = () => {
|
|
return new Date((new Date()).getTime() + (60000*((new Date()).getTimezoneOffset()+60)));
|
|
};
|
|
let setDateHelpers = (input, parent) => {
|
|
let small = parent.children.sliderPublishAtHelp ? parent.children.sliderPublishAtHelp : parent.children.sliderUnPublishAtHelp;
|
|
let isPlanned = false;
|
|
if(input.id === 'sliderPublishedAt') {
|
|
isPlanned = dates.start > dates.end && dates.end != 0;
|
|
} else {
|
|
isPlanned = dates.start < dates.end && dates.start != 0;
|
|
}
|
|
if (isPlanned || getEuropeParisTime().valueOf() < (new Date(input.value)).valueOf()) {
|
|
let date = new Date(input.value);
|
|
small.textContent = "{{ __('Planifié pour le ') }}" + date.toLocaleString();
|
|
} else {
|
|
small.textContent = input.id === 'sliderPublishedAt' ?
|
|
"{{ __('Uniquement pour planifier la publication') }}" :
|
|
"{{ __('Uniquement pour planifier la fin de la publication') }}";
|
|
}
|
|
};
|
|
setDateHelpers(input, parent);
|
|
input.addEventListener('change', (event) => {
|
|
let parent = event.target.parentNode,
|
|
input = event.target, value;
|
|
value = (new Date(input.value)).valueOf();
|
|
if(input.originalValue === NaN) {
|
|
value = 0
|
|
}
|
|
if(input.id === 'sliderPublishedAt') {
|
|
dates.start = value;
|
|
} else {
|
|
dates.end = value;
|
|
}
|
|
setDateHelpers(input, parent);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|