diff --git a/README.md b/README.md index 8553789..1bcd7b1 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,16 @@ Fired when a node is selected. {{x-tree model=tree onSelect=(action 'onSelect')}} ``` +#### onContextMenu + +Returns: `node` + +Fired on contextMenu event. + +```handlebars +{{x-tree model=tree onContextMenu=(action 'onContextMenu')}} +``` + ### Available options #### checkable diff --git a/addon/components/x-tree-node.js b/addon/components/x-tree-node.js index 36bda77..cce8dd0 100644 --- a/addon/components/x-tree-node.js +++ b/addon/components/x-tree-node.js @@ -17,6 +17,13 @@ export default Component.extend({ return get(this, 'model.id') === this.chosenId; }), + contextMenu(e) { + if (this.onContextMenu) { + e.preventDefault(); + this.onContextMenu(this.model) + } + }, + click() { if (this.onSelect && !get(this, 'model.isDisabled')) { let wasChecked = get(this, 'model.isChecked'); diff --git a/addon/templates/components/x-tree-branch.hbs b/addon/templates/components/x-tree-branch.hbs index fceb2c6..d0208d8 100644 --- a/addon/templates/components/x-tree-branch.hbs +++ b/addon/templates/components/x-tree-branch.hbs @@ -8,6 +8,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut model=child @@ -26,6 +27,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut expandedIcon=expandedIcon diff --git a/addon/templates/components/x-tree-children.hbs b/addon/templates/components/x-tree-children.hbs index a93ad16..00dd409 100644 --- a/addon/templates/components/x-tree-children.hbs +++ b/addon/templates/components/x-tree-children.hbs @@ -6,6 +6,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut model=model @@ -24,6 +25,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut model=model.children @@ -43,6 +45,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut expandedIcon=expandedIcon @@ -57,6 +60,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut expandedIcon=expandedIcon diff --git a/addon/templates/components/x-tree.hbs b/addon/templates/components/x-tree.hbs index 51007b3..2deaaf8 100644 --- a/addon/templates/components/x-tree.hbs +++ b/addon/templates/components/x-tree.hbs @@ -5,6 +5,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut model=model @@ -22,6 +23,7 @@ chosenId=chosenId onCheck=onCheck onSelect=onSelect + onContextMenu=onContextMenu onHover=onHover onHoverOut=onHoverOut expandedIcon=expandedIcon diff --git a/tests/integration/components/x-tree-test.js b/tests/integration/components/x-tree-test.js index 0e04763..b70dc01 100644 --- a/tests/integration/components/x-tree-test.js +++ b/tests/integration/components/x-tree-test.js @@ -1,7 +1,7 @@ import { module, test } from 'qunit'; import { set } from '@ember/object'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll, click } from '@ember/test-helpers'; +import { render, find, findAll, click, triggerEvent } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; import Component from '@ember/component'; @@ -241,4 +241,18 @@ module('Integration | Component | x-tree', function(hooks) { await click('.tree-node span'); assert.equal(this.selected, false, 're-enabled tree nodes can be selected again'); }); + + test('contextmenu event', async function(assert) { + this.set('onContextMenu', (item) => { + this.name = item.name; + }); + this.set('tree', standardTree); + + await render(hbs`{{x-tree model=tree onContextMenu=onContextMenu}}`); + await triggerEvent('.tree-node span', 'contextmenu') + + assert.equal(this.name, 'Root', 'item from contextmenu event is returned as expected'); + + }); + });