Nieuwe EBT-modules maken

De EBT Text-module bevat de volgende mappen:
/ebt_text/config/install - met configuraties voor het EBT Text-bloktype en veldinstanties. Andere EBT-modules kunnen configuraties bevatten voor paragraaftypes en veldopslag.
/ebt_text/templates - hier bevindt zich de template block--block-content--ebt-text.html.twig voor contentblok dat kan worden gebruikt op de pagina Bloklayout en de template block--inline-block--ebt-text.html.twig voor Layout Builder inline blokken.
/ebt_text/tests - hier bevinden zich tests voor EBT-modules, momenteel slechts één test voor het installeren van de module.

En andere standaard Drupal-modulebestanden: composer.json, ebt_text.info.yml, readme.md. Je kunt meer lezen over het maken van aangepaste Drupal-modules in de officiële documentatie:

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

Ik zal een nieuwe module EBT Countdown maken die deze JavaScript-plugin FlipDown zal gebruiken:

https://github.com/PButcher/flipdown

Alle externe bibliotheken van derden moeten geforkt en op Packagist geplaatst worden, bijvoorbeeld:

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

van:

https://github.com/levmyshkin/flexslider

Daarna kan Composer ze downloaden als gewone Packagist-bibliotheken. Deze externe bibliotheken moeten "type": "drupal-library" hebben, en ze zullen standaard worden gedownload in de map /libraries:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Laten we de GitHub-repository voor FlipDown forken.

Het kan ongewoon lijken om git-repositories te forken in plaats van bron-gitrepositories te gebruiken. Maar ik geloof dat het gemakkelijker zal zijn om EBT-modules te gebruiken zonder bewerkingen aan het hoofdbestand composer.json om externe links naar repositories eraan toe te voegen. Stel je voor hoe moeilijk het is voor beginners om composer te installeren, het bestand composer.json handmatig bij te werken en de repository-bron op de juiste plaats te zetten. Met een eigen Packagist-bibliotheek wordt het installatieproces eenvoudig. Dus laten we alle externe bibliotheken op Packagist houden.

Op de forking-pagina van de git-repo kun je de repository hernoemen. Je moet deze schoon houden, zonder hoofdletters en speciale tekens, een koppelteken - en underscore _ werken prima.

Nu hebben we een nieuwe git-repo:

https://github.com/levmyshkin/flipdown

Daarna moeten we een composer.json-bestand toevoegen in deze repository met "type": "drupal-library":

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

Hier is het composer.json-bestand:

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

Als je je huidige tags in de nieuwe git-repo controleert, zal het leeg zijn:

git tag

Meestal volg ik de versie van de bron-repo, bijvoorbeeld als de laatste versie van de bibliotheek 1.4.6 was, verhoog ik gewoon de minor versie naar 1.4.7. De FlipDown-repo had geen tags of releases, dus heb ik de versie 1.0.0 gemaakt voor de nieuwe repo:

git tag 1.0.0
git push origin 1.0.0

We hebben een nieuwe tag nodig, omdat deze ons nieuwe composer.json bevat met "type": "library".

Waarom kunnen we de JavaScript-bibliotheek niet gewoon binnen de module kopiëren?

We kunnen alleen bibliotheken onder GPL-licentie kopiëren, maar meestal gebruiken JavaScript-bibliotheken de MIT-licentie. Technisch is het mogelijk, maar het is verboden door de regels van Drupal.org: 

https://www.drupal.org/about/licensing

Laten we de FlipDown-bibliotheek indienen op packagist.org:

https://packagist.org/packages/submit

Als je de bibliotheek hebt ingediend en vergeten bent composer.json met "type": "drupal-library" toe te voegen, maak je geen zorgen, voeg gewoon het composer.json-bestand toe en maak een nieuwe tag voor je git-repository. Deze tag zal automatisch worden gepusht naar Packagist.

Hier is de Packagist-bibliotheekpagina voor FlipDown:

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

Zorg ervoor dat je het type drupal-library hebt op de Packagist-pagina.

Laten we teruggaan naar onze Drupal-bestanden en de map ebt_text kopiëren, ik zal de nieuwe module ebt_countdown noemen:

We moeten:

- configuraties in /config/install verwijderen, we zullen later nieuwe configuraties exporteren

- alle vermeldingen van ebt_text vervangen door ebt_countdown

- bestanden hernoemen zodat ze "countdown" in plaats van "text" bevatten

- teksten voor de modulebeschrijving bijwerken in de bestanden ebt_countdown.info.yml en README.md.

Ik zal elke stap afzonderlijk committen in git, zodat je de updates stap voor stap kunt zien:

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

Nu hebben we een boilerplate voor onze module en kunnen we wijzigingen pushen op Drupal.org.

Laten we naar de site drupal.org gaan naar de pagina voor het toevoegen van een project:

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

We moeten een Module-project toevoegen:

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

Naam: Extra Block Types (EBT): Countdown
Projecttype: Volledig project
Korte naam: ebt_countdown
Onderhoudsstatus: Actief onderhouden
Ontwikkelingsstatus: In actieve ontwikkeling
Modulecategorieën: Inhoud, Inhoudsweergave
Ecosysteem: Extra Block Types (EBT): Core (3191928)

In het veld Beschrijving plaats ik meestal de volledige lijst van beschikbare EBT-modules:

Extra Block Types: Countdown-module biedt de mogelijkheid om een blok met geanimeerde countdown toe te voegen.

EBT maakt het mogelijk om stijlen voor countdown te kiezen via de UI.

EBT-modules bieden de mogelijkheid om verschillende blokken in Layout Builder toe te voegen met een paar klikken. Je kunt afzonderlijke bloktypes installeren uit deze reeks EBT-modules:
<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 Basic Button</a></li>
  <li><a href="https://www.drupal.org/project/ebt_bootstrap_button" title="EBT Bootstrap Button">EBT Bootstrap Button</a></li>
  <li><a href="https://www.drupal.org/project/ebt_cta" title="EBT Call to Action">EBT Call to Action</a>
  <li><a href="https://www.drupal.org/project/ebt_carousel" title="EBT Tabs">EBT Carousel</a>
  <li><a href="https://www.drupal.org/project/ebt_counter" title="EBT Counter">EBT Counter</a>
  <li><a href="https://www.drupal.org/project/ebt_image_gallery">EBT Image Gallery</a></li>
  <li><a href="https://www.drupal.org/project/ebt_quote" title="EBT Quote">EBT Quote</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slick_slider">EBT Slick Slider</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slideshow">EBT Slideshow</a></li>
  <li><a href="https://www.drupal.org/project/ebt_stats">EBT Stats</a></li>
  <li><a href="https://www.drupal.org/project/ebt_tabs" title="EBT Tabs">EBT Tabs</a></li>
  <li><a href="https://www.drupal.org/project/ebt_text">EBT Text</a></li>
  <li><a href="https://www.drupal.org/project/ebt_timeline">EBT Timeline</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform">EBT Webform</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform_popup">EBT Webform Popup</a></li>
</ul>

Alle EBT-bloktypes bevatten een standaardwidget voor EBT-blokken, die ontwerpopties heeft voor:
<ul>
<li>CSS Box (marges, padding, randen)</li>
<li>Achtergrond met kleur, afbeelding (inclusief parallax en cover), video (Youtube)</li>
<li>Edge to edge, Containerbreedte</li>
</ul>

Lees meer over EBT-blokken op de pagina van de EBT Core-module:
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>Heb je een ander Extra Block Type nodig?</h3>

       <a class="button-link" target="_blank" href="http://drupalbook.org/contact" title="DrupalBook">Neem contact op</a>

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

Nu hebben we een Drupal-moduleprojectpagina op Drupal.org:
https://www.drupal.org/project/ebt_countdown

Op het tabblad Version Control kun je instructies zien hoe je een remote origin toevoegt voor je lokale git-repository:

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

Na de eerste commit moet je een nieuwe branch aanmaken die overeenkomt met de majorversie van andere EBT-modules, nu is dat 1.4.x.

Nu kunnen we beginnen met het toevoegen van nieuwe functionaliteit aan onze module. Het proces is vergelijkbaar met de ontwikkeling van een aangepaste module, we zullen een bloktype maken, velden toevoegen en css/js-assets includeren.

Installeer gewoon de module als je deze met Drush hebt gegenereerd.

Allereerst moeten we een nieuw bloktype EBT Countdown maken:

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

Het is vereist dat de machinenaam begint met ebt_, dus meestal laat ik bloktypen beginnen met EBT, zodat de machinenaam automatisch op de juiste manier wordt gegenereerd. Moet de machinenaam van het bloktype overeenkomen met de modulenaam? Ja, het is goed om dat te hebben voor consistentie en om zeker te zijn dat een andere EBT-module niet dezelfde machinenaam heeft. De machinenaam van het bloktype moet beginnen met ebt_, omdat dit nodig is om templates in modules te overschrijven in plaats van in de themamap, zie de functie ebt_core_theme_registry_alter() in de module ebt_core.

Nu kunnen we het EBT-instellingenveld toevoegen, dit is nodig voor alle EBT-modules. We moeten het bestaande veld EBT Settings: field_ebt_settings toevoegen:

EBT Settings is een gemeenschappelijk veld uit de EBT Core-module, het biedt DOM Box, achtergrond, spatiëring en breedte-instellingen.

Aangezien we een countdown naar een datum nodig hebben, moeten we een timestamp-datumveld hebben. Laten we dat ook toevoegen:

Ik heb ebt_ toegevoegd voor de machineleesbare naam, maar dat is hier niet verplicht. Het kan ook field_countdown_date zijn. We hebben ook een standaard body- en titelfeld voor het blok, dus dat zal voldoende zijn voor het countdown-blok.

Gewoonlijk hebben we voor EBT-modules horizontale tabs op het bewerkingsformulier:

Het is niet verplicht, maar het is goed om inhoud en instellingen te splitsen, omdat we veel instellingen voor blokken hebben. 

De bovenliggende veldgroep moet Tabs zijn met richting Horizontaal en breedtebreekpunt 120 (of een ander klein getal): 

Nu kunnen we het bloktype gebruiken, laten we de EBT Countdown-module inschakelen, zodat templates voor het bloktype worden toegepast:

/admin/modules

Ook moet je de Layout Builder-module inschakelen en layout builder inschakelen voor elk inhoudstype, bijvoorbeeld voor Basispagina.

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

Wanneer je een nieuwe pagina aanmaakt, kun je blokken toevoegen op de paginalay-out. 

En dit hebben we op de pagina:

Nu kunnen we onze externe bibliotheek toevoegen. We hebben de levmyshkin/flipdown-bibliotheek in composer.json, maar we hebben deze nieuwe module als aangepaste module, dus we moeten deze bibliotheek handmatig installeren met composer:

composer require levmyshkin/flipdown

De nieuwe bibliotheek zou automatisch in de map libraries moeten worden geplaatst:

Laten we het bestand ebt_countdown.libraries.yml toevoegen en daarin flipdown css/js en het JavaScript-bestand ebt_flipdown/js/ebt_countdown.js opnemen, waar we later de flipdown-plugin zullen initialiseren:

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

Voor bestanden in de map /libraries gebruiken we een slash aan het begin, zodat het een absoluut pad is.

js/ebt_countdown.js:

(function ($, Drupal) {

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

    };
  }

})(jQuery, Drupal);

En we moeten de nieuwe ebt_countdown-bibliotheek opnemen in templates, vergeet niet dat we twee templates hebben:

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

Leeg de caches en controleer dat je JavaScript-bestanden op de pagina staan:

We zullen de datum van PHP naar JavaScript doorgeven in drupalSettings. Dus we moeten ons bestand ebt_countdown.libraries.yml uitbreiden met dependencies. Ook zullen we de once()-functie gebruiken:

  dependencies:
    - core/once
    - core/drupalSettings

In EBT-modules worden instellingen standaard niet doorgegeven aan JavaScript. We moeten de veldwidgetklasse EbtSettingsDefaultWidget overschrijven:

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;

/**
 * Plugin-implementatie van de 'ebt_settings_countdown' widget.
 *
 * @FieldWidget(
 *   id = "ebt_settings_countdown",
 *   label = @Translation("EBT Countdown-instellingen"),
 *   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;
  }

}

Nu kunnen we deze veldwidget selecteren voor het veld EBT Settings:

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

Laten we ons blok opnieuw opslaan en de drupalSettings JavaScript-variabele controleren. Nu zullen alle opties uit het veld EBT Settings worden doorgegeven aan JavaScript:

Aan het einde van block-revision-id-* hebben we een blokrevisie-ID, dus we hebben unieke sleutels voor alle blokken. Voor inline blokken gebruiken we plugin-ID plugin-id-block-contentd202c374-f31b-4f7e-8a0d-12842a1422ff. Dus we hebben unieke ID’s in Layout Builder.

De FlipDown-plugin heeft een optie voor licht/donker thema, dus laten we dit instellingveld doorgeven in onze veldwidget EbtSettingsCountDownWidget:

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Kleurthema'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Donker'),
        'light' => $this->t('Licht'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Selecteer kleurthema voor countdown'),
      '#weight' => '3',
    ];

Daarna kunnen we de waarde van het kleurthema ophalen in JavaScript:

We hebben variabelen van instellingen naar JavaScript doorgegeven, maar we moeten ook de datumwaarde van de inhoud naar JavaScript doorgeven. We maken een lege div met het attribuut data-date="", waar we datum en tijd van het datumveld plaatsen. Voor inline-block (blokken in Layout Builder) gebruiken we block_revision_id om een unieke ID voor het blok te definiëren:

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>

Voor inhoudsblokken vanaf de Block Layout-pagina gebruiken we 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>

Als je niet zeker weet waar de veldgegevens zich bevinden, kun je de Twig Debugger-module installeren en content.field_ebt_countdown_date op de pagina printen met {{ dump(content.field_ebt_countdown_date) }}:

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

En we hebben de date('U') twigfilter gebruikt om de datum om te zetten naar een timestamp.

Nu kunnen we aangepaste JavaScript toevoegen en FlipDown initialiseren.

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown gedrag.
   */
  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);

Vergeet niet de caches te legen om de updates te zien. Daarna zou FlipDown op de pagina moeten werken:

Zoals je ziet werken zelfs de standaard FlipDown-stijlen niet geweldig. Er zijn twee regels met cijfers, zelfs op desktop. Maar we kunnen dit eenvoudig oplossen met aangepaste stijlen. Je kunt de bestanden gulpfile.js en package.json kopiëren voor het compileren van scss naar css uit de EBT Counter-module:

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

gulpfile.js:

// --------------------------------------------------
// Plugins laden
// --------------------------------------------------

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 = {
    // hoofd-scss-bestanden die partials importeren
    scssSrc: 'scss/*.scss',
    // alle scss-bestanden in de scss-map
    allScss: 'scss/**/*.scss',
    // de doelmap voor onze css
    cssDest: 'css/',
    // alle js-bestanden in de js-map
    allJs: 'assets/js/**/*.js',
    // alle img-bestanden
    allImgs: 'assets/img/**/*'
};


// Taken definiëren na het laden van dependencies
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']);
  });
}

// Stel de taak beschikbaar door deze te exporteren
// Hierdoor kun je deze uitvoeren via de commandline met
// $ gulp style
exports.style = style;

function watch(){
    // gulp.watch neemt de locatie van bestanden die moeten worden bekeken
    // en de naam van de functie die we willen uitvoeren bij wijziging
    gulp.watch('scss/**/*.scss', style)
}

// Vergeet niet de taak beschikbaar te stellen!
exports.watch = watch

package.json:

{
  "name": "ebt_styles",
  "version": "1.0.0",
  "description": "Voer npm install uit en daarna 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"
  }
}

Het bestand package-lock.json wordt gegenereerd nadat je dit hebt uitgevoerd:

npm install

En je kunt de gulp-taak starten met:

gulp watch

Nu voegen we scss-bestanden toe:

/ebt_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Het bestand flipdown.css zal automatisch worden gegenereerd uit flipdown.scss. En we kunnen het .css-bestand opnemen in .libraries.yml:

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

Laten we de cache legen en de resultaten bekijken:

Nu ziet het er beter uit!

Kunnen we gewone css gebruiken zonder te compileren vanuit scss?

Ja, dat kan, maar scss schrijven is handiger voor de meeste ontwikkelaars.

De FlipDown-plugin heeft enkele opties om de weergave te wijzigen:

https://github.com/PButcher/flipdown

• theme
• headings

We hebben al een nieuwe veldwidget gemaakt voor EBT Settings EbtSettingsCountDownWidget, nu breiden we dit formulier uit met nieuwe velden:

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

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Kleurthema'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Donker'),
        'light' => $this->t('Licht'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Selecteer kleurthema voor countdown'),
      '#weight' => '3',
    ];

    $element['ebt_settings']['styles'] = [
      '#title' => $this->t('Stijlen'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Standaard'),
        'new_year' => $this->t('Nieuwjaar'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['styles'] ?? 'default',
      '#description' => $this->t('Selecteer speciale stijl voor countdown'),
      '#weight' => '4',
    ];

    $element['ebt_settings']['heading_days'] = [
      '#title' => $this->t('Kop Dagen'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_days'] ?? $this->t('Dagen'),
      '#description' => $this->t('Koptekst voor de Dagen teller'),
      '#weight' => '5',
    ];

    $element['ebt_settings']['heading_hours'] = [
      '#title' => $this->t('Kop Uren'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_hours'] ?? $this->t('Uren'),
      '#description' => $this->t('Koptekst voor de Uren teller'),
      '#weight' => '6',
    ];

    $element['ebt_settings']['heading_minutes'] = [
      '#title' => $this->t('Kop Minuten'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_minutes'] ?? $this->t('Minuten'),
      '#description' => $this->t('Koptekst voor de Minuten teller'),
      '#weight' => '7',
    ];

    $element['ebt_settings']['heading_seconds'] = [
      '#title' => $this->t('Kop Seconden'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_seconds'] ?? $this->t('Seconden'),
      '#description' => $this->t('Koptekst voor de Seconden teller'),
      '#weight' => '8',
    ];
    
    return $element;

Zo kunnen we Headings gebruiken voor vertalingen:

We hebben alle EBT-instellingswaarden in JavaScript, dus ik heb gewoon een ID toegevoegd in de template om gemakkelijker de juiste unieke sleutel te krijgen.

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

Optiesleutels hebben hetzelfde patroon als ID’s:

/ebt_core/ebt_core.module:

  // Gebruik plugin_id voor Blokinhoud.
  $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;

Dus we kunnen opties gebruiken vanuit JavaScript drupalSettings:

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown gedrag.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        // Verkrijg blok-ID.
        var countdownWrapper = countdown.closest('.ebt-block-countdown');
        var countdownWrapperId = countdownWrapper.getAttribute('id');
        // Verkrijg blok EBT-instellingen.
        var ebtOptions = drupalSettings['ebtCountdown'][countdownWrapperId];
        // Bereid opties voor voor de JavaScript-plugin.
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        // Initialiseer JavaScript-plugin.
        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);

Ik heb ook $element['ebt_settings']['styles'] toegevoegd in de veldwidget, zodat we dit in de template kunnen gebruiken om een nieuwe klasse toe te voegen voor het hele blok.

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

Dit zal de new_year-bibliotheek opnemen voor de Nieuwjaar-stijl, maar nu moeten we deze bibliotheek aanmaken.

/ebt_countdown/ebt_countdown.libraries.yml:

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

En hier zijn de stijlen voor het nieuwjaar-blok:

/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;
}

Hier is het resultaat van het toevoegen van een nieuwe stijl:

Je kunt een onbeperkt aantal stijlen toevoegen voor nieuwe of bestaande EBT-modules. Je kunt ook je eigen stijlen voorstellen voor elke EBT-module, maak gewoon een issue aan op drupal.org:

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

Ik denk dat we klaar zijn met het toevoegen van functies aan EBT Countdown, het is tijd om configuraties te exporteren en wijzigingen te deployen op Drupal.org. We moeten alle configuraties die betrekking hebben op EBT Countdown kopiëren naar de map /ebt_countdown/config/install.

Als je de EBT-module met Drush hebt gegenereerd, moet je de configuraties bijwerken voor nieuwe velden en je EBT-bloktype.

Daarna moet je de EBT-module inschakelen op de pagina Uitbreiden /admin/modules. Het nieuwe EBT-bloktype en andere instellingen zullen worden geïnstalleerd vanuit de map /config/install op basis van de configuratiebestanden:

We hoeven geen language.* configuraties toe te voegen, omdat sommige Drupal-sites slechts één taal hebben en de Language-module kan zijn uitgeschakeld.

Meestal kopieer ik alle bestanden en controleer ik dat ik een kopie heb in de map config/install.

Nu moeten we uuid en hashes verwijderen uit de configuraties in de map config/install

Aangezien we andere Drupal-modules hebben gebruikt, moeten we deze opnemen in het .info-bestand als dependencies.

/ebt_countdown/ebt_countdown.info:

dependencies:
  - drupal:datetime

We hebben eerder een nieuw project aangemaakt op Drupal.org:

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

Ik zal de 1.4.x branch gebruiken als hoofdbranch, voor consistentie met andere EBT-modules:

Dus alle releases zullen starten vanaf versie 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Je kunt ook een -alpha- of -beta-versie maken voordat je een stabiele 1.4.0-versie aanmaakt.

We moeten 10 dagen wachten voordat de module kan worden opgenomen in de security advisory coverage.

Dus we kunnen onze nieuwe module testen en bugs oplossen.

Vergeet niet een README.md-bestand toe te voegen, je kunt een voorbeeld bekijken in andere EBT-modules:

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

Bedankt voor het gebruiken van EBT-modules! Voel je vrij om vragen te stellen of ideeën aan te dragen:

Maak een issue aan op Drupal.org

Neem contact op met de ontwikkelaar van de EBT-modules

Of stuur me een bericht op LinkedIn