Support » Plugin: No Right Click Images Plugin » Coding Thoughts

  • Hi Keith

    Thank you for making this plugin. I had been using your old code, version 2.2 I think, when I realized you could still save with a long hold (mobile right click) in iOS.

    I updated to your current code and it does have a couple of issues so I started digging in.

    It seems the desktop code works for everything but iOS, so disabling the following with preventDefault works across desktops, Android and Windows mobile I think:

    document.addEventListener(‘mousedown’, disableEvent);
    document.addEventListener(‘contextmenu’, disableEvent);
    document.addEventListener(‘copy’, disableEvent);
    document.addEventListener(‘cut’, disableEvent);

    The problem starts with iOS in my experience, it does not support the above non touch screen defaults and instead everything is done through the touch event. As soon as we mess with the touch event it breaks clicking, scrolling etc.

    I dug and dug and found this:
    https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad

    and have tried and tested code using it where I apply the following css to images:

    -webkit-touch-callout: none;
    -webkit-user-select: none;

    it blocks the iOS context menu!

    Currently I am testing code still, but I am combining javascript preventDefault on desktop events with the css code above and it seems to work. No glitches, and the same functionality, no right click and no drag across all browsers, desktop and mobile.

    Hope this helps and am fascinated to chat it though with you. Let me know.

    Regards
    Mike

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Keith P. Graham

    (@kpgraham)

    Very cool!

    I think that I saw this in passing and may have not considered it because I wanted to block the context menu only when the event was started from an image or element with a background image.

    I will test it over the weekend and if I like it, I may make it one of the options.

    I really appreciate your interest in this. It is a cool thing that you’ve gone out out your way to help an old coder in his little hacking projects.

    Thanks,

    Keith

    Plugin Author Keith P. Graham

    (@kpgraham)

    I have made some changes and it works correctly on my iPad with images and elements with background images.

    I will test it, let it rest a bit, and then if it still works I’ll put it on the WordPress repository.

    I had similar code in a very old version of the plugin, but took it out. The trouble is that I don’t remember why. I hope that nobody complains about broken websites because of this. I think it might effect link clicking. I’ll test it better when it rains later this week and I have some time.

    I’ll have it up on http://www.BlogsEye.com under beta test plugins.

    Thanks again,

    Keith

    Hi Keith

    No problem I am pleased the code might be helpful. Your work has helped me, it is a pleasure to be able to help in return.

    That’s always the worry isn’t it, that something breaks something for someone somewhere … I am still testing, I will keep you posted if I learn of any problems. So far so good.

    Regards
    Mike

    Plugin Author Keith P. Graham

    (@kpgraham)

    The code broke sites that use scrolling by killing the drag events on images.

    I need to figure a better way to get things working on apple devices.

    Apple complicates things in that the css stays active in its cache long after the plugin is updated. Many panicky users contacting me.

    Keith

    Hi Keith

    I looked at the beta download on WordPress … In my testing it is use of the touch event (document.addEventListener(“touchstart”,kpg_nrci_cm, false);) that creates problems for iOS, not the css. I use this code:

    jQuery(document).ready(function() {
      jQuery('img').css('-webkit-user-select', 'none').css('-webkit-touch-callout', 'none'); 
      document.addEventListener('mousedown', bf.disableEvent);
      document.addEventListener('contextmenu', bf.disableEvent);
      document.addEventListener('copy', bf.disableEvent);
      document.addEventListener('cut', bf.disableEvent);
      bf.windowLoseFocus();
    }
    
    bf.disableEvent = function(event){
    	console.log('bf.disableEvent');
        if (event.target.tagName == "IMG") {
        	event.cancelBubble = true;
        	if(event.preventDefault != undefined) {
        		event.preventDefault();
        	}
        	if(event.stopPropagation != undefined) {
        		event.stopPropagation();
        	}
        	return false;
        }
    }
    bf.windowLoseFocus = function() {
    	console.log('bf.windowLoseFocus');
    	function onBlur() {
    		jQuery('main img, aside img').addClass('image-lose-focus');
    	};
    	function onFocus(){
    		jQuery('main img, aside img').removeClass('image-lose-focus');
    	};
    	if (/*@cc_on!@*/false) { // check for Internet Explorer
    		document.onfocusin = onFocus;
    		document.onfocusout = onBlur;
    	} else {
    		window.onfocus = onFocus;
    		window.onblur = onBlur;
    	}
    }

    I’m using it on a site that already uses jQuery, so I use jQuery’s ‘jQuery(document).ready’ but you don’t have to use jQuery.

    I’m not sure if this helps …

    The code above also includes a little additional obfustication, images are made transparent when the browser loses focus which happens when someone uses the screengrab app to take a screengrab. It’s NOT bulletproof in anyway, but none of this is and it possibly all helps.

    Regards
    Mike

    Plugin Author Keith P. Graham

    (@kpgraham)

    This is why I ignored the plugin for many years.

    My IOS testing does not block the scrolling with touchstart. I have to sit down when I have time and retest the whole thing.

    btw, I can’t use jQuery because it is possible (although uncommon) for a wordpress website to not have jQuery. Although I am OK with javascript, having written my first javascript routines in the 1990s, I never learned anything but cookbook jQuery.

    Keith

    Hi Keith

    Its definitely complicated. I’m pretty sure in iOS scrolling starts with a touchstart event. preventDefault on touchstart impacts scrolling. But I could be wrong. I’ve not spent a huge amount of time on it.

    Let me know if I can help you test etc. Am happy to.

    Regards
    Mike

    Plugin Author Keith P. Graham

    (@kpgraham)

    I’ve set the defaults to not implement the Apple stuff. I will let users turn it on if they think they need it rather than have it on by default.

    Android still does not work right in the default browser. Some mobile browsers are brain dead and ignore all of this stuff.

    At least some people will find it useful.

    Keith

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Coding Thoughts’ is closed to new replies.