glimmer-dsl-opal 0.0.7 → 0.0.8

data/VERSION

@@ -1 +1 @@
-0.0.7
+0.0.8

data/lib/glimmer-dsl-opal.rb

@@ -1,5 +1,7 @@
 require 'opal'
 require 'opal-async'
+require 'browser'
+require 'browser/effects'
 require 'glimmer'
 
 GLIMMER_DSL_OPAL_ROOT = File.expand_path('../..', __FILE__)

data/lib/glimmer/data_binding/ext/observable_model.rb

@@ -9,7 +9,7 @@ module Glimmer
     # TODO prefix utility methods with double-underscore
     module ObservableModel
       include Observable
-      include Glimmer
+#       include Glimmer
 
       def add_property_writer_observers(property_name)
         property_writer_name = "#{property_name}="

data/lib/glimmer/data_binding/table_items_binding.rb

@@ -0,0 +1,67 @@
+require 'glimmer/data_binding/observable_array'
+require 'glimmer/data_binding/observable_model'
+require 'glimmer/data_binding/observable'
+require 'glimmer/data_binding/observer'
+require 'glimmer/opal/table_proxy'
+require 'glimmer/opal/table_item'
+
+module Glimmer
+  module DataBinding
+    class TableItemsBinding
+      include DataBinding::Observable
+      include DataBinding::Observer
+
+      def initialize(parent, model_binding, column_properties)
+        @last_model_collection = nil
+        @table = parent
+        @model_binding = model_binding
+        @column_properties = column_properties
+        if @table.respond_to?(:column_properties=)
+          @table.column_properties = @column_properties
+        ##else # assume custom widget
+        ##  @table.body_root.column_properties = @column_properties
+        end
+        call(@model_binding.evaluate_property)
+        model = model_binding.base_model
+        observe(model, model_binding.property_name_expression)
+        ##@table.on_widget_disposed do |dispose_event| # doesn't seem needed within Opal
+        ##  unregister_all_observables
+        ##end
+      end
+
+      def call(new_model_collection=nil)
+        if new_model_collection and new_model_collection.is_a?(Array)
+          observe(new_model_collection, @column_properties)
+          @model_collection = new_model_collection
+        end
+        populate_table(@model_collection, @table, @column_properties)
+        sort_table(@model_collection, @table, @column_properties)
+      end
+      
+      def populate_table(model_collection, parent, column_properties)
+        return if model_collection&.sort_by(&:hash) == @last_model_collection&.sort_by(&:hash)
+        @last_model_collection = model_collection
+        # TODO improve performance
+        selected_table_item_models = parent.selection.map(&:get_data)
+        parent.remove_all
+        model_collection.each do |model|
+          table_item = Glimmer::Opal::TableItem.new(parent)
+          for index in 0..(column_properties.size-1)
+            table_item.set_text(index, model.send(column_properties[index]).to_s)
+          end
+          table_item.set_data(model)
+        end
+        selected_table_items = parent.search {|item| selected_table_item_models.include?(item.get_data) }
+        selected_table_items = [parent.items.first] if selected_table_items.empty? && !parent.items.empty?
+        parent.selection = selected_table_items unless selected_table_items.empty?
+        parent.redraw
+      end
+      
+      def sort_table(model_collection, parent, column_properties)
+        return if model_collection == @last_model_collection
+        parent.items = parent.items.sort_by { |item| model_collection.index(item.get_data) }
+        @last_model_collection = model_collection
+      end      
+    end
+  end
+end

data/lib/glimmer/dsl/opal/column_properties_expression.rb

@@ -0,0 +1,22 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      # Responsible for providing a readable keyword (command symbol) to capture
+      # and return column properties for use in TreeItemsDataBindingCommandHandler
+      class ColumnPropertiesExpression < StaticExpression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'column_properties' and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::TableProxy)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          args
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/dsl.rb

@@ -24,6 +24,10 @@ require 'glimmer/dsl/opal/async_exec_expression'
 require 'glimmer/dsl/opal/observe_expression'
 require 'glimmer/dsl/opal/layout_data_expression'
 require 'glimmer/dsl/opal/list_selection_data_binding_expression'
+require 'glimmer/dsl/opal/table_expression'
+require 'glimmer/dsl/opal/table_column_expression'
+require 'glimmer/dsl/opal/table_items_data_binding_expression'
+require 'glimmer/dsl/opal/column_properties_expression'
 
 module Glimmer
   module DSL
@@ -32,6 +36,7 @@ module Glimmer
        Opal,
        %w[
          widget_listener
+         table_items_data_binding
          combo_selection_data_binding
          list_selection_data_binding
          data_binding

data/lib/glimmer/dsl/opal/table_column_expression.rb

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/table_column'
+
+module Glimmer
+  module DSL
+    module Opal
+      class TableColumnExpression < StaticExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::TableColumn.new(parent, args)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/table_expression.rb

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class TableExpression < StaticExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::TableProxy.new(parent, args)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/table_items_data_binding_expression.rb

@@ -0,0 +1,29 @@
+require 'glimmer/dsl/expression'
+require 'glimmer/data_binding/model_binding'
+require 'glimmer/data_binding/table_items_binding'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      #Depends on BindCommandHandler and TableColumnPropertiesDataBindingCommandHandler
+      class TableItemsDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == "items" and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::TableProxy) and
+            args.size == 2 and
+            args[0].is_a?(DataBinding::ModelBinding) and
+            args[0].evaluate_property.is_a?(Array) and
+            args[1].is_a?(Array)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          model_binding = args[0]
+          column_properties = args[1]
+          DataBinding::TableItemsBinding.new(parent, model_binding, column_properties)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/opal/div_proxy.rb

@@ -10,6 +10,13 @@ module Glimmer
         @layout = GridLayoutProxy.new(self, [])
       end
       
+      def redraw
+        super()
+        @children.each do |child|
+          add_child(child) # TODO think of impact of this on performance, and of other alternatives
+        end
+      end
+      
       def dom
         div_id = id
         div_style = css

data/lib/glimmer/opal/document_proxy.rb

@@ -59,10 +59,6 @@ module Glimmer
                 padding-left: 10px;
                 padding-right: 10px;
               }
-              li.selected-list-item {
-                background: rgb(80, 116, 211);
-                color: white;
-              }
               li.empty-list-item {
                 color: transparent;
               }
@@ -143,7 +139,6 @@ module Glimmer
               .close {
                 color: #aaaaaa;
                 float: right;
-#                 font-size: 18px;
                 font-weight: bold;
                 margin: 5px;
               }
@@ -153,7 +148,21 @@ module Glimmer
                 color: #000;
                 text-decoration: none;
                 cursor: pointer;
-              }              
+              }
+              
+              .selected {
+                background: rgb(80, 116, 211);
+                color: white;
+              }
+              
+              table {
+                border-spacing: 0;
+              }
+              
+              table tr th,td {
+                cursor: default;
+              }
+
             </style>
             CSS
           }

data/lib/glimmer/opal/element_proxy.rb

@@ -18,7 +18,7 @@ module Glimmer
       end
 
       def add_child(child)
-#         return if @children.include?(child) # TODO consider adding an option to enable this if needed to prevent dom repetition
+#         return if @children.include?(child) # TODO consider adding an option to enable this if needed to prevent dom repetition        
         @children << child
         dom << child.dom
       end
@@ -36,9 +36,8 @@ module Glimmer
         else
           dom
         end
-        @children.each do |child|
+        @children.each do |child|          
           child.redraw
-          add_child(child)
         end
       end
       

data/lib/glimmer/opal/layout_data_proxy.rb

@@ -4,7 +4,13 @@ module Glimmer
   module Opal
     class LayoutDataProxy
       include PropertyOwner
-      attr_reader :parent, :args, :horizontal_alignment, :grab_excess_horizontal_space
+      attr_reader :parent, 
+                  :args, 
+                  :horizontal_alignment, 
+                  :vertical_alignment, 
+                  :grab_excess_horizontal_space,
+                  :grab_excess_vertical_space,
+                  :height_hint
     
       def initialize(parent, args)
         @parent = parent
@@ -12,16 +18,31 @@ module Glimmer
         reapply
       end
 
+      def height_hint=(height_hint)
+        @height_hint = height_hint
+        reapply
+      end
+
       def horizontal_alignment=(horizontal_alignment)
         @horizontal_alignment = horizontal_alignment
         reapply
       end
       
+      def vertical_alignment=(vertical_alignment)
+        @vertical_alignment = vertical_alignment
+        reapply
+      end
+      
       def grab_excess_horizontal_space=(grab_excess_horizontal_space)
         @grab_excess_horizontal_space = grab_excess_horizontal_space
         reapply
       end
 
+      def grab_excess_vertical_space=(grab_excess_vertical_space)
+        @grab_excess_vertical_space = grab_excess_vertical_space
+        reapply
+      end
+
       def reapply
 #         @parent.css = <<~CSS
 #         CSS

data/lib/glimmer/opal/list_proxy.rb

@@ -66,7 +66,7 @@ module Glimmer
           ul(id: list_id, style: list_style) {
             list_items.to_a.each_with_index do |item, index|
               li_class = ''
-              li_class += ' selected-list-item' if list_selection.include?(item)
+              li_class += ' selected' if list_selection.include?(item)
               li_class += ' empty-list-item' if item == ITEM_EMPTY
               li(class: li_class) {
                 item

data/lib/glimmer/opal/tab_folder.rb

@@ -1,4 +1,4 @@
-require 'glimmer/opal/div_proxy'
+require 'glimmer/opal/element_proxy'
 
 module Glimmer
   module Opal
@@ -15,7 +15,14 @@ module Glimmer
         if @children.size == 1
           child.show
         end
-      end      
+      end
+      
+      def redraw
+        super()
+        @children.each do |child|
+          add_child(child) # TODO think of impact of this on performance
+        end
+      end
       
       def hide_all_tab_content
         @children.each(&:hide)

data/lib/glimmer/opal/tab_item.rb

@@ -1,4 +1,4 @@
-require 'glimmer/opal/input_proxy'
+require 'glimmer/opal/div_proxy'
 
 module Glimmer
   module Opal

data/lib/glimmer/opal/table_column.rb

@@ -0,0 +1,50 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class TableColumn < ElementProxy
+      include Glimmer
+      attr_reader :text, :width      
+      
+      def text=(value)
+        @text = value
+        redraw
+      end
+    
+      def width=(value)
+        @width = value
+        redraw
+      end
+      
+      def css
+        <<~CSS
+          width: #{width};
+        CSS
+      end
+    
+      def name
+        'th'
+      end
+      
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      end      
+      
+      def dom
+        table_column_text = text
+        table_column_id = id
+        table_column_id_style = css
+        table_column_css_classes = css_classes
+        @dom ||= DOM {
+          th(id: table_column_id, style: table_column_id_style, class: table_column_css_classes.to_a.join(' ')) {
+            table_column_text
+          }
+        }
+      end      
+    end
+  end
+end

data/lib/glimmer/opal/table_item.rb

@@ -0,0 +1,136 @@
+  require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class TableItem < ElementProxy
+      attr_reader :data
+      
+      def initialize(parent, args)
+        super(parent, args)
+        on_widget_selected { |event|
+          parent.select(parent.index_of(self), event.meta?)
+        }
+      end
+      
+      def get_text(index)
+        text_array[index]
+      end
+      
+      def set_text(index, text_value)
+        text_array[index] = text_value
+        redraw
+      end
+      
+      def text_array
+        @text_array ||= []
+      end
+
+      def get_data(key = nil)
+        if key.nil?
+          @data
+        else
+          data_hash[key]
+        end
+      end
+      
+      def set_data(key = nil, data_value)
+        if key.nil?
+          @data = data_value
+        else
+          data_hash[key] = data_value
+        end
+      end
+      
+      def data_hash
+        @data_hash ||= {}
+      end
+      
+      def name
+        'tr'
+      end
+      
+      def edit(column_index)
+        return if @edit_column_index == column_index.to_i
+        parent.select(parent.index_of(self), false)
+        @edit_column_index = column_index.to_i
+        redraw
+      end
+      
+      def on_widget_selected(&block)
+        event = 'click'
+        delegate = $document.on(event, selector, &block)
+        EventListenerProxy.new(element_proxy: self, event: event, selector: selector, delegate: delegate)
+      end
+      
+      def max_column_width(column_index)
+        parent.dom.css("tr td:nth-child(#{column_index + 1})").first.width
+      end
+      
+      def dom
+        table_item_id = id
+        table_item_id_style = css
+        table_item_css_classes = css_classes
+        table_item_selection = parent.selection.include?(self)
+        if table_item_selection
+          table_item_css_classes << 'selected'
+        else
+          table_item_css_classes.delete('selected')
+        end
+        table_item_text_array = text_array
+        table_item_edit_column_index = @edit_column_index
+        table_item_max_width = max_column_width(table_item_edit_column_index) if table_item_edit_column_index
+        table_item_edit_handler = lambda do |event, cancel = false|
+          Async::Task.new do
+            text_value = event.target.value
+            edit_property = parent.column_properties[table_item_edit_column_index]
+            edit_model = get_data
+            if !cancel && edit_model.send(edit_property) != text_value
+              edit_model.send("#{edit_property}=", text_value)
+              set_text(table_item_edit_column_index, text_value)
+            end
+            @edit_column_index = nil
+            redraw
+          end
+        end
+        table_item_edit_cancel_handler = lambda do |event|           
+          Async::Task.new do
+            table_item_edit_handler.call(event, true)
+          end
+        end   
+        table_item_edit_key_handler = lambda do |event|
+          Async::Task.new do
+            if event.code == 13
+              table_item_edit_handler.call(event)
+            elsif event.code == 27
+              table_item_edit_cancel_handler.call(event)
+            end
+          end
+        end
+        @dom ||= DOM {
+          tr(id: table_item_id, style: table_item_id_style, class: table_item_css_classes.to_a.join(' ')) {
+            table_item_text_array.each_with_index do |table_item_text, column_index|
+              td('data-column-index' => column_index) {
+                if table_item_edit_column_index == column_index                  
+                  input(type: 'text', value: table_item_text, style: "max-width: #{table_item_max_width - 11}px;")
+                else
+                  table_item_text
+                end
+              }
+            end
+          }
+        }.tap do |the_dom|
+          if table_item_edit_column_index
+            table_item_input = the_dom.css("td:nth-child(#{table_item_edit_column_index + 1}) input").first
+            if table_item_input
+              Async::Task.new do
+                table_item_input.focus
+                table_item_input.on('keyup', &table_item_edit_key_handler)
+                table_item_input.on('focusout', &table_item_edit_cancel_handler)                
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end