Parcourir la source

HUE-186. Add functionality to DataGroupToggle

Marcus McLaughlin il y a 15 ans
Parent
commit
8c1dd19202

+ 37 - 0
apps/jframegallery/src/jframegallery/templates/data.group.toggle.html

@@ -0,0 +1,37 @@
+{% comment %}
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+	<head>
+		<title>Data Group Toggle</title>
+	</head>
+	<body>
+		<div class="jframe_padded">
+                  This is a DataGroupToggle.  As you select from the list, different combinations of elements will appear.
+                  <select data-filters="DataGroupToggle">
+                    <option data-group-toggle="{'group': '.group'}">None</option>
+                    <option data-group-toggle="{'group': '.group', 'show': '.one'}">One</option>
+                    <option data-group-toggle="{'group': '.group', 'show': '.one, .two'}">One and Two</option>
+                    <option data-group-toggle="{'group': '.group', 'show': '.one, .three'}">One and Three</option>
+                  </select>
+                  <span class="group one" style="display: inline-block">This is one. Not only am I one...I'm inline block...and will return to my inline-block position.</span>
+                  <div class="group two"> This is two.</div>
+                  <div class="group three"> This is three.</div>
+		</div>
+	</body>
+</html>

+ 1 - 1
apps/jframegallery/src/jframegallery/templates/fit.text.html

@@ -22,7 +22,7 @@ limitations under the License.
 	</head>
 	<body>
 		<div class="jframe_padded">
-			<p>the text below will be truncated to fit the window as it is resized because it has the class .ccs-truncate on it.</p>
+			<p>the text below will be truncated to fit the window as it is resized because it has the FitText data-filters property.</p>
 			<p data-filters="FitText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum, ligula in iaculis posuere, tortor arcu sodales lorem, vitae congue enim nulla sed sapien. Ut at dui odio. Mauris mattis felis a ipsum bibendum ullamcorper eu eget libero. In dictum auctor interdum.</p>
 		</div>
 	</body>

+ 3 - 3
apps/jframegallery/src/jframegallery/templates/side.by.side.select.html

@@ -23,7 +23,7 @@ limitations under the License.
 	<body>
 		<div class="jframe_padded">
 			<h2 style="margin: 0px 0px 4px">Example with just a select element w/ side_by_side_select class</h2>
-			<select class="side_by_side_select" multiple="true">
+			<select data-filters="SideBySideSelect" multiple="true">
 				<option value="1">one</option>
 				<option value="2">two</option>
 				<option value="3">three</option>
@@ -40,7 +40,7 @@ limitations under the License.
 			</select>
 			
 			<h2 style="margin: 8px 0px 4px">Example in a container that has the side_by_side_select class</h2>
-			<div class="side_by_side_select">
+			<div data-filters="SideBySideSelect">
 				<select multiple="true">
 					<option value="1">one</option>
 					<option value="2">two</option>
@@ -49,7 +49,7 @@ limitations under the License.
 			</div>
 
 			<h2 style="margin: 8px 0px 4px">Example of a select with the class but <tt>multiple</tt> is not true (so it's ignored)</h2>
-			<select class="side_by_side_select">
+			<select data-filters="SideBySideSelect">
 				<option value="1">one</option>
 				<option value="2">two</option>
 				<option value="3">three</option>

+ 11 - 4
desktop/core/static/js/Source/BehaviorFilters/Behavior.DataGroupToggle.js

@@ -38,13 +38,15 @@ Behavior.addGlobalFilters({
                                 dbug.warn("Search using data-group-toggle[group] as selector returned no elements.");
                                 return;
                         }
-                        var show = container.getElements(toggleData.show);
-                        if(!show.length) {
+                        //If toggleData.show is undefined, then display none of the sections.
+                        var show = [];
+                        if(toggleData.show) show = container.getElements(toggleData.show);
+                        if(toggleData.show && !show.length) {
                                 dbug.warn("Search using data-group-toggle[show] as selector returned no elements.");
                                 return;
                         }
                         sections.each(function(section) {
-                                section.setStyle('display', show.contains(section) ? 'block' : 'none');
+                                section.setStyle('display', show.contains(section) ? section.get('data', 'display') : 'none');
                         });
                 };
                 var linkHandler = function(event) {
@@ -64,11 +66,16 @@ Behavior.addGlobalFilters({
                                 return;
                         }
                         sections.each(function(section) {
-                                section.setStyle('display', show.contains(section) ? 'block' : 'none');
+                                if(show.contains(section)) {
+                                        section.show();
+                                } else {
+                                        section.hide();
+                                }
                         });
                 };
                 if(element.tagName == 'SELECT') {
                         element.addEvent('change', selectHandler);
+                        selectHandler();
                         this.markForCleanup(element, function(){
                                 element.removeEvent('change', selectHandler);
                         });