Skip to content

F
Field
Commit bfb6e925 authored by Sylvain's avatar Sylvain
Browse files
Options

Field v1

parent 65b8025f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1558 additions and 1928 deletions
README.md
View file @ bfb6e925
......@@ -17,114 +17,329 @@ composer require goldenscarab/modulus-service-field
Laravel 5.8 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider.
## Usage simple
## Liste des champs disponibles
- [Input](#Input)
- [Select](#Select)
- [Textarea](#Textarea)
- [Checkbox](#Checkbox)
- [Radio](#Radio)
- [Range](#Range)
- [Toggle](#Toggle)
- [File](#File)
- [Image](#Image)
- [PDF](#Image)
- [Video](#Image)
- [Code](#Code)
#### Input
```php
// Simple
{!! Field::input([
'label' => 'Total',
'name' => 'total',
'value' => 23.4,
]); !!}
// Avancé
{!! Field::input([
'label' => 'Champs text',
'name' => 'my_field_name'
'label' => 'Total',
'name' => 'total',
'value' => 23.4,
'prefix' => '<i class="fa fa-money"></i>',
'suffix' => '€',
'help' => 'Taxe comprise',
'indice' => 1,
'inline' => true,
'attributes' => [
'id' => 'total-final',
'type' => 'text',
'class' => 'text-danger',
'placeholder' => '123,30',
'onchange' => "console.log('change')",
'style' => 'background-color: #c3c3c3;',
'data-type' => 'column',
'disabled' => true,
'readonly' => true,
'required' => true,
'autocomplete' => true,
'autofocus' => true
],
'popover' => [
'placement' => 'right',
'title' => 'Information',
'content' => "Le montant est calculé selon les éléments communiqué. Il peux néanmoins variée suivant d'autre facteurs non pris en compte"
],
]) !!}
```
#### Select
```php
// Simple
{!! Field::select([
'label' => 'Menu déroulant',
'name' => 'my_field_name',
'options' => [
1 => 'Item 1',
2 => 'Item 2'
]
'source' => [
1 => 'Item 1',
2 => 'Item 2'
]
]
]) !!}
// Simple avec groupes
{!! Field::select([
'label' => 'Menu déroulant',
'name' => 'my_field_name',
'value' => 23,
'options' => [
'default' => ['value' => '', 'label' => 'Choisir...'],
'source' => [
'Groupe 1' => [
23 => 'Élement 23',
24 => 'Élement 24',
25 => 'Élement 25',
],
'Groupe 2' => [
26 => 'Élement 26',
27 => 'Élement 27',
28 => 'Élement 28',
]
]
]
]) !!}
// Avancé avec Callback
{!! Field::select([
'label' => 'Collection',
'name' => 'collection',
'value' => [2, 4],
'class' => 'select2',
'size' => 'sm',
'prefix' => '<i class="fa fa-list"></i>',
'suffix' => '<i class="fa fa-hand-paper-o"></i>',
'indice' => 34,
'attributes' => [
'class' => 'select2',
'multiple' => true,
'required' => true
],
'options' => [
'source' => $collection,
'default' => ['value' => '', 'label' => 'Choisir...'],
'value' => ':id',
'label' => ['callback' => [
'function' => 'strtoupper',
'args' => ['template' => [
'format' => '%s - %s',
'args' => [':title', ':value']
]]
]],
]
]); !!}
// Avancé avec Data
{!! Field::select([
'label' => 'Ville',
'name' => 'city_id',
'value' => 2,
'placeholder' => "Choisir...",
'options' => [
'source' => $collection,
'default' => ['value' => '', 'label' => 'Choisir une ville...'],
'value' => ':id',
'label' => ['template' => [
'format' => '%s - %s',
'args' => [':city.cp', ':city.name']
]],
'attributes' => [
'data-cp' => ':city.cp',
'data-city' => ':city.name',
]
]
]) !!}
```
#### Textarea
```php
{!! Field::textarea([
'label' => 'Zone de texte',
'name' => 'my-field'
'label' => 'Contenu',
'name' => 'content',
'value' => $item->content,
'attributes' => [
'class' => 'text-editor',
'rows' => 15,
]
]) !!}
```
#### Image
#### Checkbox
```php
{!! Field::image([
'label' => 'Champs image',
'name' => 'my_field_image',
// Simple
{!! Field::checkbox([
'label' => 'Choix multiple',
'name' => 'my_field_name',
'value' => [2, 3],
'inline' => true,
'options' => [
'source' => [
1 => 'Item 1',
2 => 'Item 2',
3 => 'Item 3'
]],
]) !!}
// Avancé
{!! Field::checkbox([
'label' => 'Mon Champs',
'name' => 'mon-champs',
'value' => ['value-2', 'value-3'],
'inline' => true,
'options' => [
'source' => $collection,
'value' => ':id',
'label' => ['callback' => [
'function' => 'strtoupper',
'args' => ['template' => [
'format' => '%s - %s',
'args' => [':title', ':value']
]]
]],
'attributes' => [
'data-one' => ':data.data1',
'data-two' => ':data.data2',
'class' => [
'condition' => [
'value' => ':id',
'operator' => '==',
'comparator' => 2,
'true' => 'my-class-id-2',
]
]
]
]
] !!}
```
Has identique field with `pdf`, `video`, `file`
#### Radio
```php
// Simple
{!! Field::radio([
'label' => 'Choix',
'name' => 'my_field_name',
'value' => 2,
'inline' => true,
'options' => [
'source' => [
1 => 'Item 1',
2 => 'Item 2',
3 => 'Item 3'
]],
]) !!}
// Avancé
{!! Field::radio([
'label' => 'Mon Champs',
'name' => 'mon-champs',
'value' => 'value-2',
'options' => [
'source' => $collection,
'value' => ':id',
'label' => ['callback' => [
'function' => 'strtoupper',
'args' => ['template' => [
'format' => '%s - %s',
'args' => [':title', ':value']
]]
]],
'attributes' => [
'data-one' => ':data.data1',
'data-two' => ':data.data2',
'class' => [
'condition' => [
'value' => ':id',
'operator' => '==',
'comparator' => 2,
'true' => 'my-class-id-2',
]
]
]
]
]) !!}
```
## Usage advanced
#### Input
#### Range
```php
{!! Field::input([
'label' => 'Moneyt',
'name' => 'money',
'value' => $item->money,
'size' => 'sm',
'placeholder' => 'ex : 1 200,00',
'is_required' => true,
'prefix' => '<i class="fa fa-money"></i>',
'suffix' => '€',
{!! Field::range([
'label' => 'Zoom',
'name' => 'zoom',
'value' => 7,
'attributes' => [
'min' => -10,
'max' => 10,
],
]) !!}
```
#### Select
#### Toggle
```php
// Exemple 1
{!! Field::select([
'label' => 'Menu déroulant',
'name' => 'my_field_name',
'value' => $item->my_field_name,
'placeholder' => 'Choisir ...',
'size' => 'sm',
'is_required' => true,
'options' => [
'collect' => $collection,
'value' => 'id',
'text' => ['code', 'libelle'],
'callback' => 'strtoupper',
'template' => 'Code : %s Libellé : %s',
'datas' => ['attr' => 'id']
{!! Field::toggle([
'label' => 'Toggle',
'name' => 'toggle',
'value' => 1,
'attributes' => [
'data-on' => 'Actif',
'data-off' => 'Inactif',
'data-onstyle' => 'success',
'data-offstyle' => 'danger',
'data-toggle' => 'toggle',
'data-width' => '75',
'data-size' => 'xs'
]
]) !!}
```
// Exemple 2 with groups
{!! Field::select([
'label' => 'Menu déroulant',
'name' => 'my_field_name',
'value' => $item->my_field_name,
'placeholder' => 'Choisir ...',
'size' => 'sm',
'is_required' => true,
'options' => [
'Groupe 1' => [
23 => 'Élement 23',
24 => 'Élement 24',
25 => 'Élement 25',
],
'Groupe 2' => [
26 => 'Élement 26',
27 => 'Élement 27',
28 => 'Élement 28',
]
]
#### File
```php
{!! Field::file([
'label' => 'Uploader',
'name' => 'csv',
'prefix' => 'Fichier',
'attributes' => ['placeholder' => 'Aucun fichier choisi']
]) !!}
```
#### Image
```php
{!! Field::image([
'label' => 'Champs image',
'name' => 'my_field_image',
'value' => $item->my_field_image,
'placeholder' => 'ex: /upload/folder/image.png',
'suffix' => '<i class="fa fa-file-image-o mr-2"></i> Choisir une image',
'is_required' => true,
]) !!}
'label' => 'Champs image',
'name' => 'my_field_image',
'value' => 'image.png',
'suffix' => '<i class="fa fa-file-image-o mr-2"></i> Choisir une image',
'attributes' => [
'placeholder' => 'ex: /upload/folder/image.png',
'required' => true,
]
]) !!}
```
Has identique field with `pdf`, `video`
#### Code
```php
{!! Field::code([
'label' => 'Contenu',
'name' => 'content',
'value' => 'function foo(items) {
var x = "All this is syntax highlighted";
return x;
}',
'style' => 'min-height: 400px;',
'is_required' => true,
'datas' => array(
'language' => 'javascript',
'readonly' => 'false',
'beautiful' => 'false',
)
]) !!}
```
Click [here](example.md) for more examples
......
composer.json
View file @ bfb6e925
......@@ -27,12 +27,13 @@
"Goldenscarab\\Modulus\\Service\\Field\\FieldServiceProvider"
],
"aliases": {
"Field": "Goldenscarab\\Modulus\\Service\\Field\\Facades\\Field"
"Field": "Goldenscarab\\Modulus\\Service\\Field\\Facades\\Field",
"Field2": "Goldenscarab\\Modulus\\Service\\Field\\Facades\\Field2"
}
}
},
"require-dev": {
"laravel/framework": "5.8.x",
"goldenscarab/modulus-helpers": "0.0.x"
"goldenscarab/modulus-helpers": "0.1.x"
}
}
example.md
View file @ bfb6e925
This diff is collapsed.
src/Compose/Field2Bt4.php
View file @ bfb6e925
This diff is collapsed.
src/Facades/Field2.php 0 → 100644
View file @ bfb6e925
<?php
namespace Goldenscarab\Modulus\Service\Field\Facades;
use Illuminate\Support\Facades\Facade;
class Field2 extends Facade
{
protected static function getFacadeAccessor()
{
return 'Field2';
}
}
src/Field.php
View file @ bfb6e925
......@@ -5,7 +5,6 @@ namespace Goldenscarab\Modulus\Service\Field;
use Illuminate\Support\Facades\Request;
use Goldenscarab\Modulus\Service\Field\Compose\FieldBt4;
use Goldenscarab\Modulus\Service\Field\Compose\Field2Bt4;
class Field
......@@ -283,13 +282,4 @@ class Field
return $field->renderHTML($render);
}
public function input2($attrs = []): string
{
$field = new Field2Bt4($attrs);
$input = $field->renderInput();
$render = $field->renderWrapFieldEnvironment($input);
return $field->renderHTML($render);
}
}
src/Field2.php 0 → 100644
View file @ bfb6e925
<?php
namespace Goldenscarab\Modulus\Service\Field;
use Illuminate\Support\Facades\Request;
use Goldenscarab\Modulus\Service\Field\Compose\Field2Bt4 as FieldBt4;
class Field2
{
/**
* Retourne un champs code source
*
* @param array $attrs Attributs du champs
* @return string Le HTML du champs code source
*/
public function code($attrs): string
{
$field = new FieldBt4($attrs);
$code = $field->renderCodeEditor();
$render = $field->renderWrapFieldEnvironment($code, true);
return $field->renderHTML($render);
}
/**
* Retourne un champs select de choix de publication
* @param boolean $status La valeur du champs
* @return string Le HTML du champs de publication
*/
public function publish($status): string
{
$render = $this->select([
'label' => 'Visibilité',
'name' => 'status',
'prefix' => '<i class="fa fa-globe"></i>',
'value' => $status,
'attributes' => ['required' => true],
'options' => ['source' => [0 => 'Brouillon', 1 => 'En ligne']]
]);
return $render;
}
/**
* Retourne un champs de recherche dans une liste
* @return string Le HTML du champs de recherche
*/
public function search(): string
{
$render = $this->input([
'name' => 'search',
'value' => Request::get('search'),
'attributes' => [
'placeholder' => 'Recherche...',
'class' => 'form-control-sm',
],
'suffix' => '<button class="btn btn-outline-secondary btn-sm" type="submit" id="button-search"><i class="fa fa-search"></i></button>',
]);
return $render;
}
/**
* Retourne un champs select pour choisir le nombre d'éléments d'une liste à afficher
* @return string Le HTML du menu déroulant
*/
public function perpage(): string
{
$render = $this->select([
'label' => 'Lignes par page',
'value' => Request::fullUrlWithQuery(["perpage" => Request::get('perpage')]),
'attributes' => [
'class' => 'ml-2',
'placeholder' => 'Choisir...',
'onchange' => 'return document.location.href = this.value;'
],
'options' => [
'source' => [
Request::fullUrlWithQuery(["perpage" => 10]) => '10',
Request::fullUrlWithQuery(["perpage" => 15]) => '15',
Request::fullUrlWithQuery(["perpage" => 50]) => '50',
Request::fullUrlWithQuery(["perpage" => 100]) => '100',
Request::fullUrlWithQuery(["perpage" => 200]) => '200',
Request::fullUrlWithQuery(["perpage" => 500]) => '500',
Request::fullUrlWithQuery(["perpage" => 1000]) => '1000'
]
]
]);
return $render;
}
/**
* Retourne un champs file avec son environnement
* @param array $attrs Les attributs du champs
* @return string le HTML du champs et de son environnement
*/
public function file($attrs = []): string
{
$field = new FieldBt4($attrs);
$file = $field->renderFile();
$render = $field->renderWrapFieldEnvironment($file);
return $field->renderHTML($render);
}
/**
* Retourne un champs pdf avec son environnement
* @param array $attrs Les attributs du champs
* @return string le HTML du champs et de son environnement
*/
public function pdf($attrs = []): string
{
$field = new FieldBt4($attrs);
$image = $field->renderPdf();
$render = $field->renderWrapFieldEnvironment($image);
return $field->renderHTML($render);
}
/**
* Retourne un champs video avec son environnement
* @param array $attrs Les attributs du champs
* @return string le HTML du champs et de son environnement
*/
public function video($attrs = []): string
{
$field = new FieldBt4($attrs);
$image = $field->renderVideo();
$render = $field->renderWrapFieldEnvironment($image);
return $field->renderHTML($render);
}
/**
* Retourne un champs image avec son environnement
* @param array $attrs Les attributs du champs
* @return string le HTML du champs et de son environnement
*/
public function image($attrs = []): string
{
$field = new FieldBt4($attrs);
$image = $field->renderImage();
$render = $field->renderWrapFieldEnvironment($image);
return $field->renderHTML($render);
}
/**
* Retourne un champs dossier avec son environnement
* @param array $attrs Les attributs du champs
* @return string le HTML du champs et de son environnement
*/
public function folder($attrs = []): string
{
$field = new FieldBt4($attrs);
$folder = $field->renderFolder();
$render = $field->renderWrapFieldEnvironment($folder);
return $field->renderHTML($render);
}
/**
* Retourne un champs toggle avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function toggle($attrs = []): string
{
$field = new FieldBt4($attrs);
$toggle = $field->renderToggle();
$render = $field->renderWrapFieldEnvironment($toggle);
return $field->renderHTML($render);
}
/**
* Retourne un champs radio avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function radio($attrs = []): string
{
$field = new FieldBt4($attrs);
$radio = $field->renderRadio();
$render = $field->renderWrapFieldEnvironment($radio);
return $field->renderHTML($render);
}
/**
* Retourne un champs checkbox avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function checkbox($attrs = []): string
{
$field = new FieldBt4($attrs);
$checkbox = $field->renderCheckbox();
$render = $field->renderWrapFieldEnvironment($checkbox);
return $field->renderHTML($render);
}
/**
* Retourne un champs range avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function range($attrs = []): string
{
$field = new FieldBt4($attrs);
$range = $field->renderRange();
$render = $field->renderWrapFieldEnvironment($range);
return $field->renderHTML($render);
}
/**
* Retourne un champs pot de miel avec son environnement
* @return string Le HTML du champs et son environnement
*/
public function honeypot(): string
{
$field = new FieldBt4([
'name' => 'my-name',
'attributes' => ['class' => 'd-none']
]);
$input1 = $field->renderInput();
$field = new FieldBt4([
'name' => 'my-time',
'value' => encrypt(time()),
'attributes' => ['class' => 'd-none']
]);
$input2 = $field->renderInput();
return $field->renderHTML($input1 . $input2);
}
/**
* Retourne un champs textarea avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function textarea($attrs = []): string
{
$field = new FieldBt4($attrs);
$textarea = $field->renderTextarea();
$render = $field->renderWrapFieldEnvironment($textarea, true);
return $field->renderHTML($render);
}
/**
* Retourne un champs select avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function select($attrs = []): string
{
$field = new FieldBt4($attrs);
$select = $field->renderSelect();
$render = $field->renderWrapFieldEnvironment($select);
return $field->renderHTML($render);
}
/**
* Retourne un champs input avec son environnement
* @param array $attrs Les attributs du champs
* @return string Le HTML du champs et de son environnement
*/
public function input($attrs = []): string
{
$field = new FieldBt4($attrs);
$input = $field->renderInput();
$render = $field->renderWrapFieldEnvironment($input);
return $field->renderHTML($render);
}
}
src/FieldServiceProvider.php
View file @ bfb6e925
......@@ -28,6 +28,10 @@ class FieldServiceProvider extends ServiceProvider
$this->app->bind('Field', function() {
return new \Goldenscarab\Modulus\Service\Field\Field;
});
$this->app->bind('Field2', function() {
return new \Goldenscarab\Modulus\Service\Field\Field2;
});
}
......
tests/FieldsTest.php
View file @ bfb6e925
This diff is collapsed.
tests/html/fields/checkbox.html
View file @ bfb6e925
<div class="form-group row">
<label for="my-field-name-5" class="col-sm-2">Choix multiple</label>
<label class="col-sm-2">Choix multiple</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-1" class="form-check-input" name="my_field_name[]" value="1"/>
<label class="form-check-label" for="my-field-name-1">Option 1</label>
<input id="field-my-field-name-1" name="my_field_name[]" value="1" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-2" class="form-check-input" name="my_field_name[]" value="2" checked/>
<label class="form-check-label" for="my-field-name-2">Option 2</label>
<input id="field-my-field-name-2" name="my_field_name[]" value="2" class="form-check-input" type="checkbox" checked/>
<label class="form-check-label" for="field-my-field-name-2">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-3" class="form-check-input" name="my_field_name[]" value="3" checked/>
<label class="form-check-label" for="my-field-name-3">Option 3</label>
<input id="field-my-field-name-3" name="my_field_name[]" value="3" class="form-check-input" type="checkbox" checked/>
<label class="form-check-label" for="field-my-field-name-3">Option 3</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-4" class="form-check-input" name="my_field_name[]" value="4"/>
<label class="form-check-label" for="my-field-name-4">Option 4</label>
<input id="field-my-field-name-4" name="my_field_name[]" value="4" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-4">Option 4</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-5" class="form-check-input" name="my_field_name[]" value="5"/>
<label class="form-check-label" for="my-field-name-5">Option 5</label>
<input id="field-my-field-name-5" name="my_field_name[]" value="5" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-5">Option 5</label>
</div>
</div>
</div>
tests/html/fields/checkbox_collect.html
View file @ bfb6e925
<div class="form-group">
<label for="mon-champs-value-4">Mon Champs</label>
<label>Mon Champs</label>
<div class="form-check">
<input type="checkbox" id="mon-champs-value-1" class="form-check-input" name="mon-champs[]" value="VALUE-1" data-one="data-value1.1" data-tow="data-value1.2" />
<label class="form-check-label" for="mon-champs-value-1">1 - TITRE 1</label>
<input id="field-mon-champs-1" name="mon-champs[]" value="1" data-one="data-value1.1" data-two="data-value1.2" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-mon-champs-1">TITRE 1 - VALUE-1</label>
</div>
<div class="form-check">
<input type="checkbox" id="mon-champs-value-2" class="form-check-input" name="mon-champs[]" value="VALUE-2" data-one="data-value2.1" data-tow="data-value2.2" />
<label class="form-check-label" for="mon-champs-value-2">2 - TITRE 2</label>
<input id="field-mon-champs-2" name="mon-champs[]" value="2" data-one="data-value2.1" data-two="data-value2.2" class="my-class-id-2 form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-mon-champs-2">TITRE 2 - VALUE-2</label>
</div>
<div class="form-check">
<input type="checkbox" id="mon-champs-value-3" class="form-check-input" name="mon-champs[]" value="VALUE-3" data-one="data-value3.1" data-tow="data-value3.2" />
<label class="form-check-label" for="mon-champs-value-3">3 - TITRE 3</label>
<input id="field-mon-champs-3" name="mon-champs[]" value="3" data-one="data-value3.1" data-two="data-value3.2" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-mon-champs-3">TITRE 3 - VALUE-3</label>
</div>
<div class="form-check">
<input type="checkbox" id="mon-champs-value-4" class="form-check-input" name="mon-champs[]" value="VALUE-4" data-one="data-value4.1" data-tow="data-value4.2" />
<label class="form-check-label" for="mon-champs-value-4">4 - TITRE 4</label>
<input id="field-mon-champs-4" name="mon-champs[]" value="4" data-one="data-value4.1" data-two="data-value4.2" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-mon-champs-4">TITRE 4 - VALUE-4</label>
</div>
</div>
tests/html/fields/checkbox_indice.html
View file @ bfb6e925
<div class="form-group row">
<label for="my-field-name-12-5" class="col-sm-2">Choix multiple</label>
<label class="col-sm-2">Choix multiple</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-12-1" class="form-check-input" name="my_field_name[12][]" value="1"/>
<label class="form-check-label" for="my-field-name-12-1">Option 1</label>
<input id="field-my-field-name-12-1" name="my_field_name[12][]" value="1" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-12-1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-12-2" class="form-check-input" name="my_field_name[12][]" value="2" checked/>
<label class="form-check-label" for="my-field-name-12-2">Option 2</label>
<input id="field-my-field-name-12-2" name="my_field_name[12][]" value="2" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-12-2">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-12-3" class="form-check-input" name="my_field_name[12][]" value="3" checked/>
<label class="form-check-label" for="my-field-name-12-3">Option 3</label>
<input id="field-my-field-name-12-3" name="my_field_name[12][]" value="3" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-12-3">Option 3</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-12-4" class="form-check-input" name="my_field_name[12][]" value="4"/>
<label class="form-check-label" for="my-field-name-12-4">Option 4</label>
<input id="field-my-field-name-12-4" name="my_field_name[12][]" value="4" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-12-4">Option 4</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="my-field-name-12-5" class="form-check-input" name="my_field_name[12][]" value="5"/>
<label class="form-check-label" for="my-field-name-12-5">Option 5</label>
<input id="field-my-field-name-12-5" name="my_field_name[12][]" value="5" class="form-check-input" type="checkbox"/>
<label class="form-check-label" for="field-my-field-name-12-5">Option 5</label>
</div>
</div>
</div>
tests/html/fields/code.html
View file @ bfb6e925
<div class="form-group">
<label for="field-content" class="required">Contenu</label>
<div id="editor-field-content" class="code-editor"style="min-height: 400px;" data-language="javascript" data-readonly="false" data-beautiful="false" data-target="#field-content">function foo(items) {
<label>Contenu</label>
<div id="editor-field-content" class="code-editor" data-target="#field-content" style="min-height: 300px;" data-language="html">function foo(items) {
var x = &quot;All this is syntax highlighted&quot;;
return x;
}</div>
......
tests/html/fields/file.html
View file @ bfb6e925
......@@ -5,7 +5,7 @@
<div class="input-group-text">Fichier</div>
</div>
<div class="custom-file">
<input type="file" id="field-csv" class="custom-file-input" name="csv" value="" placeholder="Aucun fichier choisi" />
<input id="field-csv" class="custom-file-input" type="file" name="csv" placeholder="Aucun fichier choisi" />
<label class="custom-file-label" for="field-csv">Aucun fichier choisi</label>
<script type="text/javascript">
document.getElementById('field-csv').addEventListener('change', function(e) {
......
tests/html/fields/image.html
View file @ bfb6e925
<div class="form-group">
<label for="field-my-field-image" class="required">Champs image</label>
<div class="input-group">
<div class="input-group img-group">
<div class="input-group-prepend">
<div class="input-group-text text-danger">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<img id="thumb-field-my-field-image" class="image-thumb" src="http://localhost:8000/image.png" alt="thumb">
</div>
<input type="text" id="field-my-field-image" class="form-control" name="my_field_image" value="image.png" placeholder="ex: /upload/folder/image.png" required="required" />
<input id="field-my-field-image" class="form-control" type="text" name="my_field_image" value="image.png" placeholder="ex: /upload/folder/image.png" required />
<div class="input-group-append">
<button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-image" data-field="#field-my-field-image" data-mimes="application/pdf">
<button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-image" data-thumb="#thumb-field-my-field-image" data-field="#field-my-field-image" data-mimes="image">
<i class="fa fa-file-image-o mr-2"></i> Choisir une image
</button>
</div>
......
tests/html/fields/input.html
View file @ bfb6e925
<div class="form-group">
<label for="field-total">Total</label>
<input type="text" id="field-total" class="form-control" name="total" value="23,4" />
<input id="field-total" class="form-control" type="text" name="total" value="23,4" />
</div>
tests/html/fields/input_advanced.html
View file @ bfb6e925
<div class="form-group row">
<label for="total-final-1" class="requiredcol-sm-2">Total</label>
<label for="total-final" class="required col-sm-2">Total</label>
<span class="text-info popup-help" data-toggle="popover" data-placement="right" title="Information" data-content="Le montant est calculé selon les éléments communiqué. Il peux néanmoins variée suivant d'autre facteurs non pris en compte">
<i class="fa fa-info-circle"></i>
</span>
......@@ -8,7 +8,7 @@
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-money"></i></div>
</div>
<input type="text" id="total-final-1" class="form-control text-danger" name="total[1]" value="23,4" placeholder="123,30" style="background-color: #c3c3c3;" autocomplete="autocomplete" autofocus="autofocus" disabled="disabled" required="required" readonly="readonly" onchange="console.log("change")" title="Mon-id ~ mon-label" data-type="column" data-reference="Mon-id|mon-code" />
<input id="total-final" class="form-control text-danger" type="text" name="total[1]" value="23,4" placeholder="123,30" onchange="console.log('change')" style="background-color: #c3c3c3;" data-type="column" disabled readonly required autocomplete autofocus />
<div class="input-group-append">
<div class="input-group-text">€</div>
</div>
......
tests/html/fields/pdf.html
View file @ bfb6e925
......@@ -2,11 +2,11 @@
<label for="field-my-field-pdf" class="required">Champs pdf</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text text-danger">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<div class="input-group-text">
<i class="fa fa-file-pdf-o text-danger"></i>
</div>
</div>
<input type="text" id="field-my-field-pdf" class="form-control" name="my_field_pdf" value="test.pdf" placeholder="ex: /upload/folder/file.pdf" required="required" />
<input id="field-my-field-pdf" class="form-control" type="text" name="my_field_pdf" value="test.pdf" placeholder="ex: /upload/folder/file.pdf" required />
<div class="input-group-append">
<button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-pdf" data-field="#field-my-field-pdf" data-mimes="application/pdf">
<i class="fa fa-file-pdf-o mr-2"></i> Choisir un PDF
......
tests/html/fields/radio.html
View file @ bfb6e925
<div class="form-group row">
<label for="my-field-name-5" class="col-sm-2">Choix unique</label>
<label class="col-sm-2">Choix</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-1" class="form-check-input" name="my_field_name" value="1"/>
<label class="form-check-label" for="my-field-name-1">Option 1</label>
<input id="field-my-field-name-1" name="my_field_name" value="1" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-2" class="form-check-input" name="my_field_name" value="2" checked/>
<label class="form-check-label" for="my-field-name-2">Option 2</label>
<input id="field-my-field-name-2" name="my_field_name" value="2" class="form-check-input" type="radio" checked/>
<label class="form-check-label" for="field-my-field-name-2">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-3" class="form-check-input" name="my_field_name" value="3"/>
<label class="form-check-label" for="my-field-name-3">Option 3</label>
<input id="field-my-field-name-3" name="my_field_name" value="3" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-3">Option 3</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-4" class="form-check-input" name="my_field_name" value="4"/>
<label class="form-check-label" for="my-field-name-4">Option 4</label>
<input id="field-my-field-name-4" name="my_field_name" value="4" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-4">Option 4</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-5" class="form-check-input" name="my_field_name" value="5"/>
<label class="form-check-label" for="my-field-name-5">Option 5</label>
<input id="field-my-field-name-5" name="my_field_name" value="5" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-5">Option 5</label>
</div>
</div>
</div>
tests/html/fields/radio_collect.html
View file @ bfb6e925
<div class="form-group">
<label for="mon-champs-value-4">Mon Champs</label>
<label>Mon Champs</label>
<div class="form-check">
<input type="radio" id="mon-champs-value-1" class="form-check-input" name="mon-champs" value="VALUE-1" data-one="data-value1.1" data-tow="data-value1.2" />
<label class="form-check-label" for="mon-champs-value-1">1 - TITRE 1</label>
<input id="field-mon-champs-1" name="mon-champs" value="1" data-one="data-value1.1" data-two="data-value1.2" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-mon-champs-1">TITRE 1 - VALUE-1</label>
</div>
<div class="form-check">
<input type="radio" id="mon-champs-value-2" class="form-check-input" name="mon-champs" value="VALUE-2" data-one="data-value2.1" data-tow="data-value2.2" />
<label class="form-check-label" for="mon-champs-value-2">2 - TITRE 2</label>
<input id="field-mon-champs-2" name="mon-champs" value="2" data-one="data-value2.1" data-two="data-value2.2" class="my-class-id-2 form-check-input" type="radio"/>
<label class="form-check-label" for="field-mon-champs-2">TITRE 2 - VALUE-2</label>
</div>
<div class="form-check">
<input type="radio" id="mon-champs-value-3" class="form-check-input" name="mon-champs" value="VALUE-3" data-one="data-value3.1" data-tow="data-value3.2" />
<label class="form-check-label" for="mon-champs-value-3">3 - TITRE 3</label>
<input id="field-mon-champs-3" name="mon-champs" value="3" data-one="data-value3.1" data-two="data-value3.2" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-mon-champs-3">TITRE 3 - VALUE-3</label>
</div>
<div class="form-check">
<input type="radio" id="mon-champs-value-4" class="form-check-input" name="mon-champs" value="VALUE-4" data-one="data-value4.1" data-tow="data-value4.2" />
<label class="form-check-label" for="mon-champs-value-4">4 - TITRE 4</label>
<input id="field-mon-champs-4" name="mon-champs" value="4" data-one="data-value4.1" data-two="data-value4.2" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-mon-champs-4">TITRE 4 - VALUE-4</label>
</div>
</div>
tests/html/fields/radio_indice_true.html
View file @ bfb6e925
<div class="form-group row">
<label for="my-field-name-5" class="col-sm-2">Choix unique</label>
<label class="col-sm-2">Choix</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-1" class="form-check-input" name="my_field_name[]" value="1"/>
<label class="form-check-label" for="my-field-name-1">Option 1</label>
<input id="field-my-field-name-1" name="my_field_name[]" value="1" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-2" class="form-check-input" name="my_field_name[]" value="2" checked/>
<label class="form-check-label" for="my-field-name-2">Option 2</label>
<input id="field-my-field-name-2" name="my_field_name[]" value="2" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-2">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-3" class="form-check-input" name="my_field_name[]" value="3"/>
<label class="form-check-label" for="my-field-name-3">Option 3</label>
<input id="field-my-field-name-3" name="my_field_name[]" value="3" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-3">Option 3</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-4" class="form-check-input" name="my_field_name[]" value="4"/>
<label class="form-check-label" for="my-field-name-4">Option 4</label>
<input id="field-my-field-name-4" name="my_field_name[]" value="4" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-4">Option 4</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="my-field-name-5" class="form-check-input" name="my_field_name[]" value="5"/>
<label class="form-check-label" for="my-field-name-5">Option 5</label>
<input id="field-my-field-name-5" name="my_field_name[]" value="5" class="form-check-input" type="radio"/>
<label class="form-check-label" for="field-my-field-name-5">Option 5</label>
</div>
</div>
</div>
tests/html/fields/range.html
View file @ bfb6e925
<div class="form-group">
<label for="field-zoom">Zoom</label>
<input type="range" id="field-zoom" class="form-control" name="zoom" value="7" max="20" oninput="zoomShowValue(this.value)" />
<input id="field-zoom" class="form-control" type="range" name="zoom" value="7" min="-10" max="10" oninput="zoomShowValue(this.value)" />
<span id="field-zoom-value">7&nbsp;</span>
<script type="text/javascript">
function zoomShowValue(newValue) {
......
tests/html/fields/select_data.html
View file @ bfb6e925
<div class="form-group">
<label for="field-city-id">Ville</label>
<select id="field-city-id" class="form-control" name="city_id">
<option value="" selected >Choisir...</option>
<option value="">Choisir...</option>
<option value="1" data-data1="data-value1.1" data-data2="data-value1.2">Titre 1 - value-1</option>
<option value="2" data-data1="data-value2.1" data-data2="data-value2.2" selected>Titre 2 - value-2</option>
<option value="3" data-data1="data-value3.1" data-data2="data-value3.2">Titre 3 - value-3</option>
......
tests/html/fields/select_group.html
View file @ bfb6e925
<div class="form-group">
<label for="field-my-field-name" class="required">Menu déroulant</label>
<select id="field-my-field-name" class="form-control form-control-sm" name="my_field_name" required="required">
<option value="" disabled hidden selected >Choisir ...</option>
<optgroup label="Groupe 1"><option value="23" selected>Élement 23</option>
<option value="24">Élement 24</option>
<option value="25">Élement 25</option>
<select id="field-my-field-name" class="form-control form-control-sm" name="my_field_name" required>
<option value="" disabled hidden>Choisir...</option>
<optgroup label="Groupe 1">
<option value="23" selected>Élement 23</option>
<option value="24">Élement 24</option>
<option value="25">Élement 25</option>
</optgroup>
<optgroup label="Groupe 2"><option value="26">Élement 26</option>
<option value="27">Élement 27</option>
<option value="28">Élement 28</option>
<optgroup label="Groupe 2">
<option value="26">Élement 26</option>
<option value="27">Élement 27</option>
<option value="28">Élement 28</option>
</optgroup>
</select>
</div>
tests/html/fields/select_multiple.html
View file @ bfb6e925
......@@ -4,7 +4,7 @@
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-list"></i></div>
</div>
<select id="field-collection-34" class="form-control select2" name="collection[34][]" multiple="multiple" required="required">
<select id="field-collection-34" class="form-control select2" name="collection[34][]" multiple required>
<option value="1">TITRE 1 - VALUE-1</option>
<option value="2" selected>TITRE 2 - VALUE-2</option>
<option value="3">TITRE 3 - VALUE-3</option>
......
tests/html/fields/select_simple.html
View file @ bfb6e925
<div class="form-group">
<label for="field-collection-34" class="required">Collection</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-list"></i></div>
</div>
<select id="field-collection-34" class="form-control select2" name="collection[34]" required="required">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-hand-paper-o"></i></div>
</div>
</div>
<label for="field-collection">Collection</label>
<select id="field-collection" class="form-control" name="collection">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
tests/html/fields/textarea.html
View file @ bfb6e925
......@@ -3,5 +3,6 @@
<span class="text-info popup-help" data-toggle="popover" data-placement="right" title="Le contenu" data-content="Le contenu est le coeur de l'article. Grâce à l'éditeur vous pouvez formater le rendu selon votre goût.">
<i class="fa fa-info-circle"></i>
</span>
<textarea id="field-content" class="form-control text-editor" name="content" rows="15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, rem esse itaque inventore provident reiciendis quo, asperiores dolorem voluptate nostrum quisquam similique commodi quam consequatur ad eligendi iusto aperiam quos?</textarea>
<textarea id="field-content" class="form-control text-editor" name="content" rows="15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, rem esse itaque inventore provident reiciendis quo, asperiores dolorem voluptate nostrum quisquam similique commodi quam consequatur ad eligendi iusto aperiam quos?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, rem esse itaque inventore provident reiciendis quo, asperiores dolorem voluptate nostrum quisquam similique commodi quam consequatur ad eligendi iusto aperiam quos?</textarea>
</div>
tests/html/fields/toggle.html
View file @ bfb6e925
<div class="form-group">
<label for="field-toggle">Toggle</label>
<div class="toogle">
<input type="checkbox" value="1" id="field-toggle" class="form-control" name="toggle" data-on="Actif" data-off="Inactif" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-width="75" data-size="xs" checked />
<input value="1" id="field-toggle" class="form-control" name="toggle" type="checkbox" checked data-on="Actif" data-off="Inactif" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-width="75" data-size="xs" />
</div>
</div>
tests/html/fields/video.html
View file @ bfb6e925
......@@ -2,13 +2,13 @@
<label for="field-my-field-video" class="required">Champs video</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text text-danger">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<div class="input-group-text">
<i class="fa fa-video-camera"></i>
</div>
</div>
<input type="text" id="field-my-field-video" class="form-control" name="my_field_video" value="my-video.mp4" placeholder="ex: /upload/folder/video.mp4" required="required" />
<input id="field-my-field-video" class="form-control" type="text" name="my_field_video" value="my-video.mp4" placeholder="ex: /upload/folder/video.mp4" required />
<div class="input-group-append">
<button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-video" data-field="#field-my-field-video" data-mimes="application/pdf">
<button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-video" data-field="#field-my-field-video" data-mimes="video">
<i class="fa fa-file-video-o mr-2"></i> Choisir une vidéo
</button>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment