CODEWITHSUNDEEP
angulartypescript
user8055794
user8055794

Reputation:

How to open a menu with Long hold or Right click in Angular2

I am playing around with angular 2. I want to open a menu with 2,3 options on a mobile as well as on a pc.

What i need is, when i long hold or right click above the div with class container , i want a menu to be opened like this -

Image

HTML code as follows:

<div class="container"   id="main-wrapper" >   
  <section class="intro">  
  <div class="content" >
    <h1 [contentEditable]="contentEditable" >You can create full screen sections without javascript.</h1>
    <p [contentEditable]="contentEditable">The height is set to 90vh, that means 90% height.</p>
 </div>
</section>
</div>

explore.ts

rightClickMenu(){
// What should i write in this function to get a menu as explained.
}

and where should I call this menu, please guide.

Upvotes: 0

Views: 1063

Answers (1)

Atal Kishore
Atal Kishore

Reputation: 4738

calculate the time between mouse up event and mouse down event if the time is > `time-specified then show the menu.

in the component

timeInterval:int =0
var k;
doMouseDown()
{
   timeInterval=0;
   k=setInterval(function(){
   timeInterval++;
},1000);
}

doMouseUp()
{
  clearInterval(k);
  if(timeInterval >15) // replace 15 with your time for long hold)
  {
   //open menu
  }
  else
  {
   //show for short hold 
  }
}

Upvotes: 1

Related Questions