Kreiranje prikaznog stila za Views u Drupalu

Kreiranje plugina za stil prikaza Views može delovati kao složen zadatak, ali je zapravo lakše nego što izgleda. Evo vodiča korak po korak kako to uraditi, sa izvornim kodom.

Možete preuzeti gotov kod ovde: TARDIS (iako je još uvek u razvoju). A ako vam treba uvod u Drupal 8 module, evo praktičnog vodiča za kreiranje osnovnih Drupal 8 modula.

.info.yml

Počnite tako što ćete napraviti fasciklu nazvanu tardis za vaš modul u /modules/custom. U nju stavite fajl nazvan tardis.info.yml sa sledećim sadržajem:

name: TARDIS
type: module
description: 'Pruža stil prikaza Views koji prikazuje listu godina i meseci kao linkove ka sadržaju u obrnutom hronološkom redu.'
package: Views
core: '8.x'
dependencies:
  - drupal:views

Klasa

Sada je vreme da kreirate klasu plugina. Napravite fajl pod nazivom Tardis.php unutar src/Plugin/views/style i ubacite sledeći kod:

<?php

namespace Drupal\tardis\Plugin\views\style;

use Drupal\Core\Form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;

/**
 * Stil plugin za prikaz liste godina i meseci
 * u obrnutom hronološkom redu kao linkova ka sadržaju.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Prikazuje listu godina i meseci u obrnutom hronološkom redu kao linkove ka sadržaju."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )
 */
class Tardis extends StylePluginBase {

  /**
   * {@inheritdoc}
   */
  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = array('default' => 'tardis');
    return $options;
  }

  /**
   * {@inheritdoc}
   */
  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

    // Prefiks puta za TARDIS linkove.
    $form['path'] = array(
      '#type' => 'textfield',
      '#title' => t('Putanja linka'),
      '#default_value' => (isset($this->options['path'])) ? $this->options['path'] : 'tardis',
      '#description' => t('Prefiks putanje za svaki TARDIS link, npr. example.com/tardis/2015/10.'),
    );

    // Format datuma meseca.
    $form['month_date_format'] = array(
      '#type' => 'textfield',
      '#title' => t('Format datuma meseca'),
      '#default_value' => (isset($this->options['month_date_format'])) ? $this->options['month_date_format'] : 'm',
      '#description' => t('Validan PHP parametar date funkcije za prikaz meseci.', array('@url' => 'http://php.net/manual/en/function.date.php')),
    );

    // Da li meseci treba da budu ugnježdeni unutar godina.
    $options = array(
      1 => 'da',
      0 => 'ne',
    );
    $form['nesting'] = array(
      '#type' => 'radios',
      '#title' => t('Ugnježđivanje'),
      '#options' => $options,
      '#default_value' => (isset($this->options['nesting'])) ? $this->options['nesting'] : 1,
      '#description' => t('Da li meseci treba da budu ugnježdeni unutar godina? 

        Primer:
        

          

              
Ugnježđivanje
              
Bez ugnježđivanja
          
          

            

              

                
2016
                  

                    
03
                    
02
                    
01
                  
                
              
            
            

              

                
2016/03
                
2016/02
                
2016/01
              
            
          
        
      '),
    );

    // Dodatne CSS klase.
    $form['classes'] = array(
      '#type' => 'textfield',
      '#title' => t('CSS klase'),
      '#default_value' => (isset($this->options['classes'])) ? $this->options['classes'] : 'view-tardis',
      '#description' => t('CSS klase za dodatnu prilagodbu ove TARDIS stranice.'),
    );
  }

}

Hajde da pogledamo neke od ovih delova:

 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Prikazuje listu godina i meseci u obrnutom hronološkom redu kao linkove ka sadržaju."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )

Ovi komentari su važni. Oni postavljaju osnovu za naš plugin. Ako ih ne dodate, kod neće pravilno raditi.

class Tardis extends StylePluginBase {

Osnovna definicija plugina. Opet, ovo je neophodno.

  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = array('default' => 'tardis');
    return $options;
  }

Mogućnost osnovnih opcija, kao i važna podrazumevana vrednost za naš plugin. Ovo je tu zato što ovaj plugin treba da bude podesiv.

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

Dalje, pravimo formu za opcije sa poljima, skoro kao obične konfiguracione forme. Za više informacija pogledajte Priručnik za Forms API.

.module fajl

Fajl .module nije obavezan u Drupal 8, ali je mesto gde ide hook_theme:

<?php

/**
 * @file
 * Pomoć i teme za TARDIS Views modul.
 */

/**
 * Implementira hook_theme().
 */
function tardis_theme($existing, $type, $theme, $path) {
  // Učitaj funkcije za preradu TARDIS teme u poseban .inc fajl.
  \Drupal::moduleHandler()->loadInclude('tardis', 'inc', 'tardis.theme');

  return array(
    'tardis' => array(
      'file' => 'tardis.theme.inc',
    ),
  );
}

U suštini, delegiramo funkcije za prethodnu obradu u poseban fajl, kako bi sve bilo uredno organizovano.

.theme.inc fajl

Kreirajte fajl pod nazivom tardis.theme.inc u folderu modula i ubacite sledeći kod:

<?php

/**
 * @file
 * Tema za TARDIS Views.
 */
function template_preprocess_views_view_tardis(&$variables) {
  // Opcije prikaza koje je korisnik postavio.
  $options = $variables['view']->style_plugin->options;

  // Napravi dvodimenzionalni niz sa godinama i mesecima.
  $time_pool = array();

  foreach ($variables['view']->result as $id => $result) {
    $created = $result->node_field_data_created;
    $created_year = date('Y', $created);
    // Format datuma meseca.
    $month_date_format = (isset($options['month_date_format'])) ? $options['month_date_format'] : 'm';
    $created_month_digits = date('m', $created);
    $created_month = date($month_date_format, $created);
    $time_pool[$created_year][$created_month_digits] = "$created_month";
  }

  $options['time_pool'] = $time_pool;

  // Ažuriraj opcije za twig.
  $variables['options'] = $options;
}

Ovaj kod uglavnom uzima sve datume kreiranja čvorova i pravi asocijativni niz koji se prosleđuje šablonu za konačni prikaz, zajedno sa ostalim opcijama koje su definisane u formi i koje ostaju nepromenjene.

Twig šablon

Sada za prikaz modula napravite fajl views-view-tardis.html.twig u fascikli templates. Zašto baš ovo ime? Setite se komentara sa početka ovog vodiča?

* theme = "views_view_tardis",

To znači da šablon treba da se nalazi na podrazumevanoj lokaciji (/templates) pod ovim imenom, samo sa crtama umesto donjih crta i sa ekstenzijom .html.twig na kraju.

Što se tiče koda:

{#
/**
 * Podrazumevana tema za Views za prikaz TARDIS arhive.
 *
 * Dostupne promenljive:
 * - options: Opcije stil plugina Views:
 *   - classes: CSS klase.
 *   - nesting: Da li meseci treba da budu ugnježdeni unutar godina.
 *   - path: Putanja linka. Npr.: example.com/TARDIS/2016/03
 *   - time_pool: Dvodimenzionalni niz sa godinama i mesecima koji sadrže sadržaj.
 *
 * @see template_preprocess_views_view_tardis()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <ul>
    {% for key, item in options.time_pool %}
      {% if options.nesting == 1 %}
        <li><a href="/{{ options.path }}/{{ key }}">{{ key }}</a><ul>
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
        </ul></li>
      {% else %}
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </ul>
</div>

Preporučuje se da prvo izdvojite sve promenljive prosleđene kao asocijativni niz $variables na početku fajla. One su uredno smeštene u $variables['options'] - ili, kako bi to Twig rekao, variables.options.

Zatim postavljamo neke klase za naš prikaz, kako je definisano u formi opcija:

{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}

I setimo ih se u sledećem redu:

<div{{ attributes.addClass(classes) }}>

Ostatak koda se bavi izvlačenjem meseci i godina za koje postoje zapisi i prikazivanjem HTML liste. Posebno je važna for petlja:

{% for key, item in options.time_pool %}

Koja pravilno formira svaki link. Na primer:

<li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>

Još nešto

I na kraju, potrebno je napraviti podrazumevani prikaz i eksportovati ga radi olakšanja korisnicima. Trebalo bi da primetite da u /config/install/views.view.tardis.yml već postoji podrazumevani prikaz. Ovaj podrazumevani prikaz je dostupan od trenutka kada korisnici aktiviraju modul.

Napravio sam ga i eksportovao kroz formu za pojedinačni izvoz na admin/config/development/configuration/single/export, prateći izvanredan tutorijal Subhojita Pala.

To je to!

Sada možete napisati sopstveni plugin za Views prikaz u Drupalu 8! Ostavite komentar ispod. Srećno sa kodiranjem!