浏览代码

HUE-201. Add ability for HtmlTable to restore state on refresh

Marcus McLaughlin 15 年之前
父节点
当前提交
3435f4e6db

+ 54 - 38
apps/jframegallery/src/jframegallery/templates/fit.text.(table).html

@@ -23,7 +23,7 @@ limitations under the License.
 	<body>
 	<h1 class="ccs-hidden">FitText (table)</h1>
 	
-	<table data-filters="HtmlTable" class="selectable sortable" data-filters="FitText-Children" cellpadding="0" cellspacing="0" data-fit-text="td">
+	<table data-filters="HtmlTable" class="selectable sortable resizable" data-filters="FitText-Children" cellpadding="0" cellspacing="0" data-fit-text="td">
 		<thead>
 			<tr>
 				<th>
@@ -45,46 +45,62 @@ limitations under the License.
 		</thead>
 		<tbody>
 			<tr>
-				<td>
-					22
-				</td>
-				<td>
-					New York City
-				</td>
-				<td>
-					America/New_York
-					America/New_York
-					America/New_York
-					America/New_York
-				</td>
-				<td>
-					40.7255
-				</td>
-				<td>
-					-73.9983
-				</td>
+				<td>22</td>
+				<td>New York City</td>
+				<td>America/New_York America/New_York America/New_York America/New_York</td>
+				<td>40.7255</td>
+				<td>-73.9983</td>
 			</tr>
 			<tr>
-				<td>
-					23
-				</td>
-				<td>
-					San Francisco
-					San Francisco
-					San Francisco
-				</td>
-				<td>
-					America/Los_Angeles
-					America/Los_Angeles
-					America/Los_Angeles
-				</td>
-				<td>
-					37.7587
-				</td>
-				<td>
-					-122.433
-				</td>
+				<td>23</td>
+				<td>San Francisco San Francisco San Francisco</td>
+				<td>America/Los_Angeles America/Los_Angeles America/Los_Angeles</td>
+				<td>37.7587</td>
+				<td>-122.433</td>
 			</tr>
+                        <tr>
+				<td>22</td>
+				<td>New York City</td>
+				<td>America/New_York America/New_York America/New_York America/New_York</td>
+				<td>40.7255</td>
+				<td>-73.9983</td>
+			</tr>
+			<tr>
+				<td>23</td>
+				<td>San Francisco San Francisco San Francisco</td>
+				<td>America/Los_Angeles America/Los_Angeles America/Los_Angeles</td>
+				<td>37.7587</td>
+				<td>-122.433</td>
+			</tr>
+<tr>
+				<td>22</td>
+				<td>New York City</td>
+				<td>America/New_York America/New_York America/New_York America/New_York</td>
+				<td>40.7255</td>
+				<td>-73.9983</td>
+			</tr>
+			<tr>
+				<td>23</td>
+				<td>San Francisco San Francisco San Francisco</td>
+				<td>America/Los_Angeles America/Los_Angeles America/Los_Angeles</td>
+				<td>37.7587</td>
+				<td>-122.433</td>
+			</tr>
+<tr>
+				<td>22</td>
+				<td>New York City</td>
+				<td>America/New_York America/New_York America/New_York America/New_York</td>
+				<td>40.7255</td>
+				<td>-73.9983</td>
+			</tr>
+			<tr>
+				<td>23</td>
+				<td>San Francisco San Francisco San Francisco</td>
+				<td>America/Los_Angeles America/Los_Angeles America/Los_Angeles</td>
+				<td>37.7587</td>
+				<td>-122.433</td>
+			</tr>
+
 		</tbody>
 	</table>
 	

+ 20 - 0
desktop/core/static/css/shared.css

@@ -308,6 +308,26 @@ table[data-filters*=HtmlTable].treeView tr.table-expanded a.expand {
 	background: url(/static/art/divots.png) 0px -14px;
 }
 
+.table-th-resizable.table-th-sort span.table-th-sort-span, .table-th-resizable.table-th-sort-rev span.table-th-sort-span {
+        padding-right: 13px;
+}
+
+table.table-resizable th div {
+        position: relative;
+        padding-right: 0px;
+}
+span.table-th-resizer {
+        position: absolute;
+        cursor: col-resize;
+        right: 9px;
+        width: 6px;
+        top: 0px;
+        display: block;
+        height: 100%;
+        z-index: 1;
+}
+
+
 table a.ccs-table_config_link {
 	display: inline-block;
 	float: right;

+ 20 - 1
desktop/core/static/js/Source/BehaviorFilters/Behavior.FitText.js

@@ -115,5 +115,24 @@ script: Behavior.FitText.js
 
 	});
 
+        Behavior.addGlobalPlugin('HtmlTable', 'FitTextResize', function(element, methods) {
+                if(element.hasClass('resizable')) {
+                        htmlTable = element.retrieve('HtmlTable');
+                        htmlTable.addEvent('columnResize', function() {
+                                if(element.hasDataFilter('FitText-Children')) {
+                                        var selector = element.get('data', 'fit-text');
+                                        element.getElements(selector).each(function(el){
+                                                el.retrieve('FitText').fit();
+                                        }, this);
+                                }
+                                element.getElements('[data-filters*=FitText]').each(function(el) {
+                                        el.retrieve('FitText').fit();
+                                });
+                        });
+                }
+        });
 
-})();
+        
+
+
+})();

+ 55 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.HtmlTableRestore.js

@@ -0,0 +1,55 @@
+// 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: Makes HtmlTable instances retain their state on refresh. 
+provides: [Behavior.HtmlTableRestore]
+requires: [Widgets/Behavior.HtmlTable]
+script: Behavior.HtmlTableRestore.js
+...
+*/
+
+Behavior.addGlobalPlugin('HtmlTable', 'HtmlTableRestore', function(element, methods){
+        var table = element.retrieve('HtmlTable');
+        //Get tables in the current frame
+        var tables = methods.getContentElement().getElements('[data-filters*=HtmlTable]');
+        var tableIndex = tables.indexOf(element);
+        var tableState = methods.getBehaviorState().tableState; 
+        var loadEvent = function(loadOptions) {
+                //On load, if there is a previous page and it's the same as the current page, and there's a state array and this state array has the same number of entries as there are tables in the frame, restore the state.
+                if(loadOptions.previousPath && loadOptions.previousPath == loadOptions.requestPath && tableState && tableState.length == tables.length) {
+                        table.restore(tableState[tableIndex]);
+                } else if(tableState && tableState[tableIndex]) {
+                        delete tableState;
+                } 
+        };     
+        methods.addEvent('load', loadEvent);
+        var changeEvent = function() {
+                //On change, create the tableState array and the particular index needed, if necessary.  Then store the serialized state. 
+                if(!methods.getBehaviorState().tableState) methods.getBehaviorState().tableState = [];
+                tableState = methods.getBehaviorState().tableState;
+                if(!tableState[tableIndex]) tableState[tableIndex] = {};
+                tableState[tableIndex] = this.serialize();
+        };
+        table.addEvent('stateChanged', changeEvent); 
+        this.markForCleanup(element, function() {
+                methods.removeEvent('load', loadEvent);
+                table.removeEvent('stateChanged', changeEvent);
+        });
+});
+
+
+

+ 18 - 3
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -45,6 +45,7 @@ requires:
  - /Behavior.HtmlTableKeyboard
  - /Behavior.HtmlTableLiveTreeKeyboard
  - /Behavior.HtmlTableMultiSelectMenu
+ - /Behavior.HtmlTableRestore
  - /Behavior.HtmlTableUpdate
  - /Behavior.MultiChecks
  - /Behavior.PostEditor
@@ -120,7 +121,7 @@ CCS.JFrame = new Class({
 
 	// path: initial page to load
 	initialize: function(path, options){
-		this.parent(options);
+                this.parent(options);
 		new ART.Keyboard(this, this.keyboardOptions);
 		this.addLinkers(this.options.linkers);
 		this.addFilters(this.options.filters);
@@ -131,7 +132,7 @@ CCS.JFrame = new Class({
 		});
 		if(this.options.size) this.behavior.resize(this.options.size.width, this.options.size.height);
 		['attachKeys', 'detachKeys', 'addShortcut', 'addShortcuts', 'removeShortcut', 'removeShortcuts',
-		 'applyDelegates', 'getScroller', 'getContentElement', 'invokeLinker', 'configureRequest'].each(function(method){
+		 'applyDelegates', 'getScroller', 'getContentElement', 'invokeLinker', 'configureRequest', 'getBehaviorState'].each(function(method){
 			this.behavior.passMethod(method, this[method].bind(this));
 		}, this);
 		this.behavior.passMethods({
@@ -294,6 +295,11 @@ CCS.JFrame = new Class({
 		);
 	},
 
+        getBehaviorState: function() {
+                if(!this.options.behaviorState) this.options.behaviorState = {};
+                return this.options.behaviorState;
+        },
+
 	/*
 	options:
 		content: content to render (html, dom element, or $$ collection of dom elements), 
@@ -736,7 +742,8 @@ CCS.JFrame = new Class({
 	},
 
 	_requestSuccessHandler: function(request, html, options) {
-		var error, blankWindowWithError;
+		var error, blankWindowWithError, previousPath;
+                previousPath = this.currentPath;
 		if (this._checkForEmptyErrorState(request, html)) {
 			error = true;
 			if (!this.loadedOnce) blankWindowWithError = true;
@@ -760,6 +767,14 @@ CCS.JFrame = new Class({
 			});
 		}
 		if (redirected) this.fireEvent('redirectAfterRender', [this.currentPath, responsePath]);
+                var loadOptions = $merge({
+                        content: html,
+                        responsePath: responsePath || request.options.url,
+                        error: error,
+                        blankWindowWithError: blankWindowWithError,
+                        previousPath: previousPath
+                }, options || {}); 
+                this.behavior.fireEvent('load', loadOptions); 
 	},
 
 	/*

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

@@ -60,6 +60,7 @@ sources: [
   Source/BehaviorFilters/Behavior.HtmlTableKeyboard.js,
   Source/BehaviorFilters/Behavior.HtmlTableLiveTreeKeyboard.js,
   Source/BehaviorFilters/Behavior.HtmlTableMultiSelectMenu.js,
+  Source/BehaviorFilters/Behavior.HtmlTableRestore.js,
   Source/BehaviorFilters/Behavior.HtmlTableUpdate.js,
   Source/BehaviorFilters/Behavior.MultiChecks.js,
   Source/BehaviorFilters/Behavior.PostEditor.js,