Skip to content

Commit 7a9441b

Browse files
jeff-phillips-18jeff-phillips-18
committed
Fixes for PR issues
1 parent 78a076e commit 7a9441b

9 files changed

+276
-30
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
@@ -1991,6 +1991,130 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout
19911991
};
19921992
});
19931993
;
1994+
/**
1995+
* @ngdoc directive
1996+
* @name patternfly.utils.directive:pfTransclude
1997+
* @restrict A
1998+
* @element ANY
1999+
* @param {string} pfTransclude specifies the type of transclusion to use.<br/>
2000+
* <strong>Values:</strong>
2001+
* <ul style='list-style-type: none'>
2002+
* <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
2003+
* <li> 'parent' - The transcluded contents scope is that of the element where transclusion happens.
2004+
* <li> 'child' - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
2005+
* </ul>
2006+
*
2007+
* @description
2008+
* Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
2009+
* for https://github.com/angular/angular.js/issues/5489
2010+
*
2011+
* @example
2012+
<example module="patternfly.utils">
2013+
<file name="index.html">
2014+
<style>
2015+
2016+
.pf-transclude-example div {
2017+
border: 1px solid #337ab7;
2018+
margin-bottom: 20px;
2019+
margin-left: 20px;
2020+
}
2021+
2022+
.pf-transclude-example p {
2023+
background-color: #337ab7;
2024+
margin: 0;
2025+
padding: 5px 10px;
2026+
}
2027+
2028+
.pf-transclude-example id {
2029+
display: inline-block;
2030+
background-color: #def3ff;
2031+
color: #000000;
2032+
border-radius: 10px;
2033+
width: 20px;
2034+
height: 20px;
2035+
text-align: center;
2036+
line-height: 20px;
2037+
margin-left: 5px;
2038+
}
2039+
2040+
.pf-transclude-example pre {
2041+
padding: 5px;
2042+
border-width: 0px;
2043+
}
2044+
</style>
2045+
<div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
2046+
<span>Here the scope id is: <id>{{$id}}</id></span>
2047+
2048+
<transclude-sibling class="pf-transclude-example">
2049+
<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>
2050+
</transclude-sibling>
2051+
2052+
<transclude-parent>
2053+
<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>
2054+
</transclude-parent>
2055+
2056+
<transclude-child>
2057+
<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>
2058+
</transclude-child>
2059+
</div>
2060+
</file>
2061+
2062+
<file name="script.js">
2063+
angular.module('patternfly.utils')
2064+
.controller( 'UtilCtrl', function($scope) {
2065+
2066+
})
2067+
2068+
.config(function($provide){
2069+
$provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
2070+
// Remove the original directive
2071+
$delegate.shift();
2072+
return $delegate;
2073+
}]);
2074+
})
2075+
2076+
.directive( 'transcludeSibling', function() {
2077+
return {
2078+
restrict: 'E',
2079+
transclude: true,
2080+
scope: {},
2081+
template:
2082+
'<div>' +
2083+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2084+
'<span pf-transclude></span>' +
2085+
'</div>'
2086+
}
2087+
})
2088+
2089+
.directive( 'transcludeParent', function() {
2090+
return {
2091+
restrict: 'E',
2092+
transclude: true,
2093+
scope: {},
2094+
template:
2095+
'<div>' +
2096+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2097+
'<span pf-transclude="parent"></span>' +
2098+
'</div>'
2099+
}
2100+
})
2101+
2102+
.directive( 'transcludeChild', function() {
2103+
return {
2104+
restrict: 'E',
2105+
transclude: true,
2106+
scope: {},
2107+
template:
2108+
'<div>' +
2109+
'<p>I am a directive with scope <id>{{$id}}</id></p>' +
2110+
'<span pf-transclude="child"></span>' +
2111+
'</div>'
2112+
}
2113+
})
2114+
;
2115+
</file>
2116+
</example>
2117+
*/
19942118
angular
19952119
.module('patternfly.utils').directive('pfTransclude', function () {
19962120
'use strict';
@@ -2212,7 +2336,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
22122336
* Directive for rendering a data list.
22132337
* <br><br>
22142338
*
2215-
* @param {object} config configuration settings for the sparkline chart:<br/>
2339+
* @param {object} config configuration settings for the data list:<br/>
22162340
* <ul style='list-style-type: none'>
22172341
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
22182342
* <li>.selectItems - (boolean) Allow row selection, default is false
@@ -2311,7 +2435,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
23112435
</file>
23122436
23132437
<file name="script.js">
2314-
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
2438+
angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
23152439
function ($scope) {
23162440
$scope.eventText = '';
23172441
var handleSelect = function (item, e) {
@@ -2383,8 +2507,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
23832507
city: "New York",
23842508
state: "New York"
23852509
},
2386-
];
2387-
};
2510+
]
2511+
}
23882512
]);
23892513
</file>
23902514
</example>
@@ -2395,11 +2519,10 @@ angular.module('patternfly.views').directive('pfDataList', [
23952519
return {
23962520
restrict: 'A',
23972521
scope: {
2398-
config: '=',
2522+
config: '=?',
23992523
items: '=',
24002524
eventId: '@id'
24012525
},
2402-
replace: true,
24032526
transclude: true,
24042527
templateUrl: 'views/datalist/data-list.html',
24052528
controller: ['$scope',
@@ -2454,7 +2577,7 @@ angular.module('patternfly.views').directive('pfDataList', [
24542577

24552578
if (alreadySelected) {
24562579
// already selected so deselect
2457-
scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
2580+
scope.config.selectedItems = _.without(scope.config.selectedItems, item);
24582581
} else {
24592582
// add the item to the selected items
24602583
scope.config.selectedItems.push(item);
@@ -2577,7 +2700,7 @@ angular.module('patternfly.views').directive('pfDataList', [
25772700
'use strict';
25782701

25792702
$templateCache.put('views/datalist/data-list.html',
2580-
"<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>"
2703+
"<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>"
25812704
);
25822705

25832706
}]);

‎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.

‎dist/styles/angular-patternfly.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
.data-list-pf .list-group-item .pficon {
125125
-webkit-align-items: center;
126126
align-items: center;
127-
color: #1186C1 !important;
127+
color: #1186C1;
128128
font-size: 26px;
129129
width: 26px;
130130
}
@@ -143,10 +143,10 @@
143143
border-color: #ededed;
144144
}
145145

146-
.list-group-item.active .pficon,
147-
.list-group-item.active:hover .pficon,
148-
.list-group-item.active:focus .pficon {
149-
color: #ffffff !important;
146+
.data-list-pf .list-group-item.active .pficon,
147+
.data-list-pf .list-group-item.active:hover .pficon,
148+
.data-list-pf .list-group-item.active:focus .pficon {
149+
color: #ffffff;
150150
}
151151
.data-list-pf .row-column {
152152
padding-right: 5px;

‎dist/styles/angular-patternfly.min.css

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';

0 commit comments

Comments
 (0)