glimmer-dsl-web-hello-modal-hello-modal.rb

require 'glimmer-dsl-web'

class HelloModal
  include Glimmer::Web::Component

  before_render do
    @greeting_person = GreetingPerson.new
  end

  markup {
    div {
      div {
        button('Greet The World') {
          onclick do
            # renders Modal under body by default, which works for Modals because they rely on fixed positioning
            GreetingModal.render
          end
        }
      }
      div {
        button('Greet Laura') {
          onclick do
            # renders Modal under body explicitly (parent takes a CSS expression) while passing it an attribute value
            GreetingModal.render(parent: 'body', greeting_target: 'Laura')
          end
        }
      }
      div {
        label { 'Greeting Person Name:' }
        input(type: 'text') {
          # data-bind input value bidirectionally to @greeting_person.name
          value <=> [@greeting_person, :name]
        }
        button {
          # data-bind button innerText unidirectionally to @greeting_person.name, with an on_read converter 
          # to convert value on read from the Model before it is set in the View inner_text property
          inner_text <= [@greeting_person, :name, on_read: ->(name) { "Greet #{name}" }]

          onclick do
            # renders Modal under body by default while passing it a Model attribute value
            GreetingModal.render(greeting_target: @greeting_person.name)
          end
        }
      }
    }
  }

  style {
    r('.hello-modal div') {
      margin_bottom 10
    }
    r('.hello-modal label, .hello-modal input, .hello-modal button') {
      margin_right 5
    }
  }
end