Module: Scarpe::Components::Tiranti

Extended by:
Tiranti
Includes:
Calzini
Included in:
Tiranti
Defined in:
lib/scarpe/components/tiranti.rb

Overview

The Tiranti 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) display_properties - the display properties for this object, unless overridden in render()

Constant Summary

Constants included from Calzini

Calzini::HTML, Calzini::SPACING_DIRECTIONS

Instance Method Summary collapse

Methods included from Calzini

#arc_element, #border_element, #contains_number?, #contains_only_numbers?, #degrees_to_radians, #dimensions_length, #documentroot_element, #drawable_style, #edit_box_element, #edit_line_element, #first_color_of, #flow_element, #image_element, #line_element, #list_box_element, #oval_element, #radians_to_degrees, #radio_element, #rect_element, #render, #rgb_to_hex, #slot_element, #spacing_styles_for_attr, #stack_element, #star_element, #text_drawable_element, #text_size, #video_element

Methods included from Base64

#encode_file_to_base64, #mime_type_for_filename, #valid_url?

Instance Method Details

#alert_element(props) ⇒ Object 



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
# File 'lib/scarpe/components/tiranti.rb', line 89

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

  HTML.render do |h|
    h.div(id: html_id, class: "modal", tabindex: -1, role: "dialog", style: alert_overlay_style(props)) do
      h.div(class: "modal-dialog", role: "document") do
        h.div(class: "modal-content", style: alert_modal_style) do
          h.div(class: "modal-header") do
            h.h5(class: "modal-title") { "Alert" }
            h.button(type: "button", class: "close", data_dismiss: "modal", aria_label: "Close") do
              h.span(aria_hidden: "true") { "×" }
            end
          end
          h.div(class: "modal-body") do
            h.p { props["text"] }
          end
          h.div(class: "modal-footer") do
            h.button(type: "button", onclick:, class: "btn btn-primary") { "OK" }
            #h.button(type: "button", class: "btn btn-secondary") { "Close" }
          end
        end
      end
    end
  end
end

#button_element(props) ⇒ Object

How do we want to handle theme-specific colours and primary/secondary buttons in Bootstrap? “Disabled” could be checked in properties. Is there any way we can/should use “outline” buttons?



55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'lib/scarpe/components/tiranti.rb', line 55

def button_element(props)
  HTML.render do |h|
    h.button(
      id: html_id,
      type: "button",
      class: props["html_class"] ? "btn #{props["html_class"]}" : "btn btn-primary",
        onclick: handler_js_code("click"), style: button_style(props)
    ) do
      props["text"]
    end
  end
end

#check_element(props) ⇒ Object 



115
116
117
118
119
120
121
122
123
124
125
126
127
 
# File 'lib/scarpe/components/tiranti.rb', line 115

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

#empty_page_element(theme: ENV["SCARPE_BOOTSTRAP_THEME"] || "sketchy") ⇒ Object

Currently we’re using Bootswatch 5. Bootswatch themes downloaded from bootswatch.com/5/THEME_NAME/bootstrap.css



23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
# File 'lib/scarpe/components/tiranti.rb', line 23

def empty_page_element(theme: ENV["SCARPE_BOOTSTRAP_THEME"] || "sketchy")
  comp_dir = File.expand_path("#{__dir__}/../../..")
  bootstrap_js_url = Scarpe::Webview.asset_server.asset_url("#{comp_dir}/assets/bootstrap-themes/bootstrap.bundle.min.js", url_type: :asset)
  theme_url = Scarpe::Webview.asset_server.asset_url("#{comp_dir}/assets/bootstrap-themes/bootstrap-#{theme}.css", url_type: :asset)
  icons_url = Scarpe::Webview.asset_server.asset_url("#{comp_dir}/assets/bootstrap-themes/bootstrap-icons.min.css", url_type: :asset)

  <<~HTML
    <html>
      <head id='head-wvroot'>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href=#{theme_url.inspect}>
        <link rel="stylesheet" href=#{icons_url.inspect}>
        <style id='style-wvroot'>
          /** Style resets **/
          body {
            height: 100%;
            overflow: hidden;
          }
        </style>
      </head>
      <body id='body-wvroot'>
        <div id='wrapper-wvroot'></div>

        <script src=#{bootstrap_js_url}></script>
      </body>
    </html>
  HTML
end

#para_element(props, &block) ⇒ Object 



148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
# File 'lib/scarpe/components/tiranti.rb', line 148

def para_element(props, &block)
  ps, _extra = para_style(props)
  size = ps[:"font-size"] || "12px"
  size_int = size.to_i # Mostly useful if it's something like "12px"
  if size.include?("calc") || size.end_with?("%")
    # Very big text!
    props["tag"] = "h2"
  elsif size_int >= 48
    props["tag"] = "h1"
  elsif size_int >= 34
    props["tag"] = "h2"
  elsif size_int >= 26
    props["tag"] = "h3"
  else
    props["tag"] = "p"
  end

  super
end

#progress_element(props) ⇒ Object 



129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
# File 'lib/scarpe/components/tiranti.rb', line 129

def progress_element(props)
  progress_style = drawable_style(props).merge({
    width: "90%",
  })
  HTML.render do |h|
    h.div(id: html_id, class: "progress", style: progress_style) do
      pct = "%.1f" % ((props["fraction"] || 0.0) * 100.0)
      h.div(
        class: "progress-bar progress-bar-striped progress-bar-animated",
        role: "progressbar",
        "aria-valuenow": pct,
        "aria-valuemin": 0,
        "aria-valuemax": 100,
        style: "width: #{pct}%",
      )
    end
  end
end