Skip to content

Commit

Permalink
Fixed issue #13166: Survey theme editor - Animate checkboxes (fruity …
Browse files Browse the repository at this point in the history 
…only)
  • Loading branch information
@lacrioque
lacrioque committed Jan 12, 2018
1 parent 9b26990 commit 5943981
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 33 deletions.
10 changes: 5 additions & 5 deletions themes/survey/fruity/config.xml
View file
Expand Up @@ -61,13 +61,13 @@
<backgroundimagefile>./files/pattern.png</backgroundimagefile>
<animatebody>off</animatebody>
<bodyanimation>fadeInRight</bodyanimation>
<bodyanimationduration>1.0</bodyanimationduration>
<bodyanimationduration>1000</bodyanimationduration>
<animatequestion>off</animatequestion>
<questionanimation>flipInX</questionanimation>
<questionanimationduration>1.0</questionanimationduration>
<questionanimationduration>1000</questionanimationduration>
<animatealert>off</animatealert>
<alertanimation>shake</alertanimation>
<alertanimationduration>1.0</alertanimationduration>
<alertanimationduration>1000</alertanimationduration>
<font>noto</font>
<bodybackgroundcolor>#ffffff</bodybackgroundcolor>
<fontcolor>#444444</fontcolor>
Expand All @@ -77,10 +77,10 @@
<checkicon>f00c</checkicon>
<animatecheckbox>on</animatecheckbox>
<checkboxanimation>rubberBand</checkboxanimation>
<checkboxanimationduration>0.5</checkboxanimationduration>
<checkboxanimationduration>1000</checkboxanimationduration>
<animateradio>on</animateradio>
<radioanimation>zoomIn</radioanimation>
<radioanimationduration>0.3</radioanimationduration>
<radioanimationduration>1000</radioanimationduration>
</options>

<!-- Engine configuration is the very same as vanilla -->
Expand Down
63 changes: 45 additions & 18 deletions themes/survey/fruity/options/options.js
View file
Expand Up @@ -5,8 +5,10 @@ var prepare = function(){
$('.action_activate_bootstrapswitch').bootstrapSwitch();
var inheritPossible = ($('#general_inherit_active').length > 0 ) ;
//get option Object from Template configuration options
var optionObject = {"general_inherit" : 1}
var optionObject = {"general_inherit" : 1};
//dynamic group to be able to do linking on the fly
var generalInherit = function(){return $('#TemplateConfiguration_options').val() === 'inherit'; };
//writes options to json
var updateFieldSettings = function(){
$('.action_update_options_string_form').find('.selector_option_value_field').each(function(i,item){
optionObject[$(item).attr('name')] = $(item).val();
Expand All @@ -17,45 +19,44 @@ var prepare = function(){
});
};

//Un-/Hide everything on general inherit switch
if(generalInherit()){
$('#general_inherit_on').prop('checked',true).trigger('change').closest('label').addClass('active');
$('.action_hide_on_inherit').addClass('hidden');
} else {
$('#general_inherit_off').prop('checked',true).trigger('change').closest('label').addClass('active');
}

//get template configuration options
//the failsave is general_inherit = 1
if($('#TemplateConfiguration_options').length>0 && !generalInherit()){

try{
optionObject = JSON.parse($('#TemplateConfiguration_options').val());
} catch(e){ console.log('No valid option field!'); }
} catch(e){ console.ls.error('No valid option field!'); }
}

//check if a form exists to parse the simple option
if($('.action_update_options_string_form').length > 0 ){
//Update values in the form to the template options
console.ls.group('update_options');
$('.action_update_options_string_form').find('.selector_option_value_field').each(function(i,item){

//Get the item value from the option or define inherit through general inherit
var itemValue = generalInherit() ? 'inherit' : optionObject[$(item).attr('name')];

//Check the itemValue to be not null and set it on the configuration object if neccesary
if(itemValue == null || itemValue == undefined){
itemValue = inheritPossible ? 'inherit' : false;
optionObject[$(item).attr('name')] = itemValue;
}

//Set value to html item
$(item).val(itemValue);

//Special code for colorpickers
if($(item).hasClass('selector__colorpicker-field')){
if($(item).val() == 'inherit'){

console.ls.log($(item));

item.value = $(item).data('inheritvalue');
item.value = 'inherit';
}
}

//special code for image selectors
if($(item).hasClass('selector_image_selector')){
if($(item).val() == 'inherit'){
$('button[data-target="#'+$(item).attr('id')+'"]').prop('disabled', true);
Expand All @@ -65,31 +66,33 @@ var prepare = function(){
}

});
console.ls.groupEnd('update_options');

//hotwapping the select fields to the radiobuttons
$('.selector_radio_childfield').each(function(i, selectorItem){
//if the parent changes disable this
$('input[name='+$(selectorItem).data('parent')+']').on('change', function(){
if($(this).val() == 'on' && $(this).prop('checked') == true){
$(selectorItem).prop('disabled', false);
} else {
$(selectorItem).prop('disabled', true);
$(selectorItem).val((inheritPossible ? 'inherit' : ''))
}

//if this is an image selector disable the preview button
if($(selectorItem).hasClass('selector_image_selector')){
$('button[data-target="#'+$(selectorItem).attr('id')+'"]').prop('disabled', $(selectorItem).val() == 'inherit');
}
});
});

//Check all radio fields
$('.action_update_options_string_form').find('.selector_option_radio_field').each(function(i,item){
var itemValue = generalInherit() ? 'inherit' : optionObject[$(item).attr('name')];
//if it is a radio selector, check it and propagate the change to bootstrapSwitch
//this item can never have no value so either set it to off or inherit
if(itemValue == null || itemValue == undefined){
itemValue = inheritPossible ? 'inherit' : 'off';
optionObject[$(item).attr('name')] = itemValue;
}

//if it is a radio selector, check it and propagate the change to bootstrapSwitch
//propagate the change to bootstrapSwitch
if($(item).val() == itemValue){
$(item).prop('checked', true).trigger('change');
$(item).closest('label').addClass('active');
Expand All @@ -99,15 +102,30 @@ var prepare = function(){
//if the save button is clicked write everything into the template option field and send the form
$('.action_update_options_string_button').on('click', function(evt){
evt.preventDefault();

if(generalInherit()){
$('#TemplateConfiguration_options').val('inherit');
//and submit the form
$('#template-options-form').find('button[type=submit]').trigger('click');
//$('#template-options-form').find('button[type=submit]').trigger('click');
} else {
var newOptionObject = {};
//get all values
$('.action_update_options_string_form').find('.selector_option_value_field').each(function(i,item){

//Special code for numerical
if($(item).hasClass('selector-numerical-input')){
if(!(/^((\d+)|(inherit))$/.test($(item).val()))){
$(item).val((inheritPossible ? 'inherit' : 1000));
}
}

//disabled items should be inherit or false
if($(item).prop('disabled')){
$(item).val((inheritPossible ? 'inherit' : false));
}

newOptionObject[$(item).attr('name')] = $(item).val();

});
$('.action_update_options_string_form').find('.selector_option_radio_field').each(function(i,item){
if($(item).prop('checked'))
Expand All @@ -124,6 +142,7 @@ var prepare = function(){
$('#general_inherit_on').on('change', function(evt){
$('#TemplateConfiguration_options').val('inherit');
$('.action_hide_on_inherit').addClass('hidden');
updateFieldSettings();
});
$('#general_inherit_off').on('change', function(evt){
$('.action_hide_on_inherit').removeClass('hidden');
Expand All @@ -133,6 +152,7 @@ var prepare = function(){
//hotswapping the fields
$('.action_update_options_string_form').find('.selector_option_value_field').on('change', function(evt){

//Special code for image selector
if($(this).hasClass('selector_image_selector')){
if($(this).val() == 'inherit'){
$('button[data-target="#'+$(this).attr('id')+'"]').prop('disabled', true);
Expand All @@ -141,10 +161,18 @@ var prepare = function(){
}
}

//Special code for only numerical fields
if($(this).hasClass('selector-numerical-input')){
if(!(/^((\d+)|(inherit))$/.test($(this).val()))){
$(this).val('inherit');
}
}
//write to option object
optionObject[$(this).attr('name')] = $(this).val();
if($(this).attr('type') == 'radio'){
optionObject[$(this).attr('name')] = $(this).prop('checked') ? 'on' : 'off';
}
//write the option object to json string
$('#TemplateConfiguration_options').val(JSON.stringify(optionObject));
});

Expand All @@ -170,7 +198,6 @@ var prepare = function(){
colorField.attr('type','text').val('inherit');
optionObject[colorField.attr('name')] = 'inherit';
$('#TemplateConfiguration_options').val(JSON.stringify(optionObject));

});


Expand Down
10 changes: 5 additions & 5 deletions themes/survey/fruity/options/options.twig
View file
Expand Up @@ -643,7 +643,7 @@
<div class='form-group row'>
<label for='simple_edit_options_bodyanimationduration' class='control-label'>{{ "Duration" | t }}</label>
<div class='col-sm-12'>
<input type="number" step="0.1" min="0" max="5" class='form-control selector_option_value_field selector_radio_childfield' data-parent="animatebody" id='simple_edit_options_bodyanimationduration' name='bodyanimationduration' />
<input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatebody" id='simple_edit_options_bodyanimationduration' name='bodyanimationduration' />
</div>
</div>
</div>
Expand Down Expand Up @@ -690,7 +690,7 @@
<div class='form-group row'>
<label for='simple_edit_options_questionanimationduration' class='control-label'>{{ "Duration" | t }}</label>
<div class='col-sm-12'>
<input type="number" step="0.1" min="0" max="5" class='form-control selector_option_value_field selector_radio_childfield' data-parent="animatequestion" id='simple_edit_options_questionanimationduration' name='questionanimationduration' />
<input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatequestion" id='simple_edit_options_questionanimationduration' name='questionanimationduration' />
</div>
</div>
</div>
Expand Down Expand Up @@ -739,7 +739,7 @@
<div class='form-group row'>
<label for='simple_edit_options_alertanimationduration' class='control-label'>{{ "Duration" | t }}</label>
<div class='col-sm-12'>
<input type="number" step="0.1" min="0" max="5" class='form-control selector_option_value_field selector_radio_childfield' data-parent="animatealert" id='simple_edit_options_alertanimationduration' name='alertanimationduration'/>
<input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatealert" id='simple_edit_options_alertanimationduration' name='alertanimationduration'/>
</div>
</div>
</div>
Expand Down Expand Up @@ -788,7 +788,7 @@
<div class='form-group row'>
<label for='simple_edit_options_checkboxanimationduration' class='control-label'>{{ "Duration" | t }}</label>
<div class='col-sm-12'>
<input type="number" step="0.1" min="0" max="5" class='form-control selector_option_value_field selector_radio_childfield' data-parent="animatecheckbox" id='simple_edit_options_checkboxanimationduration' name='checkboxanimationduration' />
<input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatecheckbox" id='simple_edit_options_checkboxanimationduration' name='checkboxanimationduration' />
</div>
</div>
</div>
Expand Down Expand Up @@ -840,7 +840,7 @@
<div class='form-group row'>
<label for='simple_edit_options_radioanimationduration' class='control-label'>{{ "Duration" | t }}</label>
<div class='col-sm-12'>
<input type="number" step="0.1" min="0" max="5" class='form-control selector_option_value_field selector_radio_childfield' data-parent="animateradio" id='simple_edit_options_radioanimationduration' name='radioanimationduration' />
<input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animateradio" id='simple_edit_options_radioanimationduration' name='radioanimationduration' />
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions themes/survey/fruity/views/subviews/header/custom_header.twig
View file
Expand Up @@ -68,39 +68,39 @@
{% if (aSurveyInfo.options.animatecheckbox == "on" ) %}
.checkbox-item input[type="checkbox"]:checked + label::after{
animation-name: {{ aSurveyInfo.options.checkboxanimation }};
animation-duration: {{ aSurveyInfo.options.checkboxanimationduration }}s;
animation-duration: {{ aSurveyInfo.options.checkboxanimationduration }}ms;
animation-fill-mode: both;
}
{% endif %}
{% if (aSurveyInfo.options.animateradio == "on" ) %}
.radio-item input[type="radio"]:checked + label::after{
animation-name: {{ aSurveyInfo.options.radioanimation }};
animation-duration: {{ aSurveyInfo.options.radioanimationduration }}s;
animation-duration: {{ aSurveyInfo.options.radioanimationduration }}ms;
animation-fill-mode: both;
}
{% endif %}
{% if (aSurveyInfo.options.animatequestion == "on" ) %}
.question-container {
animation-name: {{ aSurveyInfo.options.questionanimation }};
animation-duration: {{ aSurveyInfo.options.questionanimationduration }}s;
animation-duration: {{ aSurveyInfo.options.questionanimationduration }}ms;
animation-fill-mode: both;
}
{% endif %}
{% if (aSurveyInfo.options.animatealert == "on" ) %}
.question-container {
animation-name: {{ aSurveyInfo.options.alertanimation }};
animation-duration: {{ aSurveyInfo.options.alertanimationduration }}s;
animation-duration: {{ aSurveyInfo.options.alertanimationduration }}ms;
animation-fill-mode: both;
}
{% endif %}
{% if (aSurveyInfo.options.animatebody == "on" ) %}
#outerframeContainer {
animation-name: {{ aSurveyInfo.options.bodyanimation }};
animation-duration: {{ aSurveyInfo.options.bodyanimationduration }}s;
animation-duration: {{ aSurveyInfo.options.bodyanimationduration }}ms;
animation-fill-mode: both;
}
{% endif %}
Expand Down

0 comments on commit 5943981

Please sign in to comment.