RTL support

[creativefctr]

Hi, I used this plugin in an RTL project. The sub menu is positioned incorrectly and some other things like icons are not in their right place. I fixed this by modifying CSS and some of the JS but I think RTL option should be added as a feature to the plugin. Would you plan to add this? Thanks

[bbrala]

Hi,

Thanks for the report. This seems to be the same issue as #239 if you can create a pull request with the changes you made to fix it, that would be awesome. I do consider this a usefull feature.

I was not planning to build it myself though.

Regards, Bjorn.

[creativefctr]

Thanks for your attention ... Since I did not have enough time, I hard coded the changes to just get it to work and did not do it the proper way (adding rtl option) so I don't think I can help you out by a pull. The correct way would require you to add standard RTL classes to CSS or decide if you would set a different CSS for RTL version.

But here are the changes I made so all you would require will be adding this if a RTL option is true or detect RTL state by document css:

In position submenu, this will fix the problem and you should put it inside some sort of "if(RTL)":

$menu.css('display', 'block').position({
                        my: 'right top',
                        at: 'left top',
                        of: this,
                        collision: 'flip fit'
                    }).css('display', '');

For SCSS:

.context-menu-submenu:after {
  border-width: 4px 4px 4px 0px;
  border-color: transparent $context-menu-submenu-arrow-color transparent transparent;
  left: 8px;
  right: auto;
}

.context-menu-item > .context-menu-list {
  left: -5px;
  right: auto;
}

%context-menu-icon {
  &:before {
    right: 0;
    left: auto;
  }
}

I hope I did not forget anything ...

[bbrala]

Thank you for tryring to help. :1:

[inlineHamed]

I fixed it by placing this in options:

        // fix position of submenus
        positionSubmenu: function($menu){
            if (typeof $menu === 'undefined') {
                // took from default implementation
                return;
            }
            
            // should be reset, otherwise for each open the menu will shift!
            $menu.css('right', 'auto'); 
            
            $.contextMenu.defaults.positionSubmenu.call(this, $menu);

            // do the trick
            $menu.css('right', $menu.css('left'));
        },