Glimmer DSL for Web - Regular Sample - Todo MVC - Views - EditTodoInput

glimmer-dsl-web-sample-regular-todo-mvc-views-edit-todo-input.rb

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/edit_todo_input.rb
require_relative 'todo_input'

class EditTodoInput < TodoInput
  option :presenter
  option :todo
  
  markup {
    input(class: todo_input_class) { |edit_input|
      # Data-bind `input` `style` property unidirectionally to `todo` `editing` attribute, 
      # using `on_read` converter to convert `todo.editing` value and produce final value to update `input` `style` with,
      # and using `after_read` hook to have `input` grab keyboard focus when editing todo.      
      style <= [ todo, :editing,
                 on_read: ->(editing) { editing ? '' : 'display: none;' },
                 after_read: ->(_) { edit_input.focus if todo.editing? }
               ]

      # Data-bind `input` `value` property bidirectionally to `todo` `task` attribute
      # meaning make any changes to the `todo` `task` attribute value automatically update the `input` `value` property
      # and any changes to the `input` `value` property by the user automatically update the `todo` `task` attribute value.
      value <=> [todo, :task]
      
      onkeyup do |event|
        if event.key == 'Enter' || event.keyCode == "\r"
          todo.save_editing
          presenter.destroy(todo) if todo.task.strip.empty?
        elsif event.key == 'Escape' || event.keyCode == 27
          todo.cancel_editing
        end
      end
      
      onblur do |event|
        todo.save_editing
      end
      
      style {
        todo_input_styles
      }
    }
  }
  
  def todo_input_class
    'edit-todo'
  end
  
  def todo_input_styles
    super
    
    rule("*:has(> .#{todo_input_class})") {
      position 'relative'
    }
    
    rule(".#{todo_input_class}") {
      position 'absolute'
      display 'block'
      width 'calc(100% - 43px)'
      padding '12px 16px'
      margin '0 0 0 43px'
      top '0'
    }
  end
end