vdom-rb 0.1.0

data/opal/vdom/registry.rb

@@ -0,0 +1,60 @@
+puts "#{__FILE__}[#{__LINE__}] requiring vdom stuff"
+
+require 'singleton'
+require 'vdom/instance'
+
+module VDOM
+  class Registry
+
+    include Singleton
+    include Enumerable
+
+    def initialize
+      @instances = Array.new
+    end
+
+    def add(instance)
+      # `console.log(#{"#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}(instance=#{instance})"})`
+      if @instances.find_index(instance)
+        fail "#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}: virtual DOM instance with id #{instance.id} already registered"
+      end
+      @instances << instance
+    end
+
+    def delete(instance)
+       @instances ? @instances.delete(instance) : nil
+    end
+
+    def each(&block)
+      @instances.each(&block)
+    end
+
+    def size
+      @instances.size
+    end
+
+    # Render the DOM with given id, or
+    # all DOMs if dom id is nil.
+    def render(dom_id = nil)
+      result = false
+      # `console.log(#{"#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}(dom_id=#{dom_id}): @instances.size=#{@instances.size} "})`
+      each { |e|
+        if dom_id.nil? || e.id == dom_id
+          # `console.log(#{"#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}(dom_id=#{dom_id}): calling #{e.class.name}#render"})`
+          e.render
+          result = true
+        end
+      }
+      # `console.log(#{"#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}(dom_id=#{dom_id}): @instances.size=#{@instances.size} result=#{result} "})`
+      result
+    end
+
+    def shutdown
+      each { |e| e.shutdown }
+    end
+
+  end
+
+  Instances = VDOM::Registry.instance
+end
+

data/opal/vdom/renderer.rb

@@ -0,0 +1,164 @@
+require 'vdom/component'
+
+module VDOM
+  module Renderer
+
+    module_function
+
+    def node(tag_name, attributes: nil, content: nil, model: nil, dom_id: nil)
+      VDOM::Node.new(tag_name, attributes: attributes, content: content, model: model, dom_id: dom_id)
+    end
+
+    def state_component(content_or_state)
+      VDOM::StateComponent.new(content_or_state)
+    end
+
+    def icon(name, callback: nil, css: nil, float: nil, margins: nil, style: nil)
+      _style = {
+        text_align: 'center',
+        vertical_align: 'middle',
+        color: 'inherit',
+        background_color: 'inherit',
+        cursor: 'pointer',
+      }
+      if margins
+        _style =_style.merge(margins)
+      elsif float
+        _style = _style.merge(
+          case float.to_sym
+          when :left
+            { margin_right: '0.5em' } # { margin_top: '0.2em', margin_right: '0.5em' }
+          when :right
+            { margin_left: '0.5em' } # { margin_top: '0.2em', margin_right: '0.5em' }
+          else
+             {  } # { margin_top: '0.2em', margin_right: '0.5em' }
+          end
+        )
+      end
+      # arg style overrides any defaults
+      _style = _style.merge(style) if style
+      _class = iconify(name)
+      _class = "#{_class} #{css}" if css
+      _class = "#{_class} pull-#{float}" if float
+      attributes = {
+        class: _class,
+        style: _style
+      }.merge(
+        callback ? { onclick: callback } : {}
+      )
+      node(:span, attributes: attributes)
+    end
+
+    def icon_with_anchor(icon_name, href, float: nil, margins: nil, icon_css: nil, anchor_css: nil, icon_style: nil, anchor_style: nil)
+      _icon = icon(icon_name, css: icon_css, float: float, margins: margins, style: icon_style)
+      node(:a,
+        attributes: {
+          href: href,
+          style: anchor_style,
+          class: anchor_css || '',
+        },
+        content: _icon
+      )
+    end
+
+    def add_icon(href)
+      icon_with_anchor(
+        :plus_sign,
+        href,
+        icon_style: { color: 'lightgreen'}
+      )
+    end
+
+    def delete_icon(callback)
+      icon(
+        :remove_sign,
+        callback: callback,
+        style: {color: 'red'}
+      )
+    end
+
+    def plain_anchor(content, href)
+      node(:a,
+        attributes: {
+          href: href,
+          style: 'color: inherit; background-color: inherit'
+        },
+        content: content
+      )
+    end
+
+    def sortable(callback, direction: 0, content: nil)
+      if direction != 0
+        node(:div,
+          attributes: {
+            onclick: callback,
+            style: { cursor: 'pointer' }
+          },
+          content: arrify(content) + [
+            node(:span,
+              attributes: {
+                class: "glyphicon glyphicon-triangle-#{direction > 0 ? 'top' : 'bottom'}",
+                style: {
+                   font_size: 'smaller',
+                   margin_left: '0.5em',
+                   vertical_align: 'middle',
+                   color: 'inherit',
+                   background_color: 'inherit',
+                }
+              }
+            )
+          ]
+        )
+      else
+        node(:div,
+          attributes: {
+            onclick: callback,
+            style: { cursor: 'pointer' }
+          },
+          content: content
+        )
+      end
+    end
+
+    def collapsible(callback, collapsed: false, content: nil)
+      node(:div,
+        attributes: {
+          onclick: callback,
+          style: { cursor: 'pointer' }
+        },
+        content: [
+          node(:span,
+            attributes: {
+              class: "glyphicon glyphicon-menu-#{collapsed ? 'down' : 'up'} pull-left",
+              style: {
+                font_size: 'smaller',
+                margin_right: '0.5em',
+                vertical_align: 'middle',
+                color: 'inherit',
+                background_color: 'inherit',
+              }
+            }
+          )
+        ] + arrify(content)
+      )
+    end
+
+    def arrify(obj)
+      if obj
+        if Enumerable === obj
+          obj.to_a
+        else
+          [obj]
+        end
+      else
+        []
+      end
+    end
+
+    # TODO: generalize from bootstrap
+    def iconify(icon_name)
+      "glyphicon glyphicon-#{icon_name.to_s.gsub('_', '-')}"
+    end
+
+  end
+end

data/opal/vdom/table.rb

@@ -0,0 +1,500 @@
+require 'vdom/component'
+require 'vdom/renderer'
+require 'vdom/content'
+require 'vdom/util'
+
+module VDOM
+  
+  class TableRow < VDOM::StateComponent
+    include VDOM::Renderer
+    include VDOM::Util
+
+    def initialize(state)
+      super(state)
+    end
+  
+    def table;    state[:table]    end
+    def section;  state[:section]  end
+    def index;    state[:index]    end
+  
+    def render
+      # debug __FILE__, __LINE__,  __method__, "section=#{section} model_index [#{index}]"
+      node(
+        :tr,
+        attributes: table.row_attributes(section, index),
+        content: cells
+      )
+    end
+  
+    def cells
+      _table = table
+      _section = section
+      _is_head = _section == :head
+      # debug __FILE__, __LINE__,  __method__, "section=#{section} index=#{index} "
+      _row_model = _table.row_model(section, index)
+      # debug __FILE__, __LINE__,  __method__, "section=#{section} index=#{index} cust=#{_row_model.class} #{_row_model.to_h}"
+      _table.visible_columns.map do |column|
+        content = column.section_content(_section)
+        if Content === content
+          content, attributes = content.value_and_attributes(context: _row_model)
+          # debug __FILE__, __LINE__,  __method__, "section=#{section} column=#{column.id} content=#{content}"
+        end
+        if _is_head && column.sort?
+          content = Renderer.sortable(
+            column.sort_callback,
+            direction: _table.sort_column_id == column.id ? _table.sort_order : 0,
+            content: content
+          )
+        end
+        tag_name = _is_head ? 'th' : 'td'
+        node(tag_name, attributes: attributes, content: content)
+      end
+    end
+  
+  end
+  
+  class TableCaption < VDOM::StateComponent
+    include VDOM::Renderer
+    include VDOM::Util
+  
+    def initialize(state)
+      super(state)
+    end
+  
+    def table
+      state[:table]
+    end
+  
+    def render
+      # debug __FILE__, __LINE__,  __method__, "CAPTION"
+      content = table.caption_content
+      content = if VDOM::Content === content
+        content.node(:caption, attributes: attributes, context: state[:table])
+      else
+        node(
+          :h3,
+          attributes: table.caption_attributes,
+          content: content
+        )
+      end
+      node(
+        :caption,
+        attributes: table.caption_attributes,
+        content: content
+      )
+    end
+  end
+  
+  class TableSection < VDOM::StateComponent
+    include VDOM::Renderer
+  
+    def initialize(state)
+      super(state)
+    end
+  
+    def table;      state[:table]       end
+    def section;    state[:section]     end
+    def row_states; state[:row_states]  end
+  
+    def render
+      # debug __FILE__, __LINE__,  __method__, "@section=#{section}"
+      node(
+        "t#{section}",
+        attributes: table.section_attributes(section),
+        content: rows
+      )
+    end
+  
+    def rows
+      row_states.map do |row_state|
+        TableRow.new(row_state)
+      end
+    end
+  end
+  
+  class Table < VDOM::StateComponent
+    include VDOM::Util
+  
+    # TODO: other than bootstrap, ...
+    DEFAULT_CSS = 'table table-condensed table-bordered table-hover'
+    DEFAULT_STYLE = {}
+  
+    # :css,               # table css class string or nil
+    # :style,             # table style hash or nil
+    # :caption_content,   # string or ComponentSpec with tag => 'caption'
+    # :head_rows,         # Proc or array of objects or nil
+    # :body_rows,         # Proc or array of objects or nil
+    # :foot_rows,         # Proc or array of objects or nil
+    # :sort_column_id,    # default sort column or nil
+    # :sort_order,        # nil, 1 or -1
+    # :accordion,         # whether table has master column which can be collapsed
+    # :context,           # something meaningful to column content procs or nil
+    # :reactive           # is the table reactive, default false
+  
+    attr_reader :sort_column_id, :sort_column, :sort_orders, :sort_order
+    attr_reader :accordion
+    attr_reader :css
+    attr_reader :style
+    attr_reader :caption_content
+    attr_reader :context
+    attr_reader :section_ids
+    attr_reader :render_count
+  
+    def initialize(**options)
+      # debug __FILE__, __LINE__,  __method__, "options: #{options.class.name}"
+  
+      init_sections(options)
+  
+      # debug __FILE__, __LINE__,  __method__
+      @raw_columns = options[:columns]
+      @context = options[:context]
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_caption(options)
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_css_style(options)
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_row_sources(options)
+      init_row_models
+  
+      # debug __FILE__, __LINE__,  __method__
+      @initial_sort_column_id = options[:sort_column_id]
+      @initial_sort_order = options[:sort_order]
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_visibility
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_sorting
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_accordion(options)
+  
+      # debug __FILE__, __LINE__,  __method__
+      init_states
+  
+      # debug __FILE__, __LINE__,  __method__, "_state=#{_state}"
+      super(table_state)
+  
+      @render_count = 0
+    end
+  
+    def table_state
+      State.new(table: self)
+    end
+  
+    def columns
+      unless @columns
+        @columns = if Proc === @raw_columns
+          @raw_columns.call
+        else
+          @raw_columns
+        end
+      end
+      @columns
+    end
+  
+    def render
+      @render_count += 1
+      node(
+        :table,
+        attributes: { class: css, style: style },
+        content: [caption_component] + section_components
+      )
+    end
+  
+    def caption_component
+      TableCaption.new(caption_state)
+    end
+  
+    def section_components
+      section_ids.map do |id|
+        TableSection.new(section_state(id))
+      end
+    end
+  
+    def visible_columns
+      @visible_columns ||= visible_column_indexes.map {|i| columns[i]}
+    end
+  
+    def visible_column_indexes
+      @visible_column_indexes
+    end
+  
+    def column_ids
+      columns.map(&:id)
+    end
+  
+    def caption_attributes
+      # TODO:
+      nil
+    end
+  
+    def cell_attributes(section)
+      # TODO:
+      nil
+    end
+  
+    def section_attributes(section)
+      # TODO:
+      nil
+    end
+  
+    def row_attributes(section, index)
+      # TODO:
+      nil
+    end
+  
+    def sorted?
+      !!@sort_column_id
+    end
+  
+    # set or toggle the sort order to/of the given column
+    def sort!(column_id)
+      if @sort_column_id == column_id
+        sort_orders[@sort_column_id] *= -1
+      else
+        @sort_column_id = column_id
+        @sort_column = columns.detect {|c| c.id == @sort_column_id}
+      end
+      @sort_order = sort_orders[@sort_column_id]
+      @model_indexes_sorted[:body] = nil
+      invalidate_sections
+      render_dom!
+    end
+  
+    def row_models(section)
+      @row_models[section]
+    end
+  
+    def row_model(section, row_index)
+      models = row_models(section)
+      models ? models[row_index] : nil
+    end
+  
+    def invalidate
+      init_row_models
+      init_sorting
+      invalidate_caption
+      invalidate_sections
+      render_dom!
+    end
+  
+    def invalidate_caption
+      @caption_state = nil
+    end
+  
+    def invalidate_sections(arg_ids = nil)
+      ids = arg_ids || section_ids
+      ids.each do |id|
+        # debug __FILE__, __LINE__,  __method__, "id=#{id} "
+        invalidate_section(id, row_states: true)
+      end
+    end
+  
+    def invalidate_section(section, row_states: true)
+      # debug __FILE__, __LINE__,  __method__, "section=#{section} row_states=#{row_states}"
+      @section_states[section] = nil
+      @row_states[section] = nil if row_states
+    end
+  
+    def invalidate_row(section, model, columns = nil)
+      # debug __FILE__, __LINE__,  __method__, "section=#{section} model=#{model} columns=#{columns}"
+      index = state_index(section, model)
+      if index
+        if section == :body && (columns.nil? || columns.include?(@sort_column))
+          # debug __FILE__, __LINE__,  __method__, "section=#{section} model=#{model.name} invalidating whole section"
+          @model_indexes_sorted[section] = nil
+          invalidate_section(section, row_states: true)
+        else
+          # debug __FILE__, __LINE__,  __method__, "section=#{section}  invalidating row [#{index}] only for #{model.name}"
+          invalidate_section(section, row_states: false)
+          invalidate_row_state(section, index, columns)
+        end
+      end
+    end
+  
+    def invalidate_cell(section, row, column)
+      invalidate_row(section, row, [column])
+    end
+  
+    private
+  
+    def init_sections(options)
+      # TODO: from options
+      @section_ids = [:head, :body, :foot]
+    end
+  
+  
+    def init_row_sources(options)
+      @row_sources = {}
+      section_ids.each do |section|
+        @row_sources[section] = options[:"#{section}_rows"]
+      end
+      # debug __FILE__, __LINE__, __method__, "@row_sources=#{@row_sources}"
+    end
+  
+    def init_row_models
+      # debug __FILE__, __LINE__, __method__
+      @row_models = {}
+      empty_sections = []
+      @section_ids.each do |section|
+        source = @row_sources[section]
+        @row_models[section] = case source
+          when Fixnum
+            source.times.to_a
+          when Proc
+            source.call
+          else
+            if source.nil? || source.size == 0
+              empty_sections << section
+            end
+            source
+        end
+      end
+      empty_sections.each do |section|
+        @section_ids.delete(section)
+        @row_models[section]
+      end
+      # debug __FILE__, __LINE__, __method__, '@section_ids=#{@section_ids}'
+    end
+  
+    def init_accordion(options)
+      @accordion = !!options[:accordion]
+    end
+  
+    def init_css_style(options)
+      @css = options[:css] || DEFAULT_CSS
+      @style = options[:style] || DEFAULT_STYLE
+    end
+  
+    def init_caption(options)
+      @caption_content = options[:caption]
+    end
+  
+    def init_sorting
+      @sort_column_id = @initial_sort_column_id unless @sort_column_id
+      @sort_column = @sort_column_id ? columns.detect {|c| c.id == @sort_column_id} : columns.detect {|c| c.sort?}
+      @sort_column_id = @sort_column ? @sort_column.id : nil
+      @sort_order = @initial_sort_order || 1 unless @sort_order
+      @sort_orders = {}
+      if @sort_column_id
+        columns.each { |c| sort_orders[c.id] = c.id == sort_column_id ? @sort_order : 1 }
+      end
+      @model_indexes_sorted = {}
+      # debug __FILE__, __LINE__, __method__, "@sort_column_id=#{@sort_column_id}"
+    end
+  
+    def init_states
+      @caption_state = nil
+      @section_states = {}
+      @row_states = {}
+    end
+  
+    def init_visibility
+      @visible_column_indexes = columns.size.times.to_a
+    end
+  
+    def caption_state
+      @caption_state ||= State.new(table: self)
+    end
+  
+    def section_state(section)
+      unless @section_states[section]
+        # debug __FILE__, __LINE__, __method__, "#{section} creating new section state"
+        @section_states[section] = State.new(
+          table: self,
+          section: section,
+          row_states: row_states(section)
+        )
+      end
+      @section_states[section]
+    end
+  
+    def row_states(section)
+      sorted_indexes = model_indexes_sorted(section)
+      states = (@row_states[section] ||= Array.new(sorted_indexes.size))
+      if section == :body
+        # debug __FILE__, __LINE__, __method__, "#{section} sorted_indexes=#{sorted_indexes.to_a}"
+        # debug __FILE__, __LINE__, __method__, "#{section} sorted_models=#{sorted_indexes.map{|i|row_models(section)[i]}.map(&:code)}"
+      end
+      sorted_indexes.each_with_index do |model_index, row_index|
+        unless states[row_index]
+          if section == :body
+            # debug __FILE__, __LINE__, __method__, "#{section} creating new row state[#{row_index}] model_index=#{model_index} #{section == :body ? row_models(section)[model_index].name : ''}"
+          end
+          states[row_index] = State.new(table: self, section: section, index: model_index)
+        end
+      end
+      states
+    end
+  
+    def invalidate_row_state(section, index, columns)
+      if @row_states[section]
+        # debug __FILE__, __LINE__, __method__, "#{section} index=#{index} #{row_models(section)[index].name}"
+        @row_states[section][index] = nil
+      end
+    end
+  
+    def state_index(section, model)
+      models = row_models(section)
+      model_indexes_sorted(section).each_with_index do |model_index, state_index|
+        if model == models[model_index]
+          return state_index
+        end
+      end
+      nil
+    end
+  
+    def model_indexes_sorted(section)
+      unless @model_indexes_sorted[section]
+        models = row_models(section)
+        @model_indexes_sorted[section] = models.size.times.to_a
+        if section == :body && sorted?
+          order = sort_order
+          @model_indexes_sorted[section] = @model_indexes_sorted[section].sort do |a, b|
+            val_a = sort_value(sort_column, models[a])
+            val_b = sort_value(sort_column, models[b])
+            compare(val_a, val_b) * order
+          end
+          sorted_models = @model_indexes_sorted[section].map{|i|models[i]}
+          sorted_models = sorted_models.map(&:code)
+          # debug __FILE__, __LINE__, __method__, "sorted models = #{sorted_models}"
+          # debug __FILE__, __LINE__, __method__, "sort_column=#{sort_column.id} model_indexes_sorted=#{@model_indexes_sorted}"
+        end
+      end
+      # debug __FILE__, __LINE__, __method__, "sort_column=#{sort_column.id} model_indexes_sorted=#{@model_indexes_sorted}"
+      @model_indexes_sorted[section]
+    end
+  
+    def sort_value(column, row_model)
+      content = column.section_content(:body)
+      result = if VDOM::Content === content
+        content.sort_value(context: row_model)
+      else
+        content
+      end
+      result
+    end
+  
+    def compare(a, b)
+      if a && b
+        a <=> b
+      elsif a
+        1
+      elsif b
+        -1
+      else
+        0
+      end
+    end
+  
+  
+  end
+
+end # module VDOM
+
+require 'vdom/table_column'
+