changed implementation of how the chevron is displayed on page, fixed…

… breadcrumb bug on safari
predixdesignsystem · Jan 29, 2016 · c4df615 · c4df615
1 parent f452883
commit c4df615
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 57 deletions.
diff --git a/HISTORY.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +92,17 @@ <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}}">
                             <li on-click="itemClickHandler" id$="[[getItemId(item)]]" class$="{{isItemSelected(item, selectedItem)}}" >
                               <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);