@@ -319,6 +319,7 @@ angular.module('apMesa.controllers.ApMesaController', [
319319 } else {
320320 column . width = Math . max ( new_width , CONSTANTS . minWidth ) ;
321321 }
322+ $scope . $emit ( 'apMesa:columnResized' , column , column . width ) ;
322323 $scope . $apply ( ) ;
323324 } ) ;
324325 } ;
@@ -462,7 +463,8 @@ angular.module('apMesa.controllers.ApMesaController', [
462463 'glyphicon glyphicon-chevron-down'
463464 ] ,
464465 onRegisterApi : function ( api ) {
465- }
466+ } ,
467+ fixedWidthLayout : false
466468 } ;
467469 function defaults ( obj ) {
468470 if ( typeof obj !== 'object' ) {
@@ -596,6 +598,7 @@ angular.module('apMesa.controllers.ApMesaController', [
596598 function postLink ( scope , element ) {
597599 var deregStorageWatchers = [ ] ;
598600 scope . scrollDiv = element . find ( '.mesa-rows-table-wrapper' ) ;
601+ scope . wrapperDiv = element . find ( '.ap-mesa-wrapper' ) ;
599602 scope . $watch ( '_columns' , function ( columns , oldColumns ) {
600603 if ( columns !== scope . columns ) {
601604 resetColumns ( scope ) ;
@@ -639,6 +642,24 @@ angular.module('apMesa.controllers.ApMesaController', [
639642 resetState ( scope ) ;
640643 initOptions ( scope ) ;
641644 } ) ;
645+ scope . $watch ( 'options.fixedWidthLayout' , function ( newValue , oldValue ) {
646+ if ( newValue !== oldValue ) {
647+ if ( angular . isString ( scope . classes ) ) {
648+ if ( newValue && scope . classes . indexOf ( 'table-nonfluid' ) === - 1 ) {
649+ scope . classes = scope . classes + ' table-nonfluid' ;
650+ } else if ( ! newValue && scope . classes . indexOf ( 'table-nonfluid' ) > - 1 ) {
651+ scope . classes = scope . classes . split ( 'table-nonfluid' ) . join ( '' ) ;
652+ }
653+ if ( ! newValue && scope . classes . indexOf ( 'full-width' ) === - 1 ) {
654+ scope . classes = scope . classes + ' full-width' ;
655+ } else if ( newValue && scope . classes . indexOf ( 'full-width' ) > - 1 ) {
656+ scope . classes = scope . classes . split ( 'full-width' ) . join ( '' ) ;
657+ }
658+ }
659+ resetState ( scope ) ;
660+ initOptions ( scope ) ;
661+ }
662+ } ) ;
642663 scope . $watch ( 'options.storage' , function ( storage ) {
643664 if ( storage ) {
644665 if ( ! scope . options . storageKey ) {
@@ -2182,7 +2203,7 @@ angular.module('apMesa.templates', [
21822203angular . module ( 'src/templates/apMesa.tpl.html' , [ ] ) . run ( [
21832204 '$templateCache' ,
21842205 function ( $templateCache ) {
2185- $templateCache . put ( 'src/templates/apMesa.tpl.html' , '<div class="ap-mesa-wrapper" ng-class="{\n' + '\'paging-strategy-paginate\': options.pagingStrategy === \'PAGINATE\',\n' + '\'paging-strategy-scroll\': options.pagingStrategy === \'SCROLL\',\n' + '\'ap-mesa-loading-error\': !!transientState.loadingError,\n' + '\'ap-mesa-no-data\': !transientState.loading && !transientState.loadingError && visible_rows.length === 0\n' + '}">\n' + ' <table ng-class="classes" class="ap-mesa mesa-header-table">\n' + ' <thead>\n' + ' <!-- MAIN ROW OF COLUMN HEADERS -->\n' + ' <tr ui-sortable="sortableOptions" ng-model="enabledColumnObjects" class="ap-mesa-header-row">\n' + '\n' + ' <!-- COLUMN HEADERS -->\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-click="toggleSort($event,column)"\n' + ' ng-class="[\n' + ' {\n' + ' \'sortable-column\' : column.sort,\n' + ' \'select-column\': column.selector,\n' + ' \'is-sorting\': sortDirection[column.id]\n' + ' },\n' + ' \'table-header-\' + column.id,\n' + ' column.classes ? column.classes : \'\'\n' + ' ]"\n' + ' ng-attr-title="{{ column.title || \'\' }}"\n' + ' ng-style="{ width: column.width, \'min-width\': column.width, \'max-width\': column.width }">\n' + '\n' + ' <!-- COLUMN TEXT -->\n' + ' <span class="column-text">\n' + ' <input ng-if="column.selector" type="checkbox" ng-checked="isSelectedAll()" ng-click="toggleSelectAll($event)" />\n' + ' <span\n' + ' class="ap-mesa-sort-icon" \n' + ' ng-if="column.sort"\n' + ' title="This column is sortable. Click to toggle sort order. Hold shift while clicking multiple columns to stack sorting.">\n' + ' <span class="sorting-icon {{ getSortClass( sortDirection[column.id] ) }}"></span>\n' + ' <span ng-bind="transientState.sortPriority[column.id]" class="sort-priority" ng-if="transientState.sortPriorityShow && transientState.sortPriority[column.id]"></span>\n' + ' </span>\n' + ' <span class="ap-mesa-th-title" ap-mesa-th-title></span>\n' + ' </span>\n' + '\n' + ' <!-- COLUMN RESIZER -->\n' + ' <span\n' + ' ng-if="!column.lockWidth"\n' + ' class="column-resizer"\n' + ' ng-class="{\'discreet-width\': !!column.width}"\n' + ' title="Click and drag to set discreet width. Click once to clear discreet width."\n' + ' ng-mousedown="startColumnResize($event, column)">\n' + ' \n' + ' </span>\n' + '\n' + ' </th>\n' + ' </tr>\n' + '\n' + ' <!-- ROW OF COLUMMN FILTERS -->\n' + ' <tr ng-if="hasFilterFields() && transientState.showFiltersRow" class="ap-mesa-filter-row">\n' + '\n' + ' <!-- COLUMN FILTER CELLS -->\n' + ' <td ng-repeat="column in enabledColumnObjects" ng-class="\'column-\' + column.id">\n' + '\n' + ' <!-- FILTER INPUT -->\n' + ' <input\n' + ' type="text"\n' + ' ng-if="(column.filter)"\n' + ' ng-model="persistentState.searchTerms[column.id]"\n' + ' ng-attr-placeholder="{{ column.filterPlaceholder ? column.filterPlaceholder : (column.filter.placeholder || \'filter\') }}"\n' + ' ng-attr-title="{{ column.filter && column.filter.title }}"\n' + ' ng-class="{\'active\': persistentState.searchTerms[column.id] }">\n' + '\n' + ' <!-- FILTER CLEAR BUTTON -->\n' + ' <button\n' + ' ng-if="(column.filter)"\n' + ' ng-show="persistentState.searchTerms[column.id]"\n' + ' class="clear-search-btn"\n' + ' role="button"\n' + ' type="button"\n' + ' ng-click="clearAndFocusSearch(column.id)">\n' + ' ×\n' + ' </button>\n' + '\n' + ' </td>\n' + ' </tr>\n' + ' </thead>\n' + ' </table>\n' + ' <div ap-mesa-status-display></div>\n' + ' <div class="mesa-rows-table-wrapper" ng-style="tbodyNgStyle" ng-hide="transientState.loadingError">\n' + ' <table ng-class="classes" class="ap-mesa mesa-rows-table">\n' + ' <thead>\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: column.width, \'min-width\': column.width, \'max-width\': column.width }"\n' + ' ></th>\n' + ' </tr>\n' + ' </thead>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[0,transientState.rowOffset]" cell-content="..."></tbody>\n' + ' <tbody ap-mesa-rows class="ap-mesa-rendered-rows"></tbody>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[transientState.rowOffset + visible_rows.length, transientState.filterCount]" cell-content="..."></tbody>\n' + ' </table>\n' + ' </div>\n' + ' <div class="ap-mesa-pagination" ng-if="options.pagingStrategy === \'PAGINATE\'" ap-mesa-pagination-ctrls></div>\n' + '</div>\n' + '' ) ;
2206+ $templateCache . put ( 'src/templates/apMesa.tpl.html' , '<div>\n' + ' <div class="ap-mesa-wrapper" ng-class="{\n' + ' \'paging-strategy-paginate\': options.pagingStrategy === \'PAGINATE\',\n' + ' \'paging-strategy-scroll\': options.pagingStrategy === \'SCROLL\',\n' + ' \'ap-mesa-loading-error\': !!transientState.loadingError,\n' + ' \'ap-mesa-no-data\': !transientState.loading && !transientState.loadingError && visible_rows.length === 0,\n' + ' \'ap-mesa-nonfluid\': options.fixedWidthLayout\n' + ' }">\n' + ' <table ng-class="classes" class="ap-mesa mesa-header-table">\n' + ' <thead>\n' + ' <!-- MAIN ROW OF COLUMN HEADERS -->\n' + ' <tr ui-sortable="sortableOptions" ng-model="enabledColumnObjects" class="ap-mesa-header-row">\n' + '\n' + ' <!-- COLUMN HEADERS -->\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-click="toggleSort($event,column)"\n' + ' ng-class="[\n' + ' {\n' + ' \'sortable-column\' : column.sort,\n' + ' \'select-column\': column.selector,\n' + ' \'is-sorting\': sortDirection[column.id]\n' + ' },\n' + ' \'table-header-\' + column.id,\n' + ' column.classes ? column.classes : \'\'\n' + ' ]"\n' + ' ng-attr-title="{{ column.title || \'\' }}"\n' + ' ng-style="{ width: options.fixedWidthLayout ? \'auto\' : column.width, \'min-width\': column.width, \'max-width\': column.width }">\n' + '\n' + ' <!-- COLUMN TEXT -->\n' + ' <span class="column-text">\n' + ' <input ng-if="column.selector" type="checkbox" ng-checked="isSelectedAll()" ng-click="toggleSelectAll($event)" />\n' + ' <span\n' + ' class="ap-mesa-sort-icon" \n' + ' ng-if="column.sort"\n' + ' title="This column is sortable. Click to toggle sort order. Hold shift while clicking multiple columns to stack sorting.">\n' + ' <span class="sorting-icon {{ getSortClass( sortDirection[column.id] ) }}"></span>\n' + ' <span ng-bind="transientState.sortPriority[column.id]" class="sort-priority" ng-if="transientState.sortPriorityShow && transientState.sortPriority[column.id]"></span>\n' + ' </span>\n' + ' <span class="ap-mesa-th-title" ap-mesa-th-title></span>\n' + ' </span>\n' + '\n' + ' <!-- COLUMN RESIZER -->\n' + ' <span\n' + ' ng-if="!column.lockWidth"\n' + ' class="column-resizer"\n' + ' ng-class="{\'discreet-width\': !!column.width}"\n' + ' title="Click and drag to set discreet width. Click once to clear discreet width."\n' + ' ng-mousedown="startColumnResize($event, column)">\n' + ' \n' + ' </span>\n' + '\n' + ' </th>\n' + ' </tr>\n' + '\n' + ' <!-- ROW OF COLUMMN FILTERS -->\n' + ' <tr ng-if="hasFilterFields() && transientState.showFiltersRow" class="ap-mesa-filter-row">\n' + '\n' + ' <!-- COLUMN FILTER CELLS -->\n' + ' <td ng-repeat="column in enabledColumnObjects" ng-class="\'column-\' + column.id">\n' + '\n' + ' <!-- FILTER INPUT -->\n' + ' <input\n' + ' type="text"\n' + ' ng-if="(column.filter)"\n' + ' ng-model="persistentState.searchTerms[column.id]"\n' + ' ng-attr-placeholder="{{ column.filterPlaceholder ? column.filterPlaceholder : (column.filter.placeholder || \'filter\') }}"\n' + ' ng-attr-title="{{ column.filter && column.filter.title }}"\n' + ' ng-class="{\'active\': persistentState.searchTerms[column.id] }"\n' + ' ng-style="{\'width\': options.fixedWidthLayout ? column.width : \'100%\'}">\n' + '\n' + ' <!-- FILTER CLEAR BUTTON -->\n' + ' <button\n' + ' ng-if="(column.filter)"\n' + ' ng-show="persistentState.searchTerms[column.id]"\n' + ' class="clear-search-btn"\n' + ' role="button"\n' + ' type="button"\n' + ' ng-click="clearAndFocusSearch(column.id)">\n' + ' ×\n' + ' </button>\n' + '\n' + ' </td>\n' + ' </tr>\n' + ' </thead>\n' + ' </table>\n' + ' <div ap-mesa-status-display></div>\n' + ' <div class="mesa-rows-table-wrapper" ng-style="tbodyNgStyle" ng-hide="transientState.loadingError"\n' + ' ng-class="{\n' + ' \'fixed-width-layout\': options.fixedWidthLayout,\n' + ' \'auto-layout\': !options.fixedWidthLayout\n' + ' }">\n' + ' <table ng-class="classes" class="ap-mesa mesa-rows-table">\n' + ' <colgroup ng-if="options.fixedWidthLayout">\n' + ' <col ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: column.width }"\n' + ' />\n' + ' </colgroup>\n' + ' <thead>\n' + ' <tr>\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: options.fixedWidthLayout ? \'auto\' : column.width, \'min-width\': column.width, \'max-width\': column.width }"\n' + ' ></th>\n' + ' </tr>\n' + ' </thead>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[0,transientState.rowOffset]" cell-content="..."></tbody>\n' + ' <tbody ap-mesa-rows class="ap-mesa-rendered-rows"></tbody>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[transientState.rowOffset + visible_rows.length, transientState.filterCount]" cell-content="..."></tbody>\n' + ' </table>\n' + ' </div>\n' + ' </div>\n' + ' <div class="ap-mesa-pagination" ng-if="options.pagingStrategy === \'PAGINATE\'" ap-mesa-pagination-ctrls></div>\n' + '</div>' ) ;
21862207 }
21872208] ) ;
21882209angular . module ( 'src/templates/apMesaDummyRows.tpl.html' , [ ] ) . run ( [
0 commit comments