glimmer-dsl-web 0.2.6 → 0.2.8

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/presenters/todo_presenter.rb

@@ -0,0 +1,102 @@
+require 'glimmer/data_binding/observer'
+
+require_relative '../models/todo'
+
+class TodoPresenter
+  FILTER_ROUTE_REGEXP = /\#\/([^\/]*)$/
+  
+  attr_accessor :todos, :can_clear_completed, :active_todo_count
+  attr_reader :new_todo, :filter
+  
+  def initialize
+    @todos = Todo.all.clone
+    @new_todo = Todo.new(task: '')
+    @filter = :all
+    refresh_todo_stats
+  end
+  
+  def create_todo(todo = nil)
+    todo ||= new_todo.clone
+    Todo.all.prepend(todo)
+    observers_for_todo_stats[todo.object_id] = todo_stat_observer.observe(todo, :completed) unless observers_for_todo_stats.has_key?(todo.object_id)
+    refresh_todos_with_filter
+    refresh_todo_stats
+    new_todo.task = ''
+  end
+  
+  def refresh_todos_with_filter
+    self.todos = Todo.send(filter).clone
+  end
+  
+  def filter=(filter)
+    return if filter == @filter
+    @filter = filter
+    refresh_todos_with_filter
+  end
+  
+  def destroy(todo)
+    delete(todo)
+    refresh_todos_with_filter
+    refresh_todo_stats
+  end
+  
+  def clear_completed
+    Todo.completed.each { |todo| delete(todo) }
+    refresh_todos_with_filter
+    refresh_todo_stats
+  end
+  
+  def toggle_all_completed
+    target_completed_value = Todo.active.any?
+    todos_to_update = target_completed_value ? Todo.active : Todo.completed
+    todos_to_update.each { |todo| todo.completed = target_completed_value }
+  end
+  
+  def setup_filter_routes
+    @filter_router_function = -> (event) { apply_route_filter }
+    $$.addEventListener('popstate', &@filter_router_function)
+    apply_route_filter
+  end
+  
+  def apply_route_filter
+    route_filter_match = $$.document.location.href.to_s.match(FILTER_ROUTE_REGEXP)
+    return if route_filter_match.nil?
+    route_filter = route_filter_match[1]
+    route_filter = 'all' if route_filter == ''
+    self.filter = route_filter
+  end
+  
+  def unsetup_filter_routes
+    $$.removeEventListener('popstate', &@filter_router_function)
+    @filter_router_function = nil
+  end
+  
+  private
+  
+  def delete(todo)
+    Todo.all.delete(todo)
+    observer_registration = observers_for_todo_stats.delete(todo.object_id)
+    observer_registration&.deregister
+  end
+  
+  def observers_for_todo_stats
+    @observers_for_todo_stats = {}
+  end
+  
+  def todo_stat_observer
+    @todo_stat_observer ||= Glimmer::DataBinding::Observer.proc { refresh_todo_stats }
+  end
+  
+  def refresh_todo_stats
+    refresh_can_clear_completed
+    refresh_active_todo_count
+  end
+  
+  def refresh_can_clear_completed
+    self.can_clear_completed = Todo.completed.any?
+  end
+  
+  def refresh_active_todo_count
+    self.active_todo_count = Todo.active.count
+  end
+end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/edit_todo_input.rb

@@ -0,0 +1,55 @@
+require_relative 'todo_input'
+
+class EditTodoInput < TodoInput
+  option :presenter
+  option :todo
+  
+  markup {
+    input(class: todo_input_class) { |edit_input|
+      style <= [ todo, :editing,
+                 on_read: ->(editing) { editing ? '' : 'display: none;' },
+                 after_read: ->(_) { edit_input.focus if todo.editing? }
+               ]
+    
+      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

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_form.rb

@@ -0,0 +1,30 @@
+require_relative 'new_todo_input'
+
+class NewTodoForm
+  include Glimmer::Web::Component
+  
+  option :presenter
+  
+  markup {
+    header(class: 'header') {
+      h1('todos')
+      
+      new_todo_input(presenter: presenter)
+      
+      style {
+        rule('.header h1') {
+          color '#b83f45'
+          font_size '80px'
+          font_weight '200'
+          position 'absolute'
+          text_align 'center'
+          _webkit_text_rendering 'optimizeLegibility'
+          _moz_text_rendering 'optimizeLegibility'
+          text_rendering 'optimizeLegibility'
+          top '-140px'
+          width '100%'
+        }
+      }
+    }
+  }
+end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_input.rb

@@ -0,0 +1,41 @@
+require_relative 'todo_input'
+
+class NewTodoInput < TodoInput
+  option :presenter
+  
+  markup {
+    input(class: todo_input_class, placeholder: "What needs to be done?", autofocus: "") {
+      value <=> [presenter.new_todo, :task]
+    
+      onkeyup do |event|
+        presenter.create_todo if event.key == 'Enter' || event.keyCode == "\r"
+      end
+    
+      style {
+        todo_input_styles
+      }
+    }
+  }
+  
+  def todo_input_class
+    'new-todo'
+  end
+  
+  def todo_input_styles
+    super
+    
+    rule(".#{todo_input_class}") {
+      padding '16px 16px 16px 60px'
+      height '65px'
+      border 'none'
+      background 'rgba(0, 0, 0, 0.003)'
+      box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
+    }
+    
+    rule(".#{todo_input_class}::placeholder") {
+      font_style 'italic'
+      font_weight '400'
+      color 'rgba(0, 0, 0, 0.4)'
+    }
+  end
+end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_filters.rb

@@ -0,0 +1,123 @@
+class TodoFilters
+  include Glimmer::Web::Component
+  
+  option :presenter
+  
+  markup {
+    footer(class: 'todo-filters') {
+      style <= [ Todo, :all,
+                 on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
+               ]
+      
+      span(class: 'todo-count') {
+        span('.strong') {
+          inner_text <= [presenter, :active_todo_count]
+        }
+        span {
+          " items left"
+        }
+      }
+      
+      ul(class: 'filters') {
+        Todo::FILTERS.each do |filter|
+          li {
+            a(filter.to_s.capitalize, href: "#/#{filter unless filter == :all}") {
+              class_name <= [ presenter, :filter,
+                              on_read: -> (presenter_filter) { presenter_filter == filter ? 'selected' : '' }
+                            ]
+            
+              onclick do |event|
+                presenter.filter = filter
+              end
+            }
+          }
+        end
+      }
+      
+      button('Clear completed', class: 'clear-completed') {
+        style <= [ presenter, :can_clear_completed,
+                   on_read: -> (can_clear_completed) { can_clear_completed ? '' : 'display: none;' },
+                 ]
+      
+        onclick do |event|
+          presenter.clear_completed
+        end
+      }
+      
+      style {
+        rule('.todo-filters') {
+          border_top '1px solid #e6e6e6'
+          font_size '15px'
+          height '20px'
+          padding '10px 15px'
+          text_align 'center'
+        }
+        
+        rule('.todo-filters:before') {
+          bottom '0'
+          box_shadow '0 1px 1px rgba(0,0,0,.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0,0,0,.2)'
+          content '""'
+          height '50px'
+          left '0'
+          overflow 'hidden'
+          position 'absolute'
+          right '0'
+        }
+        
+        rule('.todo-count') {
+          float 'left'
+          text_align 'left'
+        }
+        
+        rule('.todo-count .strong') {
+          font_weight '300'
+        }
+        
+        rule('.filters') {
+          left '0'
+          list_style 'none'
+          margin '0'
+          padding '0'
+          position 'absolute'
+          right '0'
+        }
+        
+        rule('.filters li') {
+          display 'inline'
+        }
+        
+        rule('.filters li a') {
+          border '1px solid transparent'
+          border_radius '3px'
+          color 'inherit'
+          margin '3px'
+          padding '3px 7px'
+          text_decoration 'none'
+          cursor 'pointer'
+        }
+        
+        rule('.filters li a.selected') {
+          border_color '#ce4646'
+        }
+        
+        rule('.clear-completed, html .clear-completed:active') {
+          cursor 'pointer'
+          float 'right'
+          line_height '19px'
+          position 'relative'
+          text_decoration 'none'
+        }
+        
+        media('(max-width: 430px)') {
+          rule('.todo-filters') {
+            height '50px'
+          }
+          
+          rule('.filters') {
+            bottom '10px'
+          }
+        }
+      }
+    }
+  }
+end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_input.rb

@@ -0,0 +1,30 @@
+# Superclass for NewTodoInput and EditTodoInput with common styles
+class TodoInput
+  include Glimmer::Web::Component
+  
+  def todo_input_class
+    'todo-input'
+  end
+  
+  def todo_input_styles
+    rule(".#{todo_input_class}") {
+      position 'relative'
+      margin '0'
+      width '100%'
+      font_size '24px'
+      font_family 'inherit'
+      font_weight 'inherit'
+      line_height '1.4em'
+      color 'inherit'
+      padding '6px'
+      border '1px solid #999'
+      box_shadow 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)'
+      box_sizing 'border-box'
+      _webkit_font_smoothing 'antialiased'
+    }
+    
+    rule(".#{todo_input_class}::selection") {
+      background 'red'
+    }
+  end
+end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list.rb

@@ -0,0 +1,88 @@
+require_relative 'todo_list_item'
+
+class TodoList
+  include Glimmer::Web::Component
+  
+  option :presenter
+  
+  markup {
+    main(class: 'main') {
+      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(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

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list_item.rb

@@ -0,0 +1,158 @@
+require_relative 'edit_todo_input'
+
+class TodoListItem
+  include Glimmer::Web::Component
+  
+  option :presenter
+  option :todo
+  
+  markup {
+    li {
+      class_name <= [ todo, :completed,
+                      on_read: -> (completed) { li_class_name(todo) }
+                    ]
+      class_name <= [ todo, :editing,
+                      on_read: -> (editing) { li_class_name(todo) }
+                    ]
+      
+      div(class: 'view') {
+        input(class: 'toggle', type: 'checkbox') {
+          checked <=> [ todo, :completed,
+                        after_write: -> (_) { presenter.refresh_todos_with_filter if presenter.filter != :all }
+                      ]
+        }
+        
+        label {
+          inner_html <= [todo, :task]
+          
+          ondblclick do |event|
+            todo.start_editing
+          end
+        }
+        
+        button(class: 'destroy') {
+          onclick do |event|
+            presenter.destroy(todo)
+          end
+        }
+      }
+      
+      edit_todo_input(presenter:, todo:)
+      
+      if todo == presenter.todos.first
+        style {
+          todo_list_item_styles
+        }
+      end
+    }
+  }
+  
+  def li_class_name(todo)
+    classes = []
+    classes << 'completed' if todo.completed?
+    classes << 'editing' if todo.editing?
+    classes.join(' ')
+  end
+  
+  def todo_list_item_styles
+    rule('.todo-list li.completed label') {
+      color '#949494'
+      text_decoration 'line-through'
+    }
+    
+    rule('.todo-list li') {
+      border_bottom '1px solid #ededed'
+      font_size '24px'
+      position 'relative'
+    }
+    
+    rule('.todo-list li .toggle') {
+      _webkit_appearance 'none'
+      appearance 'none'
+      border 'none'
+      bottom '0'
+      height 'auto'
+      margin 'auto 0'
+      opacity '0'
+      position 'absolute'
+      text_align 'center'
+      top '0'
+      width '40px'
+    }
+    
+    rule('.todo-list li label') {
+      color '#484848'
+      display 'block'
+      font_weight '400'
+      line_height '1.2'
+      min_height '40px'
+      padding '15px 15px 15px 60px'
+      transition 'color .4s'
+      word_break 'break-all'
+    }
+    
+    rule('.todo-list li .toggle+label') {
+      background_image 'url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E)'
+      background_position '0'
+      background_repeat 'no-repeat'
+    }
+    
+    rule('.todo-list li.completed label') {
+      color '#949494'
+      text_decoration 'line-through'
+    }
+    
+    rule('.todo-list li .toggle:checked+label') {
+      background_image 'url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E)'
+    }
+    
+    rule('.todo-list li.editing') {
+      border_bottom 'none'
+      padding '0'
+    }
+    
+    rule('.todo-list li.editing input[type=checkbox], .todo-list li.editing label') {
+      opacity '0'
+    }
+    
+    rule('.todo-list li .destroy') {
+      bottom '0'
+      color '#949494'
+      display 'none'
+      font_size '30px'
+      height '40px'
+      margin 'auto 0'
+      position 'absolute'
+      right '10px'
+      top '0'
+      transition 'color .2s ease-out'
+      width '40px'
+    }
+    
+    rule('.todo-list li:focus .destroy, .todo-list li:hover .destroy') {
+      display 'block'
+    }
+    
+    rule('.todo-list li .destroy:focus, .todo-list li .destroy:hover') {
+      color '#c18585'
+    }
+    
+    rule('.todo-list li .destroy:after') {
+      content '"×"'
+      display 'block'
+      height '100%'
+      line_height '1.1'
+    }
+    
+    media ('screen and (-webkit-min-device-pixel-ratio: 0)') {
+      rule('.todo-list li .toggle, .toggle-all') {
+        background 'none'
+      }
+      
+      rule('.todo-list li .toggle') {
+        height '40px'
+      }
+    }
+  end
+end
+            

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_mvc_footer.rb

@@ -0,0 +1,45 @@
+class TodoMvcFooter
+  include Glimmer::Web::Component
+  
+  markup {
+    footer(class: 'info') {
+      p {
+        "Double-click to edit a todo"
+      }
+      p {
+        "Created by #{a('Andy Maleh', href: 'https://github.com/AndyObtiva')}"
+      }
+      p {
+        "Part of #{a('TodoMVC', href: 'http://todomvc.com')}"
+      }
+      
+      style {
+        todo_mvc_styles
+      }
+    }
+  }
+  
+  def todo_mvc_styles
+    rule('footer.info') {
+      margin '65px auto 0'
+      color '#4d4d4d'
+      font_size '11px'
+      text_shadow '0 1px 0 rgba(255, 255, 255, 0.5)'
+      text_align 'center'
+    }
+    
+    rule('footer.info p') {
+      line_height '1'
+    }
+    
+    rule('footer.info a') {
+      color 'inherit'
+      text_decoration 'none'
+      font_weight '400'
+    }
+    
+    rule('footer.info a:hover') {
+      text_decoration 'underline'
+    }
+  end
+end