Skip to content

Commit d9b16c7

Browse files
jeff-phillips-18jeff-phillips-18
authored
Merge pull request patternfly#371 from dgutride/convert-about-modal
Convert about modal from directive to component style
2 parents e04cea6 + 24a93c3 commit d9b16c7

File tree

4 files changed

+198
-170
lines changed

4 files changed

+198
-170
lines changed

Diff for: ‎src/modals/about-modal.component.js

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.modals.component:pfAboutModal
4+
* @restrict E
5+
*
6+
* @description
7+
* Component for rendering modal windows.
8+
*
9+
* @param {string=} additionalInfo Text explaining the version or copyright
10+
* @param {string=} copyright Product copyright information
11+
* @param {string=} imgAlt The alt text for the corner grahpic
12+
* @param {string=} imgSrc The source for the corner grahpic
13+
* @param {boolean=} isOpen Flag indicating that the modal should be opened
14+
* @param {function=} onClose Function to call when modal is closed
15+
* @param {object=} productInfo data for the modal:<br/>
16+
* <ul style='list-style-type: none'>
17+
* <li>.product - the product label
18+
* <li>.version - the product version
19+
* </ul>
20+
* @param {string=} title The product title for the modal
21+
*
22+
* @example
23+
<example module="patternfly.modals">
24+
<file name="index.html">
25+
<div ng-controller="ModalCtrl">
26+
<button ng-click="open()" class="btn btn-default">Launch About Modal</button>
27+
<pf-about-modal is-open="isOpen" on-close="onClose()" additional-info="additionalInfo"
28+
product-info="productInfo" title="title" copyright="copyright" img-alt="imgAlt" img-src="imgSrc"></pf-about-modal>
29+
</div>
30+
</file>
31+
<file name="script.js">
32+
angular.module('patternfly.modals').controller('ModalCtrl', function ($scope) {
33+
$scope.additionalInfo = "Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum " +
34+
"laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. " +
35+
"Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.";
36+
$scope.copyright = "Trademark and Copyright Information";
37+
$scope.imgAlt = "Patternfly Symbol";
38+
$scope.imgSrc = "img/logo-alt.svg";
39+
$scope.title = "Product Title";
40+
$scope.productInfo = [
41+
{ name: 'Version', value: '1.0.0.0.20160819142038_51be77c' },
42+
{ name: 'Server Name', value: 'Localhost' },
43+
{ name: 'User Name', value: 'admin' },
44+
{ name: 'User Role', value: 'Administrator' }];
45+
$scope.open = function () {
46+
$scope.isOpen = true;
47+
}
48+
$scope.onClose = function() {
49+
$scope.isOpen = false;
50+
}
51+
});
52+
</file>
53+
</example>
54+
*/
55+
angular.module('patternfly.modals')
56+
57+
.directive("pfAboutModalTransclude", function ($parse) {
58+
'use strict';
59+
return {
60+
link: function (scope, element, attrs) {
61+
element.append($parse(attrs.pfAboutModalTransclude)(scope));
62+
}
63+
};
64+
})
65+
.component('pfModalContent', {
66+
templateUrl: 'about-modal-template.html',
67+
bindings: {
68+
resolve: '<',
69+
close: '&',
70+
dismiss: '&'
71+
},
72+
controller: function () {
73+
'use strict';
74+
var $ctrl = this;
75+
76+
$ctrl.$onInit = function () {
77+
$ctrl.additionalInfo = $ctrl.resolve.additionalInfo;
78+
$ctrl.copyright = $ctrl.resolve.copyright;
79+
$ctrl.imgAlt = $ctrl.resolve.imgAlt;
80+
$ctrl.imgSrc = $ctrl.resolve.imgSrc;
81+
$ctrl.isOpen = $ctrl.resolve.isOpen;
82+
$ctrl.productInfo = $ctrl.resolve.productInfo;
83+
$ctrl.title = $ctrl.resolve.title;
84+
$ctrl.template = $ctrl.resolve.content;
85+
};
86+
}
87+
})
88+
.component('pfAboutModal', {
89+
bindings: {
90+
additionalInfo: '=?',
91+
copyright: '=?',
92+
close: "&onClose",
93+
imgAlt: '=?',
94+
imgSrc: '=?',
95+
isOpen: '<?',
96+
productInfo: '=',
97+
title: '=?'
98+
},
99+
templateUrl: 'modals/about-modal.html',
100+
transclude: true,
101+
controller: function ($uibModal, $transclude) { //$uibModal, $transclude, $window
102+
'use strict';
103+
var ctrl = this;
104+
105+
// The ui-bootstrap modal only supports either template or templateUrl as a way to specify the content.
106+
// When the content is retrieved, it is compiled and linked against the provided scope by the $uibModal service.
107+
// Unfortunately, there is no way to provide transclusion there.
108+
//
109+
// The solution below embeds a placeholder directive (i.e., pfAboutModalTransclude) to append the transcluded DOM.
110+
// The transcluded DOM is from a different location than the modal, so it needs to be handed over to the
111+
// placeholder directive. Thus, we're passing the actual DOM, not the parsed HTML.
112+
ctrl.openModal = function () {
113+
//$window.console.log('hi mom');
114+
$uibModal.open({
115+
component: 'pfModalContent',
116+
resolve: {
117+
content: function () {
118+
var transcludedContent;
119+
$transclude(function (clone) {
120+
transcludedContent = clone;
121+
});
122+
return transcludedContent;
123+
},
124+
additionalInfo: function () {
125+
return ctrl.additionalInfo;
126+
},
127+
copyright: function () {
128+
return ctrl.copyright;
129+
},
130+
close: function () {
131+
return ctrl.close;
132+
},
133+
imgAlt: function () {
134+
return ctrl.imgAlt;
135+
},
136+
imgSrc: function () {
137+
return ctrl.imgSrc;
138+
},
139+
isOpen: function () {
140+
return ctrl.isOpen;
141+
},
142+
productInfo: function () {
143+
return ctrl.productInfo;
144+
},
145+
title: function () {
146+
return ctrl.title;
147+
}
148+
}
149+
})
150+
.result.then(
151+
function () {
152+
ctrl.close(); // closed
153+
},
154+
function () {
155+
ctrl.close(); // dismissed
156+
}
157+
);
158+
};
159+
ctrl.$onInit = function () {
160+
if (ctrl.isOpen === undefined) {
161+
ctrl.isOpen = false;
162+
}
163+
};
164+
165+
ctrl.$onChanges = function (changesObj) {
166+
if (changesObj.isOpen && changesObj.isOpen.currentValue === true) {
167+
ctrl.openModal();
168+
}
169+
};
170+
}
171+
});

Diff for: ‎src/modals/about-modal.directive.js

-143
This file was deleted.

Diff for: ‎src/modals/about-modal.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<script type="text/ng-template" id="about-modal-template.html">
22
<div class="about-modal-pf">
33
<div class="modal-header">
4-
<button type="button" class="close" ng-click="close()" aria-hidden="true">
4+
<button type="button" class="close" ng-click="$ctrl.close()" aria-hidden="true">
55
<span class="pficon pficon-close"></span>
66
</button>
77
</div>
88
<div class="modal-body">
9-
<h1 ng-if="title">{{title}}</h1>
10-
<div ng-if="productInfo && productInfo.length > 0" class="product-versions-pf">
9+
<h1 ng-if="$ctrl.title">{{$ctrl.title}}</h1>
10+
<div ng-if="$ctrl.productInfo && $ctrl.productInfo.length > 0" class="product-versions-pf">
1111
<ul class="list-unstyled">
12-
<li ng-repeat="info in productInfo"><strong>{{info.name}}</strong> {{info.value}}</li>
12+
<li ng-repeat="info in $ctrl.productInfo"><strong>{{info.name}}</strong> {{info.value}}</li>
1313
</ul>
1414
</div>
15-
<div pf-about-modal-transclude="template" class="product-versions-pf"></div>
16-
<div ng-if="additionalInfo" class="product-versions-pf">{{additionalInfo}}</div>
17-
<div ng-if="copyright" class="trademark-pf">{{copyright}}</div>
15+
<div pf-about-modal-transclude="$ctrl.template" class="product-versions-pf"></div>
16+
<div ng-if="$ctrl.additionalInfo" class="product-versions-pf">{{$ctrl.additionalInfo}}</div>
17+
<div ng-if="$ctrl.copyright" class="trademark-pf">{{$ctrl.copyright}}</div>
1818
</div>
1919
<div class="modal-footer">
20-
<img ng-if="imgSrc" ng-src="{{imgSrc}}" alt="{{imgAlt}}"/>
20+
<img ng-if="$ctrl.imgSrc" ng-src="{{$ctrl.imgSrc}}" alt="{{$ctrl.imgAlt}}"/>
2121
</div>
2222
</div>
2323
</script>

0 commit comments

Comments
 (0)