msarsha / ng2-right-click-menu Goto Github PK

Hey everyone!

Now that the development env and development experience are improved I have some ideas I would like to implement.

First, the API has to change or be extended to allow the use of ng-template and\or content projections

This will give consumers a more flexible API.

Then, I would like to enhance the library with some extra features like suggested at #41 by @AlexLnz

I believe an improved API will allow us implement features more easily.

I would like to use a ctx property inside the label, for example

this.items= [
      {
        label: (ctx) => ctx.someString // Passing a function to the label option
        onClick: this.clickEvent,
        disabled: () => true,
      }
    ];

If the label option could accept a function that returns a string (with ctx as a parameter), this would be great.

Would be willing to give this a shot and make a pull request for this feature if agreed (would allow either a string OR function to be passed).

Hello @msarsha,

Is it possible to have sub-menus? Just like the following:

Thank you!

Used here: https://github.com/msarsha/ng2-right-click-menu/blob/master/projects/ng2-right-click-menu/src/lib/sh-context-menu.service.ts#L116

Need to check if using the GlobalPositionStrategy is more appropriate.
What happen now is, to use the ConnectedPositionStrategy I had to override the target's getBoundingClientRect() method.
This is not needed when using the GlobalPositionStrategy.

Problem arises when destroyed elements with menu.

overlayRef = undefined

src/lib/src/sh-context-menu.component.ts

  close(): void {
    this.setNotActive();
    this.menuContainer.detach();
    this.overlayRef.detach();
  }

Hello,

Currently the onClick() method is called, and after that the menu is closed.
As a result the menu stays open on the screen, while the user's onClick() method is processed.

Wouldn't it be better to first close the menu and then call onClick() so that the menu disappears from screen immediately?

I created a simple Angular 6 project and imported the library and got this error
Module not found: Error: Can't resolve 'rxjs/observable/fromEvent'.

Anyone with an idea?

Here we are attaching onClick event to each menu item but the problem is that when I get a click event in my own component not able to get the scope of component instead I am getting $event as a scope for the component.

Hi,

it would be practical to have an Id field in IShContextMenuItem:

id: string;

In this way it would be easy to route all clicks to one clicked-method and the clicked method could get the id of the clicked menu item.

regards,
Alex

Hi,

it would be practical if we could build up the menu just before it's opening.
The use case for this:

Let say we have a huge DIV which contains lots of child DIVs. Each child DIV can represent a certain "type" of something, let's say a disk shape, a rectangle shape or a triangle shape.
We want to assign the context menu to our huge DIV, so that it pops up, no matter where we click inside that DIV:

a) on empty space
b) on a disk shape
c) on a rectangle shape
d) on a triangle shape

Now we would like to build up the context menu dynamically, according to what has been clicked.

Hello,
I wanted the host component to change CSS class depending on if the menu was open or not. I have a work-around for now by waiting for clicks on Rx.Observable.fromEvent(), but this seemed like a more efficient way around it.

I had a merge request but realised shortly after that my solution was not ready for review and definitely wouldn't work.

Hi,

Using the menu within a 3rd party UI framework which supports movable windows.
Noticed that the overlay area does not occupy the whole browser window:

The resulting effect is that the context menu doesn't close when clicking outside the overlay area.

Hi msarsha,

I think the version number should be increase to 0.13 with the last change.
What about having a changelog.md also?

regards,
Alex

which version of this package can be use with which suitable version of angular/cdk version for angular 4 project please suggest

Thanks

Hi,

I was trying to implement ng2-right-click-menu on an Angular 5 project using cli. I am facing error when I do a right click on the content. I have been using it on angular 4 without any error.

ng:///AppModule/AppComponent.ngfactory.js:38 ERROR TypeError: Cannot read property 'length' of undefined
at InjectionService.getRootViewContainer (webpack-internal:///../../../../ng2-right-click-menu/src/injector.service.js:29)
at InjectionService.getRootViewContainerNode (webpack-internal:///../../../../ng2-right-click-menu/src/injector.service.js:63)
at InjectionService.appendComponent (webpack-internal:///../../../../ng2-right-click-menu/src/injector.service.js:97)
at ShContextMenuDirective.createOverlayComponent (webpack-internal:///../../../../ng2-right-click-menu/src/sh-context-menu.directive.js:62)
at ShContextMenuDirective.createMenu (webpack-internal:///../../../../ng2-right-click-menu/src/sh-context-menu.directive.js:39)
at ShContextMenuDirective.onClick (webpack-internal:///../../../../ng2-right-click-menu/src/sh-context-menu.directive.js:33)
at Object.eval [as handleEvent] (ng:///AppModule/AppComponent.ngfactory.js:43)
at handleEvent (webpack-internal:///../../../core/esm5/core.js:13450)
at callWithDebugContext (webpack-internal:///../../../core/esm5/core.js:14935)
at Object.debugHandleEvent [as handleEvent] (webpack-internal:///../../../core/esm5/core.js:14522)

Please tell me if I am missing something.

Thanks

Hi!, first thanks for the library!

I just started using it inside a grid that I have, and the problem I am facing is that I can't stop the propagation of the click event over the menu items, and the event is bubling up and causing some problems. It would be great to have the click event exposed for the menu items.

Thanks!

Hello,

Is it possible to have some influence on the styling of the menu items?
For example I would like to change the space between the items.

If the menu is used within a window (which is part of a third party UI framework), the menu is clipped.
It is only visible within the window. But it should be able to overlap the window borders and occupy the whole browser window.

When the menu is open next to the edge of the screen it will not fix it's position and part of it will be hidden.

Add instructions on how to setup a development env.

Tested on iPad Pro in Firefox and Safari (last versions of all). Nothing happens - native menu is disabled, but this one does not popup.

Add an options object to let user configure some behaviors.

I would like to use the visible attribute of the shContextMenuItem but I can't find a way to do so.
Here what I tried unsuccessfully:

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-item [visible]="isVisibleItem()">
      <div>
        Set Item
      </div>
    </ng-template>
</sh-context-menu>

isVisibleItem() {
    return false;
  }

I just tried this and it doesn't work, the item is still visible on the menu.

Can someone please make a stackblitz or a fiddle explaining how it works. Also it would be great if we could find this kind of information on the Readme. Thanks.

Hi,

When opening, the first item in the menu should be selected and the menu should get keyboard focus.
With <CursorDown> and <CursorUp> keys, the user can navigate through the menu. <Enter> selects the current item. <Esc> closes the menu.

I searched for the specs to the directive but didn't find them?
can you show me their location please?

Add rtl support using the options object in #2

@rafaelkachlon

I already added a property for it in the options type: https://github.com/msarsha/ng2-right-click-menu/blob/master/src/sh-context-options.ts#L5

In file ng2-right-click-menu.es5.js, ShAttachMenuDirective.prototype.ngOnDestroy should check if this.sub is undefined. In some cases I get an error: "Cannot find unsubscribe of undefined", when creating component with attachmenu and destroy it right away( before it can load properly ),

the z-index should be changed in this files:

context component

overlay component

@AlexLnz Let me know if you want to submit a PR.

I have two suggestion for this project.

1) Hide menu on resize window.
On resizing window, the position of menu gets misplaced.

2) Attach menu component to app-root.
I can not select menu item as I am using relative position for parent div.
Example for html template:

<div style="position: relative;z-index: 2;">
  <div (onBeforeMenuOpen)="onBefore($event)" [sh-context]="items">
    Click Me !
  </div>
</div>

Hi,

Longer text is broken into separate line:

The text should be displayed in one line. Without line break.
This happens only in sub-menu:

Hi,

When a menu has too many items - so that its overall height exceeds the browser's client area - then it would be useful to have scroll buttons.

• one arrow up button at the top of the menu (disabled if scrolling reaches the top)
• one arrow down button at the end of the menu (disabled if scrolling reaches the bottom)

When clicked, the items in the menu are scrolled by one line up or down.
When clicked and hold, the scrolling should go on continuesly.

Hi,

When doing a right-click on a menu item the browser's context menu opens:

Is there a simple way to suppress this?

cheers,
Alex

Hi,

It would be practible to have an optional "data" field in IShContextMenuItem.
This could refer to any user specific data which belongs to the menu item.

Hi,

I tried to use the context menu on a div which is inside a window. This is from a 3rd party UI toolkit. When right-clicking the popup opens somewhere else but not at the mouse cursor position:

Also when selecting the sub menu, the sub menu is shifted further (the sub menu appears far away from the place it should).

regards,
Alex

when i activate device mode on chrome with chrome dev tools, menu won't pop when right clicked.
any idea why?

Hi,
Is it possible to get the id of the element to which the menu is attached?
I have multiple icons on which I have attached the menu and I want to store the id of the icon on which that right click event is triggered.

Regards,
Ambika

moved from msarsha/msarsha.github.io#2

Have followed the setting up instructions, but am getting this error from angular CLI. Anyone have any idea how to fix this? (using angular 5.0.1).

This is after doing npm link in the /dist folder of ng2-right-click-menu. Have also added the path to the tsconfig.json etc.

WARNING in ./node_modules/ng2-right-click-menu/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression
    at ImportLazyContextDependency.getWarnings (C:\Users\me\git\project\front-end\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Users\me\git\project\front-end\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (C:\Users\me\git\project\front-end\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (C:\Users\me\git\project\front-end\node_modules\webpack\lib\Compiler.js:506:17)
    at C:\Users\me\git\project\front-end\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Users\me\git\project\front-end\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (C:\Users\me\git\project\front-end\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/ng2-right-click-menu/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./node_modules/ng2-right-click-menu/node_modules/@angular/core/src/linker.js
 @ ./node_modules/ng2-right-click-menu/node_modules/@angular/core/src/core.js
 @ ./node_modules/ng2-right-click-menu/node_modules/@angular/core/index.js
 @ ./node_modules/ng2-right-click-menu/src/sh-context-menu.module.js
 @ ./node_modules/ng2-right-click-menu/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Hi,

I have a hamburger menu, on which I am required to open the same right click menu that i have with a left mouse click.
Please help me on how to proceed with that.

Thanks

I'm not able to use this.ui.isLoading in createCopy function.
Can you please help me.

@component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
private defList: Array = [];
public ui.isLoading=false;
public def: any = { directory: [], blueprint: [], directoryIndex: -1, blueprintIndex: -1 };

constructor(private defService: DefService) {    }

ngOnInit(): void {
    localStorage.path = '';
    this.loadDef();
}
private loadDef(): void {      
        this.ui.isLoading = !this.ui.isLoading;
        this.defService.getDef().subscribe(response => {
            this.defList = response;             
            this.ui.isLoading = !this.ui.isLoading;
        });
}

/**
 * Menu Item
 */
public menuItemsBlueprint: IShContextMenuItem[] = [
    {
        label: 'Create Copy',
        onClick: this.createCopy
    },
    {
        label: 'Remove',
        onClick: this.remove
    }
];

private remove(event: any) {
console.log('clicked ', event);
};

private createCopy(event: any): void {
    let array =this.defList.filter((item, index) => {
        if (item.name.indexOf(event.dataContext.name + '-Copy') == 0) return item;
    })
    this.defService.getDef(event.dataContext.name).subscribe(response => {
       
    });

}
}

ShContextMenuComponent.html:7 ERROR TypeError: Cannot read property 'isLoading' of undefined
at Object.webpackJsonp.582.DashboardComponent.createCopy [as onClick] (dashboard.component.ts:135)
at ShContextMenuComponent.webpackJsonp.575.ShContextMenuComponent.onClick (sh-context-menu.component.js:31)
at Object.eval [as handleEvent] (ShContextMenuComponent.html:9)
at handleEvent (core.es5.js:11914)
at callWithDebugContext (core.es5.js:13206)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794)
at dispatchEvent (core.es5.js:8814)
at core.es5.js:9406
at HTMLLIElement. (platform-browser.es5.js:2687)
at ZoneDelegate.invokeTask (zone.js:424)

Hi,

First thanks for this nice module.

I just downloaded the latest version and
onBeforeMenuOpen is not present.

Comparing source code 0.0.14 with the latest version, I see that this event is no longer there.

Is there a reason for that, is it replace by something else?

I need this event to conditionally open the menu.

Thanks,

Hello,
I noticed that when I use this component, the mouseover menu disappear after I click on it with the right-click.
I admit that I am new in developing, but it seems like it changes the state of the underlying menu. This does not happen when I use the normal right-click menu.
I attach an image for better clarification.
I hope this might be useful for further development. In case I am missing something, could you tell me what should I do in order to maintain the menu after the right click?

Thank you,
Stefano