Expandable button: added implementation and examples

[Issue] Samsung#1336 [Problem] Expandable button: Card type - not implemented, no example [Solution] - new example - extend styles for ui-content-area Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
TomaszLukawskiSam · Jul 24, 2020 · a0d197e · a0d197e
1 parent d12873b
commit a0d197e
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 44 deletions.
diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html
@@ -27,6 +27,11 @@ <h1>
 						Expand button on list
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="expandable-card.html">
+						Expand button on card
+					</a>
+				</li>
 			</ul>
 		</div>
 		<!-- /content -->

diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Expandable Card</title>
+	<meta content="width=device-width, user-scalable=no" name="viewport" />
+	<link href="../../lib/tau/mobile/theme/default/tau.css" rel="stylesheet" />
+	<link href="../../css/style.css" rel="stylesheet" />
+	<script data-build-remove="false" src="../../lib/tau/mobile/js/tau.js">
+	</script>
+</head>
+
+<body>
+	<div class="ui-page">
+		<div class="ui-header" data-position="fixed">
+			<div class="ui-appbar-left-icons-container">
+				<a href="#" class="ui-btn ui-btn-icon ui-btn-icon-back" data-style="flat" data-rel="back"></a>
+			</div>
+			<div class="ui-appbar-title-container">
+				<span class="ui-appbar-title">Expand button on card</span>
+			</div>
+			<div class="ui-appbar-action-buttons-container">
+				<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+			</div>
+		</div>
+		<div class="ui-content">
+			<div class="ui-content-area">
+				<div class="ui-expandable">
+					<h2>
+						Subtitle 1
+					</h2>
+					<div class="app-content-example">
+						Contents area
+					</div>
+				</div>
+			</div>
+			<div class="ui-content-area">
+				<div class="ui-expandable" data-expander="button">
+					<h2>Subtitle 2
+						<button class="ui-btn ui-btn-icon" class="ui-expandable-toggle" data-icon="down" data-style="flat"></button>
+					</h2>
+					<div class="app-content-example">
+						Contents
+					</div>
+					<div class="ui-expandable-content app-content-example-expanded">
+						Contents area
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css
@@ -1,6 +1,6 @@
 /* Header */
 .btn-icon-back::after {
-	 -webkit-mask-image: url(./images/core_icon_back.png);
+	-webkit-mask-image: url(./images/core_icon_back.png);
 	mask-image: url(./images/core_icon_back.png);
 }
 
@@ -468,7 +468,7 @@
 }
 
 /**************************************
-            Slider
+			Slider
 ***************************************/
 #slider-demo .ui-slider-vertical {
 	left: 50%;
@@ -624,14 +624,14 @@
 }
 
 /**************************************
-            text input with buttons
+			text input with buttons
 ***************************************/
 #textinputwithbuttons-demo .ui-content {
 	top: 80px;
 	background: white;
 }
 /******************************************************
-            List Styles - sliders
+			List Styles - sliders
 ******************************************************/
 
 #slider-description{
@@ -671,7 +671,7 @@
 }
 
 /******************************************************
-        Indexscrollbar with search floating button
+		Indexscrollbar with search floating button
 ******************************************************/
 
 #indexscrollbarPage .ui-header.search-active h1 {
@@ -704,4 +704,25 @@
 }
 .sample-unit-lines p {
 	margin-bottom: 2px;
+}
+
+/* Expand button example */
+.app-content-example {
+	height: 150px;
+	width: 100%;
+	background-color: #ddd;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 15px;
+}
+.app-content-example-expanded {
+	height: 150px;
+	width: 100%;
+	background-color: #ddd;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
 }
diff --git a/src/css/profile/mobile/common/core.less b/src/css/profile/mobile/common/core.less
@@ -166,6 +166,10 @@
 			border-top-right-radius: 0;
 			mask-border-width: 0 26 * @px_base 26 * @px_base;
 		}
+
+		~ .ui-content-area {
+			margin-top: 16 * @px_base;
+		}
 	}
 
 	.ui-content-subheader {

diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
@@ -1,4 +1,5 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
 	padding: 0 24 * @px_base;
 	user-select: none;
 	flex-direction: column;
@@ -13,10 +14,6 @@
 		margin: 0;
 		position: relative;
 
-		&:not(.ui-expandable-heading-collapsed) {
-			color: var(--primary-dark-color);
-		}
-
 		.ui-expandable-heading-toggle {
 			position: relative;
 			display: block;
@@ -25,10 +22,6 @@
 				outline: 0;
 			}
 
-			&:active {
-				color: @color_list_divider_text_expandable_press;
-			}
-
 			&::after {
 				content: "";
 				position: absolute;
@@ -45,9 +38,12 @@
 				transform: rotate(0);
 			}
 		}
-		&.ui-expandable-heading-active {
-			.ui-expandable-heading-toggle::after {
-				background-color: @color_expandable_heading_arrow_pressed;
+		.ui-btn {
+			&:after {
+				width: 32 * @px_base;
+				height: 32 * @px_base;
+				mask-size: 32 * @px_base;
+				background-color: var(--expander-color);
 			}
 		}
 	}
@@ -63,8 +59,8 @@
 	}
 
 	.ui-expandable-content {
-		display: block;
 		transition: all 330ms ease;
+		overflow: auto;
 		.ui-listview {
 			padding: 0;
 			margin-left: 18 * @px_base;

diff --git a/src/css/profile/mobile/theme-changeable/theme.color.less b/src/css/profile/mobile/theme-changeable/theme.color.less
@@ -40,7 +40,6 @@
 @color_list_sub_text_3_normal: var(--text-secondary-color); // #[color] sub text color
 
 @color_list_divider_text: var(--text-secondary-color); // #[color] divider text color
-@color_list_divider_text_expandable_press: var(--active); // #[color] divider text color
 
 @color_list_divider_bg_press: var(--on-background); // #[color] divider background press color
 @color_list_divider_text_press: var(--active); // #[color] divider text press color
@@ -59,7 +58,6 @@
 //						Expandable
 //***************************************************************************
 @color_expandable_heading_arrow: var(--on-background); // #[color] expandable arrow color
-@color_expandable_heading_arrow_pressed: var(--active); // #[color] expandable arrow color pressed
 @color_expandable_heading_arrow_dim: var(--control-background);
 
 //***************************************************************************

diff --git a/src/js/profile/mobile/widget/Expandable.js b/src/js/profile/mobile/widget/Expandable.js
@@ -156,13 +156,15 @@
 					 */
 					this.options = {
 						collapsed: true,
-						heading: expandableSelectors.HEADING
+						heading: expandableSelectors.HEADING,
+						expander: "heading"
 					};
 
 					this._eventHandlers = {};
 					this._ui = {
-						expandableHeadingElement: null,
-						expandableHeadingContent: null
+						heading: null,
+						expandableHeadingContent: null,
+						expandButton: null
 					};
 
 				},
@@ -216,12 +218,18 @@
 					 * @member ns.widget.mobile.Expandable
 					 */
 					uiExpandableHeadingToggle: "ui-expandable-heading-toggle",
+					/**
+					 * Set active to expandable widget heading
+					 * @style ui-expandable-heading-active
+					 * @member ns.widget.mobile.Expandable,
+					 */
+					uiExpandableHeadingActive: "ui-expandable-heading-active",
 					/**
 					 * Set active to expandable widget heading
 					 * @style ui-expandable-heading-active
 					 * @member ns.widget.mobile.Expandable
 					 */
-					uiExpandableHeadingActive: "ui-expandable-heading-active"
+					expandButton: "ui-expand-button"
 				};
 
 
@@ -240,9 +248,9 @@
 			function toggleExpandableHandler(self, element, event) {
 				var	ui = self._ui,
 					elementClassList = element.classList,
-					heading = ui.expandableHeadingElement,
+					heading = ui.heading,
 					headingClassList = heading.classList,
-					content = ui.expandableContentElement,
+					content = ui.expandableContent,
 					contentClassList = content.classList,
 					isCollapse = event.type === "collapse";
 
@@ -268,7 +276,7 @@
 			}
 
 			function setHeadingActiveClassHandler(self, setClass) {
-				var headingClassList = self._ui.expandableHeadingElement.classList;
+				var headingClassList = self._ui.heading.classList;
 
 				if (setClass) {
 					headingClassList.add(classes.uiExpandableHeadingActive);
@@ -279,7 +287,7 @@
 
 			function toggleEventTypeHandler(self, event) {
 				var element = self.element,
-					heading = self._ui.expandableHeadingElement,
+					heading = self._ui.heading,
 					eventType = heading.classList.contains(classes.uiExpandableHeadingCollapsed) ? "expand" : "collapse";
 
 				eventUtil.trigger(element, eventType);
@@ -329,18 +337,19 @@
 				}
 				expandableHeading.classList.add(classes.uiExpandableHeading);
 
-				// Wrap all widget content
-				domUtils.wrapInHTML(element.childNodes, "<div class='" + classes.uiExpandableContent + "'></div>");
+				expandableContent = element.querySelector("." + classes.uiExpandableContent);
+				if (!expandableContent) {
+					// Wrap all widget content
+					domUtils.wrapInHTML(element.childNodes, "<div class='" + classes.uiExpandableContent + "'></div>");
 
-				// Move header out
-				element.insertBefore(expandableHeading, element.firstChild);
-
-				domUtils.wrapInHTML(expandableHeading.childNodes, "<a class='" + classes.uiExpandableHeadingToggle + "' tabindex='0'></a>");
-
-				expandableContent = expandableHeading.nextElementSibling;
+					// Move header out
+					element.insertBefore(expandableHeading, element.firstChild);
+					domUtils.wrapInHTML(expandableHeading.childNodes, "<a class='" + classes.uiExpandableHeadingToggle + "' tabindex='0'></a>");
+					expandableContent = expandableHeading.nextElementSibling;
+				}
 
-				ui.expandableHeadingElement = expandableHeading;
-				ui.expandableContentElement = expandableContent;
+				ui.heading = expandableHeading;
+				ui.expandableContent = expandableContent;
 
 				return element;
 			};
@@ -357,13 +366,14 @@
 				var self = this,
 					ui = self._ui;
 
-				ui.expandableHeadingElement = ui.expandableHeadingElement || selectors.getChildrenByClass(element, classes.uiExpandableHeading)[0];
-				ui.expandableContentElement = ui.expandableContentElement || selectors.getChildrenByClass(element, classes.uiExpandableContent)[0];
+				ui.heading = ui.heading || selectors.getChildrenByClass(element, classes.uiExpandableHeading)[0];
+				ui.expandableContent = ui.expandableContent || element.querySelector("." + classes.uiExpandableContent);
+				ui.expandButton = ui.expandButton || element.querySelector("." + classes.expandButton);
 
 				if (self.options.collapsed) {
 					element.classList.add(classes.uiExpandableCollapsed);
-					ui.expandableHeadingElement.classList.add(classes.uiExpandableHeadingCollapsed);
-					ui.expandableContentElement.classList.add(classes.uiExpandableContentCollapsed);
+					ui.heading.classList.add(classes.uiExpandableHeadingCollapsed);
+					ui.expandableContent.classList.add(classes.uiExpandableContentCollapsed);
 				}
 
 				return element;
@@ -379,7 +389,7 @@
 			Expandable.prototype._bindEvents = function (element) {
 				var self = this,
 					eventHandlers = self._eventHandlers,
-					heading = self._ui.expandableHeadingElement;
+					heading = self._ui.heading;
 
 				// Declare handlers with and assign them to local variables
 				eventHandlers.toggleExpandable = toggleExpandableHandler.bind(null, self, element);
@@ -450,7 +460,7 @@
 			Expandable.prototype._destroy = function () {
 				var self = this,
 					element = self.element,
-					heading = self._ui.expandableHeadingElement,
+					heading = self._ui.heading,
 					eventHandlers = self._eventHandlers,
 					parentNode = element.parentNode;