#29 - estruturando pagination como diretiva

iloveblogs · Mar 11, 2016 · 1bc57d6 · 1bc57d6
1 parent 4c1b24a
commit 1bc57d6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,15 +13,7 @@
         <navigation-header></navigation-header>
         <alerts></alerts>
         <main ui-view></main>
-        <div class="pagination">
-            <ul class="pagination__list">
-                <li class="pagination__list__item"><a href="" class="pagination__list__link">&lt; Anterior</a></li>
-                <li class="pagination__list__item"><a href="" class="pagination__list__link">1</a></li>
-                <li class="pagination__list__item"><a href="" class="pagination__list__link">2</a></li>
-                <li class="pagination__list__item"><a href="" class="pagination__list__link">3</a></li>
-                <li class="pagination__list__item"><a href="" class="pagination__list__link">Próxima &gt;</a></li>
-            </ul>
-        </div>
+        <pagination></pagination>
         <page-footer></page-footer>
     </body>
     <!-- inject:js -->

diff --git a/src/js/components/pagination/directives/pagination.directive.js b/src/js/components/pagination/directives/pagination.directive.js
@@ -0,0 +1,16 @@
+(function(){
+    'use strict';
+
+    angular.module('guest-post.pagination').directive('pagination', paginationDirective);
+
+    function paginationDirective(){
+        var directive = {
+            restrict: 'E',
+            templateUrl: '/js/components/pagination/templates/pagination.template.html',
+            scope: {},
+            replace: true
+        };
+        return directive;
+    }
+
+})();
diff --git a/src/js/components/pagination/pagination.module.js b/src/js/components/pagination/pagination.module.js
@@ -0,0 +1,4 @@
+(function(){
+    angular.module('guest-post.pagination', []);
+    GUEST.angularDependencies.push('guest-post.pagination');
+})();
diff --git a/src/js/components/pagination/templates/pagination.template.html b/src/js/components/pagination/templates/pagination.template.html
@@ -0,0 +1,9 @@
+<div class="pagination">
+    <ul class="pagination__list">
+        <li class="pagination__list__item"><a href="" class="pagination__list__link">&lt; Anterior</a></li>
+        <li class="pagination__list__item"><a href="" class="pagination__list__link">1</a></li>
+        <li class="pagination__list__item"><a href="" class="pagination__list__link">2</a></li>
+        <li class="pagination__list__item"><a href="" class="pagination__list__link">3</a></li>
+        <li class="pagination__list__item"><a href="" class="pagination__list__link">Próxima &gt;</a></li>
+    </ul>
+</div>
diff --git a/src/styl/module/pagination.styl b/src/styl/module/pagination.styl
@@ -8,7 +8,7 @@
         list-style: none
         text-align: center
         margin: 0
-        padding: get-spacing(1) 0
+        padding: get-spacing(2) 0
         border-top: 1px solid rgb(233, 233, 233)
         border-bottom: 1px solid rgb(233, 233, 233)