Class: Glimmer::Web::ElementProxy

Inherits:
Object
  • Object
show all
Includes:
Glimmer
Defined in:
lib/glimmer/web/element_proxy.rb

Defined Under Namespace

Classes: Event

Constant Summary collapse

HTML_ELEMENT_KEYWORDS =
[
  "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio",
  "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body",
  "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "data",
  "datalist", "dd", "decorator", "details", "dfn", "dir", "div", "dl", "dt",
  "element", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame",
  "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup",
  "hr", "html", "iframe", "img", "input", "isindex", "kbd", "keygen",
  "label", "legend", "li", "link", "listing", "main", "map", "marquee", "menu",
  "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup",
  "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt",
  "ruby", "s", "samp", "script", "section", "select", "shadow", "source", "spacer",
  "span", "strike", "style", "summary", "table", "tbody", "td",
  "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt",
  "u", "ul", "var", "video", "wbr", "xmp",
]
SVG_ELEMENT_KEYWORDS =
[
  "animate", "animateMotion", "animateTransform", "circle", "clipPath", "defs", "desc", "ellipse",
  "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
  "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA",
  "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode",
  "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile",
  "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker",
  "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
  "set", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use", "view",
].map(&:downcase)
ELEMENT_KEYWORDS =
HTML_ELEMENT_KEYWORDS + SVG_ELEMENT_KEYWORDS
GLIMMER_ATTRIBUTES =
[:parent]
PROPERTY_ALIASES =
{
  'inner_html' => 'innerHTML',
  'outer_html' => 'outerHTML',
}
FORMAT_DATETIME =

TODO ensure using when setting value on date/time fields without data-binding

'%Y-%m-%dT%H:%M'
FORMAT_DATE =

TODO ensure using when setting value on date/time fields without data-binding

'%Y-%m-%d'
FORMAT_TIME =

TODO ensure using when setting value on date/time fields without data-binding

'%H:%M'
FORMAT_MONTH =

TODO ensure using when setting value on date/time fields without data-binding

'%Y-%m'
REGEX_FORMAT_DATETIME =
/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/
REGEX_FORMAT_DATE =
/^\d{4}-\d{2}-\d{2}$/
REGEX_FORMAT_TIME =
/^\d{2}:\d{2}$/
REGEX_FORMAT_MONTH =
/^\d{4}-\d{2}$/
REGEX_STYLE_SUB_PROPERTY =
/^(style)_(.*)$/
REGEX_CLASS_NAME_SUB_PROPERTY =
/^(class_name)_(.*)$/

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(keyword, parent, args, block) ⇒ ElementProxy

Returns a new instance of ElementProxy.



155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
# File 'lib/glimmer/web/element_proxy.rb', line 155

def initialize(keyword, parent, args, block)
  @keyword = keyword
  @parent = parent.is_a?(Glimmer::Web::Component) ? parent.markup_root : parent
  # @parent_component is the component that is the parent of an external element (not in markup {...} block) that is nested underneath (e.g. address_form { this_element })
  @parent_component = parent if parent.is_a?(Glimmer::Web::Component)
  if Component.interpretation_stack.last&.markup_root.nil?
    # @component is the one tied to this component-internal element as the markup root
    @component = Component.interpretation_stack.last
    @component&.instance_variable_set("@markup_root", self)
  else
    # @ancestor_component is the one tied to this component-internal element as an ancestor
    @ancestor_component = Component.interpretation_stack.last
  end
  @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
  if parent.nil?
    options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
    options[:render] ||= Component.interpretation_stack.last&.options&.[](:render)
    options[:bulk_render] ||= Component.interpretation_stack.last&.options&.[](:bulk_render)
  end
  @slot = options['slot'] || options[:slot]
  @slot = @slot.to_sym if @slot
  ancestor_component.slot_elements[@slot] = self if @slot && ancestor_component
  @args = args
  @block = block
  @children = []
  @parent&.post_initialize_child(self)
  render if !bulk_render? && !@rendered && render_after_create?
end

Dynamic Method Handling

This class handles dynamic methods through the method_missing method

#method_missing(method_name, *args, &block) ⇒ Object



731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
# File 'lib/glimmer/web/element_proxy.rb', line 731

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?('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?
      style_property(sub_property)
    else
      style_property(sub_property, args.first) # TODO in the future, support more sophisticated forms of CSS sub-property values, like [1.px, :solid, :black] for border
    end
  elsif method_name.to_s.start_with?('on_')
    handle_observation_request(method_name, block)
  elsif dom_element.respond_to?(method_name)
    if rendered?
      dom_element.send(method_name, *args, &block)
    else
      enqueue_post_render_method_call(method_name, *args, &block)
    end
  elsif !dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)
    if rendered?
      if method_name.end_with?('=')
        dom_element.prop(property_name, *args)
      else
        dom_element.prop(property_name)
      end
    else
      enqueue_post_render_method_call(method_name, *args, &block)
    end
  elsif !dom_element.prop(unnormalized_property_name).nil? && !dom_element.prop(unnormalized_property_name).is_a?(Proc)
    if rendered?
      if method_name.end_with?('=')
        dom_element.prop(unnormalized_property_name, *args)
      else
        dom_element.prop(unnormalized_property_name)
      end
    else
      enqueue_post_render_method_call(method_name, *args, &block)
    end
  elsif dom_element && dom_element.length > 0
    if rendered?
      js_args = block.nil? ? args : (args + [block])
      begin
        Native.call(dom_element, '0').method_missing(method_name.to_s.camelcase, *js_args)
      rescue Exception => e
        begin
          Native.call(dom_element, '0').method_missing(method_name.to_s, *js_args)
        rescue Exception => e
          super(method_name, *args, &block)
        end
      end
    else
      enqueue_post_render_method_call(method_name, *args, &block)
    end
  else
    super(method_name, *args, &block)
  end
end

Instance Attribute Details

#ancestor_componentObject (readonly)

Returns the value of attribute ancestor_component.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def ancestor_component
  @ancestor_component
end

#argsObject (readonly)

Returns the value of attribute args.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def args
  @args
end

#backgroundObject

Returns the value of attribute background.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def background
  @background
end

#childrenObject (readonly)

Returns the value of attribute children.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def children
  @children
end

#componentObject (readonly)

Returns the value of attribute component.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def component
  @component
end

#enabledObject

Returns the value of attribute enabled.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def enabled
  @enabled
end

#foregroundObject

Returns the value of attribute foreground.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def foreground
  @foreground
end

#keywordObject (readonly)

Returns the value of attribute keyword.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def keyword
  @keyword
end

#optionsObject (readonly)

Returns the value of attribute options.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def options
  @options
end

#parentObject (readonly)

Returns the value of attribute parent.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def parent
  @parent
end

#parent_componentObject (readonly)

Returns the value of attribute parent_component.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def parent_component
  @parent_component
end

#removedObject (readonly) Also known as: removed?

Returns the value of attribute removed.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def removed
  @removed
end

#renderedObject (readonly) Also known as: rendered?

Returns the value of attribute rendered.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def rendered
  @rendered
end

#slotObject (readonly)

Returns the value of attribute slot.



151
152
153
# File 'lib/glimmer/web/element_proxy.rb', line 151

def slot
  @slot
end

Class Method Details

.element_type(keyword) ⇒ Object

NOTE: Avoid using this method for now as it has slow performance returns Ruby proxy class (type) that would handle this keyword



51
52
53
54
55
56
# File 'lib/glimmer/web/element_proxy.rb', line 51

def element_type(keyword)
  class_name_main = "#{keyword.camelcase(:upper)}Proxy"
  Glimmer::Web::ElementProxy.const_get(class_name_main.to_sym)
rescue NameError => e
  Glimmer::Web::ElementProxy
end

.for(keyword, parent, args, block) ⇒ Object

NOTE: Avoid using this method until we start supporting ElementProxy subclasses in which case, we must cache them to avoid the slow performance of element_type Factory Method that translates a Glimmer DSL keyword into a ElementProxy object



45
46
47
# File 'lib/glimmer/web/element_proxy.rb', line 45

def for(keyword, parent, args, block)
  element_type(keyword).new(keyword, parent, args, block)
end

.html_keyword_supported?(keyword) ⇒ Boolean

Returns:

  • (Boolean)


34
35
36
# File 'lib/glimmer/web/element_proxy.rb', line 34

def html_keyword_supported?(keyword)
  HTML_ELEMENT_KEYWORDS.include?(keyword.to_s)
end

.keyword_supported?(keyword) ⇒ Boolean

Returns:

  • (Boolean)


30
31
32
# File 'lib/glimmer/web/element_proxy.rb', line 30

def keyword_supported?(keyword)
  ELEMENT_KEYWORDS.include?(keyword.to_s)
end

.max_id_number_for(name) ⇒ Object



62
63
64
# File 'lib/glimmer/web/element_proxy.rb', line 62

def max_id_number_for(name)
  @max_id_numbers[name] = max_id_numbers[name] || 0
end

.max_id_numbersObject



66
67
68
# File 'lib/glimmer/web/element_proxy.rb', line 66

def max_id_numbers
  @max_id_numbers ||= reset_max_id_numbers!
end

.next_id_number_for(name) ⇒ Object



58
59
60
# File 'lib/glimmer/web/element_proxy.rb', line 58

def next_id_number_for(name)
  @max_id_numbers[name] = max_id_number_for(name) + 1
end

.render_html(element, attributes, content = nil) ⇒ Object



82
83
84
85
86
87
88
89
90
91
92
93
# File 'lib/glimmer/web/element_proxy.rb', line 82

def render_html(element, attributes, content = nil)
  attributes = attributes.reduce('') do |output, option_pair|
    attribute, value = option_pair
    value = value.to_s.sub('"', '"').sub("'", ''')
    output += " #{attribute}=\"#{value}\""
  end
  if content.nil?
    "<#{element}#{attributes} />"
  else
    "<#{element}#{attributes}>#{content}</#{element}>"
  end
end

.reset_max_id_numbers!Object



70
71
72
# File 'lib/glimmer/web/element_proxy.rb', line 70

def reset_max_id_numbers!
  @max_id_numbers = {}
end

.svg_keyword_supported?(keyword) ⇒ Boolean

Returns:

  • (Boolean)


38
39
40
# File 'lib/glimmer/web/element_proxy.rb', line 38

def svg_keyword_supported?(keyword)
  SVG_ELEMENT_KEYWORDS.include?(keyword.to_s)
end

.underscored_widget_name(widget_proxy) ⇒ Object



74
75
76
# File 'lib/glimmer/web/element_proxy.rb', line 74

def underscored_widget_name(widget_proxy)
  widget_proxy.class.name.split(/::|\./).last.sub(/Proxy$/, '').underscore
end

.unrendered_dom_element(keyword) ⇒ Object



95
96
97
98
# File 'lib/glimmer/web/element_proxy.rb', line 95

def unrendered_dom_element(keyword)
  @unrendered_dom_elements ||= {}
  @unrendered_dom_elements[keyword] ||= Element["<#{keyword} />"]
end

.widget_handling_listenerObject



78
79
80
# File 'lib/glimmer/web/element_proxy.rb', line 78

def widget_handling_listener
  @@widget_handling_listener
end

Instance Method Details

#add_content_on_render(&content_block) ⇒ Object



452
453
454
455
456
457
458
# File 'lib/glimmer/web/element_proxy.rb', line 452

def add_content_on_render(&content_block)
  if rendered?
    content_block.call
  else
    content_on_render_blocks << content_block
  end
end

#add_contents_for_render_blocksObject



824
825
826
827
828
829
830
831
# File 'lib/glimmer/web/element_proxy.rb', line 824

def add_contents_for_render_blocks
  unless skip_content_on_render_blocks?
    content_on_render_blocks.each do |content_block|
      content(&content_block)
    end
  end
  children.each(&:add_contents_for_render_blocks) if bulk_render?
end

#add_css_class(css_class) ⇒ Object



529
530
531
532
533
534
535
# File 'lib/glimmer/web/element_proxy.rb', line 529

def add_css_class(css_class)
  if rendered?
    dom_element.add_class(css_class)
  else
    enqueue_post_render_method_call('add_css_class', css_class)
  end
end

#add_css_classes(css_classes_to_add) ⇒ Object



537
538
539
# File 'lib/glimmer/web/element_proxy.rb', line 537

def add_css_classes(css_classes_to_add)
  css_classes_to_add.each {|css_class| add_css_class(css_class)}
end

#add_text_content(text, on_empty: false) ⇒ Object



436
437
438
439
440
441
442
# File 'lib/glimmer/web/element_proxy.rb', line 436

def add_text_content(text, on_empty: false)
  if rendered?
    dom_element.append(text.to_s) if !on_empty || dom_element.text.to_s.empty?
  else
    enqueue_post_render_method_call('add_text_content', text, on_empty:)
  end
end

#attach(the_parent_dom_element) ⇒ Object



423
424
425
# File 'lib/glimmer/web/element_proxy.rb', line 423

def attach(the_parent_dom_element)
  the_parent_dom_element.append(@dom)
end

#bind_content(*binding_args, &content_block) ⇒ Object

Data-binds the generation of nested content to a model/property (in binding args) consider providing an option to avoid initial rendering without any changes happening



690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
# File 'lib/glimmer/web/element_proxy.rb', line 690

def bind_content(*binding_args, &content_block)
  content_binding_work = proc do |*values|
    # TODO in the future, consider optimizing code by diffing content if that makes sense (e.g. using opal-virtual-dom)
    # To do so, we must avoid generating new content with new unique IDs/Classes and only append the new IDs classes after mounting
    # TODO consider optimizing remove performance by doing clear instead and removing listeners separately
    children.dup.each { |child| child.remove }
    content(bulk_render: true, &content_block)
    if bulk_render? && rendered?
      self.inner_html = children_dom_content
      children.each(&:mark_rendered)
      children.each(&:invoke_post_render_method_calls)
      children.each(&:handle_observation_requests)
      children.each(&:add_contents_for_render_blocks)
      children.each(&:notify_on_render_listeners)
    end
  end
  model_binding_observer = Glimmer::DataBinding::ModelBinding.new(*binding_args)
  content_binding_observer = Glimmer::DataBinding::Observer.proc(&content_binding_work)
  content_binding_observer_registrations << content_binding_observer.observe(model_binding_observer)
  content_binding_work.call # TODO inspect if we need to pass args here (from observed attributes) [but it's simpler not to pass anything at first]
end

#build_dom(layout: true) ⇒ Object



460
461
462
463
# File 'lib/glimmer/web/element_proxy.rb', line 460

def build_dom(layout: true)
  # TODO consider passing parent element instead and having table item include a table cell widget only for opal
  @dom = dom # TODO unify how to build dom for most widgets based on element, id, and name (class)
end

#bulk_render?Boolean

Returns:

  • (Boolean)


188
189
190
# File 'lib/glimmer/web/element_proxy.rb', line 188

def bulk_render?
  options[:bulk_render] != false && (@parent.nil? || @parent.bulk_render?)
end

#can_handle_observation_request?(keyword) ⇒ Boolean

Returns:

  • (Boolean)


597
598
599
600
601
602
603
604
605
606
607
608
609
# File 'lib/glimmer/web/element_proxy.rb', line 597

def can_handle_observation_request?(keyword)
  # TODO sort this out for Opal
  keyword = keyword.to_s
  keyword.start_with?('on')
#         if keyword.start_with?('on_swt_')
#           constant_name = keyword.sub(/^on_swt_/, '')
#           SWTProxy.has_constant?(constant_name)
#         elsif keyword.start_with?('on_')
#           # event = keyword.sub(/^on_/, '')
#           # can_add_listener?(event) || can_handle_drag_observation_request?(keyword) || can_handle_drop_observation_request?(keyword)
#           true # TODO filter by valid listeners only in the future
#         end
end

#children_dom_contentObject



475
476
477
# File 'lib/glimmer/web/element_proxy.rb', line 475

def children_dom_content
  children.map(&:dom).join
end

#class_name=(*values) ⇒ Object Also known as: classes=



518
519
520
521
522
523
524
525
526
# File 'lib/glimmer/web/element_proxy.rb', line 518

def class_name=(*values)
  if rendered?
    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=', *values)
  end
end

#class_name_included(one_class_name, value = nil) ⇒ Object



331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
# File 'lib/glimmer/web/element_proxy.rb', line 331

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

#clear_css_classesObject



553
554
555
# File 'lib/glimmer/web/element_proxy.rb', line 553

def clear_css_classes
  css_classes.each {|css_class| remove_css_class(css_class)}
end

#content(bulk_render: false, &block) ⇒ Object



494
495
496
497
498
499
500
# File 'lib/glimmer/web/element_proxy.rb', line 494

def content(bulk_render: false, &block)
  original_bulk_render = options[:bulk_render]
  options[:bulk_render] = bulk_render if rendered?
  return_value = Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ElementExpression.new, keyword, &block)
  options[:bulk_render] = original_bulk_render if rendered?
  return_value
end

#content_binding_observer_registrationsObject



712
713
714
# File 'lib/glimmer/web/element_proxy.rb', line 712

def content_binding_observer_registrations
  @content_binding_observer_registrations ||= []
end

#content_on_render_blocksObject



444
445
446
# File 'lib/glimmer/web/element_proxy.rb', line 444

def content_on_render_blocks
  @content_on_render_blocks ||= []
end

#css_classesObject



212
213
214
# File 'lib/glimmer/web/element_proxy.rb', line 212

def css_classes
  dom_element.attr('class').to_s.split if rendered?
end

#data_bind(property, model_binding) ⇒ Object



662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
# File 'lib/glimmer/web/element_proxy.rb', line 662

def data_bind(property, model_binding)
  element_binding_read_translator = value_converters_for_input_type(type)&.[](:model_to_view)
  element_binding = DataBinding::ElementBinding.new(self, property, translator: element_binding_read_translator)
  #TODO make this options observer dependent and all similar observers in element specific data binding handlers
  element_binding.observe(model_binding)
  element_binding.call(model_binding.evaluate_property)
  data_bindings[element_binding] = model_binding
  if !model_binding.binding_options[:read_only]
    # TODO add guards against nil cases for hash below
    listener_keyword = data_binding_listener_for_element_and_property(keyword, property)
    if listener_keyword
      data_binding_read_listener = lambda do |event|
        view_property_value = send(property)
        element_binding_write_translator = value_converters_for_input_type(type)&.[](:view_to_model)
        is_date_time = ['date', 'time', 'datetime-local', 'month'].include?(options['type'])
        converted_view_property_value = element_binding_write_translator&.call(view_property_value, model_binding.evaluate_property)
        if !is_date_time
          converted_view_property_value ||= view_property_value
        end
        model_binding.call(converted_view_property_value)
      end
      handle_observation_request(listener_keyword, data_binding_read_listener)
    end
  end
end

#data_binding_element_keyword_to_property_listener_mapObject



855
856
857
858
859
860
861
862
863
864
865
866
867
868
# File 'lib/glimmer/web/element_proxy.rb', line 855

def data_binding_element_keyword_to_property_listener_map
  @data_binding_element_keyword_to_property_listener_map ||= {
    'input' => {
      'value' => 'oninput',
      'checked' => 'oninput',
    },
    'select' => {
      'value' => 'onchange',
    },
    'textarea' => {
      'value' => 'oninput',
    },
  }
end

#data_binding_listener_for_element_and_property(element_keyword, property) ⇒ Object



847
848
849
# File 'lib/glimmer/web/element_proxy.rb', line 847

def data_binding_listener_for_element_and_property(element_keyword, property)
  data_binding_property_listener_map_for_element(element_keyword)[property]
end

#data_binding_property_listener_map_for_element(element_keyword) ⇒ Object



851
852
853
# File 'lib/glimmer/web/element_proxy.rb', line 851

def data_binding_property_listener_map_for_element(element_keyword)
  data_binding_element_keyword_to_property_listener_map[element_keyword] || {}
end

#data_bindingsObject



650
651
652
# File 'lib/glimmer/web/element_proxy.rb', line 650

def data_bindings
  @data_bindings ||= {}
end

#domObject



465
466
467
468
469
470
471
472
473
# File 'lib/glimmer/web/element_proxy.rb', line 465

def dom
  # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
  # TODO check if we need to avoid rendering content block if no content is available
  @dom ||= begin
    content = args.first.is_a?(String) ? args.first : ''
    content += children_dom_content if bulk_render?
    ElementProxy.render_html(keyword, html_options, content)
  end
end

#dom_elementObject



557
558
559
560
561
562
563
564
565
# File 'lib/glimmer/web/element_proxy.rb', line 557

def dom_element
  if rendered?
    # TODO consider making this pick an element in relation to its parent, allowing unhooked dom elements to be built if needed (unhooked to the visible page dom)
    Document.find(selector)
  else
    # Using a fill-in dom element until self is rendered
    ElementProxy.unrendered_dom_element(keyword)
  end
end

#elementObject

Root element representing widget. Must be overridden by subclasses if different from div



266
267
268
# File 'lib/glimmer/web/element_proxy.rb', line 266

def element
  keyword
end

#element_idObject

element ID is used as a css class to identify the element. It is intentionally not set as the actual HTML element ID to let software engineers specify their own IDs if they wanted



514
515
516
# File 'lib/glimmer/web/element_proxy.rb', line 514

def element_id
  @element_id ||= "element-#{ElementProxy.next_id_number_for(name)}"
end

#enqueue_post_render_method_call(method_name, *args, &block) ⇒ Object



802
803
804
805
# File 'lib/glimmer/web/element_proxy.rb', line 802

def enqueue_post_render_method_call(method_name, *args, &block)
  post_render_method_calls << [method_name, args, block]
  nil
end

#event_handling_suspended?Boolean

Returns:

  • (Boolean)


585
586
587
# File 'lib/glimmer/web/element_proxy.rb', line 585

def event_handling_suspended?
  @event_handling_suspended
end

#event_listener_proxiesObject



573
574
575
# File 'lib/glimmer/web/element_proxy.rb', line 573

def event_listener_proxies
  @event_listener_proxies ||= []
end

#find_ancestor(include_self: false, &condition) ⇒ Object



287
288
289
290
291
292
293
294
295
# File 'lib/glimmer/web/element_proxy.rb', line 287

def find_ancestor(include_self: false, &condition)
  current_element_proxy = self
  return current_element_proxy if include_self && condition.call(current_element_proxy)
  until current_element_proxy.parent.nil?
    current_element_proxy = current_element_proxy.parent
    return current_element_proxy if condition.call(current_element_proxy)
  end
  nil
end

#handle_observation_request(keyword, original_event_listener) ⇒ Object



611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
# File 'lib/glimmer/web/element_proxy.rb', line 611

def handle_observation_request(keyword, original_event_listener)
  if rendered?
    if keyword.start_with?('on_') && !['on_render', 'on_remove'].include?(keyword.to_s)
      (ancestor_component || component)&.handle_observation_request(keyword, original_event_listener)
    else
      listener = ListenerProxy.new(
        element: self,
        selector: selector,
        dom_element: dom_element,
        event_attribute: keyword,
        original_event_listener: original_event_listener,
      )
      listener.register
      listeners_for(keyword) << listener
      listener
    end
  else
    enqueue_post_render_method_call('handle_observation_request', keyword, original_event_listener)
  end
end

#handle_observation_requestsObject



815
816
817
818
819
820
821
822
# File 'lib/glimmer/web/element_proxy.rb', line 815

def handle_observation_requests
  observation_requests&.each do |keyword, event_listener_set|
    event_listener_set.each do |event_listener|
      handle_observation_request(keyword, event_listener)
    end
  end
  children.each(&:handle_observation_requests) if bulk_render?
end

#html?Boolean

Returns:

  • (Boolean)


216
217
218
# File 'lib/glimmer/web/element_proxy.rb', line 216

def html?
  ElementProxy.html_keyword_supported?(keyword)
end

#html_optionsObject



479
480
481
482
483
484
485
486
487
488
489
490
491
492
# File 'lib/glimmer/web/element_proxy.rb', line 479

def html_options
  body_class = (base_css_classes + css_classes.to_a).uniq.compact.join(' ')
  html_options = options.dup
  GLIMMER_ATTRIBUTES.each do |attribute|
    next unless html_options.include?(attribute)
    data_normalized_attribute = attribute.split('_').join('-')
    html_options["data-#{data_normalized_attribute}"] = html_options.delete(attribute)
  end
  html_options[:class] ||= ''
  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

#input_value_convertersObject



874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
# File 'lib/glimmer/web/element_proxy.rb', line 874

def input_value_converters
  @input_value_converters ||= {
    'number' => {
      model_to_view: -> (value, old_value) { value.to_s },
      view_to_model: -> (value, old_value) {
        value.include?('.') ? value.to_f : value.to_i
      },
    },
    'range' => {
      model_to_view: -> (value, old_value) { value.to_s },
      view_to_model: -> (value, old_value) {
        value.include?('.') ? value.to_f : value.to_i
      },
    },
    'datetime-local' => {
      model_to_view: -> (value, old_value) {
        if value.respond_to?(:strftime)
          value.strftime(FORMAT_DATETIME)
        elsif value.is_a?(String) && valid_js_date_string?(value)
          value
        elsif value.to_s.empty?
          ''
        else # keep old value if a bad model attribute value was set
          old_value&.strftime(FORMAT_DATETIME)
        end
      },
      view_to_model: -> (value, old_value) {
        if value.to_s.empty?
          nil
        else
          date = Native(`new Date(Date.parse(#{value}))`)
          year = Native.call(date, 'getFullYear')
          month = Native.call(date, 'getMonth') + 1
          day = Native.call(date, 'getDate')
          hour = Native.call(date, 'getHours')
          minute = Native.call(date, 'getMinutes')
          Time.new(year, month, day, hour, minute)
        end
      },
    },
    'date' => {
      model_to_view: -> (value, old_value) {
        if value.respond_to?(:strftime)
          value.strftime(FORMAT_DATE)
        elsif value.is_a?(String) && valid_js_date_string?(value)
          value
        elsif value.to_s.empty?
          ''
        else # keep old value if a bad model attribute value was set
          old_value&.strftime(FORMAT_DATE)
        end
      },
      view_to_model: -> (value, old_value) {
        if value.to_s.empty?
          nil
        else
          year, month, day = value.split('-')
          if !old_value.to_s.empty?
            Time.new(year, month, day, old_value.hour, old_value.min)
          else
            Time.new(year, month, day)
          end
        end
      },
    },
    'time' => {
      model_to_view: -> (value, old_value) {
        if value.respond_to?(:strftime)
          value.strftime(FORMAT_TIME)
        elsif value.is_a?(String) && valid_js_date_string?(value)
          value
        elsif value.to_s.empty?
          ''
        else # keep old value if a bad model attribute value was set
          old_value&.strftime(FORMAT_TIME)
        end
      },
      view_to_model: -> (value, old_value) {
        if value.to_s.empty?
          nil
        else
          hour, minute = value.split(':')
          if !old_value.to_s.empty?
            Time.new(old_value.year, old_value.month, old_value.day, hour, minute)
          else
            now = Time.now
            Time.new(now.year, now.month, now.day, hour, minute)
          end
        end
      },
    },
    'month' => {
      model_to_view: -> (value, old_value) {
        if value.respond_to?(:strftime)
          value.strftime(FORMAT_MONTH)
        elsif value.is_a?(String) && valid_js_date_string?(value)
          value
        elsif value.to_s.empty?
          ''
        else # keep old value if a bad model attribute value was set
          old_value&.strftime(FORMAT_MONTH)
        end
      },
      view_to_model: -> (value, old_value) {
        if value.to_s.empty?
          nil
        else
          year, month = value.split('-')
          if !old_value.to_s.empty?
            Time.new(year, month, old_value.day, old_value.hour, old_value.min)
          else
            Time.new(year, month)
          end
        end
      },
    },
  }
end

#invoke_post_render_method_callsObject



807
808
809
810
811
812
813
# File 'lib/glimmer/web/element_proxy.rb', line 807

def invoke_post_render_method_calls
  return unless rendered?
  post_render_method_calls.each do |method_name, args, block|
    send(method_name, *args, &block)
  end
  children.each(&:invoke_post_render_method_calls) if bulk_render?
end

#listenersObject



589
590
591
# File 'lib/glimmer/web/element_proxy.rb', line 589

def listeners
  @listeners ||= {}
end

#listeners_for(listener_event) ⇒ Object



593
594
595
# File 'lib/glimmer/web/element_proxy.rb', line 593

def listeners_for(listener_event)
  listeners[listener_event.to_s] ||= []
end

#mark_renderedObject



431
432
433
434
# File 'lib/glimmer/web/element_proxy.rb', line 431

def mark_rendered
  @rendered = true
  children.each(&:mark_rendered) if bulk_render?
end

#nameObject



507
508
509
# File 'lib/glimmer/web/element_proxy.rb', line 507

def name
  self.class.name.split('::').last.underscore.sub(/_proxy$/, '').gsub('_', '-')
end

#notify_listeners(event) ⇒ Object



639
640
641
642
643
# File 'lib/glimmer/web/element_proxy.rb', line 639

def notify_listeners(event)
  listeners_for(event).each do |listener|
    listener.original_event_listener.call(EventProxy.new(listener: listener))
  end
end

#notify_on_render_listenersObject



645
646
647
648
# File 'lib/glimmer/web/element_proxy.rb', line 645

def notify_on_render_listeners
  notify_listeners('on_render')
  children.each(&:notify_on_render_listeners) if bulk_render?
end

#observation_request_to_event_mappingObject

Subclasses must override with their own mappings



503
504
505
# File 'lib/glimmer/web/element_proxy.rb', line 503

def observation_request_to_event_mapping
  {}
end

#observation_requestsObject

TODO consider adding a default #dom method implementation for the common case, automatically relying on #element and other methods to build the dom html



569
570
571
# File 'lib/glimmer/web/element_proxy.rb', line 569

def observation_requests
  @observation_requests ||= {}
end

#parent_dom_elementObject



384
385
386
387
388
389
390
391
392
393
394
395
396
# File 'lib/glimmer/web/element_proxy.rb', line 384

def parent_dom_element
  if parent
    parent.dom_element
  else
    options[:parent] ||= 'body'
    the_element = Document.find(options[:parent])
    if the_element.length == 0
      options[:parent] = 'body'
      the_element = Document.find('body')
    end
    the_element
  end
end

#parent_selectorObject



380
381
382
# File 'lib/glimmer/web/element_proxy.rb', line 380

def parent_selector
  @parent&.selector
end

#parentsObject Also known as: ancestors



276
277
278
279
280
281
282
283
284
# File 'lib/glimmer/web/element_proxy.rb', line 276

def parents
  parents_array = []
  current_widget = self
  until current_widget.parent.nil?
    current_widget = current_widget.parent
    parents_array << current_widget
  end
  parents_array
end

#post_add_contentObject

Executes at the closing of a parent widget curly braces after all children/properties have been added/set



208
209
210
# File 'lib/glimmer/web/element_proxy.rb', line 208

def post_add_content
  render if bulk_render? && @parent.nil? && !rendered?
end

#post_initialize_child(child) ⇒ Object

Executes for the parent of a child that just got added



197
198
199
200
# File 'lib/glimmer/web/element_proxy.rb', line 197

def post_initialize_child(child)
  @children << child
  child.render if !bulk_render? && !render_after_create?
end

#post_remove_child(child) ⇒ Object

Executes for the parent of a child that just got removed



203
204
205
# File 'lib/glimmer/web/element_proxy.rb', line 203

def post_remove_child(child)
  @children.delete(child)
end

#post_render_method_callsObject



798
799
800
# File 'lib/glimmer/web/element_proxy.rb', line 798

def post_render_method_calls
  @post_render_method_calls ||= []
end


297
298
299
300
# File 'lib/glimmer/web/element_proxy.rb', line 297

def print
  `window.print()`
  true
end

#property_name_for(method_name) ⇒ Object



833
834
835
836
# File 'lib/glimmer/web/element_proxy.rb', line 833

def property_name_for(method_name)
  attribute_name = method_name.end_with?('=') ? method_name.to_s[0...-1] : method_name.to_s
  PROPERTY_ALIASES[attribute_name] || attribute_name.camelcase
end

#reattach(old_element) ⇒ Object



427
428
429
# File 'lib/glimmer/web/element_proxy.rb', line 427

def reattach(old_element)
  old_element.replace_with(@dom)
end

#removeObject



224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
# File 'lib/glimmer/web/element_proxy.rb', line 224

def remove
  return if @removed
  on_remove_listeners = listeners_for('on_remove').dup
  if rendered?
    @children.dup.each do |child|
      child.remove
    end
    remove_all_listeners
    dom_element.remove
  end
  parent&.post_remove_child(self)
  if component
    Glimmer::Web::Component.remove_component(component)
    component.remove_style_block
  end
  @removed = true
  on_remove_listeners.each do |listener|
    listener.original_event_listener.call(EventProxy.new(listener: listener))
  end
end

#remove_all_listenersObject



245
246
247
248
249
250
251
252
253
254
255
256
257
258
# File 'lib/glimmer/web/element_proxy.rb', line 245

def remove_all_listeners
  listeners.each do |event, event_listeners|
    event_listeners.dup.each(&:unregister)
  end
  listeners.clear
  data_bindings.each do |element_binding, model_binding|
    element_binding.unregister_all_observables
  end
  data_bindings.clear
  content_binding_observer_registrations.each do |observer_registration|
    observer_registration.unregister
  end
  content_binding_observer_registrations.clear
end

#remove_css_class(css_class) ⇒ Object



541
542
543
544
545
546
547
# File 'lib/glimmer/web/element_proxy.rb', line 541

def remove_css_class(css_class)
  if rendered?
    dom_element.remove_class(css_class)
  else
    enqueue_post_render_method_call('remove_css_class', css_class)
  end
end

#remove_css_classes(css_classes_to_remove) ⇒ Object



549
550
551
# File 'lib/glimmer/web/element_proxy.rb', line 549

def remove_css_classes(css_classes_to_remove)
  css_classes_to_remove.each {|css_class| remove_css_class(css_class)}
end

#remove_event_listener_proxiesObject



632
633
634
635
636
637
# File 'lib/glimmer/web/element_proxy.rb', line 632

def remove_event_listener_proxies
  event_listener_proxies.each do |event_listener_proxy|
    event_listener_proxy.unregister
  end
  event_listener_proxies.clear
end

#render(parent: nil, custom_parent_dom_element: nil, brand_new: false) ⇒ Object Also known as: rerender



398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
# File 'lib/glimmer/web/element_proxy.rb', line 398

def render(parent: nil, custom_parent_dom_element: nil, brand_new: false)
  parent_selector = parent
  options[:parent] = parent_selector if !parent_selector.to_s.empty?
  if !options[:parent].to_s.empty?
    # ensure element is orphaned as it is becoming a top-level root element
    @parent&.post_remove_child(self)
    @parent = nil
  end
  the_parent_dom_element = custom_parent_dom_element || parent_dom_element
  brand_new ||= @dom.nil? || !options[:parent].to_s.empty? || (old_element = dom_element).empty?
  build_dom(layout: !custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
  if brand_new
    attach(the_parent_dom_element)
  else
    reattach(old_element)
  end
  mark_rendered
  invoke_post_render_method_calls if bulk_render?
  handle_observation_requests
  children.each(&:render) if !bulk_render? && !render_after_create?
  add_contents_for_render_blocks
  notify_on_render_listeners
end

#render_after_create?Boolean

Returns:

  • (Boolean)


192
193
194
# File 'lib/glimmer/web/element_proxy.rb', line 192

def render_after_create?
  options[:render] != false && (@parent.nil? || @parent.render_after_create?)
end

#respond_to_missing?(method_name, include_private = false) ⇒ Boolean

Returns:

  • (Boolean)


716
717
718
719
720
721
722
723
724
725
726
727
728
729
# File 'lib/glimmer/web/element_proxy.rb', line 716

def respond_to_missing?(method_name, include_private = false)
  # 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)
  super(method_name, include_private) ||
    (dom_element && dom_element.length > 0 && Native.call(dom_element, '0').respond_to?(method_name.to_s.camelcase, include_private)) ||
    (dom_element && dom_element.length > 0 && Native.call(dom_element, '0').respond_to?(method_name.to_s, include_private)) ||
    dom_element.respond_to?(method_name, include_private) ||
    (!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?('class_name_')
end

#resume_event_handlingObject



581
582
583
# File 'lib/glimmer/web/element_proxy.rb', line 581

def resume_event_handling
  @event_handling_suspended = false
end

#selectorObject

Subclasses can override with their own selector



261
262
263
# File 'lib/glimmer/web/element_proxy.rb', line 261

def selector
  ".#{element_id}"
end

#shellObject



270
271
272
273
274
# File 'lib/glimmer/web/element_proxy.rb', line 270

def shell
  current_widget = self
  current_widget = current_widget.parent until current_widget.parent.nil?
  current_widget
end

#skip_content_on_render_blocks?Boolean

Returns:

  • (Boolean)


448
449
450
# File 'lib/glimmer/web/element_proxy.rb', line 448

def skip_content_on_render_blocks?
  false
end

#style(value = null) ⇒ Object Also known as: style=



349
350
351
352
353
354
355
356
357
358
359
360
361
362
# File 'lib/glimmer/web/element_proxy.rb', line 349

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

#style_property(property, value = nil) ⇒ Object



365
366
367
368
369
370
371
372
373
374
375
376
377
378
# File 'lib/glimmer/web/element_proxy.rb', line 365

def style_property(property, value = nil)
  if rendered?
    property = property.to_s.gsub('_', '-')
    if value.nil?
      dom_element.css(property)
    else
      dom_element.css(property, value)
    end
  else
    enqueue_args = ['style_property', property]
    enqueue_args << value unless value.nil?
    enqueue_post_render_method_call(*enqueue_args)
  end
end

#suspend_event_handlingObject



577
578
579
# File 'lib/glimmer/web/element_proxy.rb', line 577

def suspend_event_handling
  @event_handling_suspended = true
end

#svg?Boolean

Returns:

  • (Boolean)


220
221
222
# File 'lib/glimmer/web/element_proxy.rb', line 220

def svg?
  ElementProxy.svg_keyword_supported?(keyword)
end

#swt_widgetObject



842
843
844
845
# File 'lib/glimmer/web/element_proxy.rb', line 842

def swt_widget
  # only added for compatibility/adaptibility with Glimmer DSL for SWT
  self
end

#typeObject



654
655
656
657
658
659
660
# File 'lib/glimmer/web/element_proxy.rb', line 654

def type
  if rendered?
    super
  else
    options[:type] || 'text'
  end
end

#unnormalized_property_name_for(method_name) ⇒ Object



838
839
840
# File 'lib/glimmer/web/element_proxy.rb', line 838

def unnormalized_property_name_for(method_name)
  method_name.end_with?('=') ? method_name.to_s[0...-1] : method_name.to_s
end

#value_converters_for_input_type(input_type) ⇒ Object



870
871
872
# File 'lib/glimmer/web/element_proxy.rb', line 870

def value_converters_for_input_type(input_type)
  input_value_converters[input_type]
end