Merge branch 'master' into master-dist

Author: patternfly-build

Gruntfile.js

@@ -191,6 +191,11 @@ module.exports = function (grunt) {
           src: ['filters/**/*.html'],
           dest: 'templates/filters.js'
         },
+        'patternfly.modals': {
+          cwd: 'src/',
+          src: ['modals/**/*.html'],
+          dest: 'templates/modals.js'
+        },
         'patternfly.sort': {
           cwd: 'src/',
           src: ['sort/**/*.html'],

dist/angular-patternfly.js

@@ -30,6 +30,14 @@ angular.module('patternfly.filters', ['patternfly.select', 'ui.bootstrap']);
  *   Module for formting related functionality, primarily filters.
  */
 angular.module('patternfly.form', []);
+;/**
+ * @name  patternfly
+ *
+ * @description
+ *   Modal module for patternfly.
+ *
+ */
+angular.module('patternfly.modals', ['ui.bootstrap.modal', 'ui.bootstrap.tpls']);
 ;/**
  * @name  patternfly navigation
  *
@@ -57,6 +65,7 @@ angular.module('patternfly', [
   'patternfly.card',
   'patternfly.filters',
   'patternfly.form',
+  'patternfly.modals',
   'patternfly.navigation',
   'patternfly.notification',
   'patternfly.select',
@@ -3692,6 +3701,149 @@ angular.module('patternfly.form').directive('pfRemainingCharsCount', ["$timeout"
     }
   };
 }]);
+;/**
+ * @ngdoc directive
+ * @name patternfly.modals.directive:pfAboutModal
+ *
+ * @description
+ * Directive for rendering modal windows.
+ *
+ * @param {string=} additionalInfo Text explaining the version or copyright
+ * @param {string=} copyright Product copyright information
+ * @param {string=} imgAlt The alt text for the corner grahpic
+ * @param {string=} imgSrc The source for the corner grahpic
+ * @param {boolean=} isOpen Flag indicating that the modal should be opened
+ * @param {function=} onClose Function to call when modal is closed
+ * @param {object=} productInfo data for the modal:<br/>
+ * <ul style='list-style-type: none'>
+ * <li>.product - the product label
+ * <li>.version - the product version
+ * </ul>
+ * @param {string=} title The product title for the modal
+ *
+ * @example
+ <example module="patternfly.modals">
+   <file name="index.html">
+     <div ng-controller="ModalCtrl">
+       <button ng-click="open()" class="btn btn-default">Launch About Modal</button>
+       <div pf-about-modal is-open="isOpen" on-close="onClose()" additional-info="additionalInfo"
+            product-info="productInfo" title="title" copyright="copyright" img-alt="imgAlt" img-src="imgSrc"></div>
+     </div>
+   </file>
+   <file name="script.js">
+     angular.module('patternfly.modals').controller('ModalCtrl', function ($scope) {
+       $scope.additionalInfo = "Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum " +
+         "laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. " +
+         "Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.";
+       $scope.copyright = "Trademark and Copyright Information";
+       $scope.imgAlt = "Patternfly Symbol";
+       $scope.imgSrc = "img/logo-alt.svg";
+       $scope.title = "Product Title";
+       $scope.productInfo = [
+         { name: 'Version', value: '1.0.0.0.20160819142038_51be77c' },
+         { name: 'Server Name', value: 'Localhost' },
+         { name: 'User Name', value: 'admin' },
+         { name: 'User Role', value: 'Administrator' }];
+       $scope.open = function () {
+         $scope.isOpen = true;
+       }
+       $scope.onClose = function() {
+         $scope.isOpen = false;
+       }
+     });
+   </file>
+ </example>
+ */
+angular.module('patternfly.modals')
+
+.directive("pfAboutModalTransclude", ["$parse", function ($parse) {
+  'use strict';
+  return {
+    link: function (scope, element, attrs) {
+      element.append($parse(attrs.pfAboutModalTransclude)(scope));
+    }
+  };
+}])
+
+.directive('pfAboutModal', function () {
+  'use strict';
+  return {
+    restrict: 'A',
+    scope: {
+      additionalInfo: '=?',
+      copyright: '=?',
+      close: "&onClose",
+      imgAlt: '=?',
+      imgSrc: '=?',
+      isOpen: '=?',
+      productInfo: '=',
+      title: '=?'
+    },
+    templateUrl: 'modals/about-modal.html',
+    transclude: true,
+    controller: ['$scope', '$modal', '$transclude', function ($scope, $modal, $transclude) {
+      if ($scope.isOpen === undefined) {
+        $scope.isOpen = false;
+      }
+
+      // The ui-bootstrap modal only supports either template or templateUrl as a way to specify the content.
+      // When the content is retrieved, it is compiled and linked against the provided scope by the $modal service.
+      // Unfortunately, there is no way to provide transclusion there.
+      //
+      // The solution below embeds a placeholder directive (i.e., pfAboutModalTransclude) to append the transcluded DOM.
+      // The transcluded DOM is from a different location than the modal, so it needs to be handed over to the
+      // placeholder directive. Thus, we're passing the actual DOM, not the parsed HTML.
+      $scope.openModal = function () {
+        $modal.open({
+          controller: ['$scope', '$modalInstance', 'content', function ($scope, $modalInstance, content) {
+            $scope.template = content;
+            $scope.close = function () {
+              $modalInstance.close();
+            };
+            $scope.$watch(
+              function () {
+                return $scope.isOpen;
+              },
+              function (newValue) {
+                if (newValue === false) {
+                  $modalInstance.close();
+                }
+              }
+            );
+          }],
+          resolve: {
+            content: function () {
+              var transcludedContent;
+              $transclude(function (clone) {
+                transcludedContent = clone;
+              });
+              return transcludedContent;
+            }
+          },
+          scope: $scope,
+          templateUrl: "about-modal-template.html"
+        })
+        .result.then(
+          function () {
+            $scope.close(); // closed
+          },
+          function () {
+            $scope.close(); // dismissed
+          }
+        );
+      };
+    }],
+    link: function (scope, element, attrs) {
+      // watching isOpen attribute to dispay modal when needed
+      var isOpenListener = scope.$watch('isOpen', function (newVal, oldVal) {
+        if (newVal === true) {
+          scope.openModal();
+        }
+      });
+      scope.$on('$destroy', isOpenListener);
+    }
+  };
+});
 ;/**
  * @ngdoc directive
  * @name patternfly.navigation.directive:pfVerticalNavigation
@@ -8321,6 +8473,34 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
     "<div class=form-group ng-class=\"{ 'has-error' : hasErrors() }\"><label for=\"{{ pfField }}\" class=\"control-label {{ pfLabelClass }}\">{{ pfLabel }}</label><div class=\"{{ pfInputClass }}\"><span ng-transclude></span> <span class=help-block ng-show=error.messages><ul><li ng-repeat=\"message in error.messages\">{{ message }}</li></ul></span></div></div>"
   );
 
+}]);
+;angular.module('patternfly.modals').run(['$templateCache', function($templateCache) {
+  'use strict';
+
+  $templateCache.put('modals/about-modal.html',
+    "<script type=text/ng-template id=about-modal-template.html><div class=\"about-modal-pf\">\n" +
+    "    <div class=\"modal-header\">\n" +
+    "      <button type=\"button\" class=\"close\" ng-click=\"close()\" aria-hidden=\"true\">\n" +
+    "        <span class=\"pficon pficon-close\"></span>\n" +
+    "      </button>\n" +
+    "    </div>\n" +
+    "    <div class=\"modal-body\">\n" +
+    "      <h1 ng-if=\"title\">{{title}}</h1>\n" +
+    "      <div ng-if=\"productInfo && productInfo.length > 0\" class=\"product-versions-pf\">\n" +
+    "        <ul class=\"list-unstyled\">\n" +
+    "          <li ng-repeat=\"info in productInfo\"><strong>{{info.name}}</strong> {{info.value}}</li>\n" +
+    "        </ul>\n" +
+    "      </div>\n" +
+    "      <div pf-about-modal-transclude=\"template\" class=\"product-versions-pf\"></div>\n" +
+    "      <div ng-if=\"additionalInfo\" class=\"product-versions-pf\">{{additionalInfo}}</div>\n" +
+    "      <div ng-if=\"copyright\" class=\"trademark-pf\">{{copyright}}</div>\n" +
+    "    </div>\n" +
+    "    <div class=\"modal-footer\">\n" +
+    "      <img ng-if=\"imgSrc\" ng-src=\"{{imgSrc}}\" alt=\"{{imgAlt}}\"/>\n" +
+    "    </div>\n" +
+    "  </div></script>"
+  );
+
 }]);
 ;angular.module('patternfly.navigation').run(['$templateCache', function($templateCache) {
   'use strict';