From 5943981f7fbf1d6a60387127bab1abf3a590b861 Mon Sep 17 00:00:00 2001
From: markusfluer <fluer.markus@googlemail.com>
Date: Fri, 12 Jan 2018 12:39:14 +0100
Subject: [PATCH] Fixed issue #13166: Survey theme editor - Animate checkboxes
 (fruity only)

---
 themes/survey/fruity/config.xml               | 10 +--
 themes/survey/fruity/options/options.js       | 63 +++++++++++++------
 themes/survey/fruity/options/options.twig     | 10 +--
 .../views/subviews/header/custom_header.twig  | 10 +--
 4 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/themes/survey/fruity/config.xml b/themes/survey/fruity/config.xml
index 560dd3321a3..d3840a09f2d 100644
--- a/themes/survey/fruity/config.xml
+++ b/themes/survey/fruity/config.xml
@@ -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>
@@ -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  -->
diff --git a/themes/survey/fruity/options/options.js b/themes/survey/fruity/options/options.js
index 191f1dcf9b0..ff2f45d3233 100644
--- a/themes/survey/fruity/options/options.js
+++ b/themes/survey/fruity/options/options.js
@@ -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();
@@ -17,6 +19,7 @@ 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');
@@ -24,38 +27,36 @@ var prepare = function(){
         $('#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);
@@ -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');
@@ -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'))
@@ -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');
@@ -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);
@@ -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));
         });
 
@@ -170,7 +198,6 @@ var prepare = function(){
             colorField.attr('type','text').val('inherit');
             optionObject[colorField.attr('name')] = 'inherit';
             $('#TemplateConfiguration_options').val(JSON.stringify(optionObject));
-
         });
 
 
diff --git a/themes/survey/fruity/options/options.twig b/themes/survey/fruity/options/options.twig
index 6748c9fff5c..af409cbc7a6 100644
--- a/themes/survey/fruity/options/options.twig
+++ b/themes/survey/fruity/options/options.twig
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
diff --git a/themes/survey/fruity/views/subviews/header/custom_header.twig b/themes/survey/fruity/views/subviews/header/custom_header.twig
index 0ae1e4a43bd..e83ca722a7f 100644
--- a/themes/survey/fruity/views/subviews/header/custom_header.twig
+++ b/themes/survey/fruity/views/subviews/header/custom_header.twig
@@ -68,7 +68,7 @@
     {% 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 %}
@@ -76,7 +76,7 @@
     {% 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 %}
@@ -84,7 +84,7 @@
     {% 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 %}
@@ -92,7 +92,7 @@
     {% 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 %}
@@ -100,7 +100,7 @@
     {% 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 %}