Add accordion group based on stacked group

JIRA-3989

doc/program.texi

@@ -136,6 +136,17 @@ A list of available styles is detailed in @ref{t:group-styles}.
   @tab@center N
   @tab@center N
 
+  @item @samp{accordion}
+  @tab
+  Styled as a @samp{stacked} group with a header that toggles
+    the body associated with that index.
+  When collapsed,
+    only the header is visible for that index.
+  The default styling indicates the collapsed status using an arrow in
+    the header.
+  @tab@center Y
+  @tab@center N
+
   @item @samp{collapsetable}
   @tab
   Renders element label in the leftmost column like @samp{sidetable}.

src/client/ClientDependencyFactory.js

@@ -36,6 +36,7 @@ var Step          = require( '../step/Step' ),
 
     Group                = require( '../group/Group' ),
     GroupUi              = require( '../ui/group/GroupUi' ),
+    AccordionGroupUi     = require( '../ui/group/AccordionGroupUi' ),
     FlatGroupUi          = require( '../ui/group/FlatGroupUi' ),
     TableGroupUi         = require( '../ui/group/TableGroupUi' ),
     TabbedGroupUi        = require( '../ui/group/TabbedGroupUi' ),
@@ -44,9 +45,6 @@ var Step          = require( '../step/Step' ),
     SideTableGroupUi     = require( '../ui/group/SideTableGroupUi' ),
     CollapseTableGroupUi = require( '../ui/group/CollapseTableGroupUi' ),
 
-    // TODO: delete me
-    AccordionGroupUi = require( 'program/ui/AccordionGroupUi' ),
-
     Ui           = require( '../ui/Ui' ),
     UiStyler     = require( '../ui/UiStyler' ),
     UiNotifyBar  = require( '../ui/UiNotifyBar' ),

src/css/base.css

@@ -1,7 +1,7 @@
 /**
  * Base CSS for the Liza Data Collection Framework
  *
- *  Copyright (C) 2017 R-T Specialty, LLC.
+ *  Copyright (C) 2017, 2019 R-T Specialty, LLC.
  *
  *  This file is part of the Liza Data Collection Framework.
  *
@@ -159,15 +159,46 @@
  *
  * TODO: These need liza-* prefixes.
  *
- * Stacked Group
- * ~~~~~~~~~~~~~
+ * Stacked and Accordion Groups
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Note that the Accordion group is an extended styling of the Stacked group.
  */
 
-.stepGroup dl.stacked dt.stack-header {
+.stepGroup dl > dt.stack-header {
   border-top:  0px;
   font-weight: bold;
 }
 
-.stepGroup dl.stacked:not(:first-child) dt.stack-header {
-  margin-top: 2em;
+/* Upper margins should not appear for accordions, because they should*/
+/* appear flush when collapsed. */
+.stepGroup dl.stacked:not(:first-child) > dt.stack-header {
+  margin-bottom: 2em;
+}
+
+/* Accordions are generalized into a `liza-collapsable' class.  Colllapsable
+/* groups can have their children hidden when collapsed.
+ */
+.stepGroup dl.liza-collapsable > dt.stack-header {
+  cursor: pointer;
+}
+
+.stepGroup dl.liza-collapsable.liza-collapsed > dt:not(.stack-header),
+.stepGroup dl.liza-collapsable.liza-collapsed > dd {
+  display: none;
+}
+
+/* Arrows indicate expanded/collapsed status.  A downward-facing arrow*/
+/* indicates that content is expanded (appearing in the direction of the
+ * arrow), and rightward-facing indicates collapsed (as if into the header).
+ */
+.stepGroup dl.liza-collapsable > dt.stack-header::before {
+  display: inline-block;
+  margin-right: 0.25em;
+  content: "▼";
+}
+/* Rotation is used for the collapse arrow rather than the character `►'
+/* because this allows for easy animation via `transition'.
+ */
+.stepGroup dl.liza-collapsable.liza-collapsed > dt.stack-header::before {
+  transform: rotate(-90deg);
 }

src/ui/group/AccordionGroupUi.js

@@ -0,0 +1,53 @@
+/**
+ * Flat UI group with accordion display
+ *
+ *  Copyright (C) 2019 R-T Specialty, LLC.
+ *
+ *  This file is part of liza.
+ *
+ *  liza is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+'use strict';
+
+const { Class }      = require( 'easejs' );
+const StackedGroupUi = require( './StackedGroupUi' );
+
+
+/**
+ * Collapsable stacked group
+ */
+module.exports = Class( 'AccordionGroupUi' )
+    .extend( StackedGroupUi,
+{
+    /**
+     * Make stack body collapsable when header is clicked
+     *
+     * @param {jQuery} $dl   definition list for group
+     * @param {number} index index to make clickable
+     *
+     * @return {AccordionGroupUi} self
+     */
+    'protected override postAddRow': function( $dl, index )
+    {
+        const header = $dl[ 0 ].firstElementChild;
+
+        header.addEventListener( 'click', () =>
+        {
+            header.parentElement.classList.toggle( 'liza-collapsed' );
+        } );
+
+        return this.__super( $dl, index );
+    },
+} );

src/ui/group/GroupUi.js

@@ -745,7 +745,7 @@ module.exports = Class( 'GroupUi' )
      *
      * @return {GroupUi} self to allow for method chaining
      */
-    'protected postAddRow': function( $element, index )
+    'virtual protected postAddRow': function( $element, index )
     {
         this.emit( this.__self.$('EVENT_POST_ADD_ROW'), $element, index );
         return this;