From 2ecaeb568b596f569f9a17696c98fa462adc8188 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Thu, 17 Jan 2019 11:51:09 -0500 Subject: [PATCH 1/3] Add basic Accordion group extending Stacked group * src/client/ClientDependencyFactory.js: Remove old AccordionGroupUi require, add new one. * src/ui/group/AccordionGroupUi.js: New class. * src/ui/group/GroupUi.js (postAddRow): Make virtual. --- src/client/ClientDependencyFactory.js | 4 +- src/ui/group/AccordionGroupUi.js | 53 +++++++++++++++++++++++++++ src/ui/group/GroupUi.js | 2 +- 3 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 src/ui/group/AccordionGroupUi.js diff --git a/src/client/ClientDependencyFactory.js b/src/client/ClientDependencyFactory.js index 73c8e7f..b25d9b4 100644 --- a/src/client/ClientDependencyFactory.js +++ b/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' ), diff --git a/src/ui/group/AccordionGroupUi.js b/src/ui/group/AccordionGroupUi.js new file mode 100644 index 0000000..9b9be08 --- /dev/null +++ b/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 . + */ + +'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 ); + }, +} ); diff --git a/src/ui/group/GroupUi.js b/src/ui/group/GroupUi.js index ac506a8..3f5c62f 100644 --- a/src/ui/group/GroupUi.js +++ b/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; From e4047b52cc153450e35ed18885ef9ba33b159891 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Thu, 17 Jan 2019 11:52:47 -0500 Subject: [PATCH 2/3] src/css/base.css: Style Accordion group Note that this permits animation if you just add: transition: transform 0.25s; for example to `dt.stack-header::before'. I didn't add that because nothing else is animated atm, and so it seems out-of-place. * src/css/base.css: Add styling for Accordion group. DEV-3989 --- src/css/base.css | 43 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/src/css/base.css b/src/css/base.css index d1164a8..2a48204 100644 --- a/src/css/base.css +++ b/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); } From 8cd93cd0f5bd552d0f7274c64fdf77f63006c0a2 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Mon, 21 Jan 2019 10:20:35 -0500 Subject: [PATCH 3/3] doc/program.texi: Document accordion group * doc/program.texi (Group Styles): Add `accordion'. --- doc/program.texi | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/doc/program.texi b/doc/program.texi index 248b703..5b0d562 100644 --- a/doc/program.texi +++ b/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}.