feat(footer): add w11k-footer directive

Gruntfile.js

@@ -74,8 +74,12 @@ module.exports = function (grunt) {
     },
     copy: {
       template: {
-        src: 'src/w11k-slides.tpl.html',
-        dest: 'dist/w11k-slides.tpl.html'
+        src: 'src/slides/slides.tpl.html',
+        dest: 'dist/slides/slides.tpl.html'
+      },
+      footer: {
+        src: 'src/footer/footer.tpl.html',
+        dest: 'dist/footer/footer.tpl.html'
       },
       sass: {
         files: [{
@@ -105,7 +109,10 @@ module.exports = function (grunt) {
           }
         },
         files: {
-          'dist/w11k-slides.tpl.js': 'src/slides/slides.tpl.html'
+          'dist/w11k-slides.tpl.js': [
+            'src/slides/slides.tpl.html',
+            'src/footer/footer.tpl.html'
+          ]
         }
       }
     },

src/_variables.scss

@@ -19,6 +19,12 @@ $w11k-slides-slide-regular-header-logo: none !default;
 $w11k-slides-blockquote-border-color: #999 !default;
 $w11k-slides-blockquote-cize-text-color: #999 !default;
 
+/* * * * * * * * * * * * * * * * * * * *
+ * Footer
+ * * * * * * * * * * * * * * * * * * * */
+
+$w11k-slides-footer-text-color: #999 !default;
+
 /* * * * * * * * * * * * * * * * * * * *
  * Open Once
  * * * * * * * * * * * * * * * * * * * */

src/footer/_footer.scss

@@ -0,0 +1,20 @@
+.w11k-footer {
+  position: absolute;
+  bottom: 1em;
+  right: 1.5em;
+  left: 1.5em;
+  font-size: 0.8em;
+  color: $w11k-slides-footer-text-color;
+
+  .footer-left {
+    text-align: left;
+  }
+
+  .footer-middle {
+    text-align: center;
+  }
+
+  .footer-right {
+    text-align: right;
+  }
+}

src/footer/footer.js

@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('w11k.slides').directive('w11kFooter', ['slidesConfig', function (slidesConfig) {
+  return {
+    restrict: 'EA',
+    templateUrl: slidesConfig.footer.templateUrl || 'footer/footer.tpl.html',
+    replace: true,
+    link: function (scope, element, attrs) {
+      var left = element[0].querySelector('.footer-left');
+      var middle = element[0].querySelector('.footer-middle');
+      var right = element[0].querySelector('.footer-right');
+
+      function setContent(element, expression) {
+        var content = scope.$eval(expression);
+        if (angular.isDefined(content)) {
+          element.innerHTML = content;
+        }
+      }
+
+      setContent(left, attrs.left || slidesConfig.footer.left);
+      setContent(middle, attrs.middle || slidesConfig.footer.middle);
+      setContent(right, attrs.right || slidesConfig.footer.right);
+    }
+  };
+}]);

src/footer/footer.less

@@ -0,0 +1,20 @@
+.w11k-footer {
+  position: absolute;
+  bottom: 1em;
+  right: 1.5em;
+  left: 1.5em;
+  font-size: 0.8em;
+  color: @w11k-slides-footer-text-color;
+
+  .footer-left {
+    text-align: left;
+  }
+
+  .footer-middle {
+    text-align: center;
+  }
+
+  .footer-right {
+    text-align: right;
+  }
+}

src/footer/footer.tpl.html

@@ -0,0 +1,7 @@
+<div class="w11k-footer">
+  <div class="row">
+    <div class="col-sm-3 footer-left"></div>
+    <div class="col-sm-6 footer-middle"></div>
+    <div class="col-sm-3 footer-right"></div>
+  </div>
+</div>

src/variables.less

@@ -19,6 +19,12 @@
 @w11k-slides-blockquote-border-color: #999;
 @w11k-slides-blockquote-cize-text-color: #999;
 
+/* * * * * * * * * * * * * * * * * * * *
+ * Footer
+ * * * * * * * * * * * * * * * * * * * */
+
+@w11k-slides-footer-text-color: #999;
+
 /* * * * * * * * * * * * * * * * * * * *
  * Open Once
  * * * * * * * * * * * * * * * * * * * */

src/w11k-slides.less

@@ -2,6 +2,7 @@
 
 @import "variables";
 
+@import "footer/footer";
 @import "corner-ribbon/corner-ribbon";
 @import "open-once/open-once";
 @import "prettyprint/prettyprint";

src/w11k-slides.scss

@@ -3,6 +3,7 @@
 $theCodeCampus_orange: #ed5502;
 @import "variables";
 
+@import "footer/footer";
 @import "corner-ribbon/corner-ribbon";
 @import "open-once/open-once";
 @import "prettyprint/prettyprint";