glimmer-dsl-web 0.4.1 → 0.4.3

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

@@ -4,16 +4,21 @@ class TodoFilters
   option :presenter
   
   markup {
-    footer(class: 'todo-filters') {
-      style <= [ presenter, :todos,
-                 on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
-               ]
+    footer {
+      # Data-bind `footer` `style` `display` unidirectionally to presenter todos,
+      # and on read, convert todos based on whether they are empty to 'none' or 'block'
+      style(:display) <= [ presenter, :todos,
+                           on_read: ->(todos) { todos.empty? ? 'none' : 'block' }
+                         ]
       
       span(class: 'todo-count') {
         span('.strong') {
+          # Data-bind `span` `inner_text` unidirectionally to presenter active_todo_count
           inner_text <= [presenter, :active_todo_count]
         }
         span {
+          # Data-bind `span` `inner_text` unidirectionally to presenter active_todo_count,
+          # and on read, convert active_todo_count to string that follows count number
           inner_text <= [presenter, :active_todo_count,
                           on_read: -> (active_todo_count) { " item#{'s' if active_todo_count != 1} left" }
                         ]
@@ -24,9 +29,11 @@ class TodoFilters
         TodoPresenter::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' : '' }
-                            ]
+              # Data-bind inclusion of `a` `class` `selected` unidirectionally to presenter filter attribute,
+              # and on read of presenter filter, convert to boolean value of whether selected class is included
+              class_name(:selected) <= [ presenter, :filter,
+                                          on_read: -> (presenter_filter) { presenter_filter == filter }
+                                       ]
             
               onclick do |event|
                 presenter.filter = filter
@@ -37,9 +44,9 @@ class TodoFilters
       }
       
       button('Clear completed', class: 'clear-completed') {
-        style <= [ presenter, :can_clear_completed,
-                   on_read: -> (can_clear_completed) { can_clear_completed ? '' : 'display: none;' },
-                 ]
+        # Data-bind inclusion of `button` `class` `can-clear-completed` unidirectionally to presenter can_clear_completed attribute,
+        # meaning inclusion of can-clear-completed class is determined by presenter can_clear_completed boolean attribute.
+        class_name('can-clear-completed') <= [presenter, :can_clear_completed]
       
         onclick do |event|
           presenter.clear_completed
@@ -49,76 +56,82 @@ class TodoFilters
   }
   
   style {
-    rule('.todo-filters') {
+    r(component_element_selector) {
       border_top '1px solid #e6e6e6'
-      font_size '15px'
-      height '20px'
+      font_size 15
+      height 20
       padding '10px 15px'
-      text_align 'center'
+      text_align :center
+      display :none
     }
     
-    rule('.todo-filters:before') {
-      bottom '0'
+    r("#{component_element_selector}: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'
+      height 50
+      left 0
+      overflow :hidden
+      position :absolute
+      right 0
     }
     
-    rule('.todo-count') {
-      float 'left'
-      text_align 'left'
+    r('.todo-count') {
+      float :left
+      text_align :left
     }
     
-    rule('.todo-count .strong') {
+    r('.todo-count .strong') {
       font_weight '300'
     }
     
-    rule('.filters') {
-      left '0'
-      list_style 'none'
-      margin '0'
-      padding '0'
-      position 'absolute'
-      right '0'
+    r('.filters') {
+      left 0
+      list_style :none
+      margin 0
+      padding 0
+      position :absolute
+      right 0
     }
     
-    rule('.filters li') {
-      display 'inline'
+    r('.filters li') {
+      display :inline
     }
     
-    rule('.filters li a') {
+    r('.filters li a') {
       border '1px solid transparent'
-      border_radius '3px'
-      color 'inherit'
-      margin '3px'
+      border_radius 3
+      color :inherit
+      margin 3
       padding '3px 7px'
-      text_decoration 'none'
-      cursor 'pointer'
+      text_decoration :none
+      cursor :pointer
     }
     
-    rule('.filters li a.selected') {
+    r('.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'
+    r('.clear-completed, html .clear-completed:active') {
+      cursor :pointer
+      float :right
+      line_height 19
+      position :relative
+      text_decoration :none
+      display :none
+    }
+    
+    r('.clear-completed.can-clear-completed, html .clear-completed.can-clear-completed:active') {
+      display :block
     }
     
     media('(max-width: 430px)') {
-      rule('.todo-filters') {
-        height '50px'
+      r(component_element_selector) {
+        height 50
       }
       
-      rule('.filters') {
-        bottom '10px'
+      r('.filters') {
+        bottom 10
       }
     }
   }

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

@@ -4,29 +4,29 @@ class TodoInput
   
   class << self
     def todo_input_styles
-      rule(".#{component_element_class}") {
-        position 'relative'
-        margin '0'
+      r(component_element_selector) {
+        position :relative
+        margin 0
         width '100%'
-        font_size '24px'
-        font_family 'inherit'
-        font_weight 'inherit'
-        line_height '1.4em'
-        color 'inherit'
-        padding '6px'
+        font_size 24
+        font_family :inherit
+        font_weight :inherit
+        line_height 1.4.em
+        color :inherit
+        padding 6
         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'
+        _webkit_font_smoothing :antialiased
       }
       
-      rule(".#{component_element_class}::selection") {
-        background 'red'
+      r("#{component_element_selector}::selection") {
+        background :red
       }
       
-      rule(".#{component_element_class}:focus") {
+      r("#{component_element_selector}:focus") {
         box_shadow '0 0 2px 2px #cf7d7d'
-        outline '0'
+        outline 0
       }
     end
   end

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

@@ -15,10 +15,6 @@ class TodoList
   
   markup {
     main(class: 'main') {
-      style <= [ presenter, :todos,
-                 on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
-               ]
-      
       div(class: 'toggle-all-container') {
         input(class: 'toggle-all', type: 'checkbox')
         
@@ -30,9 +26,9 @@ class TodoList
       }
       
       @todo_ul = ul {
-        class_name <= [presenter, :filter,
-                        on_read: ->(filter) { "todo-list #{filter}" }
-                      ]
+        # class name is data-bound unidirectionally to the presenter filter attribute,
+        # meaning it would automatically get set to its value whenever presenter.filter changes
+        class_name <= [presenter, :filter]
       
         presenter.todos.each do |todo|
           todo_list_item(presenter:, todo:)
@@ -42,61 +38,61 @@ class TodoList
   }
   
   style {
-    rule('.main') {
+    r('.main') {
       border_top '1px solid #e6e6e6'
-      position 'relative'
+      position :relative
       z_index '2'
     }
     
-    rule('.toggle-all') {
-      border 'none'
+    r('.toggle-all') {
+      border :none
       bottom '100%'
-      height '1px'
-      opacity '0'
-      position 'absolute'
+      height 1
+      opacity 0
+      position :absolute
       right '100%'
-      width '1px'
+      width 1
     }
           
-    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'
+    r('.toggle-all+label') {
+      align_items :center
+      display :flex
+      font_size 0
+      height 65
+      justify_content :center
+      left 0
+      position :absolute
+      top -65
+      width 45
     }
     
-    rule('.toggle-all+label:before') {
+    r('.toggle-all+label:before') {
       color '#949494'
       content '"❯"'
       display 'inline-block'
-      font_size '22px'
+      font_size 22
       padding '10px 27px'
       _webkit_transform 'rotate(90deg)'
       transform 'rotate(90deg)'
     }
     
-    rule('.toggle-all:focus+label, .toggle:focus+label') {
+    r('.toggle-all:focus+label, .toggle:focus+label') {
       box_shadow '0 0 2px 2px #cf7d7d'
-      outline '0'
+      outline 0
     }
     
-    rule('.todo-list') {
-      list_style 'none'
-      margin '0'
-      padding '0'
+    r('.todo-list ul') {
+      list_style :none
+      margin 0
+      padding 0
     }
     
-    rule('.todo-list.active li.completed') {
-      display 'none'
+    r('.todo-list ul.active li.completed') {
+      display :none
     }
     
-    rule('.todo-list.completed li.active') {
-      display 'none'
+    r('.todo-list ul.completed li.active') {
+      display :none
     }
   }
 end

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

@@ -15,19 +15,30 @@ class TodoListItem
   
   markup {
     li {
-      class_name <= [ todo, :completed,
-                      on_read: -> { li_class_name(todo) }
-                    ]
-      class_name <= [ todo, :editing,
-                      on_read: -> { li_class_name(todo) }
-                    ]
+      # Data-bind inclusion of `li` `class` `completed` unidirectionally to todo completed attribute,
+      # meaning inclusion of completed class is determined by todo completed boolean attribute.
+      class_name(:completed) <= [todo, :completed]
+      
+      # Data-bind inclusion of `li` `class` `active` unidirectionally to todo completed attribute, negated,
+      # meaning inclusion of active class is determined by todo completed boolean attribute, negated.
+      class_name(:active) <= [todo, :completed, on_read: :!]
+      
+      # Data-bind inclusion of `li` `class` `editing` unidirectionally to todo editing attribute,
+      # meaning inclusion of editing class is determined by todo editing boolean attribute.
+      class_name(:editing) <= [todo, :editing]
       
       div(class: 'view') {
         input(class: 'toggle', type: 'checkbox') {
+          # Data-bind `input` `checked` property bidirectionally to `todo` `completed` attribute
+          # meaning make any changes to the `todo` `completed` attribute value automatically update the `input` `checked` property
+          # and any changes to the `input` `checked` property by the user automatically update the `todo` `completed` attribute value.
+          # `after_write` hook is invoked after writing a new value to the model attribute (`todo` `completed` attribute)
           checked <=> [todo, :completed]
         }
         
         label {
+          # Data-bind `label` inner HTML unidirectionally to `todo.task` (`String` value),
+          # meaning make changes to `todo` `task` attribute automatically update `label` inner HTML.
           inner_html <= [todo, :task]
           
           ondblclick do |event|
@@ -50,111 +61,103 @@ class TodoListItem
     }
   }
   
-  def li_class_name(todo)
-    classes = []
-    classes << 'completed' if todo.completed?
-    classes << 'active' if !todo.completed?
-    classes << 'editing' if todo.editing?
-    classes.join(' ')
-  end
-  
   style {
-    rule('.todo-list li.completed label') {
+    r('.todo-list li.completed label') {
       color '#949494'
       text_decoration 'line-through'
     }
     
-    rule('.todo-list li') {
+    r('.todo-list li') {
       border_bottom '1px solid #ededed'
-      font_size '24px'
-      position 'relative'
+      font_size 24
+      position :relative
     }
     
-    rule('.todo-list li .toggle') {
-      _webkit_appearance 'none'
-      appearance 'none'
-      border 'none'
-      bottom '0'
-      height 'auto'
+    r('.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'
+      opacity 0
+      position :absolute
+      text_align :center
+      top 0
+      width 40
     }
     
-    rule('.todo-list li label') {
+    r('.todo-list li label') {
       color '#484848'
-      display 'block'
+      display :block
       font_weight '400'
       line_height '1.2'
-      min_height '40px'
+      min_height 40
       padding '15px 15px 15px 60px'
       transition 'color .4s'
       word_break 'break-all'
     }
     
-    rule('.todo-list li .toggle+label') {
+    r('.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_position 0
       background_repeat 'no-repeat'
     }
     
-    rule('.todo-list li.completed label') {
+    r('.todo-list li.completed label') {
       color '#949494'
       text_decoration 'line-through'
     }
     
-    rule('.todo-list li .toggle:checked+label') {
+    r('.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'
+    r('.todo-list li.editing') {
+      border_bottom :none
+      padding 0
     }
     
-    rule('.todo-list li.editing input[type=checkbox], .todo-list li.editing label') {
-      opacity '0'
+    r('.todo-list li.editing input[type=checkbox], .todo-list li.editing label') {
+      opacity 0
     }
     
-    rule('.todo-list li .destroy') {
-      bottom '0'
+    r('.todo-list li .destroy') {
+      bottom 0
       color '#949494'
-      display 'none'
-      font_size '30px'
-      height '40px'
+      display :none
+      font_size 30
+      height 40
       margin 'auto 0'
-      position 'absolute'
-      right '10px'
-      top '0'
+      position :absolute
+      right 10
+      top 0
       transition 'color .2s ease-out'
-      width '40px'
+      width 40
     }
     
-    rule('.todo-list li:focus .destroy, .todo-list li:hover .destroy') {
-      display 'block'
+    r('.todo-list li:focus .destroy, .todo-list li:hover .destroy') {
+      display :block
     }
     
-    rule('.todo-list li .destroy:focus, .todo-list li .destroy:hover') {
+    r('.todo-list li .destroy:focus, .todo-list li .destroy:hover') {
       color '#c18585'
     }
     
-    rule('.todo-list li .destroy:after') {
+    r('.todo-list li .destroy:after') {
       content '"×"'
-      display 'block'
+      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'
+      r('.todo-list li .toggle, .toggle-all') {
+        background :none
       }
       
-      rule('.todo-list li .toggle') {
-        height '40px'
+      r('.todo-list li .toggle') {
+        height 40
       }
     }
   }

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

@@ -16,26 +16,26 @@ class TodoMvcFooter
   }
   
   style {
-    rule('footer.info') {
+    r('footer.info') {
       margin '65px auto 0'
       color '#4d4d4d'
-      font_size '11px'
+      font_size 11
       text_shadow '0 1px 0 rgba(255, 255, 255, 0.5)'
-      text_align 'center'
+      text_align :center
     }
     
-    rule('footer.info p') {
+    r('footer.info p') {
       line_height '1'
     }
     
-    rule('footer.info a') {
-      color 'inherit'
-      text_decoration 'none'
+    r('footer.info a') {
+      color :inherit
+      text_decoration :none
       font_weight '400'
     }
     
-    rule('footer.info a:hover') {
-      text_decoration 'underline'
+    r('footer.info a:hover') {
+      text_decoration :underline
     }
   }
 end

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

@@ -37,41 +37,41 @@ class TodoMvc
   }
   
   style {
-    rule('body, button, html') {
-      margin '0'
-      padding '0'
+    r('body, button, html') {
+      margin 0
+      padding 0
     }
     
-    rule('button') {
-      _webkit_font_smoothing 'antialiased'
-      _webkit_appearance 'none'
-      appearance 'none'
-      background 'none'
-      border '0'
-      color 'inherit'
-      font_family 'inherit'
+    r('button') {
+      _webkit_font_smoothing :antialiased
+      _webkit_appearance :none
+      appearance :none
+      background :none
+      border 0
+      color :inherit
+      font_family :inherit
       font_size '100%'
-      font_weight 'inherit'
-      vertical_align 'baseline'
+      font_weight :inherit
+      vertical_align :baseline
     }
     
-    rule('.todoapp') {
+    r('.todoapp') {
       background '#fff'
       margin '130px 0 40px 0'
-      position 'relative'
+      position :relative
       box_shadow '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
     }
   
     media('screen and (-webkit-min-device-pixel-ratio:0)') {
-      rule('body') {
+      r('body') {
         font "14px 'Helvetica Neue', Helvetica, Arial, sans-serif"
-        line_height '1.4em'
+        line_height 1.4.em
         background '#f5f5f5'
         color '#111111'
-        min_width '230px'
-        max_width '550px'
+        min_width 230
+        max_width 550
         margin '0 auto'
-        _webkit_font_smoothing 'antialiased'
+        _webkit_font_smoothing :antialiased
         font_weight '300'
       }
     }