Merge pull request #118 from gaiaresources/1934-expand-groups-sections

1934 expand groups sections
dbca-wa · Oct 20, 2016 · 9817968 · 9817968
2 parents a7efdef + 809af3b
commit 9817968
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 13 deletions.
diff --git a/wildlifelicensing/apps/applications/handlebars_templates/group.handlebars b/wildlifelicensing/apps/applications/handlebars_templates/group.handlebars
@@ -1,22 +1,25 @@
 <div class="top-buffer bottom-buffer">
-    <h4>{{label}}</h4>
+    <h4 class="inline">{{label}}</h4>
     {{#unless isRemovable}}
         {{#if help_text}}
             <p id="description_{{name}}" >{{{help_text}}}</p>
         {{/if}}
     {{/unless}}
     <div class="panel panel-default">
         <div class="panel-body">
-            <div class="children-anchor-point" style="padding-left: 0px">
+            <a class="collapse-link-top pull-right"><span class="glyphicon glyphicon-chevron-down"></a>
+            <div class="children-anchor-point collapse in" style="padding-left: 0px">
             </div>
             {{#unless isPreviewMode }}
                 {{#if isRepeatable }}
                     <a id="copy_{{name}}">Copy {{label}}</a>
                 {{/if}}
-                <div class="pull-right">
-                    <a id="remove_{{name}}" class="{{#unless isRemovable}}hidden{{/unless}}">Remove</a>
-                </div>
+                <span class="{{#unless isRemovable}}hidden{{/unless}}">
+                    <span class="margin-left margin-right">|</span>
+                    <a id="remove_{{name}}" ">Remove {{label}}</a>
+                </span>
             {{/unless}}
+            <a class="collapse-link-bottom pull-right"><span class="glyphicon glyphicon-chevron-up"></a>
         </div>
     </div>
 </div>
diff --git a/wildlifelicensing/apps/applications/handlebars_templates/section.handlebars b/wildlifelicensing/apps/applications/handlebars_templates/section.handlebars
@@ -1,2 +1,4 @@
-<h3 id="{{name}}" class="section">{{label}}</h3>
-<hr>
+<h3 id="{{name}}" class="section inline">{{label}}</h3><a class="collapse-link-top top-buffer-s pull-right"><span class="glyphicon glyphicon-chevron-down"></span></a>
+<hr>
+<div class="children-anchor-point collapse in">
+</div>
diff --git a/wildlifelicensing/apps/applications/static/wl/js/entry/application_entry.js b/wildlifelicensing/apps/applications/static/wl/js/entry/application_entry.js
@@ -16,6 +16,10 @@ define(['jQuery', 'handlebars.runtime', 'parsley', 'bootstrap', 'bootstrap-datet
 
         _initInputField(item, $itemContainer);
 
+        if(item.type === 'section' || item.type === 'group') {
+            _initCollapsible($itemContainer);
+        }
+
         // unset item name and value if they were set otherwise there may be unintended consequences if extra form fields are created dynamically
         item.name = item.name.slice(0, item.name.indexOf(suffix));
         item.value = undefined;
@@ -190,6 +194,44 @@ define(['jQuery', 'handlebars.runtime', 'parsley', 'bootstrap', 'bootstrap-datet
         }
     }
 
+    function _initCollapsible($itemContainer, removeExistingEvents) {
+        var $collapsible = $itemContainer.find('.children-anchor-point').first(),
+            $topLink = $collapsible.siblings('.collapse-link-top'),
+            $topLinkSpan = $topLink.find('span'),
+            $bottomLink = $collapsible.siblings('.collapse-link-bottom').first();
+
+        if(removeExistingEvents) {
+            $collapsible.off('hide.bs.collapse').off('show.bs.collapse').off('shown.bs.collapse');
+            $topLink.off('click');
+            if($bottomLink.length) {
+                $bottomLink.off('click');
+            }
+        }
+
+        $collapsible.on('hide.bs.collapse', function () {
+            $topLinkSpan.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+            if($bottomLink.length) {
+                $bottomLink.hide();
+            }
+        }).on('show.bs.collapse', function() {
+            $topLinkSpan.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+        }).on('shown.bs.collapse', function() {
+            if($bottomLink.length) {
+                $bottomLink.show();
+            };
+        });
+
+        $topLink.click(function() {
+            $collapsible.collapse('toggle');
+        });
+
+        if($bottomLink.length) {
+            $bottomLink.click(function() {
+                $collapsible.collapse('toggle');
+            });
+        }
+    }
+
     function _setupCopyRemoveEvents(item, itemSelector, suffix) {
         itemSelector.find('[id^="copy_' + item.name + '"]').first().click(function(e) {
             var itemCopy = itemSelector.clone(true, true),
@@ -241,9 +283,14 @@ define(['jQuery', 'handlebars.runtime', 'parsley', 'bootstrap', 'bootstrap-datet
                 $(this).replaceWith(speciesClone);
             });
 
-            itemCopy.find('[id^="remove_' + item.name + '"]').removeClass('hidden');
+            itemCopy.find('[id^="copy_' + item.name + '"]').off('click');
+            itemCopy.find('[id^="remove_' + item.name + '"]').parent().removeClass('hidden');
             itemCopy.find('[id^="description_' + item.name + '"]').addClass('hidden');
+
             itemSelector.after(itemCopy);
+
+            _initCollapsible(itemCopy, true);
+
             groupInput.val(groupCount + 1);
             _setupCopyRemoveEvents(item, itemCopy, suffix);
         });
@@ -308,4 +355,4 @@ define(['jQuery', 'handlebars.runtime', 'parsley', 'bootstrap', 'bootstrap-datet
             sectionList.affix({ offset: { top: sectionList.offset().top }});
         }
     };
-});
+});
diff --git a/wildlifelicensing/apps/applications/static/wl/js/entry/application_preview.js b/wildlifelicensing/apps/applications/static/wl/js/entry/application_preview.js
@@ -17,6 +17,7 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
         if(item.type === 'section' || item.type === 'group') {
             item.isPreviewMode = true;
             itemContainer.append(Handlebars.templates[item.type](item));
+            _initCollapsible(itemContainer);
         } else if (item.type === 'radiobuttons' || item.type === 'select') {
             var isSpecified = false;
             itemContainer.append($('<label>').text(item.label));
@@ -65,7 +66,6 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
         childrenAnchorPoint = _getCreateChildrenAnchorPoint(itemContainer);
 
         if(item.conditions !== undefined) {
-
             if(item.conditions !== undefined) {
                 $.each(item.conditions, function(condition, children) {
                     if(condition === itemData[item.name]) {
@@ -122,6 +122,36 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
         return $childrenAnchorPoint;
     }
 
+    function _initCollapsible($itemContainer) {
+        var $collapsible = $itemContainer.find('.children-anchor-point').first(),
+            $topLink = $collapsible.siblings('.collapse-link-top'),
+            $topLinkSpan = $topLink.find('span'),
+            $bottomLink = $collapsible.siblings('.collapse-link-bottom').first();
+
+        $collapsible.on('hide.bs.collapse', function () {
+            $topLinkSpan.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+            if($bottomLink.length) {
+                $bottomLink.hide();
+            }
+        }).on('show.bs.collapse', function() {
+            $topLinkSpan.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+        }).on('shown.bs.collapse', function() {
+            if($bottomLink.length) {
+                $bottomLink.show();
+            };
+        });
+
+        $topLink.click(function() {
+            $collapsible.collapse('toggle');
+        });
+
+        if($bottomLink.length) {
+            $bottomLink.click(function() {
+                $collapsible.collapse('toggle');
+            });
+        }
+    }
+
     return {
         layoutPreviewItems: function(containerSelector, formStructure, data, tempFilesUrl) {
             var container = $(containerSelector);
@@ -157,4 +187,4 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
             });
         }
     };
-});
+});
diff --git a/wildlifelicensing/apps/applications/static/wl/js/process/preview_versions.js b/wildlifelicensing/apps/applications/static/wl/js/process/preview_versions.js
@@ -31,6 +31,8 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
             }
 
             itemContainer.append($template);
+
+            _initCollapsible(itemContainer);
         } else if (item.type === 'radiobuttons' || item.type === 'select') {
             itemContainer.append($('<label>').text(item.label));
             if(item.valueCurrent === item.valuePrevious || (item.valuePrevious === undefined && isRepeat)) {
@@ -219,6 +221,36 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
         return $childrenAnchorPoint;
     }
 
+    function _initCollapsible($itemContainer) {
+        var $collapsible = $itemContainer.find('.children-anchor-point').first(),
+            $topLink = $collapsible.siblings('.collapse-link-top'),
+            $topLinkSpan = $topLink.find('span'),
+            $bottomLink = $collapsible.siblings('.collapse-link-bottom').first();
+
+        $collapsible.on('hide.bs.collapse', function () {
+            $topLinkSpan.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+            if($bottomLink.length) {
+                $bottomLink.hide();
+            }
+        }).on('show.bs.collapse', function() {
+            $topLinkSpan.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+        }).on('shown.bs.collapse', function() {
+            if($bottomLink.length) {
+                $bottomLink.show();
+            };
+        });
+
+        $topLink.click(function() {
+            $collapsible.collapse('toggle');
+        });
+
+        if($bottomLink.length) {
+            $bottomLink.click(function() {
+                $collapsible.collapse('toggle');
+            });
+        }
+    }
+
     return {
         layoutPreviewItems: function(containerSelector, formStructure, currentData, previousData) {
             var container = $(containerSelector);
@@ -240,4 +272,4 @@ define(['jQuery', 'handlebars.runtime', 'bootstrap', 'js/handlebars_helpers', 'j
             }
         }
     };
-});
+});