Skip to content

Commit d7a4321

Browse files
jeff-phillips-18jeff-phillips-18
committed
Fixes for PR issues
1 parent e0f0da0 commit d7a4321

7 files changed

+270
-24
lines changed

‎dist/angular-patternfly.js

Lines changed: 132 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ angular.module( 'patternfly.utils', [] );
4848
* Views module for patternfly.
4949
*
5050
*/
51-
angular.module('patternfly.views', []);
51+
angular.module('patternfly.views', ['patternfly.utils']);
5252
;/**
5353
* @ngdoc directive
5454
* @name patternfly.autofocus:pfFocused
@@ -1987,6 +1987,130 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout
19871987
};
19881988
});
19891989
;
1990+
/**
1991+
* @ngdoc directive
1992+
* @name patternfly.utils.directive:pfTransclude
1993+
* @restrict A
1994+
* @element ANY
1995+
* @param {string} pfTransclude specifies the type of transclusion to use.<br/>
1996+
* <strong>Values:</strong>
1997+
* <ul style='list-style-type: none'>
1998+
* <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
1999+
* <li> 'parent' - The transcluded contents scope is that of the element where transclusion happens.
2000+
* <li> 'child' - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
2001+
* </ul>
2002+
*
2003+
* @description
2004+
* Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
2005+
* for https://github.com/angular/angular.js/issues/5489
2006+
*
2007+
* @example
2008+
<example module="patternfly.utils">
2009+
<file name="index.html">
2010+
<style>
2011+
2012+
.pf-transclude-example div {
2013+
border: 1px solid #337ab7;
2014+
margin-bottom: 20px;
2015+
margin-left: 20px;
2016+
}
2017+
2018+
.pf-transclude-example p {
2019+
background-color: #337ab7;
2020+
margin: 0;
2021+
padding: 5px 10px;
2022+
}
2023+
2024+
.pf-transclude-example id {
2025+
display: inline-block;
2026+
background-color: #def3ff;
2027+
color: #000000;
2028+
border-radius: 10px;
2029+
width: 20px;
2030+
height: 20px;
2031+
text-align: center;
2032+
line-height: 20px;
2033+
margin-left: 5px;
2034+
}
2035+
2036+
.pf-transclude-example pre {
2037+
padding: 5px;
2038+
border-width: 0px;
2039+
}
2040+
</style>
2041+
<div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
2042+
<span>Here the scope id is: <id>{{$id}}</id></span>
2043+
2044+
<transclude-sibling class="pf-transclude-example">
2045+
<pre>This content was transcluded using <b>pf-transclude</b> or <b>pf-transclude="sibling"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
2046+
</transclude-sibling>
2047+
2048+
<transclude-parent>
2049+
<pre>This content was transcluded using <b>pf-transclude="parent"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
2050+
</transclude-parent>
2051+
2052+
<transclude-child>
2053+
<pre>This content was transcluded using <b>pf-transclude="child"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
2054+
</transclude-child>
2055+
</div>
2056+
</file>
2057+
2058+
<file name="script.js">
2059+
angular.module('patternfly.utils')
2060+
.controller( 'UtilCtrl', function($scope) {
2061+
2062+
})
2063+
2064+
.config(function($provide){
2065+
$provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
2066+
// Remove the original directive
2067+
$delegate.shift();
2068+
return $delegate;
2069+
}]);
2070+
})
2071+
2072+
.directive( 'transcludeSibling', function() {
2073+
return {
2074+
restrict: 'E',
2075+
transclude: true,
2076+
scope: {},
2077+
template:
2078+
'<div>' +
2079+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2080+
'<span pf-transclude></span>' +
2081+
'</div>'
2082+
}
2083+
})
2084+
2085+
.directive( 'transcludeParent', function() {
2086+
return {
2087+
restrict: 'E',
2088+
transclude: true,
2089+
scope: {},
2090+
template:
2091+
'<div>' +
2092+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2093+
'<span pf-transclude="parent"></span>' +
2094+
'</div>'
2095+
}
2096+
})
2097+
2098+
.directive( 'transcludeChild', function() {
2099+
return {
2100+
restrict: 'E',
2101+
transclude: true,
2102+
scope: {},
2103+
template:
2104+
'<div>' +
2105+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2106+
'<span pf-transclude="child"></span>' +
2107+
'</div>'
2108+
}
2109+
})
2110+
;
2111+
</file>
2112+
</example>
2113+
*/
19902114
angular
19912115
.module('patternfly.utils').directive('pfTransclude', function () {
19922116
'use strict';
@@ -2208,7 +2332,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
22082332
* Directive for rendering a data list.
22092333
* <br><br>
22102334
*
2211-
* @param {object} config configuration settings for the sparkline chart:<br/>
2335+
* @param {object} config configuration settings for the data list:<br/>
22122336
* <ul style='list-style-type: none'>
22132337
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
22142338
* <li>.selectItems - (boolean) Allow row selection, default is false
@@ -2307,7 +2431,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
23072431
</file>
23082432
23092433
<file name="script.js">
2310-
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
2434+
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
23112435
function ($scope) {
23122436
$scope.eventText = '';
23132437
var handleSelect = function (item, e) {
@@ -2379,8 +2503,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
23792503
city: "New York",
23802504
state: "New York"
23812505
},
2382-
];
2383-
};
2506+
]
2507+
}
23842508
]);
23852509
</file>
23862510
</example>
@@ -2391,11 +2515,10 @@ angular.module('patternfly.views').directive('pfDataList', [
23912515
return {
23922516
restrict: 'A',
23932517
scope: {
2394-
config: '=',
2518+
config: '=?',
23952519
items: '=',
23962520
eventId: '@id'
23972521
},
2398-
replace: true,
23992522
transclude: true,
24002523
templateUrl: 'views/datalist/data-list.html',
24012524
controller: ['$scope',
@@ -2450,7 +2573,7 @@ angular.module('patternfly.views').directive('pfDataList', [
24502573

24512574
if (alreadySelected) {
24522575
// already selected so deselect
2453-
scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
2576+
scope.config.selectedItems = _.without(scope.config.selectedItems, item);
24542577
} else {
24552578
// add the item to the selected items
24562579
scope.config.selectedItems.push(item);
@@ -2573,7 +2696,7 @@ angular.module('patternfly.views').directive('pfDataList', [
25732696
'use strict';
25742697

25752698
$templateCache.put('views/datalist/data-list.html',
2576-
"<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\" ng-transclude=\"\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
2699+
"<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
25772700
);
25782701

25792702
}]);

‎dist/angular-patternfly.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/utils/transclude-directive.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,128 @@
11

2+
/**
3+
* @ngdoc directive
4+
* @name patternfly.utils.directive:pfTransclude
5+
* @restrict A
6+
* @element ANY
7+
* @param {string} pfTransclude specifies the type of transclusion to use.<br/>
8+
* <strong>Values:</strong>
9+
* <ul style='list-style-type: none'>
10+
* <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
11+
* <li> 'parent' - The transcluded contents scope is that of the element where transclusion happens.
12+
* <li> 'child' - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
13+
* </ul>
14+
*
15+
* @description
16+
* Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
17+
* for https://github.com/angular/angular.js/issues/5489
18+
*
19+
* @example
20+
<example module="patternfly.utils">
21+
<file name="index.html">
22+
<style>
23+
24+
.pf-transclude-example div {
25+
border: 1px solid #337ab7;
26+
margin-bottom: 20px;
27+
margin-left: 20px;
28+
}
29+
30+
.pf-transclude-example p {
31+
background-color: #337ab7;
32+
margin: 0;
33+
padding: 5px 10px;
34+
}
35+
36+
.pf-transclude-example id {
37+
display: inline-block;
38+
background-color: #def3ff;
39+
color: #000000;
40+
border-radius: 10px;
41+
width: 20px;
42+
height: 20px;
43+
text-align: center;
44+
line-height: 20px;
45+
margin-left: 5px;
46+
}
47+
48+
.pf-transclude-example pre {
49+
padding: 5px;
50+
border-width: 0px;
51+
}
52+
</style>
53+
<div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
54+
<span>Here the scope id is: <id>{{$id}}</id></span>
55+
56+
<transclude-sibling class="pf-transclude-example">
57+
<pre>This content was transcluded using <b>pf-transclude</b> or <b>pf-transclude="sibling"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
58+
</transclude-sibling>
59+
60+
<transclude-parent>
61+
<pre>This content was transcluded using <b>pf-transclude="parent"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
62+
</transclude-parent>
63+
64+
<transclude-child>
65+
<pre>This content was transcluded using <b>pf-transclude="child"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
66+
</transclude-child>
67+
</div>
68+
</file>
69+
70+
<file name="script.js">
71+
angular.module('patternfly.utils')
72+
.controller( 'UtilCtrl', function($scope) {
73+
74+
})
75+
76+
.config(function($provide){
77+
$provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
78+
// Remove the original directive
79+
$delegate.shift();
80+
return $delegate;
81+
}]);
82+
})
83+
84+
.directive( 'transcludeSibling', function() {
85+
return {
86+
restrict: 'E',
87+
transclude: true,
88+
scope: {},
89+
template:
90+
'<div>' +
91+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
92+
'<span pf-transclude></span>' +
93+
'</div>'
94+
}
95+
})
96+
97+
.directive( 'transcludeParent', function() {
98+
return {
99+
restrict: 'E',
100+
transclude: true,
101+
scope: {},
102+
template:
103+
'<div>' +
104+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
105+
'<span pf-transclude="parent"></span>' +
106+
'</div>'
107+
}
108+
})
109+
110+
.directive( 'transcludeChild', function() {
111+
return {
112+
restrict: 'E',
113+
transclude: true,
114+
scope: {},
115+
template:
116+
'<div>' +
117+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
118+
'<span pf-transclude="child"></span>' +
119+
'</div>'
120+
}
121+
})
122+
;
123+
</file>
124+
</example>
125+
*/
2126
angular
3127
.module('patternfly.utils').directive('pfTransclude', function () {
4128
'use strict';

‎src/views/datalist/data-list-directive.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Directive for rendering a data list.
77
* <br><br>
88
*
9-
* @param {object} config configuration settings for the sparkline chart:<br/>
9+
* @param {object} config configuration settings for the data list:<br/>
1010
* <ul style='list-style-type: none'>
1111
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
1212
* <li>.selectItems - (boolean) Allow row selection, default is false
@@ -105,7 +105,7 @@
105105
</file>
106106
107107
<file name="script.js">
108-
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
108+
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
109109
function ($scope) {
110110
$scope.eventText = '';
111111
var handleSelect = function (item, e) {
@@ -177,8 +177,8 @@
177177
city: "New York",
178178
state: "New York"
179179
},
180-
];
181-
};
180+
]
181+
}
182182
]);
183183
</file>
184184
</example>
@@ -189,11 +189,10 @@ angular.module('patternfly.views').directive('pfDataList', [
189189
return {
190190
restrict: 'A',
191191
scope: {
192-
config: '=',
192+
config: '=?',
193193
items: '=',
194194
eventId: '@id'
195195
},
196-
replace: true,
197196
transclude: true,
198197
templateUrl: 'views/datalist/data-list.html',
199198
controller: ['$scope',
@@ -248,7 +247,7 @@ angular.module('patternfly.views').directive('pfDataList', [
248247

249248
if (alreadySelected) {
250249
// already selected so deselect
251-
scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
250+
scope.config.selectedItems = _.without(scope.config.selectedItems, item);
252251
} else {
253252
// add the item to the selected items
254253
scope.config.selectedItems.push(item);

‎src/views/datalist/data-list.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
class="list-content"
88
ng-class="{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}"
99
ng-click="itemClick($event, item)"
10-
ng-dblclick="dblClick($event, item)" ng-transclude="">
10+
ng-dblclick="dblClick($event, item)">
1111
</div>
1212
<div class="list-check-box" ng-if="config.showSelectBox" style="padding-top: {{(config.rowHeight - 32) / 2}}px;">
1313
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="checkDisabled(item)" ng-change="checkBoxChange(item)"/>

‎src/views/views.module.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
* Views module for patternfly.
66
*
77
*/
8-
angular.module('patternfly.views', []);
8+
angular.module('patternfly.views', ['patternfly.utils']);

0 commit comments

Comments
 (0)