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.



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.



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.



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



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



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



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.



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.



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



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



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



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



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



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.



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



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



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

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