Left-CntextMenu

In this example below you will see how to do a Left-CntextMenu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jussic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jussic ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Left-CntextMenu</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html>
<html ng-app="myApp">
  <head lang="en">
    <meta charset="utf-8">
    <title>Bootstrap Table Directive</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controller.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css"
    rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> 
  </head> 
  <body ng-controller="Ctrl">
    <div class="span12">
      <a ng-context-menu="link:action;link2:action2;link3:action3;link4:action4;">Test context menu</a>      
    </div>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jussic/left-cntextmenu-pdepzE */
var app = angular.module('myApp', ['contextMenu']);

app.controller('Ctrl', function($scope) {
  $scope.entries = [];
  $scope.entries.push({
    action : 'action',
    label : 'label'
  });
  $scope.entries.push({
    action : 'action1',
    label : 'label1'
  });

  $scope.action = function(action) {
    console.log("action was clicked: " + action);    
  };
});

(function(angular) {
  var ngContextMenu = angular.module('contextMenu', []);

ngContextMenu.directive('ngContextMenu', function($compile) {
  return {
    restrict: 'A',
    compile: function compile(element, attrs) {
      
    return {
        pre: function preLink(scope, linkElement) {	
					var elementClick = false;
					var mItems = [];
					var entries = [];
					
					if (attrs.ngContextMenu !== null) {
						mItems = attrs.ngContextMenu.split(";");
						for (var i = 0; i<mItems.length; i++) {
							var item = mItems[i].split(":");
							if (item.length == 2) {
								entries.push({
									label : item[0],
									action : item[1]
								});
							}
						}
					}
          scope.entries = entries;
					element.bind('click', function(event) {						
						var $this = $(this);
				
						if ($this.is('.disabled, :disabled')) {
							return;
						} else {
							scope.hide();
              elementClick = true;	
              console.log(entries);
              var menu = 
                '<ul id="contextMenu" class="dropdown-menu" style="position: fixed; ' +   
                  'display: block; left: ' + event.clientX + 'px; top: ' + event.clientY + 'px;">' +
                  '<li ng-repeat="entry in entries">' +
                    '<a ng-click="action(entry.action)">{{entry.label}}</a>' +
                  '</li>' +  
                  '<li class="divider"></li>' +
                  '<li><a ng-click="action()">Static No Repeat</a>' +
                '</ul>';
              linkElement.after(menu);
              scope.$apply($compile(linkElement.next())(scope));
						}
					});
						
					$('html').on('click', function() {
            if (elementClick) {
              elementClick = false;
              return;
            }
            var menu = $('#contextMenu');
            if (menu.is(':visible') && !elementClick) {
							scope.hide();
						}
					});
						
					scope.hide = function() {
						$('#contextMenu').remove();
					};
				}
			};						
		}					
	};
});
})(window.angular);

Comments