Code coverage report for src/modals/about-modal.component.js

Statements: 94.44% (34 / 36)      Branches: 83.33% (5 / 6)      Functions: 95% (19 / 20)      Lines: 94.44% (34 / 36)      Ignored: none     

All files » src/modals/ » about-modal.component.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172                                                                                                            1       14   14                         14   14 14 14 14 14 14 14 14 14                                     15                 15   14       14 14 14   14     14     14     14     14     14     14     14     14           1             15 15         15 18 14          
/**
 * @ngdoc directive
 * @name patternfly.modals.component:pfAboutModal
 * @restrict E
 *
 * @description
 * Component 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>
       <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"></pf-about-modal>
     </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", function ($parse) {
  'use strict';
  return {
    link: function (scope, element, attrs) {
      element.append($parse(attrs.pfAboutModalTransclude)(scope));
    }
  };
})
.component('pfModalContent', {
  templateUrl: 'about-modal-template.html',
  bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  controller: function () {
    'use strict';
    var $ctrl = this;
 
    $ctrl.$onInit = function () {
      $ctrl.additionalInfo = $ctrl.resolve.additionalInfo;
      $ctrl.copyright = $ctrl.resolve.copyright;
      $ctrl.imgAlt = $ctrl.resolve.imgAlt;
      $ctrl.imgSrc = $ctrl.resolve.imgSrc;
      $ctrl.isOpen = $ctrl.resolve.isOpen;
      $ctrl.productInfo = $ctrl.resolve.productInfo;
      $ctrl.title = $ctrl.resolve.title;
      $ctrl.template = $ctrl.resolve.content;
    };
  }
})
.component('pfAboutModal', {
  bindings: {
    additionalInfo: '=?',
    copyright: '=?',
    close: "&onClose",
    imgAlt: '=?',
    imgSrc: '=?',
    isOpen: '<?',
    productInfo: '=',
    title: '=?'
  },
  templateUrl: 'modals/about-modal.html',
  transclude: true,
  controller: function ($uibModal, $transclude) { //$uibModal, $transclude, $window
    'use strict';
    var ctrl = this;
 
    // 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 $uibModal 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.
    ctrl.openModal = function () {
      //$window.console.log('hi mom');
      $uibModal.open({
        component: 'pfModalContent',
        resolve: {
          content: function () {
            var transcludedContent;
            $transclude(function (clone) {
              transcludedContent = clone;
            });
            return transcludedContent;
          },
          additionalInfo: function () {
            return ctrl.additionalInfo;
          },
          copyright: function () {
            return ctrl.copyright;
          },
          close: function () {
            return ctrl.close;
          },
          imgAlt: function () {
            return ctrl.imgAlt;
          },
          imgSrc: function () {
            return ctrl.imgSrc;
          },
          isOpen: function () {
            return ctrl.isOpen;
          },
          productInfo: function () {
            return ctrl.productInfo;
          },
          title: function () {
            return ctrl.title;
          }
        }
      })
        .result.then(
        function () {
          ctrl.close(); // closed
        },
        function () {
          ctrl.close(); // dismissed
        }
      );
    };
    ctrl.$onInit = function () {
      Iif (ctrl.isOpen === undefined) {
        ctrl.isOpen = false;
      }
    };
 
    ctrl.$onChanges = function (changesObj) {
      if (changesObj.isOpen && changesObj.isOpen.currentValue === true) {
        ctrl.openModal();
      }
    };
  }
});