glimmer-dsl-web 0.4.2 → 0.4.3

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'
       }
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Andy Maleh
@@ -299,6 +299,7 @@ files:
 - lib/glimmer/data_binding/element_binding.rb
 - lib/glimmer/dsl/web/a_expression.rb
 - lib/glimmer/dsl/web/bind_expression.rb
+- lib/glimmer/dsl/web/class_name_inclusion_data_binding.rb
 - lib/glimmer/dsl/web/component_expression.rb
 - lib/glimmer/dsl/web/content_data_binding_expression.rb
 - lib/glimmer/dsl/web/data_binding_expression.rb