How to create right click option


#1

Hello, I am having table row, in that action icon only able to show left click options. Now I need to create right click option for action icon as well as to the total row.

Here is the picture for the row,

option

For this html file having:

<tbody id="ember52450" class="ember-view body-view container-view">
<tr id="ember52672" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember52822" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember52825" class="ember-view view">
<div>1</div>
</div>
</td>
<td id="ember52831" class="ember-view lmdd-menu actions container-view">
<rs-icon id="ember52834" class="ember-view action-menu icon clickable-icon" title="Actions and transitions" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
</td>
<td id="ember52840" class="ember-view content-data view view-core_component_data-view-mixin name">
<div class="container">
<div class="content">autocomplete</div>
</div>
</td>
<td id="ember52846" class="ember-view content-data view view-core_component_data-view-mixin label">
<div class="container">
<div class="content">autodf</div>
</div>
</td>
</tr>
</tbody>

For this having corresponding ember file, In that of table part is below:

Core.component.ObjectTable.extend()
                .named("Admin.LMDView")
                .reopen({
                    controllerBinding: 'parentView.pagination',
                    modelBinding: 'controller.resultSet',
                    displayStartBinding: 'controller.contentPageStart',
                    displayLengthBinding: 'controller.contentPageLength',
                    noContentIcon: 'metadata',
                    noContentMessage: 'admin/navigators/administration/lmd/no-content',
                    hasHeader: true,
                    paginated: true,
                    trailingColumns: [],
                    columns: [
                        // TODO: Move labels into messageTable
                        { type: "actions", label: " " },
                        { name: "name", label: "Name" },
                        { name: "label", label: "Label" },
                    ],
                    getColumnView: function (column) {
                        if (column.type === 'itemNumber') {
                            return Core.view.Activity.ItemNumberView;
                        }
                        if (column.type === 'actions') {
                            return this.constructor.ActionsColumn;
                        }
                        if (column.type === 'boolean') {
                            return Core.component.ObjectTable.BooleanColumn;
                        }
                        if (column.name === 'description') {
                            return Core.component.ObjectTable.NullableColumn;
                        }
                        if (column.name === 'elementCriteria') {
                            return Admin.ElementCriteriaColumn;
                        }
                        if (column.type === 'icon') {
                            return Core.component.ObjectTable.IconColumn.extend({ withName: true });
                        }
                        return Core.view.Activity.GenericDataView;
                    },
                    getHeaderView: function (column) {
                        if (column.icon && column.type === 'boolean') {
                            return Core.component.ObjectTable.IconHeader;
                        }
                        if (column.type === 'itemNumber') {
                            return Core.component.ObjectTable.ItemNumberHeader;
                        }
                        if (column.type === 'selection') {
                            return Core.view.Activity.SelectionCheckmarkView;
                        }                       
                        return Core.component.ObjectTable.DefaultHeaderView;
                    }
                }).reopenClass({
                    ActionsColumn: Ember.ContainerView.extend()
                        .named("Admin.navigators.Administration.LMD.Actions")
                        .reopen({
                            tagName: 'td',
                            classNames: [ 'lmdd-menu' ],
                            childViews: [
                                Core.view.Icon.extend({
                                    model: 'action',
                                    classNames: [ 'action-menu' ],
                                    size: 20,
                                    titleBinding: 'Core.messageTable.workflow/chrome/action-menu',
                                    click: function () {
                                        var lmdd = this.get('parentView.rowView.object');
                                        var lmdds = this.get('parentView.rowView.tableView.model');
                                        var model = Core.model.Menu.create({
                                            loadState: 'done',
                                            content: [
                                                Core.model.Menu.Item.create({
                                                    label: 'Delete LMD Definition',
                                                    icon: 'delete',
                                                    invoke: function () {
                                                        var fmtLabel = lmdd.label ? (lmdd.label + " ("+lmdd.name+")") : lmdd.name;
                                                            Core.confirm(
                                                                "Delete LMD Definition",
                                                                "Are you sure you want to delete the LMD Definition for " + fmtLabel + "?",
                                                                "Delete",
                                                                "Cancel"
                                                            ).then(function () {
                                                                Core.services({
                                                                    service: 'lmdd',
                                                                    type: 'delete',
                                                                    data: {
                                                                        name: lmdd.name
                                                                    }
                                                                }).done(function () {
                                                                    lmdds.reload();
                                                                    Core.notify({
                                                                        title:"Delete LMD Definition",
                                                                        message: "LMD Definition " + fmtLabel + " deleted"
                                                                    });
                                                                });
                                                            });
                                                    }
                                                })
                                            ]
                                        });
                                        var view = Core.view.Menu.create({
                                            model: model,
                                            menuContext: { lmdd: lmdd },
                                            anchor: this.$(),
                                            highlight: this.$().parent('tr:first')
                                        });
                                        view.show();
                                        return false;
                                    }
                                })
                            ]
                        })
                })

For the table having bodyrowview.js, in that I have tried like this:

	    click: function (event) {			
		    var eventResult = this.get('tableView').clickRow(event, this.get('object'));
			if (eventResult !== false) {
				this.get('element').focus();
				$('.content-data, .action-menu, .managed-object-tools-icon.clickable').bind('contextmenu', function(e) {
					console.log(e);
					e.preventDefault();
					var actionMenuContext = this.get('object');
					var element = e.currentTarget;
					this.get('controller').send('contentItemActionMenu', row.length ? row : element, element, actionMenuContext);
					return false;
				}.bind(this));
			}
			return eventResult;
		},

I need the right click options come for whole table row(every “td”). I’m using ember 1.4.0 version. I’m new to the Ember. Please ask me if you need further details also. Your help will be appreciate. Thanks in advance.


#2

As for a specific answer, you can determine if something is a right click by examining the event.which properties for a click, mousedown or mouseup event (some browsers may only work for mousedown and mouseup, and not fire click). If it is 3, it was a right click. (That’s 3 in most modern browsers but you may find combinations that are 2 instead so test thoroughly.)

But in a broader sense, I would seriously consider pushing back on the idea of overriding the right click functionality and find a different way to allow the Delete functionality. IMO it’s bad usability in a couple different ways, 1) overriding defaults someone with disabilities may use and 2) hiding functionality in a way a lot of users may not find - right click is not a normal action, particularly for Mac users.


#3

I would just add that, maybe its not your case, but a user, someday, could try to use your app from a tablet, for example. For a good usability it is suggested to forget about peripherals and just rely on the higher level events, if possible.


#4

Hey @beddu :wave: I’m not sure if this was your question but I answered something very similar on Stack Overflow recently:

As it says in the bottom of that answer it was also the topic of one of our “May I ask a Question” episodes:

Let me know if either of these resources help you :slight_smile:


#5

The question was asked by @Boo :smiley:

Thank you!