EBT सेटिंग्स फ़ॉर्म का विस्तार

नया EBT सेटिंग्स फ़ॉर्म क्लास बनाएँ

मैंने कई प्रोग्रामर्स से सुना है कि वे EBT मॉड्यूल्स के लिए बहुत सारी सेटिंग्स: DOM बॉक्स, बैकग्राउंड, बॉर्डर्स, क्लासेज़ आदि को लेकर चिंतित हैं। इन प्रोग्रामर्स का मानना है कि कंटेंट एडिटर्स भ्रमित हो सकते हैं या उन्हें पूरी तरह अलग ब्लॉक्स, मार्जिन्स, बैकग्राउंड बनाने के लिए प्रोत्साहित किया जा सकता है। कुछ प्रोजेक्ट्स को लचीलापन और अधिक सेटिंग्स की ज़रूरत होती है, लेकिन कुछ प्रोजेक्ट्स में कंपोनेंट्स के साथ काफ़ी सख्त स्टोरीबुक्स होती हैं। इस मामले में हमें अपने EBT सेटिंग्स फ़ील्ड विजेट को बदलने की ज़रूरत है।

इसके अलावा यदि आप नया EBT मॉड्यूल बनाते हैं और उसमें विकल्पों के साथ जावास्क्रिप्ट प्लगइन संलग्न करते हैं, तो आपको इन विकल्पों के लिए सेटिंग फ़ील्ड्स के साथ अपना स्वयं का EBT सेटिंग्स विजेट उपयोग करना होगा।

EBT कोर मॉड्यूल में EBT सेटिंग्स फ़ील्ड विजेट के लिए EbtSettingsDefaultWidget क्लास है। इसमें DOM बॉक्स, बैकग्राउंड और अन्य सभी सेटिंग्स होती हैं। चलिए एक नई क्लास EbtSettingsSimpleWidget बनाना शुरू करते हैं (मैं इसे EBT कोर मॉड्यूल में रखूँगा)। इसमें केवल तीन सेटिंग्स होंगी: चौड़ाई (Width), स्पेसिंग (ब्लॉक के नीचे मार्जिन के लिए)।

नई फ़ाइल बनाएँ:
/src/Plugin/Field/FieldWidget/EbtSettingsSimpleWidget.php

<?php

namespace Drupal\ebt_core\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ebt_core\Plugin\Field\FieldWidget\EbtSettingsDefaultWidget;

/**
 * 'ebt_settings_simple' विजेट का प्लगइन इम्प्लीमेंटेशन।
 *
 * @FieldWidget(
 *   id = "ebt_settings_simple",
 *   label = @Translation("EBT सरल सेटिंग्स"),
 *   field_types = {
 *     "ebt_settings"
 *   }
 * )
 */
class EbtSettingsSimpleWidget extends EbtSettingsDefaultWidget {

  /**
   * {@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 += ['ebt_settings' => []];
    }

    return $values;
  }

}

हम अपनी बेसिक सेटिंग्स क्लास EbtSettingsDefaultWidget को एक्सटेंड करेंगे। एनोटेशन कमेंट @FieldWidget में हम अपने विजेट का नाम देंगे id = "ebt_settings_simple" और label = @Translation("EBT सरल सेटिंग्स")

/**
 * 'ebt_settings_simple' विजेट का प्लगइन इम्प्लीमेंटेशन।
 *
 * @FieldWidget(
 *   id = "ebt_settings_simple",
 *   label = @Translation("EBT सरल सेटिंग्स"),
 *   field_types = {
 *     "ebt_settings"
 *   }
 * )
 */

हमारे पास दो मेथड हैं: formElement(), massageFormValues()। आप massageFormValues() को जैसा है वैसा ही छोड़ सकते हैं। Drupal स्वचालित रूप से सभी सेटिंग्स को एक ही फ़ील्ड field_ebt_settings में सीरियलाइज़ कर देगा। इसलिए यह मायने नहीं रखता कि आपके पास कितनी सेटिंग्स हैं, वे सीरियलाइज़्ड ऐरे के रूप में संग्रहीत होंगी और आपको केवल Form API के साथ सेटिंग फ़ील्ड्स निर्दिष्ट करने की ज़रूरत होगी:

https://www.drupal.org/docs/drupal-apis/form-api

formElement() में, हम सेटिंग फ़ील्ड्स को परिभाषित करेंगे। आइए DOM बॉक्स और बॉर्डर सेटिंग्स छुपाएँ:

  /**
   * {@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['ebt_settings']['design_options']['box1']);
    unset($element['ebt_settings']['design_options']['other_settings']['border_color']);
    unset($element['ebt_settings']['design_options']['other_settings']['border_style']);
    unset($element['ebt_settings']['design_options']['other_settings']['border_radius']);

    return $element;
  }

यदि आप अपने किसी EBT ब्लॉक प्रकार के लिए नया फ़ील्ड विजेट लागू करते हैं:

आपको छोटा सेटिंग्स फ़ॉर्म दिखाई देगा:

अब हम बैकग्राउंड सेटिंग्स भी हटा देंगे। यदि आपको बैकग्राउंड सेटिंग्स की ज़रूरत है और अन्य सभी सेटिंग्स की ज़रूरत नहीं है, तो आप EbtSettingsDefaultWidget क्लास को एक्सटेंड कर सकते हैं और अपना फ़ील्ड विजेट बना सकते हैं। यहाँ एक उदाहरण है कि कैसे EBT सेटिंग्स को जितना संभव हो उतना छोटा बनाया जाए।

...
    unset($element['ebt_settings']['design_options']['other_settings']['background_color']);
    unset($element['ebt_settings']['design_options']['other_settings']['background_media']);
    unset($element['ebt_settings']['design_options']['other_settings']['background_image_style']);
...

हमारे फ़ॉर्म में पहले से ही केवल दो सेटिंग्स हैं:

अब केवल स्पेसिंग फ़ील्ड जोड़ना बाकी है ताकि नीचे मार्जिन जोड़ा जा सके। हम स्पेसिंग्स को व्यवस्थित करने के लिए अतिरिक्त क्लासेज़ और CSS का उपयोग करेंगे:

spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl

शायद आपको स्पेसिंग की बड़ी सूची की ज़रूरत हो, तो आप EbtSettingsSimpleWidget क्लास को एक्सटेंड करने और उससे अपनी खुद की फ़ील्ड विजेट क्लास बनाने के लिए स्वतंत्र हैं, जैसे हमने EbtSettingsDefaultWidget क्लास के साथ किया।

    $element['ebt_settings']['design_options']['other_settings']['spacing'] = [
      '#type' => 'select',
      '#title' => $this->t('Spacing'),
      '#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]->ebt_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
    ];

अब मैं हमारे ब्लॉक के लिए स्टाइल्स जोड़ने के तीन तरीके देखता हूँ:

1. ब्लॉक टेम्पलेट को ओवरराइड करें और वहाँ स्पेसिंग को ब्लॉक क्लास के रूप में सेट करें।

2. ऑन-द-फ्लाई स्टाइल्स जेनरेट करें और उन्हें प्रत्येक ब्लॉक के लिए कस्टम CSS स्टाइल्स के रूप में शामिल करें।

3. प्रत्येक EBT ब्लॉक के लिए कस्टम जावास्क्रिप्ट बनाकर जावास्क्रिप्ट के साथ क्लास जोड़ें।

4. template_preprocess_block() फ़ंक्शन में क्लासेज़ की सूची को ओवरराइड करें।

इनमें से सभी तरीके काम करेंगे, लेकिन मुझे लगता है कि template_process_block() फ़ंक्शन का उपयोग करना आसान होगा। कम से कम हमारे पास पहले से ही ebt_core_preprocess_block() फ़ंक्शन ebt_core.module फ़ाइल में मौजूद है। चलिए इसका उपयोग करें:

...
  if (!empty($ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'])) {
    $variables['attributes']['class'][] = $ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'];
  }
...

अब हम स्पेसिंग फ़ील्ड कीज़ को क्लास नामों के रूप में पास करते हैं और इन क्लासेज़ के आधार पर मार्जिन के लिए मान निर्धारित करने के लिए CSS का उपयोग करेंगे:

/ebt_core/scss/ebt_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 .spacing-sm {
  margin-bottom: 15px;
}

और आप अपने कस्टम क्लास में EBT सेटिंग्स फ़ील्ड विजेट के लिए स्पेसिंग्स की सूची को ओवरराइड कर सकते हैं।

बस इतना ही, अब आप अपने EBT ब्लॉक्स के लिए मार्जिन सेट करने हेतु DOM बॉक्स और साधारण सेलेक्ट बॉक्स के बीच चयन कर सकते हैं।

Drupal.org या संपर्क फ़ॉर्म पर EBT मॉड्यूल्स के बारे में पूछने के लिए स्वतंत्र महसूस करें:

संपर्क करें

Drupal.org पर एक इश्यू बनाएँ

LinkedIn पर जुड़े रहें