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

glimmer-dsl-web-sample-regular-todo-mvc-views-todo-list.rb

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

class TodoList
  include Glimmer::Web::Component
  
  option :presenter
  
  markup {
    main(class: 'main') {
      # Data-bind main element style property unidirectionally to `Todo.all` value (`Array` of `Todo` objects)
      # meaning make any changes to `Todo.all` automatically update the style of the main element
      # on_read option is a converter that is invoked upon reading data from `Todo.all` to update the main style 
      # with the converted value (e.g. 'display: none;')
      style <= [ Todo, :all,
                 on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
               ]
      
      div(class: 'toggle-all-container') {
        input(class: 'toggle-all', type: 'checkbox')
        
        label('Mark all as complete', class: 'toggle-all-label', for: 'toggle-all') {
          onclick do |event|
            presenter.toggle_all_completed
          end
        }
      }
      
      ul(class: 'todo-list') {
        # Content data-binding for ul automatically re-renders its content block every time `presenter` `todos` change.
        content(presenter, :todos) {
          presenter.todos.each do |todo|
            todo_list_item(presenter:, todo:)
          end
        }
      }
      
      style {
        todo_list_styles
      }
    }
  }
  
  def todo_list_styles
    rule('.main') {
      border_top '1px solid #e6e6e6'
      position 'relative'
      z_index '2'
    }
    
    rule('.toggle-all') {
      border 'none'
      bottom '100%'
      height '1px'
      opacity '0'
      position 'absolute'
      right '100%'
      width '1px'
    }
          
    rule('.toggle-all+label') {
      align_items 'center'
      display 'flex'
      font_size '0'
      height '65px'
      justify_content 'center'
      left '0'
      position 'absolute'
      top '-65px'
      width '45px'
    }
    
    rule('.toggle-all+label:before') {
      color '#949494'
      content '"❯"'
      display 'inline-block'
      font_size '22px'
      padding '10px 27px'
      _webkit_transform 'rotate(90deg)'
      transform 'rotate(90deg)'
    }
    
    rule('.toggle-all:focus+label, .toggle:focus+label, :focus') {
      box_shadow '0 0 2px 2px #cf7d7d'
      outline '0'
    }
    
    rule('.todo-list') {
      list_style 'none'
      margin '0'
      padding '0'
    }
  end
end