glimmer-dsl-web 0.4.2 → 0.4.4

data/lib/glimmer/web/element_proxy.rb

@@ -144,6 +144,7 @@ module Glimmer
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
       REGEX_STYLE_SUB_PROPERTY = /^(style)_(.*)$/
+      REGEX_CLASS_NAME_SUB_PROPERTY = /^(class_name)_(.*)$/
       
       attr_reader :keyword, :parent, :parent_component, :component, :args, :options, :children, :enabled, :foreground, :background, :removed, :rendered
       alias rendered? rendered
@@ -309,6 +310,40 @@ module Glimmer
         end
       end
       
+      def class_name_included(one_class_name, value = nil)
+        if rendered?
+          if value.nil?
+            class_name.include?(one_class_name)
+          else
+            if value
+              add_css_class(one_class_name)
+            else
+              remove_css_class(one_class_name)
+            end
+          end
+        else
+          enqueue_args = ['class_name_included', one_class_name]
+          enqueue_args << value unless value.nil?
+          enqueue_post_render_method_call(*enqueue_args)
+        end
+      end
+      
+      def style(value = null)
+        if rendered?
+          if value.nil?
+            dom_element.attr('style')
+          else
+            value = normalize_style(value)
+            dom_element.attr('style', value)
+          end
+        else
+          enqueue_args = ['style']
+          enqueue_args << value unless value.nil?
+          enqueue_post_render_method_call(*enqueue_args)
+        end
+      end
+      alias style= style
+      
       def style_property(property, value = nil)
         if rendered?
           property = property.to_s.gsub('_', '-')
@@ -432,7 +467,8 @@ module Glimmer
           html_options["data-#{data_normalized_attribute}"] = html_options.delete(attribute)
         end
         html_options[:class] ||= ''
-        html_options[:class] = "#{html_options[:class]} #{body_class}".strip
+        html_options[:class] = "#{normalize_class_name(html_options.delete('class') || html_options.delete(:class))} #{body_class}".strip
+        html_options[:style] = normalize_style(html_options.delete('style') || html_options.delete(:style))
         html_options['data-turbo'] = 'false' if parent.nil?
         html_options
       end
@@ -461,15 +497,16 @@ module Glimmer
         @element_id ||= "element-#{ElementProxy.next_id_number_for(name)}"
       end
       
-      def class_name=(value)
+      def class_name=(*values)
         if rendered?
-          values = value.is_a?(Array) ? value : [value.to_s]
+          values = normalize_class_name(values).split(' ')
           new_class_name = (base_css_classes + values).uniq.compact.join(' ')
           dom_element.prop('className', new_class_name)
         else
-          enqueue_post_render_method_call('class_name=', value)
+          enqueue_post_render_method_call('class_name=', *values)
         end
       end
+      alias classes= class_name=
       
       def add_css_class(css_class)
         if rendered?
@@ -657,14 +694,22 @@ module Glimmer
           (!dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)) ||
           (!dom_element.prop(unnormalized_property_name).nil? && !dom_element.prop(unnormalized_property_name).is_a?(Proc)) ||
           method_name.to_s.start_with?('on_') ||
-          method_name.to_s.start_with?('style_')
+          method_name.to_s.start_with?('style_') ||
+          method_name.to_s.start_with?('class_name_')
       end
       
       def method_missing(method_name, *args, &block)
         # TODO consider doing more correct checking of availability of properties/methods using native ticks
         property_name = property_name_for(method_name)
         unnormalized_property_name = unnormalized_property_name_for(method_name)
-        if method_name.to_s.start_with?('style_')
+        if method_name.to_s.start_with?('class_name_')
+          property, sub_property = method_name.to_s.match(REGEX_CLASS_NAME_SUB_PROPERTY).to_a.drop(1)
+          if args.empty?
+            class_name_included(sub_property)
+          else
+            class_name_included(sub_property, args.first)
+          end
+        elsif method_name.to_s.start_with?('style_')
           property, sub_property = method_name.to_s.match(REGEX_STYLE_SUB_PROPERTY).to_a.drop(1)
           sub_property = sub_property.gsub('_', '-')
           if args.empty?
@@ -905,6 +950,26 @@ module Glimmer
         SWT_CURSOR_TO_CSS_CURSOR_MAP[@cursor]
       end
       
+      def normalize_class_name(class_name_value)
+        if class_name_value.is_a?(Array)
+          class_name_value.map(&:to_s).join(' ')
+        else
+          class_name_value.to_s
+        end
+      end
+      
+      def normalize_style(style_value)
+        if style_value.is_a?(Hash)
+          style_value.reduce('') do |output, (key, value)|
+            key = key.to_s.gsub('_', '-')
+            value = value.px if value.is_a?(Numeric)
+            output += "#{key}: #{value}; "
+          end
+        else
+          style_value.to_s
+        end
+      end
+      
     end
   end
 end

data/lib/glimmer-dsl-web/samples/hello/hello_style.rb

@@ -83,9 +83,8 @@ class StyledButton
     button {
       inner_text <= [button_model, :text, computed_by: :pushed]
       
-      class_name <= [button_model, :pushed,
-                      on_read: ->(pushed) { pushed ? 'pushed' : 'pulled' }
-                    ]
+      class_name(:pushed) <= [button_model, :pushed]
+      class_name(:pulled) <= [button_model, :pushed, on_read: :!]
       
       style(:width) <= [button_model, :width, on_read: :px]
       style(:height) <= [button_model, :height, on_read: :px]
@@ -99,22 +98,22 @@ class StyledButton
     }
   }
   
-  style {"
-    .#{component_element_class} {
-      font-family: Courrier New, Courrier;
-      border-radius: 5px;
-      border-width: 17px;
-      margin: 5px;
+  style {
+    r(component_element_selector) {
+      font_family 'Courrier New, Courrier'
+      border_radius 5
+      border_width 17
+      margin 5
     }
     
-    .#{component_element_class}.pulled {
-      border-style: outset;
+    r("#{component_element_selector}.pulled") {
+      border_style :outset
     }
     
-    .#{component_element_class}.pushed {
-      border-style: inset;
+    r("#{component_element_selector}.pushed") {
+      border_style :inset
     }
-  "}
+  }
 end
 
 class StyledButtonRangeInput
@@ -172,22 +171,22 @@ class HelloStyle
     }
   }
   
-  style {"
-    .styled-button-form {
-      padding: 20px;
-      display: inline-grid;
-      grid-template-columns: auto auto;
+  style {
+    r('.styled-button-form') {
+      padding 20
+      display 'inline-grid'
+      grid_template_columns 'auto auto'
     }
     
-    .styled-button-form label, input {
-      display: block;
-      margin: 5px 5px 5px 0;
+    r('.styled-button-form label, input') {
+      display :block
+      margin '5px 5px 5px 0'
     }
     
-    .#{component_element_class} .styled-button {
-      display: block;
+    r("#{component_element_selector} .styled-button") {
+      display :block
     }
-  "}
+  }
 end
 
 Document.ready? do

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

@@ -6,11 +6,16 @@ class EditTodoInput < TodoInput
   
   markup { # evaluated against instance as a smart default convention
     input { |edit_input|
-      style <= [ todo, :editing,
-                 on_read: ->(editing) { editing ? '' : 'display: none;' },
-                 after_read: -> { edit_input.focus if todo.editing? }
-               ]
+      # Data-bind inclusion of `li` `class` `editing` unidirectionally to todo editing attribute,
+      # meaning inclusion of editing class is determined by todo editing boolean attribute.
+      # `after_read` hook will have `input` grab keyboard focus when editing todo.
+      class_name(:editing) <= [ todo, :editing,
+                                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|
@@ -31,17 +36,21 @@ class EditTodoInput < TodoInput
   style { # evaluated against class as a smart default convention (common to all instances)
     todo_input_styles
     
-    rule("*:has(> .#{component_element_class})") {
-      position 'relative'
+    r("*:has(> #{component_element_selector})") {
+      position :relative
     }
     
-    rule(".#{component_element_class}") {
-      position 'absolute'
-      display 'block'
+    r(component_element_selector) {
+      position :absolute
+      display :none
       width 'calc(100% - 43px)'
       padding '12px 16px'
       margin '0 0 0 43px'
-      top '0'
+      top 0
+    }
+    
+    r("#{component_element_selector}.editing") {
+      display :block
     }
   }
 end

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

@@ -14,16 +14,16 @@ class NewTodoForm
   }
   
   style {
-    rule('.header h1') {
+    r('.header h1') {
       color '#b83f45'
-      font_size '80px'
+      font_size 80
       font_weight '200'
-      position 'absolute'
-      text_align 'center'
-      _webkit_text_rendering 'optimizeLegibility'
-      _moz_text_rendering 'optimizeLegibility'
-      text_rendering 'optimizeLegibility'
-      top '-140px'
+      position :absolute
+      text_align :center
+      _webkit_text_rendering :optimizeLegibility
+      _moz_text_rendering :optimizeLegibility
+      text_rendering :optimizeLegibility
+      top -140
       width '100%'
     }
   }

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

@@ -5,6 +5,9 @@ class NewTodoInput < TodoInput
   
   markup { # evaluated against instance as a smart convention
     input(placeholder: "What needs to be done?", autofocus: "") {
+      # Data-bind `input` `value` property bidirectionally to `presenter.new_todo` `task` attribute
+      # meaning make any changes to the new todo task automatically update the input value
+      # and any changes to the input value by the user automatically update the new todo task value
       value <=> [presenter.new_todo, :task]
     
       onkeyup do |event|
@@ -16,16 +19,16 @@ class NewTodoInput < TodoInput
   style { # evaluated against class as a smart convention (common to all instances)
     todo_input_styles
     
-    rule(".#{component_element_class}") { # NewTodoInput has component_element_class as 'new-todo-input'
+    r(component_element_selector) { # NewTodoInput has component_element_class as 'new-todo-input'
       padding '16px 16px 16px 60px'
-      height '65px'
-      border 'none'
+      height 65
+      border :none
       background 'rgba(0, 0, 0, 0.003)'
       box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
     }
     
-    rule(".#{component_element_class}::placeholder") {
-      font_style 'italic'
+    r("#{component_element_selector}::placeholder") {
+      font_style :italic
       font_weight '400'
       color 'rgba(0, 0, 0, 0.4)'
     }

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