added doubleScroll to TableAjax

SE/se-lib/TableAjax.php

@@ -241,6 +241,7 @@ class TableAjax extends ViewAjax {
 		<?php if ($tblAjaxMap) $tblAjaxMap->printCSS(); ?>
 		<?php if ($tblAjaxMap) $tblAjaxMap->printJS(); ?>
 		<script src="stuff/jquery-ui-1.10.4.custom.min.js"></script>
+		<script src="static/jquery.doubleScroll.js"></script>
 		<link rel="stylesheet" type="text/css" href="stuff/jquery-ui-smoothness/jquery-ui-1.10.4.custom.min.css">
 		<style type="text/css">
 .AjaxTable{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;}
@@ -644,6 +645,7 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 
 		priv.initEvents = function() {
 			jQuery(_uiNodeCont).on('TableAjax:render', priv.onRender);
+			jQuery(window).on('resize', priv.onWindowResize)
 		};
 
 		priv.onRender = function(e) {
@@ -668,9 +670,27 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 					}
 				}
 				priv.renderTable();
+				priv.onWindowResize();
 			}
 		};
 
+		priv.onWindowResize = function() {
+			var stickyCol1Width = (12 + 3) * 4 + 2 * 5 + 1;
+			var stickyCol2Width = 50 + 2 * 5 + 1;
+			var contW = jQuery(_uiNodeCont).parent().width();
+			var colsW = stickyCol1Width + stickyCol2Width;
+			jQuery(_uiNodeCont).css({width:'' + (contW - colsW) + 'px'})//, marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
+
+			var wh = jQuery(window).height();   // returns height of browser viewport
+			var dh = jQuery(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
+			if (dh > wh) {
+				jQuery(_uiNodeCont).doubleScroll()
+				jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({float: 'right', display:'block'})
+			} else {
+				jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({display:'none'})
+			}
+		}
+
 		priv.initialRender = function() {
 			_uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiNodeCont);
 				_head = $('<thead></thead>').prependTo(_uiNode$Table);
@@ -705,7 +725,7 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 		 */
 		priv.renderTable = function() {
 			//create table itself
-			/// console.log('renderTable:: _data', _data);//TODO:DBG:RMME
+			// console.log('renderTable:: _data', _data);//TODO:DBG:RMME
 			/// console.log('renderTable:: _uiNode$Table', _uiNode$Table);//TODO:DBG:RMME
 
 			//create the header which will later hold both sorting and filtering
@@ -3881,7 +3901,7 @@ function <?php echo $jsToogleFiltrProcesuFunctionName; ?>(n) {
 }
 		</script>
 		<?php
-		UI::setTitleJsTag($this->_acl->getRawLabel(100) . " - " . UI::getTitle());
+		UI::setTitle($this->_acl->getRawLabel(100) . " - " . UI::getTitle());
 		$out = ob_get_contents();
 		ob_end_clean();
 		return $out;

SE/static/jquery.doubleScroll.js

@@ -0,0 +1,126 @@
+/*
+ * @name DoubleScroll
+ * @desc displays scroll bar on top and on the bottom of the div
+ * @requires jQuery
+ *
+ * @author Pawel Suwala - http://suwala.eu/
+ * @author Antoine Vianey - http://www.astek.fr/
+ * @version 0.5 (11-11-2015)
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * 
+ * Usage:
+ * https://github.com/avianey/jqDoubleScroll
+ */
+ (function( $ ) {
+ 	
+ 	jQuery.fn.doubleScroll = function(userOptions) {
+	
+		// Default options
+		var options = {
+			contentElement: undefined, // Widest element, if not specified first child element will be used
+			scrollCss: {                
+				'overflow-x': 'auto',
+				'overflow-y': 'hidden'
+			},
+			contentCss: {
+				'overflow-x': 'auto',
+				'overflow-y': 'hidden'
+			},
+			onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
+			resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
+			timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
+		};
+	
+		$.extend(true, options, userOptions);
+	
+		// do not modify
+		// internal stuff
+		$.extend(options, {
+			topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
+			topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
+			topScrollBarInnerSelector: '.doubleScroll-scroll'
+		});
+
+		var _showScrollBar = function($self, options) {
+
+			if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
+				// content doesn't scroll
+				// remove any existing occurrence...
+				$self.prev(options.topScrollBarWrapperSelector).remove();
+				return;
+			}
+		
+			// add div that will act as an upper scroll only if not already added to the DOM
+			var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
+			
+			if ($topScrollBar.length == 0) {
+				
+				// creating the scrollbar
+				// added before in the DOM
+				$topScrollBar = $(options.topScrollBarMarkup);
+				$self.before($topScrollBar);
+
+				// apply the css
+				$topScrollBar.css(options.scrollCss);
+				$self.css(options.contentCss);
+
+				// bind upper scroll to bottom scroll
+				$topScrollBar.bind('scroll.doubleScroll', function() {
+					$self.scrollLeft($topScrollBar.scrollLeft());
+				});
+
+				// bind bottom scroll to upper scroll
+				var selfScrollHandler = function() {
+					$topScrollBar.scrollLeft($self.scrollLeft());
+				};
+				$self.bind('scroll.doubleScroll', selfScrollHandler);
+			}
+
+			// find the content element (should be the widest one)	
+			var $contentElement;		
+			
+			if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
+				$contentElement = $self.find(options.contentElement);
+			} else {
+				$contentElement = $self.find('>:first-child');
+			}
+			
+			// set the width of the wrappers
+			$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
+			$topScrollBar.width($self.width());
+			$topScrollBar.scrollLeft($self.scrollLeft());
+			
+		}
+	
+		return this.each(function() {
+			
+			var $self = $(this);
+			
+			_showScrollBar($self, options);
+			
+			// bind the resize handler 
+			// do it once
+			if (options.resetOnWindowResize) {
+			
+				var id;
+				var handler = function(e) {
+					_showScrollBar($self, options);
+				};
+			
+				$(window).bind('resize.doubleScroll', function() {
+					// adding/removing/replacing the scrollbar might resize the window
+					// so the resizing flag will avoid the infinite loop here...
+					clearTimeout(id);
+					id = setTimeout(handler, options.timeToWaitForResize);
+				});
+
+			}
+
+		});
+
+	}
+
+}( jQuery ));