forge-joniko/ldc-loue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Color Picker nullable

Browse source
This commit is contained in:
Jérémy Munsch 2022-06-29 14:55:20 +02:00
parent 5a1b1a84db
commit 99c33bbaf2
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
14 changed files with 1118 additions and 510 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/Casts/HtmlColor.php
View file

@ -25,6 +25,7 @@ class HtmlColor implements CastsAttributes
*/
public function get($model, $key, $value, $attributes)
{
// phpcs:enable
return "#" . $this->zeropad(dechex($value), 6);
}
@ -36,9 +37,14 @@ class HtmlColor implements CastsAttributes
* @param mixed $value
* @param array $attributes
* @return integer
* @phpcs:disable Squiz.Commenting.FunctionComment.TypeHintMissing
* @phpcs:disable Squiz.Commenting.FunctionComment.ScalarTypeHintMissing
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInImplementedInterfaceBeforeLastUsed
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInImplementedInterfaceAfterLastUsed
*/
public function set($model, $key, $value, $attributes)
{
// phpcs:enable
return \intval(hexdec(ltrim($value, '#')));
}
@ -49,7 +55,7 @@ class HtmlColor implements CastsAttributes
* @param integer $lim
* @return string
*/
private function zeropad(string $num, int $lim): string
protected function zeropad(string $num, int $lim): string
{
return (strlen($num) >= $lim) ? $num : $this->zeropad("0" . $num, $lim);
}

63
app/Casts/RgbaColor.php Normal file
View file

@ -0,0 +1,63 @@
<?php
namespace App\Casts;
/**
* Custom cast RGBA Color
* https://laravel.com/docs/8.x/eloquent-mutators#custom-casts
*/
class RgbaColor extends HtmlColor
{
/**
* Cast the given value.
*
* @param Model $model
* @param string $key
* @param mixed $value
* @param array $attributes
* @return string
* @phpcs:disable Squiz.Commenting.FunctionComment.TypeHintMissing
* @phpcs:disable Squiz.Commenting.FunctionComment.ScalarTypeHintMissing
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClassBeforeLastUsed
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClassAfterLastUsed
*/
public function get($model, $key, $value, $attributes)
{
// phpcs:enable
$intValues = collect(\str_split(\dechex(\intval($value)), 2))
->map(function ($hex) {
return \hexdec($hex);
});
// * Set Transparency as float
$hexString = $intValues->push(\round($intValues->pop() / 100, 2))->implode(',');
return "rgba($hexString)";
}
/**
* Prepare the given value for storage.
*
* @param Model $model
* @param string $key
* @param mixed $value
* @param array $attributes
* @return integer
* @phpcs:disable Squiz.Commenting.FunctionComment.TypeHintMissing
* @phpcs:disable Squiz.Commenting.FunctionComment.ScalarTypeHintMissing
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClassBeforeLastUsed
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClassAfterLastUsed
*/
public function set($model, $key, $value, $attributes)
{
// phpcs:enable
$value = \rtrim(\ltrim(\str_replace(' ', '', \str_replace('rgba', '', \strval($value))), '('), ')');
$intValues = collect(\explode(',', $value))->map(function ($val) {
return \floatval($val);
});
// * Set Transparency as int
$hexConcat = $intValues->push($intValues->pop() * 100)->map(function ($value) {
return $this->zeropad(dechex(\intval($value)), 2);
})->implode('');
return \intval(\hexdec($hexConcat));
}
}

46
app/Casts/RgbaColorNullable.php Normal file
View file

@ -0,0 +1,46 @@
<?php
namespace App\Casts;
use App\Casts\RgbaColor as CastsRgbaColor;
/**
* Custom cast RGBA Color nullable
* https://laravel.com/docs/8.x/eloquent-mutators#custom-casts
*/
class RgbaColorNullable extends CastsRgbaColor
{
/**
* Cast the given value.
*
* @param Model $model
* @param string $key
* @param mixed $value
* @param array $attributes
* @return string
* @phpcs:disable Squiz.Commenting.FunctionComment.TypeHintMissing
* @phpcs:disable Squiz.Commenting.FunctionComment.ScalarTypeHintMissing
*/
public function get($model, $key, $value, $attributes)
{
// phpcs:enable
return \is_null($value) ? $value : parent::get($model, $key, $value, $attributes);
}
/**
* Prepare the given value for storage.
*
* @param Model $model
* @param string $key
* @param mixed $value
* @param array $attributes
* @return integer
* @phpcs:disable Squiz.Commenting.FunctionComment.TypeHintMissing
* @phpcs:disable Squiz.Commenting.FunctionComment.ScalarTypeHintMissing
*/
public function set($model, $key, $value, $attributes)
{
// phpcs:enable
return \is_null($value) ? $value : parent::set($model, $key, $value, $attributes);
}
}

14
app/Http/Requests/Bo/Sliders/StoreSliderRequest.php
View file

@ -47,17 +47,19 @@ class StoreSliderRequest extends FormRequest
{
return \array_merge([
'title' => 'required|min:3|max:255',
'title_color' => 'required|color_hex',
'title_color_bg' => 'required|color_hex',
'title_color' => 'nullable|color_rgba',
'title_color_bg' => 'nullable|color_rgba',
'subtitle' => 'required|min:3|max:255',
'subtitle_color' => 'required|color_hex',
'subtitle_color_bg' => 'required|color_hex',
'subtitle_color' => 'nullable|color_rgba',
'subtitle_color_bg' => 'nullable|color_rgba',
'type' => ['required', new EnumIsValidRule(SliderType::class)],
'position' => ['required', new EnumIsValidRule(SliderPosition::class)],
'link' => 'required|url',
'link_title' => 'required|min:3|max:255',
'link_color' => 'required|color_hex',
'link_color_bg' => 'required|color_hex',
'link_color' => 'nullable|color_rgba',
'link_color_hover' => 'nullable|color_rgba',
'link_color_bg' => 'nullable|color_rgba',
'link_color_bg_hover' => 'nullable|color_rgba',
'link_new_tab' => 'required|boolean',
'status' => 'required|boolean',
'publish_at' => 'nullable|date_format:Y-m-d H:i',

18
app/Models/Slider.php
View file

@ -2,7 +2,7 @@
namespace App\Models;
use App\Casts\HtmlColor;
use App\Casts\RgbaColorNullable;
use App\Enums\Sliders\SliderPosition;
use App\Enums\Sliders\SliderType;
use App\Lib\ToolboxHelper;
@ -34,7 +34,9 @@ class Slider extends Model
'link',
'link_title',
'link_color',
'link_color_hover',
'link_color_bg',
'link_color_bg_hover',
'link_new_tab',
'status',
'order',
@ -58,12 +60,14 @@ class Slider extends Model
* @var array
*/
protected $casts = [
'title_color' => HtmlColor::class,
'title_color_bg' => HtmlColor::class,
'subtitle_color' => HtmlColor::class,
'subtitle_color_bg' => HtmlColor::class,
'link_color' => HtmlColor::class,
'link_color_bg' => HtmlColor::class,
'title_color' => RgbaColorNullable::class,
'title_color_bg' => RgbaColorNullable::class,
'subtitle_color' => RgbaColorNullable::class,
'subtitle_color_bg' => RgbaColorNullable::class,
'link_color' => RgbaColorNullable::class,
'link_color_hover' => RgbaColorNullable::class,
'link_color_bg' => RgbaColorNullable::class,
'link_color_bg_hover' => RgbaColorNullable::class,
'link_new_tab' => 'bool',
'status' => 'bool',
'publish_at' => 'datetime',

896
composer.lock generated
View file

File diff suppressed because it is too large Load diff

43
database/migrations/2022_06_27_172413_add_hover_colors_on_sliders.php Normal file
View file

@ -0,0 +1,43 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddHoverColorsOnSliders extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('sliders', function (Blueprint $table) {
$table->unsignedInteger('link_color')->comment('Couleur du lien')->change();
$table->unsignedInteger('link_color_bg')->comment('Couleur de fond du lien')->change();
// Add columns.
$table->unsignedInteger('link_color_hover')->comment('Couleur du lien (au survol)')->after('link_color');
$table->unsignedInteger('link_color_bg_hover')->comment('Couleur de fond du lien (au survol)')
->after('link_color_bg');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('sliders', function (Blueprint $table) {
$table->string('link_color')->change()->comment('Couleur du lien');
$table->string('link_color_bg')->change()->comment('Couleur de fond du lien');
// Add columns.
$table->removeColumn('link_color_hover');
$table->removeColumn('link_color_bg_hover');
});
}
}

42
database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php Normal file
View file

@ -0,0 +1,42 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class SetColorsNullableToSliders extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('sliders', function (Blueprint $table) {
$table->unsignedInteger('title_color')->nullable()->comment('Couleur du titre')->change();
$table->unsignedInteger('title_color_bg')->nullable()->comment('Couleur de fond du titre')->change();
$table->unsignedInteger('subtitle_color')->nullable()->comment('Couleur du soustitre')->change();
$table->unsignedInteger('subtitle_color_bg')->nullable()->comment('Couleur de fond du soustitre')->change();
$table->unsignedInteger('link_color')->nullable()->comment('Couleur du lien')->change();
$table->unsignedInteger('link_color_bg')->nullable()->comment('Couleur de fond du lien')->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('sliders', function (Blueprint $table) {
$table->unsignedInteger('title_color')->comment('Couleur du titre')->change();
$table->unsignedInteger('title_color_bg')->comment('Couleur de fond du titre')->change();
$table->unsignedInteger('subtitle_color')->comment('Couleur du soustitre')->change();
$table->unsignedInteger('subtitle_color_bg')->comment('Couleur de fond du soustitre')->change();
$table->unsignedInteger('link_color')->comment('Couleur du lien')->change();
$table->unsignedInteger('link_color_bg')->comment('Couleur de fond du lien')->change();
});
}
}

68
package-lock.json generated
View file

@ -8,6 +8,7 @@
"autoprefixer": "10.4.5"
},
"devDependencies": {
"@ckpack/vue-color": "^1.1.9",
"@fortawesome/fontawesome-free": "^6.1.1",
"@popperjs/core": "^2.11.5",
"@sipec/vue3-tags-input": "^3.0.4",
@ -1746,6 +1747,23 @@
"node": ">=6.9.0"
}
},
"node_modules/@ckpack/vue-color": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.1.9.tgz",
"integrity": "sha512-YBEg7SMlIxrc7Uc7pLhqR3FMDzkhxoY2xclMWWkO6+CDf7wwx9Wqh9nxRiaMqiPGcClqFDWiTgr1Z034sAcjpw==",
"dev": true,
"dependencies": {
"@ctrl/tinycolor": "^3.4.0",
"lodash-es": "^4.17.21",
"material-colors": "^1.2.6"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@ -1756,6 +1774,15 @@
"node": ">=0.1.90"
}
},
"node_modules/@ctrl/tinycolor": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==",
"dev": true,
"engines": {
"node": ">=10"
}
},
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@ -6032,6 +6059,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
"dev": true
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -6104,6 +6137,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
"dev": true
},
"node_modules/md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@ -10797,6 +10836,17 @@
"to-fast-properties": "^2.0.0"
}
},
"@ckpack/vue-color": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.1.9.tgz",
"integrity": "sha512-YBEg7SMlIxrc7Uc7pLhqR3FMDzkhxoY2xclMWWkO6+CDf7wwx9Wqh9nxRiaMqiPGcClqFDWiTgr1Z034sAcjpw==",
"dev": true,
"requires": {
"@ctrl/tinycolor": "^3.4.0",
"lodash-es": "^4.17.21",
"material-colors": "^1.2.6"
}
},
"@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@ -10804,6 +10854,12 @@
"dev": true,
"optional": true
},
"@ctrl/tinycolor": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==",
"dev": true
},
"@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@ -14192,6 +14248,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
"dev": true
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -14254,6 +14316,12 @@
}
}
},
"material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
"dev": true
},
"md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",

1
package.json
View file

@ -10,6 +10,7 @@
"production": "mix --production"
},
"devDependencies": {
"@ckpack/vue-color": "^1.1.9",
"@fortawesome/fontawesome-free": "^6.1.1",
"@popperjs/core": "^2.11.5",
"@sipec/vue3-tags-input": "^3.0.4",

243
resources/ts/components/bo/ColorPickerComponent.vue Normal file
View file

@ -0,0 +1,243 @@
<template>
<div
:class="`input-group color-picker-component ${_rgbaMode ? '' : 'noTransparent'}`"
ref="colorpicker"
>
<div
:id="`colorPickerFakeInput${_id}`"
class="d-inline-block"
ref="colorPickerFakeInput"
>
<div class="form-check form-switch d-inline-block pt-3">
<b>
<label v-if="_label.length" :for="_id ? _id : ''" class="form-label">
{{ _label }}
</label>
</b>
<input
:id="_id"
type="color"
class="form-control form-control-color"
:value="_internalHex"
:title="_title"
:aria-describedby="_ariaDescribedby"
data-bs-toggle="tooltip"
v-on:click.prevent="togglePicker()"
/>
<input :name="_name" type="text" class="d-none" :value="_value" />
</div>
<div
:class="`form-check form-switch pt-3 ${_nullable ? 'd-inline-block' : 'd-none'}`"
>
<input
ref="nullableInput"
:id="`checkbox${_id}`"
class="form-check-input me-1 mt-4"
type="checkbox"
data-bs-toggle="tooltip"
:title="__('Rendre la couleur transparente ?')"
v-on:change="updateValue"
/>
<label class="form-check-label user-select-none mt-3" :for="`checkbox${_id}`">
{{ __("Transparent ?") }}
</label>
</div>
<div :class="`chromePicker ${_displayPicker ? 'd-inline-block' : 'd-none'}`">
<chrome-picker ref="picker" v-model="_internalValue" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// @ts-ignore
import { Chrome } from "@ckpack/vue-color";
import trans from "../../modules/trans";
import Tooltip from "bootstrap/js/dist/tooltip";
export default defineComponent({
inheritAttrs: false,
mixins: [trans],
components: {
"chrome-picker": Chrome,
},
mounted() {
this.__nullableInput = this.$refs.nullableInput as HTMLInputElement;
this.__colorPickerFakeInput = this.$refs.colorPickerFakeInput as HTMLElement;
this.__picker = this.$refs.picker as Chrome;
const json = String(this.$attrs.json ?? "{}"),
data = JSON.parse(json);
this._id = this.id ? String(this.id) : data.id;
this._name = this.name ? this.name : data.name;
this._value = this.value ? this.value : data.value;
this._title = this.title ? this.title : data.title;
this._label = this.label ? this.label : data.label;
this._ariaDescribedby = this.ariaDescribedby
? this.ariaDescribedby
: data.ariaDescribedby;
this._nullable = this.nullable ? this.nullable : data.nullable ? true : false;
this._rgbaMode = this.rgbaMode ? this.rgbaMode : data.rgbaMode ? true : false;
this._internalValue = this._value;
this.$nextTick(() => {
this._internalHex = this.__picker.$data.val.hex;
});
this.initTooltips();
},
props: {
id: {
type: String,
default: null,
},
name: {
type: String,
},
value: {
type: String,
},
title: {
type: String,
},
label: {
type: String,
},
nullable: {
type: Boolean,
},
rgbaMode: {
type: Boolean,
default: false,
},
ariaDescribedby: {
type: String,
},
},
data(): {
_id: string;
_name: string;
_value: string;
_title: string;
_label: string;
_nullable: boolean;
_rgbaMode: boolean;
_ariaDescribedby: string;
_internalValue:
| string
| { hex: string; rgba: { a: string; b: string; g: string; r: string } };
_internalHex: string;
_displayPicker: boolean;
__nullableInput: HTMLInputElement | null;
__colorPickerFakeInput: HTMLElement | null;
__picker: Chrome | null;
} {
return {
_id: "",
_name: "",
_value: "",
_title: "",
_label: "",
_nullable: false,
_rgbaMode: false,
_ariaDescribedby: "",
_internalValue: "",
_internalHex: "",
_displayPicker: false,
__nullableInput: null,
__colorPickerFakeInput: null,
__picker: null,
};
},
watch: {
_internalValue() {
this.updateValue();
},
},
methods: {
updateValue() {
if (this.__nullableInput?.checked) {
this.hidePicker();
this._value = "";
this._internalHex = "";
return;
}
this.$nextTick(() => {
this._internalHex = this.__picker.$data.val.hex;
});
if (typeof this._internalValue === "string") {
this._value = this._internalValue;
return;
}
const isNull = this.__nullableInput?.checked ? true : false;
if (this._rgbaMode) {
const rgba = this._internalValue.rgba;
this._value = !isNull ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : "";
return;
}
this._value = !isNull ? this._internalValue.hex : "";
},
showPicker() {
document.addEventListener("click", this.documentClick);
this._displayPicker = true;
const input = this.__nullableInput;
if (!input) {
throw new Error("input missing");
}
input.checked = false;
},
hidePicker() {
document.removeEventListener("click", this.documentClick);
this._displayPicker = false;
},
togglePicker() {
this._displayPicker ? this.hidePicker() : this.showPicker();
},
documentClick(e: Event) {
const colorpickerComponent = this.__colorPickerFakeInput,
target = e.target;
if (
colorpickerComponent !== target &&
colorpickerComponent &&
(target as HTMLElement).closest(`#colorPickerFakeInput${this._id}`)?.id !==
colorpickerComponent.id
) {
this.hidePicker();
}
},
initTooltips() {
// * INIT Bootstrap tooltips
let tooltipTriggerList = [].slice.call(
document.querySelectorAll('.color-picker-component [data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
delay: { show: 1000, hide: 300 },
});
});
},
},
});
</script>
<style lang="scss">
.color-picker-component {
position: relative;
.chromePicker {
position: absolute;
top: 6.4rem;
left: 0;
z-index: 9;
}
&.noTransparent .vc-chrome-alpha-wrap {
display: none;
}
}
</style>

2
resources/views/back/auth/login.blade.php
View file

@ -44,7 +44,7 @@
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
<label class="form-check-label user-select-none" for="remember">
{{ __('Se souvenir de moi') }}
</label>
</div>

2
resources/views/back/modules/minicrud-form-inputs.blade.php
View file

@ -29,7 +29,7 @@
@break
@case(InputType::boolean()->value)
<div class="form-group">
<label>
<label class="user-select-none">
<input type="checkbox" name="data[{{$k}}][value]" value="1" @if (( old("data.$k.value") ?? $input['value'] ?? 0 ))checked @endif>
{{ $input['label'] }}*
</label>

182
resources/views/back/sliders/form.blade.php
View file

@ -24,7 +24,7 @@
<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="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>
@ -35,27 +35,45 @@
])
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 col-md-6 mb-3">
<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')
])
@php
$data = [
'id' => 'sliderTitleColor',
'name' => 'title_color',
'value' => old('title_color', $slider->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">
<div class="col-12 col-md-6 mb-3">
<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')
])
@php
$data = [
'id' => 'sliderTitleBgColor',
'name' => 'title_color_bg',
'value' => old('title_color_bg', $slider->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">
<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>
@ -66,22 +84,40 @@
])
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 col-md-6 mb-3">
<div class="form-group">
<label for="sliderSubTitleColor"><b>{{ __('Couleur du sous-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')
])
@php
$data = [
'id' => 'sliderSubTitleColor',
'name' => 'subtitle_color',
'value' => old('subtitle_color', $slider->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">
<div class="col-12 col-md-6 mb-3">
<div class="form-group">
<label for="sliderSubTitleBgColor"><b>{{ __('Couleur de fond du sous-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')
])
@php
$data = [
'id' => 'sliderSubTitleBgColor',
'name' => 'subtitle_color_bg',
'value' => old('subtitle_color_bg', $slider->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>
@ -93,7 +129,7 @@
<div class="col">
<fieldset class="border p-3 mb-3">
<legend>{{ __('Publication') }}</legend>
<div class="row">
<div class="row mb-3">
<div class="col">
<span class="h6 text-info">{{ __('La zone suivante à modifier la visibilité.') }}</span>
</div>
@ -171,7 +207,7 @@
<fieldset class="border p-3 mb-3">
<legend>{{ __('Lien') }}</legend>
<div class="row mb-3">
<div class="col-12 col-md-6">
<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"
@ -181,7 +217,7 @@
])
</div>
</div>
<div class="col-12 col-md-6">
<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>
@ -192,28 +228,82 @@
])
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 col-md-6 mb-3">
<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')
])
@php
$data = [
'id' => 'sliderLinkColor',
'name' => 'link_color',
'value' => old('link_color', $slider->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">
<div class="col-12 col-md-6 mb-3">
<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')
])
@php
$data = [
'id' => 'sliderLinkBGColor',
'name' => 'link_color_bg',
'value' => old('link_color_bg', $slider->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">
<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', $slider->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', $slider->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" 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>
<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')
])
@ -227,8 +317,8 @@
<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>
<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')
])