275 lines
16 KiB
PHP
275 lines
16 KiB
PHP
<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">
|
|
<div class="form-group">
|
|
<label for="sliderTitle"><b>{{ __('Titre') }}</b></label>
|
|
<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">
|
|
<div class="form-group">
|
|
<label for="sliderTitleColor"><b>{{ __('Couleur du titre') }}</b></label>
|
|
<input name="title_color" type="color" class="form-control form-control-color" id="sliderTitleColor" value="{{ old('title_color', $slider->title_color ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderTitleColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'title_color', 'helperId' => 'sliderTitleColorHelp' , 'helper' => __('Couleur du titre')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-group">
|
|
<label for="sliderTitleBgColor"><b>{{ __('Couleur de fond du titre') }}</b></label>
|
|
<input name="title_color_bg" type="color" class="form-control form-control-color" id="sliderTitleBgColor" value="{{ old('title_color_bg', $slider->title_color_bg ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderTitleBgColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'title_color_bg', 'helperId' => 'sliderTitleBgColorHelp' , 'helper' => __('Couleur de fond du titre')
|
|
])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-group">
|
|
<label for="sliderSubTitle"><b>{{ __('Sous-titre') }}</b></label>
|
|
<input name="subtitle" type="text" value="{{ old('subtitle', $slider->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">
|
|
<div class="form-group">
|
|
<label for="sliderSubTitleColor"><b>{{ __('Couleur du titre') }}</b></label>
|
|
<input name="subtitle_color" type="color" class="form-control form-control-color" id="sliderSubTitleColor" value="{{ old('subtitle_color', $slider->subtitle_color ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderSubTitleColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'subtitle_color', 'helperId' => 'sliderSubTitleColorHelp' , 'helper' => __('Couleur du sous-titre')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-group">
|
|
<label for="sliderSubTitleBgColor"><b>{{ __('Couleur de fond du titre') }}</b></label>
|
|
<input name="subtitle_color_bg" type="color" class="form-control form-control-color" id="sliderSubTitleBgColor" value="{{ old('subtitle_color_bg', $slider->subtitle_color_bg ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderSubTitleBgColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'subtitle_color_bg', 'helperId' => 'sliderSubTitleBgColorHelp' , 'helper' => __('Couleur de fond du sous-titre')
|
|
])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<fieldset class="border p-3 mb-3">
|
|
<legend>{{ __('Publication') }}</legend>
|
|
<div class="row">
|
|
<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->format('Y-m-d\TH:i') : '')) }}">
|
|
@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->format('Y-m-d\TH:i') : '')) }}">
|
|
@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="position" aria-describedby="sliderPicturePositionHelp" required>
|
|
<option value="" @if(is_null(old('position', $slider->position ?? null))) selected @endif disabled>{{ __('Séléctionnez un position de centrage') }}</option>
|
|
@foreach(App\Enums\Sliders\SliderPosition::toArray() as $status)
|
|
<option value="{{ $status->value }}" @if(old('published', optional($slider->position ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'published', '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'),
|
|
'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">
|
|
<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">
|
|
<div class="form-group">
|
|
<label for="sliderLinkLabel"><b>{{ __('Titre du lien') }}</b></label>
|
|
<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">
|
|
<div class="form-group">
|
|
<label for="sliderLinkColor"><b>{{ __('Couleur du lien') }}</b></label>
|
|
<input name="link_color" type="color" class="form-control form-control-color" id="sliderLinkColor" value="{{ old('link_color', $slider->link_color ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderLinkColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'link_color', 'helperId' => 'sliderLinkColorHelp' , 'helper' => __('Couleur du lien du slider')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-group">
|
|
<label for="sliderLinkBGColor"><b>{{ __('Couleur de fond du lien') }}</b></label>
|
|
<input name="link_color_bg" type="color" class="form-control form-control-color" id="sliderLinkBGColor" value="{{ old('link_color_bg', $slider->link_color_bg ?? '') }}" title="{{ __('Choisi ta couleur') }}" aria-describedby="sliderLinkBGColorHelp">
|
|
@include('back.modules.input-error', [
|
|
'inputName' => 'link_color_bg', 'helperId' => 'sliderLinkBGColorHelp' , 'helper' => __('Couleur de fond du lien du slider')
|
|
])
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="form-check">
|
|
<input name="link_new_tab" class="form-check-input" 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" 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" type="checkbox" id="sliderStatus" aria-describedby="sliderStatusHelp" value="1" @if(old('status', $slider->status ?? ''))checked @endif>
|
|
<label class="form-check-label" 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>
|
|
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.postPublishedHelp ? parent.children.postPublishedHelp : parent.children.postUnPublishAtHelp;
|
|
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
|