JSFiddle - React, Tailwind, and code Playground

by Sinh Nguyen

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="testApp" ng-controller="ListController">
    <div>
        <strong>Gold: </strong>
        {{player.gold}}
    </div>
    <div class="list-group">
         <a href="#"
            class="list-group-item"
            ng-repeat="item in items"
            ng-context-menu="menuOptions">
             <span class="badge">{{item.cost}}</span>
             {{item.name}}
        </a>
    </div>
</div>

CSS

body > div,
body > div > div {
    padding: 10px;
}

JavaScript

var app = angular.module('testApp', []);

app.controller('ListController', ['$scope',
    function ($scope) {
        $scope.player = {
            gold: 100
        };
        $scope.items = [
            { name: 'Small Health Potion', cost: 4 },
            { name: 'Small Mana Potion', cost: 5 },
            { name: 'Iron Short Sword', cost: 12 }
        ];
        $scope.menuOptions = [
            ['Buy', function ($itemScope) {
                $scope.player.gold -= $itemScope.item.cost;
            }],
            
            ['Sell', function ($itemScope) {
                $scope.player.gold += $itemScope.item.cost;
            }]
        ];
    }
]);

app.directive('ngContextMenu', function ($parse) {
    var renderContextMenu = function ($scope, event, options) {
        if (!$) { var $ = angular.element; }
        $(event.currentTarget).addClass('context');
        var $contextMenu = $('<div>');
        $contextMenu.addClass('dropdown clearfix');
        var $ul = $('<ul>');
        $ul.addClass('dropdown-menu');
        $ul.attr({ 'role': 'menu' });
        $ul.css({
            display: 'block',
            position: 'absolute',
            left: event.pageX + 'px',
            top: event.pageY + 'px'
        });
        angular.forEach(options, function (item, i) {
            var $li = $('<li>');
            if (item === null) {
                $li.addClass('divider');
            } else {
                $a = $('<a>');
                $a.attr({ tabindex: '-1', href: '#' });
                $a.text(item[0]);
                $li.append($a);
                $li.on('click', function () {
                    $scope.$apply(function() {
                        item[1].call($scope, $scope);
                    });
                });
            }
            $ul.append($li);
        });
        $contextMenu.append($ul);
        $contextMenu.css({
            width: '100%',
            height: '100%',
            position: 'absolute',
            top: 0,
 ...