EPT सेटिंग्स फ़ॉर्म का विस्तार
नया EPT सेटिंग्स फ़ॉर्म क्लास बनाएँ
मैंने कई प्रोग्रामरों से EPT मॉड्यूल्स के लिए सेटिंग्स की संख्या (DOM Box, बैकग्राउंड, बॉर्डर्स, क्लासेस आदि) को लेकर चिंताएँ सुनी हैं। इन प्रोग्रामरों का मानना था कि कंटेंट एडिटर्स भ्रमित होंगे या किसी और तरह से प्रेरित होंगे कि वे पैराग्राफ, मार्जिन, बैकग्राउंड्स को बहुत अलग-अलग कर दें। कुछ प्रोजेक्ट्स को लचीलापन और कंटेंट एडिटर्स के लिए अधिक सेटिंग्स की ज़रूरत होती है, लेकिन कुछ प्रोजेक्ट्स में कंपोनेंट्स के साथ काफ़ी सख़्त स्टोरीबुक्स होते हैं। ऐसे मामले में हमें अपने EPT Settings फ़ील्ड विजेट को बदलने की ज़रूरत है।
साथ ही यदि आप नया EPT मॉड्यूल बनाते हैं और विकल्पों के साथ कोई जावास्क्रिप्ट प्लगइन जोड़ते हैं, तो आपको उन विकल्पों के लिए सेटिंग फ़ील्ड्स सहित अपना EPT सेटिंग्स विजेट इस्तेमाल करना होगा।
EPT Core मॉड्यूल में EPT Settings फ़ील्ड विजेट के लिए EptSettingsDefaultWidget क्लास है। इसमें DOM Box, बैकग्राउंड और अन्य सभी सेटिंग्स शामिल हैं। आइए एक नया क्लास EptSettingsSimpleWidget बनाना शुरू करें (मैं इसे EPT Core मॉड्यूल में रखूँगा)। इसमें केवल तीन सेटिंग्स होंगी: Width, Spacing (पैरा के नीचे मार्जिन के लिए)।
नयी फ़ाइल बनाएँ:
/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;
/**
* Plugin implementation of the 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT simple paragraph settings"),
* 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;
}
}
हम अपनी बेसिक सेटिंग्स क्लास EptSettingsDefaultWidget को एक्सटेंड करेंगे। एनोटेशन कमेंट @FieldWidget में हम अपने विजेट का नाम देंगे id = "ept_settings_simple" और label = @Translation("EPT Simple settings")
/**
* Plugin implementation of the 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT simple paragraph settings"),
* field_types = {
* "ept_settings"
* }
* )
*/
हमारे पास दो मेथड भी हैं formElement(), massageFormValues()। आप massageFormValues() को जैसा है वैसा रहने दे सकते हैं। Drupal सभी सेटिंग्स को स्वतः एक ही फ़ील्ड field_ept_settings में सीरियलाइज़ कर देगा। इसलिए आपके पास कितनी भी सेटिंग्स हों, वे सीरियलाइज़्ड ऐरे के रूप में स्टोर होंगी और आपको केवल Form API के साथ सेटिंग फ़ील्ड्स निर्दिष्ट करने की आवश्यकता है:
https://www.drupal.org/docs/drupal-apis/form-api
formElement() में हम सेटिंग फ़ील्ड्स को परिभाषित करेंगे। आइए DOM Box और बॉर्डर सेटिंग्स को छुपाएँ:
/**
* {@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;
}
यदि आप अपने किसी EPT पैराग्राफ टाइप के लिए नया फ़ील्ड विजेट लागू करते हैं:
आपको छोटा सा सेटिंग्स फ़ॉर्म दिखाई देगा:
अब हम बैकग्राउंड सेटिंग्स भी हटा देंगे। यदि आपको बैकग्राउंड सेटिंग्स चाहिए और अन्य सभी सेटिंग्स नहीं चाहिए, तो आप EptSettingsDefaultWidget क्लास को एक्सटेंड कर सकते हैं और अपना फ़ील्ड विजेट बना सकते हैं। यहाँ एक उदाहरण है कि EPT सेटिंग्स को जितना हो सके उतना छोटा कैसे बनाया जाए।
...
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']);
...
हमारे फ़ॉर्म में अब केवल दो सेटिंग्स रह गई हैं:
अब केवल नीचे मार्जिन जोड़ने के लिए Spacing फ़ील्ड जोड़ना शेष है। हम स्पेसिंग को व्यवस्थित करने के लिए अतिरिक्त क्लासेस और CSS का उपयोग करेंगे:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
हो सकता है आपको स्पेसिंग की बड़ी सूची की ज़रूरत पड़े—निःसंकोच EptSettingsSimpleWidget क्लास को एक्सटेंड करें और उससे अपनी खुद की फ़ील्ड विजेट क्लास बनाएँ, जैसा हमने EptSettingsDefaultWidget क्लास के साथ किया था।
$element['ept_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Background Image Style'),
'#options' => [
'spacing-none' => $this->t('None'),
'spacing-sm' => $this->t('Small'),
'spacing-md' => $this->t('Medium'),
'spacing-lg' => $this->t('Large'),
'spacing-xl' => $this->t('Extra Large'),
'spacing-xxl' => $this->t('Double Extra Large'),
],
'#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
अब मुझे हमारे ब्लॉक के लिए स्टाइल जोड़ने के तीन तरीके दिख रहे हैं:
1. ब्लॉक टेम्पलेट को ओवरराइड करें और वहाँ स्पेसिंग को ब्लॉक क्लास के रूप में सेट करें।
2. रनटाइम पर स्टाइल्स जनरेट करें और प्रत्येक पैराग्राफ के लिए उन्हें कस्टम CSS स्टाइल्स के रूप में शामिल करें।
3. प्रत्येक EPT पैराग्राफ के लिए कस्टम जावास्क्रिप्ट बनाकर जावास्क्रिप्ट से क्लास जोड़ें।
4. template_preprocess_block() फ़ंक्शन में क्लासेस की सूची को ओवरराइड करें।
ये सभी तरीक़े काम करेंगे, लेकिन मुझे लगता है कि template_process_paragraph() फ़ंक्शन का उपयोग करना आसान होगा। कम से कम हमारे पास ebt_core.module फ़ाइल में ept_core_preprocess_block() फ़ंक्शन पहले से है। आइए इसका उपयोग करें:
...
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'];
}
...
अब हम Spacing फ़ील्ड की-ज़ को क्लास नेम के रूप में पास करते हैं और इन क्लासेस के आधार पर मार्जिन वैल्यू परिभाषित करने के लिए CSS का उपयोग करेंगे:
/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;
}
आप अपने कस्टम CSS फ़ाइल में वैल्यूज़ को ओवरराइड कर सकते हैं, उदाहरण के लिए कंटेंट या body टैग की किसी भी क्लास का उपयोग करके:
body .spacing-sm {
margin-bottom: 15px;
}
और आप अपने EBT सेटिंग्स फ़ील्ड विजेट की कस्टम क्लास में स्पेसिंग्स की सूची को भी ओवरराइड कर सकते हैं।
बस इतना ही—अब आप अपने EBT ब्लॉक्स के लिए मार्जिन सेट करने हेतु DOM Box और साधारण सेलेक्ट बॉक्स के बीच चुन सकते हैं।
Drupal.org पर या संपर्क फ़ॉर्म के माध्यम से EBT मॉड्यूल्स के बारे में पूछने में संकोच न करें: