Class: Ferro::BaseElement

Inherits:
Object
  • Object
show all
Includes:
Elementary
Defined in:
opal/opal-ferro/ferro_base_element.js.rb

Overview

This class encapsulates all functionality of Master Object Model elements. Every Ferro element should (indirectly) inherit from this class. Ferro elements should not be instanciated directly. Instead the parent element should call the add_child method.

Constant Summary

Constants included from Elementary

Elementary::RESERVED_NAMES

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods included from Elementary

#_after_create, #_before_create, #_stylize, #add_child, #after_create, #before_create, #cascade, #create, #creation, #destroy, #each_child, #forget_children, #method_missing, #remove_child, #style, #symbolize

Constructor Details

#initialize(parent, sym, options = {}) ⇒ BaseElement

Create the element and continue the creation process (casading). Ferro elements should not be instanciated directly. Instead the parent element should call the add_child method.

Parameters:

  • parent (String) —

    The parent Ruby element

  • sym (String) —

    The symbolized name for the element

  • options (Hash) (defaults to: {}) —

    Any options for the creation process



21
22
23
24
25
26
27
28
29
30
31
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 21

def initialize(parent, sym, options = {})
  @parent   = parent
  @sym      = sym
  @children = {}
  @element  = nil
  @domtype  = :div
  @states   = {}
  @options  = options

  creation
end

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class Ferro::Elementary

Instance Attribute Details

#children ⇒ Object (readonly)

Returns the value of attribute children.



11
12
13
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 11

def children
  @children
end

#domtype ⇒ Object (readonly)

Returns the value of attribute domtype.



11
12
13
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 11

def domtype
  @domtype
end

#element ⇒ Object (readonly)

Returns the value of attribute element.



11
12
13
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 11

def element
  @element
end

#parent ⇒ Object (readonly)

Returns the value of attribute parent.



11
12
13
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 11

def parent
  @parent
end

#sym ⇒ Object (readonly)

Returns the value of attribute sym.



11
12
13
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 11

def sym
  @sym
end

Instance Method Details

#add_state(state, value = false) ⇒ Object

Add a state to the element. A state toggles a CSS class with the same (dasherized) name as the state. If the state is thruthy (not nil or true) the CSS class is added to the element. Otherwise the CSS class is removed.

Parameters:

  • state (String) —

    The state name to add to the element

  • value (value) (defaults to: false) —

    The initial enabled/disabled state value



88
89
90
91
92
93
94
95
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 88

def add_state(state, value = false)
  @states[state] = [
    factory.composite_state(self.class.name, state),
    value
  ]

  classify_state @states[state]
end

#add_states(states) ⇒ Object

Add states to the element. A state toggles a CSS class with the same (dasherized) name as the state. If the state is thruthy (not nil or true) the CSS class is added to the element. Otherwise the CSS class is removed.

Parameters:

  • states (Array) —

    An array of state names to add to the element. All disabled (false) state initially.



75
76
77
78
79
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 75

def add_states(states)
  states.each do |state|
    add_state(state)
  end
end

#classify_state(state) ⇒ Object

Add or remove the CSS class for the state

Parameters:

  • state (String) —

    The state name



126
127
128
129
130
131
132
133
134
135
136
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 126

def classify_state(state)
  if state[1]
    state[0].each do |name|
      `#{@element}.classList.add(#{name})`
    end
  else
    state[0].each do |name|
      `#{@element}.classList.remove(#{name})`
    end
  end
end

#component ⇒ Object

Searches the element hierarchy upwards an element is found that is a component



46
47
48
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 46

def component
  @parent.component
end

#dom_id ⇒ String

Get the id of the elements corresponding DOM element

Returns:

  • (String) —

    The id



206
207
208
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 206

def dom_id
  "_#{self.object_id}"
end

#factory ⇒ Object

Searches the element hierarchy upwards until the factory is found



34
35
36
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 34

def factory
  @parent.factory
end

#get_text ⇒ String

Get the current text content of the element

Returns:

  • (String) —

    The text value



156
157
158
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 156

def get_text
  `#{@element}.textContent`
end

#html(raw_html) ⇒ Object

Set the current html content of the element. Use with caution if the html content is not trusted, it may be invalid or contain scripts.

Parameters:

  • raw_html (String) —

    The new html value



180
181
182
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 180

def html(raw_html)
  `#{@element}.innerHTML = #{raw_html}`
end

#option_replace(key, default = nil) ⇒ value

Delete a key from the elements options hash. Will be renamed to option_delete.

Parameters:

  • key (key) —

    Key of the option hash to be removed

  • default (value) (defaults to: nil) —

    Optional value to use if option value is nil

Returns:

  • (value) —

    Return the current option value or value of default parameter



62
63
64
65
66
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 62

def option_replace(key, default = nil)
  value = @options[key] || default
  @options.delete(key) if @options.has_key?(key)
  value
end

#remove_attribute(name) ⇒ Object

Remove an attribute value on the elements corresponding DOM element

Parameters:

  • name (String) —

    The attribute name



199
200
201
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 199

def remove_attribute(name)
  `#{@element}.removeAttribute(#{name})`
end

#root ⇒ Object

Searches the element hierarchy upwards until the root element is found



40
41
42
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 40

def root
  @parent.root
end

#router ⇒ Object

Searches the element hierarchy upwards until the router is found



51
52
53
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 51

def router
  @parent.router
end

#set_attribute(name, value) ⇒ Object

Set an attribute value on the elements corresponding DOM element

Parameters:

  • name (String) —

    The attribute name

  • value (String) —

    The attribute value



188
189
190
191
192
193
194
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 188

def set_attribute(name, value)
  if name == 'scrollTop'
    `#{@element}.scrollTop=#{value}`
  else
    `#{@element}.setAttribute(#{name}, #{value})`
  end
end

#set_text(value) ⇒ Object

Set the current text content of the element

Parameters:

  • value (String) —

    The new text value



171
172
173
174
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 171

def set_text(value)
  # https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
  `#{@element}.textContent = #{value}`
end

#state_active?(state) ⇒ Boolean

Determine if the state is active

Parameters:

  • state (String) —

    The state name

Returns:

  • (Boolean) —

    The state value



142
143
144
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 142

def state_active?(state)
  @states[state][1]
end

#toggle_state(state) ⇒ Object

Toggle the boolean value of the state

Parameters:

  • state (String) —

    The state name



116
117
118
119
120
121
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 116

def toggle_state(state)
  @states.select { |s, _| s == state }.each do |s, v|
    v[1] = !v[1]
    classify_state v
  end
end

#update_state(state, active) ⇒ Object

Update the value of the state.

Parameters:

  • state (String) —

    The state name

  • active (Boolean) —

    The new value of the state. Pass true to enable and set the CSS class false to disable and remove the CSS class nil to skip altering state and the CSS class



104
105
106
107
108
109
110
111
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 104

def update_state(state, active)
  if !active.nil?
    @states.each do |s, v|
      v[1] = active if s == state
      classify_state v
    end
  end
end

#value ⇒ String

Get the current html value of the element

Returns:

  • (String) —

    The html value



149
150
151
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 149

def value
  `#{@element}.innerHTML`
end

#value=(value) ⇒ Object

Set the current html value of the element Useful for input elements

Parameters:

  • The (String) —

    new value



164
165
166
 
# File 'opal/opal-ferro/ferro_base_element.js.rb', line 164

def value=(value)
  `#{@element}.value = #{value}`
end