/* * @description: * expand detail panel for a table row * * @usage: * <table data-template-url="app/insurance/views/patient-claims-detail-view.html" * [data-ris-table-expand="single"] [data-onload="loadClaimDetail"] [data-apply-on="PatientClaim:RepeatDone"]> * */ commonModule.directive('risTableExpand', ['$http', '$templateCache', '$compile', '$timeout', function ($http, $templateCache, $compile, $timeout) { 'use strict'; return { restrict: 'A', link: function (scope, element, attr) { var scrollIntoView = function (id) { if ($('#' + id).prev().length > 0) { $('#' + id).prev()[0].scrollIntoView(); } } var apply = function () { // gernarate uniq id for each tr element except header // and remove before attach click handler element.find("tbody > tr").uniqueId().off('click', expand).on('click', expand); } var expand = function () { var self = this; var $this = $(this); var id = $this.attr('id'); // handle with just open one row. if (attr.risTableExpand === "single") { // close other opend row element.find('.csd-expanded-row').not('.' + $this.attr('id')).hide(); element.find('.csd-selected-row').not('#' + $this.attr('id')).removeClass('csd-selected-row'); } // find expand detail var detail = element.find('.' + id); // if can't find then init the detail panel if (!detail.length) { // find click row scope by element var rowScope = angular.element(self).scope(); // attach hide fn rowScope.hide = function () { $this.trigger('click'); } // execute pre data load fn if existing attr.onload && scope[attr.onload](rowScope); // load and cache template $http.get(attr.templateUrl, { cache: true }).success(function (template) { // complie template with row scope var rowDetail = $compile(template)(rowScope); // insert after row $this.addClass('csd-selected-row').after(rowDetail.addClass('csd-expanded-row ' + id)); scrollIntoView(id); }); } else { // already existing, normaly toggle open and close detail.toggle('fast'); $this.toggleClass('csd-selected-row'); if (detail.is(":visible")) { scrollIntoView(id); } } scope.$emit('table-row-expanded'); } // apply fn by event or default [table renderd] if (attr.applyOn) { scope.$on(attr.applyOn, apply); } else { $timeout(apply, 500); } } }; }]);