Նոր EPT մոդուլների ստեղծում

EPT Text մոդուլը պարունակում է հետևյալ պանակները.
/ept_text/config/install — պարունակում է կարգավորումներ EPT Text պարբերության տեսակի և դաշտերի համար։ Այլ 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 Countdown մոդուլ, որը կօգտագործի հետևյալ JavaScript պլագինը՝ FlipDown.

https://github.com/PButcher/flipdown

Բոլոր երրորդ կողմի գրադարանները պետք է fork անել և տեղադրել 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

Եկեք fork անենք FlipDown-ի repository-ն GitHub-ում։

Ընդհանրապես խորհուրդ չի տրվում fork անել գրադարանները՝ օգտագործելու փոխարեն բնօրինակ աղբյուրները։ Սակայն ես կարծում եմ, որ դա հեշտացնում է EPT մոդուլների օգտագործումը՝ առանց composer.json-ը ձեռքով խմբագրելու։ Պատկերացրեք, թե ինչքան բարդ է սկսնակների համար տեղադրել Composer-ը, ձեռքով փոփոխել composer.json-ը և ճիշտ նշել արտաքին repository-ի հասցեն։ Ձեր սեփական գրադարանը Packagist-ում ունենալը պարզեցնում է տեղադրումը։ Այդ պատճառով ավելի լավ է երրորդ կողմի բոլոր գրադարանները տեղադրել Packagist-ում։

Fork-ի GitHub էջում կարող եք վերանվանել repository-ն։ Անվանումը պետք է լինի պարզ, առանց մեծատառերի կամ հատուկ նշանների։ Թույլատրվում են միայն գծիկներ (-) և underline-ներ (_)։

Այժմ ունենք նոր repository՝

https://github.com/levmyshkin/flipdown

Եկեք ավելացնենք composer.json ֆայլ՝ "type": "drupal-library" տիպով.

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

Եթե ստուգեք repository-ի ընթացիկ պիտակները (tags), ոչ մեկը չի լինի՝

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-ը՝ "library" տիպով։

Ինչու՞ պարզապես JS գրադարանը չպատճենել մոդուլի մեջ։

Կարելի է պատճենել միայն GPL արտոնագրով գրադարանները։ JavaScript գրադարանները հիմնականում օգտագործում են MIT արտոնագիրը։ Տեխնիկապես հնարավոր է, բայց Drupal.org-ի կանոնները արգելում են դա.
https://www.drupal.org/about/licensing

Հիմա եկեք FlipDown գրադարանը հրապարակենք Packagist-ում՝

https://packagist.org/packages/submit

Եթե մոռացել եք composer.json-ի մեջ "type": "drupal-library" ավելացնել մինչև հրապարակելը՝ ոչ մի խնդիր։ Պարզապես ավելացրեք ֆայլը և ստեղծեք նոր պիտակ (tag), Packagist-ը ավտոմատ կթարմացնի գրադարանը։

Ահա գրադարանի էջը Packagist-ում՝

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

Համոզվեք, որ գրադարանի էջում նշված է տիպը՝ drupal-library։

Հիմա վերադարձեք մեր Drupal ֆայլերին և պատճենեք ept_text պանակը․ նոր մոդուլը կանվանեմ ept_countdown․

Պետք է կատարել հետևյալ քայլերը․

• Ջնջել կարգավորումները /config/install պանակում՝ հետագայում նորը արտահանելու համար։
• Փոխարինել բոլոր ept_text հայտնաբերումները ept_countdown-ով։
• Վերանվանել ֆայլերը՝ "text"-ը փոխարինելով "countdown"-ով։
• Թարմացնել մոդուլի նկարագրությունները ept_countdown.info.yml և README.md ֆայլերում։

Ես յուրաքանչյուր քայլը կկատարեմ առանձին Git commit-ով, որպեսզի կարողանաք հերթականությամբ հետևել փոփոխություններին․

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

Այժմ ունենք մեր մոդուլի համար կաղապար (template), և կարող ենք փոփոխությունները ներկայացնել Drupal.org-ում։

Եկեք անցնենք drupal.org կայքի նախագծի ստեղծման էջ․

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

Պետք է ավելացնել «Module» տեսակի նախագիծ․

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

Վերնագիր (Title): Extra Paragraph Types (EPT): Countdown
Նախագծի տեսակը (Project type): Full project
Կարճ անուն (Short name): ept_countdown
Պահպանման կարգավիճակ (Maintenance status): Actively maintained
Զարգացման կարգավիճակ (Development status): Under active development
Մոդուլի կատեգորիաներ (Module categories): Content, Content Display
Էկոհամակարգ (Ecosystem): Extra Paragraph Types (EPT): Core

Նկարագրության (Description) դաշտում սովորաբար ավելացնում եմ բոլոր առկա EPT մոդուլների ամբողջական ցանկը (տես Markdown օրինակ վերևում)։

Այժմ մենք ունենք մոդուլի նախագծի էջ Drupal.org-ում․
https://www.drupal.org/project/ept_countdown

«Version Control» ներդիրում կարող եք գտնել հրահանգներ՝ ինչպես ավելացնել հեռավոր repository ձեր տեղական Git նախագծում․

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

Սկզբնական commit-ից հետո պետք է ստեղծել նոր ճյուղ, որը համահունչ է մյուս EPT մոդուլների հիմնական տարբերակին՝ այս պահին դա 1.4.x է։

Այժմ կարող ենք սկսել նոր ֆունկցիոնալության ավելացումը մեր մոդուլում։ Գործընթացը նման է սեփական մոդուլ մշակելուն՝ կստեղծենք պարբերության տեսակ, դաշտեր կավելացնենք, ինչպես նաև կներառենք CSS/JS ռեսուրսներ։

Պարզապես տեղադրեք մոդուլը, եթե այն գեներացրել եք Drush-ով։

Նախ պետք է ստեղծել նոր պարբերության տեսակ՝ EPT Countdown․

/admin/structure/paragraphs_type/add

Համոզվեք, որ մեքենայական անունը սկսվում է ept_-ով։ Ես սովորաբար պարբերության անվանումը սկսում եմ EPT-ով, այս կերպ մեքենայական անունը ավտոմատ ձևավորվում է ճիշտ։ Պե՞տք է արդյոք մեքենայական անունը համընկնի մոդուլի անվան հետ։ Այո, խորհուրդ է տրվում՝ համահունչ լինելու և այլ EPT մոդուլների հետ բախումներից խուսափելու համար։ Սա կարևոր է նաև, որպեսզի ձևանմուշները (templates) վերագրվեն մոդուլներում, ոչ թե թեմաներում — տես ept_core_theme_registry_alter() ֆունկցիան ept_core մոդուլում։

Այժմ ավելացրեք EPT Settings: field_ept_settings դաշտը — այս դաշտը պարտադիր է բոլոր EPT մոդուլների համար․

EPT Settings-ը համընդհանուր դաշտ է EPT Core մոդուլից, որն ապահովում է DOM Box, ֆոնի, բացատների և լայնության կարգավորումներ։

Քանի որ պետք է հաշվարկ կատարենք մինչև որոշակի ամսաթիվ, ավելացրեք ամսաթվի/ժամի դաշտ․

Ես մեքենայական անվան սկզբում ավելացրի ept_ նախածանցը, բայց դա պարտադիր չէ։ Կարող եք այն անվանել օրինակ՝ field_countdown_date։ Կան նաև լռելյայն body և title դաշտերը՝ սա բավարար է countdown պարբերության համար։

EPT մոդուլների համար սովորաբար օգտագործվում են հորիզոնական ներդիրներ խմբագրման ձևում․

Սա պարտադիր չէ, բայց հարմար է՝ բովանդակությունն ու կարգավորումները առանձնացնելու համար, հատկապես երբ շատ կարգավորումներ կան։

Վերնախմբային խումբը պետք է նշվի որպես Tabs՝ Horizontal ուղղությամբ և Width Breakpoint պարամետրով 120 (կամ այլ փոքր արժեք)․

Երբ պարբերության տեսակը պատրաստ է, միացրեք EPT Countdown մոդուլը՝ ձևանմուշները ակտիվացնելու համար․

/admin/modules

Միացրեք EPT Countdown պարբերությունը համապատասխան բովանդակության տիպի համար, որտեղ կա paragraphs դաշտ․

Ահա թե ինչ կստանանք էջում․

Հիմա կարող ենք կապել երրորդ կողմի գրադարան։ Մենք արդեն ունենք levmyshkin/flipdown գրադարանը composer.json-ում, բայց քանի որ սա սեփական (custom) մոդուլ է, պետք է ձեռքով տեղադրենք գրադարանը Composer-ով․

composer require levmyshkin/flipdown

Գրադարանը ավտոմատ կտեղադրվի /libraries պանակում․

Հիմա ստեղծեք ept_countdown.libraries.yml ֆայլը և գրանցեք FlipDown-ի CSS/JS գրադարանները, ինչպես նաև հատուկ JS ֆայլ՝ ept_flipdown/js/ept_countdown.js, որտեղ հետագայում կգործարկվի FlipDown plugin-ը․

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 պանակի ֆայլերի համար օգտագործվում է բացարձակ ուղի, որը սկսվում է շեղագծով (slash)։

js/ept_countdown.js՝

(function ($, Drupal) {

  /**
   * EBT Countdown վարքագիծ։
   */
  Drupal.behaviors.eptCountDown = {
    attach: function (context, settings) {

    }
  };

})(jQuery, Drupal);

Նաև պետք է ept_countdown գրադարանն ավելացնել պարբերության ձևանմուշներում (templates): Չմոռանաք, որ ունենք երկու ձևանմուշ․

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

Մաքրեք քեշը և համոզվեք, որ JavaScript ֆայլերը բեռնվում են էջի վրա․

Ամսաթիվը PHP-ից JavaScript կփոխանցենք drupalSettings-ի միջոցով։ Դրա համար էլ ept_countdown.libraries.yml ֆայլում ավելացրել ենք հետևյալ dependencies-ը․

  dependencies:
    - core/once
    - core/drupalSettings

EPT մոդուլներում լռելյայն կարգավորումները JavaScript-ին չեն փոխանցվում։ Դա ակտիվացնելու համար պետք է վերագրանցենք դաշտի widget դասը՝ 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;

/**
 * 'ept_settings_countdown' widget-ի plugin-ի իրականացում։
 *
 * @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;
  }
}

Այժմ կարող ենք ընտրել մեր widget-ը EPT Settings դաշտի համար․

Ուղի՝ /admin/structure/paragraphs_type/ept_countdown/form-display

Պահպանեք պարբերությունը և ստուգեք JavaScript փոփոխականները drupalSettings-ի միջոցով։ Այժմ բոլոր պարամետրերը EPT Settings-ից փոխանցվում են սքրիպտին․

paragraph-id-* բանալու վերջում դրված է եզակի պարբերության ID-ն, որը թույլ է տալիս նույնականացնել համապատասխան պարբերությունը։

FlipDown plugin-ը ունի թեմայի պարամետր (light/dark)։ Այն փոխանցում ենք color_theme դաշտի միջոցով՝ EptSettingsCountDownWidget widget-ում․

$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',
];

Այժմ թեմայի արժեքը կարող ենք ստանալ JavaScript-ով drupalSettings-ի միջոցով և կիրառել համապատասխան ոճը․

Մենք արդեն փոխանցել ենք պարբերության կարգավորումները JavaScript-ին drupalSettings-ի միջոցով։ Այժմ անհրաժեշտ է նաև ամսաթվի դաշտի արժեքը փոխանցել։ Դրա համար ձևանմուշում ստեղծեք դատարկ <div>՝ data-date ատրիբուտով, որտեղ կպահվի timestamp արժեքը։ Օգտագործեք paragraph.id()՝ յուրահատուկ պարբերության 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 timestamp ձևաչափի։

Այժմ ներառեք հատուկ JavaScript-ը և գործարկեք FlipDown plugin-ը․

Ֆայլ՝ /ept_countdown/js/ept_countdown.js

(function ($, Drupal) {

  /**
   * EPT Countdown վարքագիծ։
   */
  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 plugin-ը ճիշտ կցուցադրվի էջում․

Ինչպես տեսնում ենք, նույնիսկ FlipDown-ի լռելյայն ոճերը կատարյալ չեն արտացոլվում․ օրինակ, desktop-ում թվերը կարող են հայտնվել երկու տողի վրա։ Սակայն սա հեշտությամբ կարելի է շտկել հատուկ ոճերով։ Պարզապես պատճենեք gulpfile.js և package.json ֆայլերը EPT Counter մոդուլից կամ EPT Core Kickstarter մոդուլից։

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 task-ը․

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: {}

Մաքրեք քեշը և ստուգեք արդյունքը․

Արտացոլումը այժմ շատ ավելի լավ է!

Կարո՞ղ եմ օգտագործել սովորական CSS՝ առանց SCSS կոմպիլացիայի։

Այո, կարող եք։ Բայց մեծ մասը ծրագրավորողների նախընտրում են գրել SCSS-ով, քանի որ դա ավելի հարմար և ընդլայնելի է։

FlipDown plugin-ը աջակցում է theme և headings պարամետրերը, որոնք կարող ենք օգտագործել արտացոլման հարմարեցման համար։ Մենք արդեն ստեղծել ենք EptSettingsCountDownWidget հատուկ դաշտի widget, և հիմա կավելացնենք համապատասխան դաշտերը դրա մեջ։

Ֆայլ՝ /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('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;
}

Այժմ կարող ենք ձևանմուշում օգտագործել headings և theme արժեքները։ Էլեմենտի ID-ն հետևում է 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 մոդուլների համար։ Կարող եք նաև առաջարկել ձեր ոճերը՝ ստեղծելով issue 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 պանակում․

Commit անելուց առաջ անպայման հեռացրեք uuid և hashes դաշտերը YAML ֆայլերից․

Եթե ձեր մոդուլը կախվածություն ունի այլ Drupal մոդուլներից (օրինակ՝ datetime), ապա դրանք պարտադիր նշեք .info.yml ֆայլում․

/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

Կարող եք նաև թողարկել նախնական տարբերակներ՝ -alpha կամ -beta վերջավորությամբ, մինչև ստաբիլ 1.4.0 տարբերակը։

Նախագիծը ստեղծելուց հետո պետք է սպասել 10 օր, որպեսզի մոդուլը կարողանա ընդգրկվել Security Advisory Coverage ծրագրում․

Այժմ կարող եք փորձարկել նոր մոդուլը տարբեր բովանդակության տեսակների վրա, ստուգել FlipDown-ի աշխատանքը, թեմայի կարգավորումները և վերնագրերը։ Անհրաժեշտության դեպքում կարող եք բացել սխալի հաղորդագրություններ (bug reports) և թողարկել շտկումներ (patches)։

Եթե Drush-ով գեներացրել եք EPT մոդուլը, ապա README.md ֆայլը արդեն պետք է ավտոմատ ստեղծված լինի։

Այնուամենայնիվ, մի մոռացեք ձեր մոդուլում ներառել README.md ֆայլը։ Սա կարևոր փաստաթուղթ է, որը պարունակում է մոդուլի նկարագրությունը, պահանջները, տեղադրման քայլերը և օգտագործման հրահանգները։ Օրինակ կարող եք դիտել մեկ այլ EPT մոդուլում՝

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

Շնորհակալություն EPT մոդուլներն օգտագործելու համար։ Միշտ կարող եք հարցեր ուղղել կամ կիսվել գաղափարներով՝

• Բացեք issue Drupal.org-ում
• Կապ հաստատեք EPT մոդուլի մշակողի հետ
• Ուղարկեք հաղորդագրություն LinkedIn-ով