rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Add date/time-picker, autocomplete support for forms2 (deform)

Browse source
This commit is contained in:
Lance Edgar 2017-11-20 17:01:08 -06:00
parent f541a94351
commit 6ea88808b2
7 changed files with 267 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

77
tailbone/templates/deform/autocomplete_jquery.pt Normal file
View file

@ -0,0 +1,77 @@
<div tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
field_display field_display;
style style|field.widget.style"
id="${oid}-container"
class="autocomplete-container">
<input type="hidden"
name="${name}"
id="${oid}"
value="${cstruct}" />
<input type="text"
name="${oid}-textbox"
id="${oid}-textbox"
value="${field_display}"
class="autocomplete-textbox"
style="display: none;" />
<div id="${oid}-display"
class="autocomplete-display"
style="display: none;">
<span>${field_display or ''}</span>
<button type="button" id="${oid}-change" class="autocomplete-change">Change</button>
</div>
<script type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + '-textbox').autocomplete(${options});
$('#' + oid + '-textbox').on('autocompleteselect', function (event, ui) {
$('#' + oid).val(ui.item.value);
$('#' + oid + '-display span:first').text(ui.item.label);
$('#' + oid + '-textbox').hide();
$('#' + oid + '-display').show();
return false;
});
$('#' + oid + '-change').click(function() {
$('#' + oid).val('');
$('#' + oid + '-display').hide();
with ($('#' + oid + '-textbox')) {
val('');
show();
focus();
}
});
}
);
</script>
<script tal:condition="cstruct" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + '-display').show();
}
);
</script>
<script tal:condition="not cstruct" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + '-textbox').show();
}
);
</script>
</div>

23
tailbone/templates/deform/date_jquery.pt Normal file
View file

@ -0,0 +1,23 @@
<div tal:define="css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
type_name type_name|field.widget.type_name;"
tal:omit-tag="">
${field.start_mapping()}
<input type="${type_name}"
name="date"
value="${cstruct}"
tal:attributes="class string: ${css_class or ''} form-control;
style style"
id="${oid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function deform_cb(oid) {
$('#' + oid).datepicker(${options_json});
}
);
</script>
</div>

24
tailbone/templates/deform/time_jquery.pt Normal file
View file

@ -0,0 +1,24 @@
<span tal:define="size size|field.widget.size;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style|None;
type_name type_name|field.widget.type_name;"
tal:omit-tag="">
${field.start_mapping()}
<input type="${type_name}"
name="time"
value="${cstruct}"
tal:attributes="size size;
class string: ${css_class or ''} form-control;
style style"
id="${oid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function(oid) {
$('#' + oid).timepicker(${options_json});
}
);
</script>
</span>

14
tailbone/templates/master/edit.mako
View file

@ -19,14 +19,12 @@
});
</script>
% if dform is not Undefined:
% for field in dform:
<% resources = field.get_widget_resources() %>
% for path in resources['js']:
${h.javascript_link(request.static_url(path))}
% endfor
% for path in resources['css']:
${h.stylesheet_link(request.static_url(path))}
% endfor
<% resources = dform.get_widget_resources() %>
% for path in resources['js']:
${h.javascript_link(request.static_url(path))}
% endfor
% for path in resources['css']:
${h.stylesheet_link(request.static_url(path))}
% endfor
% endif
</%def>