stimulus.html.twig

{% extends 'base.html.twig' %}

{% set cdn_url = 'https://unpkg.com' %}

{% block preconnect %}
    <link rel="preconnect" href="{{ preconnect(cdn_url) }}" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="module">
      // @see https://stimulus.hotwired.dev/handbook/installing#using-other-build-systems
      import { Application, Controller } from "{{ cdn_url }}/@hotwired/stimulus/dist/stimulus.js" // reference version: Stimulus 3.2.1
      window.Stimulus = Application.start()
      Stimulus.debug = {{ app.environment == 'dev' ? 'true' : 'false' }}

      Stimulus.register("hello", class extends Controller {
        static targets = [ "name", "greating", "dialog", "form"]

        connect() {
          console.log("Hello, Stimulus!", this.element)
        }

        greet() {
          if (!this.formTarget.reportValidity()) {
            return
          }

          this.greatingTarget.innerHTML = `Hello, ${this.nameTarget.value}!`
          this.dialogTarget.showModal()
        }

        reset() {
          this.nameTarget.value = ''
          this.greatingTarget.innerHTML = ''
        }
      })

      Stimulus.register("api", class extends Controller {
        static targets = ["title", "slug"]
        static values = {
          "url": String
        }

        connect() {
          console.log("Dataset: ", this.element.dataset) // list all data properties of the controller
        }

        slugify() {
          let apiUrl = this.urlValue + '?title='+this.titleTarget.value
          const slugTarget = this.slugTarget
          fetch(apiUrl)
            .then(function(response) {
              return response.json()
            })
            .then(function(data) {
              slugTarget.value = data.slug
            })
            .catch(function(error) {
              console.log('An error occured. 😞', error);
            })
        }
      })
    </script>
{% endblock %}

{% block body %}
    <div class="sub-heading">
        <h2>Some cool and simple JavaScript with Stimulus 🪢</h2>
    </div>

    <p>...without the JS tooling stuff and complexity.</p>

    <card>
        <grid>
            <div col="1/4">
                <h3>Demo: form+dialog</h3>
            </div>
            <div col="3/4">
                <div data-controller="hello">
                    <form data-hello-target="form">
                        <label for="name">Enter your name below and click on the <tag>Great</tag> button
                            <input name="name" required data-hello-target="name" type="text" />
                        </label>

                        <input type="submit" primary data-action="click->hello#greet:prevent" value="Great" />
                    </form>

                    <dialog data-hello-target="dialog">
                        <card>
                            <h2 data-hello-target="greating"></h2>
                            <form method="dialog">
                                <menu>
                                    <button data-action="click->hello#reset">Close</button>
                                </menu>
                            </form>
                        </card>
                    </dialog>
                </div>
            </div>
        </grid>
    </card>

    <card>
        <grid>
            <div col="1/4">
                <h3>Demo: ajax call to API endpoint</h3>
            </div>

            <div col="3/4">
                <div data-controller="api"
                     data-api-url-value="{{ path('app_slugifyacfion') }}"
                >
                    <label for="title">Enter a blog post title below
                        <input name="title" required data-api-target="title" data-action="api#slugify" type="text" />
                    </label>

                    <label for="slug">
                        Slug (readonly):
                        <input name="slug" data-api-target="slug" type="text" readonly />
                    </label>
                </div>
            </div>
        </grid>
    </card>
{% endblock %}