feat(pagination): Introduce pagination-href directive

Pagination href-directive allows us to execute an arbitrary function for generating pagination hyperlinks.
QutEcoacoustics · Apr 1, 2016 · f6efe48 · f6efe48
1 parent 97fa379
commit f6efe48
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 24 deletions.
diff --git a/src/app/annotationLibrary/annotationLibrary.tpl.html b/src/app/annotationLibrary/annotationLibrary.tpl.html
@@ -153,7 +153,8 @@ <h2>Annotation Library</h2>
                                 ng-click="searchFilter()">Filter
                         </button>
                         <button type="submit" class="btn btn-warning"
-                                ng-click="clearFilter()">Clear</button>
+                                ng-click="clearFilter()">Clear
+                        </button>
                     </div>
 
 
@@ -165,15 +166,16 @@ <h2>Annotation Library</h2>
         <h3 class="col-sm-4">Results</h3>
 
         <div class="col-sm-4 text-center">
-            <pagination class="annotation-paging"
-                        total-items="paging.total"
-                        ng-model="paging.page"
-                        items-per-page="paging.items"
-                        boundary-links="true"
-                        max-size="paging.maxPageLinks"
-                        num-pages="numPages"
-                        rotate="false">
-            </pagination>
+            <uib-pagination class="annotation-paging"
+                            total-items="paging.total"
+                            ng-model="paging.page"
+                            items-per-page="paging.items"
+                            boundary-links="true"
+                            max-size="paging.maxPageLinks"
+                            num-pages="numPages"
+                            rotate="false"
+                            pagination-href="getPaginationLink">
+            </uib-pagination>
         </div>
         <h3 class="col-sm-4 text-right">
             &nbsp;
@@ -238,15 +240,16 @@ <h3 class="col-sm-4 text-right">
 
     </div>
     <div class="row clearfix text-center">
-        <pagination ng-hide="paging.total < 1"
-                    class="annotation-paging center-block"
-                    total-items="paging.total"
-                    ng-model="paging.page"
-                    items-per-page="paging.items"
-                    boundary-links="true"
-                    max-size="paging.maxPageLinks"
-                    num-pages="numPages"
-                    rotate="false">
-        </pagination>
+        <uib-pagination ng-hide="paging.total < 1"
+                        class="annotation-paging center-block"
+                        total-items="paging.total"
+                        ng-model="paging.page"
+                        items-per-page="paging.items"
+                        boundary-links="true"
+                        max-size="paging.maxPageLinks"
+                        num-pages="numPages"
+                        rotate="false"
+                        pagination-href="getPaginationLink">
+        </uib-pagination>
     </div>
 </div>
diff --git a/src/app/annotationLibrary/library.js b/src/app/annotationLibrary/library.js
@@ -184,7 +184,6 @@ angular
                         {page, items: $scope.paging.items})
                 );
             }
-
             function getPagingSettings(page, items, total) {
                 var paging = {
                     maxPageLinks: 7,

diff --git a/src/components/directives/angular-ui/bootstrap/pagination/pagination.js b/src/components/directives/angular-ui/bootstrap/pagination/pagination.js
@@ -1,20 +1,48 @@
 angular.module(
     "bawApp.directives.ui.bootstrap.pagination",
-    [])
+    ["ui.bootstrap.pagination"])
     .run([
         "$templateCache",
         function($templateCache) {
             // add ng-href and remove ng-click
             const
                 targetTemplate = "uib/template/pagination/pagination.html",
                 pageRegex = /(href).*(?:ng-click="selectPage\(([^,]+), \$event\)")/gm,
-                replaceString = `ng-href="{{ $parent.$parent.getPaginationLink($2) }}" href`;
+                replaceString = `ng-href="{{ pagination.href($2) }}" href`;
 
             var oldTemplate = $templateCache.get(targetTemplate);
 
             var newTemplate = oldTemplate.replace(pageRegex, replaceString);
 
             $templateCache.put(targetTemplate, newTemplate);
-        }]);
+        }])
+    .directive("paginationHref", ["$parse", function($parse) {
+        return {
+            require: ["uibPagination"],
+            controller: "UibPaginationController",
+            controllerAs: "pagination",
+            replace: true,
+            link: function(scope, element, attrs, ctrls) {
+                var paginationCtrl = ctrls[0];
+                let parentScope = scope;
+
+                // this is dodgy AF but its the only way i can think of to get
+                // the instance for which the actual expression is attached!
+                let parts = attrs.paginationHref.split(".");
+                let parent = parentScope;
+                if (parts.length > 1) {
+                    parts.splice(-1, 1);
+                    let parentExpression = parts.join(".");
+                    parent = $parse(parentExpression)(parentScope);
+                }
+
+                let f = $parse(attrs.paginationHref)(parentScope);
+                paginationCtrl.href = function (...args) {
+                    return f.apply(parent, args);
+                };
+            }
+        };
+    }]);
+