October CMS - очень расширяемая платформа.Вы можете расширить каждый аспект этого.
То же самое относится и к плагину для строителей, вы можете расширить его в соответствии со своими потребностями.
Пожалуйста, подождите, этот ответ будет долгим, но вы найдете его очень полезным.
FinalРезультаты
- Это добавит элемент управления в контрольный список, чтобы вы могли легко добавить его и использовать его также для других полей.
Настраиваемый - вам не нужно редактировать какой-либо файл / частичный, чтобы изменить его значения.это все внутри плагин строителя.ваши значения [мин., макс., шаг] имя поля и т. д. все, что вы можете редактировать / обновлять из плагина компоновщика.
Это автоматически.означает, что метки и имена полей все будут работать как другие элементы управления, вам не нужно ничего указывать.все будет динамически.
Итак, давайте начнем расширять плагин компоновщика:)
- добавьте этот код в метод загрузки вашего плагина, он в основном добавит элемент управления в список управления плагином Builder.[1-е изображение]
public function boot() {
\Backend\Widgets\Form::extend(function($widget) {
$widget->addViewPath(\File::symbolizePath('~/plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/field_partials'));
});
\Event::listen('pages.builder.registerControls', function($controlLibrary) {
$properties = [
'min' => [
'title' => 'Min',
'type' => 'string',
'default' => '0',
'ignoreIfEmpty' => false,
'sortOrder' => 81
],
'max' => [
'title' => 'Max',
'type' => 'string',
'default' => '100',
'ignoreIfEmpty' => false,
'sortOrder' => 82
],
'step' => [
'title' => 'Step',
'type' => 'string',
'default' => '10',
'ignoreIfEmpty' => false,
'sortOrder' => 83,
]
];
$controlLibrary->registerControl(
'my_range',
'Range Field',
'Custom Range Field',
\RainLab\Builder\Classes\ControlLibrary::GROUP_STANDARD,
'icon-arrows-h',
$controlLibrary->getStandardProperties(['stretch'], $properties),
\HardikSatasiya\SoTest\Classes\CustomDesignTimeProvider::class
);
});
.... your extra code ...
теперь вам нужно создать / добавить необходимые зависимые файлы plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider.php, plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/partials/_control-my_range.htm и plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/field_partials/_field_my_range.htm'
плагины / хардиксатасия / сотест / классы / CustomDesignTimeProvider.php
<?php namespace HardikSatasiya\SoTest\Classes;
use File;
use RainLab\Builder\Classes\ControlDesignTimeProviderBase;
class CustomDesignTimeProvider extends ControlDesignTimeProviderBase {
public function renderControlBody($type, $properties, $formBuilder)
{
return $this->makePartial('control-'.$type, [
'properties'=>$properties,
'formBuilder' => $formBuilder
]);
}
public function renderControlStaticBody($type, $properties, $controlConfiguration, $formBuilder)
{
$partialName = 'control-static-'.$type;
$partialPath = $this->getViewPath('_'.$partialName.'.htm');
if (!File::exists($partialPath)) {
return null;
}
return $this->makePartial($partialName, [
'properties'=>$properties,
'controlConfiguration' => $controlConfiguration,
'formBuilder' => $formBuilder
]);
}
public function controlHasLabels($type)
{
return true;
}
}
плагины / хардиксатасия / сотест / классы / CustomDesignTimeProvider / partials / _control-my_range.htm
<div class="builder-blueprint-control-text">
<i class="icon-arrows-h"></i> Range Field
</div>
в то время как вышеуказанные шаги добавят наш пользовательский элемент управления в список построителей плагинов, следующим шагом будет частичное добавление поля формы.[3-е изображение]
плагины / хардиксатасия / сотест / классы / CustomDesignTimeProvider / field_partials / _field_my_range.htm
<!-- Range -->
<?php if ($this->previewMode): ?>
<span class="form-control"><?= $field->value ? e($field->value) : ' ' ?></span>
<?php else: ?>
<div style="display: flex;">
<span style="width: 30px; margin-right: 20px;" id="<?= $field->getId() ?>_val">
<?= $field->value ?>
</span>
<span>
[<?= $field->getConfig('min') ?>]
</span>
<input
type="range"
name="<?= $field->getName() ?>"
id="<?= $field->getId() ?>"
value="<?= e($field->value) ?>"
min="<?= $field->getConfig('min') ?>"
max="<?= $field->getConfig('max') ?>"
step="<?= $field->getConfig('step') ?>"
oninput="(function(input) { document.getElementById('<?= $field->getId() ?>_val').innerText = input.value; })(this)"
<?= $field->getAttributes() ?>
/>
<span>
[<?= $field->getConfig('max') ?>]
</span>
</div>
<?php endif ?>
Эти HTML-файлы представляют собой HTML-разметку, поэтому их можно редактироватьих и добавьте css / style в соответствии с вашими потребностями.
Как только вы выполните следующие шаги, вы сможете увидеть свой custom range control в контрольном списке построителя форм.теперь вы можете добавить его, обновить его, как и любой другой элемент управления по умолчанию.
Его полностью динамический, вы можете выбрать field-name, min, max, step, и он будет применен.
Примечание: Простоубедитесь, что вы заменили author-name и plugin-name в соответствии с настройкой, указанной в предоставленном коде.
, если у вас есть какие-либо сомнения, пожалуйста, прокомментируйте.