Jelajahi Sumber

HUE-144. Create CollapsingElements Behavior Filter and use throughout Hue

Marcus McLaughlin 15 tahun lalu
induk
melakukan
c9bc64674a

+ 1 - 1
apps/beeswax/src/beeswax/templates/describe_table.mako

@@ -52,7 +52,7 @@ ${wrappers.head("Beeswax Table Metadata: " + table.tableName, section='tables')}
           <dt class="ccs-dt_cap">Actions</dt>
           <dd class="ccs-dd_bottom bw-actions">
             <ul>
-              <li class="ccs-clear"><a class="bw-load_data collapser">Import Data</a>
+              <li class="ccs-clear" data-filters="CollapsingElements"><a class="bw-load_data collapser">Import Data</a>
                   <div class="collapsible ccs-hidden">
                     <form action="${ url("beeswax.views.load_table", table=table_name) }">
                       <dl>

+ 1 - 1
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -30,7 +30,7 @@ ${wrappers.head("Beeswax: Query Results", section='query')}
               <ul>
                 <li><a target="_blank" href="${download_urls["csv"]}" class="bw-download_csv">Download as CSV</a>
                 <li><a target="_blank" href="${download_urls["xls"]}" class="bw-download_xls">Download as XLS</a>
-                <li><a class="bw-save collapser jframe_ignore" href="${url('beeswax.views.save_results', query.id)}">Save</a>
+                <li data-filters="CollapsingElements"><a class="bw-save collapser jframe_ignore" href="${url('beeswax.views.save_results', query.id)}">Save</a>
                   <div class="collapsible accordion ccs-hidden bw-save_query_results" style="display:none"> 
                     <form action="${url('beeswax.views.save_results', query.id) }" method="POST">
                       ## Writing the save_target fields myself so I can match them to their respective text input fields.

+ 7 - 7
apps/jframegallery/src/jframegallery/templates/collapser.html

@@ -22,12 +22,12 @@ limitations under the License.
 	</head>
 	<body>
 	<h1>Collapsibles</h1>
-	<ul>
-	<li>
-		<div id="collapser_one" class="collapser">Click here! (1)</div><div id="data_one" class="collapsible">Data (1)</div>
-	</li>
-	<li>
-		<div class="collapser">Click here! (2)</div><div class="collapsible">Data (2)</div>
-	</li>
+	<ul data-filters="CollapsingElements">
+          <li>
+                  <div id="collapser_one" class="collapser">Click here! (1)</div><div id="data_one" class="collapsible">Data (1)</div>
+          </li>
+          <li>
+                  <div class="collapser">Click here! (2)</div><div class="collapsible">Data (2)</div>
+          </li>
 	</body>
 </html>

+ 109 - 107
apps/jobsub/src/jobsub/templates/forms/streaming.html

@@ -89,110 +89,112 @@ limitations under the License.
 
 	</dl>
 
-	<dl class="jobsub_toggler clearfix">
-		<dt></dt>
-		<dd>
-			<a class="jobsub_toggle_advanced collapser">Show Advanced Options</a>
-		</dd>
-	</dl>
-	<dl class="jobsub_advanced clearfix collapsible">
-		<dt>{{ form.mapper_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.mapper_class|safe }}
-			</div>
-			<p>
-				{{ form.mapper_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.mapper_class.errors }}</div>
-		</dd>
-
-		<dt>{{ form.combiner_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.combiner_class|safe }}
-			</div>
-			<p>
-				{{ form.combiner_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.jobsub_input.errors }}</div>
-		</dd>
-
-		<dt>{{ form.reducer_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.reducer_class|safe }}
-			</div>
-			<p>
-				{{ form.reducer_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.reducer_class.errors }}</div>
-		</dd>
-
-		<dt>{{ form.inputformat_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.inputformat_class|safe }}
-			</div>
-			<p>
-				{{ form.inputformat_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.inputformat_class.errors }}</div>
-		</dd>
-
-		<dt>{{ form.outputformat_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.outputformat_class|safe }}
-			</div>
-			<p>
-				{{ form.outputformat_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.outputformat_class.errors }}</div>
-		</dd>
-
-		<dt>{{ form.partitioner_class.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.partitioner_class|safe }}
-			</div>
-			<p>
-				{{ form.partitioner_class.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.partitioner_class.errors }}</div>
-		</dd>
-
-		<dt>{{ form.inputreader.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.inputreader|safe }}
-			</div>
-			<p>
-				{{ form.inputreader.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.inputreader.errors }}</div>
-		</dd>
-
-		<dt>{{ form.cache_archives.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.cache_archives|safe }}
-			</div>
-			<p>
-				{{ form.cache_archives.help_text|safe }}
-			</p>
-			<div class="jobsub_errors">{{ form.cache_archives.errors }}</div>
-		</dd>
-
-		<dt>{{ form.hadoop_properties.label }}</dt>
-		<dd>
-			<div class="jobsub_input">
-				{{ form.hadoop_properties|safe }}
-			</div>
-			<p>
-				{{ form.hadoop_properties.help_text|safe}}
-			</p>
-			<div class="jobsub_errors">{{ form.hadoop_properties.errors }}</div>
-		</dd>
-
-	</dl>
+	<div data-filters="CollapsingElements">
+          <dl class="jobsub_toggler clearfix">
+                  <dt></dt>
+                  <dd>
+                          <a class="jobsub_toggle_advanced collapser">Show Advanced Options</a>
+                  </dd>
+          </dl>
+          <dl class="jobsub_advanced clearfix collapsible">
+                  <dt>{{ form.mapper_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.mapper_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.mapper_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.mapper_class.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.combiner_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.combiner_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.combiner_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.jobsub_input.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.reducer_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.reducer_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.reducer_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.reducer_class.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.inputformat_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.inputformat_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.inputformat_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.inputformat_class.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.outputformat_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.outputformat_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.outputformat_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.outputformat_class.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.partitioner_class.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.partitioner_class|safe }}
+                          </div>
+                          <p>
+                                  {{ form.partitioner_class.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.partitioner_class.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.inputreader.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.inputreader|safe }}
+                          </div>
+                          <p>
+                                  {{ form.inputreader.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.inputreader.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.cache_archives.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.cache_archives|safe }}
+                          </div>
+                          <p>
+                                  {{ form.cache_archives.help_text|safe }}
+                          </p>
+                          <div class="jobsub_errors">{{ form.cache_archives.errors }}</div>
+                  </dd>
+
+                  <dt>{{ form.hadoop_properties.label }}</dt>
+                  <dd>
+                          <div class="jobsub_input">
+                                  {{ form.hadoop_properties|safe }}
+                          </div>
+                          <p>
+                                  {{ form.hadoop_properties.help_text|safe}}
+                          </p>
+                          <div class="jobsub_errors">{{ form.hadoop_properties.errors }}</div>
+                  </dd>
+
+          </dl>
+        </div>

+ 1 - 1
desktop/core/src/desktop/templates/popup_error.mako

@@ -19,7 +19,7 @@
     <title>${title}</title>
   </head>
   <body>
-    <div class="alert_popup ccs-error-popup">
+    <div class="alert_popup ccs-error-popup" data-filters="CollapsingElements">
         <pre>
         ${message}
         </pre>

+ 41 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.CollapsingElements.js

@@ -0,0 +1,41 @@
+// 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.
+/*
+---
+description: Instantiates a Collapsible class for all matched elements with .collapser and .collapsible css classes within an element with the CollapsingElements data-filters property.
+provides: [Behavior.CollapsingElements]
+requires: [Widgets/Behavior, More/Fx.Reveal]
+script: Behavior.Collapsible.js
+
+...
+*/
+
+Behavior.addGlobalFilters({
+	CollapsingElements: function(element, methods) {
+                element.addEvent('click:relay(.collapser)', function(event, clicked) {
+                        event.preventDefault();
+		        var togglers = element.getElements('.collapser');
+		        var sections = element.getElements('.collapsible');
+                        if(togglers.length != sections.length) {
+                                dbug.warn("CollapsingElements filter exiting; togglers length (%s) != sections length (%s)", togglers.length, sections.length);
+                                return;
+                        }
+                        var section = sections[togglers.indexOf(clicked)];
+                        if (section) section.get('reveal').toggle();
+                });
+	}
+
+});

+ 1 - 0
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -38,6 +38,7 @@ requires:
  - Widgets/Behavior.HtmlTable
  - Widgets/Behavior.OverText
  - Widgets/Behavior.SplitView
+ - /Behavior.CollapsingElements
  - /Behavior.ContextMenu
  - /Behavior.DataGroupToggle
  - /Behavior.FilterInput

+ 0 - 51
desktop/core/static/js/Source/JFrameFilters/CCS.JFrame.Collapsible.js

@@ -1,51 +0,0 @@
-// 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.
-/*
----
-description: Instantiates a Collapsible class for all matched elements with .collapser and .collapsible css classes.
-provides: [CCS.JFrame.Collapsible]
-requires: [/CCS.JFrame, clientcide/Collapsible]
-script: CCS.JFrame.Collapsible.js
-
-...
-*/
-
-CCS.JFrame.addGlobalFilters({
-
-	collapsible: function(container) {
-		if (!container.get('html').contains('collapser')) return;
-		//make collapsibles for each .collapser/.collapsible pair (kind of like accordion)
-		var togglers = container.getElements('.collapser');
-		var sections = container.getElements('.collapsible');
-		if (togglers.length != sections.length) {
-			dbug.warn('collapsible filter existing; togglers length (%s) != sections length (%s)', togglers.length, sections.length);
-			return;
-		}
-		togglers.each(function(toggler, i) {
-			new Collapsible(toggler, sections[i], {
-				onComplete: function(){
-					if (this.hidden) {
-						toggler.set('html', toggler.get('html').replace('Hide', 'Show'));
-					} else {
-						toggler.set('html', toggler.get('html').replace('Show', 'Hide'));
-						if (window.OverText) OverText.update();
-					}
-				}
-			});
-		});
-	}
-
-});

+ 18 - 0
desktop/core/static/js/Source/JFrameFilters/CCS.JFrame.Deprecated.js

@@ -20,6 +20,7 @@
 description: Deprecated JFrame filters here for backwards compatibility.
 provides: [
  CCS.JFrame.DeprecatedFilters,
+ CCS.JFrame.Collapsible,
  CCS.JFrame.ContextMenu,
  CCS.JFrame.ArtButtons,
  CCS.JFrame.DataGroupToggle,
@@ -222,9 +223,26 @@ script: CCS.JFrame.ArtButtons.js
                                 dbug.warn("you are using a deprecated JFrameFilter (ccs-group_toggle) on %o, use the DataGroupToggle data-filters propery instead.", toggle);
                                 toggle.addDataFilter('DataGroupToggle');
                         });
+                },
+
+                collapsible: function(container) {
+                        if (!container.get('html').contains('collapser')) return;
+                        //make collapsibles for each .collapser/.collapsible pair (kind of like accordion)
+                        var togglers = container.getElements('.collapser');
+                        var sections = container.getElements('.collapsible');
+                        togglers.each(function(toggler, i) {
+                                //This message is uniquely strong because there's no reasonable way to add the functionality,
+                                //as every case is unique.  In order to get the functionality, you MUST add the CollapsingElements
+                                //data-filter property.
+                                if(!toggler.getParent('[data-filters*=CollapsingElements]'))
+                                {
+                                        dbug.warn("you are using a deprecated JFrame pattern (collapser) on %o, you must add the CollapsingElements data-filter property to a mutual parent of the collapser and collapsible to get the collapsible functionality.", toggler);
+                                }
+                        });
                 }
 
 
+
 	});
 
 })();

+ 1 - 1
desktop/core/static/js/package.yml

@@ -6,7 +6,6 @@ sources: [
   Source/JFrameFilters/CCS.JFrame.Clearfix.js,
   Source/JFrameFilters/CCS.JFrame.AutoRefresh.js,
   Source/JFrameFilters/CCS.JFrame.DoubleClickDelegate.js,
-  Source/JFrameFilters/CCS.JFrame.Collapsible.js,
   Source/JFrameFilters/CCS.JFrame.ToggleHistory.js,
   Source/JFrameFilters/CCS.JFrame.Deprecated.js,
   Source/Fx/Fx.Shake.js,
@@ -48,6 +47,7 @@ sources: [
   Source/StaticThirdParty/DynamicTextarea.js,
   Source/CCS/CCS.PostEditor.Simple.js,
   Source/UI/ART.SideBySideSelect.js,
+  Source/BehaviorFilters/Behavior.CollapsingElements.js,
   Source/BehaviorFilters/Behavior.ContextMenu.js,
   Source/BehaviorFilters/Behavior.DataGroupToggle.js,
   Source/BehaviorFilters/Behavior.FilterInput.js,