animate recording fields

dashboard-ui/components/recordingcreator/recordingcreator.js

@@ -1,4 +1,4 @@
-define(['components/paperdialoghelper', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input'], function (paperDialogHelper) {
+define(['components/paperdialoghelper', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input', 'paper-toggle-button'], function (paperDialogHelper) {
 
     var currentProgramId;
     var currentDialog;
@@ -33,7 +33,7 @@
     }
 
     function hideSeriesRecordingFields(context) {
-        $('#seriesFields', context).hide();
+        slideUpToHide(context.querySelector('#seriesFields'));
         context.querySelector('.btnSubmitContainer').classList.remove('hide');
         context.querySelector('.supporterContainer').classList.add('hide');
     }
@@ -113,7 +113,7 @@
     }
 
     function showSeriesRecordingFields(context) {
-        $('#seriesFields', context).show();
+        slideDownToShow(context.querySelector('#seriesFields'));
         context.querySelector('.btnSubmitContainer').classList.remove('hide');
 
         getRegistration(getParameterByName('programid')).then(function (regInfo) {
@@ -147,6 +147,49 @@
         });
     }
 
+    function slideDownToShow(elem) {
+
+        if (!elem.classList.contains('hide')) {
+            return;
+        }
+
+        elem.classList.remove('hide');
+
+        elem.style.overflow = 'hidden';
+
+        requestAnimationFrame(function () {
+
+            elem.animate([{
+                height: 0
+            }, {
+                height: elem.offsetHeight + 'px'
+
+            }], { duration: 400, easing: 'ease' }).onfinish = function () {
+                elem.classList.remove('hide');
+            };
+        });
+    }
+
+    function slideUpToHide(elem) {
+
+        if (elem.classList.contains('hide')) {
+            return;
+        }
+
+        elem.style.overflow = 'hidden';
+
+        requestAnimationFrame(function () {
+
+            elem.animate([{
+                height: elem.offsetHeight + 'px'
+            }, {
+                height: 0
+            }], { duration: 400, easing: 'ease' }).onfinish = function () {
+                elem.classList.add('hide');
+            };
+        });
+    }
+
     function init(context) {
 
         $('#chkRecordSeries', context).on('change', function () {
@@ -163,6 +206,20 @@
             closeDialog(false);
         });
 
+        context.querySelector('.chkAdvanced').addEventListener('change', function (e) {
+
+            var elems = context.querySelectorAll('.advancedToggle');
+            var isChecked = e.target.checked;
+
+            for (var i = 0, length = elems.length; i < length; i++) {
+                if (isChecked) {
+                    slideDownToShow(elems[i]);
+                } else {
+                    slideUpToHide(elems[i]);
+                }
+            }
+        });
+
         $('form', context).off('submit', onSubmit).on('submit', onSubmit);
     }
 

dashboard-ui/components/recordingcreator/recordingcreator.template.html

@@ -7,13 +7,16 @@
 
 <form class="liveTvNewRecordingForm" style="margin: 0 auto;">
 
+    <div style="text-align: right;">
+        <paper-toggle-button class="chkAdvanced">${ButtonAdvanced}</paper-toggle-button>
+    </div>
     <div style="display: none;" id="eligibleForSeriesFields">
         <div>
             <paper-checkbox id="chkRecordSeries">${OptionRecordSeries}</paper-checkbox>
         </div>
         <br />
 
-        <div id="seriesFields" style="display: none;">
+        <div id="seriesFields" class="hide">
             <div>
                 <h1>${HeaderDays}</h1>
             </div>
@@ -38,7 +41,7 @@
         <br />
     </div>
 
-    <div>
+    <div class="advancedToggle hide">
         <div>
             <paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
         </div>