Feature: allow html in menu item

[solival]

Thanks for simple yet very convenient context menu solution. Recently used it in my project and found that only plain text is allowed in menu titles. This is quite limiting when user wants to add some icons like <\i class="fa fa-check-square"><\/i> from FontAwesome package or mark some menu item as bold, italic, or underline. I'd like to propose change contextMenu.js:25 'text' to 'html': --- $a.text(typeof item[0] == 'string' ? item[0] : item[0].call($scope, $scope)); +++ $a.html(typeof item[0] == 'string' ? item[0] : item[0].call($scope, $scope));

This works wonderful for me and hope it can be useful for others.

[Templarian]

Awesome, I'll look into getting this integrated this weekend. I'm going to say, it probably will not work the way you suggested for security reasons, but it may be similar. :smile:

[Templarian]

I started to code this in, but I'm thinking it might be more ideal to implement this along with custom templates. So I'm going to hold off. For now your workaround is good for your use case.

An Idea

<!-- Template -->
<div class="dropdown clearfix" ng-style="shadow">
    <ul class="dropdown-menu" role="menu" ng-style="position">
        <!-- Item Template -->
    </ul>
</div>

<!-- Item Template -->
<li ng-class="{ 'divider': item.text === null }">
    <a ng-if="item.text !== null" href ng-bind="item.text"></a>
</li>

$scope.menuOptions = {
    template: '',                 // template or templateUrl
    templateUrl: '',
    itemTemplate: '',
    itemTemplateUrl: ''
    items: [{                     // Option list
        text: 'Buy',              // Or function
        html: '',                 // ngSanitize or $sce.trustAsHtml()
        itemTemplate: ''          // Override item template or templateUrl
        itemTemplateUrl: ''
    }, null, {
        text: 'Sell',
        click: function ($itemScope) {
            // code
        }
    }]
}

[solival]

Ok great! Thank you!

[igwtsoftware]

it does not work on tablet. Anyway to add touchstart event?

[Templarian]

@igwtsoftware Please open a new issue.

[malamili]

Great! Looking forward for the Custom Templates feature, for now will use the proposed workaround

[dream20tw]

I am waiting this feature too. Looking forward it.

[SeanHub]

+1 for templates, they sound like a good idea.

[thachp]

What is the status on this enhancement request?

[Templarian]

No progress... will take a pull request. Would be an awesome enhancement, but as I don't have a use for it yet personally, I have never got around to adding it. Mostly wrote up the idea above in the hope someone would get bored and write it in. :smile:

If someone wants to code in the really basic support for the following syntax I would accept the pull request. Just check for an object for the first index optionally.

{
    text: '', // or...
    html: '',
    click: function () { console.log() },
    enabled: function () { return true; }
}

Leave templates up to another future feature.

[thachp]

@Templarian - Okay will do. I will contribute to this request. Can you assign this issue to me?

[lucaskatayama]

+1

[thachp]

@Templarian - Please checkout my pull request. Look in demo/index.html to see working demo.

[martinmanzo]

Hi,

Why not change line 56 from: $a.text(text); to $a.html(text);

I did it and it renders basic HTML (i.e: <i> tags) and text correctly.

EDIT: Usage in my case:

menuOptions = [
        ['<i class="icon md-eye" aria-hidden="true"></i>  View details', function($itemScope) {
            ...
        }],
        null, 
        ['<i class="icon md-delete" aria-hidden="true"></i> Delete', function($itemScope) {
            ...
        }],
        ['<i class="icon md-edit" aria-hidden="true"></i>  Edit', function($itemScope) {
            ...
        }],
    ];

[Templarian]

I read these, just swamped right now with other stuff. Will try and spend some time on this, this weekend.

[dalbir]

tincho89's Idea working for me.

$scope.LeadActionOptions = [
            ['<i class="fa fa-star-o"></i>Favourite', function ($itemScope) {
                $itemScope.Ph.phone_type = 'Favourite'
            }],
            null,
            ['Cancelled', function ($itemScope) {
                $itemScope.Ph.phone_type = 'Cancelled'
            }],
            ['Lost', function ($itemScope) {
                $itemScope.Ph.phone_type = 'Lost'
            }]
    ];

[josetaira]

This is already included in v1.1.0