Tree: Hide chervron for folder that doesn't have children #860

Closed
mbeard opened this Issue Nov 21, 2014 · 7 comments

Projects

None yet

4 participants

@mbeard
Member
mbeard commented Nov 21, 2014

Need a convenient way to hide the chevron for a node when it doesn't have children. Something like this would work:

CSS:

.tree-branch[haschildren=false] .icon-caret {
    visibility: hidden;
}

In the datasource, it would rely on the developer setting a haschildren attribute for each node based on whatever logic was appropriate for your datasource. For example:

node.dataAttributes.hasChildren = (node.children && node.children.length > 0) ? true : false;

So the only change to Fuel UX would be the additional style declaration above.

@interactivellama
Member

Sounds good. Should it be .tree-branch[data-has-children=true]?

@mbeard
Member
mbeard commented Nov 21, 2014

I don't have a strong preference, your recommendation is probably better convention and best practice, so I'm fine with that too. However, I don't believe the tree is adding these as data attribute is it? At least I don't think i saw that in the markup in my example I put together.

@interactivellama
Member

I just remembered we have data-attributes in repeater with no dash or camelCase. data-currentview 😦

@mbeard
Member
mbeard commented Nov 21, 2014

OK, so we should just roll with the original example I posted for now? We can always change in the future with no impact on the consumer.

@interactivellama
Member

Per the jQuery spec, I recommend both.

.tree-branch[data-has-children=true] in markup and
$().data('hasChildren');

@mbeard
Member
mbeard commented Nov 21, 2014

Right, what i'm saying though is that the tree API doesn't support data attributes in that fashion currently...or at least I don't believe it does. And I'm not proposing that change as part of this scope.

@BenjaminNeilDavis BenjaminNeilDavis self-assigned this Nov 21, 2014
@interactivellama
Member

The tree's populate function supports all attributes. Anything that isn't cssClass, id, or data-icon get's added as an attribute of the node.

So this is an option, too, and it will apply data-has-children to tree-branch.

  {
    "name": "Engage",
    "type": "folder",
    "attr": { // <-- dataAttribute is deprecated, since it will add any attribute
      "id": "engage-folder",
      "data-has-children": true       // <----
    },
    "children": [
      {
        "name": "Abandoned Cart",
        "type": "folder"
      }
   ]
}
@mbeard mbeard added this to the 3.4.0 milestone Nov 24, 2014
@kevinparkerson kevinparkerson modified the milestone: 3.3.1, 3.4.0 Nov 25, 2014
@BenjaminNeilDavis BenjaminNeilDavis added a commit to BenjaminNeilDavis/fuelux that referenced this issue Nov 26, 2014
@BenjaminNeilDavis BenjaminNeilDavis Tree: Hide chervron for folder that doesn't have children #860
Selected background changed
4571cb9
@BenjaminNeilDavis BenjaminNeilDavis added a commit to BenjaminNeilDavis/fuelux that referenced this issue Nov 26, 2014
@BenjaminNeilDavis BenjaminNeilDavis Tree: Hide chervron for folder that doesn't have children #860
Selected background changed
613850a
@BenjaminNeilDavis BenjaminNeilDavis added a commit to BenjaminNeilDavis/fuelux that referenced this issue Nov 26, 2014
@cmcculloh @BenjaminNeilDavis cmcculloh + BenjaminNeilDavis Tree: Hide chervron for folder that doesn't have children #860
Selected background changed

Selected background changed
9116976
@BenjaminNeilDavis BenjaminNeilDavis added a commit to BenjaminNeilDavis/fuelux that referenced this issue Dec 5, 2014
@cmcculloh @BenjaminNeilDavis cmcculloh + BenjaminNeilDavis # This is a combination of 15 commits.
# The first commit's message is:
(848---simplified-checkbox-fix) fixes issue #848 where checkbox breaks from rapid clicking

# This is the 2nd commit message:

Tree: Hide chervron for folder that doesn't have children #860

Selected background changed

Selected background changed

# This is the 3rd commit message:

release 3.3.1

# This is the 4th commit message:

(890---checkbox-not-clickable) fixed issue #890 and added appropriate unit tests

# This is the 5th commit message:

(893---grunt-serve-fast-not-watching) added watch:contrib to servefast to keep it from shutting down immediately

# This is the 6th commit message:

repeater-thumbnail-justify: fixes #851 by coming up with an alternate justify solution

repeater-thumbnail-justify: fix to 'thumbnail_setSelectedItems' after making justify changes, which also makes unit tests pass

repeater-thumbnail-justify: yet another minor fix because lint yells about something dumb

repeater-thumbnail-justified: minor touchups after review

repeater-thumbnail-justified: additional function name improvements

repeater-thumbnail-justified: converted to thumbnail_alignment option instead so now center / justify / left / right (as well as 'none' or false) is supported

repeater-thumbnail-justified: added unit tests. also added "spacer" class to injected spans

repeater-thumbnail-justified: added default font-size for thumbnail

# This is the 7th commit message:

repeater-default-filter: Fixes #899 by making the default filter an object closely resembling what would be passed back by the selectlist if it were there

# This is the 8th commit message:

repeater-render-dataparams: Fixes #895 by allowing repeater render method to be passed dataSourceOptions which are then applied on top of whatever would be passed to the dataSource normally

# This is the 9th commit message:

(890---checkbox-not-clickable) fixed checkbox firing twice in Chrome

# This is the 10th commit message:

(890---checkbox-not-clickable) removed Paul Irish and added Dave Woodward

# This is the 11th commit message:

repeater-persisting-dataopts: Fixes #902 by allowing the repeater to preserve custom dataSource options

# This is the 12th commit message:

repeater-persisting-dataopts: minor modification to logic, preserves previously preserved dataSourceOptions instead of nuking them

# This is the 13th commit message:

updating dist

# This is the 14th commit message:

Utilizing less to make file more readable

# This is the 15th commit message:

Utilizing less to make file more readable
9411c2f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment