Class: Ferro::Compositor

Inherits:
Object
  • Object
show all
Defined in:
opal/opal-ferro/ferro_compositor.js.rb

Overview

Composite styling for DOM objects.

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(theme = nil) ⇒ Compositor

Create the style compositor.

Parameters:

  • theme (Symbol) (defaults to: nil) —

    Optional styling theme



10
11
12
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 10

def initialize(theme = nil)
  @current_theme = theme
end

Instance Attribute Details

#current_theme ⇒ Object (readonly)

Returns the value of attribute current_theme.



5
6
7
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 5

def current_theme
  @current_theme
end

Instance Method Details

#css_classes_for(classname) ⇒ Array

Map a Ruby classname to an array of css classnames. If the mapping result is a string: recursively lookup the mapping for that string.

Parameters:

  • classname (String) —

    Ruby classname

Returns:

  • (Array) —

    A list of CSS class names



33
34
35
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 33

def css_classes_for(classname)
  css_classes_for_map classname, mapping
end

#css_classes_for_map(classname, mapping) ⇒ Object

Internal method to get mapping from selected map.



38
39
40
41
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 38

def css_classes_for_map(classname, mapping)
  css = mapping[classname]
  css.class == String ? css_classes_for_map(css, mapping) : (css || [])
end

#map ⇒ Object

Override this method to define a hash containing the mapping of Ruby classnames to an array of css classnames.

To use the same styling on multiple objects: return the name of the object containing the styling as a String (see css_classes_for method).

This hash may also contain the mapping for states. A state name is: <Ruby class name>::<state>. For instance ‘MenuLink::active’.

Raises:

  • (NotImplementedError) 


23
24
25
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 23

def map
  raise NotImplementedError
end

#mapping ⇒ Object

Internal method to cache the mapping.



73
74
75
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 73

def mapping
  @mapping ||= map(@current_theme)
end

#switch_theme(root_element, theme) ⇒ Object

Internal method to switch to a new theme.



44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 44

def switch_theme(root_element, theme)
  old_map = @mapping
  new_map = map(theme)

  root_element.each_child do |e|
    old_classes = css_classes_for_map e.class.name, old_map
    new_classes = css_classes_for_map e.class.name, new_map
    update_element_css_classes(e, old_classes, new_classes)

    old_classes = css_classes_for_map e.class.superclass.name, old_map
    new_classes = css_classes_for_map e.class.superclass.name, new_map
    update_element_css_classes(e, old_classes, new_classes)
  end

  @mapping = new_map
end

#update_element_css_classes(obj, old_classes, new_classes) ⇒ Object

Internal method to add/remove CSS classes for an object.



62
63
64
65
66
67
68
69
70
 
# File 'opal/opal-ferro/ferro_compositor.js.rb', line 62

def update_element_css_classes(obj, old_classes, new_classes)
  (old_classes - new_classes).each do |name|
    `#{obj.element}.classList.remove(#{name})`
  end

  (new_classes - old_classes).each do |name|
    `#{obj.element}.classList.add(#{name})`
  end
end