Dev: added animation option on check box.

LimeSurvey · Dec 12, 2017 · 948def7 · 948def7
1 parent a0bf657
commit 948def7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/themes/survey/fruity/config.xml b/themes/survey/fruity/config.xml
@@ -72,6 +72,9 @@
         <questionborder>on</questionborder>
         <questioncontainershadow>on</questioncontainershadow>
         <checkicon>f00c</checkicon>
+        <animatecheckbox>on</animatecheckbox>
+        <checkboxanimation>rubberBand</checkboxanimation>
+        <checkboxanimationduration>1</checkboxanimationduration>
     </options>
 
     <!-- Engine configuration is the very same as vanilla  -->

diff --git a/themes/survey/fruity/options/options.twig b/themes/survey/fruity/options/options.twig
@@ -628,6 +628,8 @@
                     </div>
                 </div>
             </div>
+
+            {# Animate alert #}
             <div class='row action_hide_on_inherit'>
                 <div class='col-sm-12 col-md-4'>
                     {# Animate alert -> On/Off #}
@@ -666,6 +668,47 @@
                     </div>
                 </div>
             </div>
+
+            {# Animate checkbox #}
+            <div class='row action_hide_on_inherit'>
+                <div class='col-sm-12 col-md-4'>
+                    {# Animate alert -> On/Off #}
+                    <div class='form-group row'>
+                        <label for='simple_edit_options_animatecheckbox' class='control-label'>{{ "Animate checkbox" | t }}</label>
+                        <div class='col-sm-12'>
+                            <div class="btn-group" data-toggle="buttons">
+                                <label class="btn btn-default">
+                                    <input type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
+                                    {{ "Yes" | t}}
+                                </label>
+                                <label class="btn btn-default">
+                                    <input type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
+                                    {{ "No" | t}}
+                                </label>
+                                {# If this is a root template setting, don't show the inherit button #}
+                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
+                                    <label class="btn btn-default">
+                                        <input type='radio' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
+                                        {{ "Inherit" | t}}
+                                    </label>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class='col-sm-12 col-md-8'>
+                    {# Animate alert -> Animation options #}
+                    <div class='form-group row'>
+                        <label for='simple_edit_options_checkboxanimation' class='control-label'>{{ "Alert animation" | t }}</label>
+                        <div class='col-sm-12'>
+                            <select class='form-control selector_option_value_field selector_radio_childfield' data-parent="animatecheckbox" id='simple_edit_options_checkboxanimation' name='checkboxanimation'>
+                                {{animationOptions}}
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class='row ls-space margin top-15 bottom-15 '>
                 <hr/>
             </div>

diff --git a/themes/survey/fruity/views/subviews/header/custom_header.twig b/themes/survey/fruity/views/subviews/header/custom_header.twig
@@ -65,4 +65,12 @@
         content: {{ checkicon }};
     }
 
+    {% 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-fill-mode: both;
+        }
+    {% endif %}
+
 </style>