From c4df6154a982c0b54bcf1b7dc65b2def4a25e820 Mon Sep 17 00:00:00 2001
From: Runn Vermel <runn.vermel@ge.com>
Date: Fri, 29 Jan 2016 13:15:26 -0800
Subject: [PATCH] changed implementation of how the chevron is displayed on
 page, fixed breadcrumb bug on safari

---
 HISTORY.md                   |  2 +
 README.md                    | 88 ++++++++++++++++++++----------------
 bower.json                   |  2 +-
 deepNestedChildren.json      |  3 +-
 deepNestedGrandchildren.json |  3 +-
 demo.html                    |  3 +-
 directContext.json           |  3 +-
 initialContext.json          |  6 ++-
 package.json                 |  2 +-
 px-context-browser.html      | 45 +++++++++++++-----
 10 files changed, 100 insertions(+), 57 deletions(-)
 create mode 100644 HISTORY.md

diff --git a/HISTORY.md b/HISTORY.md
new file mode 100644
index 00000000..f7433b58
--- /dev/null
+++ b/HISTORY.md
@@ -0,0 +1,2 @@
+##release v0.8.0
+-Removed the default reference to the item chevron, since the Predix asset team does not support that. the functionality is still there, but now, you have to pass an attribute (has-children) and set it to true to ensure the chevrons show up.
diff --git a/README.md b/README.md
index 4614bc4a..e3b49b28 100644
--- a/README.md
+++ b/README.md
@@ -42,18 +42,6 @@ Finally, use the component in your application:
 
 ## Attributes
 
-#### label-field
-
-*Type:* **String** - (*Optional*) - *Default:* "name"
-
-Mapping for the field name in the context data that represents the display label for an item. This property allows data of any form/keys to be used as long as it has the notion of a 'display label' in it.
-
-```
-<px-context-browser
-	...
-	label-field="Custom Name">
-</px-context-browser>
-```
 #### browser-context
 
 *Type:* **String** - (*Required*) - *Default:* ""
@@ -68,32 +56,6 @@ The object can have 1 or more levels of assets, each group should be grouped und
 </px-context-browser>
 ```
 
-#### id-field
-
-*Type:* **String** - (*Optional*) - *Default:* "id"
-
-Mapping for the field name in the context data that represents a unique id for an item. This property allows data of any form/keys to be used as long as it has the notion of a 'unique id' in it.
-
-```
-<px-context-browser
-	...
-	id-field="identifier">
-</px-context-browser>
-```
-
-#### selected-item
-
-*Type:* **Object** - (*Optional*) - *Default:* null
-
-The item currently selected - application can detect which item is selected, for example via [ng-bind-polymer](https://github.com/PredixDev/ng-bind-polymer).
-
-```
-<px-context-browser
-	...
-	selected-item-id="1">
-</px-context-browser>
-```
-
 #### handlers
 
 *Type:* **Object** - (*Optional*) - *Default:* null
@@ -121,6 +83,43 @@ colBrowser.handlers = {
     }
 };
 ```
+####show-chevron
+*Type:* **Boolean** - (*Optional*) - *Default:* "false"
+
+This attributes allows you to use the "hasChildren" or "children" properties inside your json, to show the chevron which indicates this item has children.
+
+```
+<px-context-browser
+	...
+	show-chevron="true">
+</px-context-browser>
+```
+
+#### id-field
+
+*Type:* **String** - (*Optional*) - *Default:* "id"
+
+Mapping for the field name in the context data that represents a unique id for an item. This property allows data of any form/keys to be used as long as it has the notion of a 'unique id' in it.
+
+```
+<px-context-browser
+	...
+	id-field="identifier">
+</px-context-browser>
+```
+
+#### label-field
+
+*Type:* **String** - (*Optional*) - *Default:* "name"
+
+Mapping for the field name in the context data that represents the display label for an item. This property allows data of any form/keys to be used as long as it has the notion of a 'display label' in it.
+
+```
+<px-context-browser
+	...
+	label-field="Custom Name">
+</px-context-browser>
+```
 
 #### opened-item-name
 
@@ -135,6 +134,19 @@ Initial context name to be shown on page which defaults to 'Selected Context'.
 </px-context-browser>
 ```
 
+#### selected-item
+
+*Type:* **Object** - (*Optional*) - *Default:* null
+
+The item currently selected - application can detect which item is selected, for example via [ng-bind-polymer](https://github.com/PredixDev/ng-bind-polymer).
+
+```
+<px-context-browser
+	...
+	selected-item-id="1">
+</px-context-browser>
+```
+
 #### show-column-browser
 
 *Type:* **Boolean** - (*Optional*) - *Default:* False
diff --git a/bower.json b/bower.json
index a6009f51..ffd18b69 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "px-context-browser",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "main": [
     "px-context-browser.html"
   ],
diff --git a/deepNestedChildren.json b/deepNestedChildren.json
index 2d098ca1..115f3bc6 100644
--- a/deepNestedChildren.json
+++ b/deepNestedChildren.json
@@ -2,7 +2,8 @@
   "data": [{
     "name": "Nested Child 1",
     "identifier": "001-2a",
-    "isOpenable": true
+    "isOpenable": true,
+    "hasChildren": true
   },
   {
     "name": "Nested Child 2",
diff --git a/deepNestedGrandchildren.json b/deepNestedGrandchildren.json
index 4c61f4c7..a61ee683 100644
--- a/deepNestedGrandchildren.json
+++ b/deepNestedGrandchildren.json
@@ -3,7 +3,8 @@
     {
       "name": "Nested Grandchild 1",
       "identifier": "001-2aa",
-      "isOpenable": true
+      "isOpenable": true,
+      "hasChildren": true
     },{
       "name": "Nested Grandchild 2",
       "identifier": "001-2ab",
diff --git a/demo.html b/demo.html
index 635079be..e5eb5e0f 100644
--- a/demo.html
+++ b/demo.html
@@ -45,7 +45,8 @@ <h3>Demo</h3>
     <px-context-browser
       label-field="name"
       id-field="identifier"
-      browser-context="{{browserContext}}">
+      browser-context="{{browserContext}}"
+      show-chevron="true">
     </px-context-browser>
   </template>
   <script>
diff --git a/directContext.json b/directContext.json
index 4ecd429b..5d2da23e 100644
--- a/directContext.json
+++ b/directContext.json
@@ -3,7 +3,8 @@
       {
           "identifier": "001-1",
           "name": "Lots of Children",
-          "isOpenable" : true
+          "isOpenable" : true,
+          "hasChildren": true
       },
       {
         "identifier": "001-2",
diff --git a/initialContext.json b/initialContext.json
index 5226b9b6..0d393576 100644
--- a/initialContext.json
+++ b/initialContext.json
@@ -3,11 +3,13 @@
     {
       "name": "Lots of children",
       "identifier": "001-1",
-      "isOpenable": true
+      "isOpenable": true,
+      "hasChildren": true
     }, {
       "name": "Deep nested",
       "identifier": "001-2",
-      "isOpenable": true
+      "isOpenable": true,
+      "hasChildren": true
     }, {
       "name": "Nothing Below Me",
       "identifier": "001-3",
diff --git a/package.json b/package.json
index 7f4dd029..523a5bbe 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "px-context-browser",
     "author": "General Electric",
     "description": "A Px component",
-    "version": "0.7.7",
+    "version": "0.8.0",
     "private": true,
     "extName" : null,
     "repository" :
diff --git a/px-context-browser.html b/px-context-browser.html
index 9d6914ac..fea147ef 100644
--- a/px-context-browser.html
+++ b/px-context-browser.html
@@ -31,7 +31,8 @@
     <px-context-browser label-field="description"
                         parent-id-field="parent"
                         id-field="identifier"
-                        browser-context={{browserContext}}>
+                        browser-context={{browserContext}}
+                        show-chevron="true">
     </px-context-browser>
 
 ### code on your page
@@ -72,7 +73,7 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
             </h1>
             <ul class="list-inline list-inline--delimited">
               <template is="dom-repeat" items="{{openedBreadcrumbs}}">
-                <li>[[item]]</li>
+                <li>{{item}}</li>
               </template>
             </ul>
           </div>
@@ -91,7 +92,7 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
                 <div class="flex">
                   <template is="dom-repeat" id="levels" items="{{parentNodes}}">
                     <div class="flex flex--col column push" data-column>
-                      <div class="head">{{ item.header || '' }}</div>
+                      <div class="head">{{item.header}}</div>
                       <div class="flex__item scroll-y" on-scroll="scrollEndHandler">
                         <ul class$="{{UlSelected(item, selectedItem)}}">
                           <template is="dom-repeat" id="level" items="{{item.children}}">
@@ -99,7 +100,9 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
                               <span class="flex__item item-label">{{getItemLabel(item)}}</span>
                               <button class$="[[getItemOpenerClass(item)]]" on-click="openClickHandler" key$="[[getItemId(item)]]">Open
                               </button>
-                              <span class$="{{isItemHidden(!item.hasChildren)}}"><i class="fa fa-angle-right"></i></span>
+                              <template is="dom-if" if="{{_hasChildren(item)}}">
+                                <span><i class="fa fa-angle-right"></i></span>
+                              </template>
                             </li>
                           </template>
                         </ul>
@@ -239,6 +242,17 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
         openedBreadcrumbs: {
           type: Array,
           value: function() {return [];}
+        },
+        /**
+         * show chevron
+         * @type {Boolean}
+         * @default false
+         *
+         */
+        showChevron: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
         }
       },
       ready: function() {
@@ -387,14 +401,14 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
        * @private
        */
       configureBreadcrumbs: function(evt) {
-        this.splice('openedBreadcrumbs', 0, this.openedBreadcrumbs.length);
-        for (var index in this.parentNodes) {
-          if (index < this.parentNodes.length) {
-            if (this.getItemLabel(this.parentNodes[index]) !== '') {
-              this.push('openedBreadcrumbs', this.getItemLabel(this.parentNodes[index]));
+        var i,
+            len=this.parentNodes.length;
+        this.openedBreadcrumbs = [];
+          for (i=0; i<len;i++) {
+            if (this.getItemLabel(this.parentNodes[i])) {
+              this.push('openedBreadcrumbs', this.getItemLabel(this.parentNodes[i]));
             }
           }
-        }
       },
       /**
        * @param {Object} item
@@ -445,6 +459,15 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
           return (!item) ? "visuallyhidden" : '';
         }
       },
+      /**
+       * this method checks whether the attribute hasChildren has been set to true, and if it has,
+       * whether the item has a property by the name of children or hasChildren
+       * @param {object} item
+       * @private
+       */
+      _hasChildren: function(item) {
+        return (this.showChevron) ? (item.hasChildren || item.children) : false;
+      },
       /**
        * Observer on context attribute. loads up the initial Context of the browser.
        *
@@ -468,7 +491,7 @@ <h1 class="epsilon caps weight--normal u-m0" on-click="toggleColumnBrowser">
           for (var i in currentRoot) {
             if (currentRoot.hasOwnProperty(i)) {
               current_elem = currentRoot[i];
-              if(Object.keys(current_elem).indexOf('children') > -1) {
+              if(Object.keys(current_elem).indexOf('children') > -1 ) {
                   current_elem.inSelectedPath = true;
                 //only direct lineage of the selected child have children..
                 _this.push('parentNodes',current_elem);