Proširivanje forme EPT podešavanja
Kreiranje nove klase EPT Settings forme
Čuo sam od mnogih programera zabrinutost zbog broja podešavanja za EPT module: DOM Box, pozadina, okviri, klase itd. Ovi programeri su pretpostavljali da će urednici sadržaja biti zbunjeni ili na neki način podstaknuti da prave drastično različite pasuse, margine, pozadine. Nekim projektima je potrebna fleksibilnost i više podešavanja za urednike sadržaja, ali neki projekti imaju prilično stroge vodiče sa komponentama. Za ovaj slučaj treba da promenimo naš EPT Settings field widget.
Takođe, ako kreirate novi EPT modul i prikačite JavaScript plugin sa opcijama, biće vam potreban sopstveni EPT settings widget sa poljima za ta podešavanja.
EPT Core modul ima klasu EptSettingsDefaultWidget za EPT Settings field widget. Ona sadrži DOM Box, pozadinu i sva ostala podešavanja. Hajde da počnemo da pravimo novu klasu EptSettingsSimpleWidget (ja ću je staviti u EPT Core modul). Ona će sadržati samo tri podešavanja: Širina (Width), Razmak (Spacing, za marginu ispod pasusa).
Kreirajte novi fajl:
/src/Plugin/Field/FieldWidget/EptSettingsSimpleWidget.php
<?php
namespace Drupal\ept_core\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Utility\Color;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;
/**
* Implementacija plugina za 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT jednostavna podešavanja pasusa"),
* field_types = {
* "ept_settings"
* }
* )
*/
class EptSettingsSimpleWidget extends EptSettingsDefaultWidget {
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
return $element;
}
/**
* {@inheritdoc}
*/
public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
foreach ($values as &$value) {
$value += ['ept_settings' => []];
}
return $values;
}
}
Proširujemo našu osnovnu klasu za podešavanja EptSettingsDefaultWidget. U komentaru sa anotacijom @FieldWidget dajemo naziv našem widget-u id = "ept_settings_simple" i label = @Translation("EPT jednostavna podešavanja")
/**
* Implementacija plugina za 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT jednostavna podešavanja pasusa"),
* field_types = {
* "ept_settings"
* }
* )
*/
Imamo takođe dve metode: formElement() i massageFormValues(). Metodu massageFormValues() možete ostaviti kako jeste. Drupal će automatski serijalizovati sva podešavanja u jednom polju field_ept_settings. Dakle, nije važno koliko imate podešavanja, ona će se čuvati kao serijalizovani niz, a vi treba samo da definišete polja za podešavanja putem Form API-ja:
https://www.drupal.org/docs/drupal-apis/form-api
U metodi formElement() definišemo polja za podešavanja. Hajde da sakrijemo DOM Box i podešavanja za okvire:
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
unset($element['ept_settings']['design_options']['box1']);
unset($element['ept_settings']['design_options']['other_settings']['border_color']);
unset($element['ept_settings']['design_options']['other_settings']['border_style']);
unset($element['ept_settings']['design_options']['other_settings']['border_radius']);
return $element;
}
Ako primenite novi field widget za jedan od vaših EPT tipova pasusa:
Videćete manju formu sa podešavanjima:
Sada ćemo ukloniti i podešavanja za pozadinu. Ako su vam potrebna podešavanja za pozadinu i ne trebaju vam ostala, možete proširiti klasu EptSettingsDefaultWidget i napraviti svoj field widget. Evo primera kako napraviti EPT Settings što jednostavnijim.
...
unset($element['ept_settings']['design_options']['other_settings']['background_color']);
unset($element['ept_settings']['design_options']['other_settings']['background_media']);
unset($element['ept_settings']['design_options']['other_settings']['background_image_style']);
...
Naša forma sada sadrži samo dva podešavanja:
Ostaje još samo da dodamo polje Spacing za dodavanje margine na dno. Koristićemo dodatne klase i CSS za organizaciju razmaka:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Možda će vam trebati veća lista razmaka, slobodno proširite klasu EptSettingsSimpleWidget i napravite sopstvenu field widget klasu, kao što smo uradili sa EptSettingsDefaultWidget.
$element['ept_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Stil slike u pozadini'),
'#options' => [
'spacing-none' => $this->t('Bez'),
'spacing-sm' => $this->t('Mali'),
'spacing-md' => $this->t('Srednji'),
'spacing-lg' => $this->t('Veliki'),
'spacing-xl' => $this->t('Ekstra veliki'),
'spacing-xxl' => $this->t('Duplo ekstra veliki'),
],
'#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Sada vidim tri načina kako da dodate stilove za naš blok:
1. Preklopite šablon bloka i postavite spacing kao klasu bloka.
2. Generišite stilove u hodu i uključite ih kao posebne CSS stilove za svaki pasus.
3. Dodajte klasu putem JavaScript-a generisanjem posebnog JavaScript-a za svaki EPT pasus.
4. Preklopite listu klasa u funkciji template_preprocess_block().
Svi ovi pristupi će raditi, ali mislim da je najlakše koristiti funkciju template_process_paragraph(). Već imamo ept_core_preprocess_block() funkciju u fajlu ebt_core.module. Hajde da je iskoristimo:
...
if (!empty($ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'])) {
$variables['attributes']['class'][] = $ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'];
}
...
Sada prosleđujemo ključeve iz polja Spacing kao nazive klasa i koristićemo CSS za definisanje margina na osnovu tih klasa:
/ebt_core/scss/ept_core.scss
.spacing-sm {
margin-bottom: 10px;
}
.spacing-md {
margin-bottom: 20px;
}
.spacing-lg {
margin-bottom: 30px;
}
.spacing-xl {
margin-bottom: 40px;
}
.spacing-xxl {
margin-bottom: 50px;
}
Možete preklopiti vrednosti u svom prilagođenom CSS fajlu, na primer korišćenjem bilo koje klase iz sadržaja ili body taga:
body .spacing-sm {
margin-bottom: 15px;
}
I možete preklopiti listu spacing vrednosti u svojoj prilagođenoj klasi za EBT settings field widget.
To je to, sada možete birati između DOM Box-a i običnog select box-a za postavljanje margina za vaše EBT blokove.
Slobodno pitajte o EBT modulima na Drupal.org ili putem kontakt forme: