Fixes for PR issues

patternfly · Aug 26, 2015 · d7a4321 · d7a4321
1 parent e0f0da0
commit d7a4321
Show file tree

Hide file tree

Showing 7 changed files with 270 additions and 24 deletions.
diff --git a/dist/angular-patternfly.js b/dist/angular-patternfly.js
@@ -48,7 +48,7 @@ angular.module( 'patternfly.utils', [] );
  *   Views module for patternfly.
  *
  */
-angular.module('patternfly.views', []);
+angular.module('patternfly.views', ['patternfly.utils']);
 ;/**
  * @ngdoc directive
  * @name patternfly.autofocus:pfFocused
@@ -1987,6 +1987,130 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout
   };
 });
 ;
+/**
+ * @ngdoc directive
+ * @name patternfly.utils.directive:pfTransclude
+ * @restrict A
+ * @element ANY
+ * @param {string} pfTransclude specifies the type of transclusion to use.<br/>
+ * <strong>Values:</strong>
+ * <ul style='list-style-type: none'>
+ * <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
+ * <li> 'parent'  - The transcluded contents scope is that of the element where transclusion happens.
+ * <li> 'child'   - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
+ * </ul>
+ *
+ * @description
+ *   Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
+ *   for https://github.com/angular/angular.js/issues/5489
+ *
+ * @example
+<example module="patternfly.utils">
+  <file name="index.html">
+    <style>
+
+      .pf-transclude-example div {
+        border: 1px solid #337ab7;
+        margin-bottom: 20px;
+        margin-left:   20px;
+      }
+
+      .pf-transclude-example p {
+        background-color: #337ab7;
+        margin: 0;
+        padding: 5px 10px;
+      }
+
+     .pf-transclude-example id {
+        display: inline-block;
+        background-color: #def3ff;
+        color: #000000;
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        margin-left: 5px;
+      }
+
+      .pf-transclude-example pre {
+        padding: 5px;
+        border-width: 0px;
+      }
+    </style>
+    <div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
+      <span>Here the scope id is: <id>{{$id}}</id></span>
+
+      <transclude-sibling class="pf-transclude-example">
+        <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>
+      </transclude-sibling>
+
+      <transclude-parent>
+        <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>
+      </transclude-parent>
+
+      <transclude-child>
+        <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>
+      </transclude-child>
+    </div>
+  </file>
+
+  <file name="script.js">
+    angular.module('patternfly.utils')
+      .controller( 'UtilCtrl', function($scope) {
+
+      })
+
+      .config(function($provide){
+          $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
+              // Remove the original directive
+              $delegate.shift();
+              return $delegate;
+          }]);
+      })
+
+      .directive( 'transcludeSibling', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeParent', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="parent"></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeChild', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="child"></span>' +
+            '</div>'
+        }
+      })
+    ;
+  </file>
+</example>
+ */
 angular
   .module('patternfly.utils').directive('pfTransclude', function () {
     'use strict';
@@ -2208,7 +2332,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
  *   Directive for rendering a data list.
  *   <br><br>
  *
- * @param {object} config configuration settings for the sparkline chart:<br/>
+ * @param {object} config configuration settings for the data list:<br/>
  * <ul style='list-style-type: none'>
  * <li>.showSelectBox          - (boolean) Show item selection boxes for each item, default is true
  * <li>.selectItems            - (boolean) Allow row selection, default is false
@@ -2307,7 +2431,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
   </file>
 
   <file name="script.js">
-    angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
+ angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
       function ($scope) {
         $scope.eventText = '';
         var handleSelect = function (item, e) {
@@ -2379,8 +2503,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
             city: "New York",
             state: "New York"
           },
-        ];
-      };
+        ]
+      }
     ]);
   </file>
 </example>
@@ -2391,11 +2515,10 @@ angular.module('patternfly.views').directive('pfDataList', [
     return {
       restrict: 'A',
       scope: {
-        config: '=',
+        config: '=?',
         items: '=',
         eventId: '@id'
       },
-      replace: true,
       transclude: true,
       templateUrl: 'views/datalist/data-list.html',
       controller: ['$scope',
@@ -2450,7 +2573,7 @@ angular.module('patternfly.views').directive('pfDataList', [
 
               if (alreadySelected) {
                 // already selected so deselect
-                scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
+                scope.config.selectedItems = _.without(scope.config.selectedItems, item);
               } else {
                 // add the item to the selected items
                 scope.config.selectedItems.push(item);
@@ -2573,7 +2696,7 @@ angular.module('patternfly.views').directive('pfDataList', [
   'use strict';
 
   $templateCache.put('views/datalist/data-list.html',
-    "<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>"
+    "<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>"
   );
 
 }]);
diff --git a/dist/angular-patternfly.min.js b/dist/angular-patternfly.min.js
diff --git a/src/utils/transclude-directive.js b/src/utils/transclude-directive.js
@@ -1,4 +1,128 @@
 
+/**
+ * @ngdoc directive
+ * @name patternfly.utils.directive:pfTransclude
+ * @restrict A
+ * @element ANY
+ * @param {string} pfTransclude specifies the type of transclusion to use.<br/>
+ * <strong>Values:</strong>
+ * <ul style='list-style-type: none'>
+ * <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
+ * <li> 'parent'  - The transcluded contents scope is that of the element where transclusion happens.
+ * <li> 'child'   - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
+ * </ul>
+ *
+ * @description
+ *   Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
+ *   for https://github.com/angular/angular.js/issues/5489
+ *
+ * @example
+<example module="patternfly.utils">
+  <file name="index.html">
+    <style>
+
+      .pf-transclude-example div {
+        border: 1px solid #337ab7;
+        margin-bottom: 20px;
+        margin-left:   20px;
+      }
+
+      .pf-transclude-example p {
+        background-color: #337ab7;
+        margin: 0;
+        padding: 5px 10px;
+      }
+
+     .pf-transclude-example id {
+        display: inline-block;
+        background-color: #def3ff;
+        color: #000000;
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        margin-left: 5px;
+      }
+
+      .pf-transclude-example pre {
+        padding: 5px;
+        border-width: 0px;
+      }
+    </style>
+    <div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
+      <span>Here the scope id is: <id>{{$id}}</id></span>
+
+      <transclude-sibling class="pf-transclude-example">
+        <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>
+      </transclude-sibling>
+
+      <transclude-parent>
+        <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>
+      </transclude-parent>
+
+      <transclude-child>
+        <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>
+      </transclude-child>
+    </div>
+  </file>
+
+  <file name="script.js">
+    angular.module('patternfly.utils')
+      .controller( 'UtilCtrl', function($scope) {
+
+      })
+
+      .config(function($provide){
+          $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
+              // Remove the original directive
+              $delegate.shift();
+              return $delegate;
+          }]);
+      })
+
+      .directive( 'transcludeSibling', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeParent', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="parent"></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeChild', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="child"></span>' +
+            '</div>'
+        }
+      })
+    ;
+  </file>
+</example>
+ */
 angular
   .module('patternfly.utils').directive('pfTransclude', function () {
     'use strict';

diff --git a/src/views/datalist/data-list-directive.js b/src/views/datalist/data-list-directive.js
@@ -6,7 +6,7 @@
  *   Directive for rendering a data list.
  *   <br><br>
  *
- * @param {object} config configuration settings for the sparkline chart:<br/>
+ * @param {object} config configuration settings for the data list:<br/>
  * <ul style='list-style-type: none'>
  * <li>.showSelectBox          - (boolean) Show item selection boxes for each item, default is true
  * <li>.selectItems            - (boolean) Allow row selection, default is false
@@ -105,7 +105,7 @@
   </file>
 
   <file name="script.js">
-    angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
+ angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
       function ($scope) {
         $scope.eventText = '';
         var handleSelect = function (item, e) {
@@ -177,8 +177,8 @@
             city: "New York",
             state: "New York"
           },
-        ];
-      };
+        ]
+      }
     ]);
   </file>
 </example>
@@ -189,11 +189,10 @@ angular.module('patternfly.views').directive('pfDataList', [
     return {
       restrict: 'A',
       scope: {
-        config: '=',
+        config: '=?',
         items: '=',
         eventId: '@id'
       },
-      replace: true,
       transclude: true,
       templateUrl: 'views/datalist/data-list.html',
       controller: ['$scope',
@@ -248,7 +247,7 @@ angular.module('patternfly.views').directive('pfDataList', [
 
               if (alreadySelected) {
                 // already selected so deselect
-                scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
+                scope.config.selectedItems = _.without(scope.config.selectedItems, item);
               } else {
                 // add the item to the selected items
                 scope.config.selectedItems.push(item);

diff --git a/src/views/datalist/data-list.html b/src/views/datalist/data-list.html
@@ -7,7 +7,7 @@
                  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="">
+                 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)"/>

diff --git a/src/views/views.module.js b/src/views/views.module.js
@@ -5,4 +5,4 @@
  *   Views module for patternfly.
  *
  */
-angular.module('patternfly.views', []);
+angular.module('patternfly.views', ['patternfly.utils']);