Skip to content

Commit

Permalink
Fixed issue #14332: Expression manager broken in Bootstrap buttons
Browse files Browse the repository at this point in the history 
Dev: rewriting using existing EM system
  • Loading branch information
@Shnoulle
Shnoulle committed Dec 11, 2018
1 parent 6819df7 commit 8a6d607
Show file tree
Hide file tree
Showing 10 changed files with 35 additions and 88 deletions.
2 changes: 1 addition & 1 deletion assets/scripts/expressions/em_javascript.js
View file
Expand Up @@ -43,7 +43,7 @@ $(document).on("change",".radio-item :radio:not([onclick]), .button-item :radio:
checkconditions($(this).val(), $(this).attr('name'), 'radio', 'click')
});
/* checkbox item */
$(document).on("change",".checkbox-item :checkbox:not([onclick])",function(event){
$(document).on("change",".checkbox-item :checkbox:not([onclick]),.button-item :checkbox:not([onclick])",function(event){
checkconditions($(this).val(), $(this).attr('name'), 'checkbox', 'click')
});

Expand Down
17 changes: 5 additions & 12 deletions themes/question/bootstrap_buttons/survey/questions/answer/listradio/answer.twig
View file
Expand Up @@ -8,13 +8,10 @@
#}

<!-- List Radio -->

<!-- answer -->
{{ sTimer }}

<div class="row {{coreClass}}" role="group">
<div class="list-unstyled form-inline btn-toolbar col-sm-12 " data-toggle="buttons" role="radiogroup" aria-labelledby="ls-question-text-{{name }}">

<div class="container-fluid">
<div class="row {{coreClass}} form-inline " data-toggle="buttons" role="radiogroup" aria-labelledby="ls-question-text-{{name }}">
{# rows/answer_row.php #}
{{ sRows }}

Expand All @@ -26,17 +23,13 @@
}}
</div>
{# Must add it only of other is set ! #}
<div class="col-sm-12 hide" id="{{ name }}-div">
<label for="answer{{ name }}othertext" class="control-label" id="label-id-{{ name }}">{{ othertext }}</label>
<!-- comment -->
{{ gT('Other:') }}
<div class="row ls-js-hidden form-inline answer-item" id="div{{ name }}other">
<label for="answer{{ name }}othertext" class="control-label" id="label-id-{{ name }}">{{ gT('Other:') }}</label>
<input
type="text"
class="form-control {{ kpclass }} input-sm col-sm-4"
class="form-control {{ kpclass }} input-sm"
id="answer{{ name }}othertext"
name="{{ name }}other"
title="{{ gT('Other') }}"
onkeyup="checkconditions(this.value, this.name, this.type);"
>
</label>
</div>
Expand Down
13 changes: 1 addition & 12 deletions ...n/bootstrap_buttons/survey/questions/answer/listradio/assets/scripts/bootstrapbuttons.css
View file
@@ -1,12 +1 @@
.bootstrap-item input {
visibility:hidden !important;
display: none !important;
}

.bootstrap-item {
margin: 2px 2px;
}

.bootstrap-buttons-div {
padding: 0 2px;
}
.bootstrap-buttons-div{margin-bottom:0.2em} /* Usage of em since we don't know size set by theme */
47 changes: 13 additions & 34 deletions ...on/bootstrap_buttons/survey/questions/answer/listradio/assets/scripts/bootstrapbuttons.js
View file
@@ -1,34 +1,13 @@
/*
* This file is part of LimeSurvey
* See COPYRIGHT.php for copyright notices and details.
* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GNU/GPL License v2 or later
*
* This javascript updates value of "other" input field, shows "other" input field when "Other" radio button is checked
* and triggers validation
*/



$( document ).ready(function() {
$(".bootstrap-radio-value").each( function( index, element ){
if ($(this).val()){
name = $(this).data('name');
// "other" input field
$("#answer" + name + "othertext").val($(this).val());
$("#" + name + "-div").removeClass('hide');
// execute validation
checkconditions($(this).val(), name, this.type);
}
});

$(".bootstrap-radio").change(function(){
name = $(this).attr('name');
// conditionaly show or hide "other" input field
if ($(this).val() === '-oth-'){
$("#" + name + "-div").removeClass('hide');
} else {
$("#" + name + "-div").addClass('hide');
$("#answer" + name + "othertext").val('');
}
});
});
function doBootstrapRadio(){
$(".button-item .bootstrap-radio").change(function(){
name = $(this).attr('name');
// conditionaly show or hide "other" input field
if ($(this).val() === '-oth-'){
$("#div" + name + "other").removeClass('ls-js-hidden');
} else {
$("#div" + name + "other").addClass('ls-js-hidden');
$("#answer" + name + "othertext").val('').trigger("change");
}
});

}
4 changes: 2 additions & 2 deletions themes/question/bootstrap_buttons/survey/questions/answer/listradio/rows/answer_row.twig
View file
Expand Up @@ -15,9 +15,9 @@

<!-- answer_row -->
<div class="bootstrap-buttons-div col-xs-12 {{ max_buttons_row }}">
<div id="javatbd{{ myfname }}" class="bootstrap-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">
<div id="javatbd{{ myfname }}" class="button-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">
<input
class="radio bootstrap-radio"
class="bootstrap-radio sr-only"
type="radio"
name="{{ name }}"
id="answer{{ name }}{{ code }}"
Expand Down
4 changes: 2 additions & 2 deletions ...uestion/bootstrap_buttons/survey/questions/answer/listradio/rows/answer_row_noanswer.twig
View file
Expand Up @@ -13,9 +13,9 @@

<!-- answer_row_noanswer -->
<div class="bootstrap-buttons-div col-xs-12 {{ max_buttons_row }}">
<div id="javatbd{{ name }}F" class="bootstrap-item btn btn-primary {{ button_size_class }} {% if check_ans!='' %} active {% endif %} col-xs-12 col-sm-12">
<div id="javatbd{{ name }}" class="button-item btn btn-primary {{ button_size_class }} {% if check_ans!='' %} active {% endif %} col-xs-12 col-sm-12">
<input
class="radio bootstrap-radio"
class="bootstrap-radio sr-only"
type="radio"
name="{{ name }}"
id="answer{{ name }}"
Expand Down
13 changes: 6 additions & 7 deletions ...s/question/bootstrap_buttons/survey/questions/answer/listradio/rows/answer_row_other.twig
View file
Expand Up @@ -22,20 +22,19 @@
<!-- answer_row_other -->
<!-- Checkbox + label -->
<div class="bootstrap-buttons-div col-xs-12 {{ max_buttons_row }}">
<div id="javatbd{{ name }}F" class="bootstrap-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active focus {% endif %} col-xs-12 col-sm-12" {{ sDisplayStyle }}>
<div id="javatbd{{ name }}other" class="button-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active focus {% endif %} col-xs-12 col-sm-12" {{ sDisplayStyle }}>
<input
class="radio bootstrap-radio"
class="bootstrap-radio sr-only"
type="radio"
value="-oth-"
name="{{ name }}"
id="SOTH{{ name }}"
id="answer{{ name }}othercbox"
{{ checkedState }}
/>
<label for="answer{{ name }}">
<span class="" aria-hidden="true"></span> {{ gT('Other') }}
<label for="answer{{ name }}othercbox">
{{ gT('Other') }}
</label>
</div>
<input type="hidden" class="bootstrap-radio-value" {{ answer_other }} name="answer{{ name }}othervalue" data-name="{{ name }}" id="answer{{ name }}othervalue">
</div>
<script>doBootstrapRadio();</script>
<!-- end of answer_row_other -->

13 changes: 0 additions & 13 deletions ...otstrap_buttons/survey/questions/answer/multiplechoice/assets/scripts/bootstrapbuttons.js
View file
Expand Up @@ -10,19 +10,6 @@


$( document ).ready(function() {

// ROW
$(".bootstrap-checkbox").change(function(){
name = $(this).data('name');
// set value for java element
if ($(this).is(':checked')){
$("#java" + name).val('Y');
} else {
$("#java" + name).val('');
}
checkconditions(this.value, this.name, this.type);
});

// OTHER
$(".bootstrap-checkbox-other-value").each( function( index, element ){
name = $(this).data('name');
Expand Down
4 changes: 2 additions & 2 deletions ...es/question/bootstrap_buttons/survey/questions/answer/multiplechoice/rows/answer_row.twig
View file
Expand Up @@ -21,12 +21,12 @@

<!-- answer_row -->
<div class="bootstrap-buttons-div col-xs-12 {{ max_buttons_row }}">
<div id='javatbd{{ myfname }}' class="bootstrap-item btn btn-primary checkbox-item {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">
<div id='javatbd{{ myfname }}' class="button-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">
<input
type="checkbox"
name="{{ myfname }}"
data-name="{{myfname}}"
class="bootstrap-checkbox"
class="bootstrap-checkbox sr-only"
id="answer{{ myfname }}"
{{ checkedState }}
value="Y"
Expand Down
6 changes: 3 additions & 3 deletions ...stion/bootstrap_buttons/survey/questions/answer/multiplechoice/rows/answer_row_other.twig
View file
Expand Up @@ -17,12 +17,12 @@

<!-- answer_row_other -->
<div class="bootstrap-buttons-div col-xs-12 {{ max_buttons_row }}">
<div id='javatbd{{ myfname }}' class="bootstrap-item btn btn-primary checkbox-item {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">
<div id='javatbd{{ myfname }}' class="button-item btn btn-primary {{ button_size_class }} {% if checkedState!='' %} active {% endif %} col-xs-12 col-sm-12">

<!-- Checkbox + label -->
<!-- checkbox -->
<input
class="other-checkbox bootstrap-checkbox-other"
class="other-checkbox bootstrap-checkbox-other sr-only"
type="checkbox"
name="{{myfname}}cbox"
id="answer{{myfname}}cbox"
Expand All @@ -38,7 +38,7 @@
name="java{{myfname}}"
id="java{{myfname}}"
value="{{sValueHidden}}"
class="bootstrap-checkbox-other-value"
class="button-checkbox-other-value"
data-name="{{myfname}}"
/>
</div>
Expand Down

0 comments on commit 8a6d607

Please sign in to comment.