Module: Scarpe::Components::Tiranti
- Extended by:
- Tiranti
- Includes:
- Calzini
- Included in:
- Tiranti
- Defined in:
- scarpe-components/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
- #alert_element(props) ⇒ Object
-
#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.
- #check_element(props) ⇒ Object
-
#empty_page_element(theme: ENV["SCARPE_BOOTSTRAP_THEME"] || "sketchy") ⇒ Object
Currently we're using Bootswatch 5.
- #para_element(props, &block) ⇒ Object
- #progress_element(props) ⇒ Object
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
[View source]
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 'scarpe-components/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: (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.(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.(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 'scarpe-components/lib/scarpe/components/tiranti.rb', line 55 def (props) HTML.render do |h| h.( id: html_id, type: "button", class: props["html_class"] ? "btn #{props["html_class"]}" : "btn btn-primary", onclick: handler_js_code("click"), style: (props) ) do props["text"] end end end |
#check_element(props) ⇒ Object
[View source]
115 116 117 118 119 120 121 122 123 124 125 126 127 |
# File 'scarpe-components/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 https://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 'scarpe-components/lib/scarpe/components/tiranti.rb', line 23 def empty_page_element(theme: ENV["SCARPE_BOOTSTRAP_THEME"] || "sketchy") comp_dir = File.("#{__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
[View source]
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
# File 'scarpe-components/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
[View source]
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
# File 'scarpe-components/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 |