Module: Scarpe::Components::Calzini

Extended by:
Calzini
Includes:
Base64
Included in:
Calzini, Tiranti
Defined in:
lib/scarpe/components/calzini.rb,
lib/scarpe/components/calzini/misc.rb,
lib/scarpe/components/calzini/para.rb,
lib/scarpe/components/calzini/alert.rb,
lib/scarpe/components/calzini/slots.rb,
lib/scarpe/components/calzini/button.rb,
lib/scarpe/components/calzini/art_widgets.rb,
lib/scarpe/components/calzini/text_widgets.rb

Overview

The Calzini module expects to be included by a class defining the following methods:

* html_id - the HTML ID for the specific rendered DOM object
* handler_js_code(event_name) - the JS handler code for this DOM object and event name
* (optional) shoes_styles - the Shoes styles for this object, unless overridden in render()

Constant Summary collapse

HTML = 
Scarpe::Components::HTML

Instance Method Summary collapse

Methods included from Base64

#encode_file_to_base64, #valid_url?

Instance Method Details

#alert_element(props) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
 
# File 'lib/scarpe/components/calzini/alert.rb', line 4

def alert_element(props)
  event = props["event_name"] || "click"
  onclick = handler_js_code(event)

  HTML.render do |h|
    h.div(id: html_id, style: alert_overlay_style(props)) do
      h.div(style: alert_modal_style) do
        h.div(style: {}) { props["text"] }
        h.button(style: {}, onclick: onclick) { "OK" }
      end
    end
  end
end

#arc_element(props, &block) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
 
# File 'lib/scarpe/components/calzini/art_widgets.rb', line 4

def arc_element(props, &block)
  dc = props["draw_context"] || {}
  rotate = dc["rotate"]
  HTML.render do |h|
    h.div(id: html_id, style: arc_style(props)) do
      h.svg(width: props["width"], height: props["height"]) do
        h.path(d: arc_path(props), transform: "rotate(#{rotate}, #{props["width"] / 2}, #{props["height"] / 2})")
      end
      block.call(h) if block_given?
    end
  end
end

#button_element(props) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
 
# File 'lib/scarpe/components/calzini/button.rb', line 4

def button_element(props)
  HTML.render do |h|
    h.button(
      id: html_id,
      onclick: handler_js_code("click"),
      onmouseover: handler_js_code("hover"),
      style: button_style(props),
      title: props["tooltip"],
    ) do
      props["text"]
    end
  end
end

#check_element(props) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
 
# File 'lib/scarpe/components/calzini/misc.rb', line 4

def check_element(props)
  HTML.render do |h|
    h.input type: :checkbox,
      id: html_id,
      onclick: handler_js_code("click"),
      value: props["text"],
      checked: props["checked"],
      style: drawable_style(props)
  end
end

#code_element(props, &block) ⇒ Object 



18
19
20
21
22
 
# File 'lib/scarpe/components/calzini/text_widgets.rb', line 18

def code_element(props, &block)
  HTML.render do |h|
    h.code(&block)
  end
end

#degrees_to_radians(degrees) ⇒ Object 



142
143
144
 
# File 'lib/scarpe/components/calzini.rb', line 142

def degrees_to_radians(degrees)
  degrees * Math::PI / 180
end

#dimensions_length(value) ⇒ Object 



93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'lib/scarpe/components/calzini.rb', line 93

def dimensions_length(value)
  case value
  when Integer
    if value < 0
      "calc(100% - #{value.abs}px)"
    else
      "#{value}px"
    end
  when Float
    "#{value * 100}%"
  else
    value
  end
end

#documentroot_element(props, &block) ⇒ Object 



22
23
24
25
26
27
 
# File 'lib/scarpe/components/calzini/slots.rb', line 22

def documentroot_element(props, &block)
  HTML.render do |h|
    # DocumentRoot rendering intentionally uses flow styles.
    h.div((props["html_attributes"] || {}).merge(id: html_id, style: flow_style(props)), &block)
  end
end

#drawable_style(props) ⇒ Object 



108
109
110
111
112
113
114
 
# File 'lib/scarpe/components/calzini.rb', line 108

def drawable_style(props)
  styles = {}
  if props["hidden"]
    styles[:display] = "none"
  end
  styles
end

#edit_box_element(props) ⇒ Object 



15
16
17
18
19
20
21
 
# File 'lib/scarpe/components/calzini/misc.rb', line 15

def edit_box_element(props)
  oninput = handler_js_code("change", "this.value")

  HTML.render do |h|
    h.textarea(id: html_id, oninput: oninput, style: edit_box_style(props)) { props["text"] }
  end
end

#edit_line_element(props) ⇒ Object 



23
24
25
26
27
28
29
 
# File 'lib/scarpe/components/calzini/misc.rb', line 23

def edit_line_element(props)
  oninput = handler_js_code("change", "this.value")

  HTML.render do |h|
    h.input(id: html_id, oninput: oninput, value: props["text"], style: edit_line_style(props))
  end
end

#em_element(props, &block) ⇒ Object 



24
25
26
27
28
 
# File 'lib/scarpe/components/calzini/text_widgets.rb', line 24

def em_element(props, &block)
  HTML.render do |h|
    h.em(&block)
  end
end

#empty_page_element ⇒ String

Return HTML for an empty page element, to be filled with HTML renderings of the DOM tree.

The wrapper-wvroot element is where Scarpe will fill in the DOM element.

Returns:

  • (String) —

    the rendered HTML for the empty page object.



56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
# File 'lib/scarpe/components/calzini.rb', line 56

def empty_page_element
  "    <html>\n      <head id='head-wvroot'>\n        <style id='style-wvroot'>\n          /** Style resets **/\n          body {\n            font-family: arial, Helvetica, sans-serif;\n            margin: 0;\n            height: 100%;\n            overflow: hidden;\n          }\n          p {\n            margin: 0;\n          }\n        </style>\n      </head>\n      <body id='body-wvroot'>\n        <div id='wrapper-wvroot'></div>\n      </body>\n    </html>\n  HTML\nend\n"

#flow_element(props, &block) ⇒ Object 



10
11
12
13
14
 
# File 'lib/scarpe/components/calzini/slots.rb', line 10

def flow_element(props, &block)
  HTML.render do |h|
    h.div((props["html_attributes"] || {}).merge(id: html_id, style: flow_style(props)), &block)
  end
end

#image_element(props) ⇒ Object 



31
32
33
34
35
36
37
38
39
40
41
42
43
 
# File 'lib/scarpe/components/calzini/misc.rb', line 31

def image_element(props)
  style = image_style(props)

  if props["click"]
    HTML.render do |h|
      h.a(id: html_id, href: props["click"]) { h.img(id: html_id, src: props["url"], style:) }
    end
  else
    HTML.render do |h|
      h.img(id: html_id, src: props["url"], style:)
    end
  end
end

#line_element(props) ⇒ Object 



38
39
40
41
42
43
44
45
46
 
# File 'lib/scarpe/components/calzini/art_widgets.rb', line 38

def line_element(props)
  HTML.render do |h|
    h.div(id: html_id, style: line_div_style(props)) do
      h.svg(width: props["x2"], height: props["y2"]) do
        h.line(x1: props["left"], y1: props["top"], x2: props["x2"], y2: props["y2"], style: line_svg_style(props))
      end
    end
  end
end

#link_element(props) ⇒ Object 



4
5
6
7
8
9
10
 
# File 'lib/scarpe/components/calzini/text_widgets.rb', line 4

def link_element(props)
  HTML.render do |h|
    h.a(**link_attributes(props)) do
      props["text"]
    end
  end
end

#list_box_element(props) ⇒ Object 



45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'lib/scarpe/components/calzini/misc.rb', line 45

def list_box_element(props)
  onchange = handler_js_code("change", "this.options[this.selectedIndex].value")

  # Is this useful at all? Is it overridden below completely?
  option_attrs = { value: nil, selected: false }

  HTML.render do |h|
    h.select(id: html_id, onchange:, style: list_box_style(props)) do
      (props["items"] || []).each do |item|
        option_attrs = {
          value: item,
        }
        if item == props["choose"]
          option_attrs[:selected] = "true"
        end
        h.option(**option_attrs) do
          item
        end
      end
    end
  end
end

#para_element(props, &block) ⇒ Object

para_element is a bit of a hard one, since it does not-entirely-trivial mapping between display objects and IDs. But we don’t want Calzini messing with the display service or display objects.



7
8
9
10
11
 
# File 'lib/scarpe/components/calzini/para.rb', line 7

def para_element(props, &block)
  HTML.render do |h|
    h.p(**para_options(props), &block)
  end
end

#progress_element(props) ⇒ Object 



93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'lib/scarpe/components/calzini/misc.rb', line 93

def progress_element(props)
  HTML.render do |h|
    h.progress(
      id: html_id,
      style: drawable_style(props),
      role: "progressbar",
      "aria-valuenow": props["fraction"],
      "aria-valuemin": 0.0,
      "aria-valuemax": 1.0,
      max: 1,
      value: props["fraction"],
    )
  end
end

#radians_to_degrees(radians) ⇒ Object 



146
147
148
 
# File 'lib/scarpe/components/calzini.rb', line 146

def radians_to_degrees(radians)
  radians * (180.0 / Math::PI)
end

#radio_element(props) ⇒ Object 



68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
# File 'lib/scarpe/components/calzini/misc.rb', line 68

def radio_element(props)
  # This is wrong - need to default to the parent slot -- maybe its linkable ID?
  group_name = props["group"] || "no_group"

  HTML.render do |h|
    h.input(
      type: :radio,
      id: html_id,
      onclick: handler_js_code("click"),
      name: group_name,
      value: props["text"],
      checked: props["checked"],
      style: drawable_style(props),
    )
  end
end

#rect_element(props) ⇒ Object 



17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
# File 'lib/scarpe/components/calzini/art_widgets.rb', line 17

def rect_element(props)
  dc = props["draw_context"] || {}
  rotate = dc["rotate"]
  HTML.render do |h|
    h.div(id: html_id, style: drawable_style(props)) do
      width = props["width"].to_i
      height = props["height"].to_i
      if props["curve"]
        width += 2 * props["curve"].to_i
        height += 2 * props["curve"].to_i
      end
      h.svg(width:, height:) do
        attrs = { x: props["left"], y: props["top"], width: props["width"], height: props["height"], style: rect_svg_style(props) }
        attrs[:rx] = props["curve"] if props["curve"]

        h.rect(**attrs, transform: "rotate(#{rotate} #{width / 2} #{height / 2})")
      end
    end
  end
end

#render(drawable_name, properties = shoes_styles, &block) ⇒ String

Render the Shoes drawable of type drawable_name with the given properties to HTML and return it. If the drawable type takes a block (e.g. Stack or Flow) then the block will be properly rendered.

Parameters:

  • drawable_name (String) —

    the drawable name like “alert”, “button” or “rect”

  • properties (Hash) (defaults to: shoes_styles) —

    a drawable-specific hash of property names to values

Returns:

  • (String) —

    the rendered HTML



45
46
47
 
# File 'lib/scarpe/components/calzini.rb', line 45

def render(drawable_name, properties = shoes_styles, &block)
  send("#{drawable_name}_element", properties, &block)
end

#rgb_to_hex(color) ⇒ Object

Convert an [r, g, b, a] array to an HTML hex color code Arrays support alpha. HTML hex does not. So premultiply.



118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
# File 'lib/scarpe/components/calzini.rb', line 118

def rgb_to_hex(color)
  return color if color.nil?

  r, g, b, a = *color
  if r.is_a?(Float)
    a ||= 1.0
    r_float = r * a
    g_float = g * a
    b_float = b * a
  else
    a ||= 255
    a_float = (a / 255.0)
    r_float = (r.to_f / 255.0) * a_float
    g_float = (g.to_f / 255.0) * a_float
    b_float = (b.to_f / 255.0) * a_float
  end

  r_int = (r_float * 255.0).to_i.clamp(0, 255)
  g_int = (g_float * 255.0).to_i.clamp(0, 255)
  b_int = (b_float * 255.0).to_i.clamp(0, 255)

  "#%0.2X%0.2X%0.2X" % [r_int, g_int, b_int]
end

#slot_element(props, &block) ⇒ Object 



4
5
6
7
8
 
# File 'lib/scarpe/components/calzini/slots.rb', line 4

def slot_element(props, &block)
  HTML.render do |h|
    h.div((props["html_attributes"] || {}).merge(id: html_id, style: slot_style(props)), &block)
  end
end

#span_element(props, &block) ⇒ Object 



12
13
14
15
16
 
# File 'lib/scarpe/components/calzini/text_widgets.rb', line 12

def span_element(props, &block)
  HTML.render do |h|
    h.span(**span_options(props), &block)
  end
end

#stack_element(props, &block) ⇒ Object 



16
17
18
19
20
 
# File 'lib/scarpe/components/calzini/slots.rb', line 16

def stack_element(props, &block)
  HTML.render do |h|
    h.div((props["html_attributes"] || {}).merge(id: html_id, style: stack_style(props)), &block)
  end
end

#star_element(props, &block) ⇒ Object 



48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
# File 'lib/scarpe/components/calzini/art_widgets.rb', line 48

def star_element(props, &block)
  dc = props["draw_context"] || {}
  fill = dc["fill"]
  stroke = dc["stroke"]
  fill = "black" if !fill || fill == ""
  stroke = "black" if !stroke || stroke == ""
  HTML.render do |h|
    h.div(id: html_id, style: star_style(props)) do
      h.svg(width: props["outer"], height: props["outer"], style: "fill:#{fill}") do
        h.polygon(points: star_points(props), style: "stroke:#{stroke};stroke-width:2")
      end
      block.call(h) if block_given?
    end
  end
end

#strong_element(props, &block) ⇒ Object 



30
31
32
33
34
 
# File 'lib/scarpe/components/calzini/text_widgets.rb', line 30

def strong_element(props, &block)
  HTML.render do |h|
    h.strong(&block)
  end
end

#text_size(sz) ⇒ Object 



80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'lib/scarpe/components/calzini.rb', line 80

def text_size(sz)
  case sz
  when Numeric
    sz
  when Symbol
    SIZES[sz]
  when String
    SIZES[sz.to_sym] || sz.to_i
  else
    raise "Unexpected text size object: #{sz.inspect}"
  end
end

#video_element(props) ⇒ Object 



85
86
87
88
89
90
91
 
# File 'lib/scarpe/components/calzini/misc.rb', line 85

def video_element(props)
  HTML.render do |h|
    h.video(id: html_id, style: drawable_style(props), controls: true) do
      h.source(src: @url, type: props["format"])
    end
  end
end