switch toggle to checkbox for overrides

This commit is contained in:
Gert
2015-06-08 15:03:36 +02:00
committed by Andy Miller
parent 592b54e9ad
commit 60f0de1e94
4 changed files with 30 additions and 32 deletions

File diff suppressed because one or more lines are too long

View File

@@ -28,6 +28,7 @@
CheckboxesField.prototype.disabled = function(state) {
if (typeof state !== 'undefined') {
this._disabled = state ? true : false;
this.el.css('opacity', state ? 0.6 : 1);
}
return this._disabled;

View File

@@ -57,21 +57,28 @@
function linkToggle (element, toggleable) {
element.onChange(function (value) {
toggleable.find('input').prop('checked', false).filter('[value=1]').prop('checked', true);
toggleable.find('input').prop('checked', true);
toggleable.siblings('label').css('opacity', 1);
element.disabled(false);
});
toggleable.find('input').on('change', function () {
var el = $(this);
if (el.is(':checked')) {
var on = el.val() == '1' ? true : false;
var el = $(this),
on = el.is(':checked');
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
}
}
});
var on = toggleable.is(':checked');
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
}
}
var Form = function (el, options) {

View File

@@ -4,9 +4,21 @@
{% block field %}
<div class="form-field grid">
{% block contents %}
<div class="form-label block size-1-3">
<label>
{% if field.toggleable %}
<span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
<input type="checkbox"
id="toggleable_{{ field.name }}"
value="1"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is not null %}checked="checked"{% endif %}
>
<label for="toggleable_{{ field.name }}"></label>
</span>
{% endif %}
<label class="{{ field.toggleable ? 'toggleable' : '' }}">
{% block label %}
{% if field.help %}
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
@@ -43,28 +55,6 @@
{% endblock %}
{% endblock %}
</div>
{% if field.toggleable %}
<div class="block size-1-6">
<div class="switch-toggle switch-grav switch-2" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
<input
type="radio" value="1"
id="toggleable_{{ field.name }}_1"
class="highlight"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is not null %}checked="checked"{% endif %}
/>
<label for="toggleable_{{ field.name }}_1">On</label>
<input
type="radio" value="0"
id="toggleable_{{ field.name }}_0"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is null %}checked="checked"{% endif %}
/>
<label for="toggleable_{{ field.name }}_0">Off</label>
<a></a>
</div>
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}