From 2edb92112ad6acd79fd093283b9c9bee95f03d22 Mon Sep 17 00:00:00 2001
From: Marc <sunpack@web.de>
Date: Tue, 21 Apr 2015 01:23:01 +0200
Subject: [PATCH] Custom control containers are now Collapsable if user wants
 so.

---
 .../static/js/app/viewmodels/control.js       |  9 +++--
 src/octoprint/templates/tabs/control.jinja2   | 38 +++++++++++++++----
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js
index 6ad7f4cf..7437a8eb 100644
--- a/src/octoprint/static/js/app/viewmodels/control.js
+++ b/src/octoprint/static/js/app/viewmodels/control.js
@@ -138,8 +138,8 @@ $(function() {
                 return control;
             }
 
-            if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output")) {
-                control.output = ko.observable("");
+            if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("deflt") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output")) {
+                control.output = ko.observable(control.deflt);
                 if (!self.feedbackControlLookup.hasOwnProperty(control.key)) {
                     self.feedbackControlLookup[control.key] = {};
                 }
@@ -151,6 +151,9 @@ $(function() {
                 if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal" || control.layout == "horizontal_grid")) {
                     control.layout = "vertical";
                 }
+
+                if (!control.hasOwnProperty("collapsable"))
+                    control.collapsable = false;
             }
 
             if (control.hasOwnProperty("input")) {
@@ -340,7 +343,7 @@ $(function() {
 
         self.displayMode = function (customControl) {
             if (customControl.hasOwnProperty("children")) {
-                return "customControls_containerTemplate";
+                return (customControl.hasOwnProperty("name") && customControl.name != "") ? "customControls_containerTemplate_accordion" : "customControls_containerTemplate";
             } else {
                 return "customControls_controlTemplate";
             }
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index 04a523f8..7df1c489 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -107,20 +107,16 @@
 <!-- Templates for custom controls -->
 <script type="text/html" id="customControls_containerTemplate">
     <div class="custom_section" data-bind="css: { 'custom_section_vertical_section': !($parent && $parent.layout == 'horizontal'), 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
-        <!-- ko if: name -->
-        <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { 'data-target': '#' + id() }"><h1 data-bind="text: name"></h1></a>
-        <!-- /ko -->
-
         <!-- ko if: layout == 'vertical' -->
-        <div class="custom_section custom_section_vertical collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
+        <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
         <!-- /ko -->
 
         <!-- ko if: layout == 'horizontal' -->
-        <div class="custom_section custom_section_horizontal collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
+        <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
         <!-- /ko -->
 
         <!-- ko if: layout == 'horizontal_grid' -->
-        <div class="row-fluid custom_section custom_section_horizontal_grid collapse in" data-bind="attr: { 'id': id }">
+        <div class="row-fluid custom_section custom_section_horizontal_grid">
             <!-- ko foreach: children -->
             <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
             <!-- /ko -->
@@ -128,6 +124,34 @@
         <!-- /ko -->
     </div>
 </script>
+<script type="text/html" id="customControls_containerTemplate_accordion">
+    <div class="custom_section accordion-group" data-bind="css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
+        <!-- ko if: name -->
+        <div class="accordion-heading">
+            <a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable ? '' : 'default' }, attr: { 'data-target': collapsable ? '#' + id() : '', 'data-toggle': collapsable ? 'collapse' : '', 'onclick':  collapsable ? '$(this).children().toggleClass(\'icon-caret-right icon-caret-down\')' : '' }"><h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1></a>
+        </div>
+        <!-- /ko -->
+
+        <!-- ko if: layout -->
+        <div class="accordion-body" data-bind="attr: { 'id': id }, css: { 'collapse in': collapsable }">
+            <!-- ko if: layout == 'vertical' -->
+            <div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+            <!-- /ko -->
+            <!-- ko if: layout == 'horizontal' -->
+            <div class="custom_section custom_section_horizontal accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+            <!-- /ko -->
+
+            <!-- ko if: layout == 'horizontal_grid' -->
+            <div class="row-fluid custom_section custom_section_horizontal_grid accordion-inner">
+                <!-- ko foreach: children -->
+                <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
+                <!-- /ko -->
+            </div>
+            <!-- /ko -->
+        </div>
+        <!-- /ko -->
+    </div>
+</script>
 <script type="text/html" id="customControls_controlTemplate">
     <form class="form-inline custom_control">
         <!-- ko template: { name: 'customControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->