नए EBT मॉड्यूल्स बनाना

EBT टेक्स्ट मॉड्यूल में निम्नलिखित फ़ोल्डर्स होते हैं:
/ebt_text/config/install - इसमें EBT टेक्स्ट ब्लॉक प्रकार और फ़ील्ड इंस्टेंसेज़ के लिए कॉन्फ़िग्स होते हैं। अन्य EBT मॉड्यूल्स में पैराग्राफ प्रकार और फ़ील्ड स्टोरेज के लिए कॉन्फ़िग्स हो सकते हैं।
/ebt_text/templates - यहाँ block--block-content--ebt-text.html.twig टेम्पलेट होता है जो कंटेंट ब्लॉक के लिए है, जिसे ब्लॉक लेआउट पेज में उपयोग किया जा सकता है, और block--inline-block--ebt-text.html.twig टेम्पलेट Layout Builder इनलाइन ब्लॉक्स के लिए है।
/ebt_text/tests - यहाँ EBT मॉड्यूल्स के लिए टेस्ट होते हैं, अभी केवल एक इंस्टॉलेशन मॉड्यूल का टेस्ट है।

और अन्य सामान्य Drupal मॉड्यूल फाइलें: composer.json, ebt_text.info.yml, readme.md। आप आधिकारिक डॉक्यूमेंटेशन में कस्टम Drupal मॉड्यूल बनाने के बारे में अधिक पढ़ सकते हैं:

https://www.drupal.org/docs/develop/creating-modules

मैं एक नया मॉड्यूल EBT Countdown बनाऊँगा जो इस जावास्क्रिप्ट प्लगइन FlipDown का उपयोग करेगा:

https://github.com/PButcher/flipdown

सभी तृतीय पक्ष (3rd party) लाइब्रेरीज़ को फोर्क करके Packagist पर रखना चाहिए, उदाहरण के लिए:

https://packagist.org/packages/levmyshkin/flexslider

से:

https://github.com/levmyshkin/flexslider

फिर Composer इन्हें सामान्य Packagist लाइब्रेरीज़ की तरह डाउनलोड कर सकता है। इन तृतीय पक्ष लाइब्रेरीज़ में "type": "drupal-library" होना चाहिए, और ये डिफ़ॉल्ट रूप से /libraries फ़ोल्डर में डाउनलोड होंगी:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

आइए FlipDown के लिए Github रिपॉज़िटरी फोर्क करें।

गिट रिपॉज़िटरी को फोर्क करना थोड़ा असामान्य लग सकता है, बजाय सीधे स्रोत गिट रिपॉज़िटरी का उपयोग करने के। लेकिन मेरा मानना है कि मुख्य composer.json फ़ाइल में रिपॉज़िटरी लिंक जोड़ने जैसी प्रक्रियाओं से बचकर EBT मॉड्यूल्स का उपयोग करना आसान होगा। सोचिए, नए उपयोगकर्ताओं के लिए Composer इंस्टॉल करना, composer.json फ़ाइल को मैन्युअली अपडेट करना और रिपॉज़िटरी स्रोत सही जगह पर डालना कितना कठिन है। अपनी स्वयं की Packagist लाइब्रेरी के साथ इंस्टॉलेशन प्रक्रिया सरल हो जाती है। तो चलिए सभी तृतीय पक्ष लाइब्रेरीज़ को Packagist पर रखें।

गिट रिपॉज़िटरी फोर्क करते समय आप रिपॉज़िटरी का नाम बदल सकते हैं। इसे साफ़ रखें, कैपिटल लेटर्स और विशेष कैरेक्टर्स का उपयोग न करें। डैश (-) और अंडरस्कोर (_) का उपयोग ठीक है।

अब हमारे पास नई गिट रिपॉज़िटरी है:

https://github.com/levmyshkin/flipdown

अब हमें इस रिपॉज़िटरी में "type": "drupal-library" के साथ composer.json फ़ाइल जोड़नी होगी:

git add composer.json
git commit -m 'Add Composer.json file'
git push origin master

यहाँ composer.json फ़ाइल है:

https://github.com/levmyshkin/flipdown/blob/master/composer.json

यदि आप अपनी नई गिट रिपॉज़िटरी में टैग चेक करते हैं, तो यह खाली होगा:

git tag

आमतौर पर मैं स्रोत रिपॉज़िटरी का वर्ज़न फ़ॉलो करता हूँ, उदाहरण के लिए यदि लाइब्रेरी का नवीनतम वर्ज़न 1.4.6 था, तो मैं माइनर वर्ज़न बढ़ाकर 1.4.7 कर देता हूँ। FlipDown रिपॉज़िटरी में कोई टैग या रिलीज़ नहीं था, इसलिए मैंने नई रिपॉज़िटरी के लिए 1.0.0 वर्ज़न बनाया:

git tag 1.0.0
git push origin 1.0.0

हमें नए टैग की ज़रूरत है क्योंकि इसमें हमारा नया composer.json "type": "library" के साथ शामिल है।

हम जावास्क्रिप्ट लाइब्रेरी को सीधे मॉड्यूल के अंदर क्यों कॉपी नहीं कर सकते?

हम केवल GPL लाइसेंस के तहत आने वाली लाइब्रेरीज़ कॉपी कर सकते हैं, लेकिन आमतौर पर जावास्क्रिप्ट लाइब्रेरीज़ MIT लाइसेंस का उपयोग करती हैं। तकनीकी रूप से यह संभव है, लेकिन Drupal.org के नियमों द्वारा इसकी अनुमति नहीं है:
https://www.drupal.org/about/licensing

आइए FlipDown लाइब्रेरी को packagist.org पर सबमिट करें:

https://packagist.org/packages/submit

यदि आपने लाइब्रेरी सबमिट की और "type": "drupal-library" वाला composer.json जोड़ना भूल गए, तो चिंता न करें, बस composer.json फ़ाइल जोड़ें और अपनी गिट रिपॉज़िटरी के लिए नया टैग बनाएँ। यह टैग स्वतः Packagist पर पुश हो जाएगा।

यहाँ FlipDown के लिए Packagist लाइब्रेरी पेज है:

https://packagist.org/packages/levmyshkin/flipdown

सुनिश्चित करें कि आपके Packagist पेज पर drupal-library टाइप हो।

आइए वापस अपनी Drupal फ़ाइलों में जाएँ और ebt_text फ़ोल्डर कॉपी करें, मैं नए मॉड्यूल का नाम ebt_countdown रखूँगा:

हमें करना होगा:

- /config/install में कॉन्फ़िग्स हटाएँ, हम बाद में नए कॉन्फ़िग्स एक्सपोर्ट करेंगे

- सभी ebt_text को ebt_countdown से बदलें

- फ़ाइलों का नाम बदलें ताकि "text" की जगह "countdown" हो

- ebt_countdown.info.yml और README.md फ़ाइलों में मॉड्यूल विवरण के टेक्स्ट अपडेट करें।

मैं गिट में हर स्टेप को अलग-अलग कमिट करूँगा ताकि आप अपडेट्स को चरण दर चरण देख सकें:

git clone https://git.drupalcode.org/project/ebt_countdown.git

अब हमारे पास अपने मॉड्यूल के लिए बोइलरप्लेट है और हम Drupal.org पर बदलाव पुश कर सकते हैं।

आइए drupal.org साइट पर प्रोजेक्ट जोड़ने वाले पेज पर जाएँ:

https://www.drupal.org/node/add

हमें मॉड्यूल प्रोजेक्ट जोड़ने की आवश्यकता है:

https://www.drupal.org/node/add/project-module

नाम: Extra Block Types (EBT): Countdown
प्रोजेक्ट प्रकार: Full project
शॉर्ट नाम: ebt_countdown
रखरखाव स्थिति: सक्रिय रूप से मेंटेन किया गया
डेवलपमेंट स्थिति: सक्रिय विकासाधीन
मॉड्यूल श्रेणियाँ: कंटेंट, कंटेंट डिस्प्ले
ईकोसिस्टम: Extra Block Types (EBT): Core (3191928)

विवरण फ़ील्ड में मैं आमतौर पर उपलब्ध सभी EBT मॉड्यूल्स की सूची डालता हूँ:

Extra Block Types: Countdown मॉड्यूल एक एनिमेटेड काउंटडाउन वाला ब्लॉक जोड़ने की सुविधा प्रदान करता है।

EBT UI के माध्यम से काउंटडाउन के लिए स्टाइल चुनने की अनुमति देता है।

EBT मॉड्यूल्स कुछ क्लिक में Layout Builder में विभिन्न ब्लॉक्स जोड़ने की सुविधा देते हैं। आप इस EBT मॉड्यूल्स के समूह से अलग-अलग ब्लॉक प्रकार इंस्टॉल कर सकते हैं:
<ul>
  <li><a href="https://www.drupal.org/project/ebt_accordion" title="EBT Accordion / FAQ">EBT Accordion / FAQ</a></li>
  <li><a href="https://www.drupal.org/project/ebt_basic_button" title="EBT Basic Button">EBT बेसिक बटन</a></li>
  <li><a href="https://www.drupal.org/project/ebt_bootstrap_button" title="EBT Bootstrap Button">EBT बूटस्ट्रैप बटन</a></li>
  <li><a href="https://www.drupal.org/project/ebt_cta" title="EBT Call to Action">EBT कॉल टू एक्शन</a>
  <li><a href="https://www.drupal.org/project/ebt_carousel" title="EBT Tabs">EBT कैरोसेल</a>
  <li><a href="https://www.drupal.org/project/ebt_counter" title="EBT Counter">EBT काउंटर</a>
  <li><a href="https://www.drupal.org/project/ebt_image_gallery">EBT इमेज गैलरी</a></li>
  <li><a href="https://www.drupal.org/project/ebt_quote" title="EBT Quote">EBT उद्धरण</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slick_slider">EBT स्लिक स्लाइडर</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slideshow">EBT स्लाइडशो</a></li>
  <li><a href="https://www.drupal.org/project/ebt_stats">EBT आँकड़े</a></li>
  <li><a href="https://www.drupal.org/project/ebt_tabs" title="EBT Tabs">EBT टैब्स</a></li>
  <li><a href="https://www.drupal.org/project/ebt_text">EBT टेक्स्ट</a></li>
  <li><a href="https://www.drupal.org/project/ebt_timeline">EBT टाइमलाइन</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform">EBT वेबफॉर्म</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform_popup">EBT वेबफॉर्म पॉपअप</a></li>
</ul>

सभी EBT ब्लॉक प्रकारों में EBT ब्लॉक्स के लिए डिफ़ॉल्ट विजेट होता है, जिसमें डिज़ाइन विकल्प होते हैं:
<ul>
<li>CSS बॉक्स (मार्जिन, पैडिंग, बॉर्डर)</li>
<li>बैकग्राउंड: रंग, इमेज (पैरालैक्स और कवर सहित), वीडियो (Youtube)</li>
<li>एज टू एज, कंटेनर चौड़ाई</li>
</ul>

EBT ब्लॉक्स के बारे में अधिक पढ़ें EBT Core मॉड्यूल पेज पर:
https://www.drupal.org/project/ebt_core

<div class="container">
<div class="panel-layout capricorn pane-bundle-cta-multiple">
  <div class="panel-pane pane-fieldable-panels-pane pane-vid-10729 d-sponsor pane-bundle-cta pane-fpid-422">
   <div class="pane-content">
    <div class="fieldable-panels-pane pane-style-full nographic pane-style-supporter">
     <div class="pane-title pane-bundle-cta-multiple">
       <h3>क्या आपको एक और Extra Block Type चाहिए?</h3>

       <a class="button-link" target="_blank" href="http://drupalbook.org/contact" title="DrupalBook">हमसे संपर्क करें</a>

       <a href="http://drupalbook.org/contact" title="DrupalBook"  target="_blank"><img src="/files/logo.svg__1.png" alt="DrupalBook लोगो" width="85" /></a>
     </div>
   </div>
   </div>
  </div>
</div>
</div>

अब हमारे पास Drupal.org पर Drupal मॉड्यूल प्रोजेक्ट पेज है:
https://www.drupal.org/project/ebt_countdown

Version Control टैब पर आप निर्देश देख सकते हैं कि अपनी लोकल गिट रिपॉज़िटरी के लिए रिमोट ओरिजिन कैसे जोड़ें:

https://www.drupal.org/project/ebt_countdown/git-instructions

प्रारंभिक कमिट के बाद आपको अन्य EBT मॉड्यूल्स के मुख्य संस्करण को फ़ॉलो करने के लिए एक नई ब्रांच बनानी चाहिए, अभी यह 1.4.x है।

अब हम अपने मॉड्यूल के लिए नई कार्यक्षमता जोड़ना शुरू कर सकते हैं। प्रक्रिया कस्टम मॉड्यूल डेवलपमेंट जैसी ही है: हम ब्लॉक प्रकार बनाएँगे, फ़ील्ड्स जोड़ेंगे, css/js एसेट्स शामिल करेंगे।

यदि आपने मॉड्यूल को Drush से जनरेट किया है तो बस इसे इंस्टॉल करें।

सबसे पहले, हमें एक नया ब्लॉक प्रकार EBT Countdown बनाना होगा:

/admin/structure/block/block-content/types/add

यह आवश्यक है कि मशीन नाम ebt_ से शुरू हो, इसलिए आमतौर पर मैं ब्लॉक प्रकारों का नाम EBT से शुरू करता हूँ, फिर मशीन नाम स्वचालित रूप से सही तरीके से जेनरेट हो जाता है। क्या ब्लॉक प्रकार का मशीन नाम मॉड्यूल के नाम से मेल खाना चाहिए? हाँ, यह स्थिरता के लिए अच्छा है और सुनिश्चित करता है कि किसी अन्य EBT मॉड्यूल का वही मशीन नाम न हो। ब्लॉक प्रकार का मशीन नाम ebt_ से शुरू होना चाहिए, क्योंकि यह थीम फ़ोल्डर की बजाय मॉड्यूल्स में टेम्पलेट्स को ओवरराइड करने के लिए आवश्यक है, देखें ebt_core_theme_registry_alter() फ़ंक्शन ebt_core मॉड्यूल में।

अब हम EBT सेटिंग्स फ़ील्ड जोड़ सकते हैं, यह सभी EBT मॉड्यूल्स के लिए आवश्यक है। हमें मौजूदा फ़ील्ड EBT Settings: field_ebt_settings जोड़ना चाहिए:

EBT सेटिंग्स, EBT कोर मॉड्यूल से एक सामान्य फ़ील्ड है, यह DOM बॉक्स, बैकग्राउंड, स्पेसिंग और चौड़ाई सेटिंग्स प्रदान करता है।

क्योंकि हमें तिथि तक काउंटडाउन चाहिए, हमें टाइमस्टैम्प डेट फ़ील्ड होना चाहिए। आइए इसे भी जोड़ें:

मैंने मशीन-पठनीय नाम के लिए ebt_ जोड़ा है, लेकिन यहाँ इसकी आवश्यकता नहीं है। यह field_countdown_date भी हो सकता है। हमारे पास ब्लॉक के लिए डिफ़ॉल्ट बॉडी और शीर्षक फ़ील्ड भी हैं, इसलिए यह काउंटडाउन ब्लॉक के लिए पर्याप्त होगा।

आमतौर पर EBT मॉड्यूल्स के लिए हम एडिट फॉर्म पर हॉरिज़ॉन्टल टैब्स रखते हैं:

यह आवश्यक नहीं है, लेकिन सामग्री और सेटिंग्स को अलग करना अच्छा है, क्योंकि हमारे पास ब्लॉक्स के लिए बहुत सारी सेटिंग्स होती हैं।

पैरेंट फ़ील्ड ग्रुप टैब्स होना चाहिए, जिसमें Direction Horizontal और Width Breakpoint 120 (या कोई छोटा नंबर) हो:

अब हम ब्लॉक प्रकार बना सकते हैं, आइए EBT Countdown मॉड्यूल सक्षम करें, ताकि ब्लॉक प्रकार के लिए टेम्पलेट्स लागू हो जाएँ:

/admin/modules

आपको Layout Builder मॉड्यूल भी सक्षम करना होगा और किसी भी कंटेंट प्रकार के लिए लेआउट बिल्डर सक्षम करना होगा, उदाहरण के लिए बेसिक पेज के लिए।

/admin/structure/types/manage/page/display

जब आप नया पेज बनाते हैं, तो आप पेज लेआउट में ब्लॉक्स जोड़ सकेंगे।

और हमारे पास पेज पर क्या है:

अब हम अपनी तृतीय पक्ष (3rd party) लाइब्रेरी शामिल कर सकते हैं। हमारे पास composer.json में levmyshkin/flipdown लाइब्रेरी है, लेकिन यह नया मॉड्यूल एक कस्टम मॉड्यूल है, इसलिए हमें इस लाइब्रेरी को composer से मैन्युअली इंस्टॉल करना होगा:

composer require levmyshkin/flipdown

नई लाइब्रेरी स्वचालित रूप से libraries फ़ोल्डर में रखी जानी चाहिए:

आइए ebt_countdown.libraries.yml फ़ाइल जोड़ें और उसमें flipdown css/js और जावास्क्रिप्ट फ़ाइल ebt_flipdown/js/ebt_countdown.js शामिल करें, जहाँ बाद में हम flipdown प्लगइन को इनिशियलाइज़ करेंगे:

ebt_countdown.libraries.yml

ebt_countdown:
  css:
    component:
      /libraries/flipdown/dist/flipdown.min.css: { minified: true }
  js:
    /libraries/flipdown/dist/flipdown.min.js: { minified: true }
    js/ebt_countdown.js: {}

/libraries फ़ोल्डर की फ़ाइलों के लिए हम शुरुआत में स्लैश का उपयोग करते हैं, ताकि यह एब्सोल्यूट पाथ हो।

js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown व्यवहार।
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {

    };
  }

})(jQuery, Drupal);

और हमें नए ebt_countdown लाइब्रेरी को टेम्पलेट्स में शामिल करना होगा, ध्यान रखें कि हमारे पास दो टेम्पलेट्स हैं:

{{ attach_library('ebt_countdown/ebt_countdown') }}

कैश साफ़ करें और जाँचें कि आपके जावास्क्रिप्ट फ़ाइलें पेज पर मौजूद हैं:

हम तारीख को PHP से जावास्क्रिप्ट में drupalSettings के जरिए पास करेंगे। इसलिए हमें अपने ebt_countdown.libraries.yml फ़ाइल को dependencies के साथ एक्सटेंड करना चाहिए। साथ ही हम once() फ़ंक्शन का उपयोग करेंगे:

  dependencies:
    - core/once
    - core/drupalSettings

EBT मॉड्यूल्स में सेटिंग्स डिफ़ॉल्ट रूप से जावास्क्रिप्ट में पास नहीं होती हैं। हमें फ़ील्ड विजेट क्लास EbtSettingsDefaultWidget को ओवरराइड करने की आवश्यकता है:

ebt_countdown/src/Plugin/Field/FieldWidget/EbtSettingsCountDownWidget.php:

<?php

namespace Drupal\ebt_countdown\Plugin\Field\FieldWidget;

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

/**
 * 'ebt_settings_countdown' विजेट का प्लगइन इम्प्लीमेंटेशन।
 *
 * @FieldWidget(
 *   id = "ebt_settings_countdown",
 *   label = @Translation("EBT Countdown सेटिंग्स"),
 *   field_types = {
 *     "ebt_settings"
 *   }
 * )
 */
class EbtSettingsCountDownWidget 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);

    $element['ebt_settings']['pass_options_to_javascript'] = [
      '#type' => 'hidden',
      '#value' => TRUE,
    ];

    return $element;
  }

  /**
   * {@inheritdoc}
   */
  public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
    foreach ($values as &$value) {
      $value += ['ebt_settings' => []];
    }
    return $values;
  }

}

अब हम इस फ़ील्ड विजेट को EBT Settings फ़ील्ड के लिए चुन सकते हैं:

/admin/structure/block/block-content/manage/ebt_countdown/form-display

आइए अपने ब्लॉक को दोबारा सेव करें और drupalSettings जावास्क्रिप्ट वेरिएबल चेक करें। अब EBT Settings फ़ील्ड से सभी विकल्प जावास्क्रिप्ट में पास हो जाएँगे:

block-revision-id-* के अंत में हमारे पास ब्लॉक रिविज़न ID है, इसलिए हमारे पास सभी ब्लॉक्स के लिए यूनिक कीज़ हैं। इनलाइन ब्लॉक्स के लिए हम प्लगइन ID plugin-id-block-contentd202c374-f31b-4f7e-8a0d-12842a1422ff का उपयोग करते हैं। इसलिए हमारे पास Layout Builder में यूनिक IDs हैं।

FlipDown प्लगइन में लाइट/डार्क थीम का विकल्प है, तो आइए इस सेटिंग फ़ील्ड को हमारे फ़ील्ड विजेट EbtSettingsCountDownWidget में पास करें:

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('रंग थीम'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('डार्क'),
        'light' => $this->t('लाइट'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('काउंटडाउन के लिए रंग थीम चुनें'),
      '#weight' => '3',
    ];

फिर हम जावास्क्रिप्ट में थीम रंग का मान प्राप्त कर सकते हैं:

हमने सेटिंग्स से वेरिएबल्स को जावास्क्रिप्ट में पास किया, लेकिन हमें कंटेंट से डेट वैल्यू भी जावास्क्रिप्ट में पास करनी होगी। हम एक खाली div बनाएँगे जिसमें attribute data-date="" होगा, जहाँ हम Date फ़ील्ड से दिनांक और समय डालेंगे। इनलाइन-ब्लॉक (Layout Builder में ब्लॉक्स) के लिए हम ब्लॉक का यूनिक ID परिभाषित करने के लिए block_revision_id का उपयोग करेंगे:

block--inline-block--ebt-countdown.html.twig:

    <div
      class="ebt-countdown-date ebt-countdown-inline-block flipdown"
      id="block-id-{{ configuration.block_revision_id }}"
      data-date="{{ content.field_ebt_countdown_date[0]['#attributes']['datetime']|date('U') }}">
    </div>

Block Layout पेज से कंटेंट ब्लॉक्स के लिए हम plugin_id का उपयोग करेंगे:

block--block-content--ebt-countdown.html.twig:

    <div
      class="ebt-countdown-date ebt-countdown-block-content flipdown"
      id="block-id-{{ plugin_id|clean_class }}"
      data-date="{{ content.field_ebt_countdown_date[0]['#attributes']['datetime']|date('U') }}">
    </div>

यदि आपको यकीन नहीं है कि फ़ील्ड डेटा कहाँ है, तो आप Twig Debugger मॉड्यूल इंस्टॉल कर सकते हैं और पेज पर {{ dump(content.field_ebt_countdown_date) }} प्रिंट कर सकते हैं:

https://www.drupal.org/project/twig_debugger

और हमने तिथि को टाइमस्टैम्प में बदलने के लिए date('U') twig फ़िल्टर का उपयोग किया।

अब हम कस्टम जावास्क्रिप्ट शामिल कर सकते हैं और FlipDown इनिशियलाइज़ कर सकते हैं।

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown व्यवहार।
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        new FlipDown(countdownTimestamp, countdownId, {
          theme: "dark",
        }).start();
      });
    }
  }

})(jQuery, Drupal);

अपडेट देखने के लिए कैश साफ़ करना न भूलें। इसके बाद FlipDown पेज पर काम करना शुरू कर देगा:

जैसा कि आप देख रहे हैं, डिफ़ॉल्ट FlipDown स्टाइल्स भी बहुत अच्छे से काम नहीं कर रही हैं। डेस्कटॉप पर भी दो पंक्तियों में नंबर दिखाई देते हैं। लेकिन हम इसे कस्टम स्टाइल्स से आसानी से ठीक कर सकते हैं। आप EBT Counter मॉड्यूल से gulpfile.js और package.json फ़ाइलें कॉपी कर सकते हैं ताकि scss को css में कंपाइल किया जा सके:

https://www.drupal.org/project/ebt_counter

gulpfile.js:

// --------------------------------------------------
// प्लगइन्स लोड करें
// --------------------------------------------------

var gulp = require('gulp'),
    sass = require('gulp-dart-scss'),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    notify = require('gulp-notify'),
    sassUnicode = require('gulp-sass-unicode');


var config = {
    // मुख्य scss फाइलें जो पार्टियल्स इम्पोर्ट करती हैं
    scssSrc: 'scss/*.scss',
    // scss डायरेक्टरी में सभी scss फाइलें
    allScss: 'scss/**/*.scss',
    // css के लिए डेस्टिनेशन डायरेक्टरी
    cssDest: 'css/',
    // js डायरेक्टरी में सभी js फाइलें
    allJs: 'assets/js/**/*.js',
    // सभी img फाइलें
    allImgs: 'assets/img/**/*'
};


// डिपेंडेंसीज़ के बाद टास्क डिफ़ाइन करें
function style() {

  return gulp.src(config.allScss)
    .pipe(sass())
    .pipe(sassUnicode())
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest(config.cssDest));

  gulp.task('sass:watch', function () {
    gulp.watch('./scss/**/*.scss', ['sass']);
  });
}

// टास्क को एक्सपोज़ करें
// इससे आप इसे कमांड लाइन से चला सकते हैं
// $ gulp style
exports.style = style;

function watch(){
    // gulp.watch फाइलों में बदलावों को ट्रैक करता है
    // और बदलाव पर फंक्शन रन करता है
    gulp.watch('scss/**/*.scss', style)
}

// टास्क एक्सपोज़ करना न भूलें!
exports.watch = watch

package.json:

{
  "name": "ebt_styles",
  "version": "1.0.0",
  "description": "npm install चलाएँ और फिर gulp watch",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.2",
    "gulp": "^4.0.2",
    "gulp-dart-scss": "^1.1.0",
    "gulp-notify": "^4.0.0",
    "gulp-postcss": "^9.0.0",
    "gulp-sass-unicode": "^1.0.5",
    "gulp-sourcemaps": "^3.0.0"
  },
  "dependencies": {
    "cucumber": "*",
    "postcss": "^8.2.13"
  }
}

package-lock.json फ़ाइल तब जेनरेट होगी जब आप यह कमांड चलाएँगे:

npm install

और आप gulp टास्क इस तरह शुरू कर सकते हैं:

gulp watch

अब हम scss फाइलें जोड़ेंगे:

/ebt_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

तो flipdown.css फ़ाइल स्वतः flipdown.scss से जेनरेट हो जाएगी। और हम इस .css फ़ाइल को .libraries.yml में शामिल कर सकते हैं:

ebt_countdown:
  css:
    component:
      /libraries/flipdown/dist/flipdown.min.css: { minified: true }
      css/flipdown.css: { }

आइए कैश साफ़ करें और परिणाम देखें:

अब यह बेहतर दिख रहा है!

क्या हम scss के बिना साधारण css का उपयोग कर सकते हैं?

हाँ, हम कर सकते हैं, लेकिन scss लिखना अधिकांश डेवलपर्स के लिए अधिक सुविधाजनक है।

FlipDown प्लगइन में डिस्प्ले बदलने के लिए कुछ विकल्प होते हैं:

https://github.com/PButcher/flipdown

• theme
• headings

हमने पहले ही EBT सेटिंग्स के लिए नया फ़ील्ड विजेट EbtSettingsCountDownWidget बनाया था, अब हम इस फ़ॉर्म को नए फ़ील्ड्स के साथ विस्तारित करेंगे:

/ebt_countdown/src/Plugin/Field/FieldWidget/EbtSettingsCountDownWidget.php:

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('रंग थीम'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('डार्क'),
        'light' => $this->t('लाइट'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('काउंटडाउन के लिए रंग थीम चुनें'),
      '#weight' => '3',
    ];

    $element['ebt_settings']['styles'] = [
      '#title' => $this->t('स्टाइल्स'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('डिफ़ॉल्ट'),
        'new_year' => $this->t('नया साल'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['styles'] ?? 'default',
      '#description' => $this->t('काउंटडाउन के लिए विशेष स्टाइल चुनें'),
      '#weight' => '4',
    ];

    $element['ebt_settings']['heading_days'] = [
      '#title' => $this->t('दिन शीर्षक'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_days'] ?? $this->t('दिन'),
      '#description' => $this->t('दिन काउंटर के लिए हेडर'),
      '#weight' => '5',
    ];

    $element['ebt_settings']['heading_hours'] = [
      '#title' => $this->t('घंटे शीर्षक'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_hours'] ?? $this->t('घंटे'),
      '#description' => $this->t('घंटे काउंटर के लिए हेडर'),
      '#weight' => '6',
    ];

    $element['ebt_settings']['heading_minutes'] = [
      '#title' => $this->t('मिनट शीर्षक'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_minutes'] ?? $this->t('मिनट'),
      '#description' => $this->t('मिनट काउंटर के लिए हेडर'),
      '#weight' => '7',
    ];

    $element['ebt_settings']['heading_seconds'] = [
      '#title' => $this->t('सेकंड शीर्षक'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_seconds'] ?? $this->t('सेकंड'),
      '#description' => $this->t('सेकंड काउंटर के लिए हेडर'),
      '#weight' => '8',
    ];
    
    return $element;

तो अब हम हेडिंग्स का उपयोग अनुवादों के लिए कर सकते हैं:

हमारे पास जावास्क्रिप्ट में सभी EBT सेटिंग्स वैल्यूज़ हैं, इसलिए मैंने केवल टेम्पलेट में ID जोड़ी ताकि सही यूनिक की आसानी से मिल सके।

.setAttribute('id', 'plugin-id-' ~ plugin_id|clean_class)
.setAttribute('id', 'block-revision-id-' ~ configuration.block_revision_id)

विकल्प कीज़ का पैटर्न IDs के समान है:

/ebt_core/ebt_core.module:

  // Block content के लिए plugin_id का उपयोग करें।
  $build['#attached']['drupalSettings'][$bundle]['block-revision-id-' . $revision_id[0]['value']] = $block_options;
  $uuid = $entity->get('uuid')->getValue();
  $block_options = [
    'blockClass' => 'plugin-id-block-content' . $uuid[0]['value'],
    'options' => $options,
  ];
  $build['#attached']['drupalSettings'][$bundle]['plugin-id-block-content' . $uuid[0]['value']] = $block_options;

तो हम जावास्क्रिप्ट drupalSettings से विकल्पों का उपयोग कर सकते हैं:

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown व्यवहार।
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        // ब्लॉक ID प्राप्त करें।
        var countdownWrapper = countdown.closest('.ebt-block-countdown');
        var countdownWrapperId = countdownWrapper.getAttribute('id');
        // ब्लॉक EBT सेटिंग्स प्राप्त करें।
        var ebtOptions = drupalSettings['ebtCountdown'][countdownWrapperId];
        // जावास्क्रिप्ट प्लगइन के लिए विकल्प तैयार करें।
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        // जावास्क्रिप्ट प्लगइन इनिशियलाइज़ करें।
        new FlipDown(countdownTimestamp, countdownId, {
          theme: ebtOptions['options']['color_theme'],
          headings: [
            ebtOptions['options']['heading_days'],
            ebtOptions['options']['heading_hours'],
            ebtOptions['options']['heading_minutes'],
            ebtOptions['options']['heading_seconds'],
          ],
        }).start();
      });
    }
  }

})(jQuery, Drupal);

मैंने फ़ील्ड विजेट में $element['ebt_settings']['styles'] भी जोड़ा है, ताकि हम पूरे ब्लॉक के लिए नया क्लास टेम्पलेट में जोड़ सकें।

{%
  set classes = [
  'block',
  'ebt-block',
  'ebt-block-countdown',
  'ebt-block-' ~ plugin_id|clean_class,
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
  'plugin-id-' ~ plugin_id|clean_class,
  content.field_ebt_settings['#object'].field_ebt_settings.ebt_settings.styles,
]
%}

{% if content.field_ebt_settings['#object'].field_ebt_settings.ebt_settings.styles == 'new_year' %}
  {{ attach_library('ebt_countdown/new_year') }}
{% endif %}

यह new_year स्टाइल के लिए new_year लाइब्रेरी शामिल करेगा, लेकिन अब हमें यह लाइब्रेरी बनानी होगी।

/ebt_countdown/ebt_countdown.libraries.yml:

new_year:
  css:
    component:
      css/new-year.css: { }

और यहाँ नया साल ब्लॉक के लिए स्टाइल्स हैं:

/ebt_countdown/scss/new-year.scss
/ebt_countdown/css/new-year.css

.ebt-block-countdown.new_year {
  background: url(../img/snowflakes.webp) center center repeat;
}

यहाँ नया स्टाइल जोड़ने का परिणाम है:

आप नए या मौजूदा EBT मॉड्यूल्स के लिए किसी भी संख्या में स्टाइल्स जोड़ सकते हैं। आप किसी भी EBT मॉड्यूल के लिए अपने स्टाइल्स भी सुझाव दे सकते हैं, बस इसके लिए drupal.org पर एक इश्यू बनाएँ:

https://www.drupal.org/project/issues/ebt_core

मुझे लगता है कि हमने EBT Countdown में फीचर्स जोड़ना पूरा कर लिया है, अब समय है कॉन्फ़िग्स को एक्सपोर्ट करने और Drupal.org पर बदलाव डिप्लॉय करने का। हमें EBT Countdown से संबंधित सभी कॉन्फ़िग्स को /ebt_countdown/config/install फ़ोल्डर में कॉपी करना चाहिए।

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

उसके बाद Extend पेज /admin/modules पर EBT मॉड्यूल को सक्षम करें। नया EBT ब्लॉक प्रकार और अन्य सेटिंग्स config फ़ाइलों के /config/install फ़ोल्डर से इंस्टॉल हो जाएंगे:

हमें language.* कॉन्फ़िग्स जोड़ने की ज़रूरत नहीं है, क्योंकि कुछ Drupal साइट्स में केवल एक ही भाषा होती है और Language मॉड्यूल को डिसेबल किया जा सकता है।

आमतौर पर मैं सभी फाइलों की कॉपी करता हूँ और चेक करता हूँ कि /config/install फ़ोल्डर में कॉपी मौजूद है।

अब हमें config/install फ़ोल्डर में कॉन्फ़िग्स से uuid और hashes हटाने होंगे।

क्योंकि हमने अन्य Drupal मॉड्यूल्स का उपयोग किया है, हमें उन्हें .info फ़ाइल में dependencies के रूप में शामिल करना चाहिए।

/ebt_countdown/ebt_countdown.info:

dependencies:
  - drupal:datetime

हमने पहले Drupal.org पर नया प्रोजेक्ट बनाया था:

https://www.drupal.org/project/ebt_countdown

मैं मुख्य ब्रांच के रूप में 1.4.x ब्रांच का उपयोग करूंगा, ताकि अन्य EBT मॉड्यूल्स के साथ स्थिरता बनी रहे:

तो सभी रिलीज़ 1.4.0 वर्ज़न से शुरू होंगी:

git tag 1.4.0
git push origin 1.4.0

आप स्थिर 1.4.0 वर्ज़न बनाने से पहले -alpha, -beta वर्ज़न भी बना सकते हैं।

हमें इंतज़ार करना होगा 10 दिन, उसके बाद मॉड्यूल को सुरक्षा सलाह कवरेज (security advisory coverage) में शामिल किया जा सकता है।

तो हम अपने नए मॉड्यूल का परीक्षण कर सकते हैं और बग्स को ठीक कर सकते हैं।

README.md फ़ाइल जोड़ना न भूलें, आप अन्य EBT मॉड्यूल्स में उदाहरण देख सकते हैं:

https://www.drupal.org/project/ebt_slideshow

EBT मॉड्यूल्स का उपयोग करने के लिए धन्यवाद! बेझिझक कोई भी सवाल पूछें या अपने सुझाव दें:

Drupal.org पर एक issue बनाएँ

EBT मॉड्यूल डेवलपर से संपर्क करें

या मुझे LinkedIn पर संदेश भेजें