ecomp-portal-FE-common/client/app/directives/right-click-menu/right-click-menu.directive.js

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20 'use strict';
  21 angular.module('ecompApp').directive( 'contextMenu', function($compile){
  22     contextMenu = {};
  23     contextMenu.restrict = 'AE';
  24     contextMenu.link = function( lScope, lElem, lAttr ){
  25         lElem.on('contextmenu', function (e) {
  26             e.preventDefault(); // default context menu is disabled
  27             //  The customized context menu is defined in the main controller. To function the ng-click functions the, contextmenu HTML should be compiled.
  28             lElem.append( $compile( lScope[ lAttr.contextMenu ])(lScope) );
  29             // The location of the context menu is defined on the click position and the click position is catched by the right click event.
  30             $('#contextmenu-node').css('left', e.clientX);
  31             $('#contextmenu-node').css('top', e.clientY);
  32         });
  33         lElem.on('mouseleave', function(e){
  34             console.log('Leaved the div');
  35             // on mouse leave, the context menu is removed.
  36             if($('#contextmenu-node') )
  37                 $('#contextmenu-node').remove();
  38         });
  39     };
  40     return contextMenu;
  41 });