Add application version to footer (#335)

* Implement ManifestBind directive

This directive is useful to bind the contents of an element to a
property in the `package.json` manifest.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

* Add application version to footer

Fixes: https://github.com/resin-io/etcher/issues/292
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

build/css/main.css

@@ -6000,8 +6000,7 @@ html {
 .caption, .icon-caption {
   font-weight: bold;
   font-size: 11px;
-  margin-bottom: 0;
+  margin-bottom: 0; }
-  text-transform: uppercase; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6367,6 +6366,10 @@ body {
   .section-footer [os-open-external]:hover {
     color: #85898c;
     text-decoration: underline; }
+  .section-footer .footer-right {
+    position: absolute;
+    right: 0;
+    top: 50%; }
 
 .step-border, .step-border-left, .step-border-right {
   height: 2px;

lib/browser/app.js

@@ -55,7 +55,8 @@ const app = angular.module('Etcher', [
   // Utils
   require('./browser/utils/if-state/if-state'),
   require('./browser/utils/notifier/notifier'),
-  require('./browser/utils/path/path')
+  require('./browser/utils/path/path'),
+  require('./browser/utils/manifest-bind/manifest-bind')
 ]);
 
 app.run(function(AnalyticsService) {

lib/browser/utils/manifest-bind/directives/manifest-bind.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const _ = require('lodash');
+const packageJSON = require('../../../../../package.json');
+
+/**
+ * @summary ManifestBind directive
+ * @function
+ * @public
+ *
+ * @description
+ * This directive provides an attribute to bind the current
+ * element value to a property in `package.json`.
+ *
+ * @returns {Object} directive
+ *
+ * @example
+ * <span manifest-bind="version"></button>
+ */
+module.exports = function() {
+  return {
+    restrict: 'A',
+    scope: false,
+    link: function(scope, element, attributes) {
+      const value = _.get(packageJSON, attributes.manifestBind);
+
+      if (!value) {
+        throw new Error('ManifestBind: Unknown property `' + attributes.manifestBind + '`');
+      }
+
+      element.html(value);
+    }
+  };
+};

lib/browser/utils/manifest-bind/manifest-bind.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * @module Etcher.Utils.ManifestBind
+ *
+ * The purpose of this module is to provide an attribute
+ * directive to bind the current element to a property
+ * in the application's `package.json` manifest.
+ */
+
+const angular = require('angular');
+const MODULE_NAME = 'Etcher.Utils.ManifestBind';
+const ManifestBind = angular.module(MODULE_NAME, []);
+ManifestBind.directive('manifestBind', require('./directives/manifest-bind'));
+
+module.exports = MODULE_NAME;

lib/index.html

@@ -48,6 +48,8 @@
         width="79px"
         height="23px"
         os-open-external="https://resin.io"></svg-icon>
+
+      <span class="caption footer-right" manifest-bind="version"></span>
     </footer>
   </body>
 </html>

lib/scss/components/_caption.scss

@@ -18,5 +18,4 @@
   font-weight: bold;
   font-size: 11px;
   margin-bottom: 0;
-  text-transform: uppercase;
 }

lib/scss/main.scss

@@ -107,6 +107,12 @@ body {
     color: lighten($color-disabled, 5%);
     text-decoration: underline;
   }
+
+  .footer-right {
+    position: absolute;
+    right: 0;
+    top: 50%;
+  }
 }
 
 .step-border {

tests/browser/utils/manifest-bind.spec.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const m = require('mochainon');
+const angular = require('angular');
+const packageJSON = require('../../../package.json');
+require('angular-mocks');
+
+describe('Browser: ManifestBind', function() {
+
+  beforeEach(angular.mock.module(
+    require('../../../lib/browser/utils/manifest-bind/manifest-bind')
+  ));
+
+  let $compile;
+  let $rootScope;
+
+  beforeEach(angular.mock.inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  describe('manifestBind', function() {
+
+    it('should bind to top level properties', function() {
+      const element = $compile('<span manifest-bind="version"></span>')($rootScope);
+      $rootScope.$digest();
+      m.chai.expect(element.html()).to.equal(packageJSON.version);
+    });
+
+    it('should bind to nested properties', function() {
+      const element = $compile('<span manifest-bind="repository.type"></span>')($rootScope);
+      $rootScope.$digest();
+      m.chai.expect(element.html()).to.equal(packageJSON.repository.type);
+    });
+
+    it('should throw if the property does not exist', function() {
+      m.chai.expect(function() {
+        $compile('<span manifest-bind="foo.bar"></span>')($rootScope);
+      }).to.throw('ManifestBind: Unknown property `foo.bar`');
+    });
+
+  });
+
+});