class JsExampleController

Same name in other branches
  1. 3.x modules/js_example/src/Controller/JsExampleController.php \Drupal\js_example\Controller\JsExampleController
  2. 8.x-1.x js_example/src/Controller/JsExampleController.php \Drupal\js_example\Controller\JsExampleController

Controller for JavaScript Example description page.

This class uses the DescriptionTemplateTrait to display the module description we put in the templates/description.html.twig file.

Hierarchy

Expanded class hierarchy of JsExampleController

File

modules/js_example/src/Controller/JsExampleController.php, line 14

Namespace

Drupal\js_example\Controller
View source 
class JsExampleController {
    use DescriptionTemplateTrait;
    use StringTranslationTrait;
    
    /**
     * {@inheritdoc}
     */
    protected function getModuleName() {
        return 'js_example';
    }
    
    /**
     * Weight demonstration.
     *
     * We demonstrate how to attach a number of scripts to the render array via
     * a library.
     *
     * In this controller, on the Drupal side:
     * - We create a container with an ID the scripts uses to identify the
     *   container.
     * - We attach some scripts which generate color-coded content. We use the
     *   'weight' attribute to set the order in which the scripts are included in
     *   the library declaration.
     * - We add values to drupalSettings, which is used to pass data from PHP to
     *   JavaScript.
     *
     * The order in which the color scripts are executed will end up being the order
     * of the content.
     *
     * The 'weight' attribute in the .libraries.yml file determines the order in
     * which a script is added to the page. To see this in action:
     * - Uncheck the "Aggregate Javascript files" setting on
     *   admin/config/development/performance.
     * - Visit examples/js_example/colors and examine the page source.
     *   You will see that the color scripts have been added to <head> following
     *   the weight order.
     *
     * @return array
     *   A render array.
     */
    public function showColors() {
        $colors = [
            'red' => $this->t('I am red.'),
            'blue' => $this->t('I am blue.'),
            'green' => $this->t('I am green.'),
            'cyan' => $this->t('I am cyan.'),
            'magenta' => $this->t('I am magenta.'),
            'yellow' => $this->t('I am yellow.'),
        ];
        // We give use an ID so that to target the HTML markup we added.
        $build['content'] = [
            '#markup' => '<div id="js-example-colors"></div>',
        ];
        // Attach the library.
        $build['#attached']['library'][] = 'js_example/colors';
        // Attach the JavaScript settings.
        $build['#attached']['drupalSettings']['javaScriptExample']['colors'] = $colors;
        return $build;
    }
    
    /**
     * Accordion page implementation.
     *
     * We're allowing a twig template to define our content in this case,
     * which isn't normally how things work, but it's easier to demonstrate
     * the JavaScript this way.
     *
     * @return array
     *   A render array.
     */
    public function showAccordion() {
        // We get all the page content from a theme hook. This is not a good
        // practice, though: Theme hooks should just theme the content they obtain.
        $build['accordion'] = [
            '#theme' => 'js_example_accordion',
            '#title' => $this->t('Click on sections to expand or collapse them.'),
        ];
        // The usual way to attach a library to a page is adding it to the render
        // array via the #attached property. In this case, we added it via the
        // template file we use. This is why the following lines are commented out.
        //
        // $build['accordion']['#attached']['library'][] = 'js_example/accordion';
        return $build;
    }

}

Members

Title Modifiers Object type Summary Overriden Title Overrides
DescriptionTemplateTrait::description public function Generate a render array with our templated content.
DescriptionTemplateTrait::getDescriptionTemplatePath protected function Get full path to the template.
DescriptionTemplateTrait::getDescriptionVariables protected function Variables to act as context to the twig template file. 1
JsExampleController::getModuleName protected function Name of our module. Overrides DescriptionTemplateTrait::getModuleName
JsExampleController::showAccordion public function Accordion page implementation.
JsExampleController::showColors public function Weight demonstration.
StringTranslationTrait::$stringTranslation protected property The string translation service. 3
StringTranslationTrait::formatPlural protected function Formats a string containing a count of items.
StringTranslationTrait::getNumberOfPlurals protected function Returns the number of plurals supported by a given language.
StringTranslationTrait::getStringTranslation protected function Gets the string translation service.
StringTranslationTrait::setStringTranslation public function Sets the string translation service to use. 2
StringTranslationTrait::t protected function Translates a string to the current language or to a given language.