Mercurial > libervia-templates
annotate sat_templates/templates/bulma/input/xmlui.html @ 360:c98a0a4a3fd0
bulma: "call" template, first draft:
Basic template to make or receive calls.
rel 422
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Thu, 01 Jun 2023 20:50:47 +0200 |
| parents | 16b3a2988afd |
| children |
| rev | line source |
|---|---|
| 230 | 1 {% import 'input/field.html' as field %} |
| 2 | |
| 3 {# generate methods #} | |
| 4 | |
| 5 {% macro generate_container(cont, config) %} | |
| 6 {% if cont.type == 'vertical' %} | |
| 7 {{ vertical_container(cont, config) }} | |
| 8 {% elif cont.type == 'pairs' %} | |
| 9 {{ pairs_container(cont, config) }} | |
| 10 {% elif cont.type == 'label' %} | |
| 11 {{ label_container(cont, config) }} | |
| 12 {% endif %} | |
| 13 {% endmacro %} | |
| 14 | |
| 15 {% macro generate_widget(wid, config, id=none) %} | |
| 16 {% if wid.type == 'text' %} | |
| 17 {{ text_widget(wid, config, id=id) }} | |
| 18 {% elif wid.type == 'label' %} | |
| 19 {{ label_widget(wid, config) }} | |
| 20 {% elif wid.type == 'string' %} | |
| 21 {{ string_widget(wid, config, id=id) }} | |
| 22 {% elif wid.type == 'jid' %} | |
| 23 {# TODO: proper JID widget #} | |
| 24 {{ string_widget(wid, config, id=id) }} | |
| 25 {% elif wid.type == 'textbox' %} | |
| 26 {{ textbox_widget(wid, config, id=id) }} | |
| 27 {% elif wid.type == 'xhtmlbox' %} | |
| 28 {{ xhtmlbox_widget(wid, config, id=id) }} | |
| 29 {% elif wid.type == 'list' %} | |
| 30 {{ list_widget(wid, config, id=id) }} | |
| 31 {% endif %} | |
| 32 {% endmacro %} | |
| 33 | |
| 34 {% macro generate_children(cont, config) %} | |
| 35 {% for child in cont.children %} | |
| 36 {% if child.category == 'container' %} | |
| 37 {{ generate_container(child, config) }} | |
| 38 {% else %} | |
| 39 {{ generate_widget(child, config) }} | |
| 40 {% endif %} | |
| 41 {% endfor %} | |
| 42 | |
| 43 {% endmacro %} | |
| 44 | |
| 45 {% macro generate(xmlui, form=true, filters=none, attributes=none, ignore=none) %} | |
| 46 {# generate HTML from XMLUI | |
| 47 @param xmlui(template_xmlui.XMLUIPanel): xmlui to use | |
| 48 @param form(bool): if true will generate form elements | |
| 49 @param filters(dict,none): filters as expected by item_filter | |
| 50 @param attributes(dict,none): extra attributes to put on named widgets | |
| 51 #} | |
| 52 {% set config = { | |
| 53 'form':form, | |
| 54 'filters':filters or {}, | |
| 55 'attrs': attributes or {}, | |
| 56 'ignore': ignore or [], | |
| 57 } | |
| 58 %} | |
| 59 {{ generate_container(xmlui.main_cont, config) }} | |
| 60 {% endmacro %} | |
| 61 | |
| 62 {% macro generate_table(xmlui_items, fields, formatters, tr_class_fields, on_click) %} | |
| 63 {# generate a HTML table from requested widgets names | |
| 64 @param xmlui_items(iterable[unicode]): list of xmlui to show (one per row) | |
| 65 @param fields(tuple[unicode,unicode]): fields to show (name, label) | |
| 66 @param formatters(dict): dictionary of templates to format values: | |
| 67 field_name => template | |
| 68 if no formatter is set (or None is used) for a field, it will be used unmodified. | |
| 69 current xmlui items will be set as "item" key | |
| 70 @param tr_class_fields(iterable[unicode]): name of fields to use as class | |
| 71 class will be "{name}_{value}" where name is field name, and value field value | |
| 72 all lowercase/stripped | |
| 73 @param on_click(data_objects.OnClick): thing to do when clicking on a row | |
| 74 #} | |
| 75 {% if formatters is undefined %} | |
| 76 {% set formatters = {} %} | |
| 77 {% endif %} | |
| 78 {% if on_click is undefined %} | |
| 79 {% set on_click = {} %} | |
| 80 {% endif %} | |
| 81 <table> | |
| 82 <thead> | |
| 83 <tr> | |
| 84 {% for name,label in fields %} | |
| 85 <th>{{ label }}</th> | |
| 86 {% endfor %} | |
| 87 </tr> | |
| 88 </thead> | |
| 89 <tbody> | |
| 90 {% for xmlui in xmlui_items %} | |
|
359
16b3a2988afd
massive refactoring from camelCase -> snake_case. See backend commit log for more details
Goffi <goffi@goffi.org>
parents:
341
diff
changeset
|
91 {% set link=on_click.format_url(item=xmlui.widget_value) if on_click.url else none %} |
| 230 | 92 <tr {{ {'class': xmlui|xmlui_class(tr_class_fields)}|xmlattr }}> |
| 93 | |
| 94 {% for name,label in fields %} | |
| 95 <td {{ {'class': 'td_'+name}|xmlattr }}> | |
| 96 {% for value in xmlui.widgets[name].values %} | |
| 97 <a {{ {'href':link}|xmlattr }}>{{ value|adv_format(formatters.get(name),item=xmlui.widget_value)Â }}</a> | |
| 98 {% endfor %} | |
| 99 </td> | |
| 100 {% endfor %} | |
| 101 </tr> | |
| 102 {% endfor %} | |
| 103 </tbody> | |
| 104 </table> | |
| 105 {% endmacro %} | |
| 106 | |
| 107 | |
| 108 | |
| 109 | |
| 110 {% macro generate_list(xmlui_items, fields, formatters, item_class_fields, field_class_map, on_click) %} | |
| 111 {# generate a list of rendered XMLUI from requested widgets names | |
|
341
977037f5ac81
(bulma) CSS: use line-through decoration on title when viewing single list item
Goffi <goffi@goffi.org>
parents:
330
diff
changeset
|
112 very similar to generate_table but generate a list instead of a table |
| 230 | 113 @param xmlui_items(iterable[unicode]): list of xmlui to show |
| 114 @param fields(tuple[unicode,unicode]): fields to show (name, label) | |
| 115 @param formatters(dict): dictionary of templates to format values: | |
| 116 field_name => template | |
| 117 if no formatter is set (or None is used) for a field, it will be used unmodified. | |
| 118 current xmlui items will be set as "item" key for the template | |
| 119 @param item_class_fields(iterable[unicode]): name of fields to use as class | |
| 120 class will be "{name}_{value}" where name is field name, and value field value | |
| 121 all lowercase/stripped | |
| 122 @param field_class_map(dict): dictionary of field name to classes to use | |
| 123 @param on_click(data_objects.OnClick): thing to do when clicking on a row | |
| 124 #} | |
| 125 {% if formatters is undefined %} | |
| 126 {% set formatters = {} %} | |
| 127 {% endif %} | |
| 128 {% if on_click is undefined %} | |
| 129 {% set on_click = {} %} | |
| 130 {% endif %} | |
| 131 {% if field_class_map is undefined %} | |
| 132 {% set field_class_map = {} %} | |
| 133 {% endif %} | |
| 134 {% for xmlui in xmlui_items %} | |
|
359
16b3a2988afd
massive refactoring from camelCase -> snake_case. See backend commit log for more details
Goffi <goffi@goffi.org>
parents:
341
diff
changeset
|
135 {% set link=on_click.format_url(item=xmlui.widget_value) if on_click.url else none %} |
| 230 | 136 <div class="media x-is-hoverable"> |
| 137 <div class="media-content"> | |
|
330
b85b72f44f01
bulma (input/xmlui): add `list-item` class so it can be targeted easily
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
138 <a {{ {'class': 'list-item has-text-black ' + xmlui|xmlui_class(item_class_fields), |
| 230 | 139 'href':link}|xmlattr }}> |
| 140 <div class="content"> | |
| 141 {% for name,label in fields %} | |
| 142 <span {{ {'class': 'xmlui_field__'+name}|xmlattr }}> | |
| 143 {% for label in xmlui.widgets.get(name, {}).labels %} | |
| 144 <span {{ {'class': field_class_map.get(name)}|xmlattr }}>{{ label|adv_format(formatters.get(name),item=xmlui.widget_value)Â }}</span> | |
| 145 {% endfor %} | |
| 146 </span> | |
| 147 {% endfor %} | |
| 148 </div> | |
| 149 </a> | |
| 150 </div> | |
| 151 </div> | |
| 152 {% endfor %} | |
| 153 {% endmacro %} | |
| 154 | |
| 155 | |
| 156 | |
| 157 | |
| 158 | |
| 159 {# containers #} | |
| 160 | |
| 161 {% macro vertical_container(cont, config) %} | |
| 162 <div class="xmlui_cont xmlui_cont_vertical"> | |
| 163 {{ generate_children(cont, config) }} | |
| 164 </div> | |
| 165 {% endmacro %} | |
| 166 | |
| 167 {% macro pairs_container(cont, config) %} | |
| 168 {# TODO: proper impelmentation (do the same as vertical container for now #} | |
| 169 <div class="xmlui_cont xmlui_cont_vertical"> | |
| 170 {{ generate_children(cont, config) }} | |
| 171 </div> | |
| 172 {% endmacro %} | |
| 173 | |
| 174 {% macro label_container(cont, config) %} | |
| 175 <div class="xmlui_cont xmlui_cont_vertical"> | |
| 176 {% for child in cont.children %} | |
| 177 {% if loop.index is odd %} | |
| 178 {# label #} | |
| 179 {% if child.for_name not in config.ignore %} | |
| 180 <div class="field"> | |
| 181 {% if child.type == 'label' %} | |
| 182 {% set for_ = ('wid_' + (child.for_name or child.name or '_noname'))|next_gidx %} | |
| 183 {{ label_widget(child, config, for=for_) }} | |
| 184 {% endif %} | |
| 185 {% endif %} | |
| 186 {% else %} | |
| 187 {# widget #} | |
| 188 {% if child.name not in config.ignore %} | |
| 189 {% set id = ('wid_' + (child.name or '_noname'))|cur_gidx %} | |
| 190 {{ generate_widget(child, config, id=id) }} | |
| 191 </div> | |
| 192 {% endif %} | |
| 193 {% endif %} | |
| 194 {% endfor %} | |
| 195 </div> | |
| 196 {% endmacro %} | |
| 197 | |
| 198 | |
| 199 {# widgets #} | |
| 200 | |
| 201 {% macro text_widget(wid, config, id=none) %} | |
| 202 {% if config.form %} | |
| 203 <input class="input is-static xmlui_widget xmlui_text" type="text" {{ {'id':id, 'value': wid|item_filter(config.filters)|default('\u00A0',true)}|xmlattr }}> | |
| 204 {% else %} | |
| 205 <p class="xmlui_widget xmlui_text" {{ {'id':id}|xmlattr }}> | |
| 206 {{- wid|item_filter(config.filters)|default('\u00A0',true) -}} | |
| 207 </p> | |
| 208 {% endif %} | |
| 209 {% endmacro%} | |
| 210 | |
| 211 {% macro label_widget(wid, config, for=none) %} | |
| 212 {% if config.form %} | |
| 213 <label class="label xmlui_widget xmlui_label" {{ {'for':for}|xmlattr }}> | |
| 214 {{wid|item_filter(config.filters)}} | |
| 215 </label> | |
| 216 {% else %} | |
| 217 <span class="label xmlui_widget xmlui_label" {{ {'id':none if not for else 'label_%s'|format(for)}|xmlattr }}>{{wid|item_filter(config.filters)}}</span> | |
| 218 {% endif %} | |
| 219 {% endmacro%} | |
| 220 | |
| 221 {% macro string_widget(wid, config, id=none) %} | |
| 222 {% if config.form %} | |
| 223 <input class="input xmlui_widget xmlui_string" type="text" {{ {'name':wid.name, 'id':id, 'value':wid|item_filter(config.filters)}|dict_ext(config.attrs, wid.name)|xmlattr }} | |
| 224 {{ "readonly" if wid.read_only }} > | |
| 225 {% else %} | |
| 226 <p class="content"> | |
| 227 {{- wid|item_filter(config.filters) -}} | |
| 228 </p> | |
| 229 {% endif %} | |
| 230 {% endmacro%} | |
| 231 | |
| 232 {% macro textbox_widget(wid, config, id=none) %} | |
| 233 {% if config.form %} | |
| 234 <textarea class="textarea xmlui_widget xmlui_textbox" rows="10" cols="50" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}> | |
| 235 {{- wid|item_filter(config.filters) -}} | |
| 236 </textarea> | |
| 237 {% else %} | |
| 238 <p class="content xmlui_widget xmlui_textbox" {{ {'id':id}|xmlattr }}> | |
| 239 {{- wid|item_filter(config.filters) -}} | |
| 240 </p> | |
| 241 {% endif %} | |
| 242 {% endmacro%} | |
| 243 | |
| 244 {% macro xhtmlbox_widget(wid, config, id=none) %} | |
| 245 {% if config.form and not wid.read_only %} | |
| 246 <textarea class="textarea xmlui_widget xmlui_xhtmlbox" rows="10" cols="50" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}> | |
| 247 {{- wid|item_filter(config.filters) -}} | |
| 248 </textarea> | |
| 249 {% else %} | |
| 250 <div class="content xmlui_widget xmlui_xhtmlbox" {{ {'id':id}|xmlattr }}> | |
| 251 {{- wid|item_filter(config.filters) -}} | |
| 252 </div> | |
| 253 {% endif %} | |
| 254 {% endmacro%} | |
| 255 | |
| 256 {% macro list_widget(wid, config, id=none) %} | |
| 257 {% if config.form %} | |
| 258 <div class="select"> | |
| 259 <select class="xmlui_widget xmlui_list" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}> | |
| 260 {% for value,label in wid.options %} | |
| 261 <option {{ {'value':value}|xmlattr }} {{ 'selected' if value in wid.selected }}> | |
| 262 {{- label -}} | |
| 263 </option> | |
| 264 {% endfor %} | |
| 265 </select> | |
| 266 </div> | |
| 267 {% else %} | |
| 268 <div class="content xmlui_widget xmlui_list" {{ {'id':id}|xmlattr }}> | |
| 269 {% for value,label in wid.items %} | |
| 270 <span class="xmlui_list_item value_{{value|attr_escape}}"> | |
| 271 {{- label -}} | |
| 272 </span> | |
| 273 {% endfor %} | |
| 274 </div> | |
| 275 {% endif %} | |
| 276 {% endmacro%} |