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

EPT टेक्स्ट मॉड्यूल में निम्नलिखित फोल्डर शामिल हैं:
/ept_text/config/install — इसमें EPT टेक्स्ट पैराग्राफ प्रकार और फील्ड इंस्टेंस की कॉन्फ़िगरेशन होती है। अन्य EPT मॉड्यूल में पैराग्राफ प्रकार और फील्ड स्टोरेज की कॉन्फ़िगरेशन हो सकती है।
/ept_text/templates — इसमें पैराग्राफ के लिए paragraph--ept-text--default.html.twig टेम्पलेट होता है।
/ept_text/tests — इसमें EPT मॉड्यूल के लिए परीक्षण होते हैं, वर्तमान में केवल एक इंस्टॉलेशन परीक्षण।

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

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

मैं एक नया EPT काउंटडाउन मॉड्यूल बनाऊँगा जो निम्नलिखित JavaScript प्लगइन का उपयोग करेगा — FlipDown:

https://github.com/PButcher/flipdown

सभी थर्ड-पार्टी लाइब्रेरीज़ को फोर्क करके Packagist पर होस्ट करना आवश्यक है, उदाहरण के लिए:

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

स्रोत:

https://github.com/levmyshkin/flexslider

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

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

आम तौर पर मूल स्रोतों का उपयोग करने की बजाय रिपॉज़िटरीज़ को फोर्क करना अनुशंसित नहीं है। हालांकि, मेरा मानना है कि इससे composer.json को मैन्युअल रूप से संपादित किए बिना EPT मॉड्यूल्स का उपयोग करना आसान हो जाता है। कल्पना करें कि किसी शुरुआती के लिए Composer इंस्टॉल करना, composer.json को मैन्युअल रूप से बदलना, और किसी बाहरी रिपॉज़िटरी का URL सही ढंग से निर्दिष्ट करना कितना कठिन हो सकता है। Packagist पर अपनी खुद की लाइब्रेरी होने से इंस्टॉलेशन सरल हो जाता है। इसलिए, सभी थर्ड-पार्टी लाइब्रेरीज़ को Packagist पर होस्ट करना बेहतर है।

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

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

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

एक टैग आवश्यक है क्योंकि इसमें type = library वाला composer.json शामिल होता है।

सिर्फ JS लाइब्रेरी को मॉड्यूल में कॉपी ही क्यों न करें?

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

अब FlipDown लाइब्रेरी को Packagist पर प्रकाशित करें:

https://packagist.org/packages/submit

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

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

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

सुनिश्चित करें कि लाइब्रेरी पेज पर type के रूप में drupal-library सूचीबद्ध हो।

अब वापस अपने Drupal फ़ाइलों पर चलते हैं और ept_text फ़ोल्डर की कॉपी बनाते हैं; मैं नए मॉड्यूल का नाम ept_countdown रखूँगा/रखूँगी:

निम्नलिखित चरण करने होंगे:

• /config/install में मौजूद कॉन्फ़िगरेशन हटाएँ — हम बाद में नई कॉन्फ़िगरेशन एक्सपोर्ट करेंगे।
• ept_text के सभी उल्लेखों को ept_countdown से बदलें।
• फ़ाइलों का नाम बदलें, जहाँ भी text है उसे countdown से बदलें।
• ept_countdown.info.yml और README.md में मॉड्यूल विवरण अपडेट करें।

मैं प्रत्येक चरण को अलग-अलग Git कमिट में करूँगा/करूँगी, ताकि आप बदलावों को चरण-दर-चरण ट्रैक कर सकें:

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

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

आइए drupal.org साइट पर प्रोजेक्ट निर्माण पेज पर जाएँ:

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

हमें Module प्रकार का प्रोजेक्ट जोड़ना होगा:

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

शीर्षक: Extra Paragraph Types (EPT): Countdown
प्रोजेक्ट प्रकार: Full project
शॉर्ट नाम: ept_countdown
मेंटेनेंस स्थिति: Actively maintained
डेवलपमेंट स्थिति: Under active development
मॉड्यूल श्रेणियाँ: Content, Content Display
इकोसिस्टम: Extra Paragraph Types (EPT): Core

Description फ़ील्ड में, मैं आमतौर पर उपलब्ध सभी EPT मॉड्यूल्स की पूरी सूची डालता/डालती हूँ (ऊपर दिया गया Markdown उदाहरण देखें)।

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

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

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

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

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

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

सबसे पहले, एक नया पैराग्राफ टाइप EPT Countdown बनाएँ:

/admin/structure/paragraphs_type/add

सुनिश्चित करें कि मशीन नाम ept_ से शुरू होता है। मैं आमतौर पर पैराग्राफ का नाम EPT से शुरू करता/करती हूँ — इस तरह मशीन नाम स्वतः सही ढंग से बन जाता है। क्या मशीन नाम को मॉड्यूल नाम से मेल खाना चाहिए? हाँ, स्थिरता के लिए और अन्य EPT मॉड्यूल्स के साथ कॉन्फ्लिक्ट से बचने के लिए यह अनुशंसित है। यह थीम्स के बजाय मॉड्यूल्स में टेम्पलेट्स को ओवरराइड करने के लिए भी महत्वपूर्ण है — ept_core मॉड्यूल में ept_core_theme_registry_alter() फ़ंक्शन देखें।

अब फ़ील्ड EPT Settings: field_ept_settings जोड़ें — यह फ़ील्ड सभी EPT मॉड्यूल्स के लिए आवश्यक है:

EPT Settings एक साझा फ़ील्ड है जो EPT Core मॉड्यूल से आता है; यह DOM Box, बैकग्राउंड, स्पेसिंग और विड्थ सेटिंग्स प्रदान करता है।

चूँकि हमें किसी तारीख तक काउंटडाउन करना है, एक दिनांक/समय (date/time) फ़ील्ड जोड़ें:

मैंने मशीन नाम में ept_ प्रीफ़िक्स जोड़ा, लेकिन यह आवश्यक नहीं है। आप इसे उदाहरण के लिए field_countdown_date भी नाम दे सकते हैं। हमारे पास डिफ़ॉल्ट body और title फ़ील्ड भी हैं — यह काउंटडाउन पैराग्राफ के लिए पर्याप्त है।

EPT मॉड्यूल्स के लिए, हम आमतौर पर एडिटिंग फॉर्म में हॉरिज़ॉन्टल टैब्स का उपयोग करते हैं:

यह अनिवार्य नहीं है, लेकिन सामग्री (content) और सेटिंग्स को अलग-अलग रखना सुविधाजनक होता है, खासकर जब सेटिंग्स अधिक हों।

पैरेंट ग्रुप को Tabs पर सेट करें, दिशा Horizontal रखें और Width Breakpoint पैरामीटर 120 (या कोई अन्य छोटा मान) पर सेट करें:

अब जब हमारे पास पैराग्राफ टाइप है, तो टेम्पलेट्स लागू करने के लिए EPT Countdown मॉड्यूल सक्षम (enable) करें:

/admin/modules

वांछित कंटेंट टाइप (जिसमें paragraphs फ़ील्ड हो) के लिए EPT Countdown पैराग्राफ को सक्षम करें:

पेज पर परिणाम इस प्रकार दिखेगा:

अब हम एक थर्ड-पार्टी लाइब्रेरी जोड़ सकते हैं। हमारे composer.json में levmyshkin/flipdown लाइब्रेरी पहले से सूचीबद्ध है, लेकिन चूँकि यह एक कस्टम मॉड्यूल है, हमें Composer के माध्यम से लाइब्रेरी को मैन्युअल रूप से इंस्टॉल करना होगा:

composer require levmyshkin/flipdown

लाइब्रेरी अपने आप /libraries फ़ोल्डर में इंस्टॉल हो जाएगी:

अब ept_countdown.libraries.yml फ़ाइल बनाएँ और FlipDown की CSS/JS लाइब्रेरीज़ रजिस्टर करें, साथ ही एक कस्टम JS फ़ाइल ept_flipdown/js/ept_countdown.js भी जोड़ें, जहाँ आगे चलकर FlipDown प्लगइन इनिशियलाइज़ किया जाएगा:

ept_countdown.libraries.yml:

ept_countdown:
  css:
    component:
      /libraries/flipdown/dist/flipdown.min.css: { minified: true }
  js:
    /libraries/flipdown/dist/flipdown.min.js: { minified: true }
    js/ept_countdown.js: {}
  dependencies:
    - core/once
    - core/drupalSettings

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

js/ept_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown behavior.
   */
  Drupal.behaviors.eptCountDown = {
    attach: function (context, settings) {

    }
  };

})(jQuery, Drupal);

हमें पैराग्राफ टेम्पलेट्स में ept_countdown लाइब्रेरी को अटैच भी करना होगा। याद रखें कि हमारे पास दो टेम्पलेट्स हैं:

{{ attach_library('ept_countdown/ept_countdown') }}

कैश साफ़ करें और सुनिश्चित करें कि JavaScript फ़ाइलें पेज पर लोड हो रही हैं:

हम तारीख को PHP से JavaScript में drupalSettings के माध्यम से पास करेंगे। इसी कारण हमने ept_countdown.libraries.yml फ़ाइल में निम्न निर्भरताएँ (dependencies) जोड़ी हैं:

  dependencies:
    - core/once
    - core/drupalSettings

EPT मॉड्यूल्स में डिफ़ॉल्ट सेटिंग्स JavaScript को पास नहीं की जातीं। इसे सक्षम करने के लिए हमें फ़ील्ड विजेट क्लास EptSettingsDefaultWidget को ओवरराइड करना होगा:

फ़ाइल: ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php

<?php

namespace Drupal\ept_countdown\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;

/**
 * Plugin implementation of the 'ept_settings_countdown' widget.
 *
 * @FieldWidget(
 *   id = "ept_settings_countdown",
 *   label = @Translation("EPT Countdown settings"),
 *   field_types = {
 *     "ept_settings"
 *   }
 * )
 */
class EptSettingsCountDownWidget extends EptSettingsDefaultWidget {

  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = parent::formElement($items, $delta, $element, $form, $form_state);

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

    $element['ept_settings']['color_theme'] = [
      '#title' => $this->t('Color theme'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Dark'),
        'light' => $this->t('Light'),
      ],
      '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Select color theme for countdown'),
      '#weight' => '3',
    ];

    $element['ept_settings']['styles'] = [
      '#title' => $this->t('Styles'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Default'),
        'new_year' => $this->t('New Year'),
      ],
      '#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
      '#description' => $this->t('Select special style for countdown'),
      '#weight' => '4',
    ];

    $element['ept_settings']['heading_days'] = [
      '#title' => $this->t('Heading Days'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Days'),
      '#description' => $this->t('Header for Days counter'),
      '#weight' => '5',
    ];

    $element['ept_settings']['heading_hours'] = [
      '#title' => $this->t('Heading Hours'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Hours'),
      '#description' => $this->t('Header for Hours counter'),
      '#weight' => '6',
    ];

    $element['ept_settings']['heading_minutes'] = [
      '#title' => $this->t('Heading Minutes'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minutes'),
      '#description' => $this->t('Header for Minutes counter'),
      '#weight' => '7',
    ];

    $element['ept_settings']['heading_seconds'] = [
      '#title' => $this->t('Heading Seconds'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Seconds'),
      '#description' => $this->t('Header for Seconds counter'),
      '#weight' => '8',
    ];

    return $element;
  }

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

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

पथ: /admin/structure/paragraphs_type/ept_countdown/form-display

पैराग्राफ सेव करें और drupalSettings के माध्यम से JavaScript वेरिएबल्स की जाँच करें। अब EPT Settings के सभी पैरामीटर स्क्रिप्ट को पास हो रहे हैं:

paragraph-id-* कुंजी के अंत में यूनिक पैराग्राफ ID होती है, जो संबंधित पैराग्राफ की पहचान करने में मदद करती है।

FlipDown प्लगइन में थीम पैरामीटर (light/dark) होता है। हम इसे EptSettingsCountDownWidget विजेट में color_theme फ़ील्ड के माध्यम से पास करते हैं:

$element['ept_settings']['color_theme'] = [
  '#title' => $this->t('Color theme'),
  '#type' => 'radios',
  '#options' => [
    'dark' => $this->t('Dark'),
    'light' => $this->t('Light'),
  ],
  '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
  '#description' => $this->t('Select color theme for countdown'),
  '#weight' => '3',
];

अब थीम का मान drupalSettings के जरिए JavaScript में प्राप्त किया जा सकता है और उपयुक्त स्टाइल लागू करने के लिए उपयोग किया जा सकता है:

हमने पहले ही drupalSettings के माध्यम से पैराग्राफ सेटिंग्स को JavaScript में पास कर दिया है। अब हमें Date फ़ील्ड से तारीख का मान भी पास करना होगा। इसके लिए, टेम्पलेट में एक खाली <div> बनाएँ जिसमें data-date एट्रिब्यूट हो जो टाइमस्टैम्प मान को स्टोर करे। एक यूनिक पैराग्राफ ID असाइन करने के लिए paragraph.id() का उपयोग करें:

फ़ाइल: paragraph--ept-countdown--default.html.twig

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

यदि आपको यकीन नहीं है कि तारीख का मान कहाँ स्टोर होता है, तो Twig Debugger मॉड्यूल का उपयोग करें और टेम्पलेट में {{ dump(content.field_ept_countdown_date) }} डालें।

date('U') फ़िल्टर तारीख को Unix टाइमस्टैम्प फॉर्मेट में कन्वर्ट करता है।

अब कस्टम JavaScript शामिल करें और FlipDown प्लगइन को इनिशियलाइज़ करें:

फ़ाइल: /ept_countdown/js/ept_countdown.js

(function ($, Drupal) {

  /**
   * EPT Countdown behavior.
   */
  Drupal.behaviors.eptCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ept-countdown-paragraph', '.ept-countdown-date', context);
      countdowns.forEach(function(countdown) {
        var eptOptions = drupalSettings['eptCountdown'][countdown.getAttribute('id')];
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');

        new FlipDown(countdownTimestamp, countdownId, {
          theme: eptOptions['options']['color_theme'],
        }).start();
      });
    }
  };

})(jQuery, Drupal);

बदलाव लागू करने के लिए कैश साफ़ करना न भूलें। इसके बाद, FlipDown प्लगइन को पेज पर सही तरीके से रेंडर होना चाहिए:

जैसा कि हम देख सकते हैं, डिफ़ॉल्ट FlipDown स्टाइल्स भी पूरी तरह से सही तरीके से रेंडर नहीं होते — उदाहरण के लिए, डेस्कटॉप पर संख्याएँ दो लाइनों में दिखाई देती हैं। लेकिन हम इसे आसानी से कस्टम स्टाइल्स के साथ ठीक कर सकते हैं। बस EPT Counter मॉड्यूल या EPT Core Kickstarter मॉड्यूल से gulpfile.js और package.json फ़ाइलों को कॉपी करें।

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 = {
  scssSrc: 'scss/*.scss',
  allScss: 'scss/**/*.scss',
  cssDest: 'css/',
  allJs: 'assets/js/**/*.js',
  allImgs: 'assets/img/**/*'
};

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

exports.style = style;

function watch(){
  gulp.watch('scss/**/*.scss', style)
}

exports.watch = watch;

package.json:

{
  "name": "ept_styles",
  "version": "1.0.0",
  "description": "Run npm install and then gulp watch",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "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 फ़ाइल जोड़ें:

/ept_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

flipdown.css फ़ाइल अपने आप flipdown.scss से कंपाइल हो जाएगी। इसे ept_countdown.libraries.yml में शामिल करें:

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

कैश साफ़ करें और परिणाम जाँचें:

अब डिस्प्ले काफी हद तक बेहतर हो गया है!

क्या मैं SCSS कंपाइलेशन की बजाय साधारण CSS का उपयोग कर सकता/सकती हूँ?

हाँ, आप कर सकते हैं। लेकिन ज़्यादातर डेवलपर्स SCSS लिखना पसंद करते हैं क्योंकि यह अधिक सुविधाजनक और स्केलेबल है।

FlipDown प्लगइन theme और headings पैरामीटर्स को सपोर्ट करता है, जिन्हें हम डिस्प्ले कस्टमाइज़ेशन के लिए इस्तेमाल कर सकते हैं। हमने पहले ही एक कस्टम फील्ड विजेट EptSettingsCountDownWidget बना लिया है, और अब हम इसमें संबंधित फील्ड्स जोड़ेंगे।

फ़ाइल: /ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php

public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
  $element = parent::formElement($items, $delta, $element, $form, $form_state);

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

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

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

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

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

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

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

  return $element;
}

अब हम टेम्पलेट में हेडिंग्स और थीम का उपयोग कर सकते हैं। एलिमेंट आईडी पैटर्न paragraph-id-{{ paragraph.id() }} को फॉलो करता है, जिससे हम drupalSettings से डेटा प्राप्त कर सकते हैं:

new FlipDown(countdownTimestamp, countdownId, {
  theme: eptOptions['options']['color_theme'],
  headings: [
    eptOptions['options']['heading_days'],
    eptOptions['options']['heading_hours'],
    eptOptions['options']['heading_minutes'],
    eptOptions['options']['heading_seconds'],
  ],
}).start();

इसके अलावा, हम सेटिंग्स से styles मान का उपयोग टेम्पलेट में डायनामिक रूप से स्टाइल असाइन करने के लिए करते हैं:

{%
  set classes = [
    'paragraph',
    'ept-paragraph',
    'ept-paragraph-countdown',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    'ept-paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished',
    'paragraph-id-' ~ paragraph.id(),
    content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles,
    content.field_ept_settings['#object'].field_ept_settings.ept_settings.color_theme,
  ]
%}

अगर संबंधित स्टाइल चुना गया है तो new_year स्टाइल्स को कंडीशनली अटैच करें:

{% if content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles == 'new_year' %}
  {{ attach_library('ept_countdown/new_year') }}
{% endif %}

ept_countdown.libraries.yml:

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

/ept_countdown/scss/new-year.scss:

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

परिणाम:

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

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

हमने EPT Countdown में फ़ंक्शनैलिटी जोड़ना पूरा कर लिया है। अब समय है कॉन्फ़िगरेशन को एक्सपोर्ट करने और मॉड्यूल को Drupal.org पर रिलीज़ के लिए तैयार करने का।

EPT Countdown पैराग्राफ़ से संबंधित सभी कॉन्फ़िगरेशन को /ept_countdown/config/install फ़ोल्डर में कॉपी करना होगा।

अगर मॉड्यूल Drush का उपयोग करके जेनरेट किया गया था, तो आपको कॉन्फ़िगरेशन को फिर से एक्सपोर्ट करना चाहिए ताकि सभी फ़ील्ड और पैराग्राफ़ टाइप सेटिंग्स अपडेट हो जाएँ।

इसके बाद, आप Extend पेज — /admin/modules पर मॉड्यूल को सक्षम कर सकते हैं। EPT Countdown के लिए सभी पैराग्राफ़ और फ़ील्ड कॉन्फ़िगरेशन अपने आप /config/install से इंस्टॉल हो जाएँगे:

language.* कॉन्फ़िगरेशन फ़ाइलों को शामिल करने की आवश्यकता नहीं है, क्योंकि कुछ साइट्स पर Language मॉड्यूल डिसेबल हो सकता है।

मैं आमतौर पर सभी आवश्यक YAML फ़ाइलों को कॉपी करता हूँ और सुनिश्चित करता हूँ कि वे config/install में रखी गई हों:

कमिट करने से पहले, YAML फ़ाइलों से uuid और hashes को हटाना सुनिश्चित करें:

अगर आपका मॉड्यूल अन्य Drupal मॉड्यूल्स (जैसे, datetime) पर निर्भर करता है, तो उन्हें .info.yml फ़ाइल में dependencies के रूप में सूचीबद्ध करना सुनिश्चित करें:

/ept_countdown/ept_countdown.info.yml:

dependencies:
  - drupal:datetime

अब आपका मॉड्यूल Drupal.org पर अपलोड और पब्लिश करने के लिए तैयार है।

हमने पहले ही Drupal.org पर एक नया प्रोजेक्ट बना लिया है:

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

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

अब सभी रिलीज़ संस्करण 1.4.0 से शुरू होंगे:

git tag 1.4.0
git push origin 1.4.0

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

प्रोजेक्ट बनाने के बाद आपको 10 दिन इंतज़ार करना होगा ताकि मॉड्यूल को Security Advisory Coverage प्रोग्राम में शामिल किया जा सके:

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

अगर आपने Drush का उपयोग करके EPT मॉड्यूल जेनरेट किया है, तो README.md फ़ाइल पहले से ही अपने आप बनाई गई होगी।

किसी भी स्थिति में, अपने मॉड्यूल में README.md फ़ाइल शामिल करना न भूलें। यह एक महत्वपूर्ण फ़ाइल है जिसमें मॉड्यूल का विवरण, आवश्यकताएँ, इंस्टॉलेशन स्टेप्स और उपयोग संबंधी दिशानिर्देश होते हैं। आप इसका उदाहरण किसी अन्य EPT मॉड्यूल में देख सकते हैं:

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

EPT मॉड्यूल्स का उपयोग करने के लिए धन्यवाद! आप हमेशा प्रश्न पूछ सकते हैं या अपने विचार साझा कर सकते हैं:

• Drupal.org पर एक इश्यू बनाएँ
• EPT मॉड्यूल डेवलपर से संपर्क करें
• LinkedIn पर संदेश भेजें