forked from 90TechSAS/zl-table
-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.min.js
1 lines (1 loc) · 10.5 KB
/
table.min.js
1
"use strict";var module=angular.module("90TechSAS.zl-table",[]);module.directive("zlTable",["$compile","$timeout","$templateCache",function($compile,$timeout,$templateCache){function compile(elt){function getAvailableColumns(thead,tbody){var row=_.find(thead.children,"tagName","TR");if(!row)throw"zl-table: The thead element should have one tr child";headRowAttrs=row.attributes;var bodyRow=_.find(tbody.children,"tagName","TR");if(!bodyRow)throw"zl-table: The tbody element should have one tr child";return bodyRowAttrs=bodyRow.attributes,_.compact(_.map(row.children,function(c,i){if(!c.attributes.getNamedItem("id"))throw"zl-table: The head cells should have an id";return{id:c.attributes.getNamedItem("id").value,headTemplate:c.innerHTML,template:bodyRow.children[i].innerHTML}}))}var rootElement,bodyRowAttrs,headRowAttrs;rootElement=elt;var head=_.find(elt.children(),"tagName","THEAD");if(!head)throw"zl-table: The table should have one thead child";var tHeadAttrs=head.attributes,body=_.find(elt.children(),"tagName","TBODY");if(!body)throw"zl-table: The table should have one tbody child";var bodyGrid,tBodyAttrs=body.attributes,availableColumns=getAvailableColumns(head,body),headBuilt=buildHeader(tHeadAttrs,headRowAttrs),bodyBuilt=buildBody(tBodyAttrs,bodyRowAttrs);return head.remove(),body.remove(),{pre:function(scope,element){scope.availableColumns=availableColumns,element.append($compile(headBuilt)(scope)),element.append($compile(bodyBuilt)(scope)),$timeout(function(){null!=rootElement[0].attributes.getNamedItem("grid-template")&&(bodyGrid='<div ng-if="ctrl.gridMode"><div class="noselect" style="max-width:400px; float:left;margin:1%;" ng-repeat="elt in ctrl.zlTable | orderBy:ctrl.orderBy:ctrl.reverse"ng-class="{\'zl-row-selected\': ctrl.isSelected(elt)}"ng-click="ctrl.selectClick($event, elt)"><zl-template-compiler template="'+escapeQuotes($templateCache.get(rootElement[0].attributes.getNamedItem("grid-template").value))+'"></zl-template-compiler></div></div><div style="clear:both;"></div>',element.after($compile(bodyGrid)(scope)))})}}}function escapeQuotes(str){return str?str.replace(/"/g,"""):void 0}function buildAttributes(attrs){return _.reduce(attrs,function(result,attr){return attr.name&&attr.value&&(result+=attr.name+"="+attr.value+" "),result},"")}function buildHeader(tHeadAttrs,headRowAttrs){var elt='<thead ng-if="!ctrl.gridMode"'+buildAttributes(tHeadAttrs)+"><tr "+buildAttributes(headRowAttrs)+'><th ng-click="ctrl.selectAll()" ng-if="ctrl.selectedData"><input name="header-check" type="checkbox" ng-click="ctrl.selectAll(); $event.stopImmediatePropagation()" ng-checked="ctrl.areAllSelected()"/><label for="header-check" ng-click="ctrl.selectAll(); $event.stopImmediatePropagation()" ><span></span></label></th><th ng-repeat="col in availableColumns | zlColumnFilter:ctrl.columns track by col.id" id="{{col.id}}" ng-click="ctrl.order(col.id)" zl-drag-drop zl-drag="col.id" zl-drop="ctrl.dropColumn($data, col.id)"class="zl-col"ng-class="{\'zl-col-ordered\': ctrl.pagination.orderBy == col.id}"><div class="zl-th-container"ng-class="{\'zl-col-sortable\': ctrl.isSortable(col), \'zl-col-reverse\': ctrl.pagination.orderBy == col.id && ctrl.pagination.reverse}"><zl-template-compiler template="{{col.headTemplate}}"></zl-template-compiler> <button ng-click="ctrl.dismiss(col.id)" class="zl-table-del-btn"></button></div></th></tr></thead>';return elt}function buildBody(tBodyAttrs,bodyRowAttrs){var elt='<tbody ng-if="!ctrl.gridMode"'+buildAttributes(tBodyAttrs)+"><tr "+buildAttributes(bodyRowAttrs)+'class="noselect" ng-repeat="elt in ctrl.zlTable track by ctrl.getIdValue(elt, $index)" ng-click="ctrl.rowClick($event, elt)" ng-class="{\'zl-row-selected\': ctrl.isSelected(elt)}"><td ng-if="ctrl.selectedData" ng-click="ctrl.selectClick($event, elt); $event.stopImmediatePropagation()"><input name="{{elt._id}}" type="checkbox" ng-click="ctrl.selectClick($event, elt); $event.stopImmediatePropagation()" ng-checked="ctrl.isSelected(elt)"/><label for="{{elt._id}}" ng-click="ctrl.selectClick($event, elt); $event.stopImmediatePropagation()" ><span></span></label></td><td ng-repeat="col in availableColumns | zlColumnFilter:ctrl.columns track by col.id"><zl-template-compiler template="{{col.template}}"></zl-template-compiler></td></tr></tbody>';return elt}var ID_FIELDS=["id","_id","uid","uuid","$uid"];return{restrict:"A",controllerAs:"ctrl",scope:{},bindToController:{zlTable:"=",columns:"=",update:"&",pagination:"=zlPagination",selectedData:"=",selectionChanged:"&",gridMode:"=",gridTemplate:"=",rowClickFn:"&zlRowClick",idField:"@"},compile:compile,controller:["$scope",function($scope){function dropColumn(source,target){var new_index=_.findIndex(self.columns,{id:target}),old_index=_.findIndex(self.columns,{id:source});self.columns.splice(new_index,0,self.columns.splice(old_index,1)[0]),$scope.$apply()}function isSortable(col){var found=_.find(self.columns,{id:col.id});return found&&found.sortable!==!1}function selectAll(){areAllSelected()?self.selectedData=[]:self.selectedData=_.map(self.zlTable,function(el){return el[self.idField]})}function areAllSelected(){return!_.difference(_.map(self.zlTable,function(el){return el[self.idField]}),self.selectedData).length}function selectClick(event,elt){event.shiftKey&&!isSelected(elt)?rowClick(event,elt):(isSelected(elt)?_.remove(self.selectedData,function(selectedId){return selectedId===getIdValue(elt)}):self.selectedData.push(getIdValue(elt)),self.selectionChanged({$selectedData:self.selectedData}))}function rowClick(event,elt){if(event.shiftKey){if(isSelected(elt))return;var lastClicked=self.selectedData[self.selectedData.length-1]||getIdValue(self.zlTable[0]),inside=!1;_.each(self.zlTable,function(currentObj){(getIdValue(currentObj)===lastClicked||currentObj===elt)&&(inside=!inside),inside&&!isSelected(currentObj)&&self.selectedData.push(getIdValue(currentObj))}),isSelected(elt)||self.selectedData.push(getIdValue(elt)),self.selectionChanged({$selectedData:self.selectedData})}else self.rowClickFn&&self.rowClickFn({$event:event,$elt:elt})}function isSelected(elt){return _.includes(self.selectedData,getIdValue(elt))}function getIdValue(obj,index){if(!self.idField){var found=_.find(ID_FIELDS,function(f){return obj[f]});found&&(self.idField=found)}return self.idField?obj[self.idField]:index}function updateCall(){self.update({$pagination:self.pagination})}function init(){self.pagination=self.pagination||{},self.pagination.currentPage=self.pagination.currentPage||0,self.pagination.perPage=self.pagination.perPage||10,updateCall()}function order(name){var correspondingColumn=_.find(self.columns,{id:name});correspondingColumn&&correspondingColumn.sortable===!1||(self.pagination.orderBy=name,this.reverse=!this.reverse,self.pagination.reverse=this.reverse,updateCall())}function display(name){return _.contains(self.columns,name)}function dismiss(name){_.pull(self.columns,name)}var self=this;$scope.$watchGroup([function(){return self.pagination.perPage},function(){return self.pagination.currentPage},function(){return self.columns}],init,!0),$scope.$watchCollection(function(){return self.columns},function(){self.columns.forEach(function(col){if(/^customFields\./.test(col.id)){var c=_.find($scope.availableColumns,{id:col.id});if(!c){var newColumn=_.clone(_.find($scope.availableColumns,{id:"customFields"}));newColumn.id=col.id,newColumn.label=col.label,$scope.availableColumns.push(newColumn)}}})}),_.extend(self,{order:order,display:display,dismiss:dismiss,rowClick:rowClick,isSelected:isSelected,selectClick:selectClick,selectAll:selectAll,dropColumn:dropColumn,availableColumns:$scope.availableColumns,areAllSelected:areAllSelected,isSortable:isSortable,getIdValue:getIdValue})}]}}]),module.directive("zlPaginate",["$compile","$timeout",function($compile,$timeout){return{restrict:"E",controllerAs:"paginationCtrl",scope:{},template:'<button class="waves-effect waves-teal btn-flat" ng-if="paginationCtrl.pagination.currentPage != 0" ng-click="paginationCtrl.previousPage()"><</button><button class="waves-effect waves-teal btn-flat" ng-repeat="elt in paginationCtrl.paginateArray() track by $index" ng-click="paginationCtrl.page($index)">{{$index +1}}</button><button class="waves-effect waves-teal btn-flat" ng-if="paginationCtrl.pagination.currentPage < paginationCtrl.paginateArray().length -1" ng-click="paginationCtrl.nextPage()">></button>',bindToController:{update:"&",pagination:"=zlPagination"},controller:function(){function updateCall(){self.update({$pagination:self.pagination})}function nextPage(){self.page(self.pagination.currentPage+1)}function previousPage(){self.page(self.pagination.currentPage-1)}function page(pageNumber){self.pagination.currentPage=pageNumber,updateCall()}function paginateArray(){var pageNumber=Math.ceil(self.pagination.totalElements/self.pagination.perPage);return new Array(isNaN(pageNumber)?0:pageNumber)}var self=this;_.extend(self,{paginateArray:paginateArray,page:page,previousPage:previousPage,nextPage:nextPage})}}}]),module.directive("zlDragDrop",function(){return{controller:function(){},scope:{},controllerAs:"dragDropCtrl",bindToController:{zlDrag:"=",zlDrop:"&"},link:function(scope,element){var el=element[0];window.addEventListener("dragover",function(e){e.preventDefault()},!1),window.addEventListener("drop",function(e){e.preventDefault()},!1),scope.dragDropCtrl.zlDrag&&(el.draggable=!0,el.addEventListener("dragstart",function(e){return e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("Text",scope.dragDropCtrl.zlDrag),this.classList.add("drag"),!1},!1),el.addEventListener("dragend",function(e){return this.classList.remove("drag"),!1},!1),el.addEventListener("dragover",function(e){return e.dataTransfer.dropEffect="move",e.preventDefault&&e.preventDefault(),this.classList.add("over"),!1},!1)),scope.dragDropCtrl.zlDrop&&(el.addEventListener("drop",function(e){return e.preventDefault(),e.stopPropagation(),e.stopPropagation&&e.stopPropagation(),this.classList.remove("over"),scope.dragDropCtrl.zlDrop({$data:e.dataTransfer.getData("Text"),$event:e}),!1},!1),el.addEventListener("dragenter",function(e){return this.classList.add("over"),!1},!1),el.addEventListener("dragleave",function(e){return this.classList.remove("over"),!1},!1))}}}),module.directive("zlTemplateCompiler",["$compile",function($compile){return{restrict:"E",link:function(scope,tElement,tAttrs){var template='<div style="display:inline;">'+tAttrs.template+"</div>";tElement.replaceWith($compile(template)(scope))}}}]),module.filter("zlColumnFilter",function(){return function(allColumns,columnList){var cols=_.pluck(_.filter(columnList,"visible"),"id");return _.sortBy(_.reject(allColumns,function(col){return!_.includes(cols,col.id)}),function(col){return cols.indexOf(col.id)})}});