SRAZZANO ...

General discussion about Custom Buttons, including feature requests.

Re: SRAZZANO ...

Postby steve.marks59 » Mon May 14, 2018 7:50 pm

Do you know how I can stop Right and Double Right Click
context menu popups on buttons with Click, Double Click,
and Long Click
functions? Long Right Clicks do not trigger
the context menu but Right and Double Right Clicks do.

This is an example of the code I use for Click, Double Click,
and Long Click functions.

ImageCick DoubleClick LongClick Button Example

Code: Select all
////------ BUTTON CLICK FUNCTIONS DEFINED -----
this.leftclick = function(evt) {
    alert("   leftclick");
}
this.leftDclick = function(evt) {
    alert("   leftDclick");
}
this.leftLclick = function(evt) {
    alert("   leftLclick");
}
this.midclick = function(evt) {
    alert("    midclick");
}
this.midDclick = function(evt) {
    alert("    midDclick");
}
this.midLclick = function(evt) {
    alert("    midLclick");
}
this.rightclick = function(evt) {
    alert("  rightclick");
}
this.rightDclick = function(evt) {
    alert("  rightDclick");
}
this.rightLclick = function(evt) {
    alert("  rightLclick");
}

this.setAttribute("onclick", "custombuttons.gQuot.mHandler(event, this)");
this.setAttribute("ondblclick", "custombuttons.gQuot.mHandler(event, this)");

////------ PREVENT RIGHT CLICK CM ----
this.onmousedown = this.oncontextmenu = function(event) {
   if (event.button === 2)
      event.preventDefault();
      event.stopPropagation();
}

////------ BUTTON LONG CLICK FUNCTIONS DEFINED ----
var _this = this;
var isPressed;
this.timer = 0;
this.longTimer = 0;
this.removeAttribute("tooltiptext");

////------ MOUSEDOWN (LONG CLICK) ----
this.onmousedown = function(e) {
    if (e.target != this) return;
    else {
        e.preventDefault();
        clearTimeout(this.timer);
        this.open = false;
        this.removeAttribute("onclick");
        this.removeAttribute("ondblclick");
        isPressed = true;
        this.longTimer = setTimeout(function() {
            if (isPressed) {
                isPressed = false;
                // comment out the string below for long right click = CB context menu
                _this.oncontextmenu = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                }
                if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return; // ... cb context menu... or do something...
                else switch (e.button) {
                    case 0:
                        _this.leftLclick();
                        break;
                    case 1:
                        _this.midLclick();
                        break;
                    case 2:
                        _this.rightLclick(); // comment out this string for rightLongclick = CB context menu
                }
            }
        }, 500);
    }
}

////------ MOUSEUP (LONG CLICK) ----
this.onmouseup = function(e) {
    clearTimeout(this.longTimer);
    if (isPressed) {
        isPressed = false;
        this.oncontextmenu = null;
        this.setAttribute("onclick", "custombuttons.gQuot.mHandler(event, this)");
        this.setAttribute("ondblclick", "custombuttons.gQuot.mHandler(event, this)");
    }
}


I have no problem with context menu popups with buttons having
only Click and Double Click functions.

ImageCick DoubleClick NO LongClick Button Example

Code: Select all
////------ BUTTON CLICK FUNCTIONS DEFINED -----
this.leftclick = function(evt) {
    alert("   leftclick");
}
this.leftDclick = function(evt) {
    alert("   leftDclick");
}
this.midclick = function(evt) {
    alert("    midclick");
}
this.midDclick = function(evt) {
    alert("    midDclick");
}
this.rightclick = function(evt) {
    alert("  rightclick");
}
this.rightDclick = function(evt) {
    alert("  rightDclick");
}

this.setAttribute("onclick", "custombuttons.gQuot.mHandler(event, this)");
this.setAttribute("ondblclick", "custombuttons.gQuot.mHandler(event, this)");

////------ PREVENT RIGHT CLICK CM ----
this.onmousedown = this.oncontextmenu = function(event) {
   if (event.button === 2)
      event.preventDefault();
      event.stopPropagation();
}
steve.marks59
 
Posts: 455
Joined: Fri Dec 23, 2011 11:23 pm
Location: Claymont, Delaware

Re: SRAZZANO ...

Postby srazzano » Tue May 15, 2018 4:56 am

Delete:
Code: Select all
////------ PREVENT RIGHT CLICK CM ----
this.onmousedown = this.oncontextmenu = function(event) {
   if (event.button === 2)
      event.preventDefault();
      event.stopPropagation();
}

Add:
Code: Select all
////------ PREVENT RIGHT CLICK CM ----
var popup = document.getElementById("custombuttons-contextpopup");
this.onmouseover = function() { popup.hidden = true }
this.onmouseout = function() { popup.hidden = false }

Or to use Shift + Right-click on button for contextpopup;
Delete:
Code: Select all
////------ PREVENT RIGHT CLICK CM ----
this.onmousedown = this.oncontextmenu = function(event) {
   if (event.button === 2)
      event.preventDefault();
      event.stopPropagation();
}

Replace this.onmousedown = function(e) with:
Code: Select all
var popup = document.getElementById("custombuttons-contextpopup");
////------ MOUSEDOWN (LONG CLICK) ----
this.onmousedown = function(e) {
    if (e.target != this) return;
    else {
        if (e.button === 2 && !e.shiftKey) popup.hidden = true;
        else popup.hidden = false;
        clearTimeout(this.timer);
        this.open = false;
        this.removeAttribute("onclick");
        this.removeAttribute("ondblclick");
        isPressed = true;
        this.longTimer = setTimeout(function() {
            if (isPressed) {
                isPressed = false;
                if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return; // ... cb context menu... or do something...
                else switch (e.button) {
                    case 0:
                        _this.leftLclick();
                        break;
                    case 1:
                        _this.midLclick();
                        break;
                    case 2:
                        _this.rightLclick(); // comment out this string for rightLongclick = CB context menu
                }
            }
        }, 500);
    }
}

Add:
Code: Select all
this.onmouseout = function(e) { popup.hidden = false }
Last edited by srazzano on Wed May 16, 2018 11:35 pm, edited 4 times in total.
srazzano
 
Posts: 1545
Joined: Sat Mar 31, 2012 6:42 pm
Location: Las Vegas, Nevada

Re: SRAZZANO ...

Postby steve.marks59 » Wed May 16, 2018 7:50 am

WOW! THANKS Srazzano!
Your code solved my problem perfectly.
It does exactly what I wanted and even works with
the SHOW/HIDE MENU ON MOUSEOVER/ON MOUSEOUT
code I use for my
Code: Select all
this.type = "menu";
buttons.
I was concerned that adding your
Code: Select all
this.onmouseout = function(e) { popup.hidden = false }

to the "onmouseout" part of that code would break the
buttons but it did not!
Code: Select all
////------ SHOW/HIDE MENU ON MOUSEOVER/ON MOUSEOUT ----
var _this = this;
var isPressed;

this.timer = 0;
this.longTimer = 0;
this.removeAttribute("tooltiptext");

////------ MOUSEOVER ----
this.onmouseover = function(e) {
   if(!e.relatedTarget || Array.indexOf(this.getElementsByTagName("*"), e.relatedTarget) == -1) {
      clearTimeout(this.timer);
      this.timer = setTimeout(function() {
               _this. open = true;
}, 1000);}
};

////------ MOUSEOUT ----
this.onmouseout = function(e) {
clearTimeout(this.longTimer); isPressed = false;
if(!e.relatedTarget || Array.indexOf(this.getElementsByTagName("*"), e.relatedTarget) == -1) {
clearTimeout(this.timer); this.timer = setTimeout(function() {
 _this.open = false;
}, 500);}
};
this.onmouseout = function(e) { popup.hidden = false }
steve.marks59
 
Posts: 455
Joined: Fri Dec 23, 2011 11:23 pm
Location: Claymont, Delaware

Re: SRAZZANO ...

Postby srazzano » Wed May 16, 2018 6:01 pm

You can combine both onmouseout functions into one, like so:
Code: Select all
////------ MOUSEOUT ----
this.onmouseout = function(e) {
  popup.hidden = false;
  clearTimeout(this.longTimer); isPressed = false;
  if (!e.relatedTarget || Array.indexOf(this.getElementsByTagName("*"), e.relatedTarget) == -1) {
    clearTimeout(this.timer); this.timer = setTimeout(function() {
    _this.open = false;
  }, 500);}
}
srazzano
 
Posts: 1545
Joined: Sat Mar 31, 2012 6:42 pm
Location: Las Vegas, Nevada

Re: SRAZZANO ...

Postby steve.marks59 » Thu May 17, 2018 5:56 am

Again THANKS Srazzano.
Your help is very much appreciated by me.
steve.marks59
 
Posts: 455
Joined: Fri Dec 23, 2011 11:23 pm
Location: Claymont, Delaware

Previous

Return to General Discussion

cron